/* ============================================================ 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 */ /* Скрим поверх фото (бриф §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%); /* ---- 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); }