/** * gs-tokens.css — шкала рельса. ЕДИНСТВЕННЫЙ источник значений. * * ⚠️ Блок ПЕРЕЕХАЛ сюда из `gs-home.css` 05.08, а не был скопирован. Копия * понадобилась, чтобы касса могла взять те же цвета, не таща за собой три * тысячи строк правил рельса, — и копия же разошлась бы с оригиналом на первой * правке палитры, а заметили бы это по скриншоту через месяц. * * Подключается ПЕРЕД `gs-home.css` (страницы рельса) и перед мостом * `gs-tokens-bridge.css` (чекаут). */ :root { /* ГРУППЫ. Пометки `@group` читаются машиной: по ним стайлгайд строит разделы, а панель настройки (?gs-tune=1) — аккордеоны. Поэтому группировка живёт ЗДЕСЬ, в одном месте, а не переписана в трёх. Новый токен попадает в ту группу, под которой стоит. `@internal` — то, что панель не предлагает крутить (шрифтовой стек, кривая анимации, SVG-галочка). */ /* @group Цвет Палитра: чёрный · белый · золото (решение 02.08). Схема снята с референса (белый + серый + чёрный + один акцент), акцент заменён на фирменное золото. Тёплая бумага снята сознательно: контраст держит чёрный, а не оттенок. Все пары посчитаны перед правкой. */ --gs-ink: #000000; /* 21:1 на белом */ --gs-ink-2: #555555; /* 7.46:1 */ --gs-ink-3: #606060; /* нижняя граница для подписей. Значение выбрано по САМОЙ тёмной поверхности, на которой подпись может оказаться (--gs-surface-2): 4,62:1 там, 5,13 на бумаге, 6,29 на белом. Пересчитывался трижды вслед за фоном — #757575 годился на белом, #6B6B6B на сером, #666666 на бумаге, но не на плашке. Считать это в уме на каждой правке фона нельзя: поэтому появился сторож `gs-contrast-audit.mjs`. */ /* Подложка сайта — ТЁПЛАЯ БУМАГА, снята замером со старого сайта (решение Никиты 03.08). Нейтральный #F2F2F2 был холоднее и суше; бумага заметно мягче под чёрным текстом и золотом. */ --gs-bg: #E9E8E4; --gs-surface: #FFFFFF; /* ⚠️ СТУПЕНЬ МЕЖДУ БЕЛЫМ И ТРЕТЬИМ УРОВНЕМ — панель ВНУТРИ белой карты. Её в шкале не было, и это вскрылось на кассе: блок «вы покупаете» держался ровно на этом тоне, без рамки. Когда касса перешла на шкалу, тон схлопнулся в белый — панель стала белой на белом и просто исчезла. Заметил Никита глазами; ни один сторож не спросил «а видно ли ещё этот блок». Значение взято у кассы: там оно проверено. */ --gs-surface-1: #F4F3F0; /* Третья ступень потеплела и потемнела вместе с фоном: на бумаге прежний #E6E6E6 почти сливался с ней, и стрелки ленты пропадали. */ --gs-surface-2: #DEDDD8; --gs-line: #D6D5D0; /* линия тоже тёплая — нейтральная на бумаге синит */ --gs-accent: #D9B648; --gs-accent-ink: #000000; /* 10.74:1. Белый на золоте — 1.96:1, запрещён */ /* Тень панели поверх страницы. ЕДИНСТВЕННОЕ значение в системе, которое нельзя вывести из существующих токенов: без неё модалка не отделяется от страницы, а вывести её из скруглений или отступов не из чего. */ --gs-bar-h: 72px; /* высота шапки — от неё отсчитывается выдвижное меню */ --gs-shadow-over: 0 24px 80px rgba(0, 0, 0, .28); --gs-muted: #AAA8A8; /* неактивное состояние, из UI-Kit */ --gs-focus: #7A5F12; /* тёмное золото, 6.05:1 на белом */ --gs-ok: #1D7F3F; /* @group Пастель Семья акцентов из UI-Kit Никиты (Figma, раздел colors). До 04.08 система была строго чёрно-бело-золотой, и страница временами читалась монохромной — хотя цвет в собственной системе был, просто не доехал. ⚠️ Это ФОН, а не текст. Все шесть светлые: на них набирают чёрным, а сами они по тексту дали бы 1.2–2.9:1. Правило то же, что у золота, и нарушить его случайно нельзя — цвета чернил тут нет. ⚠️ ЗАЛИВАТЬ ЦЕЛЫЕ БЛОКИ ЭТИМИ ЦВЕТАМИ НЕЛЬЗЯ (решение Никиты 04.08). Пробовали на плитках направлений — шесть залитых карточек подряд перетягивают внимание на себя и превращают раздел в набор наклеек: цвет начинает значить «блок», а не «тема». Отменено в тот же день, варианты `--tint-*` у карточки удалены. Назначение — МЕЛКАЯ МЕТКА: точка, полоска, кружок рядом с названием. Пятно в 8-10px опознаётся так же быстро, как залитая плитка, но не спорит ни с заголовком, ни с соседями. Пока применения нет — цвета лежат в системе и ждут своего места. */ --gs-tint-1: #D6B0F7; /* сиреневый */ --gs-tint-2: #9FE1E1; /* аквамарин */ --gs-tint-3: #C4C9A3; /* шалфейный */ --gs-tint-4: #E8D491; /* мягкое золото */ --gs-tint-5: #DEF2ED; /* мятный */ --gs-tint-6: #A0E870; /* зелёный */ /* @group Отступы 4pt-сетка, шаги растут нелинейно. */ --gs-gap: 40px; /* зазор карточек · плитки тем — 24px (--gs-5) */ --gs-1: 4px; --gs-2: 8px; --gs-3: 12px; --gs-4: 16px; --gs-5: 24px; --gs-6: 32px; --gs-7: 48px; --gs-8: 64px; --gs-9: 80px; --gs-10: 120px; /* ритм секций по замеру референса */ /* @group Скругления Два числа и капсула. Крупные поверхности 20, мелкие 12, нажимаемое — капсула. Полосы во всю ширину экрана скругления не получают: у элемента, упирающегося в край окна, углов нет. Значение слайдера (24px) — наше, с gromind.io: у референса скруглений нет вообще, замер 03.08 показал 0 у всех крупных поверхностей без единого исключения. То есть «как на примере» для слайдера значило бы «убрать», а нужно было обратное — поэтому цифра взята у своего сайта. За сутки здесь стояли 2+16, 24+8 и 0; больше не меняем без просьбы. */ /* Скругление — ступень вниз от старого сайта (решение Никиты 03.08). Замер старого: у настоящих поверхностей доминанта 24, редкие 16/15/12, у нажимаемого — капсула. Берём на ступень меньше и сводим к ДВУМ числам: третье (24 только на слайдере) существовало ради разницы в 4px, которой никто не видит, — а расходиться при правке успевало бы наравне с прочими. */ --gs-radius: 20px; /* крупные поверхности: карточки, обложки, слайдер, юр-плашка */ --gs-radius-sm: 12px; /* мелкие: поля ввода, плашка-марка, ссылка-пропуск */ --gs-h-btn: 48px; /* обычная кнопка */ --gs-h-lg: 56px; /* крупная: первый экран, форма */ --gs-h-xl: 72px; /* единственная главная кнопка экрана — оплата. Значение пришло из кассы: там оно и было 72. */ --gs-radius-xs: 6px; /* чекбокс: меньше карточного, но не острый угол. Значение пришло из кассы — там оно уже проверено. */ --gs-radius-pill: 980px; /* нажимаемое: кнопки и чипы-ссылки */ /* Полосы во всю ширину экрана — шапка, подвал, цветная секция, сама страница — скругления НЕ получают: у элемента, упирающегося в край окна, углов нет. Это не пропуск, а то же правило, что на старом сайте: там среди крупных элементов 252 с прямым углом против 68 скруглённых. */ --gs-hairline: 1px; /* @group Рамка страницы Безопасные поля по бокам, в том числе вырезы экрана. */ --gs-max: 1216px; /* замер референса 02.08 */ /* Читаемая колонка — из канона дизайн-системы (specs/design-system.md §Сетка, там же 1920/32, TOC 260). Всё, что читают подряд: текст статьи, шапка статьи, юридические страницы. На 1216 строка выходит под 150 знаков — глазу трудно вернуться к началу следующей. */ --gs-max-read: 880px; /* Ширина выездной панели — замер прежней панели вопроса. */ --gs-side-w: 515px; /* Колонка оглавления — 260 по канону дизайн-системы (там же 880 и гаттер 40). Число не выведено из шкалы отступов: это ШИРИНА КОЛОНКИ, а не отступ. */ --gs-toc: 260px; --gs-gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right)); /* @group Заголовки Кегли сняты с референса: 64 первый экран, 48 секция, 32 лента. Межстрочный у всех 1.00 — это и даёт плотный «издательский» заголовок. Первые три текучие: меняются с шириной экрана. */ --gs-t-display: clamp(2.375rem, 1.1rem + 4.4vw, 4rem); /* 38 → 64 */ --gs-t-title: clamp(1.75rem, 1.15rem + 2.1vw, 3rem); /* 28 → 48 */ --gs-t-sub: clamp(1.375rem, 1.05rem + 1.1vw, 2rem); /* 22 → 32 */ /* Заголовок карточки ленты — ФИКСИРОВАННЫЙ, а не текучий: карточки стоят рядом в одной сетке и обязаны совпадать по кеглю на любой ширине. */ --gs-t-card: 1.3125rem; /* 21px */ /* @group Текст То, что читают подряд. Нижняя граница поднята до 16px: у референса мельче текста нет, а у нас основная масса шла 15px — на длинных текстах заметно. */ --gs-t-lead: clamp(1.0625rem, .98rem + .4vw, 1.3125rem); /* 17 → 21 */ --gs-t-body: 1.125rem; /* 18px */ --gs-t-small: 1rem; /* 16px — нижняя граница для текста */ /* @group Служебное Ярлыки и графика, а не чтение. Единственное место, где кегль мельче 16px допустим: пункт меню и подпись глазами не «читают», а опознают. */ --gs-t-nav: .875rem; /* 14px — замер референса: 14/600 */ --gs-t-micro: .8125rem; /* 13px — только ярлыки и подписи */ /* Глиф (⌕ ☰ эмодзи темы) — графика, а не текст, поэтому своя ступень. Без неё в правилах заводились 22/24/20/17px «на глаз». */ --gs-t-glyph: 1.5rem; /* 24px */ /* Водяной номер карточки продукта. Своя ступень, потому что это НЕ текст, а подложка: она читается пятном, и любой кегль из текстовой лестницы для неё мал. Замер макета главной: номер занимает больше половины высоты карточки. */ --gs-t-ghost: 10rem; /* 160px */ /* @group Начертание Вторая половина типографики. До 03.08 её вообще не было в системе: насыщенность, межстрочный и межбуквенный вписывались прямо в правила — 18 · 18 · 11 вхождений, из них 3 · 9 · 8 РАЗНЫХ значений. Девять межстрочных и восемь межбуквенных набирались по ходу, а не по шкале. Здесь они сведены к четырём ступеням межстрочного и трём межбуквенного: кегль и плотность связаны, поэтому ступеней должно быть немного. Межстрочный и межбуквенный общие для всех семей — в отличие от кегля, который у заголовков и текста свой. */ --gs-w-text: 400; /* обычный */ --gs-w-medium: 500; /* кнопки, вопросы — нажимаемое */ --gs-w-strong: 500; /* заголовки, ярлыки, навигация */ --gs-lh-tight: 1; /* крупные заголовки, числа, кнопки */ --gs-lh-snug: 1.22; /* заголовки карточек, плитки, чипы */ --gs-lh-lead: 1.45; /* описательные строки и приписки */ --gs-lh-text: 1.5; /* то, что читают подряд */ /* ОДНА ступень на всё крупное — как у конкурента (у него −0.04em на всём от 64 до 20). Значение своё: Golos Text шире и круглее Inter, на −0.04 буквы начинают слипаться. −0.03 плотнее прежнего −0.02, но без слипания. Две ступени (−0.02 и −0.026) различались на глаз ничем и были не решением, а следом ручного подбора. */ --gs-ls-tight: -.04em; /* всё крупное: заголовки, цена, логотип */ --gs-ls-caps: .06em; /* ярлыки капсом: разрядка нужна для читаемости */ /* @internal Панель это не предлагает крутить: шрифтовой стек, кривая анимации и SVG-галочка правятся кодом, а не ползунком. */ --gs-font: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; --gs-dur: .2s; /* одна длительность на все переходы — см. §Одолжено */ --gs-ease: cubic-bezier(.4, 0, .2, 1); /* Галочка списка — графика, а не символ шрифта: у эмодзи и «✓» вид зависит от системы. Два варианта, потому что кружок бывает и золотым, и чёрным. */ --gs-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.2 4.8 8.6 9.6 3.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* Шеврон — РИСУНОК, а не символ «⌄». Символ сидит на базовой линии и в своём кегле нарисован низко: в меню он визуально проваливался под строку. Рисунок центрируется точно и не зависит от гарнитуры. */ --gs-search: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M15.75 15.75L21 21M18 10.5C18 14.6421 14.6421 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5Z' stroke='currentColor' stroke-width='1.5' stroke-linejoin='round'/%3E %3C/svg%3E"); --gs-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='2.2' y='5.2' width='7.6' height='5.3' rx='1.1' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Cpath d='M4 5.2V3.9a2 2 0 0 1 4 0v1.3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E"); --gs-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --gs-check-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.2 4.8 8.6 9.6 3.4' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }