/* ============================================================================= apexvow — design tokens Згенеровано з docs/design-tokens.json (v1.3.0, 2026-09-08). Правити ОБИДВА файли. ЄДИНЕ місце, де живуть сирі значення. Усе інше посилається сюди через var(). Метафора: вимірювальний прилад. База — чорна панель, акцент — бурштин показника. ЩОБ ЗМІНИТИ АКЦЕНТ: правиться тільки блок ACCENT нижче (7 hex + 1 rgb-трійка). Усі сяйва, тіні й заливка рейки беруть rgb з --_accent-rgb. ============================================================================= */ :root { /* ========================================================================== ACCENT — бурштин. Показник і сигнальна лампа. Міняється тут і більше ніде. ========================================================================== */ --_accent-300: #ffd27a; --_accent-400: #ffc24a; --_accent-500: #ffb31a; --_accent-600: #d68f0a; --_accent-700: #9a6406; --_accent-800: #5a3a06; --_accent-ink: #8a5a00; /* амбер як текст на світлому циферблаті, 4.6:1 */ --_accent-rgb: 255, 179, 26; /* та сама 500 у rgb — для rgba() у сяйвах і тінях */ /* ---- приватні шкали. Не використовувати напряму в компонентах. ---------- */ /* Panel — чорна анодована панель приладу, майже нейтральна, ледь холодна */ --_panel-950: #0a0b0d; --_panel-900: #0f1113; --_panel-850: #15181b; --_panel-800: #1c2024; --_panel-700: #272c31; --_panel-600: #353c43; --_panel-500: #4a535c; /* Dial — білий циферблат для світлих секцій */ --_dial-50: #fbfbf9; --_dial-100: #f1f0ec; --_dial-200: #e9e7e1; --_dial-300: #d9d6ce; --_grey-400: #7f8791; --_grey-300: #b3b9c0; --_grey-200: #d3d8dd; --_ink-900: #0f1113; --_ink-700: #3d444c; --_ink-500: #5f6771; --_white: #ffffff; /* ---- семантичні кольори ------------------------------------------------- */ --surface-page: var(--_panel-950); --surface-sunken: var(--_panel-900); /* вікно показника */ --surface-raised: var(--_panel-850); /* накладка на панелі */ --surface-raised-hover: var(--_panel-800); --surface-hairline: var(--_panel-700); --surface-hairline-strong: var(--_panel-600); --surface-invert: var(--_dial-100); --surface-invert-raised: var(--_dial-50); --surface-invert-sunken: var(--_dial-200); --surface-invert-hairline: var(--_dial-300); --text-primary: #f2f1ed; --text-secondary: var(--_grey-300); --text-muted: var(--_grey-400); --text-invert-primary: var(--_ink-900); --text-invert-secondary: var(--_ink-700); --text-invert-muted: var(--_ink-500); --accent: var(--_accent-500); /* лампа увімкнена */ --accent-hover: var(--_accent-400); /* лампа яскравіше */ --accent-quiet: var(--_accent-700); /* лампа наполовину */ --accent-unlit: var(--_accent-800); /* лампа є, не світиться */ --accent-ink: var(--_accent-ink); /* амбер як текст на світлому */ --accent-on: var(--_panel-950); /* текст поверх бурштину */ --focus-ring: var(--_accent-400); /* ---- сяйво і затемнення -------------------------------------------------- Рішення 2026-09-08: заборона синіх/фіолетових градієнтів і градієнта як тла hero СТОЇТЬ. Бурштин дозволено лише як м'який радіальний ореол — ніколи як плоска заливка кнопки, ніколи як суцільне тло hero. Scrim — це затемнення. */ /* token-exempt: радіальний ореол лампи зверху секції (M06, бібліотека) */ --glow-accent: radial-gradient(60% 55% at 50% 0%, rgba(var(--_accent-rgb), 0.16) 0%, rgba(var(--_accent-rgb), 0) 70%); /* token-exempt: те саме знизу секції, слабше */ --glow-accent-soft: radial-gradient(70% 90% at 50% 100%, rgba(var(--_accent-rgb), 0.10) 0%, rgba(var(--_accent-rgb), 0) 70%); /* token-exempt: ореол однієї лампи — покажчик рейки, індикатор рядка */ --glow-lamp: radial-gradient(closest-side, rgba(var(--_accent-rgb), 0.55) 0%, rgba(var(--_accent-rgb), 0) 100%); /* token-exempt: затемнення знизу медіа під підпис */ --scrim-bottom: linear-gradient(to top, rgba(10, 11, 13, 0.85) 0%, rgba(10, 11, 13, 0) 60%); /* token-exempt: затемнення під рейкою, коли вона проходить над медіа */ --scrim-rail: linear-gradient(to right, rgba(10, 11, 13, 0.90) 0%, rgba(10, 11, 13, 0) 100%); /* token-exempt: блік скла поверх вікна показника (тільки на --surface-sunken) */ --specular: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 40%); /* ---- матеріал ------------------------------------------------------------ */ --grain-opacity: 0.045; /* зерно на панелі */ --grain-opacity-invert: 0.03; /* зерно на циферблаті */ --grain-size: 140px; --edge-light: rgba(255, 255, 255, 0.06); /* блік верхньої кромки картки */ --edge-light-strong: rgba(255, 255, 255, 0.10); /* ---- типографіка: дві родини -------------------------------------------- Geist — інтерфейс і заголовки. Geist Mono — усі числа, індекси, підписи шкали. Замінено 2026-09-08: Archivo + Martian Mono читалися надто важко у великих кеглях. Прилад точний, а не масивний. */ --font-sans: "Geist", "Geist Fallback", "Helvetica Neue", Arial, system-ui, sans-serif; --font-display: "Geist", "Geist Fallback", "Helvetica Neue", Arial, system-ui, sans-serif; /* = sans; третього шрифту нема */ --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, "Cascadia Mono", Consolas, monospace; --font-readout: "Geist Mono", "Geist Mono Fallback", ui-monospace, "Cascadia Mono", Consolas, monospace; /* h1 hero у ТРИ рядки на ≥ 64rem (рішення 2026-09-08, art-direction §5): 109.4px @1440 → 6.84:1 до body; 128px від 1685px; 38px на 390 (≤ 4 рядки). Найдовший рядок «You bring the business» = 22 знаки × 0.48em; при 7.6vw він займає 1151px із 1243px доступних на 1440 (рейка 100.8 + поля 96; запас 92px). */ --fs-display: clamp(2.375rem, 7.6vw, 8rem); --fs-h1: clamp(2.75rem, 7vw, 6.5rem); /* h1 внутрішніх: 100.8px @1440 → 6.3:1 */ --fs-h2: clamp(2rem, 4.2vw, 3.75rem); --fs-h3: clamp(1.375rem, 2vw, 1.875rem); --fs-h4: clamp(1.125rem, 1.4vw, 1.3125rem); --fs-lead: clamp(1.0625rem, 1.35vw, 1.3125rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-micro: 0.75rem; --fs-readout-label: 0.75rem; /* номери на рейці; 11 → 12px після рев'ю, не більше — рейка не другий заголовок */ --fs-metric: clamp(3rem, 6.5vw, 6.25rem); /* великі показники */ --fs-readout: clamp(1.75rem, 3vw, 2.75rem); /* показник у картці, ціна */ --fs-index: clamp(2.5rem, 4vw, 4rem); /* порядкові номери 01…14 */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-readout: 500; /* Geist і Geist Mono не мають осі ширини. Токени лишаються заради контракту імен і завжди 100% — жодне правило не має покладатися на стиснення. */ --stretch-display: 100%; --stretch-body: 100%; --stretch-readout: 100%; --stretch-label: 100%; --lh-display: 0.92; --lh-tight: 1.02; --lh-heading: 1.12; --lh-body: 1.55; --lh-loose: 1.7; --lh-readout: 1; --tracking-display: -0.028em; --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.06em; --tracking-caps: 0.12em; --tracking-numeric: 0em; /* моно-числа не розріджувати */ --measure: 66ch; --measure-narrow: 44ch; /* ---- простір ------------------------------------------------------------ */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.25rem; --space-xl: 3.5rem; --space-2xl: 5rem; --space-3xl: 7.5rem; --space-4xl: 11rem; /* ---- розкладка і щільність ---------------------------------------------- */ --section-pad: clamp(4rem, 8vw, 8rem); --section-pad-tight: clamp(2.5rem, 5vw, 4.5rem); /* смуги: метрики, відгуки */ --wrap-max: 80rem; --wrap-pad: clamp(1.25rem, 4vw, 3rem); --gutter: clamp(1rem, 1.8vw, 2rem); --columns: 12; --card-pad: clamp(1.25rem, 2vw, 2rem); --card-pad-tight: 1rem; --row-pad: 1.5rem; --pill-height: 1.75rem; --pill-pad: 0.25rem 0.625rem; --bento-row: 11rem; --header-height: 4.5rem; /* ---- шкала-рейка (сміливий хід) ----------------------------------------- Вертикальна на ≥ --bp-lg на лівому полі; горизонтальна смуга під шапкою нижче. Вага переглянута 2026-09-08 після рев'ю (art-direction §2): рейка читалася як лінійка на полі. Вага додається КОНСТРУКЦІЄЮ (шасі-колонка з кромкою, доріжка 2px, поділки 20px, покажчик 3px), а не кеглем — номери 12px, щоб не змагатися з h1. */ --rail-gutter: clamp(1.25rem, 2.2vw, 2.5rem); /* від краю вікна до доріжки */ --rail-reserve: clamp(5.5rem, 7vw, 7.5rem); /* колонка рейки (шасі): padding-inline-start у body на ≥ lg; 100.8px @1440 */ --rail-top: 6rem; --rail-bottom: 3rem; --rail-chassis-bg: var(--_panel-900); /* заглиблений канал шасі на всю висоту вікна, лишається темним і над світлими секціями */ --rail-chassis-edge: 1px solid var(--surface-hairline-strong); /* права кромка шасі — межа між приладом і циферблатом */ --rail-track-width: 2px; --rail-track: var(--surface-hairline-strong); --rail-fill: rgba(var(--_accent-rgb), 0.65); /* заливка від верху до покажчика */ --rail-tick-width: 1px; /* малі поділки */ --rail-tick-major-width: 2px; /* великі поділки — тієї самої товщини, що й доріжка */ --rail-tick-minor: 0.5rem; /* 4 малі між великими */ --rail-tick-major: 1.25rem; /* 14 великих = 14 секцій */ --rail-tick: var(--_panel-600); --rail-tick-active: var(--accent); --rail-pointer-length: 1.5rem; --rail-pointer-thickness: 3px; --rail-pointer-dot: 0.5rem; --rail-label-offset: 0.75rem; --rail-mobile-height: 0.5rem; /* горизонтальна смуга під шапкою */ --rail-mobile-pointer: 0.75rem; --rail-tick-flare: 1.25; /* scaleX активної великої поділки: 1 → 1.25 у бік контенту (motion-spec §3.2) */ --rail-num-shift: 3px; /* translateX номера при перельоті на поділці, туди й назад (motion-spec §3.2) */ --rail-overshoot: 4px; /* переліт покажчика над поділкою 01 наприкінці lamp test (motion-spec §3.4) */ --rail-tap-min: 2.75rem; /* 44px — мінімальна зона тапу мобільної смуги, прозорий ::before (motion-spec §3.6) */ --tap-min: 1.5rem; /* 24px — нижня межа WCAG 2.2 AA (2.5.8) для будь-якої дотикової цілі; 44px лишається бажаним, 24px обов'язковим */ /* ---- hero ---------------------------------------------------------------- */ --hero-figure-inline: min(100%, 45rem); /* ширина ілюстрації в одноколонковому режимі (< 64rem): уся ширина, але не більше за нативні 720px SVG */ /* ---- hero gauge: живий прилад (спец. 005) --------------------------------- Шкала малюнка: 13 поділок з кроком 10° від −60° до +60°, вісь (360, 400) у viewBox. Три вікна формули = три позиції на великих поділках. JS читає ці токени один раз і пише єдину runtime-властивість --gauge-angle; CSS обертає стрілку і клин-маску. Дрейф і дихання — виняток із motion-spec §9: лише поки вказівник у межах #hero. */ --gauge-angle-min: -60deg; /* лівий упор шкали, крайня велика поділка */ --gauge-angle-max: 60deg; /* правий упор */ --gauge-steps: 12; /* інтервалів між 13 поділками; крок 10° = максимум показника NN / 12 */ --gauge-pos-1: -30deg; /* Business Problem — показник 03; стан спокою і без JS */ --gauge-pos-2: 0deg; /* Technical Solution — показник 06 */ --gauge-pos-3: 30deg; /* Reliable Product — показник 09 */ --gauge-drift: 0.6deg; /* амплітуда дрейфу спокою: 6 % кроку поділки, ≈ 2.2px на вістрі @1440; показання змінити не може */ --gauge-idle-period-min: 2400ms; /* нижня межа випадкової тривалості одного коліна дрейфу/дихання */ --gauge-idle-period-max: 5200ms; /* верхня межа; випадкове значення на кожне коліно — ритм ніколи не читається як цикл */ --gauge-breath: 0.08; /* дихання лампи в одиницях opacity: lit ± 0.08, ніколи не сягає high */ --gauge-lamp-dim: 0.3; /* лампа, коли прилад вимкнено (вихід секції з в'юпорта) */ --gauge-lamp-lit: 0.75; /* лампа в спокої, прилад показує; lit + breath = 0.83 < high */ --gauge-lamp-high: 1; /* «на крок яскравіше» — наведення або фокус на вікні формули */ --gauge-glow-blur: 12px; /* розмиття ореолу лампи в одиницях viewBox; = середній шар --shadow-lamp */ --gauge-glow-opacity: 0.55; /* = внутрішній стоп --glow-lamp, скаляром для fill: var(--accent) */ /* ---- вікно показника ---------------------------------------------------- */ --readout-window-bg: var(--_panel-900); --readout-window-pad: 0.375rem 0.625rem; --readout-window-border: 1px solid var(--_panel-600); /* зарезервована висота вікна показника в смузі метрик: число + 2 рядки підпису + пілюля + 3 проміжки + вертикальний padding вікна. Тримає CLS = 0, поки metrics.css відкладений і поки реальні підписи заблоковані. ≈ 201px @1440, ≈ 155px @390. */ --metric-window-min: calc( var(--fs-metric) * var(--lh-readout) + 2 * var(--fs-small) * var(--lh-body) + var(--pill-height) + 3 * var(--space-2xs) + 0.75rem ); /* защіпка показника: на фінальному кроці лічильника число робить scale 1 → 1.03 → 1 (motion-spec §4). Це закон «стрілка перелітає раз», тому тривалість — --dur-needle, крива — --ease-snap; окремого токена тривалості немає навмисно. */ --metric-latch-scale: 1.03; /* ---- іконічна мова: сітка 24, штрих 1.5, торець прямий, кути 0/45/90 ---- */ --icon-grid: 24; --icon-stroke: 1.5px; --icon-size-sm: 1.25rem; --icon-size-md: 2rem; --icon-size-lg: 3rem; --icon-size-xl: 4rem; /* ---- радіуси: п'ять різних, кожен зі своєю роллю -------------------------- */ --radius-none: 0; --radius-readout: 0.25rem; /* вікна показників, поля форми, пілюлі стека */ --radius-card: 0.75rem; /* картки блогу, відгуки, тарифи */ --radius-block: 1.5rem; /* медіа-блоки кейсів, тіло секції-смуги */ --radius-chip: 999px; /* пілюлі, кнопки-таблетки, фокус */ --radius-instrument: 2.5rem 0.375rem 0.375rem 0.375rem; /* F1 re-hosted: великий кут зверху-ліворуч, у бік рейки */ /* ---- рамки -------------------------------------------------------------- */ --border-width-hair: 1px; --border-width-rule: 2px; --border-hairline: 1px solid var(--surface-hairline); --border-hairline-strong: 1px solid var(--surface-hairline-strong); --border-invert-hairline: 1px solid var(--surface-invert-hairline); --border-accent: 1px solid var(--accent); --border-accent-rule: 2px solid var(--accent); /* ліва рамка активного FAQ, активної смуги */ /* ---- тіні: багатошарові, світло зверху; кольорове світло — тільки лампа --- */ --shadow-card: inset 0 1px 0 var(--edge-light), 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.30); --shadow-lift: inset 0 1px 0 var(--edge-light-strong), 0 2px 4px rgba(0, 0, 0, 0.32), 0 18px 44px rgba(0, 0, 0, 0.38), 0 40px 80px rgba(0, 0, 0, 0.22); --shadow-invert-card: 0 1px 2px rgba(15, 17, 19, 0.06), 0 10px 28px rgba(15, 17, 19, 0.08); --shadow-inset-panel: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 -1px 0 rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.35); --shadow-lamp: 0 0 0 1px rgba(var(--_accent-rgb), 0.35), 0 0 12px rgba(var(--_accent-rgb), 0.45), 0 0 32px rgba(var(--_accent-rgb), 0.20); --shadow-lamp-soft: 0 0 8px rgba(var(--_accent-rgb), 0.25), 0 0 24px rgba(var(--_accent-rgb), 0.12); --shadow-accent-ring: 0 0 0 1px var(--accent-quiet); --shadow-none: none; /* ---- рух: чотири криві, кожна зі своїм призначенням ---------------------- ЄДИНЕ джерело істини для CSS і JS. src/js/motion.js читає ці значення через getComputedStyle(:root) і реєструє їх як CustomEase (спец. 001); жодного рядка GSAP на кшталт 'expo.out' і жодного числа в JS. Рішення 2026-09-08. */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* settle — значення встановлюється */ --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1); /* needle — один переліт і повернення */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* switch — перехід між станами */ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* exit — зникнення, швидше за появу */ --ease-settle: var(--ease-out); /* псевдонім, та сама крива */ --ease-needle: var(--ease-snap); /* псевдонім, та сама крива */ --dur-fast: 160ms; --dur-base: 360ms; --dur-slow: 640ms; --dur-scrub: 1000ms; --dur-settle: 900ms; /* лічильник добігає до значення */ --dur-needle: 320ms; /* переліт покажчика на поділці */ --dur-sweep: 1400ms; /* lamp test при завантаженні */ --scrub-lag: 600ms; /* згладжування ScrollTrigger scrub (0.6 с) */ --stagger-tight: 30ms; --stagger-base: 50ms; --stagger-loose: 80ms; /* ---- шари --------------------------------------------------------------- */ --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-rail: 150; --z-header: 200; --z-drawer: 300; --z-modal: 400; /* ---- контрольні точки (для довідки; media queries пишуться числами) ------ */ --bp-sm: 30rem; --bp-md: 48rem; --bp-lg: 64rem; --bp-xl: 90rem; }