/* ============================================================ Дизайн-токены SUPPORT — светлая база. ------------------------------------------------------------ Единственный источник. Раньше файл жил копией в `support-cases` и инлайном в `globals.css` у `support-research`; копий больше нет. Что сюда попадает: значения, общие для всех приложений агентства. Что не попадает: раскладка конкретного приложения (ширины контейнеров, высоты карточек) и оформление клиента — оно всегда контент, а не токен. Тёмная тема — отдельным файлом `dark.css`: она нужна ридеру и не нужна витрине материалов, где подмена фона исказила бы фирменный цвет клиента. ============================================================ */ :root { /* Базовая палитра SUPPORT — 10.09.2026. */ --color-black: #000000; --color-orange: #ff5900; --color-orange-light: #ff9500; --color-yellow: #ffce00; --color-green: #84d880; --color-gray: #f5f4f1; --color-white: #ffffff; --brand-accent: var(--color-yellow); --surface-subtle: var(--color-gray); --text-muted: color-mix(in srgb, var(--text-primary) 60%, var(--bg-primary)); /* --- Поверхности и текст --- */ --background: var(--color-white); --foreground: var(--color-black); --bg-primary: var(--color-white); --bg-secondary: var(--color-gray); --text-primary: var(--color-black); --text-secondary: color-mix(in srgb, var(--color-black) 60%, var(--color-white)); --text-doc: color-mix(in srgb, var(--color-black) 85%, var(--color-white)); --icon-primary: var(--text-primary); --icon-secondary: color-mix(in srgb, var(--color-black) 20%, var(--color-white)); --text-placeholder: color-mix(in srgb, var(--color-black) 45%, transparent); --border: color-mix(in srgb, var(--color-black) 12%, var(--color-white)); --bg-glass: color-mix(in srgb, var(--color-white) 60%, transparent); /* Подложка морфинг-панели оглавления. Не прозрачная: под панелью едет текст, и на полупрозрачном фоне пункты оглавления читались вперемешку с ним. */ --bg-float: var(--color-gray); /* --- Скругления --- */ --radius-s: 4px; --radius-m: 8px; --radius-l: 12px; --radius-xl: 20px; /* --- Движение --- */ --transition-fast: 0.1s; --transition-normal: 0.2s; --transition-slow: 0.4s; --ease-morph: cubic-bezier(0.4, 0, 0.2, 1); --ease-expressive: cubic-bezier(0.16, 1, 0.3, 1); --animate-fade-in: fade-in 0.2s ease-out both; /* --- Раскладка --- */ --sidebar-width: 320px; /* --- Плавная шкала: размер зависит от ширины экрана --- Границы clamp() — прежние значения десктопа и мобильного, между ними размер идёт линейно, поэтому медиазапросы на размеры не нужны: breakpoint остаётся только там, где меняется раскладка (число колонок, показ боковой колонки). Средний член шрифтов — `rem + vw`, а не чистый `vw`: на голом `vw` текст перестаёт слушаться зума и системного размера шрифта. Отступы и высоты в `vw` можно — они не текст. Имена: у сайта агентства размеры лежат в `--text-*`, но здесь это имя занято цветами (`--text-primary`), поэтому шкала названа `--font-size-*`. Открытый вопрос ADR-0021. */ --font-size-hero: clamp(52px, 2.35rem + 4.75vw, 120px); --font-size-display: clamp(32px, 1.47rem + 2.25vw, 56px); --font-size-h1: clamp(22px, 1.16rem + 0.94vw, 32px); --font-size-h2: clamp(18px, 0.99rem + 0.56vw, 24px); --font-size-h3: clamp(16px, 0.91rem + 0.38vw, 20px); --font-size-body: clamp(15px, 0.89rem + 0.19vw, 17px); --font-size-small: clamp(12px, 0.71rem + 0.19vw, 14px); /* Служебные подписи в узких контролах: растут почти незаметно, иначе текст перестаёт влезать в кнопку фиксированной высоты. */ --font-size-xs: clamp(11px, 0.66rem + 0.09vw, 12px); /* Фирменный шрифт — Onest (решение владельца 10.08.2026, до этого Manrope). Сам файл шрифта пакет не отдаёт: его подключает приложение через `next/font`, иначе пришлось бы тащить в пакет шрифтовые файлы и повторять оптимизацию, которую Next уже делает. Договор такой: приложение объявляет `--font-brand`, всё остальное берётся отсюда. Имя переменной по роли, а не по шрифту (было `--font-golos_text`): смена гарнитуры не должна означать правку `globals.css` в каждом приложении. */ --font-family-base: var(--font-brand), ui-sans-serif, system-ui, sans-serif; /* --- Семантическая типографика --- Роль хранит полный шрифтовой стиль, но не цвет и не отступы: они зависят от темы и композиции приложения. Размеры опираются на совместимую шкалу `--font-size-*`; потребитель может переопределить роль целиком для своего носителя, сохранив общий API. */ --type-display-family: var(--font-family-base); --type-display-size: var(--font-size-display); --type-display-leading: 0.9; --type-display-weight: 800; --type-display-tracking: -0.04em; --type-title-family: var(--font-family-base); --type-title-size: var(--font-size-h1); --type-title-leading: 1; --type-title-weight: 800; --type-title-tracking: -0.03em; --type-heading-family: var(--font-family-base); --type-heading-size: var(--font-size-h2); --type-heading-leading: 1.1; --type-heading-weight: 800; --type-heading-tracking: -0.02em; --type-lead-family: var(--font-family-base); --type-lead-size: var(--font-size-h3); --type-lead-leading: 1.4; --type-lead-weight: 500; --type-lead-tracking: 0; --type-body-family: var(--font-family-base); --type-body-size: var(--font-size-body); --type-body-leading: 1.4; --type-body-weight: 400; --type-body-tracking: 0; --type-ui-family: var(--font-family-base); --type-ui-size: var(--font-size-small); --type-ui-leading: 1.25; --type-ui-weight: 700; --type-ui-tracking: 0; --type-caption-family: var(--font-family-base); --type-caption-size: var(--font-size-xs); --type-caption-leading: 1.3; --type-caption-weight: 500; --type-caption-tracking: 0; --space-page-x: clamp(20px, 2.8vw, 40px); --space-page-y: clamp(40px, 6vw, 88px); --space-section: clamp(40px, 4vw, 56px); --space-gap: clamp(12px, 1.2vw, 16px); } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0s; --transition-normal: 0s; --transition-slow: 0s; } }