:root { /* ══ ВИД «СТЕКЛО»: ЦВЕТА — ИМЕНАМИ РОЛЕЙ ═══════════════════════════════════════════════════ Значения — из скелета склада (`docs/склад-макет/style.css`, принят глазами владельца) и наброска главного (`docs/вид-2026-10-18-бирюза/образец-главного.html`). Расходится код с ними — прав образец. Имя говорит РОЛЬ, а не цвет: `--acc` — действие, `--crit` — потеря, `--paper` — светлый центр, `--frame` — рамка. ПЕРЕХОД СДЕЛАН ИМЕНАМИ, А НЕ ЗАМЕНОЙ ПО ВСЕМУ КОДУ (урок 20.08): старые имена остались ПСЕВДОНИМАМИ внизу блока и показывают на новые роли — двадцать экранов получили новый вид, не будучи переписаны. Каждое имя перенесено с проверкой, что в коде оно значит то же, что в образце (таблица — DESIGN.md §2). Заводить новое имя из старого списка нельзя. ⚠️ ЯВНАЯ РАЗВИЛКА ИМЁН. В образце `--acc-soft` — светлая бирюза ДЛЯ ТЁМНОГО ФОНА (#8ae4dc), в коде `--acc-soft` — бледная ПОДЛОЖКА пилюли на белом (образец зовёт её `--peach-tint`). Это разные роли под одним именем: в коде имя оставлено за подложкой, а светлая бирюза для тёмного фона названа `--acc-on-dark`. */ /* рамка: фон страницы — ОДИН ровный цвет, без картинки, горизонта и сияния (слово Романа 19.10) */ --frame:#091d1c; --glass:rgba(255,255,255,.05); --glass-line:rgba(198,227,225,.16); --glass-hi:rgba(255,255,255,.1); --on-frame:#f1faf9; --on-frame-mut:rgba(255,255,255,.78); --on-frame-dim:rgba(255,255,255,.62); /* тёмная плашка поверх светлого: подсказка, выбранный чип. Не цвет страницы. */ --chrome:#0f2a28; /* текст и подписи на светлом (образец: --ink, --mut, --mut-strong) */ --ink:#163230; --ink-2:#3d4a52; --txt:#163230; --txt-2:#4a5560; --mut:#6d7581; --dim:#6d7581; --faint:#6d7581; --decor:#9aa3ad; /* светлый центр, белая карточка, границы, трек полосы */ --paper:rgb(242 245 245); --card:#FFFFFF; --card-2:#F7F9F9; --line:#dde5e4; --line-2:#c9d3d2; --inset:#e6ecec; /* действие: кнопки, выбранное, график, главный совет. Бирюза 18.10. */ --acc:#2fa99f; --acc-2:#3dc3b8; --acc-3:#1d7770; --acc-soft:#e2f2f1; --acc-on-dark:#8ae4dc; /* заливка карточки и кнопки: слева направо из тёмного в светлый (образец: --peach-main) */ --fill-1:#26978f; --fill-2:#3bbab2; /* заливка выбранного пункта меню и аватара (образец: --peach-btn) */ --acc-fill:linear-gradient(135deg,#32a399,#277f77); --acc-fill-hover:linear-gradient(135deg,#2b9188,#216f68); /* потеря и тревога — только малиновый; с бирюзой в одном элементе не смешивается */ --crit:#b7465d; --crit-soft:#fcedf0; /* янтарь — спокойное «обратить внимание» (сбой у нас, источник отстал; §6), не потеря и не деньги */ --warn:#8f5f12; --warn-soft:#fbf4e4; /* «выросло» — спокойный зелёный образца (--ok), не второй акцент */ --good:#2f6b45; --good-soft:#e3f0e6; --sh-1:0 1px 2px rgba(22,50,48,.06),0 10px 26px rgba(22,50,48,.06); --sh-2:0 16px 34px -18px rgba(22,50,48,.35); --glow:0 18px 36px -18px rgba(38,151,143,.65); /* блеск ТОЛЬКО под курсором */ /* ★★★ ЗНАК СНОСКИ — ОДНА КАРТИНКА: КОЛЬЦО И «i» В ОДНОЙ МАСКЕ (правка владельца 21.08). Прежде кружок рисовала РАМКА, а «i» была буквой внутри. Две картинки на дробных координатах строки округляются НЕЗАВИСИМО, и зазор между ними в каждой сноске выходил свой: замер прототипа — разброс 0,30 px, «гуляет» 40 значков из 186. Одной картинкой — ноль из 187. Куда бы округление ни сдвинуло значок, оно двигает круг вместе со знаком. ⚠️ В СЕРЕДИНУ ПОСТАВЛЕН ЦЕНТР КРАСКИ, А НЕ ЦЕНТР КОРОБКИ. У «i» палочка вчетверо тяжелее точки, и знак, выставленный «по линейке», глаз читает как съехавший вниз. Точка на 5,86 и палочка от 9,96 подобраны так, что центр масс краски приходится ровно на середину круга, — это на 0,42 px выше, чем дало бы выравнивание по габаритам знака. Числа не трогать: они не «примерно красиво», а условие того, что значок выглядит по центру. */ --знак-i:url('data:image/svg+xml;utf8,'); /* ── старые имена: псевдонимы на новые роли, чтобы не переписывать 20 экранов одним коммитом ── `--good` значит «выросло» и стоит на пилюлях роста; в образце тем же именем (`--ok`) назван тот же смысл, а глубокий бирюзовый текст на подложке — `--acc-3`. */ --muted:var(--mut); --border:var(--line); --border-2:var(--line-2); --teal:var(--acc); --teal-strong:var(--acc-3); --teal-br:var(--acc-2); --teal-soft:var(--acc-soft); --steel:var(--acc-3); --steel-strong:#176560; --shadow:var(--sh-1); --shadow-md:var(--sh-2); --pano-sans:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; /* `--neutral` — «нейтральная величина» диаграмм: столбец выручки, кант обычной тревоги. Не сигнал и не бренд — именно «просто величина». `--on-teal` — что пишем поверх заливки действия. */ --neutral:#5f8a8c; --on-teal:#FFFFFF; /* ─── ШКАЛА ГЕОМЕТРИИ (Э2.0д) ───────────────────────────────────────────── Интервалы, радиусы и ширина полосы — ступенями, а не числом по месту: число по месту = новая ступень, которой нет в системе, и следующий экран разъедется снова. Стережёт `pnpm check:design`. Ступень 2px (--sp-05) — половинная, ТОЛЬКО для микро-элементов: чипы, бейджи, ярлык базиса. Ступень 5px (--sp-15) заведена 21.08 под зазор надстрочного значка сноски (замерено владельцем). Шаг между карточками — `--sp-4` (14): главный ритм экрана. ★ 19.10 РАДИУСЫ ВИДА «СТЕКЛО» (скелет склада): карточка 22, панели рамки 30, светлый центр 34. Радиусы по роли, а не по размеру: мелкое (теги, чипы, бары) · средние поверхности (кнопки, вложенные панели, поля) · карточка · панель рамки · центр · пилюля. */ --sp-05:2px; --sp-1:4px; --sp-15:5px; --sp-2:8px; --sp-3:12px; --sp-4:14px; --sp-5:20px; --sp-6:26px; --sp-7:34px; --r-1:8px; --r-2:12px; --r-3:22px; --r-4:30px; --r-5:34px; --r-pill:999px; /* Полоса контента. Основная — внешняя рамка контента; узкая — для форм и сплошного текста. */ --w-page:1360px; --w-narrow:720px; /* ── РАМКА: числа, от которых пляшет вся раскладка (скелет склада) ── */ --h-top:52px; --w-menu:232px; --w-menu-min:76px; --w-side:272px; }