/* ================================================= Serenity Hamburger Menu Widget - Styles TELEPORT-AWARE: All nav/overlay rules use dual selectors to work both BEFORE and AFTER the JS teleports them to . Wrapper selector = before teleport (in DOM) body > .class = after teleport (in ) ================================================= */ * { box-sizing: border-box; } .serenity-hamburger-menu-wrapper { position: static; overflow: visible; width: 100%; } /* Elementor section/header wrappers must not clip */ .elementor-section .serenity-hamburger-menu-wrapper, .elementor-widget-container .serenity-hamburger-menu-wrapper, .elementor-location-header .serenity-hamburger-menu-wrapper { position: static; overflow: visible; } /* ============================================= MENU ICON BUTTON ============================================= */ .serenity-hamburger-menu-wrapper { position: static; overflow: visible; width: 100%; /* Icon alignment controlled by text-align from Elementor control */ } /* Elementor section/header wrappers must not clip */ .elementor-section .serenity-hamburger-menu-wrapper, .elementor-widget-container .serenity-hamburger-menu-wrapper, .elementor-location-header .serenity-hamburger-menu-wrapper { position: static; overflow: visible; } .serenity-hamburger-menu-wrapper .menu-btn { position: relative !important; background-color: transparent; border: none; cursor: pointer; display: inline-flex !important; align-items: center; justify-content: center; padding: 0; z-index: 999999 !important; transition: transform 0.3s ease; visibility: visible !important; opacity: 1 !important; /* Icon positioning inherited from parent text-align */ } .serenity-hamburger-menu-wrapper .menu-btn:hover { transform: scale(1.05); } .serenity-hamburger-menu-wrapper .menu-btn svg { width: 50px; height: 50px; display: block !important; visibility: visible !important; } /* SVG Line Animation */ .serenity-hamburger-menu-wrapper .menu-btn .line { fill: none; stroke: #333; stroke-width: 6; transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke 400ms ease; } .serenity-hamburger-menu-wrapper .menu-btn:not(.opened) .line { stroke: #333; } .serenity-hamburger-menu-wrapper .menu-btn.opened .line { stroke: #333; } .serenity-hamburger-menu-wrapper .menu-btn .line1 { stroke-dasharray: 60 207; stroke-width: 6; } .serenity-hamburger-menu-wrapper .menu-btn .line2 { stroke-dasharray: 60 60; stroke-width: 6; } .serenity-hamburger-menu-wrapper .menu-btn .line3 { stroke-dasharray: 60 207; stroke-width: 6; } .serenity-hamburger-menu-wrapper .menu-btn.opened .line1 { stroke-dasharray: 90 207; stroke-dashoffset: -134; stroke-width: 6; } .serenity-hamburger-menu-wrapper .menu-btn.opened .line2 { stroke-dasharray: 1 60; stroke-dashoffset: -30; stroke-width: 6; } .serenity-hamburger-menu-wrapper .menu-btn.opened .line3 { stroke-dasharray: 90 207; stroke-dashoffset: -134; stroke-width: 6; } /* ============================================= NAV PANEL — CLOSED STATE Dual selector: in wrapper + teleported to body ============================================= */ .serenity-hamburger-menu-wrapper nav, body > nav.serenity-nav-panel { position: fixed !important; top: 0 !important; left: 0 !important; width: 350px !important; height: 100vh !important; transform: translateX(-100%) !important; transition: transform 800ms cubic-bezier(.8, 0, .33, 1), border-radius 800ms cubic-bezier(.8, 0, .33, 1) !important; background: rgba(255, 255, 255, 0.98) !important; box-shadow: 2px 0 20px rgba(0, 0, 0, 0.2) !important; z-index: 999998 !important; border-radius: 0% 50% 50% 0% !important; overflow-y: auto !important; overflow-x: hidden !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; margin: 0 !important; padding: 0 !important; visibility: hidden !important; opacity: 1 !important; } /* NAV PANEL — OPEN STATE */ .serenity-hamburger-menu-wrapper nav.nav-open, body > nav.serenity-nav-panel.nav-open { transform: translateX(0) !important; border-radius: 0 !important; visibility: visible !important; } /* ============================================= NAV LINKS CONTAINER Dual selector for inner content ============================================= */ .serenity-hamburger-menu-wrapper nav .nav-links, body > nav.serenity-nav-panel .nav-links { width: 100%; min-height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 40px 0; transform: translateX(-50px); opacity: 0; /* No transition by default — instant hide when closing */ transition: none; } .serenity-hamburger-menu-wrapper nav .nav-links.fade-in, body > nav.serenity-nav-panel .nav-links.fade-in { opacity: 1; transform: translateX(0); /* Transition only on the way IN (fade-in class present) */ transition: all 750ms cubic-bezier(.9, 0, .33, 1); } /* ============================================= MENU ITEM WRAP ============================================= */ .serenity-hamburger-menu-wrapper .menu-item-wrap, body > nav.serenity-nav-panel .menu-item-wrap { width: 100%; } /* ============================================= MAIN MENU LINKS ============================================= */ .serenity-hamburger-menu-wrapper nav .nav-links .link, body > nav.serenity-nav-panel .nav-links .link { width: 100%; padding: 20px 40px; text-decoration: none; color: rgba(0, 0, 0, 0.9); transition: all 300ms cubic-bezier(.9, 0, .33, 1); border-left: 4px solid transparent; border-top: none; border-right: none; border-bottom: none; display: flex; align-items: center; gap: 12px; background: transparent; cursor: pointer; text-align: left; } .serenity-hamburger-menu-wrapper nav .nav-links .link:hover, body > nav.serenity-nav-panel .nav-links .link:hover { color: #16d9e3; background: rgba(22, 217, 227, 0.1); border-left: 4px solid #16d9e3; padding-left: 50px; } /* Menu item icon */ .serenity-hamburger-menu-wrapper .nav-links .link .menu-item-icon, .serenity-hamburger-menu-wrapper .submenu .sub-link .menu-item-icon, body > nav.serenity-nav-panel .nav-links .link .menu-item-icon, body > nav.serenity-nav-panel .submenu .sub-link .menu-item-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; width: 1em; height: 1em; min-width: 1em; min-height: 1em; max-width: 1em; max-height: 1em; overflow: hidden; line-height: 1; } .serenity-hamburger-menu-wrapper .nav-links .link .menu-item-icon > *, .serenity-hamburger-menu-wrapper .submenu .sub-link .menu-item-icon > *, body > nav.serenity-nav-panel .nav-links .link .menu-item-icon > *, body > nav.serenity-nav-panel .submenu .sub-link .menu-item-icon > * { width: 1em !important; height: 1em !important; max-width: 100% !important; max-height: 100% !important; font-size: inherit !important; display: block; flex-shrink: 0; } /* Menu item text */ .serenity-hamburger-menu-wrapper .link .menu-item-text, .serenity-hamburger-menu-wrapper .sub-link .menu-item-text, body > nav.serenity-nav-panel .link .menu-item-text, body > nav.serenity-nav-panel .sub-link .menu-item-text { flex: 1; } /* ============================================= SUBMENU TOGGLE BUTTON ============================================= */ .serenity-hamburger-menu-wrapper .has-submenu-toggle, body > nav.serenity-nav-panel .has-submenu-toggle { justify-content: flex-start; } .serenity-hamburger-menu-wrapper .has-submenu-toggle .submenu-arrow, body > nav.serenity-nav-panel .has-submenu-toggle .submenu-arrow { margin-left: auto; font-size: 1.4em; line-height: 1; transition: transform 300ms ease, color 300ms ease; color: #333; display: inline-block; } .serenity-hamburger-menu-wrapper .has-submenu-toggle.sub-open .submenu-arrow, body > nav.serenity-nav-panel .has-submenu-toggle.sub-open .submenu-arrow { transform: rotate(90deg); } /* ============================================= SUB-MENU PANEL ============================================= */ .serenity-hamburger-menu-wrapper .submenu, body > nav.serenity-nav-panel .submenu { width: 100%; max-height: 0; overflow: hidden; transition: max-height 400ms cubic-bezier(.4, 0, .2, 1), opacity 300ms ease; opacity: 0; background: rgba(0, 0, 0, 0.05); } .serenity-hamburger-menu-wrapper .submenu.sub-open, body > nav.serenity-nav-panel .submenu.sub-open { max-height: 800px; opacity: 1; } /* Sub-menu links */ .serenity-hamburger-menu-wrapper .submenu .sub-link, body > nav.serenity-nav-panel .submenu .sub-link { width: 100%; padding: 12px 40px 12px 55px; text-decoration: none; color: rgba(0, 0, 0, 0.8); transition: all 250ms ease; display: flex; align-items: center; gap: 10px; border-left: 3px solid transparent; } .serenity-hamburger-menu-wrapper .submenu .sub-link:hover, body > nav.serenity-nav-panel .submenu .sub-link:hover { color: #16d9e3; background: rgba(22, 217, 227, 0.08); border-left-color: #16d9e3; padding-left: 62px; } /* ============================================= OVERLAY — CLOSED STATE Dual selector: in wrapper + teleported to body ============================================= */ .serenity-hamburger-menu-wrapper .menu-overlay, body > .serenity-menu-overlay { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: opacity 500ms ease, visibility 500ms ease; z-index: 999997 !important; pointer-events: none; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* OVERLAY — OPEN STATE */ .serenity-hamburger-menu-wrapper .menu-overlay.active, body > .serenity-menu-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; } /* ============================================= ACCESSIBILITY ============================================= */ .serenity-hamburger-menu-wrapper .menu-btn:focus { outline: 2px solid currentColor; outline-offset: 2px; } .serenity-hamburger-menu-wrapper .menu-btn:focus:not(:focus-visible) { outline: none; } .serenity-hamburger-menu-wrapper .has-submenu-toggle:focus, body > nav.serenity-nav-panel .has-submenu-toggle:focus { outline: 2px solid currentColor; outline-offset: -2px; } .serenity-hamburger-menu-wrapper .has-submenu-toggle:focus:not(:focus-visible), body > nav.serenity-nav-panel .has-submenu-toggle:focus:not(:focus-visible) { outline: none; } /* ============================================= REMOVE BROWSER NATIVE TOUCH HIGHLIGHT Kills the blue/grey flash on tap (mobile) ============================================= */ .serenity-hamburger-menu-wrapper, .serenity-hamburger-menu-wrapper *, body > nav.serenity-nav-panel, body > nav.serenity-nav-panel * { -webkit-tap-highlight-color: transparent !important; -webkit-touch-callout: none; } /* On tap/click: apply same styles as hover so it looks intentional */ .serenity-hamburger-menu-wrapper nav .nav-links .link:focus, .serenity-hamburger-menu-wrapper nav .nav-links .link:active, body > nav.serenity-nav-panel .nav-links .link:focus, body > nav.serenity-nav-panel .nav-links .link:active { outline: none !important; color: inherit; background-color: inherit; } .serenity-hamburger-menu-wrapper nav .submenu .sub-link:focus, .serenity-hamburger-menu-wrapper nav .submenu .sub-link:active, body > nav.serenity-nav-panel .submenu .sub-link:focus, body > nav.serenity-nav-panel .submenu .sub-link:active { outline: none !important; color: inherit; background-color: inherit; } /* ============================================= REDUCED MOTION ============================================= */ @media (prefers-reduced-motion: reduce) { .serenity-hamburger-menu-wrapper .menu-btn .line, .serenity-hamburger-menu-wrapper nav, body > nav.serenity-nav-panel, .serenity-hamburger-menu-wrapper .nav-links, body > nav.serenity-nav-panel .nav-links, .serenity-hamburger-menu-wrapper .menu-overlay, body > .serenity-menu-overlay, .serenity-hamburger-menu-wrapper .submenu, body > nav.serenity-nav-panel .submenu, .serenity-hamburger-menu-wrapper .submenu-arrow, body > nav.serenity-nav-panel .submenu-arrow { transition: none !important; } } /* ============================================= RESPONSIVE ============================================= */ @media (max-width: 768px) { .serenity-hamburger-menu-wrapper nav, body > nav.serenity-nav-panel { width: 280px !important; } .serenity-hamburger-menu-wrapper nav .nav-links .link, body > nav.serenity-nav-panel .nav-links .link { padding: 18px 30px; } .serenity-hamburger-menu-wrapper nav .nav-links .link:hover, body > nav.serenity-nav-panel .nav-links .link:hover { padding-left: 40px; } .serenity-hamburger-menu-wrapper .submenu .sub-link, body > nav.serenity-nav-panel .submenu .sub-link { padding: 10px 30px 10px 45px; } .serenity-hamburger-menu-wrapper .submenu .sub-link:hover, body > nav.serenity-nav-panel .submenu .sub-link:hover { padding-left: 52px; } } /* ============================================= TOUCH DEVICES - disable sticky hover On touch, :hover stays stuck after tap. Use (hover: none) to disable hover styles and rely only on :active for feedback. ============================================= */ @media (hover: none) { .serenity-hamburger-menu-wrapper nav .nav-links .link:hover, body > nav.serenity-nav-panel .nav-links .link:hover { color: inherit !important; background: transparent !important; border-left-color: transparent !important; padding-left: 40px !important; } .serenity-hamburger-menu-wrapper nav .nav-links .link:active, body > nav.serenity-nav-panel .nav-links .link:active { color: var(--smhm-hover-color, #16d9e3) !important; background: var(--smhm-hover-bg, rgba(22,217,227,0.1)) !important; border-left-color: var(--smhm-hover-border, #16d9e3) !important; } .serenity-hamburger-menu-wrapper nav .submenu .sub-link:hover, body > nav.serenity-nav-panel .submenu .sub-link:hover { color: inherit !important; background: transparent !important; border-left-color: transparent !important; padding-left: 55px !important; } .serenity-hamburger-menu-wrapper nav .submenu .sub-link:active, body > nav.serenity-nav-panel .submenu .sub-link:active { color: var(--smhm-sub-hover-color, #16d9e3) !important; background: var(--smhm-sub-hover-bg, rgba(22,217,227,0.08)) !important; } } /* ============================================= ELEMENTOR EDITOR - no animation, show/hide in place Dual selector: works whether nav is in wrapper OR body ============================================= */ .elementor-editor-active .serenity-hamburger-menu-wrapper nav, .elementor-editor-active body > nav.serenity-nav-panel { display: block !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; max-width: 350px !important; height: 100vh !important; transform: none !important; transition: none !important; visibility: hidden !important; opacity: 0 !important; border-radius: 0 !important; } /* Open when hamburger clicked */ .elementor-editor-active .serenity-hamburger-menu-wrapper nav.nav-open, .elementor-editor-active body > nav.serenity-nav-panel.nav-open { visibility: visible !important; opacity: 1 !important; } /* ALSO show panel when widget is actively being edited (Style tab open) */ .elementor-editor-active .elementor-element-edit-mode .serenity-hamburger-menu-wrapper nav { visibility: visible !important; opacity: 1 !important; } /* Nav-links always fully visible */ .elementor-editor-active .serenity-hamburger-menu-wrapper nav .nav-links, .elementor-editor-active body > nav.serenity-nav-panel .nav-links { opacity: 1 !important; transform: translateX(0) !important; transition: none !important; } /* No overlay in editor */ .elementor-editor-active body > .serenity-menu-overlay, .elementor-editor-active .serenity-hamburger-menu-wrapper .menu-overlay { display: none !important; } .elementor-editor-active .serenity-hamburger-menu-wrapper .menu-btn { pointer-events: auto; }