/* ===== Menubar (общий, настоящий fixed — НЕ часть #stage) ===== Реальные пиксели, не масштабируется вместе со сценой. Всегда прижато к истинному верху экрана, во всю ширину — как на referens-сайте. */ .menubar{ position:fixed; left:0; top:0; width:100%; height:var(--header-h); z-index:100; } /* Градиентное ("прогрессивное") размытие — как в последних версиях iOS (Liquid Glass): сильный блюр у самого верха экрана, плавно уходящий в 0 к нижнему краю хедера, БЕЗ шва на границе. Один backdrop-filter с фиксированным радиусом так не умеет (CSS не поддерживает переменный по пространству blur внутри одного filter) — стандартный приём: несколько наложенных слоёв с РАЗНЫМ backdrop-filter:blur(), каждый замаскирован mask-image (linear-gradient чёрный→прозрачный) так, чтобы затухать на своей глубине. У самого верха (0%) все 5 слоёв непрозрачны разом — их blur складывается (backdrop-filter каждого следующего слоя размывает уже размытый результат слоёв под ним) → там, где нужно, самый сильный блюр. Дальше вниз слои гаснут ОДИН ЗА ДРУГИМ, начиная с самого сильного (blur 18px гаснет первым, к 38% высоты) и заканчивая самым слабым (blur 1.5px, держится дольше всех, гаснет только к 100% = нижнему краю хедера) — так эффективный блюр не обрывается скачком, а тает почти незаметными ступеньками, сливающимися в глазах в плавный градиент. Проценты — от высоты .menubar (var(--header-h)), не экрана. pointer-events:none — эти слои чисто визуальные, не должны перехватывать клики по .logo/.menu (те лежат ПОСЛЕ в разметке — рисуются поверх стека автоматически, без доп. z-index). */ .menubar-tint, .menubar-blur-layer{ position:absolute; inset:0; pointer-events:none; } /* Цветная подложка — просто CSS-градиент (у него плавность "бесплатная", трюк с несколькими слоями тут не нужен): насыщенный жёлтый у верха, полностью прозрачный к низу хедера — тон должен уйти в 0 ровно там же, где и блюр, иначе шов всё равно будет заметен по цвету. */ .menubar-tint{ background:linear-gradient(to bottom, rgba(255,227,0,0.92) 0%, rgba(255,227,0,0.8) 40%, rgba(255,227,0,0) 100%); } /* Явные модификаторы (--1…--5), не nth-child — порядок в CSS не обязан совпадать с порядком в разметке, меньше шансов сломать при правках. */ .menubar-blur-layer--1{ backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 5%, transparent 38%); mask-image:linear-gradient(to bottom, #000 0%, #000 5%, transparent 38%); } .menubar-blur-layer--2{ backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 5%, transparent 55%); mask-image:linear-gradient(to bottom, #000 0%, #000 5%, transparent 55%); } .menubar-blur-layer--3{ backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 5%, transparent 70%); mask-image:linear-gradient(to bottom, #000 0%, #000 5%, transparent 70%); } .menubar-blur-layer--4{ backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 5%, transparent 85%); mask-image:linear-gradient(to bottom, #000 0%, #000 5%, transparent 85%); } .menubar-blur-layer--5{ backdrop-filter:blur(1.5px); -webkit-backdrop-filter:blur(1.5px); -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 5%, transparent 100%); mask-image:linear-gradient(to bottom, #000 0%, #000 5%, transparent 100%); } /* Лого — 72×59, тот же файл (images/logo-header.svg) и aspect ratio (1.22) — просто CSS-масштаб побольше (Figma 2898:4306, 72×59 внутри Menubar). */ .logo{ position:absolute; left:28px; top:50%; transform:translateY(-50%); width:72px; height:59px; display:block; cursor:pointer; } /* Меню центрируется НЕ по экрану, а по свободному месту между лого и кнопкой «Демонстрация» — правка 2026-08-05 по замечанию пользователя «справа меню прилипает к кнопке, хотя слева есть расстояние». Причина асимметрии арифметическая: слева занято 100px (28 отступ + 72 лого), справа — около 195 (кнопка ~167 + 28), то есть центр свободной зоны смещён относительно центра экрана почти на 50px. Пока окно широкое, это незаметно, а на 1026px (граница, где gap между пунктами уже сжат в ноль) замерено: слева 74px воздуха, справа −20px, то есть «Контакты» уезжали ПОД кнопку. Сдвигаем ряд на половину разницы занятых зон — тогда воздух распределяется поровну сам, на любой ширине. Величина в переменной, потому что зависит от ширины кнопки: поменяется её текст — поменять и здесь. */ .menubar{ --menu-side-shift: 47px; } /* gap — .menubar живёт в РЕАЛЬНЫХ px (не масштабируется вместе со сценой, см. комментарий у .menubar выше) — на 1440px+ (ширина, под которую всё рассчитано) 24px между пунктами помещаются свободно, но при сужении окна вниз к 1024px (граница, ниже которой .menubar вообще скрывается — см. @media (max-width:1023px) выше, дальше идёт .menubar-tablet) реальная ширина хедера начинает не хватать и пункты меню наезжают на кнопку "Демонстрация". Вместо фиксированных 24px — плавно сужающийся gap: 24px на 1440px и шире, линейно падает до 0px точно на 1024px (сам "пол", ниже которого меню всё равно исчезает), не меньше 0 и не больше 24 за пределами этого диапазона (clamp). calc(5.7692vw - 59.0769px) — линейная интерполяция между двумя точками (1024px→0, 1440px→24): наклон 24/(1440-1024)=24/416px, переведённый в vw (100vw = ширина окна) даёт коэффициент 5.7692vw, свободный член подобран так, чтобы при 1024px формула давала ровно 0. */ .menu{ position:absolute; left:calc(50% - var(--menu-side-shift, 0px)); top:50%; transform:translate(-50%,-50%); display:flex; gap:clamp(0px, calc(5.7692vw - 59.0769px), 24px); margin:0; padding:0; list-style:none; font-family:'Source Sans Pro',sans-serif; font-weight:600; font-size:16px; letter-spacing:0.5714px; text-transform:uppercase; color:var(--ink); white-space:nowrap; } /* Состояния пунктов меню (Figma 2898:4297, пункты 2898:5399/normal, 2898:4309/active, 2898:5412/hover): normal — просто текст без рамки; hover (:hover, чистый CSS — обычный курсорный ховер, JS не нужен) — пунктирная обводка-пилюля; active (.is-active, ставится из js/nav-menu.js по текущей группе слайдов) — сплошная обводка-пилюля + маленький треугольник-указатель снизу. border зарезервирован как 2px transparent у ВСЕХ пунктов (box-sizing:border-box) — иначе смена border-width между состояниями (0 → 1px dashed → 2px solid) на 1-2px сдвигала бы текст внутри пилюли при наведении/переключении. Толщина hover-пунктира — РОВНО 1px (правка пользователя 2026-08-05): в коде стояло 2px, как у active, и пунктир читался жирнее, чем в макете. ...И ИМЕННО ПОЭТОМУ РАМКА ЖИВЁТ НА ::before, А НЕ НА САМОМ li. box-sizing:border-box держит внешний размер только когда он ЗАДАН явно, а у этих пилюль ширина определяется контентом — значит border входит в неё слагаемым. Пока hover и active были одинаковой толщины, это ничего не меняло, а стоило сделать пунктир тоньше на 1px — ширина пункта под курсором стала меньше на 2px, и весь ряд дёргался при каждом наведении (поймано пользователем сразу же). Псевдоэлемент лежит поверх, в раскладке не участвует вовсе, и толщина рамки больше ни на что не влияет. padding вырос 16 → 18, чтобы забрать те самые 2px, которые раньше давал зарезервированный border. */ .menu li{ position:relative; box-sizing:border-box; display:flex; align-items:center; justify-content:center; height:40px; padding:0 18px; border-radius:100px; cursor:pointer; } /* Текст пункта лежит внутри настоящей