/* ============================================================================ СтальKing — Design System «ГАРТ» v1.0 (з нуля, 2026-07-02) ---------------------------------------------------------------------------- Концепція: «воронована сталь + розжарений метал». Не корпоративний синій і не копія референсів: глибокий синьо-чорний сталевий нейтрал (як воронована сталь) + гарячий помаранч (як метал на порізі) + холодні світлі «папери». Фірмовий градієнт «нагрів» (жовтий→помаранч→багряний) живе ТІЛЬКИ в тонких стрічках/лініях — ніколи як заливка великих площин. Уроки з аналізу indurent.com (2026-07-02), свідомо адаптовані: · task-first подача, гострі кути, один гротеск середньої ваги, дисциплінований гарячий акцент, бренд-стрічки як рамка сторінки; · ВИПРАВЛЕНО їхню ваду: білий текст на помаранчі (3.3:1, провал AA) — у нас на помаранчевій кнопці ЧОРНИЛЬНИЙ текст (4.95:1, AA ✓). Правила-інваріанти: 1. --heat НІКОЛИ не використовується для дрібного тексту. Дрібний помаранч на білому → --heat-text; на темному → --heat-on-dark. 2. UPPERCASE лише у трьох ролях: overline, кнопки, статус-бейджі (11px/700). Заголовки — sentence case. 3. Один шрифт на все — e-Ukraine (400/500/700). Великі заголовки — вага 500. 4. Числа у специфікаціях/таблицях — font-variant-numeric: tabular-nums. 5. Градієнт «нагрів» — стрічки 3–6px, підкреслення, активні стани. Не фони. ========================================================================== */ :root { /* ---- ГАРЯЧИЙ АКЦЕНТ (heat) ------------------------------------------- */ --heat-50: #FDF1E9; --heat-100: #FBDFCE; --heat-200: #F7BE9C; --heat-300: #F49463; --heat-400: #F1732F; --heat-500: #EE5511; /* базовий акцент: заливки CTA (текст на ній — ink!), іконки, великі цифри */ --heat-600: #D34400; /* лінії/бордери активних станів */ --heat-700: #B03700; --heat-800: #8C2D03; --heat-900: #6F2506; --heat: var(--heat-500); --heat-text: #C24509; /* дрібний помаранчевий текст/лінки на білому (5.06:1 AA ✓) */ --heat-on-dark: #FF8A50; /* дрібний помаранчевий текст/лінки на steel-900 (7.3:1 AAA ✓) */ --heat-soft: var(--heat-50); /* Фірмовий градієнт «нагрів» — тільки стрічки/лінії/підкреслення */ --grad-heat: linear-gradient(98deg, #FFC53D 0%, #EE5511 55%, #C93400 100%); --grad-heat-v: linear-gradient(180deg, #FFC53D 0%, #EE5511 55%, #C93400 100%); --ribbon-h: 4px; /* канонічна товщина бренд-стрічки */ /* ---- ВОРОНОВАНА СТАЛЬ (темний нейтрал, синьо-чорний) ------------------ */ --steel-950: #10161D; /* найглибший: pressed, футер-низ */ --steel-900: #161D26; /* база темних секцій / hero (білий текст 17:1 AAA) */ --steel-850: #1C242F; --steel-800: #242E3A; /* картки на темному */ --steel-700: #33404E; /* бордери на темному */ --steel-400: #8FA3B8; /* ДЕКОРАТИВНИЙ сталевий (не для тексту) */ --steel-foreground: #FFFFFF; --steel-muted-foreground: #A9B6C4; /* другорядний текст на темному (8.2:1 AAA ✓) */ /* ---- ХОЛОДНІ ПАПЕРИ (світлі поверхні) --------------------------------- */ --background: #FFFFFF; --surface: #F5F7F9; /* альтернативні секції */ --muted: #EDF1F4; /* підкладки, hover рядків */ --muted-2: #E2E8EE; --border: #DCE3EA; --border-strong: #C2CCD6; /* ---- ЧОРНИЛО (текст на світлому) -------------------------------------- */ --foreground: #141A21; /* основний текст (16.9:1 AAA) */ --secondary-foreground: #4A5561; /* підзаголовки, лід (7.6:1 AAA) */ --muted-foreground: #67737F; /* підписи, мета, плейсхолдери (4.84:1 AA) */ --decor-foreground: #9AA7B4; /* ЛИШЕ декор/розділювачі — не текст */ /* ---- СЕМАНТИКА (мінімальний набір візитки) ---------------------------- */ --success: #1E9E57; --success-text: #157F44; --success-soft: #E6F5EC; --info: #2F6FAB; --info-text: #275E92; --info-soft: #E9F1F8; --warning: #DF8E00; --warning-text: #8F5F06; --warning-soft: #FCF3E0; --danger: #D64040; --danger-text: #B32E2E; --danger-soft: #FBEAEA; /* ---- ФОКУС ------------------------------------------------------------ */ --focus: var(--heat-600); /* кільце на світлому: 2px + offset 2px */ --focus-on-dark: #FFFFFF; --ring-w: 2px; --ring-offset: 2px; /* ---- ТИПОГРАФІКА ------------------------------------------------------ Один гротеск: e-Ukraine (self-hosted, ваги 400/500/700). display/h1/h2 — вага 500 (спокійна впевненість, як великий кегль); h3/h4 — 700 (малим розмірам потрібна вага для ієрархії). */ --font-sans: "e-Ukraine", system-ui, -apple-system, "Segoe UI", sans-serif; --text-display-size: clamp(2.5rem, 1.9rem + 2.2vw, 3.5rem); /* 40→56 */ --text-display-line: 1.06; --text-display-weight: 500; --text-display-tracking: -0.01em; --text-h1-size: clamp(2rem, 1.55rem + 1.7vw, 2.75rem); /* 32→44 */ --text-h1-line: 1.1; --text-h1-weight: 500; --text-h1-tracking: -0.005em; --text-h2-size: clamp(1.625rem, 1.35rem + 1vw, 2.125rem); /* 26→34 */ --text-h2-line: 1.18; --text-h2-weight: 500; --text-h3-size: 1.375rem; --text-h3-line: 1.3; --text-h3-weight: 700; /* 22 */ --text-h4-size: 1.125rem; --text-h4-line: 1.4; --text-h4-weight: 700; /* 18 */ --text-overline-size: 0.8125rem; --text-overline-line: 1.4; --text-overline-weight: 700; --text-overline-transform: uppercase; --text-overline-tracking: 0.14em; /* uppercase-роль №1 */ --text-lead-size: 1.125rem; --text-lead-line: 1.65; /* лід-абзац 18 */ --text-body-size: 1rem; --text-body-line: 1.6; /* базовий 16 */ --text-small-size: 0.875rem; --text-small-line: 1.55; /* 14 */ --text-caption-size: 0.75rem; --text-caption-line: 1.45; --text-caption-weight: 500; /* 12 */ --numeric: tabular-nums; /* font-variant-numeric для марок/розмірів/таблиць */ /* ---- ФОРМА (гострі індустріальні кути) --------------------------------- */ --radius-xs: 2px; /* кнопки, інпути, чипи */ --radius-s: 4px; /* мініатюри, вкладені елементи */ --radius-m: 8px; /* картки, фото, модалки */ --radius-pill: 999px;/* лише статус-бейджі */ /* ---- ПРОСТІР (база 4px) ------------------------------------------------ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-32: 128px; --section-y: clamp(64px, 5vw + 32px, 96px); /* вертикальний ритм секцій */ --container: 1240px; --gutter: clamp(16px, 3vw, 24px); /* ---- ВИСОТИ / ТАЧ ------------------------------------------------------- */ --control-h: 48px; /* кнопки/інпути desktop */ --control-h-s: 40px; /* компактні */ --tap-min: 44px; /* мінімальна ціль дотику */ /* ---- ТІНІ (мінімум: спершу бордери, тіні — лише відрив) ---------------- */ --shadow-raise: 0 2px 8px rgba(16, 22, 29, .08); --shadow-float: 0 8px 28px rgba(16, 22, 29, .16); --shadow-overlay: 0 24px 64px rgba(16, 22, 29, .28); /* ---- ФОТО -------------------------------------------------------------- Тільки реальні фото (метал/різання/команда). Для тексту поверх фото: */ --photo-scrim: linear-gradient(180deg, rgba(16,22,29,.55) 0%, rgba(16,22,29,.22) 45%, rgba(16,22,29,.66) 100%); --photo-scrim-side: linear-gradient(90deg, rgba(16,22,29,.72) 0%, rgba(16,22,29,.35) 55%, rgba(16,22,29,.08) 100%); /* ---- РУХ ---------------------------------------------------------------- */ --dur-fast: 140ms; --dur: 200ms; --dur-slow: 320ms; --ease: cubic-bezier(.2, .7, .3, 1); /* ease-out: вхід */ --ease-in: cubic-bezier(.5, 0, .8, .4);/* вихід, коротший за вхід */ /* ---- Z-ШКАЛА ------------------------------------------------------------ */ --z-base: 0; --z-raised: 10; --z-sticky: 30; --z-header: 50; --z-overlay: 90; --z-modal: 100; --z-toast: 110; /* ---- ІКОНКИ (Lucide, один сет) ------------------------------------------ */ --icon-s: 16px; --icon-m: 20px; --icon-l: 24px; --icon-stroke: 1.75; } /* ---- Брейкпоінти (довідково; media queries не параметризуються змінними) 380 — малий мобільний · 768 — планшет · 1024 — десктоп · 1440 — широкий */ /* ---- Reduced motion ------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; } }