/* ==========================================================================
Previously — Unified Navigation · NAV ORDER v3 (2026-09-28)
--------------------------------------------------------------------------
Single source: every rebuilt page includes THIS file + nav.js.
No page carries its own nav markup, order, or styles.
Order (James, 2026-09-28 — v3, no exceptions):
Home · Browse · Coming Soon · Games · Podcasts · Sports · Free ·
Live · Music · Culture (LAST). Library is OUT.
Namespace: pvn-*. Zero collisions with page CSS.
Brand accent: Signal Red. No gold anywhere. No white-on-red (near-black
text on red fills, per the hardened tokens).
Integration:
(in )
(where nav goes)
(before )
========================================================================== */
/* ---- Tokens, aliased to the hardened design tokens with self-sufficient
fallbacks, so the nav never breaks if tokens.css loads late or is absent. */
.pvn {
--pvn-bg: var(--pv-noir, #0a0a0b);
--pvn-bg-panel: var(--pv-noir-2, #111113);
--pvn-ink: var(--pv-ivory, #f4efe6);
--pvn-ink-dim: var(--pv-ivory-dim, rgba(244, 239, 230, 0.62));
--pvn-ink-faint: var(--pv-ivory-faint, rgba(244, 239, 230, 0.38));
--pvn-accent: var(--pv-red, #ec4634);
--pvn-accent-soft: rgba(236, 70, 52, 0.14);
--pvn-line: var(--pv-rule, rgba(244, 239, 230, 0.14));
--pvn-bar-h: var(--pv-nav-h, 64px);
--pvn-ease: var(--pv-ease, cubic-bezier(0.22, 0.8, 0.28, 1));
--pvn-focus: var(--pv-focus-outline, 2px solid var(--pv-red, #ec4634));
--pvn-sans: var(--pv-sans, -apple-system, BlinkMacSystemFont, "Inter",
"Helvetica Neue", Arial, sans-serif);
--pvn-serif: var(--pv-serif, "Playfair Display", Georgia, "Times New Roman", serif);
position: sticky;
top: 0;
z-index: var(--pv-z-nav, 50);
background: var(--pvn-bg);
color: var(--pvn-ink);
border-bottom: 1px solid var(--pvn-line);
font-family: var(--pvn-sans);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.pvn *,
.pvn *::before,
.pvn *::after {
box-sizing: border-box;
}
/* ---- Bar ---- */
.pvn-bar {
height: var(--pvn-bar-h);
max-width: var(--pv-shell-max, 1440px);
margin: 0 auto;
padding: 0 var(--pv-gutter, 32px);
display: flex;
align-items: center;
gap: 28px;
}
/* ---- Brand: red chevron mark + wordmark, links to / ---- */
.pvn-brand {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px; /* 44px target */
text-decoration: none;
color: var(--pvn-ink);
flex: 0 0 auto;
}
.pvn-brand svg {
display: block;
width: 26px;
height: 26px;
flex: 0 0 auto;
}
.pvn-brand-name {
font-family: var(--pvn-serif);
font-size: 19px;
font-weight: 700;
letter-spacing: 0.01em;
white-space: nowrap;
}
/* ---- Desktop links: text-only (icons live in the mobile dropdown) so the
full 10-item bar fits at 1024px. ---- */
.pvn-links {
display: flex;
align-items: center;
gap: 2px;
list-style: none;
margin: 0 0 0 auto;
padding: 0;
flex: 0 1 auto;
min-width: 0;
}
.pvn-links .pvn-link svg {
display: none;
}
.pvn-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 44px; /* WCAG 2.2 AA target size */
padding: 10px 12px;
color: var(--pvn-ink-dim);
text-decoration: none;
font-size: 15px; /* spec-literal; compaction tier below handles 1024–1279px */
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 8px;
transition: color 160ms var(--pvn-ease), background-color 160ms var(--pvn-ease);
white-space: nowrap;
flex: 0 0 auto;
}
/* Red underline: grows in on hover, persists on the active section. */
.pvn-link::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: 4px;
height: 2px;
border-radius: 2px;
background: var(--pvn-accent);
transform: scaleX(0);
transform-origin: left center;
transition: transform 200ms var(--pvn-ease);
}
.pvn-link:hover {
color: var(--pvn-ink);
background: rgba(244, 239, 230, 0.05);
}
.pvn-link:hover::after {
transform: scaleX(1);
}
.pvn-link[aria-current="page"] {
color: var(--pvn-accent); /* 5.18:1 on noir — clears AA for text */
}
.pvn-link[aria-current="page"]::after {
transform: scaleX(1);
}
/* ---- Icon actions: search → /search/ (global page), account → /account/.
These are plain icon-links; the in-page search bar is a separate shared
component (two searches, two jobs — never merged). ---- */
.pvn-actions {
display: flex;
align-items: center;
gap: 4px;
margin-left: 8px;
flex: 0 0 auto;
}
.pvn-iconbtn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; /* WCAG 2.2 AA target size */
height: 44px;
border-radius: 50%;
color: var(--pvn-ink-dim);
text-decoration: none;
border: 1px solid transparent;
transition: color 160ms var(--pvn-ease), border-color 160ms var(--pvn-ease),
background-color 160ms var(--pvn-ease);
}
.pvn-iconbtn svg {
width: 18px;
height: 18px;
}
.pvn-iconbtn:hover {
color: var(--pvn-ink);
border-color: var(--pvn-line);
background: rgba(244, 239, 230, 0.05);
}
/* ---- Live dot: the lane mark for Previously Live. Red on noir. ---- */
.pvn-livedot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--pvn-accent);
box-shadow: 0 0 0 3px var(--pvn-accent-soft);
flex: 0 0 auto;
}
/* ---- Hamburger (mobile/tablet only) ---- */
.pvn-burger {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-left: auto;
background: transparent;
border: 1px solid var(--pvn-line);
border-radius: 12px;
color: var(--pvn-ink);
cursor: pointer;
transition: border-color 160ms var(--pvn-ease), background-color 160ms var(--pvn-ease);
}
.pvn-burger:hover {
border-color: rgba(244, 239, 230, 0.3);
background: rgba(244, 239, 230, 0.05);
}
.pvn-burger svg {
width: 20px;
height: 20px;
}
/* ---- Dropdown panel (mobile/tablet) ----
position:fixed, left:0, right:0 — never wider than the viewport, so no
horizontal overflow is possible at 390px. */
.pvn-panel {
display: none;
position: fixed;
top: var(--pvn-bar-h);
left: 0;
right: 0;
width: auto;
max-width: 100vw;
max-height: calc(100dvh - var(--pvn-bar-h));
overflow-y: auto;
overflow-x: hidden;
background: var(--pvn-bg-panel);
border-bottom: 1px solid var(--pvn-line);
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
overscroll-behavior: contain;
}
.pvn[data-open="true"] .pvn-panel {
display: block;
animation: pvn-drop 220ms var(--pvn-ease);
}
@keyframes pvn-drop {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.pvn-panel-list {
list-style: none;
margin: 0;
padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
}
.pvn-row {
position: relative;
display: flex;
align-items: center;
gap: 14px;
min-height: 56px;
padding: 12px 24px;
color: var(--pvn-ink-dim);
text-decoration: none;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.02em;
border-bottom: 1px solid rgba(244, 239, 230, 0.06);
}
.pvn-panel-list li:last-child .pvn-row {
border-bottom: none;
}
.pvn-row svg {
width: 19px;
height: 19px;
flex: 0 0 auto;
opacity: 0.8;
}
.pvn-row-label {
flex: 1 1 auto;
}
.pvn-row-chev {
width: 16px;
height: 16px;
color: var(--pvn-ink-faint);
flex: 0 0 auto;
}
.pvn-row:hover {
color: var(--pvn-ink);
background: rgba(244, 239, 230, 0.04);
}
.pvn-row[aria-current="page"] {
color: var(--pvn-ink);
background: var(--pvn-accent-soft);
}
.pvn-row[aria-current="page"]::before {
content: "";
position: absolute;
left: 0;
top: 10px;
bottom: 10px;
width: 3px;
border-radius: 3px;
background: var(--pvn-accent);
}
.pvn-row[aria-current="page"] .pvn-row-label {
color: var(--pvn-accent);
}
/* ---- Focus visibility (keyboard users): the token's focus indicator ---- */
.pvn a:focus-visible,
.pvn button:focus-visible {
outline: var(--pvn-focus);
outline-offset: 2px;
border-radius: 8px;
}
/* ---- Compaction tier: 1024–1279px. The full 10-item bar at spec-literal
sizes overflows below ~1280px; this tier shrinks type and gutters so all
10 sections stay visible with 44px targets intact. ---- */
@media (max-width: 1279px) and (min-width: 1024px) {
.pvn-bar {
padding: 0 16px;
gap: 16px;
}
.pvn-brand-name {
font-size: 17px;
}
.pvn-brand svg {
width: 24px;
height: 24px;
}
.pvn-link {
font-size: 12.5px;
letter-spacing: 0.06em;
padding: 10px 8px;
}
.pvn-link::after {
left: 8px;
right: 8px;
}
.pvn-actions {
margin-left: 4px;
}
}
/* ---- Mobile/tablet switch (<1024px): 56px bar, hamburger, panel ---- */
@media (max-width: 1023px) {
.pvn {
--pvn-bar-h: 56px;
}
.pvn-bar {
padding: 0 16px;
gap: 12px;
}
.pvn-links,
.pvn-actions {
display: none;
}
.pvn-burger {
display: inline-flex;
}
.pvn-brand-name {
font-size: 17px;
}
}
/* ---- Reduced motion: the panel appears instantly, no animation ---- */
@media (prefers-reduced-motion: reduce) {
.pvn *,
.pvn *::before,
.pvn *::after {
animation: none !important;
transition: none !important;
}
}
/* ---- Forced colors (Windows High Contrast): decoration steps aside,
structure stays visible. ---- */
@media (forced-colors: active) {
.pvn {
border-bottom: 1px solid CanvasText;
}
.pvn-link::after,
.pvn-row[aria-current="page"]::before {
background: CanvasText;
}
.pvn-livedot {
background: CanvasText;
box-shadow: none;
}
.pvn a:focus-visible,
.pvn button:focus-visible {
outline: 2px solid ButtonText;
outline-offset: 2px;
}
.pvn-burger {
border: 1px solid ButtonText;
}
.pvn-panel {
border-bottom: 1px solid CanvasText;
}
}
/* ---- Print: the nav is chrome — it never prints. (The hardened tokens
also hide nav[aria-label="Primary"]; this rule keeps the component
self-sufficient if tokens.css is absent.) ---- */
@media print {
.pvn {
display: none !important;
}
}