/* ============================================================ RELAID · design/tokens.css Фирменный стиль «Контур» — единственный источник значений. Утверждён 25.08.2026. Правки стиля вносятся ТОЛЬКО здесь. Направление и обоснования — design/фирменный-стиль.md ============================================================ */ :root{ /* ---------- ЦВЕТ: холсты ---------- */ --page: #F1F1EF; /* полотно страницы, фон вокруг блоков */ --surf: #FFFFFF; /* светлый блок, карточка */ --surf-2: #F4F4F1; /* второй уровень: hover, зебра, поле */ --bg: #080520; /* тёмный блок, дно градиента */ --bg-2: #0C0930; /* тёмная карточка на тёмном */ /* ---------- ЦВЕТ: чернила ---------- */ --ink: #0A0A0F; /* основной текст на светлом */ /* 🔴 27.08.2026: было #6B7080 — 4,36:1 на полотне #F1F1EF при норме AA 4,5. Замер по пикселям (qa/_contrast-27.mjs) дал 154 элемента на грани нормы по всему сайту. #5F6474 даёт 5,21:1 на полотне и 5,35:1 на #F4F4F1 — это то же значение, что уже стояло точечно у .ph. */ --soft: #5F6474; /* тихий текст на светлом */ --ink-i: #FFFFFF; /* текст на тёмном */ --soft-i: #9C9CC4; /* тихий текст на тёмном */ /* ---------- ЦВЕТ: линии ---------- */ --line: #E4E4DF; /* линия на светлом */ --line-i: rgba(255,255,255,.14); /* линия на тёмном */ /* ---------- ЦВЕТ: акцент ---------- */ --acc: #3B2BD6; /* иконки, ссылки, метки, акцентные цифры */ --acc-hi: #7566FF; /* пик свечения градиента, hover на тёмном */ --acc-ink: #FFFFFF; /* текст на акценте */ --btn: #1B1560; /* заливка основной кнопки */ /* ---------- ЦВЕТ: статусы ---------- */ --ok: #2E7D63; --warn: #B0682C; --err: #C0392B; /* ---------- ГРАДИЕНТ ---------- Три слоя. Порядок обязателен: ореол → встречная подсветка → ядро. Глубина берётся из цветных теней (дно #080520, не чёрное), а не из понижения светлоты. */ --grad: radial-gradient(80% 96% at 94% 100%, rgba(150,134,255,.42) 0%, rgba(150,134,255,.12) 40%, rgba(150,134,255,0) 64%), radial-gradient(70% 56% at 4% 0%, rgba(104,86,240,.11) 0%, rgba(104,86,240,0) 70%), radial-gradient(120% 132% at 88% 94%, #7566FF 0%, #5B4CF7 11%, #4436E4 21%, #3325BC 31%, #241991 41%, #180F63 53%, #0F093F 66%, #0A0628 80%, #080520 100%); /* Компактный вариант для карточек и мелких тёмных плашек */ --grad-card: radial-gradient(122% 138% at 92% 100%, #7566FF 0%, #4436E4 20%, #2A1F98 40%, #130C48 66%, #080520 90%); /* Зерно поверх тёмных плоскостей. Применять как ::after, opacity .05 + mix-blend-mode: overlay. Убирает бандинг. */ --grain: url("data:image/svg+xml;utf8,"); /* ---------- ШРИФТЫ ---------- */ --f-disp: 'Geologica', 'Segoe UI', system-ui, sans-serif; /* заголовки, логотип, цифры-статы */ --f-body: 'Onest', system-ui, -apple-system, sans-serif; /* текст, интерфейс */ --f-mono: 'JetBrains Mono', ui-monospace, monospace; /* цены, артикулы, метки */ /* Начертания: Geologica 400/500/600 · Onest 400/500/600/700 · Mono 400/500 */ /* ---------- ТИПОГРАФИКА ---------- Шкала на clamp: одна строка держит и мобильный, и десктоп. */ --t-hero: clamp(32px, 5.2vw, 56px); /* Geologica 500, tracking .07em, lh 1.05 */ --t-h2: clamp(24px, 3.2vw, 38px); /* Geologica 500, lh 1.18 */ --t-h3: clamp(19px, 2.4vw, 27px); /* Geologica 500, lh 1.35 */ --t-h4: 18px; /* Onest 600, lh 1.3 */ --t-lead: 17px; /* Onest 400, lh 1.55 */ --t-body: 15px; /* Onest 400, lh 1.65 */ --t-small: 13px; /* Onest 400, lh 1.6 */ --t-micro: 11px; /* Mono 400, tracking .12em, uppercase */ --lh-tight: 1.05; --lh-head: 1.2; --lh-body: 1.65; --tr-hero: .07em; /* трекинг логотипа и hero */ --tr-mark: .22em; /* трекинг словесного знака RELAID */ /* ---------- ОТСТУПЫ ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --pad-blk: clamp(24px, 4vw, 44px); /* внутренний отступ блока */ --gap-blk: 18px; /* зазор между блоками на полотне */ --pad-page: 18px; /* поля полотна */ /* ---------- СЕТКА ---------- */ /* 🔴 ИЗМЕНЕНО 26.08.2026 (промпт 09). Было `1240px` жёстким пикселем. Замер владельца: на 2560 блок занимал 1240px, поля по 660px с каждой стороны — 48 % экрана под контент, половина под пустое полотно. Внутри блока h1 упирался в 635px, то есть 25 % ширины экрана. Отсюда «карточка узкая, по бокам огромные поля». min(92vw, 1840px): на 1440–1920 занято 92 %, на 2560 — 72 %. Верхняя граница 1840 нужна, чтобы полотно осталось видно: стиль построен на скруглённых блоках, лежащих НА полотне, и поля 300–400px на очень широком экране — часть композиции, а не остаток. */ --container: min(92vw, 1840px); /* 🔴 НОВЫЙ ТОКЕН. Расширение контейнера в одиночку ломает читаемость: при блоке 1766px строка текста уходит за 90 знаков при норме 45–75. --measure — предельная длина строки, применяется ко всем текстовым потокам. Существующий класс .measure (62ch) остаётся: он уже стоит по месту в разметке и задаёт более узкую меру для лидов и тезисов. 🔴 60ch, а не 68. `ch` — ширина знака «0», и для кириллицы она завышена: замер в Onest дал 9,98px на «0» против 7,94px на средний строчный русский знак, то есть 1ch = 1,257 знака кириллицы. 68ch — это 85 знаков в среднем и до 97 на строках с узкими буквами при норме 45–75 и потолке 90. 60ch даёт 75 знаков в среднем. Для латиницы это же значение было бы тесновато — но сайт русский. */ --measure: 60ch; --col-gap: 24px; /* ---------- ФОРМА ---------- */ --r-blk: 26px; /* крупный блок */ --r-card: 16px; /* карточка */ --r-fld: 14px; /* поле ввода */ --r-pill: 999px; /* кнопка, навигация, чип */ --r-notch: 14px; /* вогнутое скругление шторки */ --sh-card: 0 1px 2px rgba(10,10,15,.04), 0 8px 24px rgba(10,10,15,.05); --sh-lift: 0 2px 6px rgba(10,10,15,.06), 0 16px 40px rgba(10,10,15,.08); --sh-inset: inset 0 1px 0 rgba(255,255,255,.07); /* верхняя кромка тёмного блока */ /* ---------- МОУШЕН ---------- MOTION_INTENSITY 6: появление секций при скролле, hover-микро, параллакс только на градиентном ядре. Без каруселей-автоплея. */ --d-fast: .16s; /* hover, focus */ --d-base: .3s; /* смена состояния, раскрытие */ --d-slow: .6s; /* появление секции */ --e-out: cubic-bezier(.22,.61,.36,1); /* по умолчанию */ --e-inout: cubic-bezier(.65,.05,.36,1); /* парные переходы */ --e-spring: cubic-bezier(.34,1.56,.64,1); /* только кнопки и чипы */ /* ---------- Интерактивные состояния (ТЗ 28, класс G) ---------- Добавлено, ничего существующего не изменено: палитра, шрифты, сетка, --d-fast/--d-base/--d-slow и кривые остались как были. Эти пять токенов нужны, чтобы ховер, нажатие и фокус имели одно значение на весь сайт, а не переписывались числом в каждом правиле. */ --d-press: .09s; /* нажатие — заметно быстрее ховера, иначе кнопка «вязнет» */ --lift: 2px; /* подъём карточки и кнопки при наведении */ --press: .99; /* масштаб при нажатии */ --ring-w: 2px; /* толщина кольца фокуса */ --ring-off: 3px; /* отступ кольца от элемента */ --anchor-off: 32px; /* сколько воздуха остаётся над целью якоря */ /* ---------- СЛОИ ---------- */ --z-base: 0; --z-notch: 20; --z-sticky: 40; --z-modal: 80; --z-toast: 90; } /* ---------- БРЕЙКПОИНТЫ ---------- Правится в медиазапросах, не токенами (CSS так не умеет): 360 — узкий телефон, нижняя граница 560 — телефон → крупный телефон 760 — планшет: шторка становится обычной панелью, колонки в 2 1024 — десктоп: полная шторка, 4 колонки 1240 — контейнер упирается в максимум ---------- */ @media (prefers-reduced-motion: reduce){ :root{ --d-fast:0s; --d-base:0s; --d-slow:0s; } } /* ============================================================================ ДОПОЛНЕНИЕ 26.08.2026 — редизайн секций (промпт 08). Ни одно значение выше НЕ ИЗМЕНЕНО. Здесь только новые токены под новые дайлы: DESIGN_VARIANCE 8 · MOTION_INTENSITY 7 · VISUAL_DENSITY 7. ============================================================================ */ :root{ /* ---------- ТИПОГРАФИКА: кегель цифры-факта ---------- Разрыв в шкале — то, чего не хватало. Замер до правки: самый крупный кегль в любой секции = --t-h2 = 38px, тело 15px, отношение 2,53 во ВСЕХ секциях подряд. Отсюда «всё среднего размера». --t-num даёт 84/15 = 5,6 и работает как отдельный визуальный объект, а не как ещё один заголовок. Соотношение цифра : подпись = 84 : 13 ≈ 6,5:1 (у референса kazantattoofest — 101 : 16 = 6,3:1). */ --t-num: clamp(40px, 6.4vw, 84px); /* Geologica 500, lh .92, tracking -.03em */ /* 🔴 Нижняя граница 38, а не 30. Замер на 390: при поле 30px отношение к телу (15px) выходит 2,0 — ниже порога контраста 2,5. Секции, где цифра набрана этим токеном, на телефоне переставали давать разрыв в кегле, ради которого он и заведён. 38/15 = 2,53. */ --t-num-sm: clamp(38px, 4.2vw, 52px); /* цифра в карточке и в ряду прайса */ --lh-num: .92; --tr-num: -.03em; /* ---------- СЕТКА: асимметрия ---------- DESIGN_VARIANCE 8 требует ломать 6/6. Две пропорции на весь сайт, чтобы асимметрия читалась как система, а не как случайность. */ --grid-7-5: 7fr 5fr; --grid-8-4: 8fr 4fr; /* ---------- МОУШЕН: сцены ---------- */ --d-scene: .9s; /* раскрытие сцены, счётчик */ --e-mask: cubic-bezier(.16,1,.3,1); /* маска, «выезд» из-под кромки */ --parallax: 8%; /* потолок смещения (промпт 08) */ /* ---------- ХАЙРЛАЙН НАД ЦИФРОЙ ---------- Приём из Gustavo Faria: плотный ruled-список вместо карточек с рамками. */ --rule: 1px solid var(--line); --rule-i: 1px solid var(--line-i); } /* Сцены, которые дороже всего стоят на слабом железе, не запускаются ни при «меньше движения», ни на телефоне. Значение читает js/scenes.js. */ @media (prefers-reduced-motion: reduce){ :root{ --d-scene:0s; --parallax:0% } } /* ---------- ЛИНИЯ РИСУНКА ---------- Добавлено 26.08.2026. --line-i (белый 14 %) задуман как разделитель между блоками текста и для этого хорош. Но когда им нарисован ВЕСЬ чертёж — контуры устройств, провода, стены — рисунок пропадает: на скриншоте схемы протоколов не было видно ни одной рамки и ни одного провода. Геометрии рисунка нужна своя, более плотная линия. Разделители --line / --line-i при этом не тронуты. */ :root{ --line-fig: rgba(255,255,255,.42); /* контур на тёмном */ --line-fig-l: rgba(10,10,15,.34); /* контур на светлом */ } /* ---------- ПЕРВЫЙ ЭКРАН В РАЗМЕР ЭКРАНА ---------- Добавлено 31.08.2026, ТЗ 29 часть 5. Только ДОБАВЛЕНИЯ: ни одно значение выше не изменено. Заголовок первого экрана обязан уменьшаться вместе с ВЫСОТОЙ вьюпорта, а не только с шириной: на эталонном 375×667 (iPhone SE) --t-hero даёт 32px и вместе с лидом и кнопками выталкивает схему и полосу фактов за сгиб. --t-hero не трогаем — он работает на h1 остальных страниц. */ :root{ --t-hero-vp: clamp(22px, min(5.2vw, 5.4svh), 56px); --t-lead-vp: clamp(13px, min(1.2vw, 2.1svh), 17px); --hero-py: clamp(var(--s-5), 4svh, var(--s-9)); --hero-gap: clamp(var(--s-4), 2.6svh, var(--s-8)); }