/* ═══ NIO Anchor Menu — якорное меню ═══ Десктоп: горизонтально. ≤1024: лого слева, активный пункт + стрелка справа, по клику разворачивается список. */ .nio-menu{ width: 100%; background: transparent; /* фон/блюр панели задаёт КОНТЕЙНЕР, в который вставлен виджет */ box-sizing: border-box; } .nio-menu *, .nio-menu *::before, .nio-menu *::after{ box-sizing: border-box; } .nio-menu__inner{ position: relative; display: flex; align-items: center; gap: 48px; padding: 14px 0; } .nio-menu__logo{ flex: 0 0 auto; display: inline-flex; line-height: 0; } .nio-menu__logo img{ width: 64px; height: auto; display: block; } .nio-menu__list{ flex: 1 1 auto; display: flex; align-items: center; gap: 36px; justify-content: flex-start; min-width: 0; /* Пункты не переносятся и не сжимаются (nowrap), поэтому на узком экране длинное меню раздвигало страницу и появлялась горизонтальная прокрутка всего сайта. Раньше её глушила обёртка xStore (.template-container {overflow:hidden}); теперь список сам прокручивается внутри себя — пункты остаются доступными, а страница не разъезжается. Полосу прокрутки прячем: меню листается свайпом, а активный пункт подводит в видимую зону скрипт. */ overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; } .nio-menu__list::-webkit-scrollbar{ display: none; } .nio-menu__item{ color: #8a8a8e; text-decoration: none; white-space: nowrap; transition: color .35s ease; /* плавнее ховер на десктопе */ cursor: pointer; } .nio-menu__item:hover{ color: #111; } .nio-menu__item.is-active{ color: #111; font-weight: 600; } /* На средних экранах сначала ужимаем промежутки — этого хватает, чтобы меню влезало целиком, и прокрутка списка не понадобилась. */ @media (max-width: 1400px){ .nio-menu__inner{ gap: 28px; } .nio-menu__list{ gap: 24px; } } @media (max-width: 1200px){ .nio-menu__inner{ gap: 20px; } .nio-menu__list{ gap: 16px; } } /* триггер (моб.) — скрыт на десктопе */ .nio-menu__toggle{ display: none; align-items: center; gap: 8px; margin-left: auto; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; } .nio-menu__current{ color: #111; white-space: nowrap; } /* насыщенность — контрол current_weight (дефолт обычный) */ .nio-menu__chev{ display: inline-flex; color: #111; transition: transform .25s ease; } .nio-menu__chev svg{ width: 18px; height: 18px; display: block; } /* ── Планшет/моб (≤1024): выпадающий список ─────────────── ВАЖНО про JS-портал: на ≤1024 список выносится в (класс .nio-menu-portal), чтобы его backdrop-filter блюрил страницу, даже если контейнер заблюрен. Поэтому состояние «открыто» — на самом списке (.nio-menu__list.is-open), а не на .nio-menu (он перестаёт быть предком списка). */ @media (max-width: 1024px){ .nio-menu__toggle{ display: inline-flex; } .nio-menu__list{ position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 0; background: var(--nio-mn-panel, #fff); padding: var(--nio-mn-ptop, 6px) var(--nio-mn-padr, 0px) var(--nio-mn-pbot, 14px) var(--nio-mn-padl, 0px); box-shadow: 0 16px 24px rgba(0,0,0,.08); z-index: 60; /* блюр выпадашки — ТОЛЬКО здесь (десктоп без подложки). 0px = нет блюра */ -webkit-backdrop-filter: blur(var(--nio-mn-blur, 0px)); backdrop-filter: blur(var(--nio-mn-blur, 0px)); /* закрытое состояние + анимация (без transform — чтобы не ломать blur) */ opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s; } .nio-menu__list.is-open{ opacity: 1; visibility: visible; pointer-events: auto; } .nio-menu__list .nio-menu__item{ width: 100%; padding: var(--nio-mn-mitem, 12px) 0; white-space: normal; opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .3s ease; } .nio-menu__list.is-open .nio-menu__item{ opacity: 1; transform: translateY(0); } .nio-menu__list.is-open .nio-menu__item:nth-child(2){ transition-delay: .04s; } .nio-menu__list.is-open .nio-menu__item:nth-child(3){ transition-delay: .08s; } .nio-menu__list.is-open .nio-menu__item:nth-child(4){ transition-delay: .12s; } .nio-menu__list.is-open .nio-menu__item:nth-child(5){ transition-delay: .16s; } .nio-menu__list.is-open .nio-menu__item:nth-child(6){ transition-delay: .20s; } .nio-menu__list.is-open .nio-menu__item:nth-child(n+7){ transition-delay: .24s; } .nio-menu.is-open .nio-menu__chev{ transform: rotate(180deg); } } /* ── JS-портал выпадашки (вынос в body, фикс под баром) ──── */ .nio-menu-portal{ position: fixed; left: 0; right: 0; margin: 0 !important; padding: 0 !important; z-index: 9998; } .nio-menu-portal .elementor-element{ margin: 0 !important; padding: 0 !important; } .nio-menu-portal .nio-menu__list{ position: static; /* на месте под баром (позицию задаёт портал) */ left: auto; right: auto; top: auto; } /* блокировка прокрутки страницы под открытым моб-меню (класс на ставит JS) */ html.nio-menu-noscroll, html.nio-menu-noscroll body{ overflow: hidden !important; overscroll-behavior: none; touch-action: none; } /* основное меню сайта, вытесняемое за верх (класс ставит JS) */ .nio-menu-pushed{ transform: translateY(-110%) !important; transition: transform .35s ease !important; /* Тема анимирует появление прилипшей шапки (nio-hdr-down), а анимация перебивает transform — без этого вытесненная шапка возвращалась бы в кадр на время анимации. */ animation: none !important; }