/* * SP Mobile Menu — stylesheet * Colours and dimensions are driven by CSS custom properties * injected by sp_mobile_menu_inline_vars() from saved settings. */ /* ── Reset ─────────────────────────────────── */ .sp-omenu__nav, .sp-omenu__nav ul, .sp-omenu__nav li { list-style: none; margin: 0; padding: 0; } /* ── Wrapper ────────────────────────────────── */ .sp-omenu { display: inline-block; } /* ── Burger ─────────────────────────────────── */ .sp-omenu__burger { display: flex; flex-direction: column; justify-content: space-between; width: 26px; height: 18px; background: none; border: none; cursor: pointer; padding: 0; position: relative; z-index: 10001; color: var(--sp-burger-color, currentColor); } /* ── Auto-inject: burger fixed to viewport corner ────── */ /* Applied by JS after burger is moved to */ .sp-omenu__burger--fixed { position: fixed !important; top: var(--sp-burger-top, 20px) !important; right: var(--sp-burger-right, 20px) !important; z-index: 999999 !important; /* above Divi's sticky header at 99999 */ } /* ── Hide Divi's own mobile hamburger + nav ──────────── Class added to by JS when hideDiviNav is on. Covers all Divi header styles and both Divi 4 / 5. */ body.sp-hide-divi-nav .mobile_menu_bar, body.sp-hide-divi-nav .mobile_menu_bar_toggle, body.sp-hide-divi-nav #mobile_menu_bar, body.sp-hide-divi-nav .et_mobile_nav_menu, body.sp-hide-divi-nav #et_mobile_nav_menu, body.sp-hide-divi-nav .et_mobile_menu_container, body.sp-hide-divi-nav .et_pb_menu .et_pb_menu__hamburger, body.sp-hide-divi-nav .et_pb_menu__hamburger, body.sp-hide-divi-nav .et-menu-nav .mobile_menu_bar { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* ── Hide our burger above the breakpoint (JS class) ── */ .sp-omenu--desktop-hidden .sp-omenu__burger { display: none; } /* ── Burger bars ─────────────────────────────── */ .sp-omenu__bar { display: block; width: 100%; height: 2px; background: currentColor; transform-origin: center; transition: transform 0.3s ease, opacity 0.2s ease; } /* Burger → × */ .sp-omenu__burger.is-open .sp-omenu__bar--top { transform: translateY(8.25px) rotate(45deg); } .sp-omenu__burger.is-open .sp-omenu__bar--mid { opacity: 0; transform: scaleX(0); } .sp-omenu__burger.is-open .sp-omenu__bar--bot { transform: translateY(-8.25px) rotate(-45deg); } /* ── Overlay ─────────────────────────────────── */ .sp-omenu__overlay { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(0, 0, 0, var(--sp-overlay-alpha, 0.25)) !important; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; z-index: 999997 !important; margin: 0 !important; padding: 0 !important; } .sp-omenu__overlay.is-open { opacity: 1 !important; pointer-events: auto; } /* ── Panel ───────────────────────────────────── */ .sp-omenu__panel { position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important; bottom: 0 !important; width: var(--sp-panel-width, 380px) !important; height: 100vh !important; /* fallback */ height: 100dvh !important; /* accounts for mobile browser chrome */ min-height: 100vh !important; max-height: none !important; background: var(--sp-panel-bg, #ffffff) !important; transform: translateX(100%) !important; transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1) !important; z-index: 999998 !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 90px 44px 60px !important; box-sizing: border-box !important; margin: 0 !important; float: none !important; display: block !important; clip: unset !important; clip-path: none !important; visibility: visible !important; } .sp-omenu__panel.is-open { transform: translateX(0) !important; } /* ── Top-level links ─────────────────────────── */ .sp-omenu__nav > li > a { display: block; font-family: var(--sp-font-family, inherit); font-size: var(--sp-font-size, 24px); font-weight: 300; color: var(--sp-text-color, #aaaaaa); text-decoration: none; padding: var(--sp-item-spacing, 13px) 0; letter-spacing: 0.02em; border: none; line-height: 1.2; transition: color 0.2s ease; } .sp-omenu__nav > li > a:hover { color: var(--sp-text-hover, #333333); } .sp-omenu__nav > li.current-menu-item > a, .sp-omenu__nav > li.current-menu-ancestor > a { color: var(--sp-text-hover, #333333); } /* ── Sub-menu ────────────────────────────────── */ .sp-omenu__nav .sub-menu { padding: 0 0 8px 2px; } .sp-omenu__nav .sub-menu li a { display: block; font-size: 14px; font-weight: 400; color: var(--sp-text-color, #aaaaaa); opacity: 0.7; text-decoration: none; padding: 5px 0; transition: color 0.2s ease, opacity 0.2s ease; border: none; } .sp-omenu__nav .sub-menu li a:hover { color: var(--sp-text-hover, #333333); opacity: 1; } /* ── Body scroll lock ────────────────────────── */ body.sp-omenu-locked { overflow: hidden; }