/* ============================================================================ HBL — Unified header navigation + WATCH LIVE (shared across all pages) ---------------------------------------------------------------------------- Linked LAST in on every page so this canonical system overrides the per-page inline nav rules. Selectors are scoped under `.nav` for specificity. Only nav LINKS / active / hover / underline / WATCH-LIVE are standardised here — page-specific .nav background / .scrolled glass are left untouched. ============================================================================ */ /* Center menu, identical spacing everywhere */ .nav .nav-links { display: flex; align-items: center; justify-content: center; gap: 30px; margin-left: 0; } /* Menu links — one identical style on every page */ .nav .nav-links a { position: relative; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 14px; /* +1px — subtly more legible, still minimalist */ letter-spacing: 0.14em; line-height: 1; text-transform: uppercase; color: rgba(255, 255, 255, 0.76); /* inactive ~+15% lighter (was 0.66) */ padding: 7px 0; /* vertical room for underline; no h-padding */ transform: none; transition: color 0.22s ease; } /* Consistent HBL-pink underline — hidden by default, same length/thickness/offset */ .nav .nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--pink, #FF1F5A); border-radius: 1px; box-shadow: 0 0 6px rgba(255, 31, 90, 0.45); transform: scaleX(0); transform-origin: center; opacity: 0; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease; } /* Hover — text turns HBL pink + underline expands (same on every page) */ .nav .nav-links a:hover { color: var(--pink, #FF1F5A); transform: none; } .nav .nav-links a:hover::after { transform: scaleX(1); opacity: 1; } /* Active (current page) — HBL pink + persistent underline */ .nav .nav-links a.active { color: var(--pink, #FF1F5A); } .nav .nav-links a.active::after { transform: scaleX(1); opacity: 1; } /* WATCH LIVE — one identical button everywhere */ .nav .nav-cta { justify-self: end; flex-shrink: 0; display: flex; align-items: center; gap: 9px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: transparent; border: 1.5px solid var(--pink, #FF1F5A); border-radius: 4px; padding: 9px 22px; box-shadow: 0 0 14px rgba(255, 31, 90, 0.16); transition: background 0.25s ease, box-shadow 0.30s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1); } .nav .nav-cta:hover { background: var(--pink, #FF1F5A); color: #fff; transform: translateY(-1px); box-shadow: 0 0 26px rgba(255, 31, 90, 0.45), 0 4px 18px rgba(0, 0, 0, 0.28); } .nav .nav-cta .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink, #FF1F5A); box-shadow: 0 0 6px rgba(255, 31, 90, 0.8); flex-shrink: 0; } /* ============================================================================ MOBILE NAVIGATION — hamburger + full-screen menu (desktop untouched) ============================================================================ */ /* Burger hidden on desktop; built + appended by assets/mobile-nav.js */ .nav-burger { display: none; } @media (max-width: 640px) { .nav .nav-links { display: none; } /* logo (1fr, left) · WATCH LIVE · burger — grouped on the right */ .nav { grid-template-columns: 1fr auto auto; } .nav-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 40px; margin-left: 12px; padding: 0 11px; justify-self: end; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.16); border-radius: 9px; cursor: pointer; transition: border-color 0.22s, background 0.22s; } .nav-burger span { display: block; height: 2px; width: 100%; border-radius: 2px; background: #fff; transition: transform 0.28s ease, opacity 0.22s ease; } .nav-burger:hover { border-color: rgba(255,31,90,0.5); background: rgba(255,31,90,0.08); } .nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger.open span:nth-child(2) { opacity: 0; } .nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } /* Full-screen overlay menu (built by mobile-nav.js, shown on all sizes once .open) */ .hbl-mobile-menu { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(120% 90% at 50% 18%, rgba(255,31,90,0.10) 0%, transparent 60%), rgba(5,5,5,0.975); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .hbl-mobile-menu.open { opacity: 1; visibility: visible; } .hbl-mm-close { position: absolute; top: 22px; right: 24px; width: 44px; height: 44px; line-height: 40px; text-align: center; font-size: 34px; font-weight: 300; color: rgba(255,255,255,0.85); background: none; border: none; cursor: pointer; transition: color 0.2s, transform 0.2s; } .hbl-mm-close:hover { color: var(--pink, #FF1F5A); transform: rotate(90deg); } .hbl-mm-links { display: flex; flex-direction: column; align-items: center; gap: 26px; } .hbl-mm-links a { position: relative; font-family: 'Barlow Condensed', sans-serif; font-size: 30px; font-weight: 700; letter-spacing: 0.16em; line-height: 1; text-transform: uppercase; text-decoration: none; color: rgba(255,255,255,0.88); transition: color 0.2s ease; } .hbl-mm-links a::after { content: ''; position: absolute; left: 50%; right: 50%; bottom: -8px; height: 2px; background: var(--pink, #FF1F5A); border-radius: 1px; transition: left 0.25s ease, right 0.25s ease; } .hbl-mm-links a:hover, .hbl-mm-links a.active { color: var(--pink, #FF1F5A); } .hbl-mm-links a.active::after, .hbl-mm-links a:hover::after { left: 0; right: 0; } /* ════════════════════════════════════════════════════════════════════════════ FOOTER — shared premium polish (every page): hairline top divider, a touch more breathing room, and an extremely subtle HBL-pink ambient above it. nav.css loads after each page's inline styles, so these win consistently. ════════════════════════════════════════════════════════════════════════════ */ .footer { position: relative; border-top: 1px solid rgba(255,255,255,0.055); } .footer::before { content: ''; position: absolute; left: 12%; right: 12%; top: -110px; height: 110px; background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(255,31,90,0.045) 0%, rgba(255,31,90,0.015) 55%, transparent 80%); pointer-events: none; } .footer-inner { padding-top: 10px; } /* ── Accessibility: visible keyboard focus (shared, subtle HBL style) ──────── */ a:focus-visible, button:focus-visible { outline: 2px solid rgba(255,31,90,0.75); outline-offset: 3px; border-radius: 4px; }