/* ============================================================ Kukurudza · H1 «Ціна як кваліфікатор» (v1_price_qualifier) Дизайн-токени — джерело: реальна тема kukurudza.com (targetologist.css / main.css). Зелена айдентика курсу + помаранчевий акцент на головних CTA. Mobile-first. ============================================================ */ /* ---------- Фірмові шрифти (self-host) ---------- */ @font-face { font-family: "KyivType Titling"; src: url("../../public/fonts/KyivTypeTitling-Light3.woff2") format("woff2"), url("../../public/fonts/KyivTypeTitling-Light3.woff") format("woff"); font-weight: 300 700; font-display: swap; } @font-face { font-family: "Ermilov"; src: url("../../public/fonts/ermilov-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "Kukurudza"; src: url("../../public/fonts/Kukurudza-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; } /* "Commissioner" (текст) підключається через Google Fonts у */ :root { /* ---------- Палітра: зелена база (з targetologist.css) ---------- */ --green-900: #001f3e; /* темно-синій контраст (преміум-градієнт) */ --green-800: #06774a; /* PRIMARY — глибокий зелений */ --green-700: #00804d; --green-500: #75d164; /* яскравий зелений акцент */ --green-400: #74c465; --green-100: #e2ffb9; /* лаймовий tint — світлі секції */ /* ---------- Помаранчевий акцент (з main.css, лише CTA) ---------- */ --accent: #ff6b00; --accent-600: #e85f00; /* hover */ --accent-100: #ffdcbc; /* ---------- Нейтральні ---------- */ --ink: #131313; /* основний текст */ --ink-2: #3f3f3f; /* вторинний текст */ --muted: #707070; /* приглушений */ --surface: #ffffff; --surface-2: #f7f7f7; /* світло-сірі секції */ --surface-3: #eef7e6; /* ледь-зелений фон */ --border: rgba(19, 19, 19, 0.12); --border-green: rgba(6, 119, 74, 0.18); /* ---------- Семантичні ---------- */ --color-primary: var(--green-800); --color-on-primary: #ffffff; --color-cta: var(--accent); --color-on-cta: #ffffff; --color-bg: var(--surface); --color-fg: var(--ink); /* ---------- Фірмові градієнти (точно з теми) ---------- */ --grad-green: linear-gradient(92.61deg, #06774a 0%, #75d164 102.44%); --grad-green-soft: linear-gradient(91.42deg, #e2ffb9 1.21%, #ffffff 100%); --grad-premium: linear-gradient(53.75deg, #001f3e -3.71%, #00804d 51.25%, #74c465 97.21%); --grad-cta: linear-gradient(95deg, #ff6b00 0%, #ff8a33 100%); /* ---------- Типографіка ---------- */ --font-display: "Ermilov", "Commissioner", system-ui, sans-serif; --font-head: "Ermilov", "Commissioner", system-ui, sans-serif; --font-body: "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif; --font-brand: "Kukurudza", "Commissioner", sans-serif; /* fluid type scale (mobile-first, clamp) */ --fs-display: clamp(2.05rem, 8.5vw, 6rem); /* hero «таргетолог» — вписується на 360px, виразний на десктопі */ --fs-h1: clamp(2rem, 6.5vw, 3.5rem); --fs-h2: clamp(1.6rem, 5vw, 2.6rem); --fs-h3: clamp(1.2rem, 3.4vw, 1.6rem); --fs-lead: clamp(1.05rem, 2.4vw, 1.35rem); --fs-body: 1.0625rem; /* 17px — ≥16 для mobile */ --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; --lh-display: 0.98; --lh-head: 1.12; --lh-body: 1.6; /* ---------- Радіуси (бренд = pill + крупні картки) ---------- */ --r-pill: 999px; --r-card: clamp(20px, 4vw, 32px); --r-md: 18px; --r-input: 16px; --r-sm: 12px; /* ---------- Тіні (зелені/помаранчеві glow) ---------- */ --shadow-card: 0 14px 44px -16px rgba(6, 119, 74, 0.22); --shadow-card-hover: 0 22px 60px -18px rgba(6, 119, 74, 0.32); --shadow-cta: 0 12px 28px -8px rgba(255, 107, 0, 0.45); --shadow-soft: 0 8px 30px -12px rgba(19, 19, 19, 0.12); /* ---------- Простір / ритм (4-8 scale) ---------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; --space-10: 4rem; --section-y: clamp(3.5rem, 9vw, 7rem); --container: min(1180px, 92vw); --container-narrow: min(720px, 92vw); /* ---------- Рух ---------- */ --t-fast: 0.15s; --t: 0.25s; --t-slow: 0.4s; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ---------- Шари ---------- */ --z-sticky: 60; --z-nav: 50; --z-overlay: 80; --z-modal: 100; } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0.01ms; --t: 0.01ms; --t-slow: 0.01ms; } }