/* =================================================================== Токены дизайн-системы. Единственное место, где заводятся значения. Правило: в остальных css-файлах не должно быть ни одного литерального цвета, размера шрифта, радиуса, отступа или высоты контрола — только var() отсюда. ШКАЛЫ СОБРАНЫ ТАК, ЧТОБЫ СОСЕДНИЕ СТУПЕНИ БЫЛО ВИДНО. Если разницу между двумя значениями не различить, выбор между ними ничего не выражает — и в разных файлах он делается по-разному. БРЕЙКПОИНТЫ (кастомные свойства в @media не работают, поэтому это соглашение, а не переменные — других значений в проекте быть не должно): xl 1200px контейнер перестаёт быть максимальной ширины lg 1024px планшет-альбом: боковые колонки схлопываются md 768px планшет-портрет: раскладка в одну колонку sm 480px телефон: плотная упаковка =================================================================== */ :root { /* ---------- Шрифт ---------- */ --font-sans: 'Montserrat', 'Segoe UI', Arial, sans-serif; /* ---------- Поверхности ---------- Слоистая тёмная схема с холодным подтоном: чем ближе элемент к пользователю, тем светлее. Подтон синий на два-три пункта — чистый серый на больших площадях выглядит дешёвым «графитом», а уход в синеву читается как стекло и металл. Шаг между слоями маленький намеренно: граница между панелью и фоном должна читаться как смена плоскости, а не как ещё одна рамка. */ --bg: #08080B; /* фон страницы */ --bg-deep: #050507; /* самый низ: подложка hero, затемнения */ --surface-1: #0D0D11; /* шапка, подвал — на полтона от фона */ --surface-2: #131318; /* карточки, панели */ --surface-3: #1A1A20; /* вторичные кнопки, поля ввода */ --surface-4: #23232B; /* ховер вторичных кнопок */ --surface-sunken: #0A0A0D; /* утопленные плашки внутри карточки */ /* Стекло: липкая шапка и всплывающие панели поверх контента. Пара «фон + размытие» — фон непрозрачен настолько, чтобы текст читался и там, где backdrop-filter не поддержан. */ --glass: rgba(13, 13, 17, 0.82); --glass-strong: rgba(10, 10, 13, 0.94); --blur: 16px; /* ---------- Границы ---------- Три ступени вместо «рамка везде одинаковая». Карточка обходится самой слабой: её и так отделяет смена поверхности, а вторая линия поверх этого даёт эффект миллиметровки. */ --border: rgba(255, 255, 255, 0.07); /* карточки, разделители */ --border-strong: rgba(255, 255, 255, 0.12); /* ховер, выделенные панели */ /* Границы полей и чекбоксов: #6C6C74 даёт 3.06:1 к --surface-3 — порог WCAG 1.4.11 для границ, по которым опознаётся элемент управления. Не понижать. Запас маленький, поэтому элементы управления должны лежать на --surface-3 или темнее: на --surface-4 та же граница даёт 2.8:1 и порог уже не проходит. */ --border-input: #6C6C74; /* Верхний блик. Одна строка градиента, которая отличает «плоский прямоугольник» от «объекта со своей плоскостью»: свет падает сверху, и верхняя кромка карточки чуть светлее нижней. Накладывается поверх фона, поэтому годится и кнопке, и панели. */ --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0) 42%); --sheen-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 55%); /* ---------- Текст ---------- Прозрачности посчитаны по ХУДШЕМУ фону, на котором текст может оказаться, — это --surface-4 (#23232B), а не фон страницы. Порог AA для основного текста 4.5:1; на surface-4 получается: 0.75 → 9.3:1 0.62 → 6.9:1 0.52 → 5.3: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: #ffe14a; --accent-active: #dcbb00; --accent-contrast: #0A0A06; /* текст на жёлтом */ --accent-soft: rgba(245, 209, 5, 0.10); /* подложка чипа */ --accent-softer: rgba(245, 209, 5, 0.05); --accent-line: rgba(245, 209, 5, 0.28); /* граница на жёлтом фоне */ --accent-text: #ffd93d; /* акцентный текст на тёмном */ /* Заливка главного действия. Не плоский жёлтый: лёгкий вертикальный уход в тёплую сторону даёт кнопке объём, из-за которого её видно раньше остального, — ровно то, чего ждут от главного действия. */ --accent-fill: linear-gradient(180deg, #ffdf3d 0%, #f5d105 52%, #e4c200 100%); --accent-fill-hover: linear-gradient(180deg, #ffe86b 0%, #ffd91f 52%, #f0cc00 100%); /* Свечение под жёлтым. На чёрном фоне тень невидима, и кнопка выглядит наклейкой; свечение цветом самой кнопки — то, что её приподнимает. */ --accent-glow: 0 6px 24px -6px rgba(245, 209, 5, 0.45); --accent-glow-lg: 0 10px 40px -8px rgba(245, 209, 5, 0.55); /* ---------- Цвета 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; --success-soft: rgba(52, 211, 153, 0.12); --success-line: rgba(52, 211, 153, 0.30); /* Затемнение под модальным окном. */ --scrim: rgba(4, 4, 6, 0.78); /* ---------- Медали топ-3 ---------- Первые три места в рейтинге. Не украшение: место в топе — это то, за чем на мониторинг и приходят, и различать первую тройку глазом нужно раньше, чем читать цифру. */ --medal-1: #f5d105; --medal-2: #cfd4dc; --medal-3: #d08a4e; /* ---------- Кегли ---------- Шесть ступеней. Между соседними видна разница, поэтому выбор ступени — это решение, а не вкусовщина. caption 12 подписи под значением, копирайт, счётчики small 13 интерфейсный текст: кнопки, чипы, мета body 15 основной текст lead 17 вводные абзацы, крупные значения, заголовок карточки title 21 заголовок раздела внутри страницы display 28 заголовок страницы второго уровня (формы, оплата) hero заголовок первого экрана (каталог, FAQ, справочник) 11.5px больше нет: это был единственный кегль, который на среднем мониторе приходилось выискивать. */ --fs-caption: 12px; --fs-small: 13px; --fs-body: 15px; --fs-lead: 17px; --fs-title: 21px; --fs-display: 28px; /* Заголовок страницы тянется сам — без брейкпоинта на каждый шаг. */ --fs-hero: clamp(30px, 1.6rem + 2.1vw, 46px); /* Крупное число: онлайн в hero, значение в плитке статистики. */ --fs-stat: clamp(22px, 1.2rem + 1vw, 30px); /* Номер ошибки на 404/500 — единственный кегль такого размера. */ --fs-mega: clamp(56px, 3.5rem + 5vw, 96px); /* ---------- Начертания ---------- Основной текст — 400. Раньше по всему сайту стояло 500: страница выходила равномерно плотной, и выделить в ней что-либо начертанием было уже нечем. 500 осталось за интерфейсными подписями, 600 — за заголовками и кнопками, 700 — за числами и главным действием, а также за заголовком первого экрана. Ступени 800 в шкале НЕТ, и заводить её нельзя: подмножества Montserrat в static/fonts объявлены только для 400/500/600/700, и запрос 800 браузер отдаёт семисотым — ширина строки совпадает до сотой пикселя. Токен обещал бы вес, которого в шрифте нет. */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---------- Межстрочные ---------- */ --lh-tight: 1.08; --lh-snug: 1.45; --lh-base: 1.65; /* ---------- Трекинг ---------- */ --ls-tight: -0.028em; --ls-snug: -0.014em; --ls-wide: 0.10em; /* ---------- Отступы (шаг 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-10: 72px; --sp-11: 96px; /* ---------- Ритм страницы ---------- Расстояние между смысловыми блоками задаётся этими двумя, а не произвольным --sp-* в каждом файле. Из-за произвольного выбора разделы на карточке сервера отбивались на 40px, на странице оплаты на 32px, а в профиле на 56px — при переходе блоки «прыгали». */ --stack: var(--sp-7); /* между блоками внутри раздела */ --stack-lg: var(--sp-9); /* между разделами страницы */ /* ---------- Внутренние отступы карточек ---------- Три ступени на весь сайт. Было пять (16 / 20 / 24+32 / 32 / 40), и одинаковые с виду панели набирали разную высоту. */ --pad-card: var(--sp-6); /* обычная карточка, панель, модалка */ --pad-card-sm: var(--sp-4); /* плотная карточка: плитка, услуга, день */ --pad-card-lg: var(--sp-7); /* крупная панель: hero, сводка оплаты */ /* ---------- Радиусы ---------- xs — микроэлементы (свотч, иконка), sm — то, что лежит ВНУТРИ контрола (пункт меню, сегмент), md — сами контролы, lg — карточки и всплывающие панели, xl — крупные панели и hero. Шкала сдвинута вверх относительно прежней (6/8/10/14): при тех радиусах на 46-пиксельной кнопке скругление занимало пятую часть высоты и читалось как «прямоугольник со сколотыми углами». */ --r-xs: 8px; --r-sm: 10px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px; /* ---------- Элементы управления ---------- 46px — комфортная цель нажатия; минимум по WCAG 2.5.8 (24px) перекрыт с запасом. Ступеней четыре, и промежуточных значений (35, 36, 42, 50) в компонентах быть не должно. xs 32 иконочная кнопка внутри строки sm 38 сегмент, пагинация, кнопка в шапке md 46 кнопка и поле по умолчанию lg 54 главное действие страницы */ --control-h-xs: 32px; --control-h-sm: 38px; --control-h: 46px; --control-h-lg: 54px; /* ---------- Квадратные элементы ---------- Одна шкала на всё квадратное: иконки, свотчи, ручка ползунка, ранг, миниатюра, крупный статус. Нижние три ступени называются --icon-* по историческим причинам и применяются ко всему квадратному этого размера, а не только к иконкам: заводить --box-xs: 16px синонимом к --icon-sm значило бы держать два имени на одно значение — ровно то, что эта шкала убирает. sm 16 внутри кнопки, чипа, поля; свотч цвета md 20 самостоятельная иконка, ручка ползунка, статус промокода lg 24 крупная: пустое состояние, бейдж box-md 28 номер вопроса, кружок вокруг иконки box-lg 36 миниатюра загруженного файла, ранг в каталоге box-xl 48 крупная иконка статуса: успех, пустое состояние box-2xl 64 знак бренда, аватар в профиле */ --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --box-md: 28px; --box-lg: 36px; --box-xl: 48px; --box-2xl: 64px; /* Тонкий скроллбар внутри всплывающих панелей. */ --scrollbar-w: 6px; /* Баннер сервера — 468×60, стандартный IAB Full Banner. В HTML атрибутов width/height нет намеренно (adblock матчит именно их), поэтому размер живёт только тут, в одном месте на оба применения. */ --banner-w: 468px; --banner-h: 60px; /* Бокс чекбокса. Не иконка: рисуется рамкой, а не глифом, и в шкалу иконок не попадает. Одно значение на согласия и виджет тегов. */ --control-box: 20px; /* Высота липкой шапки. Нужна не только ей: по ней считаются scroll-margin у якорей и top у липкой панели фильтров, и разъехаться этим трём значениям нельзя. */ --header-h: 68px; --header-h-sm: 60px; /* ---------- Тени ---------- Мягкие и почти бесцветные: на тёмном фоне тень работает как увеличение расстояния до плоскости, а не как чёрная обводка. */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.32); --shadow-3: 0 20px 56px rgba(0, 0, 0, 0.5); --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.22), 0 12px 32px -12px rgba(0, 0, 0, 0.6); /* ---------- Обводка фокуса ---------- Одна на весь сайт. Раньше offset был то 2px, то 3px, то -2px — при переходе по табу рамка меняла размер от элемента к элементу. */ --focus-w: 2px; --focus-offset: 3px; /* ---------- Раскладка ---------- */ --container: 1200px; --container-pad: 20px; /* ---------- Ширина содержимого ---------- Четыре ступени на весь сайт. До этого ширину задавали литералом в каждом файле, и набралось семь значений — 460 / 560 / 640 / 680 / 720 / 860, — из которых 640 и 680 не отличались ничем, кроме того, что писались в разное время. form узкая страница-форма: вход, регистрация, пароль, буст narrow оплата, правила, cookie-баннер page форма владельца, выбор услуги read сплошной текст: FAQ, справочник */ --w-form: 480px; --w-narrow: 640px; --w-page: 760px; --w-read: 880px; /* ---------- Мера строки ---------- Длина строки сплошного текста. Две ступени: вспомогательный текст короче основного. Ширину сплошного текста задавать мерой, а не пикселями: копирайт в подвале был ограничен 640px, что на кегле 12 давало 92 знака в строке — вдвое больше комфортного. */ --measure-sm: 52ch; /* подсказка, описание ошибки, слоган */ --measure: 72ch; /* основной текст */ /* ---------- Движение ---------- Две кривые. --ease для всего, что меняет цвет и прозрачность: быстрый старт, мягкая остановка. --ease-out для того, что едет в пространстве (панель, меню, модалка): длинный хвост торможения читается как вес, а не как рывок. */ --dur-fast: 0.12s; --dur: 0.2s; --dur-slow: 0.32s; --ease: cubic-bezier(0.2, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ---------- Фоновая графика ---------- Сетка и мягкое пятно света за первым экраном. Ровно два приёма на весь сайт: техническая сетка задаёт «gaming-tech», пятно уводит взгляд к заголовку. Обои с картинками не заводить — они удорожают страницу и стареют быстрее интерфейса. */ --grid-line: rgba(255, 255, 255, 0.028); --grid-step: 56px; --glow-hero: radial-gradient(62% 85% at 50% -12%, rgba(245, 209, 5, 0.14) 0%, rgba(245, 209, 5, 0) 62%); } @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-8); --pad-card: var(--sp-5); --pad-card-lg: var(--sp-6); --header-h: var(--header-h-sm); } } @media (max-width: 480px) { :root { --container-pad: var(--sp-4); --pad-card: var(--sp-4); --pad-card-sm: var(--sp-3); --pad-card-lg: var(--sp-5); } }