/* ============================================================ Nordic Club UA — layout.css Containers, sections (surface rhythm), grid, header, footer, split layouts. Load after base.css. ============================================================ */ /* ---- Containers ---- */ .container { width: 100%; max-width: calc(var(--w-max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .container--wide { max-width: calc(var(--w-wide) + 2 * var(--gutter)); } .container--text { max-width: calc(var(--w-text) + 2 * var(--gutter)); } /* ---- Sections & surface rhythm ---- Dark sections override the --c-* context set on , so every component flips its colours automatically. */ .section { position: relative; padding-block: var(--sect-pad); } .section--tight { padding-block: var(--sect-pad-tight); } .section--light { background: var(--paper-50); --c-bg: var(--paper-50); --c-surface: var(--paper); --c-card-bg: var(--paper); } .section--dark, .section--deep, .site-footer { color: var(--paper); --c-text: var(--paper); --c-muted: var(--ink-400); --c-line: var(--ink-500); --c-line-soft: var(--ink-600); --c-accent-text: var(--gold-500); --c-focus: var(--gold-500); --c-hover-fill: rgba(255, 255, 255, .07); --c-solid: var(--paper); --c-solid-text: var(--ink-900); --c-field-bg: var(--ink-700); --c-field-border: var(--ink-500); } .section--dark { background: var(--ink-800); --c-bg: var(--ink-800); --c-surface: var(--ink-700); --c-card-bg: var(--ink-700); } .section--deep { background: var(--ink-900); --c-bg: var(--ink-900); --c-surface: var(--ink-800); --c-card-bg: var(--ink-800); } /* Хедер і оверлей — теж темні поверхні, хоч і не .section: без цього фокус-рамка взяла б світлий --c-focus (3.25:1 на navy). */ .site-header, .nav-overlay { --c-accent-text: var(--gold-500); --c-focus: var(--gold-500); } /* Текст лежить БЕЗПОСЕРЕДНЬО НА ФОТО, тому приглушений не може бути --ink-400 (3.2:1 на світлій ділянці кадру). --paper-200 дає 7.8:1 і читається як «тихіший білий», а не як сірий. */ .hero, .page-header { --c-muted: var(--paper-200); } /* Section header block: eyebrow + title + lead */ .section__head { margin-block-end: clamp(40px, 6vw, 72px); } .section__head .eyebrow { margin-block-end: 20px; } .section__head .lead { margin-block-start: 20px; } /* ---- 12-column grid ---- */ .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); } .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; } .col-11 { grid-column: span 11; } .col-12 { grid-column: span 12; } @media (max-width: 900px) { .grid { grid-template-columns: repeat(6, 1fr); } .col-1, .col-2, .col-3, .col-4 { grid-column: span 3; } .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { grid-column: span 6; } } @media (max-width: 600px) { .grid { grid-template-columns: 1fr; } [class*="col-"] { grid-column: 1 / -1; } } /* ---- Split (two-column feature layout) ---- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; } .split--top { align-items: start; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; } } /* ---- Site header ---- Transparent over the dark hero; nav.js adds .is-scrolled past 80px → ink-900 background + hairline + compact height. */ .site-header { position: fixed; inset-inline: 0; top: 0; z-index: var(--z-header); color: var(--paper); background: transparent; border-bottom: 1px solid transparent; transition: background-color var(--t) var(--ease-ui), border-color var(--t) var(--ease-ui); } .site-header.is-scrolled { background: var(--ink-900); border-bottom-color: var(--ink-600); } /* Only pages whose first block is a dark hero keep .site-header--overlay. Pages without one drop that modifier: the header is solid navy from the start and the page's FIRST
(usually .page-header) carries .u-header-offset — not
. */ .site-header:not(.site-header--overlay) { background: var(--ink-900); border-bottom-color: var(--ink-600); } /* min-height СВІДОМО без transition: анімація висоти перекладала все піддерево хедера кожен кадр саме під час скролу. Плавно міняються лише фон і гейрлайн; компактна висота стає одразу. */ .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); } .site-header.is-scrolled .site-header__inner { min-height: var(--header-h-compact); } .site-header__brand { display: inline-flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; } .site-header__brand svg { height: 38px; width: auto; } .site-header__nav ul { display: flex; align-items: center; gap: clamp(20px, 2.5vw, 36px); /* Цей