/* ════════════════════════════════════════════════════════════════════ COOLBAG · КОНТРАКТ ТОКЕНОВ · слой 1 · весь сайт ──────────────────────────────────────────────────────────────────── Куда: Настройки сайта → Ещё → ПОЛЬЗОВАТЕЛЬСКИЕ CSS-СТИЛИ. Без тега — поле принимает голый CSS. НЕ в «HTML-код для вставки внутрь HEAD»: тот приземляется раньше родных таблиц Tilda, и любое правило с селектором оттуда проигрывает. ФАЙЛ ИЗ ТРЁХ СЛОЁВ, читать сверху вниз: слой 1 — значения ролей на :root. Ни одного селектора, ни одного !important: Tilda про переменные --cb-* не знает, спорить ей не с чем, поэтому слой не может проиграть каскад. слой 2 — оформление ролей: типографика и цвет по умолчанию. Здесь появляются селекторы и !important, но ровно те же, что стояли в блоках, — специфичность не изменилась. слой 3 — плоскости: область переопределяет значения ролей у себя. Чего здесь НЕТ и не будет: механика, скрипты, раскладка и зазоры, подобранные по чернилам. Последние блочные по природе — поправка зависит от кеглей двух соседних строк (D-094). Состояния (наведение, выбранное) тоже остаются в блоках: это их логика, а не свойство роли. Значения взяты из System/Standards/DESIGN_TOKENS.md, раздел «Сквозные роли и канонические значения», а НЕ вычиткой из блоков: вычитка перенесла бы сюда существующий дрейф. Решение: D-201. Источник правды этого файла — хранилище проекта. Правка здесь и правка в DESIGN_TOKENS.md — одно движение, не два. ════════════════════════════════════════════════════════════════════ */ :root { /* ── Гарнитуры ─────────────────────────────────────────────────── */ --cb-font-heading: "Bounded", Arial, sans-serif; /* заголовки */ --cb-font-body: GrosVentre, Arial, sans-serif; /* основной текст */ /* ── ЦВЕТ · ДВА ЯРУСА, имена описывают РОЛЬ, а не внешность ──────── До 12 августа роли назывались по цвету: --cb-dark, --cb-light. Из-за этого подвал — единственная тёмная плоскость сайта — не мог переопределить роли и заводил собственные имена, выпадая из системы целиком. Функциональные имена решают это так же, как режимы переменных в Figma: правила остаются общими, а область переопределяет значения ролей у себя. Любая будущая тёмная секция получается даром. ЧТО ЧЕМУ СООТВЕТСТВУЕТ: surface — плоскость, на которой лежит блок on-surface — первичный текст на этой плоскости on-surface-muted — вторичный текст on-surface-faint — погашенный текст и разделительные линии accent / on-accent — акцент и текст поверх акцентной заливки ── ЯРУС 1 · ПАЛИТРА ───────────────────────────────────────────── Сами пигменты. ЕДИНСТВЕННОЕ место во всём проекте, где стоит hex. Имена — по названиям из брендового макета, без номеров: у каждого тона одна ступень, номер сейчас не означал бы ничего. Появится второй оранжевый — тогда и появится ступень. Чтобы попробовать другой пигмент, правится строка ЗДЕСЬ — и меняется всё, что на него ссылается, на всех блоках и страницах разом. Чтобы поменять, какой пигмент играет роль, правится строка роли ниже; прежний пигмент при этом остаётся в палитре и не теряется. */ --cb-ink: #21252C; /* самый тёмный · самый контрастный оттенок */ --cb-orange: #EB7D39; /* оранжевый · ключевой оттенок бренда */ --cb-teal: #92BAC3; /* пыльный бирюзовый · дополнительный оттенок бренда */ --cb-milk: #FCFBFA; /* молочно-белый */ --cb-graphite: #818080; /* графит */ --cb-silver: #ADADAD; /* светло-серый */ /* Точки градиентов из брендового макета. Отдельными пигментами, потому что могут понадобиться и поштучно. */ --cb-ink-soft: #6E7B92; /* верхняя точка тёмного градиента */ --cb-orange-soft: #F9B894; /* средняя точка оранжевого градиента */ --cb-orange-pale: #FFDBC9; /* верхняя точка оранжевого градиента */ /* ЗАГОТОВКА, НЕ ПРИМЕНЯЕТСЯ. Решение Roman 12 августа: завести и ждать. Оба градиента в макете помечены «только для заголовков». Прежде чем применять, решить три вещи, каждая меняет результат: · направление — в макете оно не задано; · какие именно заголовки его получают; · поведение на тёмной плоскости — градиент НЕ переворачивается сам механикой плоскостей, его придётся задавать отдельной записью. Плюс сам приём: текст с градиентом рисуется обрезкой фона по буквам, у этого свои последствия для выделения мышью и для отката без поддержки. */ --cb-grad-heading-ink: linear-gradient(180deg, var(--cb-ink), var(--cb-ink-soft)); --cb-grad-heading-accent: linear-gradient(180deg, var(--cb-orange), var(--cb-orange-soft), var(--cb-orange-pale)); /* ── ЯРУС 2 · РОЛИ ──────────────────────────────────────────────── Что чем является. Hex здесь не пишется никогда — только ссылка на палитру выше. */ --cb-surface: var(--cb-milk); /* плоскость, на которой лежит блок */ --cb-on-surface: var(--cb-ink); /* первичный текст */ --cb-on-surface-muted: var(--cb-graphite); /* вторичный текст */ --cb-on-surface-faint: var(--cb-silver); /* погашенный текст и линии */ --cb-accent: var(--cb-orange); /* акцент */ --cb-accent-2: var(--cb-teal); /* второй акцент · первое назначение 12 августа: наведение на кнопку «Подробнее» в каталоге главной */ --cb-on-accent: var(--cb-milk); /* текст поверх акцентной заливки */ --cb-rule-color: var(--cb-on-surface-faint); /* линии · пигмент не дублировать */ /* Совместимость на время переезда. Блок, ещё не прошедший проход, продолжает работать на прежних именах и не требует срочной правки. Удалить, когда последний блок перейдёт на функциональные имена — проверяется скриптом audit_contract_gate.py, он помечает каждое использование псевдонима предупреждением. */ --cb-dark: var(--cb-on-surface); --cb-light: var(--cb-surface); --cb-muted: var(--cb-on-surface-muted); --cb-faint: var(--cb-on-surface-faint); /* ── Типографическая шкала · D-088, потолки по D-096 ─────────────── Интерполяция 420 → 1920. Выше верхнего якоря не масштабируется ничто (D-095), ниже нижнего значения удерживаются. D-роли самостоятельны: D2 означает «текст второго уровня», а не «описание при H2». */ --cb-h1-size: clamp(32px, calc(26.40px + 1.333vw), 52px); /* H1 · единственный на странице */ --cb-h2-size: clamp(26px, calc(20.40px + 1.333vw), 46px); /* H2 · заголовок блока */ --cb-h3-size: clamp(20px, calc(18.32px + 0.400vw), 26px); /* H3 · заголовок пункта */ --cb-d1-size: clamp(20px, calc(18.88px + 0.267vw), 24px); /* D1 · текст первого уровня */ --cb-d2-size: clamp(16px, calc(14.88px + 0.267vw), 20px); /* D2 · текст второго уровня */ --cb-d3-size: clamp(14px, calc(13.44px + 0.133vw), 16px); /* D3 · текст третьего уровня */ --cb-d4-size: clamp(12px, calc(11.44px + 0.133vw), 14px); /* D4 · подписи и крошки · Light */ /* ── Межстрочные ───────────────────────────────────────────────── */ --cb-leading-heading: 1.2; /* все заголовки */ --cb-leading-descr: 1.1; /* все описания */ /* ── Трекинги ──────────────────────────────────────────────────── */ --cb-h1-tracking: 0.06em; /* H1 · оба первых экрана сведены 11 августа (D-099) */ --cb-btn-tracking: 0.06em; /* подпись кнопки · пока только HOME_HERO, кандидат */ /* ── Охранная зона блока ─────────────────────────────────────────── Горизонталь и вертикаль ВСЕГДА разными переменными, даже когда значения совпадают: мобильный часто требует асимметрии. Прежние --cb-pad-x / --cb-pad-y — та же роль с другими минимумами, приводятся к этим именам и значениям при переезде блока. */ --cb-pad-inline: clamp(16px, calc(5.85px + 2.821vw), 60px); --cb-pad-block: clamp(32px, calc(22.77px + 2.564vw), 72px); /* ── Ритмы · сетка проекта, шаг 20 (D-093) ─────────────────────── */ --cb-section-gap: clamp(32px, calc(25.54px + 1.795vw), 60px); /* между смысловыми секциями */ --cb-item-gap: clamp(16px, calc(12.77px + 0.897vw), 30px); /* между однородными элементами */ --cb-title-gap: clamp(8px, calc(6.15px + 0.513vw), 16px); /* заголовок → его описание */ /* ── Физические пороги · не масштабируются никогда ─────────────── */ --cb-line-strong: 2px; /* основная линия */ --cb-line-hair: 1px; /* тонкая линия */ --cb-touch-min: 44px; /* минимальная зона нажатия */ /* ── Начертания ──────────────────────────────────────────────────── Две ступени на весь проект. До 12 августа литералы 300/400 были переписаны в каждом блоке; сведены сюда вместе с ролями ниже. Кандидаты в контракт имён — подтвердить у Roman. */ --cb-weight-rest: 300; /* покой: описания, вторичный текст */ --cb-weight-active: 400; /* активное: заголовки, подписи кнопок */ } /* ════════════════════════════════════════════════════════════════════ ТИПОГРАФИЧЕСКИЕ РОЛИ · слой 2 ──────────────────────────────────────────────────────────────────── Здесь роль перестаёт быть только числом и становится оформлением целиком: гарнитура, кегль, начертание, межстрочный, трекинг. Блок больше не пишет типографику — он пишет только раскладку. КАК ПОДКЛЮЧИТЬ НОВЫЙ БЛОК: дописать его селектор в список нужной роли ниже. Больше ничего. Менять кегль, гарнитуру или начертание роли — здесь и только здесь, на всём сайте разом. ПОЧЕМУ СПИСКИ СЕЛЕКТОРОВ, А НЕ КЛАССЫ ВИДА .cb-h3. Разметку блоков рисует Tilda, своего класса мы на её узел не повесим без скрипта. Собственная система классов у Tilda есть — t-title, t-name, t-descr, t-text с модификаторами размера, — но на наши роли она не ложится: замер 12 августа показал, что t-name_xs несёт у нас 18px в подвале и 12px в меню, наш H3 приезжает под тремя разными классами, а у заголовка карточки каталога и у обеих кнопок общего класса нет вовсе. Повесить роль на t-name_xl значит подписаться на то, что чужой блок с тем же классом заберёт наш кегль. ПОЧЕМУ СЕЛЕКТОРЫ ОСТАЛИСЬ ТЕМИ ЖЕ, ЧТО БЫЛИ В БЛОКАХ. Специфичность не изменилась ни на единицу, значит расстановка сил против родных правил Tilda прежняя — переезд не может ничего сломать в каскаде. Префикс .uc-* сохранён: правила не растекаются на блоки, которых мы не касались. ЦВЕТ ЗДЕСЬ ЕСТЬ — но только умолчательный для роли. Замер 12 августа показал, что устойчивого умолчания у цвета нет так, как есть у кегля: он зависит от плоскости (заголовок карточки каталога светлый не потому, что H3 светлый, а потому что под ним фотография) и от состояния (у блока 3 три ступени контраста на одну роль). Поэтому плоскость решается слоем 3, а состояние остаётся в блоке и переопределяет роль. ЧЕГО ЗДЕСЬ НЕТ. Собственная шкала подвала --cb-foot-* и номер шага процесса --cb-num-size — это не контрактные роли. Кнопка каталога берёт свой --cb-btn-size вместо D4 вопреки D-096 — долг, правится своим проходом, не здесь. ════════════════════════════════════════════════════════════════════ */ /* H1 · единственный заголовок страницы */ .uc-cb-first .t1241__title { color: var(--cb-on-surface) !important; font-family: var(--cb-font-heading) !important; font-size: var(--cb-h1-size) !important; font-weight: var(--cb-weight-active) !important; line-height: var(--cb-leading-heading) !important; letter-spacing: var(--cb-h1-tracking); } /* H2 · заголовок блока и название модели в каталоге. Название модели переведено с H3 на H2 решением Roman 12 августа: карточка каталога занимает треть экрана и по весу равна секции. */ .uc-cb-whyus .t-section__title, .uc-cb-order-path .t-section__title, .uc-cb-catalog .t-card__title, .uc-cb-formats .t-card__title { color: var(--cb-on-surface) !important; font-family: var(--cb-font-heading) !important; font-size: var(--cb-h2-size) !important; font-weight: var(--cb-weight-active) !important; line-height: var(--cb-leading-heading) !important; } /* H3 · заголовок пункта. Оформление совпадало дословно во всех местах — сведены без оговорок. */ .uc-cb-whyus .t908__heading, .uc-cb-order-path .t1106__title { color: var(--cb-on-surface) !important; font-family: var(--cb-font-heading) !important; font-size: var(--cb-h3-size) !important; font-weight: var(--cb-weight-active) !important; line-height: var(--cb-leading-heading) !important; } /* D1 · текст первого уровня. Описание карточки каталога переведено сюда решением Roman 12 августа: D2 оказался мелковат на широкой карточке. Начертание остаётся Light. */ .uc-cb-first .t1241__descr, .uc-cb-catalog .t-card__descr { color: var(--cb-on-surface) !important; font-family: var(--cb-font-body) !important; font-size: var(--cb-d1-size) !important; font-weight: var(--cb-weight-rest) !important; line-height: var(--cb-leading-descr) !important; } /* D2 · текст второго уровня. 12 августа сюда переведены описание плитки блока 3 и описание карточки форматов: на D3 они читались мелко на широком экране. */ .uc-cb-whyus .t-section__descr, .uc-cb-whyus .t908__descr, .uc-cb-formats .t-card__descr { color: var(--cb-on-surface-muted) !important; font-family: var(--cb-font-body) !important; font-size: var(--cb-d2-size) !important; font-weight: var(--cb-weight-rest) !important; line-height: var(--cb-leading-descr) !important; } /* D2 в заголовочной одежде · ОСОЗНАННОЕ ИСКЛЮЧЕНИЕ. Значение метрики берёт кегль D2, но гарнитуру и межстрочный — заголовочные. Решение Roman: D-роль задаёт размер, но не обязывает к гарнитуре (D-088). Поэтому роль не «сломана» — она здесь надета иначе, и это единственное такое место на сайте. */ .uc-cb-first .cb-first__metric-value { color: var(--cb-on-surface) !important; font-family: var(--cb-font-heading) !important; font-size: var(--cb-d2-size) !important; font-weight: var(--cb-weight-active) !important; line-height: var(--cb-leading-heading) !important; } /* D3 · текст третьего уровня. Пять мест, оформление совпадало дословно — сведены без оговорок. */ .uc-cb-first .cb-first__metric-label, .uc-cb-order-path .t1106__text { color: var(--cb-on-surface-muted) !important; font-family: var(--cb-font-body) !important; font-size: var(--cb-d3-size) !important; font-weight: var(--cb-weight-rest) !important; line-height: var(--cb-leading-descr) !important; } /* Подпись кнопки первого экрана · роль D3, поднята с D4 решением Roman 12 августа: на десктопе D4 читался мелко. Начертание прежнее. Межстрочный намеренно не задан: подпись центрируется флексом, и замер показал, что line-height на неё не влияет. */ .uc-cb-first .t1241__buttons .t-btn { font-family: var(--cb-font-body) !important; font-size: var(--cb-d3-size) !important; font-weight: var(--cb-weight-active) !important; letter-spacing: var(--cb-btn-tracking) !important; } /* ════════════════════════════════════════════════════════════════════ ПЛОСКОСТИ · слой 3 ──────────────────────────────────────────────────────────────────── Область переопределяет значения ролей у себя — правила при этом остаются общими. Это ровно режимы переменных из Figma. Новая тёмная секция подключается одной такой записью. БЛАГОДАРЯ ЭТОМУ блок не выбирает цвет. Он объявляет, на какой он плоскости, а цвет роли приходит из слоя выше. Исключение — состояния: «в покое приглушён, при наведении в акцент» — это логика блока, она остаётся у блока и переопределяет роль на своей области. ════════════════════════════════════════════════════════════════════ */ /* Карточка каталога · плоскость «поверх фотографии». Замер живой страницы 12 августа: заголовок, описание и подпись кнопки отрисованы одним и тем же #fcfbfa. Вторичный текст здесь НЕ приглушается — поверх фотографии контраст и так хрупкий, и вторая ступень его добила бы. Поэтому на этой плоскости muted совпадает с on-surface, и это не дрейф, а свойство плоскости. --cb-surface здесь не задаётся: плоскость — сама фотография. */ .uc-cb-catalog .t694__cell { --cb-on-surface: var(--cb-milk); --cb-on-surface-muted: var(--cb-milk); } /* Подвал · единственная тёмная плоскость сайта. Вторичный текст не инвертируется: #818080 читается и на светлом, и на тёмном — проверено замером контраста при сборке подвала. */ .uc-cb-footer { --cb-surface: var(--cb-ink); --cb-on-surface: var(--cb-milk); --cb-on-surface-muted: var(--cb-graphite); --cb-on-surface-faint: var(--cb-silver); }