/* ============================================================ Nordic Club UA — tokens.css Design tokens + minimal reset. Load FIRST. Load order: tokens.css → base.css → layout.css → components.css → animations.css → pages/.css FONTS — this file does NOT import fonts. Every page MUST add these tags in , before the stylesheets: JS hook — main.js must add the "js" class to (document.documentElement.classList.add('js')) so that .reveal / horizon initial-hidden states never hide content when JavaScript is unavailable. ============================================================ */ :root { /* ---- Colour · ink (navy) ---- */ --ink-900: #050F18; /* deepest navy — footer, max-contrast bands */ --ink-800: #081D2A; /* BRAND PRIMARY navy — default dark surface */ --ink-700: #0E2A3C; /* raised dark surface / dark cards */ --ink-600: #16394E; /* dark card border, hover surface */ --ink-500: #24506B; /* hairline on dark */ --ink-400: #7C93A4; /* muted text on dark (AA on ink-800) */ /* ---- Colour · paper ---- */ --paper: #FFFFFF; --paper-50: #F6F7F8; /* light section background */ --paper-100: #EDEFF1; /* light hairline / light card */ --paper-200: #DDE2E6; --slate-600: #4A5C68; /* muted text on light */ /* ---- Colour · gold accent ---- */ --gold-500: #F2C200; /* BRAND ACCENT — on navy (10.2:1 on ink-800) */ --gold-600: #D4A900; /* accent hover / gold-on-gold borders. NOT for text on light */ --gold-400: #FFD84D; --gold-glow: rgba(242, 194, 0, .14); --gold-selection: rgba(242, 194, 0, .3); /* ВІДХІД ВІД БРИФУ §7, перевірений розрахунком: --gold-600 на білому дає 2.22:1, а не AA — жодне жовте золото 4.5:1 на білому не дає. Тому акцентний ТЕКСТ і індикатори стану на світлих поверхнях беруть темне золото: 5.94:1 (paper), 5.54 (paper-50), 5.15 (paper-100), 4.55 (paper-200), 5.48 (на gold-glow). На темному акцент лишається --gold-500 (10.2:1). Перемикає --c-accent-text / --c-focus (base.css, layout.css). */ --gold-800: #7A6100; /* accent text + state borders on light surfaces */ /* Navy ЗАТВЕРДЖЕНОГО БРЕНД-БУКУ. НЕ те саме, що --ink-800 (#081D2A), на якому побудовані темні секції сайту: бренд-буківський темніший і синіший. Використовується там, де показуємо саме фірмовий колір (сторінка «Бренд і логотип»), а не поверхню сайту. Який із двох головний — питання до власника, ще не закрите. */ --brand-navy: #021A41; /* Скрим поверх фото (бриф §7). Раніше ці rgba були розписані в семи pages/*.css із сімома різними прозоростями — тепер один набір: media = фото з текстом унизу (.86 — значення брифу), media-soft = фото без тексту, header = hero і шапки сторінок. */ --scrim-media: linear-gradient(180deg, rgba(8, 29, 42, .55) 0%, rgba(8, 29, 42, .86) 100%); --scrim-media-soft: linear-gradient(180deg, rgba(8, 29, 42, 0) 40%, rgba(8, 29, 42, .55) 100%); --scrim-header: linear-gradient(180deg, rgba(8, 29, 42, .88) 0%, rgba(8, 29, 42, .62) 46%, rgba(8, 29, 42, .92) 100%); /* ---- Hero «Дві лінії, один горизонт» ---- Кадр Осло навмисно порожній ліворуч і вгорі — саме туди лягає текст, і саме там скрим найщільніший. ЧОМУ ЕЛІПТИЧНИЙ, А НЕ ЛІНІЙНИЙ: вишиванка лежить на воді В ЛІВОМУ НИЗУ — тобто рівно там, де градієнт «зліва направо» найгустіший. Лінійний варіант її душив. Радіальний збирає щільність навколо текстового блоку вгорі ліворуч і відпускає низ, тому коріння читається. Вертикальний варіант нижче — для вузьких екранів, де кадр стає смугою внизу. ГЕОМЕТРІЮ ПІДІБРАНО ПЕРЕБОРОМ, не на око: із 432 варіантів лише 3 тримали AA на всіх трьох елементах тексту. Обмежує саме абзац під заголовком — він стоїть рівно над вишиванкою. Тому яскравість графіки додає не послаблення скриму, а окремий шар --boost, який лежить ПОВЕРХ скриму (див. pages/index.css). Якщо міняєте ці стопи — переганяйте перевірку контрасту знову. */ --scrim-hero: radial-gradient(94% 70% at 16% 40%, rgba(8, 29, 42, .96) 0%, rgba(8, 29, 42, .90) 32%, rgba(8, 29, 42, .60) 55%, rgba(8, 29, 42, .24) 75%, rgba(8, 29, 42, .06) 90%, rgba(8, 29, 42, 0) 100%); /* На вузьких екранах текст лежить БЕЗПОСЕРЕДНЬО на кадрі (кадр там знову тло), тому скрим мусить тримати AA по всій висоті, а не лише вгорі: заголовок, абзац, кнопки і смуга довіри розкидані від 20% до 95% висоти екрана. */ --scrim-hero-narrow: linear-gradient(180deg, rgba(8, 29, 42, .93) 0%, rgba(8, 29, 42, .80) 34%, rgba(8, 29, 42, .62) 62%, rgba(8, 29, 42, .58) 100%); --scrim-hero-vignette: linear-gradient(180deg, rgba(5, 15, 24, .40) 0%, rgba(5, 15, 24, 0) 24%, rgba(5, 15, 24, 0) 74%, rgba(5, 15, 24, .10) 100%); /* Маска, що «проявляє» золоту графіку зліва направо. ГЕОМЕТРІЯ (не міняйте навмання — див. pages/index.css): маска — 220% ширини кадру, тому видиме «вікно» = 45.5% маски. Щоб кадр міг бути і повністю схованим, і повністю показаним, чорна й прозора ділянки мусять бути кожна ширшою за 45.5%. Звідси 0–46% чорне, 54–100% прозоре, 8% на розмиття краю. ЧОМУ САМЕ 220%, а не більше: хід краю дорівнює (S−1) ширини кадру, а видно лише одну ширину. При 250% третина ходу йшла за екраном — анімація майже секунду «нічого не робила». При 220% за кадром лишається тільки 20% ходу. */ --hero-mask: linear-gradient(90deg, #000 0 46%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, 0) 54%, rgba(0, 0, 0, 0) 100%); --hero-mask-shimmer: linear-gradient(90deg, rgba(0, 0, 0, 0) 0 46.5%, rgba(0, 0, 0, .45) 49%, #000 50%, rgba(0, 0, 0, .45) 51%, rgba(0, 0, 0, 0) 53.5% 100%); /* Світло, що біжить по горизонту попереду проявлення. Яскравість несе РАДІАЛЬНИЙ шар, зібраний на лінії води (80% висоти). Вертикальний лінійний шар навмисно слабкий (.20, не .52): на повну силу він читався як прожекторний промінь через увесь кадр — надто ефектно для ділової спільноти. Потрібне сяйво вздовж горизонту. */ --hero-spark: radial-gradient(52% 34% at 50% 80%, rgba(255, 226, 138, .42) 0%, rgba(242, 194, 0, .18) 38%, rgba(242, 194, 0, 0) 74%), linear-gradient(90deg, rgba(242, 194, 0, 0) 0%, rgba(255, 214, 77, .035) 46%, rgba(255, 236, 173, .07) 50%, rgba(255, 214, 77, .035) 54%, rgba(242, 194, 0, 0) 100%); /* Хореографія героя — одна крива й одна тривалість на всі шари, інакше світло від'їде від краю маски. */ --hero-delay: .55s; --hero-dur: 3.2s; --hero-ease: cubic-bezier(.3, 0, .2, 1); /* ---- Type · families ---- */ --font-display: "Manrope", "Avenir Next", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif; /* ---- Type · fluid scale ---- */ --fs-hero: clamp(2.6rem, 6.4vw, 5.4rem); --fs-h2: clamp(1.9rem, 3.4vw, 3.1rem); --fs-h3: clamp(1.375rem, 1.6vw + 0.9rem, 1.75rem); --fs-h4: clamp(1.125rem, 0.5vw + 1rem, 1.25rem); --fs-lead: clamp(1.125rem, 0.6vw + 1rem, 1.3125rem); --fs-body: clamp(1.0625rem, 0.25vw + 1rem, 1.125rem); --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; --fs-eyebrow: 0.75rem; --fs-stat: clamp(2.8rem, 5vw, 4.6rem); /* ---- Type · rhythm ---- */ --lh-hero: 1.02; --lh-heading: 1.12; --lh-sub: 1.35; --lh-body: 1.65; --ls-hero: -0.03em; --ls-heading: -0.02em; --ls-eyebrow: 0.16em; --measure: 68ch; /* ---- Layout ---- */ --w-max: 1240px; --w-wide: 1400px; --w-text: 720px; --gutter: clamp(20px, 5vw, 48px); --sect-pad: clamp(88px, 11vw, 160px); --sect-pad-tight: clamp(56px, 7vw, 96px); --gap: clamp(16px, 2.5vw, 32px); --header-h: 88px; --header-h-compact: 64px; /* ---- Radius ---- */ --r-sm: 4px; --r: 8px; --r-lg: 14px; /* ---- Elevation (light surfaces only) ---- */ --shadow-card: 0 1px 2px rgba(8, 29, 42, .06), 0 12px 32px rgba(8, 29, 42, .06); /* ---- Motion ---- */ --t-fast: 200ms; --t: 320ms; --t-slow: 560ms; --t-xslow: 900ms; --ease-enter: cubic-bezier(.16, 1, .3, 1); /* entrances */ --ease-ui: cubic-bezier(.4, 0, .2, 1); /* UI state changes */ /* ---- Stacking ---- */ --z-header: 100; --z-overlay: 120; --z-skip: 200; } /* ============================================================ Minimal modern reset ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { min-height: 100vh; } img, picture, video { display: block; max-width: 100%; height: auto; } svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } fieldset { border: 0; padding: 0; } ul[class], ol[class] { list-style: none; padding: 0; } h1, h2, h3, h4, h5, h6, p { overflow-wrap: break-word; } /* 2px + 2px офсет (бриф §9), але КОЛІР ІЗ КОНТЕКСТУ ПОВЕРХНІ: --gold-500 на білому дає 1.68:1, тобто рамка фактично невидима, а WCAG 1.4.11/2.4.11 вимагає 3:1. Див. --c-focus у base.css (світле, --gold-800) і layout.css (темне, --gold-500). */ :focus-visible { outline: 2px solid var(--c-focus, var(--gold-500)); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } ::selection { background: var(--gold-selection); color: var(--ink-900); }