/* * Navbar runtime styles. * * Что здесь и почему именно здесь: * — геометрия шапки (позиция, инсеты, высоты полосы и её содержимого) — только тут. * В Webflow остаётся визуал: цвета, радиус, типографика, тёмный/светлый вариант. * — цифры взяты из макетов: обычная шапка 70px и кнопка 50px (Figma 1974-4106), * фиксированная 60px и кнопка 40px (1700-2138), мобильная 48px (1263-886), * на 1920 обычная 80px и кнопка 60px (1700-1141), инсет от краёв вьюпорта — * 10px во всех. * — правило полосы одно: полоса = кнопка + 10px воздуха сверху и снизу. * Исключение — мобильная в покое: там полоса равна кнопке (48), потому что * прозрачной полосы не видно, а воздух нужен только внутри белой карточки. * — мобильная залипшая полоса — 68px: 48px контента и те же 10px воздуха сверху * и снизу, что у фиксированного десктопа (60/40). В покое полоса прозрачна и * равна контенту (48), поэтому карточки без отступов не видно; зажать 48 и в * залипании — значит прижать кнопку и гамбургер вплотную к краям карточки. * * Два контракта, которые нельзя нарушать: * * 1. Переменные объявлены на , а не на .navbar. #smooth-content шапке СОСЕД, * а не потомок — объявление на .navbar до него не доходит, и отступ молча падает * на фолбэк. Именно так появлялись «плавающие px» на разных страницах: на десктопе * ошибка была ~10px, на мобиле ~29px. * * 2. .navbar не должен получать transform / filter / will-change. Внутри него лежит * .offcanvas-menu с position: fixed, и любое из этих свойств делает .navbar * containing block'ом — всё мобильное меню уезжает ровно на (инсет, инсет). * Так выглядел баг «диагональ ~10px при первом открытии»: hero-launch анимировал * сам .navbar. Анимировать можно .navbar-sticky — он внутри и на fixed-потомка * не влияет. */ html:not(.wf-design-mode) { --navbar-inset: 10px; --navbar-button-height: 48px; --navbar-button-height-sticky: 48px; --navbar-bar-height: 48px; --navbar-bar-height-sticky: 68px; --navbar-radius: 10px; --navbar-duration: 260ms; --navbar-ease: cubic-bezier(0.22, 1, 0.36, 1); /* Сколько места шапка занимает сверху: инсет + полоса + такой же зазор снизу. Считается от НЕсжатой высоты — иначе контент дёргался бы в момент залипания. */ --navbar-offset: calc(var(--navbar-inset) * 2 + var(--navbar-bar-height)); } @media screen and (min-width: 992px) { html:not(.wf-design-mode) { --navbar-button-height: 50px; --navbar-button-height-sticky: 40px; --navbar-bar-height: 70px; --navbar-bar-height-sticky: 60px; } } /* Large Screen. Дизайн-система переключает режим переменных на 1920+ (шрифт навигации 18 → 22px, логотип 172 → 243px по макетам). Высоты шапки шагают вместе с ним, иначе содержимое растёт, а коробка нет: ровно так на 1920 появлялась невидимая лента под залипшей полосой — обёртка кнопки при шрифте 22px выходила выше полосы и перехватывала указатель. Числа из макета покоя на 1920 (Figma 1700-1141): строка навигации и кнопка по 60px. Полоса — те же 10px воздуха сверху и снизу, что на 1440 (70 = 50+20). Макета залипшего состояния на 1920 нет; кнопка взята пропорционально десктопному шагу (50 → 60, значит 40 → 48), чтобы сжатие при залипании было одинаковым на всех ширинах. */ @media screen and (min-width: 1920px) { html:not(.wf-design-mode) { --navbar-button-height: 60px; --navbar-button-height-sticky: 48px; --navbar-bar-height: 80px; --navbar-bar-height-sticky: 68px; } } /* Шапка. Высоту не задаём: бокс должен совпадать с видимой полосой, иначе под ней остаётся невидимая лента, перехватывающая клики по контенту. */ html:not(.wf-design-mode) .navbar.w-nav { position: fixed; inset: var(--navbar-inset) var(--navbar-inset) auto; z-index: 1000; box-sizing: border-box; background-color: transparent; border: 0; transition: color var(--navbar-duration) var(--navbar-ease); } /* Сама полоса: в покое прозрачная, в залипшем состоянии — светлая карточка. Тёмная страница влияет только на цвет текста (вариант компонента), фиксированная версия всегда светлая — это и есть .is-sticky ниже. */ html:not(.wf-design-mode) .navbar.w-nav .navbar-sticky { display: flex; align-items: center; box-sizing: border-box; width: 100%; height: var(--navbar-bar-height); min-height: 0; padding-top: 0; padding-bottom: 0; background-color: transparent; border: 1px solid transparent; border-radius: var(--navbar-radius); transition: height var(--navbar-duration) var(--navbar-ease), background-color var(--navbar-duration) var(--navbar-ease), border-color var(--navbar-duration) var(--navbar-ease); } html:not(.wf-design-mode) .navbar.w-nav.is-sticky .navbar-sticky { height: var(--navbar-bar-height-sticky); background-color: var(--_system-colors---white); border-color: var(--_system-colors---muted); } html:not(.wf-design-mode) .navbar.w-nav .navbar-container { position: relative; z-index: 1; height: auto; min-height: 0; } /* Содержимое полосы. Высота полосы задана жёстко, поэтому дети не должны её распирать: кнопка получает высоту напрямую, а не через подбор вертикальных паддингов. */ html:not(.wf-design-mode) .navbar.w-nav .navbar-sticky .button.button-icon { box-sizing: border-box; height: var(--navbar-button-height); padding-top: 0; padding-bottom: 0; transition: height var(--navbar-duration) var(--navbar-ease), background-color var(--navbar-duration) var(--navbar-ease), border-color var(--navbar-duration) var(--navbar-ease), color var(--navbar-duration) var(--navbar-ease); } html:not(.wf-design-mode) .navbar.w-nav.is-sticky .navbar-sticky .button.button-icon { height: var(--navbar-button-height-sticky); } /* Обёртка кнопки — flex, а не строка текста. Пока она была блоком, кнопка (inline-flex) садилась на базовую линию строки, и строка добирала место под хвостики букв: при шрифте 22px обёртка выходила на 4.5px выше суммы «паддинг + кнопка + паддинг». На 1920 в залипании это давало ленту в 2.25px сверху и снизу от полосы — невидимую, но перехватывающую указатель под белой карточкой. Тот же класс ошибки, что мёртвая полоса под .navbar и переросший пункт меню. Вертикальные паддинги обёртки (10px, заданы в Webflow) — это и есть тот воздух, из которого складывается полоса: 10 + кнопка + 10. На мобиле полоса равна кнопке, поэтому там паддинги снимаются. */ html:not(.wf-design-mode) .navbar.w-nav .navbar-sticky .navigation-buttons { display: flex; align-items: center; } @media screen and (max-width: 991px) { html:not(.wf-design-mode) .navbar.w-nav .navbar-sticky .navigation-buttons { padding-top: 0; padding-bottom: 0; } } /* Пункт с подменю. Плюсик лежит рядом со ссылкой, а не внутри неё: пока он был внутри , клик по нему одновременно раскрывал подменю и уводил на страницу раздела — до подменю было не дотянуться. Раскладка пункта (flex, gap, горизонтальные отступы) живёт в Webflow — классы Navigation Trigger и Menu плюс комбо Menu/In Trigger, снимающее отступы у ссылки внутри триггера. Здесь её нет намеренно: этот файл в Designer не применяется, и пока раскладка стояла тут, в админке плюсик падал под текст и хедер выглядел сломанным. За кодом остаётся только то, что зависит от полосы. Высота полосы задана в px, а вертикальные отступы пункта были в em и росли вместе со шрифтом: на 1920 (шрифт 22px) пункт выходил 77px против 60px залипшей полосы и вылезал за неё на 8.5px сверху и снизу. Под шапкой висела невидимая лента, перехватывавшая наведение и сама открывавшая дропдаун — тот же класс ошибки, что и мёртвая полоса у .navbar. Поэтому вертикальный размер пункта задаёт полоса, а не его собственный шрифт: по сжатой высоте, чтобы пункт помещался в обоих состояниях. */ html:not(.wf-design-mode) .navbar.w-nav .navigation-trigger, html:not(.wf-design-mode) .navbar.w-nav .navigation .menu:not(.in-trigger) { min-height: var(--navbar-bar-height-sticky); } /* Раскрытие подменю — и на десктопе, и в мобильном меню — делает нативный дропдаун Webflow. Здесь только оформление состояния: плюс превращается в крестик. Важно: класс .w--open Webflow вешает на ТОГЛ и на СПИСОК, а не на обёртку .w-dropdown. Селектор от обёртки молча не сработает. Показ и скрытие списка тоже отдано Webflow (.w-dropdown-list.w--open). Прежде у .mob-menu-dropdown стоял display: block, который держал список раскрытым всегда, — из-за этого и появился самописный аккордеон на max-height, воевавший с собственным стилем проекта. */ html:not(.wf-design-mode) .navbar.w-nav .contextual-icon, html:not(.wf-design-mode) .mob-menu-toggle-icon { transition: transform 200ms var(--navbar-ease); } html:not(.wf-design-mode) .navbar.w-nav .navigation-trigger.w--open .contextual-icon, html:not(.wf-design-mode) .mob-menu-toggle.w--open .mob-menu-toggle-icon { transform: rotate(45deg); } /* Цвет содержимого шапки. Тёмная страница красит его через вариант компонента: .navbar получает color: light, а .navigation / .menu / .navigation-link объявлены как color: inherit. Залипшая шапка всегда светлая, значит её содержимое всегда тёмное — независимо от варианта страницы. Это состояние Webflow выразить не может: .is-sticky ставится в рантайме, а правила ниже — потомковые. Раньше они жили embed-блоком внутри компонента; половина того блока была мертва (селектор ссылался на несуществующий атрибут data-wf--site-navbar--variant вместо site-header). */ html:not(.wf-design-mode) .navbar.w-nav.is-sticky .menu, html:not(.wf-design-mode) .navbar.w-nav.is-sticky .contextual-icon, html:not(.wf-design-mode) .navbar.w-nav.is-sticky .brand-svg, html:not(.wf-design-mode) .navbar.w-nav.is-sticky svg { color: var(--_system-colors---dark); } html:not(.wf-design-mode) .navbar.w-nav .menu:hover, html:not(.wf-design-mode) .navbar.w-nav .menu:hover .contextual-icon, html:not(.wf-design-mode) .navbar.w-nav .navigation-trigger:hover, html:not(.wf-design-mode) .navbar.w-nav .navigation-trigger:hover .contextual-icon { color: var(--_system-colors---primary); } /* Шапка вынута из потока, место под неё резервирует контент. */ html:not(.wf-design-mode) #smooth-content { padding-top: var(--navbar-offset); } /* Webflow рисует у .w-nav клиринговые псевдоэлементы под float-раскладку — у нас flex, и они только ломают расчёт высоты полосы. */ .navbar::before, .navbar::after { display: none; } @media (prefers-reduced-motion: reduce) { html:not(.wf-design-mode) .navbar.w-nav, html:not(.wf-design-mode) .navbar.w-nav .navbar-sticky, html:not(.wf-design-mode) .navbar.w-nav .navbar-sticky .button.button-icon { transition-duration: 0ms; } }