/* ============================================================================ ok-tokens.css — HOME-SHELL-V2 · пакет HC-02 «GLOBAL TOKENS И CONTAINER» ---------------------------------------------------------------------------- Единственный источник значений нового слоя оболочки. Здесь ТОЛЬКО объявления custom properties на :root — ни одного правила, которое что-то красит. Следствие: подключение файла НЕ МЕНЯЕТ рендер (десктоп-регресс 0 by design). ИСТОЧНИКИ (в порядке старшинства): 1. ★ ЖИВОЙ ЗАМЕР мастер-файла «02 Главная.dc.html» (решение Архитектора D-08) 2. CLAUDE.md — «Справочник вёрстки» (гайд), §-ссылки в комментариях 3. 07_DESIGN_TOKEN_REGISTRY.csv — реестр токенов пакета 4. 06_GLOBAL_LAYOUT_CONTRACT.md — контракт ширины/отступов ★ D-08 — РЕЗУЛЬТАТ ПИКСЕЛЬНОГО ЗАМЕРА (HC-02, headless Chrome 150, --allow-file-access-from-files, file://…/02 Главная.dc.html, viewport 1440): max-width = 1280px — у 28/28 отрисованных контейнеров, разброс 0 padding-left/right = 32px — у 28/28, разброс 0 box-sizing = border-box content-width = 1216px (1280 − 2·32), замерено getBoundingClientRect margin = 72.5px/72.5px → подтверждает margin:0 auto ВЕРСИЯ «в разметке мастера доминанта 24px» ОПРОВЕРГНУТА: 24px в мастере — это `gap:24px`, а не боковой padding. Мастер и гайд §4 СОВПАДАЮТ на 32px. ИМЕНОВАНИЕ: префикс --ok-* проверен грепом — в okna-child, twentytwentyone и mu-plugins НЕ встречается (существующие --okna-* не пересекаются: после «ok» идёт «n», а не дефис). Коллизий нет. ⚠️ ПАЛИТРА ЗАКРЫТА: новые #hex вне 07_DESIGN_TOKEN_REGISTRY.csv запрещены. Нужен новый цвет → сперва строка в 07, потом токен здесь. ============================================================================ */ :root{ /* ── [1] ЛАЙАУТ / КОНТЕЙНЕР ── ★ D-08, живой замер мастера ──────────────── */ --ok-container-max:1280px; /* ЗАМЕР: 28/28 контейнеров, разброс 0 */ --ok-container-pad:32px; /* ЗАМЕР: 32px, 28/28, разброс 0 — база */ --ok-container-pad-desktop:32px; /* = --ok-container-pad (явный алиас) */ --ok-container-pad-tablet:24px; /* 06 §1, брейкпоинт ≤1024 */ --ok-container-pad-mobile:16px; /* 06 §1 + гайд §4 + мастер (13 вхожд.) */ --ok-container-content:1216px; /* ПРОИЗВОДНАЯ: 1280 − 2·32 (замерено) */ --ok-content-narrow:760px; /* интро-абзац секции, гайд §3 */ --ok-content-reading:760px; /* проза блога/статей/«О нас», гайд §17 */ /* ── [2] ВЕРТИКАЛЬНЫЙ РИТМ СЕКЦИЙ ── гайд §4, подтверждён мастером ──────── */ /* мастер: `padding:72px 0` ×20 · `72px 0 84px` ×1 · `44px 0 48px` ×5 */ --ok-section-space-desktop:72px; --ok-section-space-tablet:56px; /* 06 §1 (в мастере media-запросов нет) */ --ok-section-space-mobile:44px; --ok-section-space-xs:32px; /* 06 §1, ≤480 */ --ok-section-last-pb:84px; /* последняя секция перед футером */ --ok-section-last-pb-mobile:48px; /* ── [3] ГЭПЫ СЕТОК ── гайд §4 / 06 §2 ─────────────────────────────────── */ --ok-gap-cards:18px; /* repeat(3,1fr) — карточки */ --ok-gap-products:16px; /* repeat(4,1fr) — товары */ --ok-gap-chips:12px; /* чипы/пилюли */ --ok-gap-cols:44px; /* двухколоночные блоки */ /* ── [4] ЦВЕТ ── 07_DESIGN_TOKEN_REGISTRY (палитра закрыта) ─────────────── */ /* синий бренд / action */ --ok-blue:#1c5bd6; /* ссылки, «Каталог», акценты */ --ok-blue-hover:#1448aa; /* hover ссылок */ --ok-ink:#123d87; /* тёмно-синий: H2/H4, телефоны */ --ok-brand-ink:#00307b; /* словесный знак «Автобусные стёкла» — цвет кузова (макет #01, НЕ #123d87) */ /* красный CTA */ --ok-red:#e0223a; /* заявки/сабмиты, подчёркивание H2 */ /* текст */ --ok-text:#1d2433; /* основной (МИГРАЦИЯ с --text #1c2433) */ --ok-text-2:#526173; /* вторичный / абзацы (с --muted) */ /* ★ HC-16 · РАЗВЕДЕНЫ ДВА СМЫСЛА ОДНОГО ЦВЕТА (замер контраста, находка HC-18). БЫЛО: --ok-text-muted:#8a94a6 — и текст на светлом, и база для замесов на тёмном. На светлом #8a94a6 даёт 3.06:1 при норме AA 4.5 (замер прибора: 62 узла на одной только Главной — «Ваш город», каретки, подписи, счётчики). Просто затемнить токен было НЕЛЬЗЯ: из него через color-mix выводится полтора десятка цветов ДЛЯ ТЁМНЫХ поверхностей (футер, тёмный геро, navy- блоки). Там затемнение сделало бы контраст ХУЖЕ — лечили бы одно, ломая другое, и незаметно для глаза. СТАЛО: два токена с разными обязанностями. --ok-muted-seed — ОТТЕНОК МАСТЕРА #8a94a6 без изменений. Только как база замесов (color-mix) для тёмных поверхностей: все выведенные из него значения остаются прежними до последнего байта; --ok-text-muted — ТЕКСТ НА СВЕТЛОМ, затемнён до AA. Проверка значения: 5.06:1 на #ffffff, 4.76:1 на секции #f5f8fd, 4.55:1 на плитке #eef3fc — норма 4.5 выдержана на всех фонах оболочки, а не только на белом. Иерархия сохранена: --ok-text-2 (#526173) по-прежнему темнее. */ --ok-muted-seed:#8a94a6; /* ОТТЕНОК мастера — база замесов на тёмном */ --ok-text-muted:#646f84; /* приглушённый ТЕКСТ на светлом — AA 4.5+ */ --ok-on-dark:#ffffff; /* текст на тёмной секции */ /* фоны */ --ok-bg:#eef1f6; /* фон страницы (РАЗЛИЧИЕ: сейчас не он)*/ --ok-section-a:#ffffff; /* чередование секций A */ --ok-section-b:#f5f8fd; /* чередование секций B */ --ok-dark:#12161f; /* тёмные секции (B2B, футер) */ --ok-tint-blue:#eef3fc; /* голубой тинт карточек/эйброу */ /* границы */ --ok-border:#e8ecf2; /* рамка карточек (основная) */ --ok-border-input:#dfe5ee; /* рамка инпутов (1.5px) */ --ok-border-outline:#cfd9ea; /* аутлайн-кнопка на белом (07 §5) */ /* статусы */ --ok-success:#1f9d55; /* иконки успеха */ --ok-star:#f5a623; /* звёзды рейтинга в отзывах */ /* ── [4-бис] ЦВЕТА, ВНЕСЁННЫЕ В РЕЕСТР В HC-14 ──────────────────────────── «0 новых #hex» = «не мимо реестра 07», а не «никогда». Каждый цвет ниже пришёл заявкой волны, недостижим смешением существующих токенов и внесён в 07_DESIGN_TOKEN_REGISTRY.csv тем же пакетом (иначе токен и реестр разъезжаются, и следующая волна снова напишет литерал). */ --ok-success-bright:#3fd07a; /* заявка HC-11: зелёная галочка B2B на тёмном. Из палитры недостижим: ближайший --ok-success даёт ΔE 19.2 (замер волны) — на #12161f гаснет */ --ok-telegram:#2aabee; /* заявка HC-05: фирменный цвет Telegram в футере. Бренд-цвет стороннего сервиса — подменять нашим синим нельзя (узнаваемость иконки) */ --ok-hero-dark-a:#0a1222; /* заявка HC-08: верх затемнения героя */ --ok-hero-dark-b:#0b1f3f; /* заявка HC-08: низ затемнения героя. Пара образует градиент-подложку под H1; --ok-dark (#12161f) нейтрально-серый и сине-фиолетовый увод фото не даёт */ /* ── [5] ТИПОГРАФИКА ── гайд §1 / §3 / §17 ─────────────────────────────── */ --ok-font:'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; /* веса: гайд §1 — 400/600/700/800 (500 в гайде НЕТ) */ --ok-fw-regular:400; --ok-fw-semibold:600; --ok-fw-bold:700; --ok-fw-black:800; /* кегли */ /* ★ HC-14, ДОЛГ HC-08: было 38px с пометкой «уточняется». Живой замер мастера («02 Главная.dc.html», vp1440) дал 46px, и hero уже рисуется 46px — но своим локальным --okh-h1 (ok-home.css:182), в обход токена. Ставим замеренное значение сюда, локальный дубль в ok-home.css снят: один источник правды. */ --ok-fs-h1:46px; /* hero H1 — ЗАМЕР мастера */ /* P-H2 §0.1.2 · метка происхождения (файл·вьюпорт·зависимость от базы): источник — «02 Главная.dc.html», десктопный блок, vp1440, доминанта 34; подтверждено доминантой 34 в макетах 22, 16, 15, 19, 18. Величина ДЕСКТОПНАЯ — база мобильной рамки (390/375) к ней неприменима, пересчёт не требуется. */ --ok-fs-h2:34px; /* H2 секции, десктоп */ /* P-H2 §0.1.2 · метка происхождения (файл·вьюпорт·зависимость от базы): источник — «02 Главная.dc.html», мобильный блок, база файла 390, доминанта 23; подтверждено в 22 и 16 (база 390) и в 15, 19, 18 (база 375). Величина ОДИНАКОВА на обеих базах — от ширины рамки НЕ зависит, пересчёту не подлежит. */ --ok-fs-h2-mobile:23px; /* H2 секции, мобилка */ --ok-fs-h3:22px; /* H3 внутри текста (§17) */ /* HC-16: мобильный H3 замерен у мастера (vp390, экран «18 SEO-текст» → 15/800). Заводится токеном, а не числом в блоке, — парно к --ok-fs-h2-mobile: кегль мобильного заголовка обязан иметь ОДИН источник правды. */ --ok-fs-h3-mobile:15px; /* H3 внутри текста, мобилка — ЗАМЕР */ --ok-fs-h4:15px; /* H4 подзаголовок */ --ok-fs-intro:16.5px; /* интро-абзац секции */ --ok-fs-body:16px; /* проза (§17) + ОБЯЗАТЕЛЬНО для полей */ --ok-fs-card:14.5px; /* текст карточки */ --ok-fs-nav:14.5px; /* пункт меню */ --ok-fs-label:13.5px; /* лейбл поля */ --ok-fs-micro:12.5px; /* микротекст / политика */ --ok-fs-eyebrow:12.5px; /* эйброу-пилюля UPPER */ /* интерлиньяж / трекинг */ --ok-lh-heading:1.18; --ok-lh-h2-mobile:1.25; --ok-lh-body:1.55; --ok-lh-prose:1.7; /* §17 — проза блога/статей */ --ok-ls-h2:-.01em; --ok-ls-eyebrow:.06em; /* ── [6] РАДИУСЫ ── гайд §8 (шкала) ────────────────────────────────────── */ --ok-radius-btn:4px; /* синие компактные кнопки / нав */ --ok-radius-cta:8px; /* красные CTA, инпуты, пункты дропдауна*/ --ok-radius-field:8px; /* ★ РОЛЬ: поле формы — норма §1.2 (273 замера полей / 24 макета; было раздвоено 6px design.css:292 и 10px design.css:328). Число совпадает с --ok-radius-cta, роль иная (поле ≠ кнопка) */ --ok-radius-search:10px; /* ★ РОЛЬ: поле поиска — норма §1.2, задаётся по КЛАССУ поиска, не по типу input */ --ok-radius-dropdown:10px; /* контейнер дропдауна, моб. инпуты */ --ok-radius-category:12px; /* карточки-категории [гайд §8, нет в 07] */ --ok-radius-card:16px; /* СТАНДАРТ: карточка / модалка / форма */ --ok-radius-picker:18px; /* моб. пикер [гайд §8, нет в 07] */ --ok-radius-feature:22px; /* фиче-карточки, «О компании» */ --ok-radius-calc:26px; /* панель калькулятора [гайд §8, нет в 07] */ --ok-radius-pill:999px; /* пилюли, бейджи, кружки */ /* ── [7] ТЕНИ ── гайд §9 / 07 ──────────────────────────────────────────── */ --ok-shadow-soft:0 10px 30px rgba(20,40,80,.05); /* мягкая карточка */ --ok-shadow-card-hover:0 14px 40px rgba(20,40,80,.14);/* hover карточки */ --ok-shadow-dropdown:0 14px 40px rgba(20,40,80,.14); /* дропдаун (= hover) */ --ok-shadow-form:0 20px 50px rgba(20,40,80,.10); /* блок формы [§9] */ --ok-shadow-about:0 24px 60px rgba(18,61,135,.09); /* «О компании» [§9] */ --ok-shadow-picker:0 14px 36px rgba(20,40,80,.08); /* моб. пикер [§9] */ /* ── [8] ШАПКА / ОБОЛОЧКА ── гайд §12, 06 §1, 07 ───────────────────────── */ --ok-header-topbar:40px; /* топбар: город + телефоны + e-mail */ --ok-header-height:84px; /* основная строка шапки */ --ok-header-sticky-height:60px; /* сжатая при скролле */ --ok-header-logo:52px; /* logo-2026-mark.webp — знак 2026 */ --ok-mobile-header-height:56px; /* мобильный бар */ --ok-mobile-drawer-width:326px; /* дровер справа */ /* ── [9] КОНТРОЛЫ ── гайд §5 / §6, 07 ──────────────────────────────────── */ --ok-control-h:48px; /* primary CTA / поле ввода */ --ok-control-h-header:42px; /* кнопки шапки */ --ok-control-h-mobile:50px; /* full-width сабмит на мобилке */ --ok-input-border-w:1.5px; /* рамка поля */ --ok-tap-min:48px; /* минимум касания на мобилке */ /* ── [10] СЛОИ ── мастер (sticky z-index:100) / гайд §11 ───────────────── */ --ok-z-header:100; /* sticky-шапка — замер мастера */ --ok-z-modal:300; /* гайд §11 */ /* ⚠️ РАЗНОЧТЕНИЕ (зафиксировано в 07, строка modal;wrapper): в текущем коде сайта модалки живут на z-index:100000. Согласование — НЕ в HC-02; токен объявлен по гайду и пока никем не используется. */ /* ── [11] 8-POINT ШКАЛА ОТСТУПОВ ── УБОРКА §2.5: перенесено из okna-mobile.css в единый корень токенов ── Происхождение: ОБЩАЯ 8pt-сетка (кратные 8/4), НЕ пиксельный замер мастера — 3-частной метки (файл·вьюпорт·база) нет. ★ 0 ПОТРЕБИТЕЛЕЙ на 12.08: `var(--sp-*)` = 0 по всему дереву. Шкала заведена, но ни одним правилом не подключена. ТОЧКА РЕШЕНИЯ АРХИТЕКТОРА: подключить при раскатке отступов (Волна 5, отложена) ЛИБО вывести. Пока — только перенос в дом. Тождество переноса: неиспользуемые объявления не влияют на computed ни на одном узле (доказано grep=0, не замером). */ --sp-1:4px; --sp-2:8px; --sp-3:16px; --sp-4:24px; --sp-6:32px; --sp-8:48px; --sp-12:64px; }