/* =================================================================== Токены дизайн-системы. Единственное место, где заводятся значения. До этого файла цвета жили литералами: 44 уникальных hex на 5842 строки CSS, из них 152 в одном account-management.css. Смена акцентного цвета означала ручной обход всех файлов, и один-два места всегда терялись. Правило: в остальных css-файлах не должно быть ни одного литерального цвета, размера шрифта, радиуса или отступа — только var() отсюда. БРЕЙКПОИНТЫ (кастомные свойства в @media не работают, поэтому это соглашение, а не переменные — других значений в проекте быть не должно): xl 1200px контейнер перестаёт быть максимальной ширины lg 1024px планшет-альбом: боковые колонки схлопываются md 768px планшет-портрет: раскладка в одну колонку sm 480px телефон: плотная упаковка Раньше их было 33 (1157, 1163, 1131, 1230, 945, 467, 364…) — следы «тяну окно, пока не сломается». Там, где брейкпоинт компенсировал жёсткую сетку, теперь intrinsic-раскладка (auto-fit/minmax, clamp), а не ещё одно значение. =================================================================== */ :root { /* ---------- Шрифт ---------- */ --font-sans: 'Montserrat', 'Segoe UI', Arial, sans-serif; /* ---------- Поверхности ---------- Слоистая тёмная схема: чем ближе элемент к пользователю, тем светлее. */ --bg: #0B0B0C; /* фон страницы */ --surface-1: #0E0E10; /* шапка, подвал — на полтона от фона */ --surface-2: #141416; /* карточки, панели */ --surface-3: #1B1B1D; /* вторичные кнопки, поля ввода */ --surface-4: #232326; /* ховер вторичных кнопок */ --surface-sunken: #0F0F11; /* утопленные чипы внутри карточки */ /* ---------- Границы ---------- */ --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.12); /* Границы полей и чекбоксов: #686868 даёт 3.09:1 к --surface-3 — порог WCAG 1.4.11 для границ, по которым опознаётся элемент управления. Прежние #404042 давали 1.66:1. Не понижать. Запас маленький, поэтому элементы управления должны лежать на --surface-3: на более светлом --surface-4 та же граница даёт 2.81:1 и порог уже не проходит. */ --border-input: #686868; /* ---------- Текст ---------- Прозрачности посчитаны по ХУДШЕМУ фону, на котором текст может оказаться, — это --surface-4 (#232326), а не фон страницы. Порог AA для основного текста 4.5:1; на surface-4 получается: 0.75 → 8.0:1 0.62 → 6.9:1 0.50 → 4.9:1 Ниже 0.50 не опускать: 0.42 давало 4.1:1 и роняло подписи характеристик в карточке и копирайт в подвале. */ --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.50); /* мета, подписи осей, копирайт */ /* ---------- Акцент ---------- */ --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, где цвета живут вне монохромной палитры: это платная услуга, и цвет здесь несёт смысл «куплено». До этого они были литералами в global.css и account-management.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); /* Затемнение под модальным окном. */ --scrim: rgba(0, 0, 0, 0.75); --success: #34d399; --success-soft: rgba(52, 211, 153, 0.12); /* ---------- Кегли ---------- */ --fs-caption: 11.5px; --fs-small: 13px; --fs-body: 15px; --fs-body-lg: 16px; --fs-title-sm: 18px; --fs-title: 19px; --fs-title-lg: 24px; --fs-display: 30px; /* Заголовок страницы тянется сам — без брейкпоинта на каждый шаг. */ --fs-hero: clamp(26px, 1.4rem + 1.6vw, 36px); /* Номер ошибки на 404/500 — единственный кегль такого размера. */ --fs-mega: clamp(64px, 4rem + 6vw, 96px); /* ---------- Начертания ---------- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---------- Межстрочные ---------- */ --lh-tight: 1.15; --lh-snug: 1.45; --lh-base: 1.6; /* ---------- Трекинг ---------- */ --ls-tight: -0.025em; --ls-snug: -0.015em; --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-10: 80px; /* ---------- Радиусы ---------- */ --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; /* ---------- Элементы управления ---------- 44px — комфортная цель нажатия; минимум по WCAG 2.5.8 (24px) перекрыт с запасом. */ --control-h-sm: 38px; --control-h: 44px; --control-h-lg: 52px; /* ---------- Тени ---------- */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.50); /* ---------- Раскладка ---------- */ --container: 1170px; --container-pad: 15px; /* Комфортная длина строки для сплошного текста (описание сервера, FAQ, юридические страницы). Раньше в этих местах стояло calc((100% - 44px) * 0.75) — доля от ширины, а не от кегля, поэтому на широком мониторе строка всё равно уезжала за 120 знаков. */ --measure: 74ch; /* ---------- Движение ---------- */ --dur-fast: 0.15s; --dur: 0.2s; --dur-slow: 0.3s; --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); } } @media (max-width: 480px) { :root { --container-pad: var(--sp-4); } }