/* ========================================================================== Lebensworte Mobile Menu — Structural Styles Overlay is rendered in wp_footer, completely outside

. No z-index hacks needed. Visual styles managed via Elementor controls. ========================================================================== */ /* ── Hamburger Trigger ─────────────────────────────────────────────── */ .elementor-widget-lwmm_mobile_menu .elementor-widget-container { display: flex; align-items: center; padding: 0 !important; margin: 0 !important; height: 100%; line-height: 0; } .lwmm-trigger { display: flex; flex-direction: column; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; flex-shrink: 0; box-sizing: border-box; transition: background-color 0.25s ease; } .lwmm-trigger span { display: block; flex-shrink: 0; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease; transform-origin: center; } /* Hamburger → ✕ JS вычисляет точное смещение и пишет его в data-атрибут кнопки. Здесь только rotate — translateY задаётся через inline style из JS. */ .lwmm-trigger.is-active span:nth-child(1) { transform: translateY(var(--lwmm-offset, 6px)) rotate(45deg); } .lwmm-trigger.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); } .lwmm-trigger.is-active span:nth-child(3) { transform: translateY(calc(-1 * var(--lwmm-offset, 6px))) rotate(-45deg); } /* ── Overlay ─────────────────────────────────────────────────────────── Rendered in wp_footer — lives directly in , no stacking context issues. z-index 9999 puts it above all page content. ─────────────────────────────────────────────────────────────────── */ .lwmm-overlay { position: fixed; top: 0; /* set by JS to header bottom */ left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; flex-direction: column; overflow: hidden; /* Hidden state — NOT display:none, so JS can measure and animate */ visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s; } .lwmm-overlay.is-open { visibility: visible; opacity: 1; pointer-events: all; transform: translateY(0); transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; } /* ── Viewport & Panels ──────────────────────────────────────────────── */ .lwmm-viewport { flex: 1; overflow: hidden; position: relative; } .lwmm-panel { position: absolute; inset: 0; overflow-y: auto; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .lwmm-panel.is-active { transform: translateX(0); pointer-events: all; } .lwmm-panel.slide-out-left { transform: translateX(-28%); pointer-events: none; } /* ── Submenu screen ───────────────────────────────────────────────── */ .lwmm-submenu-panel-screen { position: absolute; inset: 0; overflow-y: auto; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; z-index: 1; background: inherit; } .lwmm-submenu-panel-screen.is-active { transform: translateX(0); pointer-events: all; } /* ── Back button ───────────────────────────────────────────────────── */ .lwmm-back-btn { display: flex; align-items: center; gap: 10px; background: transparent; border: none; border-bottom: 1px solid; cursor: pointer; width: 100%; text-align: left; box-sizing: border-box; } .lwmm-back-icon { font-size: 1.2em; line-height: 1; } /* ── Menu lists ─────────────────────────────────────────────────────── */ .lwmm-menu-list { list-style: none; margin: 0; padding: 0; } .lwmm-menu-item, .lwmm-submenu-item { display: flex; align-items: center; border-bottom: 1px solid; position: relative; } .lwmm-menu-item > a, .lwmm-submenu-item > a { flex: 1; display: block; text-decoration: none; } .lwmm-arrow { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; cursor: pointer; flex-shrink: 0; user-select: none; } /* Hidden data container for submenu items */ .lwmm-submenu-panel { display: none; } /* ── Language Switcher ──────────────────────────────────────────────── */ .lwmm-lang-switcher { margin-top: auto; } .lwmm-lang-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; } .lwmm-lang-item a { text-decoration: none; display: block; } /* Active language item — styled via Elementor "Active" tab control. Both classes supported: WP native + our own fallback. */ .lwmm-lang-item.lwmm-lang-active a, .lwmm-lang-item.current-menu-item a { /* color set by Elementor control selector: .lwmm-overlay[data-widget-id="X"] .lwmm-lang-item.current-menu-item a We also target lwmm-lang-active here as a structural rule */ font-weight: 600; } /* ── CTA ────────────────────────────────────────────────────────────── */ .lwmm-cta-wrap { flex-shrink: 0; border-top: 1px solid; } .lwmm-cta-btn { display: flex; align-items: center; justify-content: center; width: 100%; text-decoration: none; box-sizing: border-box; transition: background-color 0.25s ease, color 0.25s ease; } /* ── Body scroll lock ───────────────────────────────────────────────── */ body.lwmm-open { overflow: hidden; } /* ── Stagger animation ──────────────────────────────────────────────── */ .lwmm-overlay.is-open .lwmm-menu-item { animation: lwmmFadeUp 0.35s both; } .lwmm-overlay.is-open .lwmm-menu-item:nth-child(1) { animation-delay: 0.05s; } .lwmm-overlay.is-open .lwmm-menu-item:nth-child(2) { animation-delay: 0.09s; } .lwmm-overlay.is-open .lwmm-menu-item:nth-child(3) { animation-delay: 0.13s; } .lwmm-overlay.is-open .lwmm-menu-item:nth-child(4) { animation-delay: 0.17s; } .lwmm-overlay.is-open .lwmm-menu-item:nth-child(5) { animation-delay: 0.21s; } .lwmm-overlay.is-open .lwmm-menu-item:nth-child(6) { animation-delay: 0.25s; } .lwmm-overlay.is-open .lwmm-lang-switcher { animation: lwmmFadeUp 0.35s 0.28s both; } @keyframes lwmmFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ── Misc ───────────────────────────────────────────────────────────── */ .lwmm-no-menu { padding: 24px; font-size: 12px; opacity: 0.6; } .lwmm-trigger:focus-visible, .lwmm-back-btn:focus-visible, .lwmm-cta-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }