/* ============================================================================ lis post — дизайн-токены (брендбук v1.0, 13.09.2026) ---------------------------------------------------------------------------- Источник: deploy/_brand_20260913/БРЕНДБУК.md Замеры контраста — WCAG 2.1, relative luminance (см. §3 и §9 брендбука). КАК ПОДКЛЮЧИТЬ (одной строкой, в ПОСЛЕ style.css — чтобы успеть переопределить, либо ДО style.css, если правите style.css под токены): Файл самодостаточен: он и создаёт новый набор токенов, и в конце (раздел «СОВМЕСТИМОСТЬ») переопределяет старые имена, которые уже используются в коде (--teal, --bg, --sans, --r и т.д.). Поэтому подключение НЕ ломает существующую вёрстку лендинга. Шрифты ожидаются рядом: /static/fonts/ (файлы woff2, 18 шт.) (уже скачаны, см. ШРИФТЫ_ВНЕДРЕНИЕ.md) ========================================================================= */ /* ========================================================================== 1. ШРИФТЫ — собственный хостинг (OFL 1.1) Никаких fonts.googleapis.com: IP посетителя никуда не уходит. ========================================================================== */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/inter-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/inter-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/inter-cyrillic-500-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/inter-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/inter-cyrillic-600-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/inter-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/inter-cyrillic-700-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/inter-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('/static/fonts/inter-cyrillic-800-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('/static/fonts/inter-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/jetbrains-mono-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/jetbrains-mono-cyrillic-500-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/jetbrains-mono-cyrillic-600-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/jetbrains-mono-cyrillic-700-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* 1.1 Знак рубля (U+20BD) — тем же начертанием, что цифры (брендбук §4.7). Отдельная семья с unicode-range: «₽» всегда берётся из JetBrains Mono, даже когда набран внутри Inter. Работает и для ₽, который вставляет JS. Файлы rub-*.woff2 — полный JetBrains Mono (OFL 1.1, лицензия рядом), потому что в subset'ах fontsource глифа U+20BD нет. Браузер скачивает их ТОЛЬКО если на странице реально встречается «₽» — unicode-range отсекает остальное. */ @font-face { font-family: 'RubSymbol'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/rub-400-normal.woff2') format('woff2'); unicode-range: U+20BD; } @font-face { font-family: 'RubSymbol'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/rub-500-normal.woff2') format('woff2'); unicode-range: U+20BD; } @font-face { font-family: 'RubSymbol'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/rub-600-normal.woff2') format('woff2'); unicode-range: U+20BD; } @font-face { font-family: 'RubSymbol'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/rub-700-normal.woff2') format('woff2'); unicode-range: U+20BD; } /* ========================================================================== 2. ТОКЕНЫ ========================================================================== */ :root { /* --- 2.1 Шрифтовые семейства --------------------------------------- 'RubSymbol' стоит и в sans, и в mono: в subset-JetBrains Mono глифа «₽» (U+20BD) нет, поэтому знак рубля брался бы из Cascadia/Consolas — другим начертанием, чем цифры (брендбук §4.7). Семья 'RubSymbol' — полный JetBrains Mono с unicode-range U+20BD, поэтому ₽ всегда рисуется тем же начертанием, что цифры. */ --font-sans: 'Inter', 'RubSymbol', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'RubSymbol', 'Cascadia Code', Consolas, ui-monospace, monospace; /* --- 2.2 Основная палитра: бирюза ----------------------------------- ВНИМАНИЕ: brand-500 (#0EA5A0) — только заливки и графика. Для ТЕКСТА на светлом — brand-700 (#0F766E, 5.47:1). См. брендбук §3.3. */ --color-brand-50: #ECFDFB; --color-brand-100: #CFF7F4; --color-brand-200: #A3EFE9; --color-brand-300: #6CE2DA; --color-brand-400: #35CFC5; --color-brand-500: #0EA5A0; /* основной бренд-цвет (заливки) */ --color-brand-600: #0D8F8A; --color-brand-700: #0F766E; /* текст-бирюза, фон primary-кнопки */ --color-brand-800: #115E59; --color-brand-900: #0E4A46; /* --- 2.3 Нейтральные (светлая тема) -------------------------------- */ --color-gray-0: #FFFFFF; --color-gray-25: #FAFBFC; --color-gray-50: #F5F6FA; --color-gray-100: #EEF1F5; --color-gray-200: #E6E8EF; --color-gray-300: #D3D9E3; --color-gray-400: #B4BCC9; --color-gray-500: #8A94A6; --color-gray-600: #5C6470; /* минимальный для вторичного ТЕКСТА (5.98) */ --color-gray-700: #39455A; --color-gray-800: #2A3346; --color-gray-900: #14181F; /* --- 2.4 Тёмная навигационная тема --------------------------------- */ --color-navy-900: #0F1420; --color-navy-800: #161D2B; --color-navy-700: #1E2737; --color-navy-line: #2A3346; --color-navy-line-2:#39455A; --color-navy-muted: #8A94A6; --color-navy-text: #EEF2F7; /* --- 2.5 Статусы ---------------------------------------------------- Заливки (*-fill) — НЕ для текста. Как текст — только *-ink. */ --color-success: #16A34A; /* 3.30 — иконки, заливки */ --color-success-ink: #1E7A24; /* 5.43 — текст, залитая кнопка */ --color-success-soft: #E8F9EC; --color-success-bright:#4ADE80; /* на тёмном: 10.56 */ --color-warning: #F5B84F; /* 1.77 — только маркер, не текст */ --color-warning-ink: #7A5400; /* 6.78 — текст */ --color-warning-ink-2: #B7791F; /* предупреждение ATS (мягче, чем ink) */ --color-warning-soft: #FEF7E0; --color-warning-tint: rgba(183,121,31,0.08); /* подложка предупреждения */ --color-warning-line: rgba(183,121,31,0.35); /* контур предупреждения */ --color-warning-bright:#FCD34D; /* на тёмном: 12.76 */ --color-danger: #EF4444; /* 3.76 — иконки, заливки */ --color-danger-ink: #B91C1C; /* 6.47 — текст, подтверждение удаления */ --color-danger-ink-strong: #9B1717; /* наведение на залитую опасную кнопку */ --color-danger-soft: #FBEAEA; --color-danger-border: #F3C9C9; /* контур опасной кнопки в покое */ --color-danger-bright: #F87171; /* на тёмном: 6.65 */ --color-info: #0E9AA6; /* 3.39 — иконки, заливки */ --color-info-ink: #0B6B73; /* 6.24 — текст */ --color-info-soft: #E6F4F6; /* --- 2.6 Семантические роли (светлая тема) ------------------------- */ --color-bg: var(--color-gray-0); --color-bg-subtle: var(--color-gray-50); --color-bg-raised: var(--color-gray-0); --color-bg-input: var(--color-gray-25); --color-bg-hover: var(--color-gray-100); --color-bg-selected: var(--color-brand-50); --color-bg-inverse: var(--color-navy-900); --color-text: var(--color-gray-900); --color-text-secondary:var(--color-gray-600); --color-text-muted: var(--color-gray-500); /* не для основного текста */ --color-text-inverse: var(--color-navy-text); --color-text-link: var(--color-brand-700); --color-text-on-brand: #FFFFFF; --color-border: var(--color-gray-200); --color-border-strong: var(--color-gray-300); --color-border-control:var(--color-gray-400); --color-border-focus: var(--color-brand-700); /* --- 2.7 Типографическая шкала ------------------------------------- */ --text-display: 2.75rem; /* 44px */ --text-h1: 2.25rem; /* 36px */ --text-h2: 1.75rem; /* 28px */ --text-h3: 1.375rem; /* 22px */ --text-h4: 1.125rem; /* 18px */ --text-body-lg: 1.0625rem; /* 17px */ --text-body: 0.9375rem; /* 15px */ --text-sm: 0.8125rem; /* 13px */ --text-xs: 0.75rem; /* 12px */ --text-micro: 0.6875rem; /* 11px */ --leading-display:1.18; --leading-heading:1.25; --leading-body: 1.6; --leading-tight: 1.35; --tracking-display:-0.02em; --tracking-heading:-0.02em; --tracking-normal: 0; --tracking-caps: 0.08em; /* только для uppercase-меток */ /* --- 2.8 Отступы (база 4px) ---------------------------------------- */ --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; /* --- 2.9 Радиусы ---------------------------------------------------- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* --- 2.10 Тени ------------------------------------------------------ */ --shadow-sm: 0 1px 2px rgba(20, 24, 31, .06); --shadow-md: 0 8px 22px rgba(20, 24, 31, .08); --shadow-lg: 0 22px 50px rgba(20, 24, 31, .12); /* --- 2.11 Границы --------------------------------------------------- */ --border-width: 1px; /* --- 2.12 Контейнеры и брейкпоинты (для медиазапросов — числа) ----- */ --container-narrow: 720px; --container: 1160px; --container-wide: 1280px; /* --- 2.13 Кнопки и поля --------------------------------------------- */ --control-height-sm: 32px; --control-height-md: 40px; --control-height-lg: 48px; --tap-target-min: 44px; --focus-ring: 0 0 0 3px rgba(15, 118, 110, .15); --focus-ring-strong: 0 0 0 2px var(--color-brand-700); --transition-color: 150ms ease; /* --- 2.14 Элевация -------------------------------------------------- */ --z-base: 0; --z-sticky: 100; --z-dropdown: 200; --z-modal: 300; --z-toast: 400; /* --- 2.15 Типографика: базовые установки ---------------------------- */ font-synthesis: none; /* без синтетического курсива/жирного */ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ========================================================================== 3. ТЁМНАЯ ТЕМА Не инверсия — отдельная поверхность бренда. См. брендбук §3.5. Включается атрибутом data-theme="dark" на или на секции. ========================================================================== */ [data-theme="dark"] { --color-bg: var(--color-navy-900); --color-bg-subtle: var(--color-navy-800); --color-bg-raised: var(--color-navy-700); --color-bg-input: var(--color-navy-800); --color-bg-hover: var(--color-navy-700); --color-bg-selected: var(--color-navy-700); --color-bg-inverse: var(--color-gray-0); --color-text: var(--color-navy-text); --color-text-secondary:var(--color-navy-muted); --color-text-muted: var(--color-navy-muted); --color-text-inverse: var(--color-gray-900); --color-text-link: var(--color-brand-300); --color-text-on-brand: var(--color-navy-900); --color-border: var(--color-navy-line); --color-border-strong: var(--color-navy-line-2); --color-border-control:var(--color-navy-line-2); --color-border-focus: var(--color-brand-400); --shadow-sm: none; --shadow-md: 0 8px 22px rgba(0, 0, 0, .35); --shadow-lg: 0 22px 50px rgba(0, 0, 0, .45); --focus-ring: 0 0 0 3px rgba(53, 207, 197, .25); --focus-ring-strong: 0 0 0 2px var(--color-brand-400); } /* ========================================================================== 4. СОВМЕСТИМОСТЬ СО СТАРЫМИ ИМЕНАМИ Лендинг (landing.html, блок :root) уже использует эти переменные. Раздел переопределяет их на новые токены, поэтому tokens.css можно подключить одной строкой и ничего не сломается. УДАЛИТЬ этот раздел можно только после того, как из landing.html и style.css уберут старые объявления (см. ПЛАН_ВНЕДРЕНИЯ.md, шаг 6). ========================================================================== */ :root { /* базовые поверхности */ --bg: var(--color-bg); --bg-alt: var(--color-bg-subtle); /* текст */ --text: var(--color-text); --muted: var(--color-text-secondary); /* границы */ --line: var(--color-border); --line-strong: var(--color-border-strong); /* бирюза: старое имя --teal теперь равно brand-500 */ --teal: var(--color-brand-500); --teal-ink: var(--color-brand-700); --teal-dark: var(--color-brand-800); --teal-bright: var(--color-brand-300); /* статусы */ --amber: var(--color-warning); --amber-ink: var(--color-warning-ink); --amber-bright: var(--color-warning-bright); --red: var(--color-danger); --red-ink: var(--color-danger-ink); --red-bright: var(--color-danger-bright); /* тёмные секции лендинга */ --bg-dark: var(--color-navy-900); --dark: var(--color-navy-900); --dark2: var(--color-navy-800); --dark-line: var(--color-navy-line); --dark-line-2: var(--color-navy-line-2); --dark-muted: var(--color-navy-muted); --dark-text: var(--color-navy-text); /* семейства */ --sans: var(--font-sans); --mono: var(--font-mono); /* радиусы */ --r: var(--radius-lg); --rs: var(--radius-sm); /* тени */ --shadow: var(--shadow-lg); } /* ========================================================================== 5. БАЗОВЫЕ ПРАВИЛА Аккуратные значения по умолчанию. Не ломают существующий CSS: ничего не форсируется через !important. ========================================================================== */ html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-text); background: var(--color-bg); } /* Заголовки: балансировка строк, без «висячего слова» (брендбук §4.6) */ h1, h2, h3 { line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); text-wrap: balance; color: var(--color-text); } h1 { font-size: var(--text-h1); font-weight: 700; } h2 { font-size: var(--text-h2); font-weight: 700; } h3 { font-size: var(--text-h3); font-weight: 600; } p { text-wrap: pretty; } /* Ссылки в тексте — брендовый цвет, а не дефолтная браузерная синева rgb(0,0,238). Подчёркивание оставляем (доступность), но в цвет текста; кнопки-ссылки (.btn) подчёркивания не получают. */ a { color: var(--color-text-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: currentColor; } a:hover { text-decoration-color: currentColor; } a.btn, a.icon-btn, a.nav-section, .btn { text-decoration: none; } /* Числа, проценты, баллы, суммы, коды — всегда mono (брендбук §4.7). .cost-line/.model-cost/.price-tag — «сметы и подтверждения» кабинета: это суммы, поэтому тоже mono, иначе «₽» (RubSymbol) шире/уже цифры (Inter). */ .num, .score, .price, .count, .percent, .cost-line, .model-cost, .price-tag, .cost-metric-price, .cost-metric .cost-input, [data-numeric], time, code, kbd, samp, pre { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* Знак рубля рядом с числом — явный класс для ручной разметки. Основной механизм другой: семья 'RubSymbol' (U+20BD) уже включена в --font-sans, поэтому ₽ рисуется моно-начертанием и без класса. */ .rub { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* Русский интерфейс: автопереносы выглядят как дефект (брендбук §4.6) */ body { hyphens: none; -webkit-hyphens: none; } /* Курсив нигде не используется — не даём браузеру его синтезировать */ i, em { font-synthesis-style: none; } /* Видимый фокус только для клавиатуры (брендбук §8.6). Убираем дефолтную обводку ТОЛЬКО у мышиного фокуса — клавиатурный фокус всегда получает видимое кольцо. */ :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: none; box-shadow: var(--focus-ring-strong); border-radius: var(--radius-sm); } /* Тап-таргет ≥44px без изменения вёрстки (брендбук §9.2). Применять классом .touch-target к мелким иконкам-действиям. */ .touch-target { position: relative; } .touch-target::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; min-width: var(--tap-target-min); min-height: var(--tap-target-min); } /* Анимации — уважать системную настройку (брендбук §8.6) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }