/* ========================================================================= tokens.css — дизайн-система лендинга «разбор». ВИЗУАЛЬНЫЙ ЯЗЫК с 01.09.2026 (вторая правка того же дня): фирменный стиль trust-builder — кремовый фон, терракотовый акцент. Решение заказчика. Источник правды палитры: ~/personal-os/01_projects/boutique-ai-studio/design-system/landing/styles-core.css Тёмная система HashiCorp, стоявшая здесь с утра, ОТМЕНЕНА. Файл DESIGN-hashicorp.md оставлен как история решения, но силы не имеет. Разбор смены — design-notes.md, раздел «Смена на фирменный стиль». Контракт имён переменных НЕ менялся — styles.css читает те же имена. Поменялись значения. Добавлены (ничего не ломая): --accent-hover, --font-serif, --sand. СООТВЕТСТВИЕ ФИРМЕННЫМ ИМЕНАМ: --bg ← bg #FBF9F4 кремовый холст --surface ← card #FFFFFF белая панель секции и формы --surface-2 ← bg-2 #F3EFE6 карточка, второй тон --border-soft ← border #E8E2D4 декоративная линейка --text ← ink #1A1612 --text-2 ← ink-2 #5C534A --accent ← accent #B84A2C --accent-hover ← accent-hover #9C3D24 --sand ← sand #D4C5A9 --success ← check #6E8A4F, затемнён до прохода AA (см. ниже) ТЕМА ОДНА — СВЕТЛАЯ. У trust-builder тёмной темы не существует, выдумывать её незачем: страница обязана выглядеть одинаково у всех. Поэтому блока @media (prefers-color-scheme: dark) здесь НЕТ, а фон и цвет текста заданы явно на :root и на body (styles.css), чтобы страница не подхватывала системную тему. В каждой страницы стоит — он запрещает браузеру инвертировать формы и подложки в тёмном режиме системы. ШРИФТЫ. Фирменная пара — Newsreader (serif) + Inter (sans), моно — IBM Plex Mono. Проверено по первоисточникам 01.09.2026: • Newsreader на Google Fonts отдаёт ровно три подмножества — latin, latin-ext, vietnamese. КИРИЛЛИЦЫ НЕТ ВООБЩЕ. Страница целиком на русском, значит гарнитура непригодна физически. Замена: Literata — тот же класс (текстовая антиква для чтения с экрана), кириллица настоящая. • Inter кириллицу отдаёт, но вердикт разбора кириллицы type.today — «should not be used» (см. design-notes.md, раздел 4). Замена: Golos Text — кириллица родная, гарнитура рисовалась от неё. • IBM Plex Mono кириллицу отдаёт — остаётся как есть. Палитра при замене не тронута: фирменный стиль держится на цвете. КОНТРАСТ. Каждая пара пересчитана по WCAG 2.2 AA (4.5:1 для текста, 3:1 для границ управляющих элементов). Расчёт основной пары целиком — design-notes.md. Два фирменных значения не прошли и подняты, оба отмечены по месту: --border и --success. Порядок подключения: tokens.css → styles.css. Здесь только :root. Компонентов нет. ========================================================================= */ :root { color-scheme: light; /* --- Поверхности ----------------------------------------------------- Кремовый холст → белая панель → второй кремовый тон. Подъём даёт смена тона и тонкая линейка, тень — только у формы и кнопки. */ --bg: #FBF9F4; /* фирменный bg — холст всей страницы */ --surface: #FFFFFF; /* фирменный card — полоса секции, подложка формы */ --surface-2: #F3EFE6; /* фирменный bg-2 — карточка */ /* --- Границы -------------------------------------------------------- ⚠️ ПРАВКА ЗНАЧЕНИЯ. Фирменный border #E8E2D4 даёт к кремовому фону 1.23:1. Для декоративной линейки это ровно то, что нужно, но WCAG 2.2 SC 1.4.11 требует 3:1 для границы поля ввода. Поэтому --border взят на той же тёплой серо-песочной линии, но темнее: #8A8172 — 3.65:1 к --bg и 3.84:1 к --surface. Фирменный #E8E2D4 остался на --border-soft и рисует все декоративные линейки. */ --border: #8A8172; /* граница поля. 3.65:1 к --bg, 3.84:1 к --surface */ --border-soft: #E8E2D4; /* фирменный border. Только декоративные линейки */ /* --- Текст ----------------------------------------------------------- */ --text: #1A1612; /* фирменный ink. 17.10:1 к --bg, 15.68:1 к --surface-2 */ --text-2: #5C534A; /* фирменный ink-2. 7.15:1 к --bg, 6.56:1 к --surface-2 */ /* Третьей ступени в фирменной палитре нет — выведена по той же линии, что и --border, но темнее, чтобы пройти AA как текст: 4.43:1 к --bg и 4.06:1 к --surface-2. */ --text-muted: #7C7367; /* --- Акцент. Один цвет на страницу ----------------------------------- Терракота проходит обе проверки без правки значения: как текст на кремовом #B84A2C / #FBF9F4 = 4.92:1 ✅ AA как текст на карточке #B84A2C / #F3EFE6 = 4.51:1 ✅ AA (впритык) белый на кнопке #FFFFFF / #B84A2C = 5.18:1 ✅ AA Ховер кнопки — фирменный accent-hover, он темнее, поэтому белый на нём ещё контрастнее (6.76:1). Именно поэтому в styles.css ховер сменил цвет заливки, а не осветляет её фильтром: осветление роняло бы контраст с белым текстом ниже нормы. */ --accent: #B84A2C; --accent-hover: #9C3D24; /* фирменный accent-hover. 6.76:1 под белым */ --accent-contrast: #FFFFFF; /* 5.18:1 на --accent */ --accent-soft: #F7E9E3; /* терракотовая подложка выделенного блока. --text на ней 15.18:1 */ /* --- Дополнительный фирменный тон ------------------------------------ Песок. Только декоративно (линейка под фото, подчёркивание), как текст не использовать: 1.61:1 к --bg. */ --sand: #D4C5A9; /* --- Статусы --------------------------------------------------------- ⚠️ ПРАВКА ЗНАЧЕНИЯ. Фирменный check #6E8A4F на кремовом даёт 3.69:1 — провал AA для текста, а он стоит текстом статуса формы. Затемнён по тому же тону до #4E6636 → 6.09:1 к --bg, 5.58:1 к --surface-2. Красного в фирменной палитре нет вообще: он нужен только под ошибку поля. Взят тёмный кирпично-красный, заметно темнее терракоты, чтобы ошибка не читалась как акцент: 6.98:1 к --bg. */ --success: #4E6636; --danger: #A81E14; /* ⚠️ ДОБАВЛЕНО 01.09.2026, поздний вечер. Правка заказчика: «почему-то выделено красным, хотя должно быть зелёным. Красный резанул, как будто теперь хуже стало». Терракотовая подложка --accent-soft стояла и под кнопкой, и под колонкой «теперь», и под нейтральными пояснениями — то есть цвет действия оказался на хорошей новости. Теперь у «хорошей новости» своя подложка, выведенная по тону --success тем же способом, что --accent-soft выведен по --accent: --text на ней 15.4:1, --success на ней 5.4:1. */ --success-soft: #E9EFE1; /* --- Шрифты ---------------------------------------------------------- Роль в роль с фирменным набором, обе замены — из-за кириллицы: sans Inter → Golos Text (заголовки, текст, кнопка, поля) serif Newsreader → Literata (врезка-цитата) mono IBM Plex Mono (надзаголовки, ярлыки) — без замены */ --font-display: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Arial, sans-serif; --font-body: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Arial, sans-serif; --font-serif: 'Literata', Georgia, 'Times New Roman', serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; /* --- Кегли ------------------------------------------------------------ Шкала не менялась при смене языка: она выведена под русский текст в колонке 720px, а не под чью-то дизайн-систему. Обоснование — design-notes.md, раздел 8. ⚠️ Основной текст на телефоне 17px (правило Adobe Spectrum), 18px на десктопе. Ниже 14px не опускаемся нигде. */ --fs-hero: clamp(2.25rem, 1.15rem + 4.7vw, 3.5rem); /* 36 → 56 px */ --fs-h1: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); /* 28 → 40 px */ --fs-h2: clamp(1.5rem, 1.36rem + 0.6vw, 1.75rem); /* 24 → 28 px */ --fs-h3: clamp(1.25rem, 1.19rem + 0.25vw, 1.375rem); /* 20 → 22 px */ --fs-body: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem); /* 17 → 18 px */ --fs-small: 0.875rem; /* 14 px */ /* --- Интерлиньяж ------------------------------------------------------ Плотно на заголовках, свободно на тексте. Фирменный styles-core держит заголовки на 1.15; у нас 1.2 — русский заголовок с выносными буквами (Ц, Щ, б, у) на 1.15 слипается. */ --lh-tight: 1.2; --lh-normal: 1.5; --lh-loose: 1.7; /* --- Ритм ------------------------------------------------------------- --space-8 = 96px = фирменный --pad-section-y, на телефоне 64px (см. styles.css, блок 13) = фирменный --pad-section-y-mobile. */ --space-1: 0.25rem; /* 4 px */ --space-2: 0.5rem; /* 8 px */ --space-3: 0.75rem; /* 12 px */ --space-4: 1rem; /* 16 px */ --space-5: 1.5rem; /* 24 px — внутренний отступ карточки */ --space-6: 2rem; /* 32 px — между карточками */ --space-7: 3rem; /* 48 px — внутри секции */ --space-8: 6rem; /* 96 px — между экранами, фирменный --pad-section-y */ --space-mobile-section: 4rem; /* 64 px — фирменный --pad-section-y-mobile */ /* --- Скругления ------------------------------------------------------- Фирменный стиль почти прямоугольный: кнопка 2px, карточка 4px. Берём его тише — 4/6/8px: страница длинная и текстовая, полностью острые углы на кремовом читаются как таблица, а не как страница. */ --radius-sm: 0.25rem; /* 4 px */ --radius-md: 0.375rem; /* 6 px — кнопки и поля */ --radius-lg: 0.5rem; /* 8 px — карточки и фотографии */ /* --- Тени -------------------------------------------------------------- На светлом подъём тоном читается слабее, чем на тёмном, поэтому тень вернулась — но едва заметная и тёплая, без синевы. */ --shadow-sm: 0 1px 2px rgba(26, 22, 18, 0.06); --shadow-md: 0 4px 14px rgba(26, 22, 18, 0.10); /* --- Раскладка --------------------------------------------------------- ⚠️ ПРАВКА 01.09.2026, вечер. Раньше здесь стоял один --container-max на 720px и комментарий «широкий контейнер не нужен, на странице один поток текста». Правка заказчика: «адаптировано под мобильный экран, но не адаптировано под веб, всё очень узкое». Он прав — при одном контейнере на 720px страница на 1440—1920 выглядит как телефонная версия, растянутая по вертикали. Теперь контейнеров ТРИ, и каждый отвечает за свой тип содержимого: --container-max 45rem / 720px — фирменный --container-narrow. Секции, где кроме текста ничего нет. --container-mid 56rem / 896px — таблицы. Шире 720, но второй столбец не разгоняется до нечитаемой длины. --container-wide 70rem / 1120px — фирменный --container-wide один в один. Первый экран, сетки карточек, блок команды, фото, форма в две колонки. Длина строки при этом НЕ выросла: за неё отвечает --measure (544px), который стоит на каждом

, и потолок в 30ch на заголовках внутри широкого контейнера (styles.css, блок 2). Широким становится контейнер, а не абзац. WCAG 2.2 SC 1.4.8 — не длиннее 80 знаков. */ --container-max: 45rem; /* 720 px — текстовая колонка */ --container-mid: 56rem; /* 896 px — таблицы */ --container-wide: 70rem; /* 1120 px — сетки, фото, первый экран, форма */ --measure: 34rem; /* 544 px — длина строки абзаца */ } /* ========================================================================= ТЁМНОЙ ТЕМЫ НЕТ — И ЭТО НАМЕРЕННО. Раньше в этом файле жил блок @media (prefers-color-scheme: dark/light), который переопределял всю палитру. Он удалён целиком: у фирменного стиля trust-builder одна тема, и страница, которая у половины людей выглядит иначе, — это второй бренд, а не тёмный режим. Что держит страницу светлой независимо от настройки системы: 1. color-scheme: light в :root (выше) и мета-тег в ; 2. явные background и color на body (styles.css, блок 1); 3. отсутствие любых @media-переопределений цвета в этом файле. Добавлять сюда тёмную ветку — значит откатывать решение заказчика. ========================================================================= */