/* * OpenSky Design — стартовые токены лендинга. * Копируй в проект как tokens.css и меняй значения под DESIGN.md, а не добавляй новые. * Каждое число объяснено в reference/spacing.md, typography.md, color.md, motion.md. * Проверочные точки clamp(): 375px и 1440px — значения в комментариях. */ :root { /* ── Отступы: шкала 4/8. Внутри компонента — шаг 4 (s-1…s-4), между компонентами и секциями — шаг 8 (s-4…s-48). */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px; --s-32: 128px; --s-40: 160px; --s-48: 192px; /* Вертикальный отступ секции (padding-block). Один из трёх на проект — фиксируется в DESIGN.md. */ --section: clamp(80px, 5.5vw + 52px, 128px); /* 375 → 80, 1440 → 128: лендинг по умолчанию */ --section-dense: clamp(64px, 3vw + 53px, 96px); /* 375 → 64, 1440 → 96: плотный, продукт, 150k */ --section-lux: clamp(96px, 9vw + 64px, 192px); /* 375 → 98, 1440 → 192: премиум, editorial */ /* Заголовок секции → её содержимое. */ --head-gap: clamp(32px, 1.6vw + 25px, 48px); /* 375 → 32, 1440 → 48 */ /* ── Сетка */ --container: 1200px; /* ширина контента; с полями ≈ 1312 */ --container-wide: 1440px; /* full-bleed медиа, широкие сетки */ --prose: 65ch; /* колонка текста */ --page-pad: clamp(20px, 4.13vw + 4.5px, 64px); /* поле страницы: 375 → 20, 768 → 36, 1440 → 64 */ --gutter: clamp(16px, 1.5vw + 10.5px, 32px); /* между колонками: 375 → 16, 1440 → 32 */ /* ── Типографика. Кегли текста фиксированы шагами, заголовки текут через clamp. */ --font-display: "Display", serif; /* заменить: шрифт с кириллицей из typography.md */ --font-text: "Text", system-ui, sans-serif; /* заменить */ --fs-xs: 13px; /* подписи; ниже 12px нельзя */ --fs-sm: 15px; /* вторичный текст */ --fs-body: clamp(16px, 0.2vw + 15.25px, 18px); /* 375 → 16, 1440 → 18 */ --fs-lead: clamp(18px, 0.4vw + 16.5px, 22px); /* 375 → 18, 1440 → 22 */ --fs-h3: clamp(20px, 0.75vw + 17.2px, 28px); /* 375 → 20, 1440 → 28 */ --fs-h2: clamp(30px, 2.2vw + 22px, 56px); /* 375 → 30, 1440 → 54 */ --fs-h1: clamp(36px, 4.5vw + 23px, 96px); /* 320 → 37, 375 → 40, 1440 → 88; H1/H2 = 1.63 */ --fs-display: clamp(3.5rem, 0.75rem + 12.2vw, 15rem); /* слово-обложка на всю ширину: 375 → 58, 1440 → 188; rem-слагаемое — растёт при зуме (WCAG 1.4.4) */ --fs-display-xl: clamp(3.5rem, 1rem + 23.9vw, 22.5rem); /* только «студия», слово ≤ 5 знаков: 375 → 106, 1440 → 360. Длиннее — формула typography.md §4.1, потолок этот */ --lh-body: 1.55; --lh-lead: 1.45; --lh-h3: 1.25; --lh-h2: 1.1; --lh-h1: 1.02; --lh-display: 0.92; /* капс/одно слово; закон 4: капс ≥ 0.85, с Й/Ё ≥ 1.0; строчные — не ниже 1.0 */ --ls-body: 0; --ls-h3: -0.01em; --ls-h2: -0.02em; --ls-h1: -0.025em; --ls-display: -0.03em; /* предел; антиква и узкие — вдвое меньше */ --ls-caps: 0.06em; /* только кнопки и шапки таблиц, не надзаголовки */ --measure: 65ch; /* ── Цвет: роли. OKLCH, значения — из DESIGN.md проекта. Здесь нейтральный старт. */ --bg: oklch(98.5% 0.004 90); --surface: oklch(100% 0 0); --surface-2: oklch(95.5% 0.006 90); --ink: oklch(22% 0.01 90); /* текст, не #000 */ --ink-muted: oklch(45% 0.01 90); /* ≥ 4.5:1 на --bg */ --line: oklch(88% 0.006 90); /* разделители, декор */ --line-strong: oklch(60% 0.01 90); /* рамки полей и контролов: ≥ 3:1 к фону */ --accent: oklch(55% 0.15 250); /* одно действие, ≤ 10% площади экрана */ --accent-hover: oklch(49% 0.15 250); /* L −6% */ --accent-2: oklch(48% 0.13 35); /* второй цвет бренда: акцент в заголовке (закон 5), иконки; ≥ 3:1 к --bg, к --tone не ставить без проверки */ --on-accent: oklch(99% 0 0); /* ≥ 4.5:1 на --accent */ --focus: oklch(55% 0.15 250); --success: oklch(55% 0.13 150); --danger: oklch(55% 0.19 27); --tone: oklch(45% 0.03 150); /* заливка секции тоном бренда (стратегия «Заливка»), ≤ 30% площади */ --on-tone: oklch(99% 0 0); /* текст на --tone: ≥ 4.5:1; не держит — текст --ink */ --on-tone-muted: oklch(88% 0.02 150); /* вторичный текст на --tone и тёмных секциях: ≥ 4.5:1 сплошным цветом, не прозрачностью */ /* Стекло на тёмной секции или кадре (стеклянные факты, плашки поверх фото): фон, рамка, размытие. Текст на стекле — --on-tone, контраст мерить по самому светлому месту кадра под плашкой. */ --glass-bg: color-mix(in oklch, var(--ink) 55%, transparent); --glass-edge: color-mix(in oklch, var(--on-tone) 22%, transparent); /* имена как у styles/liquid-glass.md: там значения для светлого стекла */ --glass-blur: 16px; /* backdrop-filter: blur(var(--glass-blur)); на телефоне дорого — не больше 2 плашек на экран */ --header-bg: color-mix(in oklch, var(--bg) 85%, transparent); /* стеклянная шапка: components.md §8; токен, чтобы color-off-token её знал */ /* ── Форма. Выбрать одну систему в DESIGN.md: «острая» 0–4px или «мягкая» 20–32px. 8–16px на всём — признак шаблона. */ --r-sm: 4px; --r-md: 4px; --r-lg: 4px; --r-pill: 999px; /* ── Тени — отдельным блоком ниже (:root, [data-shadow]), reference/depth.md. */ /* ── Движение (Emil Kowalski, MIT). Значения не придумывать. */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --t-press: 140ms; --t-fast: 180ms; --t-base: 240ms; --t-slow: 320ms; --t-reveal: 480ms; --t-reveal-long: 900ms; /* строки крупного заголовка и большие кадры, 500k и «студия»; потолок 1 с */ --reveal-shift: 16px; /* сдвиг появления; 0 при reduced-motion */ /* ── Интерактив */ --card-pad: clamp(20px, 0.56vw + 18px, 24px); /* 375 → 20, 1440 → 24 */ --nav-h: clamp(64px, 0.75vw + 61px, 72px); /* 375 → 64, 1440 → 72; не выше 80 */ --hit: 44px; /* минимальная зона нажатия на телефоне */ --control-h: 48px; /* кнопка = поле ввода */ --focus-ring: 2px solid var(--focus); --focus-offset: 2px; /* ── Слои */ --z-sticky: 200; --z-nav: 300; --z-modal: 400; --z-toast: 500; } /* ── Тени: reference/depth.md. Один свет сверху (x = 0), слои удваиваются, spread = −½ blur. offset/blur — физика тени, к шкале отступов не относятся. Уровень закреплён за ролью, ховер = +1 уровень. Отдельный блок, потому что var() в токене считается там, где токен объявлен: секция с другим фоном ставит data-shadow и своё --shadow-color — и все уровни пересчитываются в её тоне. */ :root, [data-shadow] { --shadow-color: 38% 0.02 90; /* L C H без oklch(): тон фона (hue как у --bg), L ≈ фон − 50…60, C ≤ 0.04. Цветная секция — своё значение */ --edge-hi: inset 0 1px 0 oklch(100% 0 0 / 0.7); /* блик кромки сверху; на чистом #fff не виден — поверхность ≤ 99% L */ --elev-1: /* покой: карточка, поле — кромка + контакт */ 0 0 0 1px oklch(var(--shadow-color) / 0.06), 0 1px 2px oklch(var(--shadow-color) / 0.08); --elev-2: /* приподнято: кнопка, выделенная карточка */ 0 0 0 1px oklch(var(--shadow-color) / 0.05), 0 1px 1px oklch(var(--shadow-color) / 0.06), 0 2px 4px -1px oklch(var(--shadow-color) / 0.07), 0 4px 8px -2px oklch(var(--shadow-color) / 0.07); --elev-3: /* ховер карточки, липкая шапка, дропдаун */ 0 0 0 1px oklch(var(--shadow-color) / 0.05), 0 1px 1px oklch(var(--shadow-color) / 0.06), 0 2px 2px -1px oklch(var(--shadow-color) / 0.06), 0 4px 8px -2px oklch(var(--shadow-color) / 0.07), 0 8px 16px -4px oklch(var(--shadow-color) / 0.08); --elev-4: /* поповер, меню, плашка над фото, рамка медиа */ 0 0 0 1px oklch(var(--shadow-color) / 0.05), 0 1px 2px oklch(var(--shadow-color) / 0.07), 0 4px 8px -2px oklch(var(--shadow-color) / 0.07), 0 8px 16px -4px oklch(var(--shadow-color) / 0.08), 0 16px 32px -8px oklch(var(--shadow-color) / 0.10); --elev-5: /* модалка, герой-карточка «в воздухе», фото в светлой секции */ 0 0 0 1px oklch(var(--shadow-color) / 0.05), 0 1px 2px oklch(var(--shadow-color) / 0.08), 0 8px 16px -4px oklch(var(--shadow-color) / 0.08), 0 24px 48px -12px oklch(var(--shadow-color) / 0.14), 0 48px 96px -24px oklch(var(--shadow-color) / 0.10); --inset-field: inset 0 1px 2px oklch(var(--shadow-color) / 0.12); /* поле ввода — вдавлено */ --inset-press: inset 0 2px 4px oklch(var(--shadow-color) / 0.18); /* нажатие; в покое — inset 0 0 0 transparent */ --drop-object: /* вырезка PNG: filter, не box-shadow; контакт + воздух */ drop-shadow(0 4px 6px oklch(var(--shadow-color) / 0.20)) drop-shadow(0 18px 28px oklch(var(--shadow-color) / 0.18)); /* Старые имена — алиасы, стили и блоки ссылаются на них. */ --shadow-1: var(--elev-2); /* меню, кнопка поверх кадра, карточка с тенью */ --shadow-2: var(--elev-4); /* одна крупная: продукт, рамка медиа, «документ», всплывающее окно */ --shadow-lux: var(--elev-5); /* фото в светлых секциях (hero-higgsfield.md §5) */ } /* Тёмная тема — только по просьбе (color.md §8). Высоту даёт светлота поверхности (+3–4% L на уровень), тень — опора: верхний блик + волос + тёмное кольцо, чёрный с альфой в 3–5 раз выше светлой темы. */ [data-theme="dark"] { --edge-hi: inset 0 1px 0 oklch(100% 0 0 / 0.06); --elev-d1: /* карточка на поверхности +1 */ inset 0 1px 0 oklch(100% 0 0 / 0.06), inset 0 0 0 1px oklch(100% 0 0 / 0.04), 0 0 0 1px oklch(0% 0 0 / 0.20), 0 1px 2px oklch(0% 0 0 / 0.30); --elev-d2: /* меню, поповер на поверхности +2 */ inset 0 1px 0 oklch(100% 0 0 / 0.08), inset 0 0 0 1px oklch(100% 0 0 / 0.04), 0 0 0 1px oklch(0% 0 0 / 0.24), 0 2px 4px oklch(0% 0 0 / 0.35), 0 8px 16px -4px oklch(0% 0 0 / 0.40); --elev-d3: /* модалка на поверхности +3 */ inset 0 1px 0 oklch(100% 0 0 / 0.10), inset 0 0 0 1px oklch(100% 0 0 / 0.05), 0 0 0 1px oklch(0% 0 0 / 0.30), 0 4px 8px oklch(0% 0 0 / 0.40), 0 24px 48px -12px oklch(0% 0 0 / 0.55); --shadow-1: var(--elev-d1); --shadow-2: var(--elev-d2); --shadow-lux: var(--elev-d3); } /* Базовые правила, которые нужны любому проекту. */ html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--nav-h) + var(--s-4)); } body { overflow-x: clip; background: var(--bg); color: var(--ink); font: var(--fs-body)/var(--lh-body) var(--font-text); } h1, h2, h3 { text-wrap: balance; overflow-wrap: anywhere; min-width: 0; hyphens: manual; } p, li { text-wrap: pretty; } img, video { max-width: 100%; height: auto; display: block; } :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); } .num { font-variant-numeric: tabular-nums; } /* цифры в колонках — без моноширинных шрифтов */ @media (prefers-reduced-motion: reduce) { /* «Меньше, не ноль»: сдвиги и масштаб убираем, смену прозрачности и цвета оставляем короткой. Компоненты берут сдвиг из --reveal-shift, а декоративные петли помечают data-motion="decor". */ :root { --reveal-shift: 0px; --t-reveal: 200ms; --t-reveal-long: 200ms; --t-slow: 200ms; } html { scroll-behavior: auto; } [data-motion="decor"] { animation: none !important; } }