/* MKK Curling Club Styles — компонентный слой поверх дизайн-системы. Все базовые токены (цвет/отступы/скругления/типографика/тени/z/easing) вынесены в css/design-system.css (подключается ПЕРЕД этим файлом). Здесь — только адаптивные переопределения токенов (в media-блоках ниже: --promo-h, --head-gap, burger-*) и стили. */ body{font-family:var(--font-sans);color:var(--ink-body);background:var(--ice-0)} h1,h2,h3{color:var(--ink-cold);text-wrap:balance;font-weight:800} h1{font-size:clamp(44px,5.6vw,80px);line-height:1.1} h2{font-size:clamp(32px,3.6vw,52px);line-height:1.12} .container-mkk{--bs-gutter-x:40px;width:100%;max-width:1400px;margin-inline:auto;padding-inline:calc(var(--bs-gutter-x)*.5)} .sec{padding-block:var(--sec-pad)} .btn-mkk{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-3);border:0;border-radius:100px;font:500 15px/1 'Onest',sans-serif;padding:17.5px 28px 16.5px;text-decoration:none;cursor:pointer;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),background .3s var(--ease-out),border-color .3s var(--ease-out)} .btn-mkk-primary{background:var(--grad-cta);color:#fff;border:1px solid transparent} .btn-mkk-primary:hover{transform:translateY(-1px);box-shadow:0 14px 34px -14px rgba(11,170,236,.55)} .btn-mkk-light{background:#fff;color:var(--ink-cold);border:1px solid rgba(20,48,60,.14)} .btn-mkk-light:hover{transform:translateY(-1px);background:var(--ice-1);border-color:var(--cyan-2)} .btn-mkk-ghost{background:transparent;color:#fff;border:1px solid var(--glass-br)} :focus-visible{outline:2px solid var(--cyan-2);outline-offset:2px} /* ── PROMO BAR ── */ /* ── LENIS (плавный скролл) — ОБЯЗАТЕЛЬНАЯ CSS из README Lenis ────────────────────────────────── Root cause сломанного скролла (найден systematic-debugging, репро колесом): Bootstrap Reboot ставит `scroll-behavior:smooth` на :root; Lenis каждый кадр зовёт window.scrollTo(), и браузерная smooth-анимация рестартится на каждом кадре — нативный scrollY замерзает, а lenis.scroll убегает (419→5365 при native=0). На живой машине = «прокидывает через блоки, зависает, назад не крутится». Гейтим по классу `lenis` (его вешает Lenis при инициализации, подтверждено): при активном JS — scroll-behavior:auto (плавность даёт сам Lenis); без JS класса нет → Bootstrap-smooth остаётся для нативных якорей. `height:auto` и прочие — тоже из канонической CSS Lenis. */ html.lenis{scroll-behavior:auto!important} html.lenis,html.lenis body{height:auto} .lenis.lenis-stopped{overflow:hidden} .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain} .lenis.lenis-smooth iframe{pointer-events:none} /* --promo-h / --nav-h определены в design-system.css. Важно: --nav-h на :root (НЕ на #site-nav): его читает и .hero-in (не потомок нава!) — кастомные свойства наследуются только вниз; финальное ревью поймало регресс E4 (padding-top резолвился в 0 на коротких вьюпортах, H1 уходил под нав) */ #promo{position:fixed;inset-inline:0;top:0;z-index:calc(var(--z-nav) + 1);height:var(--promo-h);background:var(--ice-2);overflow:hidden} #promo .promo-in{height:100%;display:flex;align-items:center;gap:var(--sp-4)} .promo-badge{display:inline-flex;align-items:center;justify-content:center;height:22px;padding-inline:var(--sp-2);margin-inline-end:10px;border-radius:50px;background:var(--cyan-2);color:#fff;font:600 12px/1 'Onest',sans-serif;flex:none} .promo-txt{margin:0;color:var(--ink-cold);font-size:14px;font-weight:500;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .promo-link{flex:none;color:var(--cyan-2);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap} .promo-link:hover{text-decoration:underline} .promo-x{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:var(--ink-mut);font-size:20px;line-height:1;cursor:pointer;transition:background .2s,color .2s} .promo-x:hover{background:rgba(20,48,60,.08);color:var(--ink-cold)} /* ── SITE NAV ── */ /* Top-state (on hero) = полностью прозрачный header per Figma 2008:10748 — никакого стекла/фона/бордера. Белый фон, тёмные ссылки и цветной лого появляются только в .scrolled (см. ниже). */ #site-nav{position:fixed;inset-inline:0;top:0;transform:translateY(var(--promo-h));z-index:var(--z-nav);height:var(--nav-h);background:transparent;border-bottom:1px solid transparent;transition:background .3s,border-color .3s,transform .3s var(--ease-out)} #site-nav .navbar{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap} #site-nav.scrolled{background:var(--ice-0);border-bottom-color:rgba(20,48,60,.1)} .nav-logo{display:inline-flex;align-items:center;line-height:0} .nav-logo img{height:40px;width:auto;display:block} .nav-logo .logo-on-light{display:none} #site-nav.scrolled .logo-on-dark{display:none} #site-nav.scrolled .logo-on-light{display:block} /* Логотип | Меню | CTA — три самостоятельные группы, разнесённые по контейнеру 1360 (Figma 2008:10748: Logo — Menu Items — Button, все три — прямые flex-дети одного justify-between ряда), а не слипшиеся у левого края. Bootstrap оборачивает меню+CTA в свой .navbar-collapse div — на десктопе убираем эту обёртку из коробочной модели через display:contents, чтобы .mkk-menu и .nav-cta стали настоящими flex-детьми #site-nav .navbar наравне с .nav-logo (то есть ИМЕННО 3-групповой space-between, а не 2-групповой с зажатым внутри дуэтом). !important обязателен: сам Bootstrap задаёт .navbar-expand-lg .navbar-collapse{display:flex!important} на этом же брейкпоинте (bootstrap.min.css), обычная специфичность его не перебивает. */ @media (min-width:992px){#site-nav .navbar-collapse{display:contents!important}} .mkk-menu{display:flex;align-items:center;gap:var(--sp-6);list-style:none;margin:0;padding:0} .nav-link{position:relative;display:inline-flex;align-items:center;gap:var(--sp-2);padding:0;margin:0;color:#fff;font-size:16px;font-weight:500;text-decoration:none;white-space:nowrap;transition:color .25s var(--ease-out)} /* Клиент: «Большеваты отступы между пунктами». Сверка с Figma 2008:10748 (Menu Items > Right) даёт gap-[32px] — РОВНО как в текущем .mkk-menu{gap:32px}, число уже верное. Реальная причина «расползания»: Bootstrap задаёт .navbar-expand-lg .navbar-nav .nav-link{padding-right/left:var(--bs-navbar-nav-link-padding-x)} (8px по умолчанию, внутри @media >=992px) — специфичность (0,3,0) перебивает и одиночный .nav-link{padding:0} (0,1,0), и компаунд .mkk-menu .nav-link (0,2,0), т.к. наш