/* ═══════════════════════════════════════════════════════════════════════════ 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 · Шрифты: 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) */ --c-ink: #1A1A1A; /* основной текст (goldjaxe.org --text-primary) */ --c-ink-2: rgba(26,26,26,.80); /* вторичный (--text-secondary) */ --c-ink-3: rgba(26,26,26,.62); /* приглушённый / метки (~AA norm над белым) */ --c-ink-4: rgba(26,26,26,.45); /* блёклый / плейсхолдеры (--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 = бронза Макса, текст тёмный */ --c-danger: #DC4C4C; --c-danger-bg: rgba(220,76,76,.10); --c-danger-line: rgba(220,76,76,.30); /* Макс --destructive — чище кирпичного */ /* ── Радиусы: канон 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); } /* ═══════════ 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; } @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; --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; --c-ink-3: #8A919B; --c-ink-4: #626973; --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; --c-danger: #EF4444; --c-danger-bg: rgba(239,68,68,.14); --c-danger-line: rgba(239,68,68,.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); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Нейтральный графит (см. блок [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; --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; --c-ink-3: #8A919B; --c-ink-4: #626973; --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; --c-danger: #EF4444; --c-danger-bg: rgba(239,68,68,.14); --c-danger-line: rgba(239,68,68,.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; width: 36px; height: 36px; 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; } /* Показ нужной иконки по активной теме: тёмная → солнце (клик = светлая), светлая → месяц. Когда тема не выбрана явно — падаем на системную. */ [data-theme-toggle] .th-sun, [data-theme-toggle] .th-moon { display: none; align-items: center; } :root[data-theme="dark"] [data-theme-toggle] .th-sun { display: inline-flex; } :root[data-theme="light"] [data-theme-toggle] .th-moon { display: inline-flex; } :root:not([data-theme]) [data-theme-toggle] .th-moon { display: inline-flex; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) [data-theme-toggle] .th-moon { display: none; } :root:not([data-theme]) [data-theme-toggle] .th-sun { display: inline-flex; } } /* ── Мелочи, полезные всем экранам ──────────────────────────────────────────── */ ::selection { background: rgba(153,128,24,.22); } /* Глобальный фокус-ринг. Радиус НЕ форсируем (было border-radius:0 из брутал-эпохи) — кольцо-тень наследует форму элемента: на скруглённой кнопке скруглено, на квадратной плашке квадратно. Так канон-гибрид ui-kit не ломается острым кольцом на круглом. */ :focus-visible { outline: none; box-shadow: var(--focus-ring); } html { -webkit-text-size-adjust: 100%; } /* ── Фирменные утилиты (терминальный слой бренда) ───────────────────────────── */ /* Подпись-капс: JetBrains Mono uppercase — лейблы секций, мета, статусы */ .gx-cap { font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: .10em; } /* Сетка-фон (грань терминала) — на drop-zone и витринных поверхностях */ .gx-grid-bg { background-image: linear-gradient(to right, rgba(153,128,24,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(153,128,24,.05) 1px, transparent 1px); background-size: 24px 24px; } :root[data-theme="dark"] .gx-grid-bg, :root:not([data-theme="light"]) .gx-grid-bg { background-image: linear-gradient(to right, rgba(235,197,84,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(235,197,84,.05) 1px, transparent 1px); } @media (prefers-color-scheme: light) { :root:not([data-theme]) .gx-grid-bg { background-image: linear-gradient(to right, rgba(153,128,24,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(153,128,24,.05) 1px, transparent 1px); } }