/* ========================================================================== COMPONENTS ========================================================================== */ /* ---- Nav ---- REBUILT AUG 13 2026 from the full-system drop's Nav.jsx. THE COLLAPSE IS DRIVEN BY SCROLL POSITION, NOT BY A BREAKPOINT IN TIME: js/nav.js writes --nav-p (0..1) over a 150px ramp and every value below interpolates across that same travel, so the header is a continuous mechanism rather than two states with a fade between them. The distance is deliberately short — about a flick of the wheel — because a long ramp reads as lag, not machinery. --nav-q is the SIZE travel; on mobile it is only 55% of --nav-p because the expanded state is already tight there and a full-depth collapse would be movement for its own sake. The veil/rule/tail always ride the full --nav-p. THE COLLAPSED BAR IS FULLY OPAQUE, AND THAT IS NOT NEGOTIABLE — the measured note below survives from the previous nav and is why the drop's own brief was overruled on this point. The .is-scrolled class some pages hardcode is INERT since this rebuild; at --nav-p:0 the bar already carries the same top protection gradient the hero uses, so links always have ground under them. */ .nav { position: fixed; inset-inline: 0; top: 0; z-index: 100; --nav-p: 0; /* written by js/nav.js on every frame */ --nav-q: var(--nav-p); /* size travel; damped on mobile below */ padding-block: calc(30px - 21px * var(--nav-q)); /* 30 → 9px */ background: linear-gradient(180deg, rgba(3, 4, 15, calc(0.78 + 0.22 * var(--nav-p))) 0%, rgba(3, 4, 15, calc(0.42 + 0.58 * var(--nav-p))) 55%, rgba(3, 4, 15, var(--nav-p)) 100%); border-bottom: 1px solid rgba(57, 71, 80, calc(0.85 * var(--nav-p))); /* NO-REPEAT IS THE FIX FOR A 1px BLACK LINE AT REST, not a tidiness habit. The gradient's box is the PADDING box (background-origin default), but the paint area includes the transparent 1px border below it — and the default background-repeat tiled the gradient's FIRST row (alpha .78, near black) into that strip. Result: a hairline under the bar at --nav-p:0, sitting on the footage, vanishing once the bar went opaque. Isolated Aug 14 2026 by toggling one property at a time and diffing the pixel row (y=91 at 1440): border:none +69.8 brightness, background:none +69.8, tail/scrim/video 0. */ background-repeat: no-repeat; will-change: padding-block; } /* OPAQUE, not 92% + blur. MEASURED 2026-08-04. The scrolled nav used to be rgba(3,4,15,0.92) with a 6px backdrop blur, which let 8% of whatever sits behind it through. That is invisible over the black page and it was invisible for months — until you jump to #tracks, which parks the hero's CTA row directly behind the bar: at that scroll position .hero__ctas spans viewport -28..22, so the solid WHITE "Enter the World" button sits under the nav. Eight percent of white is not nothing. It read as a lit rectangle inside the bar with the hero video moving behind it, ending in a hard horizontal edge a few pixels above the nav's own hairline. Isolated by removing one thing at a time and re-measuring the nav band: hiding .hero__ctas changed it by max 19.0 across 6,495 px hiding .hero__content changed it by max 19.0 across 6,495 px (same pixels) hiding .hero__media changed it by max 1.4 across 0 px So it was the buttons, not the footage — the video was just what you could see moving behind them. In the collapse model this holds because the gradient's bottom stop reaches alpha 1 at exactly the scroll distance (150px) that parks anything behind the bar — by the #tracks landing position --nav-p is 1 and the bar is solid. No blur: the system's glass belongs to the spine cards, and borrowing it here would soften an element whose whole job is to be a hard edge. "Visually connected underneath" is delivered by a short gradient TAIL below the bar instead, so the join is soft without the bar itself leaking. */ .nav::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px; pointer-events: none; background: linear-gradient(180deg, rgba(3, 4, 15, calc(0.9 * var(--nav-p))) 0%, rgba(3, 4, 15, 0) 100%); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); } /* The mark SCALES rather than being swapped for an initial — the identity thins with the bar instead of being replaced by a different one. */ .nav__mark { display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: var(--display-wght); font-stretch: var(--display-stretch); font-variation-settings: "wdth" var(--display-wdth), "wght" var(--display-wght); text-transform: uppercase; font-size: calc(19px - 4.5px * var(--nav-q)); /* 19 → 14.5px */ letter-spacing: var(--tracking-heading); text-decoration: none; white-space: nowrap; color: var(--color-white); text-shadow: 0 0 3px rgba(3, 4, 15, 0.98), 0 1px 2px rgba(3, 4, 15, 0.92); } .nav__mark img { width: calc(20px - 5px * var(--nav-q)); /* 20 → 15px */ height: calc(20px - 5px * var(--nav-q)); } .nav__links { display: flex; gap: calc(34px - 15px * var(--nav-q)); /* 34 → 19px */ list-style: none; margin: 0; padding: 0; } /* THE NAV SITS ON FOOTAGE, SO IT CANNOT USE --text-secondary. The cold palette's secondary (#9DB2C0) is materially darker than the warm bone it replaced; over a bright frame it measures ~1.3:1 and the inactive labels disappear. Links over imagery read from --spine-glow at reduced alpha and carry the two-pass legibility shadow instead. */ .nav__links a { text-decoration: none; font-family: var(--font-label); font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: rgba(228, 232, 235, 0.82); text-shadow: 0 0 3px rgba(3, 4, 15, 0.98), 0 1px 2px rgba(3, 4, 15, 0.92); } .nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--color-white); } /* SEVEN ITEMS DO NOT FIT THE ROW AT ITS NARROWEST, SO THE GAP TIGHTENS EARLY. The row is only used from 769px up; below that the fullscreen menu takes over. With six items it cleared 769px with 27px to spare. The Album entry added Aug 27 2026 pushed the list PAST the container's right edge there, and the overflow was INVISIBLE to scrollWidth because .nav is position:fixed — it showed up only in a screenshot, as a clipped label at the right edge. Measured at 769px with the longest label considered: gap 34 -> 62px over, 28 -> 26 over, 24 -> 2 over, 22 -> clears by 10px. 22px is the value because the row ALREADY reaches 19px once scrolled, so this is the scrolled spacing arriving early on narrow screens rather than a new number in the design. The scrolled endpoint stays 19px, unchanged. 840 is the upper bound: "Album" clears the row unaided from 804px, so this covers that with margin and stops before widths that never needed it. IF AN EIGHTH ITEM IS EVER ADDED, RE-MEASURE — do not assume this still holds. */ @media (min-width: 769px) and (max-width: 840px) { .nav__links { gap: calc(22px - 3px * var(--nav-q)); } /* 22 → 19px */ } /* Mobile travels less — see the header note. 760 is the collapse spec's own breakpoint (it pairs with --nav-h-max in tokens.css); the fullscreen menu below keeps its historical 768. */ @media (max-width: 760px) { .nav { --nav-q: calc(var(--nav-p) * 0.55); padding-block: calc(18px - 8px * var(--nav-q)); /* 18 → ~13.6px */ } .nav__mark { font-size: calc(17px - 3px * var(--nav-q)); } .nav__mark img { width: calc(17px - 3px * var(--nav-q)); height: calc(17px - 3px * var(--nav-q)); } } .nav__toggle { display: none; background: none; border: 1px solid var(--border-subtle); color: var(--text-primary); padding: var(--space-2) var(--space-3); font-family: var(--font-mono); cursor: pointer; } @media (max-width: 768px) { .nav__links { position: fixed; inset: 0; top: 0; background: var(--color-black); flex-direction: column; justify-content: center; align-items: center; gap: var(--space-8); transform: translateY(-100%); transition: transform var(--motion-base) var(--ease-standard); } .nav__links.is-open { transform: translateY(0); } .nav__links a { font-size: var(--fs-h3); } .nav__toggle { display: block; z-index: 101; position: relative; } } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); /* Buttons are interface type — Rajdhani, like the nav and every chip. The display face at button size closes up and stops being readable. */ font-family: var(--font-label); font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; text-decoration: none; padding: var(--space-3) var(--space-6); /* 44px MINIMUM — THE TOUCH TARGET (Aug 21 2026). This height is padding-derived: --space-3 (12px) top and bottom against a --fs-label line. --space-3 is a fixed 12px but --fs-label is FLUID, so the button shrinks with the viewport — and it is smallest exactly where the target matters. MEASURED across all ten root pages: 47.4px at 1440, and at 390 connect.html's "Join the Signal" came out at 42px, the number css/purchase.css already had written down. A min-height rather than more padding, because padding would move every button on the site at every width to fix the one width that is short. Nothing at 1440 changes: 44 is under the 47.4 those already measure. IT ALSO CATCHES THE OVERRIDES. .track-focus-panel__actions .btn sets its own tighter padding (0.55rem) to keep five actions on one row and measured 40.2px at BOTH widths — the worst targets on the site, and the ones the "42px site-wide" note missed. min-height lifts them to 44 without touching the horizontal padding that row depends on. css/purchase.css pinned this on its three CTAs first and said the site-wide version belonged here. It is here now, and that pin is gone — one source of truth, so a future change to this number reaches the purchase page too. */ min-height: 44px; border: 1px solid var(--color-white); border-radius: var(--radius-sharp); transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); cursor: pointer; } .btn--primary { background: var(--color-white); color: var(--color-black); } /* color is re-declared, not inherited. An (merch.html) otherwise loses it on hover: a:hover in css/base.css is (0,1,1) and beats the (0,1,0) .btn--primary rule above, repainting the label bone on a bone background. .btn--ghost:hover already re-declares color and was never hit; purchase.html uses