/* ========================================================= BlackOwls Foundation — Header + Navigation File: assets/css/modules/30-header.css Цель: - сохранить референсный "пилюльный" хедер (объём/цвета/брендинг) - WP Navigation Block: desktop dropdown + mobile offcanvas - без кругов ада: селекторы должны попадать всегда Важный факт: - WP block theme иногда меняет обёртки хедера, и .bo-header может внезапно оказаться НЕ тем контейнером, где лежит навигация. - Поэтому есть fallback: ".wp-site-blocks > header" (возвращает пилюлю, даже если WP пересобрал DOM) ПРЕДУПРЕЖДЕНИЯ: - Стили About/Contact завязаны на href-слаги ("about", "contact"). При переименовании страниц — обновить селекторы вручную. - Fallback :nth-last-child(-n+2) ломается при изменении порядка пунктов меню. При правках nav — проверить оба сценария. ========================================================= */ /* ========================================================= TOKENS / TUNING (все CSS-переменные хедера — в одном блоке) ========================================================= */ :root { --bo-container: var(--wp--style--global--content-size); /* header pill */ --bo-header-radius: 16px; --bo-header-pad-y: 16px; --bo-header-pad-x: 24px; /* desktop menu */ --bo-nav-font: 20px; --bo-nav-gap: 26px; /* mobile panel */ --bo-mobile-panel-w: 520px; --bo-mobile-overlay-pad: 18px; --bo-mobile-panel-max: min( var(--bo-mobile-panel-w), calc(100vw - (var(--bo-mobile-overlay-pad) * 2)) ); --bo-mobile-panel-radius: 22px; --bo-mobile-panel-pad-top: 20px; --bo-mobile-panel-pad-x: 16px; --bo-mobile-panel-pad-bottom: 16px; --bo-mobile-gap: 14px; /* tiles */ --bo-tile-font: 18px; --bo-tile-pad-y: 14px; --bo-tile-pad-x: 16px; --bo-tile-radius: 18px; /* section pills (Residential / Business / About / Contact) */ --bo-section-font: 13px; --bo-section-letter: .10em; --bo-section-pad-y: 12px; --bo-section-pad-x: 14px; /* close button */ --bo-close-size: 40px; --bo-close-bg: rgba(109,223,255,.14); --bo-close-border: rgba(109,223,255,.30); --bo-close-icon: rgba(255,255,255,.92); } @keyframes bo-menu-glow { 0%, 100% { border-color: #1a404f; box-shadow: 0 0 5px rgba(26,64,79,.30); } 50% { border-color: #2a6177; box-shadow: 0 0 15px rgba(26,64,79,.60); } } /* ========================================================= OUTER WRAPPER — сброс стилей родительского
========================================================= */ /* When theme.json uses useRootPaddingAwareAlignments, the root .wp-site-blocks gets horizontal padding. The header wrapper escapes it with negative margins so .bo-header continues to use the full viewport width as its reference. --wp--style--root--padding-* variables are generated by WP from theme.json styles.spacing.padding. */ .wp-site-blocks > header:has(.bo-header) { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; overflow: visible !important; /* escape root padding */ margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px)) !important; margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px)) !important; width: calc( 100% + var(--wp--style--root--padding-left, 0px) + var(--wp--style--root--padding-right, 0px) ) !important; max-width: none !important; /* stacking — хедер выше контента страницы */ position: relative !important; z-index: 500 !important; } /* ========================================================= HEADER SHELL (pill) ========================================================= */ :where(.bo-header, .wp-site-blocks > header) { max-width: var(--bo-container); width: calc(100% - 80px); margin: 20px auto 40px; padding: var(--bo-header-pad-y) var(--bo-header-pad-x); background: linear-gradient( 180deg, rgba(10, 54, 68, .92) 0%, rgba( 6, 35, 45, .92) 100% ) !important; border: 1px solid rgba(255,255,255,.06) !important; border-radius: var(--bo-header-radius); box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(109,223,255,.08) inset, inset 0 1px 0 rgba(255,255,255,.06); overflow: visible; position: relative; z-index: 100; isolation: isolate; } :where(.bo-header, .wp-site-blocks > header) * { box-sizing: border-box; } .wp-block-site-title, .wp-block-site-title a { font-family: "Roboto Condensed","Roboto",sans-serif !important; font-weight: 400 !important; font-size: var(--bo-nav-font) !important; } /* ========================================================= DESKTOP NAV — top-level ========================================================= */ :where(.bo-header, .wp-site-blocks > header) .wp-block-navigation { position: relative; z-index: 200; } :where(.bo-header, .wp-site-blocks > header) .wp-block-navigation__container { gap: var(--bo-nav-gap); } :where(.bo-header, .wp-site-blocks > header) .wp-block-navigation a { color: #fff; opacity: .92; text-decoration: none; font-size: var(--bo-nav-font) !important; font-weight: 500 !important; letter-spacing: .01em; transition: opacity .15s ease; } :where(.bo-header, .wp-site-blocks > header) .wp-block-navigation a:hover { opacity: 1; } /* ========================================================= DESKTOP DROPDOWN ========================================================= */ :where(.bo-header, .wp-site-blocks > header) .wp-block-navigation__submenu-container { background: rgba(10, 40, 50, .92) !important; border: 1px solid rgba(109,223,255,.35) !important; border-radius: 14px !important; padding: 12px 10px !important; min-width: 220px; box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(109,223,255,.15) inset !important; backdrop-filter: blur(10px); top: calc(100% + 2px) !important; z-index: 99999 !important; /* Анимация */ opacity: 0; transform: translateY(-4px); transition: opacity .18s ease, transform .18s ease; pointer-events: none; /* Невидимый мост — расширяем зону перехвата вверх */ margin-top: -8px !important; padding-top: 20px !important; } :where(.bo-header, .wp-site-blocks > header) .wp-block-navigation-item.has-child:hover .wp-block-navigation__submenu-container, :where(.bo-header, .wp-site-blocks > header) .wp-block-navigation-item.bo-dropdown-open .wp-block-navigation__submenu-container { opacity: 1 !important; transform: translateY(0) !important; pointer-events: all !important; } :where(.bo-header, .wp-site-blocks > header) .wp-block-navigation__submenu-container .wp-block-navigation-item__content { display: block; color: rgba(255,255,255,.92) !important; padding: 10px 12px !important; border-radius: 12px !important; font-family: "Roboto","sans-serif"; font-size: 14px; line-height: 1.2; background: transparent !important; text-decoration: none !important; transition: background .15s ease, box-shadow .15s ease; } :where(.bo-header, .wp-site-blocks > header) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: rgba(109,223,255,.10) !important; box-shadow: 0 0 0 1px rgba(109,223,255,.35), 0 0 18px rgba(109,223,255,.18); } /* ========================================================= POINTER: FINE — FORCE DESKTOP NAV (zoom-proof) На десктопе браузерный zoom уменьшает эффективную ширину viewport в CSS px → WP переключает навигацию на бургер. pointer:fine = мышь / трекпад (не тачскрин) → всегда показываем горизонтальную навигацию, бургер скрываем. На реальном мобильном телефоне pointer:coarse → этот блок не применяется, бургер работает как обычно. ========================================================= */ @media (pointer: fine) { /* 1. Скрыть бургер и крестик */ :where(.bo-header, .wp-site-blocks > header) .wp-block-navigation__responsive-container-open, :where(.bo-header, .wp-site-blocks > header) .wp-block-navigation__responsive-container-close, :where(.bo-header, .wp-site-blocks > header) .wp-block-navigation__responsive-dialog__close { display: none !important; } /* 2. Responsive container — вытащить из offcanvas в inline-flow. WP рендерит его как fixed overlay ниже своего breakpoint. Полностью сбрасываем позиционирование и оформление. */ :where(.bo-header, .wp-site-blocks > header) .wp-block-navigation__responsive-container, :where(.bo-header, .wp-site-blocks > header) .wp-block-navigation__responsive-container.is-menu-open { display: flex !important; flex-direction: row !important; position: static !important; inset: auto !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; width: auto !important; height: auto !important; max-height: none !important; overflow: visible !important; z-index: auto !important; backdrop-filter: none !important; } /* 3. Content wrapper — тоже inline row */ :where(.bo-header, .wp-site-blocks > header) .wp-block-navigation__responsive-container-content, :where(.bo-header, .wp-site-blocks > header) .wp-block-navigation__responsive-dialog__content { display: flex !important; flex-direction: row !important; position: static !important; width: auto !important; height: auto !important; max-height: none !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; backdrop-filter: none !important; } /* 4. Nav container — горизонтальная строка ссылок */ :where(.bo-header, .wp-site-blocks > header) .wp-block-navigation__container { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: clamp(12px, 1.8vw, var(--bo-nav-gap)) !important; padding: 0 !important; list-style: none !important; } /* 5. Убрать маркеры списка если WP вдруг рисует их */ :where(.bo-header, .wp-site-blocks > header) .wp-block-navigation__container li { list-style: none !important; margin: 0 !important; padding: 0 !important; } /* 6. Шрифт ссылок — плавно сжимается при zoom */ :where(.bo-header, .wp-site-blocks > header) .wp-block-navigation a { font-size: clamp(16px, 1.6vw, var(--bo-nav-font)) !important; white-space: nowrap !important; } } /* ========================================================= MOBILE OFFCANVAS — бургер-кнопка (применяется только при pointer:coarse, т.е. тачскрин) ========================================================= */ :where(.bo-header, .wp-site-blocks > header) .wp-block-navigation__responsive-container-open { color: #fff; opacity: .92; } :where(.bo-header, .wp-site-blocks > header) .wp-block-navigation__responsive-container-open:hover { opacity: 1; } /* Overlay (два режима WP: container и dialog) */ .wp-block-navigation__responsive-container.is-menu-open, dialog.wp-block-navigation__responsive-dialog[open] { position: fixed !important; inset: 0 !important; z-index: 999999 !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: center !important; padding: var(--bo-mobile-overlay-pad) !important; background: rgba(0,0,0,.82) !important; backdrop-filter: blur(14px) !important; } /* Panel */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation__responsive-container-content, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation__responsive-dialog__content { display: flex !important; flex-direction: column !important; position: relative !important; width: var(--bo-mobile-panel-max) !important; max-height: calc(100vh - (var(--bo-mobile-overlay-pad) * 2)) !important; overflow: visible !important; margin: 0 auto !important; padding: var(--bo-mobile-panel-pad-top) var(--bo-mobile-panel-pad-x) var(--bo-mobile-panel-pad-bottom) !important; background: #071217 !important; border: 1px solid #1a404f !important; border-radius: var(--bo-mobile-panel-radius) !important; box-shadow: 0 22px 70px rgba(0,0,0,.70), inset 0 0 30px rgba(26,64,79,.15); animation: bo-menu-glow 3s ease-in-out infinite; } /* ========================================================= LIST CONTAINER ========================================================= */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation__container { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: var(--bo-mobile-gap) !important; padding: 0 !important; overflow-y: auto !important; max-height: none !important; } /* Отменяем absolute-позицию submenu внутри offcanvas */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation__submenu-container { position: static !important; transform: none !important; inset: auto !important; width: 100% !important; margin: 10px 0 0 !important; padding: 10px !important; background: rgba(0,0,0,.18) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 18px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important; display: flex !important; flex-direction: column !important; gap: 10px !important; } /* ========================================================= SECTION HEADERS — Residential / Business ========================================================= */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation-item.has-child > .wp-block-navigation-item__content { font-size: var(--bo-section-font) !important; letter-spacing: var(--bo-section-letter) !important; text-transform: uppercase !important; color: #a8c6d3 !important; opacity: 1.0 !important; padding: var(--bo-section-pad-y) var(--bo-section-pad-x) !important; border-radius: 999px !important; background: transparent !important; border: 1px solid #1a404f !important; width: 100% !important; display: flex !important; align-items: center !important; gap: 10px !important; animation: bo-menu-glow 3s ease-in-out infinite; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content::after, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation-item.has-child > .wp-block-navigation-item__content::after { content: none !important; } /* ========================================================= TILES — обычные nav-ссылки ========================================================= */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation-item__content { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; color: rgba(255,255,255,.95) !important; font-family: "Roboto","sans-serif" !important; font-size: var(--bo-tile-font) !important; line-height: 1.25 !important; padding: var(--bo-tile-pad-y) var(--bo-tile-pad-x) !important; border-radius: var(--bo-tile-radius) !important; background: #112a34 !important; border: 1px solid #1a3845 !important; position: relative !important; overflow: hidden !important; transition: background .15s ease, border-color .15s ease; } /* Cyan left stripe */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation-item__content::before { content: '' !important; position: absolute !important; left: 0 !important; top: 25% !important; height: 50% !important; width: 3px !important; background: #00b8cc !important; border-radius: 0 4px 4px 0 !important; box-shadow: 0 0 8px rgba(0,184,204,.50) !important; } /* Стрелка › */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation-item__content::after { content: "\203A" !important; opacity: .50 !important; font-size: 22px !important; line-height: 1 !important; width: 18px !important; text-align: center !important; flex-shrink: 0 !important; margin-left: 14px !important; color: #7d9ca9 !important; } /* Hover */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation-item__content:hover { background: #153440 !important; border-color: #1e4a5a !important; } /* Sublinks */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: calc(var(--bo-tile-font) - 1px) !important; border-radius: 16px !important; padding: 12px 14px !important; } /* ========================================================= ABOUT / CONTACT — стиль section pill ВНИМАНИЕ: таргетинг по href-слагу. При переименовании страниц — обновить эти селекторы. Fallback :nth-last-child(-n+2) — проверять при изменении порядка или количества пунктов меню. ========================================================= */ /* Primary — по href */ .wp-block-navigation__responsive-container.is-menu-open a[href*="about"], .wp-block-navigation__responsive-container.is-menu-open a[href*="contact"], dialog.wp-block-navigation__responsive-dialog[open] a[href*="about"], dialog.wp-block-navigation__responsive-dialog[open] a[href*="contact"] { font-size: var(--bo-section-font) !important; letter-spacing: var(--bo-section-letter) !important; text-transform: uppercase !important; color: #a8c6d3 !important; opacity: 1.0 !important; padding: var(--bo-section-pad-y) var(--bo-section-pad-x) !important; border-radius: 999px !important; background: transparent !important; border: 1px solid #1a404f !important; width: 100% !important; justify-content: flex-start !important; animation: bo-menu-glow 3s ease-in-out infinite; overflow: hidden !important; } .wp-block-navigation__responsive-container.is-menu-open a[href*="about"]::before, .wp-block-navigation__responsive-container.is-menu-open a[href*="contact"]::before, dialog.wp-block-navigation__responsive-dialog[open] a[href*="about"]::before, dialog.wp-block-navigation__responsive-dialog[open] a[href*="contact"]::before { content: '' !important; position: absolute !important; left: 0 !important; top: 25% !important; height: 50% !important; width: 3px !important; background: #00b8cc !important; border-radius: 0 4px 4px 0 !important; box-shadow: 0 0 8px rgba(0,184,204,.50) !important; } .wp-block-navigation__responsive-container.is-menu-open a[href*="about"]::after, .wp-block-navigation__responsive-container.is-menu-open a[href*="contact"]::after, dialog.wp-block-navigation__responsive-dialog[open] a[href*="about"]::after, dialog.wp-block-navigation__responsive-dialog[open] a[href*="contact"]::after { content: none !important; } /* Fallback — последние 2 пункта без дочерних */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.has-child):nth-last-child(-n+2) > .wp-block-navigation-item__content, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation__container > .wp-block-navigation-item:not(.has-child):nth-last-child(-n+2) > .wp-block-navigation-item__content { font-size: var(--bo-section-font) !important; letter-spacing: var(--bo-section-letter) !important; text-transform: uppercase !important; color: #a8c6d3 !important; opacity: 1.0 !important; padding: var(--bo-section-pad-y) var(--bo-section-pad-x) !important; border-radius: 999px !important; background: transparent !important; border: 1px solid #1a404f !important; width: 100% !important; justify-content: flex-start !important; animation: bo-menu-glow 3s ease-in-out infinite; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.has-child):nth-last-child(-n+2) > .wp-block-navigation-item__content::before, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation__container > .wp-block-navigation-item:not(.has-child):nth-last-child(-n+2) > .wp-block-navigation-item__content::before { content: '' !important; position: absolute !important; left: 0 !important; top: 25% !important; height: 50% !important; width: 3px !important; background: #00b8cc !important; border-radius: 0 4px 4px 0 !important; box-shadow: 0 0 8px rgba(0,184,204,.50) !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.has-child):nth-last-child(-n+2) > .wp-block-navigation-item__content::after, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation__container > .wp-block-navigation-item:not(.has-child):nth-last-child(-n+2) > .wp-block-navigation-item__content::after { content: none !important; } /* ========================================================= CLOSE BUTTON — мобильный крестик ========================================================= */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation__responsive-container-close, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation__responsive-dialog__close { position: absolute !important; top: 17px !important; right: 32px !important; left: auto !important; bottom: auto !important; inset-inline-start: auto !important; inset-inline-end: 32px !important; inset-block-start: 17px !important; inset-block-end: auto !important; transform: none !important; translate: none !important; margin: 0 !important; float: none !important; width: 42px !important; height: 42px !important; min-width: 42px !important; max-width: 42px !important; border-radius: 999px !important; background: #0d222b !important; border: 1px solid #1a404f !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 0 15px rgba(26,64,79,.40) !important; z-index: 9999999 !important; cursor: pointer !important; grid-column: unset !important; grid-row: unset !important; order: unset !important; transition: background .15s ease !important; } /* Первый section header — отступ справа под крестик */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.has-child:first-child > .wp-block-navigation-item__content, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation__container > .wp-block-navigation-item.has-child:first-child > .wp-block-navigation-item__content { padding-right: 24px !important; width: calc(100% - 82px) !important; max-width: calc(100% - 82px) !important; } /* Иконка крестика */ .wp-block-navigation__responsive-container-close svg, .wp-block-navigation__responsive-container-close svg *, .wp-block-navigation__responsive-dialog__close svg, .wp-block-navigation__responsive-dialog__close svg * { stroke: #00b8cc !important; fill: #00b8cc !important; color: #00b8cc !important; } /* Hover крестика */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation__responsive-container-close:hover, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation__responsive-dialog__close:hover { background: #112a34 !important; border-color: #2a6177 !important; } /* ========================================================= RESPONSIVE — Mobile ≤ 720px ========================================================= */ @media (max-width: 720px) { /* На мобиле outer wrapper не должен убегать за viewport. Сбрасываем отрицательные margin и calc-ширину из escape-блока. */ .wp-site-blocks > header:has(.bo-header) { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; } :where(.bo-header, .wp-site-blocks > header) { width: calc(100% - 32px) !important; max-width: none !important; margin: 16px auto 28px; padding: 14px 18px; border-radius: 18px; } } @media (max-width: 420px) { :root { --bo-tile-font: 16.5px; --bo-mobile-gap: 12px; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation__responsive-container-content, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation__responsive-dialog__content { padding: 16px 14px 14px !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation-item__content { border-radius: 16px !important; } } /* ========================================================= RESPONSIVE — Tablet / Desktop ≥ 721px Offcanvas: панель 280px, прижата вправо под бургер ========================================================= */ @media (min-width: 721px) { /* Крестик — скрыть */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation__responsive-container-close, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation__responsive-dialog__close { display: none !important; } /* Overlay */ .wp-block-navigation__responsive-container.is-menu-open, dialog.wp-block-navigation__responsive-dialog[open] { justify-content: flex-end !important; align-items: flex-start !important; padding: 8px 24px !important; background: rgba(0,0,0,.60) !important; } /* Панель */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation__responsive-container-content, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation__responsive-dialog__content { width: 280px !important; max-width: 280px !important; min-width: 0 !important; margin: 0 !important; overflow: visible !important; padding: 16px !important; border-radius: 18px !important; background: rgba(8, 38, 50, .97) !important; border: 1px solid rgba(109,223,255,.28) !important; box-shadow: 0 20px 60px rgba(0,0,0,.70), 0 0 0 1px rgba(109,223,255,.12) inset, inset 0 1px 0 rgba(255,255,255,.06) !important; backdrop-filter: blur(20px) !important; } /* Список */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation__container { gap: 8px !important; padding-top: 56px !important; max-height: calc(100vh - 80px) !important; overflow-y: auto !important; } /* Section headers — компактнее */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation-item.has-child > .wp-block-navigation-item__content { font-size: 11px !important; padding: 8px 12px !important; } /* Tiles — компактнее */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation-item__content { font-size: 14px !important; padding: 10px 12px !important; border-radius: 12px !important; } /* Sublinks */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 13px !important; padding: 9px 12px !important; border-radius: 10px !important; } /* Submenu */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation__submenu-container { margin: 6px 0 0 !important; padding: 6px !important; gap: 6px !important; border-radius: 14px !important; } /* Сброс padding-right (крестика нет) */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.has-child:first-child > .wp-block-navigation-item__content, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation__container > .wp-block-navigation-item.has-child:first-child > .wp-block-navigation-item__content { padding-right: 12px !important; } /* About / Contact — компактнее */ .wp-block-navigation__responsive-container.is-menu-open a[href*="about"], .wp-block-navigation__responsive-container.is-menu-open a[href*="contact"], dialog.wp-block-navigation__responsive-dialog[open] a[href*="about"], dialog.wp-block-navigation__responsive-dialog[open] a[href*="contact"] { padding: 8px 12px !important; font-size: 11px !important; } /* Fallback: последние 2 пункта без дочерних */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.has-child):nth-last-child(-n+2) > .wp-block-navigation-item__content, dialog.wp-block-navigation__responsive-dialog[open] .wp-block-navigation__container > .wp-block-navigation-item:not(.has-child):nth-last-child(-n+2) > .wp-block-navigation-item__content { padding: 8px 12px !important; font-size: 11px !important; } /* Desktop nav-bar — устойчив к зуму */ :where(.bo-header, .wp-site-blocks > header) .wp-block-navigation__container { flex-wrap: nowrap !important; gap: clamp(12px, 1.8vw, var(--bo-nav-gap)) !important; } :where(.bo-header, .wp-site-blocks > header) .wp-block-navigation a { font-size: clamp(16px, 1.6vw, var(--bo-nav-font)) !important; white-space: nowrap !important; } } /* ========================================================= STACKING FIX Контент страницы не перекрывает дропдаун хедера. ========================================================= */ .wp-site-blocks > main, .wp-site-blocks > .wp-block-group:not(:has(.bo-header)):not(:has(.wp-block-navigation)) { position: relative; z-index: 1;