/* ============================================================ MDMprint — Design tokens (единый источник правды) Значения выверены по Figma «Layouts for mdmprint.ru v3». Бренд-жёлтый переопределён на фирменный #FFC100. ============================================================ */ :root{ /* ---- Бренд ---- */ --brand: #FFC100; /* фирменный жёлтый */ --brand-hover: #E6A800; /* затемнение под hover/active */ --brand-dark: #CC9E00; --brand-text: #A87D00; /* бренд как цвет ТЕКСТА на светлом: #FFC100 даёт контраст 1.7:1 — нечитаемо */ --brand-soft: #FFF3CC; /* мягкая плашка-заливка */ --brand-soft-2: #FFE9AE; /* рамка/hover поверх --brand-soft */ --brand-tint: rgba(255,193,0,.12); /* акцент @ ~12% */ --on-brand: #222220; /* текст на жёлтом */ /* ---- Текст ---- */ --text-primary: #222220; --text-secondary: #6e6e6a; --text-tertiary: #9a9a96; --text-on-dark: #ffffff; /* ---- Поверхности / линии ---- ЕДИНАЯ ТЁПЛАЯ НЕЙТРАЛЬНАЯ ШКАЛА: все светлые нейтрали тёплые (беж/песок), холодного серого нет — гармонирует с тёплым брендом (#FFC100). Лайтнесс сохранён, тепло сдержанное (B ниже R на ~5–8). */ --surface-page: #ffffff; --surface-subtle: #f6f5f0; /* фон СЕКЦИИ (герой) — тёплый, самый светлый тон */ --surface-gray: #f5f3ed; /* подложка КАРТОЧКИ и мелких плашек (бейдж, disabled) */ --surface-gray-2: #ebe8e1; /* её hover/нажатое состояние */ --surface-panel: #f2f0ec; /* тёплая панель-подложка группирующей колонки (рельса мегаменю, трэи) */ --surface-card: #ffffff; /* белая плашка поверх нейтралей */ --surface-dark: #222220; --surface-dark-2: #2b2b29; /* панель/подложка на тёмном (топбар-меню) */ --surface-dark-hover:#000; /* hover тёмной кнопки: --surface-dark уже тёмный, нужен шаг вниз */ --text-on-dark-2: #c7c9cd; /* приглушённый текст на тёмном */ --border-on-dark: rgba(255,255,255,.09); --border-on-dark-2: rgba(255,255,255,.35); /* заметная линия на тёмном: пунктир «можно нажать» */ --surface-on-dark: rgba(255,255,255,.10); /* плитка поверх тёмного (1.36:1 — видна, но тиха) */ --surface-on-dark-2:rgba(255,255,255,.16); /* её hover */ --surface-on-light: rgba(96,68,20,.06); /* зеркало on-dark для светлого: тональная ТЁПЛАЯ заливка (soft-кнопки/чипы) */ --surface-on-light-2:rgba(96,68,20,.11); /* её hover */ /* ---- Цвета внешних площадок (маркер источника отзыва) ---- Единственные чужие бренд-цвета в системе: подменять их нельзя. */ --src-yandex: #fc3f1d; --src-2gis: #19aa1e; /* ---- Метки типов сущностей (поиск по сайту) ---- Категориальная палитра: различает вид результата, а не его статус. Услуга/страница метки не красят — им хватает нейтральной --surface-gray, раздел берёт бренд (--brand-text на --brand-soft). */ --tag-article: #3b6fb0; --tag-article-bg: #edf3fb; --tag-portfolio: #6b53b0; --tag-portfolio-bg: #f1ecfb; --tag-news: #357646; --tag-news-bg: #e9f6ed; /* затемнён: #3f8a52 давал 3.8:1 на своём фоне */ --tag-section: #856200; /* «Раздел»: тёмный бренд-текст на --brand-soft (5:1); --brand-text давал 3.4:1 */ --danger: #e0483a; /* ошибки валидации, обязательные поля */ --success: #2ea64f; /* маркер «плюсы» */ --border: #e6e1d8; /* тёплая граница (в единой шкале) */ --border-strong: #d9d3c9; /* ---- Радиусы ---- */ --radius-inside: 4px; --radius-md: 8px; --radius-outside: 14px; --radius-pill: 999px; /* ---- Тень ---- */ --shadow: 0 4px 22px rgba(0,0,0,.10); --shadow-lg: 0 24px 60px -24px rgba(0,0,0,.22); /* ---- Отступы (шкала Figma) ---- */ --sp-2:2px; --sp-4:4px; --sp-6:6px; --sp-8:8px; --sp-10:10px; --sp-12:12px; --sp-14:14px; --sp-16:16px; --sp-18:18px; --sp-20:20px; --sp-24:24px; --sp-28:28px; --sp-32:32px; --sp-40:40px; --sp-48:48px; --sp-64:64px; --sp-80:80px; --section-y: 80px; /* вертикальный отступ секции */ /* ЗАЗОР МЕЖДУ КАРТОЧКАМИ (сетки и ленты). Токен, а не число по месту: правило «внешнее ≥ внутреннего» держится только если зазор и поле контейнера меняются согласованно. На мобилке поле контейнера 16 — значит зазор обязан быть ≤ 16, иначе плитки стоят друг от друга дальше, чем от края экрана, и сетка рассыпается на отдельные объекты. Ставим 12. Ленты считают ширину карточки от этого же токена — иначе «2.2 в кадре» разъедется. */ --gap-card: var(--sp-24); /* ---- Раскладка ---- */ --container: 1176px; /* ширина контента (Figma: 1176 при 1440, поля 132) */ --container-pad: 24px; /* боковые поля на узких экранах */ /* ---- Шрифты ---- */ --font-head: 'AttractiveCond', 'PT Sans Narrow', -apple-system, 'Segoe UI', Arial, sans-serif; --font-body: 'Roboto', -apple-system, 'Segoe UI', Arial, sans-serif; /* ---- Типошкала: размер / интерлиньяж / трекинг ---- Заголовки — AttractiveCond, КАПС; текст — Roboto. ВАЖНО: трекинг в Figma задан в ПРОЦЕНТАХ, не в px (H4 «2» = 2% = 0.36px при 18px). Поэтому здесь em, а не px — иначе буквы разряжены в 3–6 раз. */ --t-display: 50px; --t-display-lh:54px; --t-display-ls:.01em; /* 1% */ --t-h1: 40px; --t-h1-lh:44px; --t-h1-ls:.01em; /* 1% */ --t-h2: 32px; --t-h2-lh:44px; --t-h2-ls:.015em; /* 1.5% */ --t-h3: 24px; --t-h3-lh:28px; --t-h3-ls:.02em; /* 2% */ --t-h4: 18px; --t-h4-lh:22px; --t-h4-ls:.02em; /* 2% */ --t-lead: 18px; --t-lead-lh:27px; --t-body: 16px; --t-body-lh:24px; --t-small: 14px; --t-small-lh:20px; --t-caption: 13px; --t-caption-lh:16px; /* Трекинг .04em, а не макетные 0.5%: при 12px 0.5% = 0.06px, то есть трекинга нет вовсе, а ступень --t-label живёт только капсом (теги карточек, .mk-eyebrow, подписи статбара). Капс набран из прописных, у которых боковые просветы рассчитаны на соседство со строчными, — без компенсации буквы слипаются, и тем заметнее, чем мельче кегль. 0.5% — недосмотр макета, а не решение: в Figma у той же ступени соседи стоят с нормальным трекингом. */ --t-label: 12px; --t-label-lh:16px; --t-label-ls:.04em; /* Микро-подпись: длительность ролика, вес файла, лейблы групп, бейджи. Ступень существовала де-факто (кит набирал её числом 11 в трёх местах), но токена не было — значит на неё не распространялась ДС. Заведена по факту использования, а не придумана. */ --t-micro: 11px; --t-micro-lh:14px; --t-micro-ls:.04em; /* Интерактивная строка и поле ввода: пункты меню, строки каталога, инпуты, заголовки строк чек-листа. Ступень существовала де-факто (11 мест числом 15), токена не было. Кегль совпадает с --t-button — это совпадение, а не синоним: у кнопки свой леадинг (16, под высоту 48) и свой вес. Держим врозь намеренно: иначе правка кнопки поехала бы по всему меню. */ --t-ui: 15px; --t-ui-lh:20px; --t-button: 15px; --t-button-lh:16px; --t-button-w:500; /* Text/Button — Roboto Medium */ } /* ---- Мобильная типошкала ---- Переопределяем сами ступени, а не заводим вторые токены (--t-h1-m и т.п.): тогда всё, что набрано по ДС, съезжает на мобильную лестницу само, и в вёрстке не нужно дублировать правила под каждый брейкпоинт. Приём в проекте уже был — так на мобилке жил --t-lead; здесь он просто доведён до всей шкалы и убран из прототипа в ДС. Почему ступени именно такие: десктопная лестница 50/40/32/24/18 на 390px не работает — h1 в 40 съедает пол-экрана, а h2 в 32 спорит с ним. Мобильная 40/34/24/18/16 сохраняет ЧЕТЫРЕ различимых уровня: раньше h3 и h4 на мобилке оба сваливались в 18 и различались только весом (700 против 600) — этого мало, чтобы читалась иерархия. Текстовые ступени (body/small/caption/label/micro) НЕ трогаем: 16px — минимум, ниже которого iOS зумит поле ввода, а мера строки на мобилке чинится шириной контейнера, не кеглем. */ @media (max-width:1023px){ :root{ --container-pad: 16px; /* боковые поля на мобилке; --gap-card ниже обязан быть ≤ этого */ --t-display: 40px; --t-display-lh:44px; --t-h1: 34px; --t-h1-lh:38px; --t-h2: 24px; --t-h2-lh:28px; --t-h3: 18px; --t-h3-lh:22px; --t-h4: 16px; --t-h4-lh:20px; --t-lead: 16px; --t-lead-lh:24px; --gap-card: var(--sp-12); /* ≤ поля контейнера (16) — см. правило выше */ } }