/* ============================================================================ СтальПро — ДИЗАЙН-ТОКЕНЫ, направление по умолчанию: V4-CANON ---------------------------------------------------------------------------- Единственный файл, который меняется при смене дизайн-направления. Шаблоны (uslugi-template.html и остальные 6) не содержат ни одного захардкоженного цвета/шрифта/радиуса/тени — только var() из этого словаря. Источник значений: design/directions/v4-canon/a-canon.html (цвета, сетка, радиусы, тени, motion) + канон брендбука (style-guide апрель-2026, BRAND-PASSPORT v2): шрифты Unbounded 600/700 + Montserrat 400/600, акцент #FFD600, тёмный графитово-синий #1A2026, радиусы 0–4px. Контракт словаря (обязан реализовать каждый файл направления): - страница: --bg, --bg-grid, --surface, --surface-alt - текст: --ink, --body, --muted, --faint - линии: --line, --line-strong - акцент: --accent, --accent-hover, --on-accent - инверсная (тёмная) секция: --inverse-bg, --inverse-ink, --inverse-body, --inverse-muted, --inverse-line - служебные: --header-bg, --logo-plate, --scrim, --scrim-ink - формы: --field-bg, --field-border, --field-ink, --field-placeholder, --focus-ring, --ok, --err - шрифты: --font-display, --font-body, --font-mono (+ веса) - шкала: --fs-*, --lh-*, размеры контейнера и секций - форма/тень/motion: --radius*, --border-w, --shadow-*, --ease, --dur-* ========================================================================== */ /* Шрифты направления грузит сам файл токенов — своп = один . */ @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@600;700&family=Montserrat:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root{ /* ---------- ПОВЕРХНОСТИ СТРАНИЦЫ ---------- */ --bg: oklch(98% 0.004 90); /* фон страницы (тёплый белый) */ --bg-grid: oklch(89% 0.007 250); /* линии чертёжной сетки на фоне; transparent = сетки нет */ --surface: oklch(100% 0 0); /* карточки, панели */ --surface-alt: oklch(96% 0.005 250); /* чередующиеся панели, чипы */ /* ---------- ТЕКСТ ---------- Контраст WCAG 2.2 AA пересчитан кодом (OKLCH→sRGB→WCAG) после QA-ревью MAJ-2, 10.07.2026; формат: на surface / surface-alt / bg: --body 38%: 10.00 / 8.90 / 9.44 --muted 50%: 5.99 / 5.33 / 5.65 (было 58% → 4.27/3.81 — провал AA) --faint 53%: 5.27 / 4.69 / 4.98 (было 78% → 2.00/1.78 — провал AA) */ --ink: #1A2026; /* заголовки, сильный текст (канон) */ --body: oklch(38% 0.014 250); /* основной текст */ --muted: oklch(50% 0.018 250); /* вторичный текст, подписи */ --faint: oklch(53% 0.014 250); /* индексы, тех-метки (светлее muted, но ≥4.5 всюду) */ /* ---------- ЛИНИИ ---------- */ --line: oklch(89% 0.007 250); --line-strong: oklch(80% 0.01 250); /* ---------- АКЦЕНТ (канон 09.07.2026: жёлтый = заливка/линия, НЕ текст) ---------- */ --accent: #FFD600; --accent-hover: #EFC900; --on-accent: #1A2026; /* текст на жёлтой заливке — всегда тёмный */ /* ---------- ИНВЕРСНАЯ СЕКЦИЯ (тёмные полосы: производство, CTA) ---------- */ --inverse-bg: #1A2026; --inverse-ink: oklch(97% 0.005 90); /* заголовки на тёмном */ --inverse-body: rgb(255 255 255 / 85%); /* текст на тёмном */ --inverse-muted: rgb(255 255 255 / 55%); /* подписи на тёмном */ --inverse-line: rgb(255 255 255 / 18%); /* рамки на тёмном */ /* ---------- СЛУЖЕБНЫЕ ---------- */ --header-bg: oklch(98% 0.004 90 / 92%); /* липкая шапка (полупрозрачная + blur) */ --logo-plate: transparent; /* плашка под чёрный логотип; на тёмной теме — светлая */ --scrim: rgb(26 32 38 / 82%); /* подложка HUD-меток на фото */ --scrim-ink: oklch(96% 0.01 90); /* текст на скриме */ /* ---------- ФОРМЫ И СОСТОЯНИЯ ---------- */ --field-bg: oklch(100% 0 0); --field-border: oklch(80% 0.01 250); --field-ink: #1A2026; --field-placeholder: oklch(53% 0.016 250); /* AA: 5.27/4.69/4.98 (было 66% → 3.11) */ --focus-ring: #FFD600; /* фокус = жёлтая обводка (UI-кит) */ --ok: oklch(52% 0.12 150); /* success форм; AA: 5.21/4.64/4.92 */ --err: oklch(52% 0.16 28); /* валидация форм (красный НЕ UI-акцент); AA: 5.97/5.32/5.64 */ /* ---------- ШРИФТЫ (канон брендбука) ---------- */ --font-display: 'Unbounded', 'Arial', sans-serif; --font-body: 'Montserrat', 'Arial', sans-serif; --font-mono: 'JetBrains Mono', 'Consolas', monospace; /* тех-метки, цифры-спеки */ --w-display: 700; /* заголовки h1/h2 */ --w-display-sub: 600; /* h3, кнопки, цифры */ --w-body: 400; --w-body-strong: 600; /* ---------- ТИПОШКАЛА (модульная, «цифры крупнее слов») ---------- */ --fs-h1: clamp(1.8rem, 1.3rem + 2.1vw, 2.9rem); --fs-h2: clamp(1.3rem, 1.1rem + 1vw, 1.9rem); --fs-h3: 1.02rem; --fs-body: 1rem; --fs-lede: 1.08rem; --fs-small: .9rem; --fs-tiny: .72rem; /* mono-метки, индексы */ --fs-num: clamp(1.5rem, 1.15rem + 1.3vw, 2.1rem); /* крупные цифры-факты */ --lh-body: 1.6; --lh-heading: 1.12; --ls-caps: .08em; /* разрядка капс-меток */ /* ---------- СЕТКА И ОТСТУПЫ (8-point) ---------- */ --container: 1180px; --pad-inline: clamp(1.25rem, 4vw, 2.5rem); --section-pad: clamp(3rem, 6vw, 5.5rem); --sp-1: .25rem; /* 4px */ --sp-2: .5rem; /* 8px */ --sp-3: .75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-6: 1.5rem; /* 24px */ --sp-8: 2rem; /* 32px */ --sp-12: 3rem; /* 48px */ --sp-16: 4rem; /* 64px */ --gap-card: 1px; /* сетки-таблицы v4: карточки через 1px линию */ /* ---------- ФОРМА ---------- */ --radius: 3px; /* канон: 0–4px максимум */ --radius-sm: 2px; --border-w: 1px; /* ---------- ТЕНИ ---------- */ --shadow-1: 0 6px 18px -8px rgb(26 32 38 / 35%); /* hover кнопок/карточек */ --shadow-pop: 0 4px 14px -6px oklch(0% 0 0 / 45%); /* всплывающие миниатюры */ /* ---------- MOTION (UI < 300ms, никогда ease-in) ---------- */ --ease: cubic-bezier(.16,.8,.34,1); --dur-1: 180ms; /* кнопки, ссылки */ --dur-2: 260ms; /* раскрытия, меню */ }