/* ═══════════════════════════════════════════════════════════════════════════ GOLDJAXE Scribe — слой дизайн-токенов · Corporate Brutalism (Brand OS) Ветка design-brutalism: перевод с Synology-языка на фирменный язык холдинга GOLDJAXE (эталон canonical/landings/ai.html + ui-kit light theme v2). Принципы: · Радиусы — гибрид ui-kit v4.176 (sm 4 / md 8 / lg 12), терминальные плашки квадратны · Светлая тема v3 (палитра Макса, академия lesson-v2): тёплый нейтраль #F8F7F4 + белые карточки #FFFFFF + чернила #0A0A0A. Золото РАЗВЕДЕНО на три роли — заливка #C9A332 (текст на ней тёмный), текст-акцент #7A6614 (бронза AA), яркий стоп #EBC554. Убрана «грязноватость» прежней бежево-бронзовой темы. · Тёмная тема: нейтральный графит — лестница слоёв #101216 фон → #1E2229 карточка → #262B33 вложенные плитки → #2F353E hover, золото-акцент #EBC554 · Тема «Ночь» — вторая тёмная (палитра из прототипа v10): глубже и холоднее графита, холст #08090E. Привязана к тёмной ЯРКОСТИ везде, где система различает лишь «светлая/тёмная» · Шрифты: Inter (текст) + JetBrains Mono (статусы/данные, кириллица ОК) + Space Mono (ТОЛЬКО латинский wordmark — кириллицы в нём нет) · Золото/бронза — единственный сигнатурный акцент, экономно Единый источник правды. Экраны (style.css) и компоненты (components.css) подключают этот файл. Отчёт (report.html) пока не переведён на каркас и держит копию палитры у себя — расхождение сторожит тест. Тёмная тема наследуется из системы автоматически. ═══════════════════════════════════════════════════════════════════════════ */ @import url('/static/fonts/inter.css'); @import url('/static/fonts/mono.css'); :root { /* ── Шрифты ─────────────────────────────────────────────────────────────── */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --font-brand: 'Space Mono', 'JetBrains Mono', ui-monospace, monospace; /* wordmark, латиница */ /* ── Светлая тема · canonical light v3 (палитра Макса · академия lesson-v2) ─ Расчистка «грязноватой» бежевой темы: тёплые НЕЙТРАЛИ вместо жёлто-бежевой триады + белая карточка держит контраст над кремом. Золото РАЗВЕДЕНО на три роли (ADR-024): заливка яркая → текст на ней тёмный; текст-акцент на белом → глубокая бронза AA; база подложек/glow → бронза #998018. */ /* Светлая тема — канон goldjaxe.org: нейтрально-серый холст + белые карточки + серые (не бежевые) границы. Белое на нейтрально-сером читается чище и «дороже», чем на тёплом креме (крем+белое давало молочный низкий контраст). */ --c-bg: #F5F5F5; /* холст — нейтральный светло-серый (goldjaxe.org --bg-primary) */ --c-surface: #FFFFFF; /* карточки, панели — чистый белый (--bg-tertiary/concrete) */ --c-surface-2: #F0EDE8; /* мягкие вложенные блоки (--bg-secondary) */ --c-surface-3: #EDEDED; /* hover-подложка, треки (--bg-quaternary) */ --c-line: rgba(26,26,26,.10); /* границы карточек — мягкая серая (--border-secondary) */ --c-line-strong: rgba(26,26,26,.16); /* акцентные границы блоков (--border-primary) */ /* Контур поля ввода, кнопки-переключателя, флажка — ОТДЕЛЬНЫЙ токен. WCAG 1.4.11 требует 3:1 для границ элементов управления, и это не та же задача, что разделить два блока: границу карточки человек не ищет глазами, а поле ввода — ищет. Прежде поля красились --separator (= --c-line, альфа .10): 1.23:1 на белом. Поле почти сливалось с карточкой, видно было только по плейсхолдеру — на экране входа единственное действие страницы выглядело необязательным (GOL-365, ручной прогон 11.08.2026). Альфа тут не годится в принципе: даже .42 даёт 2.65 на белом. Нужен сплошной цвет. #8E8E8E = 3.28 на карточке и 3.01 на холсте --c-bg. */ --c-control-line: #8E8E8E; --c-ink: #1A1A1A; /* основной текст (goldjaxe.org --text-primary) */ --c-ink-2: rgba(26,26,26,.80); /* вторичный (--text-secondary) */ /* ink-3/ink-4 подняты ради AA в светлой теме — зеркало правки тёмной темы ниже. Было .62/.45: блёклый давал 2.88:1 на белом при норме 4.5, и на нём сидели не украшения, а рабочие подписи — «(необязательно)», «бессрочно», «· безлимит», заголовки разделов отчёта. Стало 5.9 (ink-3) и 4.88 (ink-4) на белом, 4.63 на самой тёмной плитке #F0EDE8 — проходит на всех трёх подложках светлой темы. Иерархия «метка ярче плейсхолдера» сохранена. */ --c-ink-3: rgba(26,26,26,.72); /* приглушённый / метки */ --c-ink-4: rgba(26,26,26,.62); /* блёклый / плейсхолдеры (--text-faint) */ /* ── Золото — три роли (канон Макса). Заливка ≠ текст: см. --c-gold-contrast ── */ --c-gold: #C9A332; /* ЗАЛИВКА/CTA-акцент — чистое золото (стоп заливки Макса). Текст на нём тёмный! */ --c-gold-strong: #7A6614; /* hover / ТЕКСТ-акцент золотом на белом — глубокая бронза AA (~4.9:1, Макс --gold-dark) */ --c-gold-mid: #EBC554; /* яркий стоп заливки бейджа/CTA (Макс --gold урока). Только fill, НИКОГДА текст на светлом */ --c-gold-contrast: #1A1A1A; /* текст НА золотой заливке — ТЁМНЫЙ (Макс --primary-foreground; белый на ярком золоте проваливается) */ --c-gold-bg: rgba(153,128,24,.10); /* золотая подложка callout/tag — база бронза #998018 (Макс --gold-dim) */ --c-gold-line: rgba(153,128,24,.25); /* золотая граница/ring (Макс --border-gold) */ /* ── Семантика (канон Макса; steel/success — сигнатурные Scribe, сохранены) ─ */ --c-info: #2D5380; --c-info-bg: rgba(45,83,128,.08); /* steel (фирменный Scribe — оставлен) */ --c-success: #16A34A; --c-success-bg: rgba(22,163,74,.08); /* чистый зелёный (ярче эталона — оставлен) */ --c-warn: #7A6614; --c-warn-bg: rgba(153,128,24,.10); --c-warn-base: #998018; /* warn = бронза Макса, текст тёмный */ /* 🔴 Красный обязан проходить AA НА СВОЕЙ ЖЕ ПЛАШКЕ, а не только на карточке. Прежний #DC4C4C давал 4.90 на белом, но 4.27 на danger-bg поверх карточки и 3.93 поверх фона страницы — при норме 4.5 (замер 15.08.2026). Именно так он чаще всего и стоит: бейдж «срок истёк», плашка просрочки, счётчик сбоев, тост danger — везде текст лежит на своей полупрозрачной подложке. #C92A2A: 6.94 на карточке, 5.90 на плашке, 5.42 на плашке поверх фона. Та же ловушка, что с чернилами 01.08: мерить по САМОЙ СВЕТЛОЙ подложке, на которой токен встречается. */ --c-danger: #C92A2A; --c-danger-bg: rgba(201,42,42,.10); --c-danger-line: rgba(201,42,42,.30); /* ── Радиусы: канон ui-kit v4.176 (гибрид) ────────────────────────────────── Не сплошной брутал (0) и не мягкие пилюли — «чистый читаемый» строй холдинга: мелкие контролы скруглены слегка, крупные поверхности чуть заметнее, круги остаются кругами. Шкала ужата от канона ui-kit (sm4/md8/lg12) к брутализму: xs 2 · мелкие плашки, чипы, иконочные кнопки, треки прогресса sm 3 · КНОПКИ · инпуты · табы · сегменты · тосты-акценты md 0 · КАРТОЧКИ · модалки · таблицы · поповеры (острые, канон goldjaxe.org) lg 0 · крупные панели · drop-zone · auth-card (острые) pill · аватары · toggle · счётчики-пилюли (--r-full ui-kit) Терминальный слой (капс-моно бейджи/статус-плашки/скобки drop-zone) намеренно держим квадратным напрямую (border-radius:0) — это брутал-акцент айдентики, аналог .is-square в ui-kit. Радиусы-токены его не трогают. */ /* Шкала ужата к брутализму (было sm4/md8/lg12): углы ощутимо строже, но не режут глаз в ноль — «Corporate Brutalism», а не raw. Терминальный слой по-прежнему 0. */ /* Карточки/панели/модалки — в НОЛЬ (канон .org-std-card goldjaxe.org): острые углы, тонкая граница, hover-подъём. Кнопки/инпуты (sm) чуть смягчены, чтобы контролы не читались агрессивно. Терминальный слой (бейджи/статусы) как был 0. */ --radius-xs: 2px; --radius-sm: 3px; --radius-md: 0; --radius-lg: 0; --radius-pill: 9999px; /* ── Тени (светлая: мягкие нейтрально-чёрные Макса — собранная глубина) ──── */ --elev-1: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05); /* карточки покоя (Макс --shadow-sm) */ --elev-2: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04); /* поповеры/приподнятые (Макс --shadow-md) */ --elev-3: 0 20px 40px -8px rgba(0,0,0,.12), 0 8px 16px -4px rgba(0,0,0,.06); /* модалки (Макс --shadow-xl, спред собирает тень) */ /* ── Кольцо фокуса — бронзовая рамка Макса (#998018) + свечение ─────────── */ --focus-ring: 0 0 0 1px rgba(153,128,24,.55), 0 0 14px rgba(153,128,24,.18); /* ── Декор фона (аура) — светлая тема без декора, тёмная задаёт градиент ── */ --bg-decor: none; /* ── Отступы (8pt-сетка) ────────────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; /* ── Шапка — brand-immutable (тёмная в ОБЕИХ темах, канон .eco-header) ──── */ --hdr-bg: rgba(18,18,22,.94); --hdr-line: rgba(255,255,255,.08); --hdr-ink: #FFFFFF; --hdr-ink-2: rgba(255,255,255,.72); --hdr-ink-3: rgba(255,255,255,.50); --hdr-gold: #EBC554; /* золото шапки — всегда яркое (тёмный фон) */ --hdr-gold-bg: rgba(235,197,84,.07); --hdr-gold-line: rgba(235,197,84,.40); --hdr-surface: rgba(255,255,255,.06); /* hover-подложка элементов шапки */ /* ── Легаси-алиасы: чтобы существующие правила style.css / admin работали ── */ --bg: var(--c-bg); --surface: var(--c-surface); --separator: var(--c-line); --label: var(--c-ink); --label2: var(--c-ink-2); --label3: var(--c-ink-3); --label4: var(--c-ink-4); --accent: var(--c-gold); --accent-bg: var(--c-gold-bg); --blue: var(--c-info); --green: var(--c-success); --red: var(--c-danger); --orange: var(--c-warn-base); --shadow: var(--elev-1); --shadow-lg: var(--elev-3); /* алиасы словаря админки / отчёта */ --ink: var(--c-ink); --ink-soft: var(--c-ink-2); --muted: var(--c-ink-3); --faint: var(--c-ink-4); --gold: var(--c-gold); --gold-bg: var(--c-gold-bg); --line: var(--c-line); --card: var(--c-surface); --radius: var(--radius-lg); --team: var(--c-info); --team-bg: var(--c-info-bg); --client: var(--c-warn-base); --client-bg: var(--c-warn-bg); --ok: var(--c-success); --ok-bg: var(--c-success-bg); /* Дописано 02.08.2026, когда страница отчёта перестала держать свою копию палитры. Все шесть — алиасы на уже существовавшие канонические токены: новых ЗНАЧЕНИЙ здесь нет, только имена, под которыми отчёт их звал. */ --surface-2: var(--c-surface-2); --line-strong: var(--c-line-strong); --gold-strong: var(--c-gold-strong); --gold-mid: var(--c-gold-mid); --gold-line: var(--c-gold-line); --gold-contrast: var(--c-gold-contrast); /* А эти два канонического аналога не имели: тоновые состояния карточки. Живут значениями, поэтому переопределяются в каждой теме ниже — в отличие от алиасов выше, которые тему подхватывают сами через --c-*. */ --card-hover: #FAFAFA; --card-lift: 0 6px 20px -8px rgba(0,0,0,.12), 0 2px 6px -3px rgba(0,0,0,.08); /* 🔴 Подложка ВЫБРАННОГО тарифа в поп-апе (GS-51). Живёт значением по той же причине, что два токена выше: в светлой теме это тёплая золотая подложка, а в тёмной — НЕЙТРАЛЬНЫЙ подъём поверхности, и алиасом их не свести. Почему не `--gold-bg` в обеих: он жёлтый С АЛЬФОЙ, и поверх тёмной поверхности #1E2229 даёт грязно-оливковый — «болото» (замечание владельца 21.08.2026). Это математика смешения, а не подбор оттенка: чинится отказом от заливки, а не другим жёлтым. Цвет несут граница слева и текст. */ --tier-pick-bg: rgba(153,128,24,.08); } /* ═══════════ SQUARE MODE · брутал-режим по требованию (канон ui-kit v4.176) ═══ Вся система скруглений держится на 3 токенах (--radius-sm/md/lg). Класс .ui-square обнуляет их на своём поддереве → ВСЕ скруглённые элементы (кнопки, карточки, инпуты, модалки, поповеры) разом становятся квадратными. Даёт выбор скруглённый (default, чистый читаемый строй) ↔ квадратный (.ui-square, брутал) без правки каждого компонента. --radius-pill (круги/аватары/toggle) НЕ трогаем — это форма, а не смягчение угла. Уровни применения: — вся страница квадратная
— только эта секция
— локальный блок Точечно на один элемент — .is-square (ниже). Зеркально вернуть скругление внутри квадратной зоны — .is-rounded. */ .ui-square { --radius-xs: 0; --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius: 0; } /* Точечный opt-in для ОДНОГО элемента внутри скруглённого окружения. */ .is-square { border-radius: 0 !important; } /* Зеркальный opt-in: вернуть скругление одному элементу внутри .ui-square-зоны. */ .is-rounded { border-radius: var(--radius-sm) !important; } /* ── Тёмная тема (фирменный обсидиан GOLDJAXE) — из системы или по data-theme ─ */ :root[data-theme="dark"], html[data-theme="dark"] { color-scheme: dark; } /* «Ночь» — вторая тёмная тема. Привязка по ЯРКОСТИ, а не по имени: ночь ведёт себя как тёмная во всём, что умеет различать лишь «светлая/тёмная» — color-scheme, системная подстройка, цвет адресной строки, иконки переключателя. Тёмных тем две, и обе должны попадать в эти ветки. */ :root[data-theme="night"], html[data-theme="night"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } /* значения. Градации тёмной — по эталону .ai (глубокий фон + карточки #16-18 + золотая аура-градиент сверху): глубина вместо плоской черноты. */ :root[data-theme="dark"] { /* Нейтральный графит (Synology DSM) — база холодная и чистая, БЕЗ золотого подмеса в подложку. Тёплый обсидиан (#0B0A09/#161513) делал поверхности «грязными и старыми»; золото остаётся точечным акцентом, не тоном фона. Сверено с report.html. ЛЕСТНИЦА СЛОЁВ — каждый следующий уровень СВЕТЛЕЕ предыдущего, шаг ~6-8 по светлоте. Ломать порядок нельзя: когда surface-2 (плитки «Тип встречи», вложенные блоки) оказался темнее surface (карточка-контейнер), вложенное проваливалось в подложку и весь экран читался «блёклым и грязным» — при формально высоком контрасте. Насыщенность тут ни при чём, важен шаг. bg #101216 → surface #1E2229 → surface-2 #262B33 → surface-3 #2F353E (hover) Граница #363C46 держит отрыв от карточки, иначе рамок не видно. */ --c-bg: #101216; --c-surface: #1E2229; --c-surface-2: #262B33; --c-surface-3: #2F353E; --c-line: #363C46; --c-line-strong: #454C57; /* Контур элементов управления — см. пояснение в светлой теме. На поле (--c-surface #1E2229) прежний #363C46 давал 1.44:1. #6E7887 = 3.57:1. */ --c-control-line: #6E7887; /* Тоновые состояния карточки — тоже графит (hover светлее, лифт — тень). */ --card-hover: #262B33; /* Тарифы (GS-51): нейтральный подъём, НЕ жёлтая заливка — см. светлую тему. */ --tier-pick-bg: #262B33; --card-lift: 0 8px 24px -10px rgba(0,0,0,.55), 0 2px 8px -4px rgba(0,0,0,.45); --bg-decor: radial-gradient(ellipse 90% 55% at 50% -5%, rgba(235,197,84,.05) 0%, transparent 62%); --c-ink: #E8EBEF; --c-ink-2: #B6BDC7; /* ink-3/ink-4 подняты ради WCAG AA в тёмной теме. Было #8A919B/#626973: плейсхолдеры и подписи давали 2.88:1 на карточке (#1E2229) при норме 4.5. Ревизия 01.08.2026 подняла ещё раз: мерить надо не по карточке, а по САМОЙ СВЕТЛОЙ подложке, на которой токен встречается — вложенная плитка #2F353E. На ней прежние #949BA5/#828A95 давали 4.41 и 3.54. Стало 7.13 и 4.97 на вложенной (5.5+ на карточке). Иерархия «подпись ярче плейсхолдера» сохранена. */ --c-ink-3: #A7AEB8; --c-ink-4: #9EA5AF; --c-gold: #EBC554; --c-gold-strong: #C9A332; --c-gold-mid: #C9A332; --c-gold-contrast: #080808; --c-gold-bg: rgba(235,197,84,.08); --c-gold-line: rgba(235,197,84,.38); --c-info: #7FA7CE; --c-info-bg: rgba(69,115,161,.20); --c-success: #22C55E; --c-success-bg: rgba(34,197,94,.14); --c-warn: #EBC554; --c-warn-bg: rgba(235,197,84,.12); --c-warn-base: #F59E0B; /* На своей плашке #EF4444 давал 3.53 при норме 4.5 — см. светлую ветку выше. Правится в ОБОИХ тёмных блоках: [data-theme="dark"] и @media prefers-dark, иначе человек с системной тёмной темой останется на старом значении. */ --c-danger: #FF6B6B; --c-danger-bg: rgba(255,107,107,.14); --c-danger-line: rgba(255,107,107,.40); --elev-1: 0 1px 3px rgba(0,0,0,.40); --elev-2: 0 2px 10px rgba(0,0,0,.45); --elev-3: 0 12px 32px rgba(0,0,0,.55); --focus-ring: 0 0 0 1px rgba(235,197,84,.50), 0 0 16px rgba(235,197,84,.15); --hdr-bg: rgba(14,14,17,.94); --hdr-line: rgba(255,255,255,.07); } /* ── Тема «Ночь» — палитра из прототипа v10 (квиз) ───────────────────────────── Вторая тёмная: глубже и холоднее графита. Если графит — «дневной тёмный» (нейтральный, мягкие шаги слоёв), то ночь — «глубокая ночь»: холст почти чёрный с синим, насыщенность слоёв выше. Тон 226-230° обеим, разница в глубине и насыщенности (замерено: холст 43% против 27% у графита). Источник — ~/Downloads/scribe-redesign/v10-quiz-palette.html, эталон, выверенный визуально. Шаги слоёв сознательно уже, чем в графите (отрыв 1.16 — решение прототипа, не ошибка): ночь играет глубиной, а не ступенями. Контрасты проверены по WCAG 2.1 на карточке #171B28: ink 17.2, ink-2 10.7, ink-3 6.75, ink-4 4.79 — все AA. Единственная правка против эталона: красный #E5484D давал 4.38 при норме 4.5 — взят #EE565B (5.0), ближайший проходящий. */ :root[data-theme="night"] { --c-bg: #08090E; /* холст квиза */ --c-surface: #171B28; /* карточки */ --c-surface-2: #232838; /* вложенные плитки, hover */ --c-surface-3: #2A3044; /* ступень выше — активные */ --c-line: #2A3044; --c-line-strong: #3A4258; /* Контур элементов управления — см. пояснение в светлой теме. На карточке #171B28: #63708F = 3.47:1. */ --c-control-line: #63708F; --card-hover: #232838; /* Тарифы (GS-51): нейтральный подъём, НЕ жёлтая заливка. */ --tier-pick-bg: #232838; --card-lift: 0 8px 24px -10px rgba(0,0,0,.60), 0 2px 8px -4px rgba(0,0,0,.50); /* Золотая аура сверху — фирменный признак, в обеих тёмных одинаковая. */ --bg-decor: radial-gradient(ellipse 90% 55% at 50% -5%, rgba(235,197,84,.05) 0%, transparent 62%); --c-ink: #FFFFFF; --c-ink-2: #C7CDD7; --c-ink-3: #A6AEBC; --c-ink-4: #9BA3B0; --c-gold: #EBC554; --c-gold-strong: #EBC554; /* на почти-чёрном яркое золото читается и текстом (10.3) */ --c-gold-mid: #C9A332; --c-gold-contrast: #080808; --c-gold-bg: rgba(235,197,84,.14); --c-gold-line: rgba(235,197,84,.40); --c-info: #7FA7CE; --c-info-bg: rgba(69,115,161,.22); --c-success: #5CB87A; --c-success-bg: rgba(92,184,122,.16); --c-warn: #EBC554; --c-warn-bg: rgba(235,197,84,.14); --c-warn-base: #F59E0B; /* Ночь: #EE565B давал 4.09 на своей плашке. #FF7075 — 6.60 / 5.04. */ --c-danger: #FF7075; --c-danger-bg: rgba(255,112,117,.16); --c-danger-line: rgba(255,112,117,.42); --elev-1: 0 1px 3px rgba(0,0,0,.45); --elev-2: 0 2px 10px rgba(0,0,0,.50); --elev-3: 0 12px 32px rgba(0,0,0,.60); --focus-ring: 0 0 0 1px rgba(235,197,84,.55), 0 0 16px rgba(235,197,84,.18); --hdr-bg: rgba(8,9,14,.94); --hdr-line: rgba(255,255,255,.07); } @media (prefers-color-scheme: dark) { /* «Ночь» исключена явно: она вторая тёмная, и без этого исключения системная ветка перезаписывала бы её токены графитом — night ведь не light. */ :root:not([data-theme="light"]):not([data-theme="night"]) { /* Нейтральный графит (см. блок [data-theme="dark"] выше) — для системной тёмной. */ --c-gold-contrast: #080808; --c-bg: #101216; --c-surface: #1E2229; --c-surface-2: #262B33; --c-surface-3: #2F353E; --c-line: #363C46; --c-line-strong: #454C57; /* 🔴 Четвёртый блок палитры — тот, что уже забывали (02.08: системная тёмная осталась на старом контрасте). Значение обязано совпадать с [data-theme="dark"]. */ --c-control-line: #6E7887; --card-hover: #262B33; /* Тарифы (GS-51) — обязано совпадать с [data-theme="dark"] выше. */ --tier-pick-bg: #262B33; --card-lift: 0 8px 24px -10px rgba(0,0,0,.55), 0 2px 8px -4px rgba(0,0,0,.45); --bg-decor: radial-gradient(ellipse 90% 55% at 50% -5%, rgba(235,197,84,.05) 0%, transparent 62%); --c-ink: #E8EBEF; --c-ink-2: #B6BDC7; /* Синхронно с блоком [data-theme="dark"] выше — иначе контраст зависел бы от того, включена тема тумблером или системной настройкой. Ровно это и случилось 01.08: подъём ради AA внесли в три блока из четырёх, а этот пропустили. Он идёт в файле последним и потому побеждал — у человека с системной тёмной темой подписи отчёта так и оставались на 3.54:1. 🔴 Правишь чернила или золото — правь ВСЕ четыре блока разом. */ --c-ink-3: #A7AEB8; --c-ink-4: #9EA5AF; --c-gold: #EBC554; --c-gold-strong: #C9A332; --c-gold-mid: #C9A332; --c-gold-bg: rgba(235,197,84,.08); --c-gold-line: rgba(235,197,84,.38); --c-info: #7FA7CE; --c-info-bg: rgba(69,115,161,.20); --c-success: #22C55E; --c-success-bg: rgba(34,197,94,.14); --c-warn: #EBC554; --c-warn-bg: rgba(235,197,84,.12); --c-warn-base: #F59E0B; /* На своей плашке #EF4444 давал 3.53 при норме 4.5 — см. светлую ветку выше. Правится в ОБОИХ тёмных блоках: [data-theme="dark"] и @media prefers-dark, иначе человек с системной тёмной темой останется на старом значении. */ --c-danger: #FF6B6B; --c-danger-bg: rgba(255,107,107,.14); --c-danger-line: rgba(255,107,107,.40); --elev-1: 0 1px 3px rgba(0,0,0,.40); --elev-2: 0 2px 10px rgba(0,0,0,.45); --elev-3: 0 12px 32px rgba(0,0,0,.55); --focus-ring: 0 0 0 1px rgba(235,197,84,.50), 0 0 16px rgba(235,197,84,.15); --hdr-bg: rgba(14,14,17,.94); --hdr-line: rgba(255,255,255,.07); } } /* ── Размеры иконок (набор Lucide) — доступны любому экрану с токенами ──────── */ .ic { width: 18px; height: 18px; display: inline-block; vertical-align: -0.18em; flex: none; } .ic-sm { width: 14px; height: 14px; display: inline-block; vertical-align: -0.15em; flex: none; } .ic-lg { width: 40px; height: 40px; display: block; flex: none; } /* ── Переключатель темы — дефолт: цвета страницы (standalone-экраны). Внутри тёмной brand-шапки перекрывается в components.css (hdr-цвета). ───── */ .app-theme { display: inline-flex; align-items: center; justify-content: center; /* 44×44 — тач-цель (GOL-366). Была 36×36: на телефоне зона нажатия дотягивалась псевдоэлементом, но кнопка живёт и на страницах входа standalone, где растягивать нечем. Проще держать размер честным везде. */ width: 44px; height: 44px; padding: 0; color: var(--c-ink-2); background: transparent; border: 1px solid var(--c-line-strong); border-radius: var(--radius-sm); /* иконочная кнопка — канон ui-kit sm (4px) */ cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .app-theme:hover { background: var(--c-gold-bg); color: var(--c-gold); border-color: var(--c-gold-line); } .app-theme:focus-visible { outline: none; box-shadow: var(--focus-ring); } .app-theme .ic { width: 18px; height: 18px; vertical-align: middle; } /* Правил показа солнца/месяца здесь БОЛЬШЕ НЕТ (11.08.2026). Кнопка носила две иконки, и CSS показывал нужную по активной теме: тёмные → солнце, светлая → месяц. Схема работала, пока переключатель был круговым: значок обещал, КУДА уйдёт клик. Сломалось при переводе темы в меню: кнопка получила data-theme-menu-btn, а правила остались на прежнем [data-theme-toggle] — селектор перестал с чем-либо совпадать, и на всех семи экранах показывались ОБЕ иконки сразу. Тест на это был, но проверял, что правило написано в файле, а не что оно применяется к кнопке. Теперь значок один — полукруг contrast, он означает «сменить оформление» и от активной темы не зависит. Прятать нечего, показывать по условию нечего. Сквозной сторож — tests/test_themes.py. */ /* ── Выпадающее меню кнопки (.gx-menu) ─────────────────────────────────────── Маленький общий примитив: кнопка + список действий под ней. Появился 11.08.2026 под два случая сразу — выбор темы (три именованных варианта вместо кругового переключателя) и выгрузка в Markdown (протокол / транскрипт). Живёт в токенах, а не в отчёте: тема нужна на КАЖДОМ экране (base.html), и вторая копия правил разошлась бы с первой при первой же правке. Почему не
/: меню должно закрываться по Esc и по клику мимо, а фокус — возвращаться на кнопку. Нативный details ничего из этого не делает, и обвязка всё равно понадобилась бы (см. конец theme.js). Позиционирование absolute от .gx-menu, а не fixed: панель обязана ехать вместе со страницей. У fixed она отрывалась бы от кнопки при прокрутке — ровно та болезнь, ради которой .help-pop пересчитывает координаты на скролле; здесь пересчитывать нечего. */ .gx-menu { position: relative; display: inline-flex; } /* Каретки ▾ у кнопок меню БОЛЬШЕ НЕТ (решение владельца 11.08.2026): «человек нажмет и без иконки все поймет, они занимает лишнее место». Прежнее обоснование — «стрелка единственный признак, что кнопка ОТКРЫВАЕТ меню, а не действует сразу; без неё значок „скачать" обещает скачивание по клику». Оно держалось на одном случае из трёх: шесть из семи меню темы и так жили без каретки и вопросов не вызывали. У выгрузки признак остался — панель раскрывается по нажатию, а обещание уточняет подпись пункта («Полный протокол», «Транскрипт»). Для доступности каретка ничего не значила: aria-hidden скрывала её от скринридеров, роль кнопки объявляет aria-haspopup="menu" + aria-expanded. */ .gx-menu__pop { position: absolute; z-index: 1000; inset-block-start: calc(100% + 6px); /* Прижат правым краем: обе кнопки стоят в правом углу шапки, и панель, растущая вправо, вылезала бы за экран. */ inset-inline-end: 0; min-inline-size: 190px; /* Но правый край — не гарантия: в тулбаре отчёта кнопка выгрузки стоит ТРЕТЬЕЙ из четырёх, а не в углу. Панель шириной ~199px, прижатая к её правому краю (172px), уходила левым краем на −27px — половина пунктов оказывалась за экраном. Найдено на телефоне владельца 11.08.2026. Ограничиваем панель областью просмотра: max-inline-size не даёт ей быть шире экрана, а position-area/anchor тут нельзя (нет в Safari). Рабочее решение без скрипта — переопределение в узком окне ниже: там панель растягивается по ширине тулбара и прижимается к его левому краю, то есть всегда видна целиком. */ max-inline-size: calc(100vw - 24px); padding: 5px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-md); box-shadow: var(--elev-2); display: flex; flex-direction: column; gap: 2px; } .gx-menu__pop[hidden] { display: none; } /* Пункты — и (выгрузка), и