/* ========================================================================== YAVKA AGENCY — design tokens Источник истины: doc/03-design-system.md ========================================================================== */ :root { /* --- Палитра --- */ --c-ink: #0C0C0D; --c-ink-2: #141416; --c-ink-3: #1C1C1F; --c-paper: #F2EEE6; --c-paper-2: #E8E3D9; --c-accent: #FF4D1C; --c-accent-hover: #FF6A40; /* Акцент для светлых поверхностей. Значение темнее указанного в 03-design-system.md: заявленные там 4,7:1 для #D63A0E на бумаге при пересчёте оказались 4,06:1 — ниже нормы AA. Этот оттенок держит 4,7:1 даже на самой тёмной из светлых поверхностей (поля ввода, #DED8CC). */ --c-accent-deep: #AD2B0A; --c-gray-1: #A3A19B; /* Третичный текст на тёмном. Значение светлее прежнего #6E6D68: тот давал 3,77:1 на основном фоне и 3,55:1 на карточках — ниже нормы AA, которую дизайн-система объявляет обязательной (принцип 5). */ --c-gray-2: #807E78; --c-gray-3: #5C5A55; --c-success: #3DDC84; --c-error: #FF5C5C; /* --- Семантика (тёмная тема по умолчанию) --- */ --bg: var(--c-ink); --bg-2: var(--c-ink-2); --bg-3: var(--c-ink-3); --fg: var(--c-paper); --fg-2: var(--c-gray-1); --fg-3: var(--c-gray-2); --line: rgba(242, 238, 230, .12); --line-strong: rgba(242, 238, 230, .28); --accent: var(--c-accent); --accent-hover: var(--c-accent-hover); --accent-fg: var(--c-ink); /* Поверхность, которая всегда контрастна основе: всплывающие подсказки, кружок со стрелкой на обложке, обводка плавающей кнопки. В тёмной теме она светлая, в светлой — тёмная. */ --surface-invert: var(--c-paper); --on-surface-invert: var(--c-ink); /* Фон закреплённой шапки при прокрутке: сквозь него просвечивает страница, поэтому здесь нужен цвет с прозрачностью, а не ссылка на --bg. */ --header-bg: rgba(12, 12, 13, .78); /* --- Типографика --- */ --ff-display: "Unbounded", "Arial Black", system-ui, sans-serif; --ff-text: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ff-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --fs-display: clamp(2.5rem, 1.2rem + 5vw, 5.75rem); --fs-h1: clamp(2.25rem, 1.2rem + 4vw, 4.5rem); --fs-h2: clamp(1.75rem, 1rem + 2.8vw, 3.5rem); --fs-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); --fs-h4: 1.125rem; --fs-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-meta: 0.75rem; --fs-stat: clamp(2.5rem, 1.5rem + 4vw, 5rem); /* --- Сетка --- */ --container: 1440px; --gutter: clamp(16px, 4vw, 64px); --gap: clamp(16px, 2vw, 24px); --header-h: 64px; /* --- Отступы (база 4px) --- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px; --section-y: clamp(64px, 10vw, 160px); --section-head-gap: clamp(32px, 5vw, 64px); /* --- Форма --- */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px; --shadow-card: 0 24px 48px -16px rgba(0, 0, 0, .5); --shadow-modal: 0 40px 80px -20px rgba(0, 0, 0, .6); /* --- Движение --- */ --ease-out: cubic-bezier(.2, .7, .2, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 600ms; --dur-reveal: 700ms; color-scheme: dark; } @media (min-width: 768px) { :root { --fs-body: 1.0625rem; --header-h: 72px; } } /* ========================================================================== Светлая тема Палитра не новая: это колонка `paper` из 03-design-system.md §2.2, где контраст уже проверен по WCAG. Меняется только то, какой набор значений считается основным. Основная тема сайта — тёмная, она объявлена выше в :root. Светлая включается только явным выбором посетителя: атрибут data-scheme="light" на , который ставит скрипт и запоминает браузер. Системную настройку (prefers-color-scheme) сознательно не учитываем: сайт должен встречать гостя таким, каким он задуман. ========================================================================== */ :root[data-scheme="light"] { --bg: var(--c-paper); --bg-2: var(--c-paper-2); --bg-3: #DED8CC; --fg: var(--c-ink); --fg-2: #4A4843; --fg-3: #615E57; --line: rgba(12, 12, 13, .12); --line-strong: rgba(12, 12, 13, .28); --accent: var(--c-accent-deep); --accent-hover: var(--c-accent); --accent-fg: var(--c-paper); --surface-invert: var(--c-ink); --on-surface-invert: var(--c-paper); --header-bg: rgba(242, 238, 230, .82); color-scheme: light; } :root[data-scheme="light"] [data-theme="paper"] { --bg: var(--c-ink); --bg-2: var(--c-ink-2); --bg-3: var(--c-ink-3); --fg: var(--c-paper); --fg-2: var(--c-gray-1); --fg-3: var(--c-gray-2); --line: rgba(242, 238, 230, .12); --line-strong: rgba(242, 238, 230, .28); --accent: var(--c-accent); --accent-hover: var(--c-accent-hover); --accent-fg: var(--c-ink); --surface-invert: var(--c-paper); --on-surface-invert: var(--c-ink); --header-bg: rgba(12, 12, 13, .78); color-scheme: dark; } /* --- Темы секций --- */ [data-theme="dark"] { --bg: var(--c-ink); --bg-2: var(--c-ink-2); --bg-3: var(--c-ink-3); --fg: var(--c-paper); --fg-2: var(--c-gray-1); --fg-3: var(--c-gray-2); --line: rgba(242, 238, 230, .12); --line-strong: rgba(242, 238, 230, .28); --accent: var(--c-accent); --accent-hover: var(--c-accent-hover); --accent-fg: var(--c-ink); --surface-invert: var(--c-paper); --on-surface-invert: var(--c-ink); color-scheme: dark; } [data-theme="paper"] { --bg: var(--c-paper); --bg-2: var(--c-paper-2); --bg-3: #DED8CC; --fg: var(--c-ink); --fg-2: #4A4843; --fg-3: #615E57; --line: rgba(12, 12, 13, .12); --line-strong: rgba(12, 12, 13, .28); --accent: var(--c-accent-deep); --accent-hover: var(--c-accent); --accent-fg: var(--c-paper); color-scheme: light; } [data-theme="accent"] { --bg: var(--c-accent); --bg-2: #FF6A40; --bg-3: #FF8562; --fg: var(--c-ink); --fg-2: rgba(12, 12, 13, .72); --fg-3: rgba(12, 12, 13, .55); --line: rgba(12, 12, 13, .2); --line-strong: rgba(12, 12, 13, .4); --accent: var(--c-ink); --accent-hover: #2A2A2E; --accent-fg: var(--c-paper); --surface-invert: var(--c-ink); --on-surface-invert: var(--c-paper); color-scheme: light; }