/* ============================================================================ TOKENS-V5 — словарь канона v5-zhivoy (Фаза 0 «канонизация», 12.07.2026) ============================================================================ Источник значений: design/directions/v5-zhivoy/glavnaya-final.html (№64, главный эталон) + h-final-2.html (№41, фаворит; --fs-h1 короткого H1). Контракт (по пилоту design/templates/): направление = ОДИН файл tokens*.css. Шрифты подключает САМ файл токенов. Партиалы и шаблоны серии НЕ содержат ни одного цветового литерала — только var(); все литералы живут здесь. Правка канона (цвет, фон, кегль, высота CTA, темп искр) = правка ЭТОГО файла. Группы: 1 поверхности светлые · 2 текст · 3 линии · 4 акцент · 5 тёмная тема (#0B1D24) · 6 канон-фоны (№65) · 7 градиенты/тени · 8 искры · 9 типошкала (целые кегли) · 10 layout · 11 motion. Решения владельца, зашитые в значения: — №65: светлые блоки — МЕЛКАЯ ДИАГОНАЛЬ 115° (миллиметровка «рябит»); тёмные блоки — крупная сетка 32px; жёлтая CTA — сплошная, без паттернов (№58). — №59-аудит: --faint 54% (4.72:1), --on-dark-faint 62% (4.78:1 на --dark), --ghost-border 55% (3.59:1) — контрасты НЕ занижать. — №61: высота CTA-полосы ~260px — задаётся ТОЛЬКО --cta-pad (паддинг контейнера; section-паддинг у полосы погашен в partials-v5.css). — №53: выделение слова — плашкой целиком (.mark), не подчёркиванием. — Анимации: UI < 300ms, scale от 0.95+, БЕЗ ease-in; ничего вертикально- бегущего (№51/№58); прорисовки — спокойный темп (--cycle 18s). ============================================================================ */ /* Шрифт-канон №35–36: Unbounded 800/900 (заголовки, uppercase) + Golos Text. В проде (Astro) — self-host woff2, @import уйдёт (README-TEMPLATES §перенос). */ @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@800;900&family=Golos+Text:wght@400;500;600;700&display=swap'); :root{ /* ---- 1. Поверхности светлые -------------------------------------------- */ --bg: oklch(97.6% 0.004 250); /* фон светлых секций (страница) */ --paper: #ffffff; /* белый: поля форм, панель меню */ --panel: oklch(98.6% 0.003 250); /* подложка фото-колодцев на светлом */ --plate: oklch(98% 0.004 250); /* «шлифованная пластина» (карточки) */ --plate-edge: oklch(88% 0.01 255); /* тёмный край пластины */ --plate-hi: oklch(99.5% 0.002 255); /* блик пластины */ --header-bg: oklch(97.6% 0.004 250 / 93%); /* шапка: --bg на 93% + blur */ /* ---- 2. Текст ----------------------------------------------------------- */ --ink: #1A2026; /* заголовки, сильный текст (канон 09.07) */ --ink-700: oklch(36% 0.014 255); /* наборный текст */ --muted: oklch(48% 0.014 255); /* вторичный текст */ --faint: oklch(54% 0.013 255); /* подписи; №59: 62% было 3.4:1 FAIL */ /* ---- 3. Линии ----------------------------------------------------------- */ --line: oklch(89% 0.008 255); /* тонкие разделители */ --line-strong: oklch(80% 0.011 255); /* рамки карточек/полей, laser-seam */ /* ---- 4. Акцент (бренд, НЕ менять без владельца) ------------------------- */ --accent: #FFD600; /* жёлтый = заливки/линии/CTA, не текст */ --accent-deep: oklch(80% 0.155 95); /* глубокий край искры/градиентов */ --gold-line: oklch(80% 0.08 95); /* золочёная рамка hover карточек */ /* ---- 5. Тёмная тема (синий тильды владельца) ---------------------------- */ --dark: #0B1D24; /* фон тёмных блоков (.blue-block) */ --dark-2: #132C37; /* резервный светлее-тёмный */ --dark-line: oklch(34% 0.035 230); /* линии/рамки на тёмном */ --dark-panel:oklch(17% 0.028 230); /* карточки на тёмном (draw-card, logi) */ --photo-well:oklch(18% 0.02 230); /* колодец фото в стальной рамке */ --on-dark: oklch(88% 0.01 230); /* наборный текст на тёмном */ --on-dark-dim: oklch(72% 0.015 230);/* вторичный на тёмном */ --on-dark-faint: oklch(62% 0.03 230); /* подписи на тёмном; №59: 4.78:1 */ --on-dark-strong: #fff; /* заголовки/белый текст на тёмном */ --ghost-border: oklch(55% 0.03 230); /* рамка btn-ghost-light; №59: 3.59:1 */ --dim-dark: oklch(48% 0.03 230); /* размерные линии чертежа на тёмном */ /* ---- 6. Канон-фоны (№65) ------------------------------------------------ */ /* светлые блоки: мелкая диагональ №33 (a-sparks-air 1-в-1: 115°, шаг 3/7px) */ --bg-diag: repeating-linear-gradient(115deg, oklch(100% 0 0 / .5) 0px, oklch(100% 0 0 / .5) 1px, transparent 1px, transparent 3px), repeating-linear-gradient(115deg, oklch(20% 0 0 / .024) 0px, oklch(20% 0 0 / .024) 1px, transparent 1px, transparent 7px); /* тёмные блоки: крупная сетка 32px («она нормально») */ --bg-grid-dark: linear-gradient(oklch(100% 0 0 / .045) 1px, transparent 1px), linear-gradient(90deg, oklch(100% 0 0 / .045) 1px, transparent 1px); --bg-grid-size: 32px 32px; /* жёлтая CTA-полоса: СПЛОШНАЯ заливка var(--accent), паттерн ЗАПРЕЩЁН (№58) */ /* ---- 7. Градиенты и тени (композитные) ---------------------------------- */ --plate-grad: linear-gradient(160deg, var(--plate-hi), var(--plate) 16%, var(--plate) 86%, var(--plate-edge) 100%); --figure-grad: linear-gradient(160deg, var(--plate-hi), var(--plate) 60%, var(--plate-edge)); --steel-grad: linear-gradient(155deg, oklch(30% 0.03 230), oklch(22% 0.03 230) 60%, oklch(16% 0.03 230)); --shadow-btn: 0 6px 16px -10px oklch(75% 0.16 95 / .9); --shadow-btn-hover: 0 12px 26px -10px oklch(75% 0.16 95 / .95); --shadow-dark-hover: 0 12px 26px -12px oklch(20% 0.02 255 / .55); --shadow-card: inset 0 1px 0 var(--plate-hi), 0 1px 2px oklch(20% 0.02 255 / .05); --shadow-card-hover: inset 0 1px 0 var(--plate-hi), 0 16px 30px -18px oklch(78% 0.14 95 / .55); --shadow-plate: 0 26px 50px -28px oklch(0% 0 0 / .75); /* lead-card на тёмном */ --shadow-frame: 0 26px 50px -28px oklch(0% 0 0 / .8); /* стальная рамка фото */ --shadow-figure: 0 22px 44px -30px oklch(20% 0.02 255 / .5); /* рамка на светлом */ --shadow-tag: 0 8px 20px -8px oklch(0% 0 0 / .7); /* frame-tag на фото */ /* ---- 8. Искры (ведущий мотив; только ГОРИЗОНТАЛЬНЫЕ + прорисовки) -------- */ --spark-grad: radial-gradient(circle, #fff 0%, var(--accent) 40%, var(--accent-deep) 78%, transparent 100%); --spark-shadow: 0 0 12px 3px oklch(88% 0.185 98 / .85), 0 0 3px 1px #fff; --spark-burst-grad: radial-gradient(circle, #fff 0%, var(--accent) 60%, transparent 100%); --spark-burst-glow: 0 0 6px 1px oklch(88% 0.185 98 / .9); --bullet-grad: radial-gradient(circle, #fff 0%, var(--accent) 55%, var(--accent-deep) 100%); --bullet-glow: 0 0 6px 1px oklch(88% 0.185 98 / .5); --focus-glow: oklch(88% 0.185 98 / .4); /* кольцо фокуса полей формы */ /* ---- 9. Типошкала (№59-аудит 3.5: ТОЛЬКО целые px через rem) ------------- */ --ff-display: 'Unbounded', sans-serif; --ff-text: 'Golos Text', 'Segoe UI', sans-serif; --fs-10: .625rem; /* бейджи */ --fs-11: .6875rem; /* теги, метки, крошки */ --fs-12: .75rem; /* eyebrow, футер-низ */ --fs-13: .8125rem; /* подписи, consent */ --fs-14: .875rem; /* примечания, btn-sm */ --fs-15: .9375rem; /* наборный в карточках */ --fs-16: 1rem; /* базовый body, h3 */ --fs-17: 1.0625rem; /* лиды */ --fs-18: 1.125rem; /* крупный h3 */ --fs-num: 1.625rem; /* цифры-герои 26px */ --fs-num-lg: clamp(1.5rem, 1.3rem + 1vw, 2.125rem); /* цифры карточек 24→34 */ --fs-h1: clamp(1.75rem, 1.2rem + 2.2vw, 2.875rem); /* H1 короткий 28→46 (фаворит, lh 1.13) */ --fs-h1-long: clamp(1.625rem, 1.15rem + 1.55vw, 2.375rem);/* H1 7+ слов 26→38 (№64, lh 1.16) */ --fs-h2: clamp(1.25rem, 1rem + 1.1vw, 1.875rem); /* H2 20→30 */ --fs-h2-cta: clamp(1.375rem, 1.05rem + 1.5vw, 2.125rem); /* H2 жёлтой CTA 22→34 */ --lh-body: 1.65; --lh-head: 1.16; /* ---- 10. Layout ---------------------------------------------------------- */ --radius: 2px; /* канон 0–4px, без скруглений */ --container: 1180px; --pad-inline: clamp(1.25rem, 4vw, 2.5rem); --section-pad: clamp(4rem, 8vw, 6.5rem); /* вертикаль секций */ --cta-pad: clamp(3.75rem, 6vw, 5.5rem); /* №61/№63: высота CTA ≈260px */ --header-h: 84px; --header-h-m: 68px; /* ряд шапки desktop / ≤600px */ --logo-h: 38px; --logo-h-m: 30px; /* №60: горизонтальный лого */ --logo-h-footer: 42px; --fab-size: 56px; /* WhatsApp-FAB (tap ≥48) */ /* ---- 11. Motion (UI <300ms; scale от 0.95+; ease-in ЗАПРЕЩЁН) ------------ */ --ease: cubic-bezier(.16,.8,.34,1); --dur-1: 200ms; /* hover-переходы UI */ --dur-2: 220ms; /* тени/подъём карточек */ --dur-3: 260ms; /* флаут меню, фото-скейл */ --dur-4: 280ms; /* разлёт hover-искр */ --dur-reveal: 380ms; /* появление при загрузке */ --cycle: 18s; /* цикл прорисовки чертежа (спокойный темп, не торопить) */ --seam-cycle: 11s; /* искра шва laser-seam */ --seam-cycle-slow: 13s;/* вариант .seam-slow */ }