/* ═══ NIO Mobile Menu ═══════════════════════════════════════ Гамбургер → полноэкранное меню. Разделы (+/−) → раскрывающиеся панели. Пункт субменю = логотип+слоган; активный (по текущей странице): красная стрелка слева + линия #00bebe снизу. Цвета через CSS-переменные. Оверлей JS выносит в (чтобы transform шапки не «зажимал» fixed); поэтому переменные дублируются на .nio-mm И на .nio-mm__overlay, а контент стилизуется через селектор .nio-mm__overlay (он всегда предок контента). */ .nio-mm, .nio-mm__overlay{ --mm-title: #111113; --mm-toggle: #111113; --mm-slogan: #9a9aa0; --mm-arrow: #e00020; --mm-line: #00bebe; --mm-divider: rgba(0,0,0,.1); --mm-heading: #111113; --mm-plink: #111113; --mm-logo-h: 34px; --mm-logo-w: 120px; --mm-gutter: 30px; --mm-burger: #111113; --mm-burger-w: 26px; --mm-bg: #fff; --mm-close: #111113; --mm-toplogo-h: 26px; --mm-pad: 24px; --mm-dark: #111113; --mm-edge: 0px; } .nio-mm{ display: block; width: 100%; line-height: 1; } /* ── Свёрнутая плашка: логотип по центру, гамбургер сбоку (grid — без дробных сдвигов) ── */ .nio-mm__plate{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: var(--mm-burger-w); } .nio-mm__plate-logo{ grid-column: 2; grid-row: 1; justify-self: center; display: inline-flex; align-items: center; text-decoration: none; } /* ── Гамбургер (резкие линии 1px) ── Без transform translateY(-50%): центрируем grid'ом, линии — по целым пикселям. */ .nio-mm__burger{ position: relative; width: var(--mm-burger-w); height: 15px; padding: 0; margin: 0; background: none; border: 0; cursor: pointer; } .nio-mm--bl .nio-mm__burger{ grid-column: 1; grid-row: 1; justify-self: start; margin-left: var(--mm-edge); } .nio-mm--br .nio-mm__burger{ grid-column: 3; grid-row: 1; justify-self: end; margin-right: var(--mm-edge); } .nio-mm__burger span{ position: absolute; left: 0; right: 0; height: 1px; background: var(--mm-burger); transition: background .3s ease; } .nio-mm__burger span:nth-child(1){ top: 0; } .nio-mm__burger span:nth-child(2){ top: 7px; } .nio-mm__burger span:nth-child(3){ top: 14px; } /* при прокрутке под шапкой появляется белая подложка → гамбургер чернеет */ .nio-mm.is-scrolled .nio-mm__burger span{ background: var(--mm-dark); } /* ── Полноэкранная панель ── */ .nio-mm__overlay{ /* Выше шапки (100000): иначе шапка ложится поверх открытого меню и перехватывает нажатия по крестику. Тема NIO задаёт то же значение от своей настройки слоя шапки; здесь — запасное без темы. */ position: fixed; inset: 0; z-index: 100001; background: var(--mm-bg); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px var(--mm-pad) 48px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .3s ease, transform .3s ease, visibility .3s ease; } .nio-mm__overlay.is-open{ opacity: 1; visibility: visible; transform: none; } /* непрозрачная верхняя плашка: прокручиваемый список уходит ПОД неё, а не за текст. Высоту задаёт JS (высота шапки), лого/крестик лежат сверху (z-index выше). */ .nio-mm__topbar{ position: fixed; top: 0; left: 0; right: 0; height: 0; background: var(--mm-bg); z-index: 1; pointer-events: none; } /* крестик — на месте гамбургера (координаты ставит JS), тонкие линии 1px */ .nio-mm__close{ position: fixed; z-index: 3; display: block; width: var(--mm-burger-w); height: var(--mm-burger-w); padding: 0; background: none; border: 0; cursor: pointer; } .nio-mm__close span{ position: absolute; left: 50%; top: 50%; width: 100%; height: 1px; background: var(--mm-close); } .nio-mm__close span:nth-child(1){ transform: translate(-50%,-50%) rotate(45deg); } .nio-mm__close span:nth-child(2){ transform: translate(-50%,-50%) rotate(-45deg); } /* логотип открытого меню: fixed, координаты по лого плашки (JS) → без прыжка */ .nio-mm__ovlogo{ position: fixed; z-index: 3; display: flex; align-items: center; } /* Логотип в шапке: одинаковая высота в плашке и в открытом меню */ .nio-mm .nio-mm__toplogo, .nio-mm__overlay .nio-mm__toplogo{ height: var(--mm-toplogo-h) !important; width: auto !important; max-width: none !important; display: block; transition: filter .3s ease; } /* в открытом меню лого чёрное (фон панели светлый) */ .nio-mm__overlay .nio-mm__toplogo{ filter: brightness(0); } /* при прокрутке (белая подложка) лого в плашке тоже чернеет */ .nio-mm.is-scrolled .nio-mm__toplogo{ filter: brightness(0); } /* ── Список ── */ .nio-mm__list{ list-style: none; margin: 0; padding: 0; } .nio-mm__item + .nio-mm__item{ border-top: 1px solid var(--mm-divider); } /* Раздел (parent) */ .nio-mm__head{ display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 0; background: none; border: 0; margin: 0; text-align: left; cursor: pointer; font: inherit; } .nio-mm__overlay .nio-mm__title{ color: var(--mm-title); font-size: 20px; font-weight: 600; line-height: 1.2; } .nio-mm__overlay .nio-mm__item--link > .nio-mm__toplink{ display: block; padding: 16px 0; color: var(--mm-title); font-size: 20px; font-weight: 600; line-height: 1.2; text-decoration: none; } /* значок +/− */ .nio-mm__toggle{ position: relative; width: 16px; height: 16px; flex: 0 0 16px; } .nio-mm__toggle::before, .nio-mm__toggle::after{ content: ""; position: absolute; background: var(--mm-toggle); } .nio-mm__toggle::before{ left: 1px; right: 1px; top: 50%; height: 1px; transform: translateY(-50%); } .nio-mm__toggle::after { top: 1px; bottom: 1px; left: 50%; width: 1px; transform: translateX(-50%); transition: opacity .25s ease; } .nio-mm__item--parent.is-open .nio-mm__toggle::after{ opacity: 0; } /* панель субменю (аккордеон, высоту двигает JS) */ .nio-mm__panel{ overflow: hidden; max-height: 0; transition: max-height .35s ease; } .nio-mm__panel-inner{ padding: 4px 0 18px; } /* Пункт субменю */ .nio-mm__sub{ position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 0 14px var(--mm-gutter); text-decoration: none; } /* подчёркивание активного — 1px, через ::after (не border, чтобы тема не сбросила); начинается от левого края лого/фото (после гуттера стрелки), заканчивается справа */ .nio-mm__sub.is-active::after{ content: ""; position: absolute; left: var(--mm-gutter); right: 0; bottom: 0; height: 1px; background: var(--mm-line); } /* логотип: вписывается в высоту И ширину (что упрётся первым); !important — перебить тему */ .nio-mm__overlay .nio-mm__logo{ height: auto !important; width: auto !important; max-height: var(--mm-logo-h) !important; max-width: var(--mm-logo-w) !important; display: block; flex: 0 0 auto; object-fit: contain; } .nio-mm__overlay .nio-mm__slogan{ color: var(--mm-slogan); font-size: 13px; line-height: 1.3; } /* красная стрелка слева (видна только у активного) — inline SVG, тонкая (~1px) */ .nio-mm__arrow{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; opacity: 0; } .nio-mm__arrow svg{ display: block; width: 18px; height: 18px; fill: none; stroke: var(--mm-arrow); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .nio-mm__sub.is-active .nio-mm__arrow{ opacity: 1; } /* Текстовые ссылки внутри субменю */ .nio-mm__overlay .nio-mm__heading{ margin: 14px 0 4px; font-size: 14px; font-weight: 700; color: var(--mm-heading); } .nio-mm__overlay .nio-mm__plink{ display: block; padding: 10px 0; color: var(--mm-plink); text-decoration: none; font-size: 15px; } /* блокировка прокрутки фона при открытом меню */ html.nio-mm-lock, html.nio-mm-lock body{ overflow: hidden !important; }