/* * base.css — сброс, типографика, сетка страницы, общая шапка, таблицы. * Цвета и шрифты — только через переменные из tokens.css (подключается * раньше этого файла в ). */ /* ---------- Сброс ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-width: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.5; font-variant-numeric: tabular-nums; } img, svg { max-width: 100%; display: block; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } table { border-collapse: collapse; width: 100%; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, p { margin: 0; } /* ---------- Типографика ---------- */ h1, h2, h3, h4, .display { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.01em; color: var(--ink); } h1 { font-size: 28px; line-height: 1.15; } h2 { font-size: 21px; line-height: 1.2; } h3 { font-size: 16px; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); } .num, .mono, code { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .text-soft { color: var(--ink-soft); } .text-faint { color: var(--ink-faint); } .text-accent { color: var(--accent); } .text-good { color: var(--good); } .text-bad { color: var(--bad); } .text-warn { color: var(--warn); } /* ---------- Общий каркас страницы ---------- */ .page { max-width: var(--content-max); margin: 0 auto; padding: 20px 16px 64px; } .hub-page { max-width: 1040px; } /* ---------- Шапка (#site-header, заполняется EMS.ui.initHeader) ---------- */ #site-header { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--line); } .site-header__bar { max-width: var(--content-max); margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .site-header__object { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: 0.01em; white-space: nowrap; } .site-header__object small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 11px; color: var(--ink-faint); letter-spacing: 0.03em; text-transform: uppercase; } .site-header__nav { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; } .site-header__nav a { display: inline-block; padding: 7px 12px; border-radius: var(--radius); font-size: 13px; font-weight: 500; text-decoration: none; color: var(--ink-soft); border: 1px solid transparent; } .site-header__nav a:hover { background: var(--paper-2); } .site-header__nav a.is-active { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-soft); font-weight: 600; } .site-header__roles { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; } .site-header__role-btn { padding: 6px 10px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); font-size: 12px; font-weight: 500; cursor: pointer; color: var(--ink-soft); } .site-header__role-btn:hover { border-color: var(--line-strong); } .site-header__role-btn.is-active { background: var(--ink); border-color: var(--ink); color: var(--surface); } .site-header__banner { background: var(--warn-soft); color: #6B5216; font-size: 12px; font-weight: 500; text-align: center; padding: 5px 16px; border-top: 1px solid var(--line); letter-spacing: 0.01em; } @media (max-width: 720px) { .site-header__bar { justify-content: center; text-align: center; } .site-header__nav, .site-header__roles { justify-content: center; width: 100%; } } /* ---------- Раскладка блока: телефон слева + панель справа ---------- */ .block-layout { display: grid; grid-template-columns: var(--phone-width) 1fr; gap: 24px; align-items: start; } .block-layout__phone { position: sticky; top: 84px; } .block-layout__panel { min-width: 0; } @media (max-width: 900px) { .block-layout { grid-template-columns: 1fr; } .block-layout__phone { position: static; margin: 0 auto 24px; } } /* ---------- Таблицы (плоские, без скруглений/теней) ---------- */ .data-table-wrap { border: 1px solid var(--line); background: var(--surface); overflow-x: auto; } .data-table { width: 100%; min-width: 720px; font-size: 13px; } .data-table th, .data-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; } .data-table th { background: var(--paper-2); color: var(--ink-soft); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; position: sticky; top: 0; } .data-table tbody tr { cursor: pointer; } .data-table tbody tr:hover { background: var(--paper); } .data-table td.wrap, .data-table th.wrap { white-space: normal; } .data-table tfoot td { font-weight: 600; border-top: 2px solid var(--line-strong); border-bottom: none; } /* ---------- Формы (используются в «телефоне» и drawer) ---------- */ .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .field label { font-size: 12px; font-weight: 600; color: var(--ink-soft); } .field input, .field select, .field textarea { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; background: var(--surface); font-size: 13px; width: 100%; } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); } .field-hint { font-size: 11px; color: var(--ink-faint); } /* ---------- Утилиты ---------- */ .section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 28px 0 10px; } .stack { display: flex; flex-direction: column; gap: 12px; } .row { display: flex; gap: 12px; align-items: center; } .row-wrap { flex-wrap: wrap; } .spacer { flex: 1 1 auto; } .mt-0 { margin-top: 0; } @media (max-width: 420px) { .page { padding: 16px 16px 48px; } }