/* ═══════════════════════════════════════════════════════════════ VISION GLASS NAVBAR — Floating pill style (Apple-inspired) Only affects header/nav — no impact on tool pages FIXED: 2026-04 — resolved mobile overflow, oval overlay, and flex-row layout bug that caused menu to render off-screen. ═══════════════════════════════════════════════════════════════ */ /* ── Navbar wrapper ────────────────────────────────────────────── CRITICAL FIX: Must be display:block on mobile so #mobile-menu stacks BELOW the navbar, not beside it as a flex sibling. The original display:flex (no flex-direction) caused all children to be horizontal — mobile-menu overflowed off-screen. ─────────────────────────────────────────────────────────────── */ #navbar { position: fixed !important; /* restore — was overridden to 'relative' */ top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 9000 !important; isolation: isolate !important; background: transparent !important; border: none !important; box-shadow: none !important; /* MOBILE DEFAULT — block so children stack vertically */ display: block !important; padding: 0 !important; } /* Desktop only: flex centering for the pill layout */ @media (min-width: 1024px) { #navbar { display: flex !important; flex-direction: column !important; align-items: center !important; padding: 12px 16px 0 !important; } } /* ── The actual nav bar ────────────────────────────────────────── CRITICAL FIX: border-radius:999px ONLY on desktop (≥1024px). On mobile it caused the "oval/pill" visual artifact — a full-width bar with very large border-radius appears as a stretched capsule with transparent rounded corners bleeding into the hero, looking like a blank oval overlay. ─────────────────────────────────────────────────────────────── */ #nav-bar { width: 100% !important; position: relative !important; z-index: 9001 !important; transition: box-shadow 0.3s ease, background 0.3s ease !important; } /* Desktop: pill styling */ @media (min-width: 1024px) { #nav-bar { max-width: 900px !important; background: rgba(255, 255, 255, 0.82) !important; backdrop-filter: blur(28px) saturate(1.9) !important; -webkit-backdrop-filter: blur(28px) saturate(1.9) !important; border: 1.5px solid rgba(255, 255, 255, 0.92) !important; border-radius: 999px !important; /* pill — DESKTOP ONLY */ box-shadow: 0 8px 32px rgba(180, 140, 100, 0.14), 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 1) !important; } #nav-bar.scrolled { background: rgba(255, 255, 255, 0.96) !important; box-shadow: 0 12px 48px rgba(180, 140, 100, 0.22), 0 4px 16px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1) !important; } } /* Mobile: flat rectangular navbar, zero border-radius */ @media (max-width: 1023px) { #nav-bar { border-radius: 0 !important; /* CRITICAL FIX: kills the oval shape */ max-width: 100% !important; border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important; } } /* Inner container height */ #nav-bar > div > div { height: 52px !important; } /* ── Sign Up CTA button ──────────────────────────────────────── */ .nav-cta-signup { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 8px 20px !important; background: linear-gradient(145deg, #f27328, #d45010) !important; color: white !important; font-size: 13px !important; font-weight: 700 !important; font-family: 'DM Sans', 'Inter', sans-serif !important; border-radius: 999px !important; border: none !important; cursor: pointer !important; text-decoration: none !important; white-space: nowrap !important; flex-shrink: 0 !important; transition: all 0.2s ease !important; box-shadow: 0 2px 12px rgba(242, 115, 40, 0.28) !important; letter-spacing: -0.01em !important; } .nav-cta-signup:hover { background: linear-gradient(145deg, #ff8a3c, #e35818) !important; box-shadow: 0 6px 22px rgba(242, 115, 40, 0.42) !important; transform: translateY(-1px) scale(1.02) !important; color: white !important; } .nav-cta-signup:active, .nav-cta-signup:focus { color: white !important; outline: none !important; box-shadow: 0 2px 12px rgba(242, 115, 40, 0.28) !important; } /* ── Mega menu — anchored below pill, DESKTOP ONLY ───────────── */ #mega-menu { position: absolute !important; top: 76px !important; left: 16px !important; right: 16px !important; border-radius: 20px !important; border: 1.5px solid rgba(255, 255, 255, 0.85) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06) !important; overflow: hidden !important; z-index: 8999 !important; } #mega-backdrop { top: 76px !important; z-index: 8998 !important; } /* ── Mobile menu — CRITICAL FIXES ─────────────────────────────── Previously was a flex sibling of #nav-bar (horizontal row), causing it to render off-screen to the right. Fixes applied: • margin: 0 — no side offsets; spans full viewport width • border-radius: 0 — no oval / rounded-corner artifact • position: static — normal block flow below #nav-bar • width: 100% — always full width ─────────────────────────────────────────────────────────────── */ #mobile-menu { /* Structural */ display: block !important; width: 100% !important; position: static !important; /* in-flow, stacks below nav-bar */ z-index: 8997 !important; /* Appearance */ margin: 0 !important; /* CRITICAL: no side margins */ border-radius: 0 !important; /* CRITICAL: no oval corners */ background: #ffffff !important; border-top: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10) !important; /* Scroll */ overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; } /* ── Main content padding (fixed header height) ──────────────── */ main#main-content, .vision-main { padding-top: 52px !important; } @media (max-width: 1023px) { main#main-content, .vision-main { padding-top: 62px !important; } } /* ── Keep hero decorations behind nav ────────────────────────── */ .glass-orb, .glass-orb-1, .glass-orb-2, .glass-orb-3, .glass-orb-4, .glass-orb-5 { z-index: 0 !important; }