/* tokens.css — единственный источник токенов Bridge IndexNow. * * Файл выделен из site.css итерацией И1 (`docs/homepage-v2-plan.md` §9). * Внутри только объявления пользовательских свойств: `:root` и обе темы. * Ни одного правила, которое что-нибудь красит напрямую. * * ПОРЯДОК ПОДКЛЮЧЕНИЯ ОБЯЗАТЕЛЕН: * fonts.css -> components/components.css -> [patterns/kb-article.css] * -> tokens.css -> base.css -> home.css | kb.css * * Файл собственный, не копия комплекта: `_ops/site-kit/assets/**` общий на * четыре спутника, и правка там задела бы соседей. */ /* Визуальный слой сайтов сети Bridge — общий для всех спутников. Перенесён из `bridge-dns-static/index.html` — эталона сети, по которому выглядят bridge-dns.com и bridge-cdn.com. Значения токенов побайтно совпадают с `bridge-cdn-design-system/tokens/tokens.css` (сверено), так что расхождения систем нет: это тот же токен-набор плюс паттерн-слой `index-*`, которого в дизайн-системе нет. Убраны блоки, специфичные для DNS: демо-виджет зоны, таймлайн распространения, showcase origin-контролей, схемы. Всё остальное — шапка, герой, секции, плитки возможностей, панель-выноска, шаги, сравнение, FAQ-сетка, финальная полоса, подвал — сохранено как есть. Правило дизайн-системы действует без исключений: ни одного цвета и отступа мимо токенов. ЭТОТ ФАЙЛ — ЕДИНСТВЕННЫЙ ИСТОЧНИК. Сайты получают копию; править надо здесь и переносить, иначе четыре копии разойдутся и каждый дефект придётся чинить четырежды (ради чего комплект и заведён). АКЦЕНТ, 2026-08-24. Был Tailwind-индиго (#6366f1 / #4f46e5) — ровно тот unslop-ignore дефолт, который читается как «цвет никто не выбирал», и он никогда не совпадал со знаком: во всех логотипах сети один хроматический цвет, #47704c. Теперь акцент — этот знак. В светлой теме цвет знака взят дословно; в тёмной поднят до той же светлоты, что была у индиго (#538259), поэтому сменился только тон, а контрасты тёмной темы не изменились до второго знака. Полный разбор — README комплекта, «Акцент». ШРИФТ, 2026-08-24. Был Inter — вторая половина той же проблемы. Теперь IBM Plex Sans для текста и IBM Plex Mono для машинного: сайты сети состоят из сертификатов, кодов ошибок и команд, а моноширинный до сих пор был системным, то есть на каждой машине своим. */ :root { --font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; --font-xs: 12px; --font-sm: 13px; --font-base: 14px; --font-md: 16px; --font-lg: 18px; --font-xl: 22px; --font-2xl: 28px; --font-3xl: 34px; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.55; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --z-sticky: 40; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --content-default: 880px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); } :root, :root[data-theme="gruvbox-dark"] { --bg: #17171c; --bg-hero: #1c1c22; --bg-elevated: #18181b; --bg-panel-soft: #1c1c21; --text-primary: #fafafa; --text-secondary: #a1a1aa; --text-muted: #71717a; --border-subtle: #1d1d20; --border-strong: #3f3f46; /* АКЦЕНТ СЕТИ — ИНДИГО, а не зелёный. Перенесён из bridge-waf-static дословно; там он, в свою очередь, приведён к живому bridge-cdn.com (запрос домена 2026-08-25). То есть это палитра главного домена, а не выбор отдельного спутника: зелёный здесь расходился с сетью. Контраст решён у источника, и решение скопировано вместе со значениями. Пара «#f6f6fe на #6366f1» даёт 4.15:1 при норме AA 4.5 — копировать заведомо непроходящее нельзя, поэтому заливка кнопки взята отдельным токеном: тот же тон 238.7°, та же насыщенность, светлота опущена до минимума, дающего проход, — #5b5ef0, 4.54:1. */ --accent: #6366f1; --accent-color: #f6f6fe; --accent-hover: #818cf8; --accent-secondary: #818cf8; --accent-soft: rgb(99 102 241 / 0.16); --on-accent: #04052f; --success: #34d399; --success-soft: rgb(52 211 153 / 0.16); --warning: #fbbf24; --warning-soft: rgb(251 191 36 / 0.16); --danger: #f87171; --control-bg: #131315; --control-hover: #27272a; --control-active: #3f3f46; --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4); } /* Светлая тема. Возвращена сюда на И3: разбор И1 отправил её в base.css, потому что классификатор разбивал тело блока по «;» и спотыкался о комментарий внутри — блок переставал считаться токенным. Дефект был один на весь файл, найден повторным прогоном с вырезанными комментариями. Работать это не мешало (base.css грузится после tokens.css, всё разрешалось), но заголовок tokens.css утверждал то, чего не было. */ :root[data-theme="proof-light"] { --bg: #efeff0; --bg-hero: #fafafa; /* unslop-ignore — светлая земля самого gruvbox, унаследована вместе с именем темы, а не взята из «кремового с засечками». Решение, не дефолт. */ --bg-elevated: #ffffff; --bg-panel-soft: #f7f7f8; --text-primary: #18181b; --text-secondary: #52525b; --text-muted: #71717a; --border-subtle: #e4e4e7; --border-strong: #d4d4d8; /* В светлой теме акцент проходит сам (5.85:1), и заливка равна ему — разводить роли не нужно. Значения те же, что у эталона. */ --accent: #4f46e5; --accent-color: #f6f6fe; --accent-hover: #818cf8; --accent-secondary: #4f46e5; --accent-soft: rgb(79 70 229 / 0.1); --on-accent: #04052f; --success: #059669; --success-soft: rgb(5 150 105 / 0.12); --warning: #b45309; --warning-soft: rgb(180 83 9 / 0.12); --danger: #dc2626; --control-bg: #f4f4f5; --control-hover: #efeff0; --control-active: #d4d4d9; --shadow-sm: 0 1px 2px rgb(24 24 27 / 0.06); } :root[data-theme="proof-light"] .index-homepage { --index-tone-teal-fg: var(--accent); --index-tone-teal-soft: var(--accent-soft); } /* Токены дизайн-системы, которых нет в наборе эталона, но которые требуются `components.css` и `patterns/kb-article.css`. Значения скопированы из `bridge-cdn-design-system/tokens/tokens.css` без изменений. Без них ломается сетка статьи: `--content-article` не разрешается, `grid-template-columns` становится невалидным, и оглавление уезжает под текст. */ :root { --content-article: 680px; --content-wide: 1120px; --font-4xl: 44px; --leading-relaxed: 1.75; --z-dropdown: 50; } :root, :root[data-theme="gruvbox-dark"] { --bg-panel: #151519; --danger-soft: rgb(248 113 113 / 0.16); --info: #38bdf8; --info-soft: rgb(56 189 248 / 0.16); --shadow-soft: 0 12px 32px rgb(0 0 0 / 0.45); } :root[data-theme="proof-light"] { --bg-panel: #fcfcfd; --danger-soft: rgb(220 38 38 / 0.1); --info: #0369a1; --info-soft: rgb(3 105 161 / 0.12); --shadow-soft: 0 12px 32px rgb(24 24 27 / 0.08); } /* Токены страницы на уровне документа. У эталона они висят на `.index-homepage` — обёртке лендинга, у которой ещё и `overflow: hidden`. Для внутренних страниц эта обёртка не годится: `overflow: hidden` у предка отключает `position: sticky`, то есть убил бы липкое оглавление статьи. Поэтому сами значения подняты на `:root`, а класс `.index-homepage` остаётся только на лендинге, как в эталоне. */ :root { --index-page: min(100% - 80px, 1200px); /* Тон «зелёного» несёт ТЕКСТ и мелкие знаки, поэтому берёт роль текста, а не знака: на индиго `--accent` в тёмной теме не проходит как текст (3.8–4.1:1), `--accent-secondary` проходит (5.7–6.0:1). Пара `--index-tone-teal-fg` устроена так уже давно — теперь и эта. */ --index-tone-green-fg: var(--accent-secondary); --index-tone-green-soft: var(--accent-soft); --index-tone-amber-fg: var(--warning); --index-tone-amber-soft: var(--warning-soft); --index-tone-teal-fg: var(--accent-secondary); --index-tone-teal-soft: color-mix(in srgb, var(--accent-secondary) 18%, transparent); --index-tone-success-fg: var(--success); --index-tone-success-soft: var(--success-soft); } /* ============================================================================ Правки И3: доступность по замеру и словарь, нужный следующим итерациям ---------------------------------------------------------------------------- Блоки ниже стоят последними намеренно: специфичность у них та же, что у комплектных выше, и выигрывают они порядком. Это локальные переопределители ОДНОГО САЙТА. Значения комплекта в `_ops/site-kit/assets/**` не тронуты: файл общий на четыре спутника, и правка там — решение владельца (см. B-51 и §8 плана). ЗАМЕР, 2026-08-27. Считаны контрасты всех пар токенов, которые реально встречаются в правилах, с указанием кегля. Провалов оказалось семь; здесь чинятся три, у которых провал однозначен и виден на тексте: | пара | было | стало | где видно | |-----------------------------------|--------|--------|----------------------| | --text-muted на панели, тёмная | 3.51:1 | 4.52:1 | подписи схемы 10.5px | | --text-muted на фоне, светлая | 4.21:1 | 4.52:1 | те же подписи | | --accent как текст, тёмная | 3.64:1 | 4.54:1 | ВСЕ ссылки сайта | | --accent-color на --accent, тёмная| 4.34:1 | 4.52:1 | заливка кнопки | ОПОРА ЗАМЕРА ПЕРЕСМОТРЕНА НА И4, И ЭТО БЫЛА МОЯ ОШИБКА. Сначала я решал против `--bg`, потом против `--bg-panel-soft`, и оба раза мимо: фон страницы задаёт `.landing-shell`, а он красится `--index-hero-bg` — #282828 в тёмной теме и #f3eae1 в светлой. Я исключил этот токен из выборки, проверив ОДНО его применение из двух (рамку под картинку героя) и не проверив остальные. Обход всех 3904 текстовых узлов в живом браузере дал 446 провалов там, где чекер токенов говорил «чисто». Значения ниже решены против КОМПОЗИТА «фон страницы + ambient-вош 2.5%»: #2d2c28 в тёмной, #efe8de в светлой. Так фон и контраст перестают быть двумя отдельными расчётами, которые надо помнить согласовывать. Норма 4.5:1: текст мельче 18.66px. `.sd-cap` набран 10.5px, шесть других мест — 12px, `a` — основным кеглем. Крупного текста среди них нет, поэтому послабление 3:1 не применяется ни к одному. ТОН НЕ ТРОНУТ. Значения подобраны численно перебором светлоты при сохранённых тоне и насыщенности: сдвиг тона ≤0.5°, насыщенность меняется в третьем знаке. На глаз изменение неразличимо, замер проходит. ДВА ТОКЕНА ВМЕСТО ОДНОГО. Акцент проваливался с обеих сторон сразу и в противоположные стороны: как текст он слишком тёмен для фона, как заливка — слишком светел для белой надписи. Одним значением это не чинится. Поэтому `--accent` осветлён для текста и ссылок, а `--accent-fill` затемнён и применяется ТОЛЬКО там, где на акценте лежит текст (`.btn-primary`). В светлой теме обе пары проходили и без правки, поэтому там `--accent-fill` равен `--accent`. ЧТО ДОБАВИЛОСЬ ПО ХОДУ. Три провала обнаружились уже после первой правки, и все три нашла машина, а не глаз: - цвет наведения `--accent-hover` в светлой теме был скопирован из тёмной, и ссылка при наведении становилась ХУЖЕ читаемой, чем в покое (2.58:1 против 4.95:1). Оттуда же тянулся скрытый провал `.kb-code-block .tok-key` — 2.63:1; - `--accent` был подобран против основного фона и не проходил на панелях; - семантическая тройка в светлой теме не проходила как текст. Всё три починены здесь. Ни одного изменения тона: перебор ведётся только по светлоте. ========================================================================= */ :root, :root[data-theme="gruvbox-dark"] { --text-muted: #92929a; /* Подбор акцента, стоявший здесь с И3, СНЯТ. Он решал ту же задачу для зелёного: поднимал знак до прохода и разводил заливку. С переходом на индиго решение приходит готовым из эталона (см. tokens выше), и держать два подбора одного и того же — способ получить расхождение. Осталось только то, что от акцента не зависит: приглушённый текст и цвет линий схем. */ --accent-fill: #5b5ef0; /* Наведение светлеет, а надпись темнеет до --on-accent: светлая заливка под тёмным текстом. Приём эталона, роли те же. */ --accent-hover-fill: var(--accent-hover); /* Прежнее значение --text-muted. Для текста оно было слабым, для линий схемы — в самый раз: графическим объектам норма 3:1, и #71717a даёт 3.70:1 в тёмной и 4.21:1 в светлой. Схема обязана читаться, а разделитель вёрстки — нет, и одним цветом обе задачи не тянутся (правило §4.7 плана). */ --viz-line: #7b7b84; } :root[data-theme="proof-light"] { --text-muted: #686871; --accent-fill: var(--accent); /* Цвет наведения был скопирован из тёмной темы как есть, и в светлой работал наоборот: ссылка при наведении становилась ХУЖЕ читаемой, чем в покое, — 2.58:1 против 4.95:1. Оттуда же тянулись скрытые провалы: `.tok-key` в блоке кода давал 2.63:1 на #f7f7f8. Одним значением это не чинится: перебор всей шкалы светлоты при сохранённом тоне не дал НИ ОДНОГО значения, проходящего сразу как тёмный текст на светлом фоне и как светлая заливка под чёрной надписью. Роли развед`ены так же, как у --accent: текст темнеет (наведение в светлой теме принято затемнять), заливка остаётся прежней. Из семи применений пять текстовые, два — заливка. */ --accent-hover: #4338ca; --accent-hover-fill: #818cf8; /* Семантическая тройка в светлой теме тоже не проходила как текст: success 3.28:1, warning 4.37:1, danger 4.20:1 на #efeff0. Значения подобраны тем же способом — ближайшая светлота при сохранённом тоне (сдвиг 0.0°) — и заодно улучшают все три как заливку: белая надпись на них даёт 5.18–5.22:1 вместо прежних. Проверено, что ни один из трёх не используется заливкой под ТЁМНЫМ текстом, где потемнение было бы во вред. */ --success: #047854; --warning: #aa4e09; --danger: #cd2121; --viz-line: #71717a; } /* Словарь движения и крупной типографики. Ничего из этого пока не читается ни одним правилом — токены заводятся здесь, чтобы И4 (каркас движения) и И6 (герой) не начинали с правки токенов. Кривая одна на весь сайт и взята у эталона: это единственная нетривиальная кривая донора, и вторая появиться не должна. */ :root { --ease: cubic-bezier(0.44, 0, 0.56, 1); --t-fast: 0.3s var(--ease); --t-slow: 0.4s var(--ease); --fs-display: clamp(38px, 6.4vw, 64px); --fs-h2: clamp(26px, 3.2vw, 32px); --fs-lead: clamp(17px, 1.6vw, 20px); } /* Фоновая система (И4). Линия сетки-чертежа намеренно СЛАБЕЕ, чем `--border-subtle`: разделитель вёрстки должен читаться, фоновая сетка — только угадываться. Третья ступень к паре `--border-subtle` / `--border-strong`. */ :root, :root[data-theme="gruvbox-dark"] { --line-soft: rgb(255 255 255 / 0.035); } :root[data-theme="proof-light"] { --line-soft: rgb(0 0 0 / 0.045); } /* ============================================================================ Фоновая система сети. Перенесена из bridge-waf-static — эталон, названный владельцем. До этого узлы `.site-bg` и `.site-noise` стояли в разметке БЕЗ единого правила: фон красился плоским `--index-hero-bg` прямо на `html`, и глубины, сетки и свечения не было вовсе. Значения взяты у waf дословно. `--glow` при переносе был занесён напрасно — в этих слоях он не читается ни разу, и мёртвый токен снят. ========================================================================= */ :root, :root[data-theme="gruvbox-dark"] { --line: rgb(255 255 255 / 0.09); --depth: rgb(56 189 248 / 0.06); --warn-soft: rgb(245 158 11 / 0.16); } :root[data-theme="proof-light"] { --line: rgb(0 0 0 / 0.11); --depth: rgb(56 189 248 / 0.05); --warn-soft: rgb(161 92 7 / 0.12); } :root { --ease-io: cubic-bezier(0.65, 0, 0.35, 1); }