/* ========================================================== Divi Mega Menu — Mobile Full-Screen Overlay ========================================================== */ /* ---------------------------------------------------------- 1. HIDE DIVI'S NATIVE MOBILE MENU ELEMENTS We take over completely — suppress everything Divi would normally show at mobile breakpoints. ---------------------------------------------------------- */ @media (max-width: 980px) { /* Hide Divi's hamburger / mobile menu icon */ #et_mobile_nav_menu, .et_mobile_nav_menu, .mobile_menu_bar, .et_pb_menu .mobile_menu_bar, #et-top-navigation .mobile_menu_bar, .et-menu-nav .mobile_menu_bar { display: none !important; visibility: hidden !important; } /* Hide Divi's mobile dropdown that overlaps ours */ .et_mobile_menu, #et_mobile_nav_menu .et_mobile_menu, .et_pb_menu .et_mobile_menu { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* Prevent Divi from changing header bg on mobile scroll — this is the white-on-white bug */ .et-fixed-header #top-menu, .et-fixed-header .et_pb_menu .nav, .et-fixed-header .et-menu-nav { background: transparent !important; } /* Kill any Divi-injected mobile nav wrappers */ .et_pb_menu__wrap .et_mobile_menu, .et_pb_menu__menu .et_mobile_menu { display: none !important; } } /* ---------------------------------------------------------- 2. HAMBURGER BUTTON ---------------------------------------------------------- */ .dmm-hamburger { /* Hidden on desktop by default */ display: none; position: fixed; top: 18px; right: 20px; z-index: 100001; width: 44px; height: 44px; padding: 10px; background: rgba(6, 18, 38, 0.85); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 0.2s ease, border-color 0.2s ease; /* Never let anything hide it on mobile */ visibility: visible !important; } .dmm-hamburger:hover { background: rgba(20, 40, 80, 0.95); border-color: rgba(140,190,255,0.30); } /* Always show on mobile — no JS dependency */ @media (max-width: 980px) { .dmm-hamburger { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* * FIX: Divi's #main-header can create a stacking context via transforms * or will-change that traps position:fixed children behind the header. * Neutralize those properties on mobile so our fixed hamburger escapes. */ #main-header, #main-header .container { transform: none !important; will-change: auto !important; filter: none !important; } /* * FIX: If Divi hides the header on mobile via opacity/visibility, * make sure the hamburger is still a direct body child visually. * Force it above everything with an isolation context on . */ body > #dmm-hamburger { position: fixed !important; top: 22px !important; right: 12px !important; z-index: 999999 !important; display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; isolation: isolate; } } .dmm-hamburger__bar { display: block; width: 22px; height: 2px; background: #ffffff; border-radius: 2px; transform-origin: center; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, width 0.3s ease; } /* Animated X state */ .dmm-hamburger[aria-expanded="true"] .dmm-hamburger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .dmm-hamburger[aria-expanded="true"] .dmm-hamburger__bar:nth-child(2) { opacity: 0; width: 0; } .dmm-hamburger[aria-expanded="true"] .dmm-hamburger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------------------------------------------------------- 3. OVERLAY BACKDROP ---------------------------------------------------------- */ .dmm-overlay { position: fixed; inset: 0; z-index: 100000; background: linear-gradient( 160deg, rgba(4, 10, 24, 0.98) 0%, rgba(6, 18, 42, 0.99) 60%, rgba(3, 8, 20, 0.99) 100% ); display: flex; flex-direction: column; align-items: stretch; overflow-y: auto; -webkit-overflow-scrolling: touch; /* Hidden state */ opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-12px); transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.32s linear, transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); } /* Subtle noise texture */ .dmm-overlay::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); opacity: 0.4; } /* Top accent glow */ .dmm-overlay::after { content: ""; position: fixed; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient( 90deg, rgba(255,255,255,0) 0%, rgba(100,160,255,0.5) 50%, rgba(255,255,255,0) 100% ); pointer-events: none; z-index: 1; } /* Open state */ .dmm-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } /* ---------------------------------------------------------- 4. OVERLAY INNER — scrollable content area ---------------------------------------------------------- */ .dmm-overlay__inner { position: relative; z-index: 2; width: 100%; max-width: 520px; margin: 0 auto; padding: 90px 28px 60px; /* top pad clears hamburger */ box-sizing: border-box; min-height: 100%; display: flex; flex-direction: column; justify-content: flex-start; } /* ---------------------------------------------------------- 5. NAV LIST ---------------------------------------------------------- */ .dmm-menu { list-style: none; margin: 0; padding: 0; width: 100%; } /* ---------------------------------------------------------- 6. TOP-LEVEL ITEMS ---------------------------------------------------------- */ .dmm-item--top { border-bottom: 1px solid rgba(255,255,255,0.06); opacity: 0; transform: translateX(-16px); transition: opacity 0.35s ease, transform 0.35s ease; } /* Stagger reveal when overlay opens */ .dmm-overlay.is-open .dmm-item--top:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.05s; } .dmm-overlay.is-open .dmm-item--top:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.09s; } .dmm-overlay.is-open .dmm-item--top:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.13s; } .dmm-overlay.is-open .dmm-item--top:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.17s; } .dmm-overlay.is-open .dmm-item--top:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.21s; } .dmm-overlay.is-open .dmm-item--top:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.25s; } .dmm-overlay.is-open .dmm-item--top:nth-child(7) { opacity: 1; transform: none; transition-delay: 0.29s; } .dmm-overlay.is-open .dmm-item--top:nth-child(8) { opacity: 1; transform: none; transition-delay: 0.33s; } .dmm-overlay.is-open .dmm-item--top:nth-child(9) { opacity: 1; transform: none; transition-delay: 0.37s; } .dmm-overlay.is-open .dmm-item--top:nth-child(10) { opacity: 1; transform: none; transition-delay: 0.41s; } /* ---------------------------------------------------------- 7. LINKS — top-level ---------------------------------------------------------- */ .dmm-link--top { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px 0; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-decoration: none; font-family: "Inter", "Montserrat", sans-serif; font-size: clamp(22px, 5vw, 32px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; background: transparent !important; transition: color 0.18s ease, letter-spacing 0.18s ease; position: relative; } .dmm-link--top:hover, .dmm-link--top:focus { color: rgba(140,190,255,1) !important; -webkit-text-fill-color: rgba(140,190,255,1) !important; letter-spacing: -0.01em; outline: none; } /* Active / current page */ .dmm-item--active > .dmm-link--top { color: rgba(100,170,255,0.9) !important; -webkit-text-fill-color: rgba(100,170,255,0.9) !important; } /* ---------------------------------------------------------- 8. TOGGLE CHEVRON BUTTON ---------------------------------------------------------- */ .dmm-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; margin-left: 12px; padding: 0; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); border-radius: 8px; color: rgba(255,255,255,0.7); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .dmm-toggle:hover { background: rgba(100,160,255,0.15); color: #ffffff; } .dmm-toggle svg { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } /* Rotate when open */ .dmm-item--open > .dmm-link--top > .dmm-toggle svg, .dmm-item--open > .dmm-link--top .dmm-toggle svg, .dmm-item--open > .dmm-link--sub > .dmm-toggle svg, .dmm-item--open > .dmm-link--sub .dmm-toggle svg { transform: rotate(180deg); } /* ---------------------------------------------------------- 9. SUB-MENU ---------------------------------------------------------- */ .dmm-sub { list-style: none; margin: 0; padding: 0 0 8px 16px; overflow: hidden; max-height: 0; transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1); } .dmm-item--open > .dmm-sub { max-height: 2000px; /* large enough for any sub-menu */ } /* Sub-item links */ .dmm-link--sub { display: block; padding: 10px 0 10px 12px; color: rgba(200,220,255,0.75) !important; -webkit-text-fill-color: rgba(200,220,255,0.75) !important; text-decoration: none; font-family: "Inter", "Montserrat", sans-serif; font-size: 15px; font-weight: 500; border-left: 2px solid rgba(255,255,255,0.08); transition: color 0.18s ease, border-color 0.18s ease, padding-left 0.18s ease; background: transparent !important; } .dmm-link--sub:hover, .dmm-link--sub:focus { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border-left-color: rgba(100,160,255,0.6); padding-left: 18px; outline: none; } /* Third level (depth 2) */ .dmm-sub .dmm-sub { padding-left: 12px; } .dmm-sub .dmm-sub .dmm-link--sub { font-size: 13px; color: rgba(180,200,240,0.55) !important; -webkit-text-fill-color: rgba(180,200,240,0.55) !important; } .dmm-sub .dmm-sub .dmm-link--sub:hover { color: rgba(200,220,255,0.9) !important; -webkit-text-fill-color: rgba(200,220,255,0.9) !important; } /* ---------------------------------------------------------- 10. BODY LOCK (prevents background scroll when overlay open) ---------------------------------------------------------- */ body.dmm-open { overflow: hidden !important; /* iOS Safari needs this too */ position: fixed !important; width: 100% !important; /* Preserve scroll position via JS-set top */ }