/* OD9 shared base — design tokens, reset, and the universal nav. * Loaded once (and cached across pages) so the nav + tokens live in ONE place * instead of being re-inlined on every page. Added 2026-06-05 (task #12). * Defines BOTH token conventions in use on the site (--b / --primary-blue), * so a page can drop its own :root + nav CSS and still resolve every var. */ :root{ --primary-blue:#00BFFF; --electric-blue:#00A0FF; --neon-blue:#00D4FF; --chrome:#C0C0C0; --carbon:#0D0D0D; --carbon-dark:#1A1A1A; /* --nav-height = the FULL fixed-header stack (topbar 28px + nav 52px), NOT just the nav. The global body{padding-top} below clears it; pages don't re-set it. */ --glow:0 0 20px rgba(0,191,255,.45); --nav-height:80px; --topbar-h:28px; /* short aliases used by most pages */ --b:#00BFFF; --eb:#00A0FF; --c:#C0C0C0; --d:#0D0D0D; --dd:#1A1A1A; --g:0 0 20px rgba(0,191,255,.45); --gold:#FFD700; --rg:#B76E79; } *{margin:0;padding:0;box-sizing:border-box} /* Single source of truth for the fixed-header offset. The nav is position:fixed, * so page content must start below it. Set ONCE here — pages no longer hand-roll * `body{padding-top}` (that drift is what let updates.php clip under the nav). * A page may still override with a LARGER value when it needs extra breathing room. */ body{padding-top:var(--nav-height)} /* A11y: honor reduced-motion — neutralize the floating logo, pulses, transitions */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} } /* Email signup popup (universal — rendered by includes/email-popup.php) */ .email-popup-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:99999;justify-content:center;align-items:center} .email-popup-overlay.active{display:flex} .email-popup{background:var(--carbon-dark);border:2px solid var(--primary-blue);border-radius:16px;padding:2.5rem;max-width:450px;width:90%;position:relative;box-shadow:var(--glow);animation:popIn 0.3s ease} @keyframes popIn{from{transform:scale(0.8);opacity:0}to{transform:scale(1);opacity:1}} .email-popup-close{position:absolute;top:15px;right:15px;background:none;border:none;color:#888;font-size:1.5rem;cursor:pointer;transition:color 0.3s} .email-popup-close:hover{color:var(--primary-blue)} .email-popup h3{font-family:'Orbitron',sans-serif;font-size:1.5rem;color:#fff;text-align:center;margin-bottom:0.5rem} .email-popup .tagline{text-align:center;color:var(--primary-blue);font-family:'Rajdhani',sans-serif;margin-bottom:1.5rem} .email-popup p{text-align:center;color:#888;font-size:0.95rem;margin-bottom:1.5rem;line-height:1.6} .email-signup-form{display:flex;flex-direction:column;gap:1rem} .email-signup-form input{padding:0.75rem 1rem;background:var(--carbon);border:1px solid #444;border-radius:4px;color:#fff;font-family:'Exo 2',sans-serif;font-size:1rem} .email-signup-form input:focus{outline:none;border-color:var(--primary-blue)} .email-signup-form button{background:linear-gradient(135deg,var(--primary-blue),var(--electric-blue));color:var(--carbon);padding:0.8rem;border:none;border-radius:4px;font-family:'Rajdhani',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:2px;cursor:pointer;transition:all 0.3s} .email-signup-form button:hover{box-shadow:var(--glow)} .email-popup .privacy-note{text-align:center;color:#888;font-size:0.75rem;margin-top:1rem} /* Universal nav — mirrors includes/nav.php markup. * UNIVERSAL MEANS UNIVERSAL: the topbar + nav + mobile menu and EVERY element * inside them render identically on every page. They must never inherit a * page-level text property (line-height especially — pages set body * line-height:1.7 for readable copy, which otherwise leaked into the nav and * made the Discord button taller/shifted on some pages). Pin the inheritable * text metrics here so no page can perturb the nav. */ .od9-topbar, .od9-topbar *, .od9-nav, .od9-nav *, .mobile-menu, .mobile-menu *{ line-height:normal; } /* Pages style bare tags for their body copy (ul{padding-left}, li{margin}, * a{text-decoration}). Those leak into the nav's