/* ========================================================================== QuintEdge — Mobile Navigation v2 (overrides for the legacy in-page CSS) Loaded site-wide via /js/qe-mobile-nav.js. Targets only ≤900px viewports. The legacy nav classes (.nav, .hamburger, .mob-overlay, .nav-dd, …) are re-styled here with higher specificity (using qe-nav-v2 body class added by the JS) so we don't have to edit hundreds of HTML files. ========================================================================== */ /* ─── DESKTOP (≥901px): hide every mobile-only injection so the existing desktop topbar is untouched. ──────────────────────────────────────── */ @media (min-width: 901px) { .qe-nav-v2-head, .qe-nav-v2-cta { display: none !important; } body.qe-nav-v2 .nav .qe-nav-v2-icon { display: none !important; } /* The label span replaces the bare text node inside . On desktop, render it inline so the existing desktop nav styles still apply. */ body.qe-nav-v2 .nav .qe-nav-v2-label { display: inline !important; font: inherit !important; color: inherit !important; letter-spacing: inherit !important; } /* ── Universal dropdown-parent chevron ───────────────────────────────── Pages built from different templates render the .nav-dd>a chevron inconsistently — some have a CSS pseudo-element, some don't. Force a consistent ▾ chevron next to every nav-dd parent so Courses / Demo Videos / Results all look the same. */ body.qe-nav-v2 .nav .nav-dd > a { position: relative; padding-right: 18px !important; } body.qe-nav-v2 .nav .nav-dd > a::after { content: '' !important; display: inline-block !important; width: 7px !important; height: 7px !important; margin-left: 6px !important; border: solid currentColor !important; border-width: 0 1.6px 1.6px 0 !important; transform: rotate(45deg) translateY(-2px) !important; background: none !important; opacity: .65; transition: transform .25s ease, opacity .2s ease !important; vertical-align: middle !important; } body.qe-nav-v2 .nav .nav-dd:hover > a::after, body.qe-nav-v2 .nav .nav-dd.dd-open > a::after { transform: rotate(-135deg) translateY(2px) !important; opacity: 1 !important; color: #00D4AA !important; } /* Some pages render the parent as a simple text link with no .nav-dd wrapper — those keep working as plain links and don't get a chevron. */ } @media (max-width: 900px) { /* ── Defensive horizontal-overflow clip ──────────────────────────────── The drawer was previously parked at `right:-110%` to hide it. On pages whose element doesn't itself clip horizontal overflow, that positive negative-offset extended the document width past the viewport and the user could scroll right and see the drawer (eg. /book-visit). The drawer now uses transform:translateX (which doesn't affect layout or page width), and we also clip the page itself at the html level as a safety net. */ html { overflow-x: clip !important; } /* ── Backdrop ─────────────────────────────────────────────────────────── */ body.qe-nav-v2 .mob-overlay { background: rgba(2, 6, 18, .55) !important; backdrop-filter: blur(18px) saturate(140%) !important; -webkit-backdrop-filter: blur(18px) saturate(140%) !important; transition: opacity .35s cubic-bezier(.22,1,.36,1) !important; } /* ── Drawer ───────────────────────────────────────────────────────────── */ body.qe-nav-v2 .nav, body.qe-nav-v2 nav.nav, body.qe-nav-v2 ul.nav { position: fixed !important; top: 0 !important; right: 0 !important; width: min(89vw, 380px) !important; height: 100dvh !important; transform: translateX(105%) !important; background: linear-gradient(180deg, rgba(8, 14, 32, .985) 0%, rgba(10, 17, 40, .985) 60%, rgba(6, 12, 28, .995) 100%) !important; backdrop-filter: blur(40px) saturate(160%) !important; -webkit-backdrop-filter: blur(40px) saturate(160%) !important; border-left: 1px solid rgba(0, 212, 170, .12) !important; /* Box-shadow intentionally OMITTED here — moved to the .open rule below. The drawer is parked off-screen via translateX(105%) when closed. But CSS transforms move the box-shadow with the element, and the shadow's negative -32px x-offset + 64px blur leaks BACK onto the visible viewport on the right edge — visible as a ~60px dark strip on every mobile page even when the menu is closed. Founder report: "useless shadow on the right in all the mobile pages — remove asap". Solution: only paint the shadow when the drawer is actually visible (i.e. has the .open class). Costs nothing visually since a closed drawer doesn't need elevation cues. */ box-shadow: none !important; /* Default: NO transition. The qe-nav-v2 class is added by deferred JS AFTER first paint. If the transform is transitioned at that moment, the drawer animates from translateX(0) — visible — to translateX(105%) over 420ms, producing a "menu flashes then slides shut" FOUC. The .qe-nav-ready class added on the next frame re-enables transitions for actual user-driven open/close. */ transition: none !important; z-index: 1001 !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 24px) !important; display: flex !important; flex-direction: column !important; gap: 0 !important; align-items: stretch !important; } body.qe-nav-v2 .nav.open, body.qe-nav-v2 nav.nav.open, body.qe-nav-v2 ul.nav.open { transform: translateX(0) !important; /* Now that the drawer is on-screen, restore the elevation shadow. Same values as before — moved here from the base rule so the off-screen state doesn't bleed shadow onto the page edge. */ box-shadow: -32px 0 64px -8px rgba(0, 0, 0, .55), -2px 0 0 0 rgba(0, 212, 170, .14) !important; } /* Enable transitions only after the first paint so the initial transform application doesn't animate. JS adds .qe-nav-ready via a double-rAF. */ body.qe-nav-v2.qe-nav-ready .nav, body.qe-nav-v2.qe-nav-ready nav.nav, body.qe-nav-v2.qe-nav-ready ul.nav { transition: transform .42s cubic-bezier(.22, 1, .36, 1) !important; } /* Decorative gradient orb behind the menu */ body.qe-nav-v2 .nav::before { content: '' !important; position: absolute !important; top: -120px !important; right: -100px !important; width: 320px !important; height: 320px !important; background: radial-gradient(circle at center, rgba(0, 212, 170, .22), rgba(155, 138, 255, .06) 40%, transparent 70%) !important; border-radius: 50% !important; pointer-events: none !important; filter: blur(40px) !important; opacity: .9 !important; z-index: 0 !important; } /* ── Drawer header (logo + close) — injected by JS ────────────────────── */ .qe-nav-v2-head { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: calc(env(safe-area-inset-top, 0px) + 18px) 22px 18px !important; border-bottom: 1px solid rgba(255, 255, 255, .06) !important; position: relative !important; z-index: 2 !important; flex-shrink: 0 !important; } .qe-nav-v2-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; letter-spacing: -.01em; } .qe-nav-v2-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, #00D4AA, #00F0C5); color: #050A18; font-weight: 800; font-size: .9rem; letter-spacing: -.02em; box-shadow: 0 6px 18px rgba(0, 212, 170, .35); } .qe-nav-v2-brand-img { width: 38px; height: 38px; display: block; object-fit: contain; /* The favicon is a dark Q on transparent. Invert to render it as white on the dark drawer + add a soft teal glow that matches the brand. */ filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(0, 240, 197, .55)) drop-shadow(0 4px 16px rgba(0, 212, 170, .25)); } .qe-nav-v2-brand-text { font-size: .98rem; } .qe-nav-v2-brand-text em { font-family: 'Times New Roman', Times, serif; font-style: italic; font-weight: 400; color: rgba(0, 240, 197, .9); margin-left: 1px; } .qe-nav-v2-close { width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform .25s ease, background .25s ease, border-color .25s ease; } .qe-nav-v2-close svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .qe-nav-v2-close:hover, .qe-nav-v2-close:active { background: rgba(0, 212, 170, .12); border-color: rgba(0, 212, 170, .35); color: #00F0C5; transform: rotate(90deg); } /* ── Items ────────────────────────────────────────────────────────────── */ body.qe-nav-v2 .nav li { width: 100% !important; border-bottom: 1px solid rgba(255, 255, 255, .04) !important; list-style: none !important; position: relative !important; z-index: 2 !important; opacity: 0; transform: translateX(18px); transition: opacity .42s cubic-bezier(.22,1,.36,1), transform .42s cubic-bezier(.22,1,.36,1); } body.qe-nav-v2 .nav.open li { opacity: 1; transform: translateX(0); } /* Stagger entry — first 8 items */ body.qe-nav-v2 .nav.open li:nth-child(1) { transition-delay: .06s; } body.qe-nav-v2 .nav.open li:nth-child(2) { transition-delay: .10s; } body.qe-nav-v2 .nav.open li:nth-child(3) { transition-delay: .14s; } body.qe-nav-v2 .nav.open li:nth-child(4) { transition-delay: .18s; } body.qe-nav-v2 .nav.open li:nth-child(5) { transition-delay: .22s; } body.qe-nav-v2 .nav.open li:nth-child(6) { transition-delay: .26s; } body.qe-nav-v2 .nav.open li:nth-child(7) { transition-delay: .30s; } body.qe-nav-v2 .nav.open li:nth-child(8) { transition-delay: .34s; } body.qe-nav-v2 .nav li > a { display: flex !important; align-items: center !important; gap: 14px !important; justify-content: flex-start !important; padding: 16px 24px !important; font-size: .95rem !important; color: #E4E9F2 !important; font-weight: 500 !important; letter-spacing: -.005em !important; text-decoration: none !important; min-height: 56px !important; transition: background .2s ease, color .2s ease, padding-left .25s ease !important; position: relative !important; } body.qe-nav-v2 .nav li > a::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleY(0); transform-origin: center; width: 3px; height: 24px; background: linear-gradient(180deg, #00D4AA, #00F0C5); border-radius: 0 3px 3px 0; transition: transform .25s cubic-bezier(.22,1,.36,1); } body.qe-nav-v2 .nav li > a:active { background: rgba(0, 212, 170, .07) !important; color: #fff !important; padding-left: 28px !important; } body.qe-nav-v2 .nav li > a:active::before { transform: translateY(-50%) scaleY(1); } /* Icon wrapper — injected by JS */ body.qe-nav-v2 .nav .qe-nav-v2-icon { width: 22px; height: 22px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: rgba(0, 212, 170, .85); } body.qe-nav-v2 .nav .qe-nav-v2-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } body.qe-nav-v2 .nav .qe-nav-v2-label { flex: 1; min-width: 0; } /* Dropdown chevron */ body.qe-nav-v2 .nav-dd > a { padding-right: 56px !important; } body.qe-nav-v2 .nav-dd > a::after { content: '' !important; width: 8px !important; height: 8px !important; border: solid currentColor !important; border-width: 0 2px 2px 0 !important; transform: rotate(45deg) !important; background: none !important; position: absolute !important; right: 28px !important; top: 50% !important; margin-top: -7px !important; left: auto !important; color: rgba(255, 255, 255, .55) !important; transition: transform .3s cubic-bezier(.22,1,.36,1), color .25s ease, margin-top .3s ease !important; opacity: 1 !important; font-size: 0 !important; } body.qe-nav-v2 .nav-dd.dd-open > a::after { transform: rotate(-135deg) !important; margin-top: -3px !important; color: #00F0C5 !important; } /* ── Submenu ──────────────────────────────────────────────────────────── */ body.qe-nav-v2 .nav-dd-menu { position: static !important; transform: none !important; background: rgba(0, 0, 0, .22) !important; border: none !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; min-width: 0 !important; width: 100% !important; box-shadow: none !important; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: max-height .2s cubic-bezier(.4,0,.2,1), opacity .15s ease, visibility 0s linear .2s !important; } body.qe-nav-v2 .nav-dd.dd-open > .nav-dd-menu { max-height: 480px !important; opacity: 1 !important; visibility: visible !important; transition: max-height .22s cubic-bezier(.4,0,.2,1), opacity .18s ease, visibility 0s !important; } body.qe-nav-v2 .nav-dd-menu a { display: flex !important; align-items: center !important; padding: 13px 24px 13px 56px !important; font-size: .85rem !important; color: rgba(255, 255, 255, .68) !important; font-weight: 500 !important; text-decoration: none !important; border-bottom: 1px solid rgba(255, 255, 255, .03) !important; position: relative !important; min-height: 44px !important; transition: background .2s, color .2s, padding-left .25s !important; } body.qe-nav-v2 .nav-dd-menu a::before { content: '' !important; position: absolute !important; left: 36px !important; top: 50% !important; transform: translateY(-50%) !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; background: rgba(0, 212, 170, .35) !important; opacity: 0 !important; transition: opacity .2s, transform .2s !important; } body.qe-nav-v2 .nav-dd-menu a:active, body.qe-nav-v2 .nav-dd-menu a:hover { background: rgba(0, 212, 170, .06) !important; color: #00F0C5 !important; padding-left: 64px !important; } body.qe-nav-v2 .nav-dd-menu a:active::before, body.qe-nav-v2 .nav-dd-menu a:hover::before { opacity: 1 !important; transform: translateY(-50%) scale(1.15) !important; } body.qe-nav-v2 .nav-dd-menu a:last-child { border-bottom: none !important; } body.qe-nav-v2 .nav-dd-menu a::after { display: none !important; } /* ── Footer CTAs (injected by JS) ─────────────────────────────────────── */ .qe-nav-v2-cta { margin-top: auto; padding: 18px 22px calc(env(safe-area-inset-bottom, 0px) + 18px); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .25)); border-top: 1px solid rgba(255, 255, 255, .05); position: relative; z-index: 2; flex-shrink: 0; } .qe-nav-v2-cta a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 14px; border-radius: 12px; font-size: .82rem; font-weight: 600; text-decoration: none; transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; white-space: nowrap; } .qe-nav-v2-cta a:active { transform: scale(.97); } .qe-nav-v2-cta-call { background: linear-gradient(135deg, #00D4AA, #00F0C5); color: #050A18; box-shadow: 0 6px 18px rgba(0, 212, 170, .25); } .qe-nav-v2-cta-wa { background: rgba(255, 255, 255, .04); color: #fff; border: 1px solid rgba(37, 211, 102, .35); } .qe-nav-v2-cta a svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ── Hamburger button (slick X) ───────────────────────────────────────── */ body.qe-nav-v2 .hamburger { width: 42px !important; height: 42px !important; border-radius: 12px !important; background: rgba(127, 127, 127, .07) !important; border: 1px solid currentColor !important; /* Subtle border that adapts to either light or dark topbar text colour. */ border-color: rgba(127, 127, 127, .25) !important; color: inherit !important; /* Inherit text colour from the surrounding topbar — works on both dark navy topbars and white topbars. */ display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 5px !important; transition: background .2s ease, border-color .2s ease !important; padding: 0 !important; } body.qe-nav-v2 .hamburger:active { background: rgba(0, 212, 170, .12) !important; border-color: rgba(0, 212, 170, .45) !important; } body.qe-nav-v2 .hamburger span { display: block !important; width: 18px !important; height: 2px !important; background: currentColor !important; border-radius: 2px !important; opacity: .85 !important; transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .2s ease, width .25s ease !important; transform-origin: center !important; } body.qe-nav-v2 .hamburger span:nth-child(2) { width: 12px !important; } body.qe-nav-v2 .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; width: 18px !important; } body.qe-nav-v2 .hamburger.open span:nth-child(2) { opacity: 0 !important; transform: scale(0) !important; } body.qe-nav-v2 .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; width: 18px !important; } /* Body scroll lock when nav is open */ body.qe-nav-v2.qe-nav-v2-open { overflow: hidden !important; touch-action: none !important; } /* Hide the topbar hamburger while the drawer is open — the drawer has its own close (X) button. Avoids two X icons stacked at the top-right. */ body.qe-nav-v2.qe-nav-v2-open .hamburger { opacity: 0 !important; pointer-events: none !important; transition: opacity .15s ease !important; } /* Brighter CTAs at the bottom of the drawer */ .qe-nav-v2-cta a { color: #fff; font-weight: 700 !important; letter-spacing: -.005em; } .qe-nav-v2-cta-call { color: #050A18 !important; /* dark text on teal gradient */ } .qe-nav-v2-cta-wa { background: linear-gradient(135deg, rgba(37, 211, 102, .15), rgba(37, 211, 102, .05)) !important; color: #4DEB9A !important; border-color: rgba(37, 211, 102, .55) !important; } .qe-nav-v2-cta-wa svg { color: #25D366; } }