/* ═══ GLOBAL NAV + SIDEBAR — Vector Ridge ═══ */ /* Single source of truth for nav styling across ALL pages */ /* Loads in so styles apply BEFORE JS injects nav content */ /* ═══ DESKTOP NAV ═══ */ nav{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:1000!important;padding:0 clamp(1.5rem,3vw,3rem)!important;height:64px!important;display:flex!important;align-items:center!important;background:rgba(10,10,10,0.95)!important;backdrop-filter:blur(30px)!important;-webkit-backdrop-filter:blur(30px)!important;border-bottom:1px solid rgba(255,255,255,0.06)!important;justify-content:flex-start!important;box-sizing:border-box!important} .menu-btn{background:none!important;border:none!important;cursor:pointer!important;padding:0.6rem!important;margin-right:1.5rem!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:5px!important;flex-shrink:0!important} .menu-btn span{display:block!important;width:20px!important;height:1.5px!important;background:#888!important;transition:all 0.3s ease!important;margin:0!important} .menu-btn:hover span{background:#fff!important} nav .logo{display:flex!important;align-items:center!important;gap:0.75rem!important;text-decoration:none!important;color:#fff!important;position:static!important;transform:none!important;left:auto!important;flex:none!important} nav .logo img,nav .logo svg{height:36px!important;width:auto!important} nav .logo-text{font-weight:300!important;font-size:1.3rem!important;letter-spacing:0.35em!important;text-transform:uppercase!important;display:inline!important} nav .nav-links{display:flex!important;gap:clamp(1rem,2vw,2.25rem)!important;list-style:none!important;margin:0 auto!important;position:static!important;transform:none!important;flex-direction:row!important;flex-wrap:nowrap!important;width:auto!important;height:auto!important;background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important} nav .nav-links a{color:#777!important;text-decoration:none!important;font-size:clamp(0.68rem,0.8vw,0.82rem)!important;font-weight:500!important;letter-spacing:0.08em!important;text-transform:uppercase!important;white-space:nowrap!important;transition:color 0.2s!important;display:inline!important;padding:0!important;border:none!important} nav .nav-links a:hover{color:#fff!important;background:transparent!important} nav .nav-actions{display:flex!important;align-items:center!important;gap:1.25rem!important;flex-shrink:0!important} nav .nav-login{color:#888!important;text-decoration:none!important;font-size:0.78rem!important;font-weight:500!important;letter-spacing:0.05em!important;text-transform:uppercase!important;transition:color 0.2s!important} nav .nav-login:hover{color:#fff!important} nav .nav-cta{background:#fff!important;color:#0a0a0a!important;padding:0.6rem 1.5rem!important;text-decoration:none!important;font-size:0.72rem!important;font-weight:600!important;letter-spacing:0.1em!important;text-transform:uppercase!important;transition:all 0.3s cubic-bezier(0.16,1,0.3,1)!important} nav .nav-cta:hover{background:#4ade80!important;transform:translateY(-1px)!important;box-shadow:0 4px 16px rgba(74,222,128,0.2)!important} nav .hamburger{display:none!important} /* ═══ SIDEBAR (shared desktop + mobile) ═══ */ .so{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:1100;opacity:0;visibility:hidden;transition:all 0.3s;touch-action:none} .so.open{opacity:1;visibility:visible} .sb{position:fixed;top:0;left:-320px;width:min(280px,80vw);height:100%;max-height:100vh;max-height:100dvh;background:#0a0a0a;border-right:1px solid rgba(255,255,255,0.06);z-index:1200;transition:left 0.3s ease;display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:contain} .sb.open{left:0} .sb-h{display:flex;align-items:center;justify-content:space-between;padding:0.9rem 1.25rem;border-bottom:1px solid rgba(255,255,255,0.06);min-height:52px;flex-shrink:0} .sb-h .logo{display:flex!important;align-items:center;gap:.5rem;text-decoration:none} .sb-h .logo img{height:24px;width:auto} .sb-c{background:none;border:none;cursor:pointer;color:#666;padding:0.4rem;transition:color 0.2s} .sb-c:hover{color:#fff} .sb-n{flex:1;overflow-y:auto;padding:0.25rem 0;-webkit-overflow-scrolling:touch} .sb-n a{display:block;padding:0.45rem 1.25rem;color:#999;text-decoration:none;font-size:0.82rem;font-weight:400;transition:all 0.15s;border-left:3px solid transparent} .sb-n a:hover{color:#fff;background:rgba(255,255,255,0.03);border-left-color:rgba(74,222,128,0.3)} .sb-l{padding:0.35rem 1.25rem 0.15rem;font-size:0.5rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#444} .sb-d{height:1px;background:rgba(255,255,255,0.06);margin:0.3rem 1.25rem} .sb-f{padding:0.75rem 1.25rem;border-top:1px solid rgba(255,255,255,0.06);flex-shrink:0} .sb-t{display:block;text-align:center;background:linear-gradient(135deg,#4ade80,#10b981);color:#000;text-decoration:none;font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:0.7rem 1.25rem;transition:all 0.3s} .sb-t:hover{box-shadow:0 4px 20px rgba(74,222,128,0.3)} /* ═══ AUTHENTICATED NAV — hamburger at ALL widths when logged in ═══ */ nav.nav-authenticated{padding:0 0.75rem!important;justify-content:space-between!important;background:#0a0a0a!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important} nav.nav-authenticated .menu-btn{display:none!important} nav.nav-authenticated .hamburger{display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;order:-1!important;background:none!important;border:none!important;cursor:pointer!important;padding:0.5rem!important;z-index:1001!important;gap:0!important} nav.nav-authenticated .hamburger span{display:block!important;width:22px!important;height:2px!important;background:#fff!important;margin:4px 0!important;transition:all 0.3s ease!important;border-radius:1px!important;transform:none!important;opacity:1!important;position:static!important} nav.nav-authenticated .nav-links{display:none!important} nav.nav-authenticated .logo{position:absolute!important;left:50%!important;transform:translateX(-50%)!important;pointer-events:auto!important;margin:0!important;padding:0!important;flex:none!important} nav.nav-authenticated .logo img,nav.nav-authenticated .logo svg{height:32px!important;width:auto!important} nav.nav-authenticated .logo-text{display:none!important} nav.nav-authenticated .nav-actions{gap:0.5rem!important} nav.nav-authenticated .nav-login{display:none!important} nav.nav-authenticated .nav-cta{display:none!important} nav.nav-authenticated .nav-dashboard{display:none!important} /* ═══ NARROW DESKTOP (1201px - 1400px) ═══ */ @media(max-width:1400px){ nav .nav-links{gap:1.5rem!important} nav .nav-links a{font-size:0.72rem!important;letter-spacing:0.06em!important} nav .logo-text{font-size:1.2rem!important;letter-spacing:0.3em!important} } /* ═══ MOBILE / TABLET (≤ 1300px) — hamburger kicks in here ═══ */ @media(max-width:1300px){ nav{padding:0 0.75rem!important;height:64px!important;min-height:64px!important;max-height:64px!important;justify-content:space-between!important;background:#0a0a0a!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important} /* Hide desktop menu-btn, show hamburger */ nav .menu-btn{display:none!important} nav .hamburger{display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;order:-1!important;background:none!important;border:none!important;cursor:pointer!important;padding:0.5rem!important;z-index:1001!important;gap:0!important} nav .hamburger span{display:block!important;width:22px!important;height:2px!important;background:#fff!important;margin:4px 0!important;transition:all 0.3s ease!important;border-radius:1px!important;transform:none!important;opacity:1!important;position:static!important} /* Hide inline nav links */ nav .nav-links{display:none!important} /* Logo — ALWAYS absolute center */ nav .logo{position:absolute!important;left:50%!important;transform:translateX(-50%)!important;pointer-events:auto!important;margin:0!important;padding:0!important;flex:none!important} nav .logo img,nav .logo svg{height:32px!important;width:auto!important} nav .logo-text{display:none!important} /* Actions — compact */ nav .nav-actions{gap:0.5rem!important} nav .nav-login{font-size:0.7rem!important;letter-spacing:0.03em!important} nav .nav-cta{padding:0.4rem 0.75rem!important;font-size:0.55rem!important;white-space:nowrap!important} /* Hide dashboard button on mobile — it's in the sidebar */ nav .nav-dashboard{display:none!important} }