/* ===================================================== Serenity Header Hamburger Widget Circular bordered trigger, dark slide-in panel Teleport-aware: panel + overlay moved to ===================================================== */ /* ───────────────────────────────────────── WRAPPER ───────────────────────────────────────── */ .hhb-wrapper { display: flex; align-items: center; overflow: visible; position: static; } /* ───────────────────────────────────────── TRIGGER — circular bordered button ───────────────────────────────────────── */ .hhb-trigger { display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 42px; height: 42px; background: transparent; border: 1.5px solid rgba(255,255,255,0.7); border-radius: 50%; cursor: pointer; padding: 0; transition: border-color 250ms ease, background 250ms ease, transform 180ms ease; -webkit-tap-highlight-color: transparent; flex-shrink: 0; position: relative; z-index: 1; } .hhb-trigger:hover { border-color: #fff; background: rgba(255,255,255,0.06); transform: scale(1.05); } /* Three bars */ .hhb-trigger .hhb-bar { display: block; width: 16px; height: 1.5px; background-color: #fff; border-radius: 2px; transition: transform 380ms cubic-bezier(.4,0,.2,1), opacity 300ms ease, width 300ms ease; transform-origin: center; } /* Animate to X when open */ .hhb-trigger.hhb-open .hhb-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .hhb-trigger.hhb-open .hhb-bar:nth-child(2) { opacity: 0; transform: scaleX(0); } .hhb-trigger.hhb-open .hhb-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ───────────────────────────────────────── OVERLAY ───────────────────────────────────────── */ .hhb-overlay { position: fixed !important; inset: 0 !important; background: rgba(0,0,0,0.55); z-index: 999996 !important; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 420ms ease, visibility 420ms ease; backdrop-filter: none !important; } .hhb-overlay.hhb-visible { opacity: 1; visibility: visible; pointer-events: auto; } /* ───────────────────────────────────────── PANEL — closed state ───────────────────────────────────────── */ .hhb-panel { position: fixed !important; top: 0 !important; height: 100vh !important; width: 320px; background: #1a1a1a; z-index: 999997 !important; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; overflow-x: hidden; transition: transform 480ms cubic-bezier(.77,0,.175,1) !important; padding: 80px 0 60px; } /* Left panel */ .hhb-panel[data-side="left"] { left: 0 !important; right: auto !important; transform: translateX(-100%) !important; } /* Right panel */ .hhb-panel[data-side="right"] { right: 0 !important; left: auto !important; transform: translateX(100%) !important; } /* PANEL — open */ .hhb-panel.hhb-open { transform: translateX(0) !important; } /* ───────────────────────────────────────── CLOSE BUTTON ───────────────────────────────────────── */ .hhb-close { position: absolute; top: 24px; right: 24px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 50%; cursor: pointer; color: rgba(255,255,255,0.7); transition: background 200ms ease, color 200ms ease; -webkit-tap-highlight-color: transparent; padding: 0; } .hhb-close:hover { background: rgba(255,255,255,0.14); color: #fff; } .hhb-close svg { display: block; width: 16px; height: 16px; pointer-events: none; } /* ───────────────────────────────────────── NAV LIST ───────────────────────────────────────── */ .hhb-nav { flex: 1; } .hhb-nav-list { list-style: none; margin: 0; padding: 0; } .hhb-nav-item { border-top: 1px solid rgba(255,255,255,0.1); } .hhb-nav-item:first-child { border-top: none; } /* ───────────────────────────────────────── NAV LINK ───────────────────────────────────────── */ .hhb-nav-link { display: flex; align-items: center; gap: 14px; padding: 15px 32px; color: rgba(255,255,255,0.85); text-decoration: none; font-size: 15px; font-weight: 400; letter-spacing: 0.01em; transition: color 200ms ease, background 200ms ease, padding-left 200ms ease; border-radius: 0; -webkit-tap-highlight-color: transparent; } .hhb-nav-link:hover { color: #fff; background: rgba(255,255,255,0.07); padding-left: 40px; } /* Stagger-in animation when panel opens */ .hhb-panel .hhb-nav-item { opacity: 0; transform: translateX(-20px); transition: opacity 0s, transform 0s; } .hhb-panel.hhb-open .hhb-nav-item { opacity: 1; transform: translateX(0); transition: opacity 400ms ease, transform 400ms cubic-bezier(.23,1,.32,1); } .hhb-panel.hhb-open .hhb-nav-item:nth-child(1) { transition-delay: 100ms; } .hhb-panel.hhb-open .hhb-nav-item:nth-child(2) { transition-delay: 145ms; } .hhb-panel.hhb-open .hhb-nav-item:nth-child(3) { transition-delay: 190ms; } .hhb-panel.hhb-open .hhb-nav-item:nth-child(4) { transition-delay: 235ms; } .hhb-panel.hhb-open .hhb-nav-item:nth-child(5) { transition-delay: 280ms; } .hhb-panel.hhb-open .hhb-nav-item:nth-child(6) { transition-delay: 325ms; } .hhb-panel.hhb-open .hhb-nav-item:nth-child(7) { transition-delay: 370ms; } .hhb-panel.hhb-open .hhb-nav-item:nth-child(8) { transition-delay: 415ms; } /* Right panel: items enter from right */ .hhb-panel[data-side="right"] .hhb-nav-item { transform: translateX(20px); } .hhb-panel[data-side="right"].hhb-open .hhb-nav-item { transform: translateX(0); } /* ───────────────────────────────────────── NAV ICON ───────────────────────────────────────── */ .hhb-nav-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; opacity: 0.75; } .hhb-nav-icon i, .hhb-nav-icon svg { display: block; font-size: 18px; width: 18px; height: 18px; } .hhb-nav-link:hover .hhb-nav-icon { opacity: 1; } /* ───────────────────────────────────────── EDITOR OVERRIDES ───────────────────────────────────────── */ .elementor-editor-active .hhb-panel, .elementor-editor-active .hhb-overlay { display: none !important; } /* ───────────────────────────────────────── REDUCED MOTION ───────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .hhb-panel, .hhb-overlay, .hhb-trigger, .hhb-trigger .hhb-bar, .hhb-panel .hhb-nav-item { transition: none !important; } } /* No tap highlight */ .hhb-wrapper *, .hhb-panel *, .hhb-overlay { -webkit-tap-highlight-color: transparent !important; }