/* =================================================================== Токены дизайн-системы. Единственное место, где заводятся значения. Правило: в остальных css-файлах не должно быть ни одного литерального цвета, размера шрифта, радиуса, отступа или высоты контрола — только var() отсюда. ШКАЛЫ СОБРАНЫ ТАК, ЧТОБЫ СОСЕДНИЕ СТУПЕНИ БЫЛО ВИДНО. Прежняя шкала кеглей держала десять ступеней, из которых 15/16 и 18/19 на глаз не различались: выбор между ними ничего не выражал, и потому в разных файлах он делался по-разному. Осталось шесть плюс два исключения (hero и номер ошибки) — каждый шаг заметен. БРЕЙКПОИНТЫ (кастомные свойства в @media не работают, поэтому это соглашение, а не переменные — других значений в проекте быть не должно): xl 1200px контейнер перестаёт быть максимальной ширины lg 1024px планшет-альбом: боковые колонки схлопываются md 768px планшет-портрет: раскладка в одну колонку sm 480px телефон: плотная упаковка =================================================================== */ :root { /* ---------- Шрифт ---------- */ --font-sans: 'Montserrat', 'Segoe UI', Arial, sans-serif; /* ---------- Поверхности ---------- Слоистая тёмная схема: чем ближе элемент к пользователю, тем светлее. Шаг между слоями маленький намеренно — граница между панелью и фоном должна читаться как смена плоскости, а не как ещё одна рамка. */ --bg: #0B0B0C; /* фон страницы */ --surface-1: #101011; /* шапка, подвал — на полтона от фона */ --surface-2: #151517; /* карточки, панели */ --surface-3: #1C1C1F; /* вторичные кнопки, поля ввода */ --surface-4: #242428; /* ховер вторичных кнопок */ --surface-sunken: #0E0E10; /* утопленные плашки внутри карточки */ /* ---------- Границы ---------- Три ступени вместо «рамка везде одинаковая». Карточка обходится самой слабой: её и так отделяет смена поверхности, а вторая линия поверх этого даёт эффект миллиметровки. */ --border: rgba(255, 255, 255, 0.06); /* карточки, разделители */ --border-strong: rgba(255, 255, 255, 0.11); /* ховер, выделенные панели */ /* Границы полей и чекбоксов: #686868 даёт 3.05:1 к --surface-3 — порог WCAG 1.4.11 для границ, по которым опознаётся элемент управления. Не понижать. Запас маленький, поэтому элементы управления должны лежать на --surface-3 или темнее: на --surface-4 та же граница даёт 2.77:1 и порог уже не проходит. */ --border-input: #686868; /* ---------- Текст ---------- Прозрачности посчитаны по ХУДШЕМУ фону, на котором текст может оказаться, — это --surface-4 (#242428), а не фон страницы. Порог AA для основного текста 4.5:1; на surface-4 получается: 0.75 → 9.25:1 0.62 → 6.82:1 0.52 → 5.24:1 Ниже 0.52 не опускать: там начинается зона, где подписи к числам и копирайт в подвале роняют порог. */ --text: #ffffff; --text-2: rgba(255, 255, 255, 0.75); /* вторичный текст, описания */ --text-3: rgba(255, 255, 255, 0.62); /* слоганы, подписи полей */ --text-4: rgba(255, 255, 255, 0.52); /* мета, подписи осей, копирайт */ /* ---------- Акцент ---------- Жёлтый — дефицитный ресурс. Он помечает ровно три вещи: главное действие страницы, текущее состояние (активная вкладка, текущая страница) и купленное место в топе. Всё остальное — нейтральное. Как только жёлтым красится и адрес сервера, и каждая буллет-точка, и каждая стрелка, помечать им становится нечего. */ --accent: #f5d105; --accent-hover: #ffe45c; --accent-active: #e0bf00; --accent-contrast: #0B0B0C; /* текст на жёлтом */ --accent-soft: rgba(245, 209, 5, 0.10); /* подложка чипа */ --accent-line: rgba(245, 209, 5, 0.28); /* граница на жёлтом фоне */ /* ---------- Цвета VIP-бейджей ---------- Зеркало BADGE_TYPES из app/utils/constants.py — источник истины там. Единственное место в CSS, где цвета живут вне монохромной палитры: это платная услуга, и цвет здесь несёт смысл «куплено». Добавили бейдж в Python — добавьте строку сюда. */ --badge-fire: #ff6b35; --badge-lightning: #4d9fff; --badge-star: #f5d105; --badge-diamond: #22d3ee; --badge-crown: #fbbf24; --badge-heart: #f43f5e; --badge-meteor: #fb923c; --badge-trophy: #eab308; --badge-balloon: #c084fc; --badge-confetti: #34d399; /* ---------- Статусы ---------- */ --danger: #ff6b6b; --danger-hover: #ff8585; --danger-soft: rgba(255, 107, 107, 0.12); --danger-line: rgba(255, 107, 107, 0.30); --success: #34d399; /* Затемнение под модальным окном. */ --scrim: rgba(5, 5, 6, 0.72); /* ---------- Кегли ---------- Шесть ступеней. Между соседними видна разница, поэтому выбор ступени — это решение, а не вкусовщина. caption 12 подписи под значением, копирайт, счётчики small 13 интерфейсный текст: кнопки, чипы, мета body 15 основной текст lead 17 вводные абзацы, крупные значения, заголовок карточки title 20 заголовок раздела внутри страницы display 25 заголовок страницы второго уровня (формы, оплата) hero заголовок первого экрана (каталог, FAQ, справочник) 11.5px больше нет: это был единственный кегль, который на среднем мониторе приходилось выискивать. */ --fs-caption: 12px; --fs-small: 13px; --fs-body: 15px; --fs-lead: 17px; --fs-title: 20px; --fs-display: 25px; /* Заголовок страницы тянется сам — без брейкпоинта на каждый шаг. */ --fs-hero: clamp(27px, 1.45rem + 1.3vw, 34px); /* Номер ошибки на 404/500 — единственный кегль такого размера. */ --fs-mega: clamp(56px, 3.5rem + 5vw, 88px); /* ---------- Начертания ---------- Основной текст — 400. Раньше по всему сайту стояло 500: страница выходила равномерно плотной, и выделить в ней что-либо начертанием было уже нечем. 500 осталось за интерфейсными подписями, 600 — за заголовками и кнопками, 700 — за числами и главным действием. */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---------- Межстрочные ---------- */ --lh-tight: 1.15; --lh-snug: 1.45; --lh-base: 1.65; /* ---------- Трекинг ---------- */ --ls-tight: -0.022em; --ls-snug: -0.012em; --ls-wide: 0.08em; /* ---------- Отступы (шаг 4px) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; /* ---------- Ритм страницы ---------- Расстояние между смысловыми блоками задаётся этими двумя, а не произвольным --sp-* в каждом файле. Из-за произвольного выбора разделы на карточке сервера отбивались на 40px, на странице оплаты на 32px, а в профиле на 56px — при переходе блоки «прыгали». */ --stack: var(--sp-7); /* между блоками внутри раздела */ --stack-lg: var(--sp-8); /* между разделами страницы */ /* ---------- Внутренние отступы карточек ---------- Две ступени на весь сайт. Было пять (16 / 20 / 24+32 / 32 / 40), и одинаковые с виду панели набирали разную высоту. */ --pad-card: var(--sp-6); /* обычная карточка, панель, модалка */ --pad-card-sm: var(--sp-4); /* плотная карточка: плитка, услуга, день */ /* ---------- Радиусы ---------- xs — микроэлементы (свотч, иконка), sm — то, что лежит ВНУТРИ контрола (пункт меню, сегмент), md — сами контролы, lg — карточки и всплывающие панели. --r-xl удалён: ни одного применения. */ --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px; /* ---------- Элементы управления ---------- 44px — комфортная цель нажатия; минимум по WCAG 2.5.8 (24px) перекрыт с запасом. Ступеней четыре, и промежуточных значений (35, 36, 38, 54) в компонентах быть не должно. xs 32 иконочная кнопка внутри строки sm 36 сегмент, пагинация, кнопка в шапке md 44 кнопка и поле по умолчанию lg 52 главное действие страницы */ --control-h-xs: 32px; --control-h-sm: 36px; --control-h: 44px; --control-h-lg: 52px; /* ---------- Квадратные элементы ---------- Одна шкала на всё квадратное: иконки, свотчи, ручка ползунка, ранг, миниатюра, крупный статус. Было девять размеров — 14, 15, 16, 18, 19, 20, 22, 24, 28, — и разница между 18 и 19 не значила ничего, кроме того, что файлы писались в разное время. Нижние три ступени называются --icon-* по историческим причинам и применяются ко всему квадратному этого размера, а не только к иконкам: заводить --box-xs: 16px синонимом к --icon-sm значило бы держать два имени на одно значение — ровно то, что эта шкала убирает. sm 16 внутри кнопки, чипа, поля; свотч цвета md 20 самостоятельная иконка, ручка ползунка, статус промокода lg 24 крупная: пустое состояние, бейдж box-md 28 ранг в каталоге, номер вопроса, кружок вокруг иконки box-lg 36 миниатюра загруженного файла box-xl 48 крупная иконка статуса: успех, пустое состояние 34px больше нет: это было единственное значение во всей системе, не кратное четырём. */ --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --box-md: 28px; --box-lg: 36px; --box-xl: 48px; /* Тонкий скроллбар внутри всплывающих панелей. */ --scrollbar-w: 6px; /* Баннер сервера — 468×60, стандартный IAB Full Banner. В HTML атрибутов width/height нет намеренно (adblock матчит именно их), поэтому размер живёт только тут, в одном месте на оба применения. */ --banner-w: 468px; --banner-h: 60px; /* Бокс чекбокса. Не иконка: рисуется рамкой, а не глифом, и в шкалу иконок не попадает. Одно значение на согласия и виджет тегов. */ --control-box: 18px; /* ---------- Тени ---------- Мягкие и почти бесцветные: на тёмном фоне тень работает как увеличение расстояния до плоскости, а не как чёрная обводка. */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.28); --shadow-3: 0 16px 44px rgba(0, 0, 0, 0.45); /* ---------- Обводка фокуса ---------- Одна на весь сайт. Раньше offset был то 2px, то 3px, то -2px — при переходе по табу рамка меняла размер от элемента к элементу. */ --focus-w: 2px; --focus-offset: 2px; /* ---------- Раскладка ---------- */ --container: 1170px; --container-pad: 16px; /* ---------- Ширина содержимого ---------- Четыре ступени на весь сайт. До этого ширину задавали литералом в каждом файле, и набралось семь значений — 460 / 560 / 640 / 680 / 720 / 860, — из которых 640 и 680 не отличались ничем, кроме того, что писались в разное время. Та же болезнь, от которой завели --stack и --pad-card. form узкая страница-форма: вход, регистрация, пароль, буст narrow оплата, правила, cookie-баннер page форма владельца, выбор услуги read сплошной текст: FAQ, справочник */ --w-form: 460px; --w-narrow: 640px; --w-page: 720px; --w-read: 860px; /* ---------- Мера строки ---------- Длина строки сплошного текста. Две ступени: вспомогательный текст короче основного. Было четыре (44 / 52 / 60 / 72ch), причём три из них — литералами мимо токена. */ --measure-sm: 52ch; /* подсказка, описание ошибки, слоган */ --measure: 72ch; /* основной текст */ /* ---------- Движение ---------- */ --dur-fast: 0.12s; --dur: 0.18s; --dur-slow: 0.26s; --ease: cubic-bezier(0.2, 0, 0.2, 1); } @media (max-width: 1200px) { :root { --container-pad: var(--sp-6); } } @media (max-width: 768px) { :root { --container-pad: var(--sp-5); --stack: var(--sp-6); --stack-lg: var(--sp-7); --pad-card: var(--sp-5); } } @media (max-width: 480px) { :root { --container-pad: var(--sp-4); --pad-card: var(--sp-4); --pad-card-sm: var(--sp-3); } }