/* Endless Noir — home / the broadcast (frame 3a). Depends on deco.css. * * This page is the live player, so the markup carries a DOM contract player.mjs and * scripts/validate-live.mjs both depend on. The comp draws only the PLAYING state; the slots * below map the player's live elements onto it: * * #tune the turntable label — the single transport (tunes in, then toggles) * #kicker season · episode · aired, in the progress row * .meterwrap the 3px track; ::after renders attr(data-run) ("Run 23:04") * #meter the fill — its style.width IS the site's proof-of-playback * #scene the case-file paper card, shown on tune-in * #cast the CURRENT CHAPTER title, in the card eyebrow * #title episode title #hook episode description * #threads chapter chips (.thread, .thread.on = current), clickable to seek * #idle the pre-tune state that #scene replaces — not in the comp, derived here * #loglist "Previously Filed" — written live, the comp's three entries are placeholders * #foot status line */ /* ---- the fold: cover art under a three-stop scrim ------------------------------------- */ /* NOTE: no `overflow:hidden` on the body. The comp puts it on the 1180px frame container, * where it clips a preview tile; carried onto it propagates to the viewport and locks * page scroll outright — everything below the fold becomes unreachable. Clip here if ever * needed, never on the body. */ .fold { position: relative; overflow: hidden; } .fold-art { position: absolute; inset: 0; background-image: url(/assets/cover-2026.webp); background-size: cover; background-position: 50% 22%; opacity: .3; } .fold-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 7, 10, .58) 0%, rgba(8, 7, 10, .86) 44%, #08070a 74%); } .fold-inner { position: relative; padding: 38px var(--pad-x) 0; } .home .masthead { padding-bottom: 20px; margin-bottom: 54px; } /* ---- console: turntable + wordmark ---------------------------------------------------- */ .console { display: flex; align-items: center; gap: 64px; } .hero-copy { flex: 1 1 auto; min-width: 0; } .hero-copy .eyebrow { display: block; margin-bottom: 20px; } .hero-copy h1 { text-shadow: 0 0 40px rgba(201, 162, 74, .35); } .hero-copy h1 .n { color: var(--gold-bright); } .hero-copy .lede { margin: 26px 0 0; } /* ---- the turntable -------------------------------------------------------------------- */ /* Layers outside in: ray field, progress ring, record, three groove rings, sweeping light, * gold label. Everything is a circle — the one place border-radius is allowed. */ .turntable { flex: none; position: relative; width: 420px; height: 420px; } .turntable .rays { inset: -40px; --ray-hole: 46%; --ray-speed: 160s; } /* Every layer between the record and the button is decorative and must never eat the click — * the sweeping light in particular spins across the label. */ .tt-prog, .tt-record, .tt-groove, .tt-sweep { pointer-events: none; } /* The progress ring reads --prog (0-100), written by player.mjs in the same place it writes * #meter's width. Masking to a hairline is what makes it a ring rather than a pie. */ .tt-prog { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from -90deg, var(--gold-bright) calc(var(--prog, 0) * 3.6deg), rgba(201, 162, 74, .16) 0deg); -webkit-mask-image: radial-gradient(closest-side, transparent 96%, #000 96.5%); mask-image: radial-gradient(closest-side, transparent 96%, #000 96.5%); } .tt-record { position: absolute; inset: 16px; border-radius: 50%; background: radial-gradient(circle at 38% 30%, #211c16, #0a0807 68%); box-shadow: inset 0 0 60px rgba(0, 0, 0, .9), 0 26px 60px -22px rgba(0, 0, 0, .95); } .tt-groove { position: absolute; border-radius: 50%; } .tt-groove.g1 { inset: 40px; border: 1px solid rgba(201, 162, 74, .22); } .tt-groove.g2 { inset: 62px; border: 1px solid rgba(201, 162, 74, .14); } .tt-groove.g3 { inset: 84px; border: 1px solid rgba(201, 162, 74, .1); } .tt-sweep { position: absolute; inset: 30px; border-radius: 50%; animation: ringsweep 9s linear infinite; } .tt-sweep i { position: absolute; left: 50%; top: 0; width: 1px; height: 44px; background: linear-gradient(rgba(227, 195, 119, .85), transparent); } /* The single transport. */ #tune { position: absolute; inset: 118px; z-index: 1; border-radius: 50%; background: var(--grad-object); border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; box-shadow: 0 0 0 6px rgba(8, 7, 10, .9), 0 0 34px rgba(201, 162, 74, .35); transition: filter .2s, box-shadow .2s; } #tune:hover:not(:disabled) { filter: brightness(1.06); box-shadow: 0 0 0 6px rgba(8, 7, 10, .9), 0 0 48px rgba(201, 162, 74, .55); } #tune:disabled { cursor: default; filter: grayscale(.55) brightness(.7); } #tune .xport-cap { font-family: var(--cond); font-weight: 500; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #3b2f16; } /* Play / pause glyphs, drawn in CSS. player.mjs swaps .ic-play <-> .ic-pause on this element, * so both states must be styled here and nowhere else. */ .ic { display: block; position: relative; width: 20px; height: 22px; } .ic-play::before { content: ""; position: absolute; top: 0; left: 4px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--black-2); } .ic-pause::before, .ic-pause::after { content: ""; position: absolute; top: 0; width: 6px; height: 22px; background: var(--black-2); } .ic-pause::before { left: 1px; } .ic-pause::after { right: 1px; } /* ---- progress row + VU ---------------------------------------------------------------- */ .readout { display: flex; align-items: flex-end; gap: 30px; margin-top: 36px; } .progress { flex: 1; min-width: 0; } .meterwrap { position: relative; height: 3px; background: rgba(201, 162, 74, .18); margin-top: 9px; } .meterwrap::after { content: attr(data-run); position: absolute; right: 0; top: -20px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; } #kicker { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; max-width: 62%; overflow: hidden; text-overflow: ellipsis; } #meter { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); } .readout .vu { flex: none; } /* ---- case-file card + previously filed ------------------------------------------------ */ .filed { display: flex; gap: 26px; margin-top: 56px; align-items: stretch; } .casefile { flex: 1 1 0; padding: 30px 32px 34px; } .casefile .ring { right: -58px; bottom: -98px; width: 290px; transform: rotate(-14deg); } .casefile .stamp { right: 26px; top: 22px; } .cf-eyebrow { position: relative; display: flex; gap: 10px; align-items: baseline; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-label); margin-bottom: 12px; } #cast { color: var(--ink-muted); font-style: normal; } #cast:empty { display: none; } #title { position: relative; font-family: var(--deco); font-size: 28px; letter-spacing: .03em; text-transform: uppercase; line-height: 1.15; color: var(--ink); } #hook { position: relative; margin: 12px 0 0; font-family: var(--serif); font-style: italic; font-size: 15.5px; line-height: 1.6; color: #463b2b; max-width: 34ch; } /* Chapter chips. Clickable seeks — they must read as controls, not labels. */ #threads { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } #threads:empty { display: none; } .thread { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #5f4f30; border: 1px solid rgba(120, 90, 40, .38); padding: 6px 9px; cursor: pointer; background: rgba(255, 250, 235, .28); transition: border-color .2s, color .2s, background .2s; } .thread:hover { border-color: rgba(120, 90, 40, .7); color: var(--ink); } .thread.on { background: var(--grad-button); border-color: transparent; color: var(--black-2); } /* Pre-tune. Not in the comp — derived from the same paper stock so the card doesn't jump. */ #idle { position: relative; font-family: var(--serif); font-style: italic; font-size: 15.5px; line-height: 1.7; color: #4b4031; max-width: 36ch; } #idle b { font-style: normal; font-family: var(--cond); font-weight: 500; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); } .idle-cue { display: block; margin-top: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-label); font-style: normal; } .previously { flex: 0 0 300px; border: 1px solid var(--rule-mid); padding: 24px 26px; } .previously .label-sm { display: block; margin-bottom: 16px; } #loglist { list-style: none; margin: 0; padding: 0; } #loglist li { display: block; padding: 12px 0; border-top: 1px solid var(--rule-soft); line-height: 1.25; } #loglist li a { font-family: var(--deco); font-size: 19px; letter-spacing: .03em; text-transform: uppercase; color: #efe6d2; text-decoration: none; transition: color .2s; } #loglist li a:hover { color: var(--gold-bright); } #loglist li .c { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: none; color: var(--text-dim); margin-bottom: 4px; } #foot { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); margin: 22px 0 0; /* --text-dimmest fails AA at this size */ } /* ---- badges row ------------------------------------------------------------------------ */ .carried { display: flex; align-items: center; gap: 16px; margin-top: 34px; flex-wrap: wrap; } .carried .lead { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); } .carried .more { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); } .carried .more a { color: var(--text-dim); text-decoration: none; } .carried .more a:hover { color: var(--gold-bright); } /* ---- studio band ----------------------------------------------------------------------- */ .studio { position: relative; margin-top: 52px; height: 330px; overflow: hidden; } .studio img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; } .studio-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 7, 10, .9) 0%, rgba(8, 7, 10, .55) 38%, rgba(8, 7, 10, .1) 62%), linear-gradient(0deg, #08070a, transparent 34%); } .studio-copy { position: absolute; left: var(--pad-x); top: 50%; transform: translateY(-50%); max-width: 34ch; } .studio-copy .label-sm { display: block; letter-spacing: .44em; margin-bottom: 14px; } .studio-copy p { margin: 14px 0 0; font-family: var(--serif); font-style: italic; font-size: 16.5px; line-height: 1.6; color: #c2b79e; } /* ---- player states (10b) ---------------------------------------------------------------- */ /* The broadcast never stops, so there is no scheduled off-air. A dark lamp means one thing * only: something broke. Idle pulses a second ring on the transport; autoplay-blocked is one * quiet line with NO pulse and no takeover; error is the only state where the dot goes dark. */ .tt-pulse { position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(201, 162, 74, .28); animation: glowbreathe 2.6s ease-in-out infinite; pointer-events: none; } /* The pulse belongs to idle only — gone the moment the listener tunes in (or the browser * blocks the sound; the station is live, only this browser is silent). */ .is-tuned .tt-pulse, .is-blocked .tt-pulse { display: none; } .idle-case { display: block; margin-top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--paper-label); font-style: normal; } .idle-case:empty { display: none; } /* Error: a Try again control player.mjs renders into #foot. Outline-button styling at status * size — the row must still read as the station's own voice. */ #foot .retry { font-family: var(--cond); font-weight: 400; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--black-2); background: var(--grad-button); border: 0; padding: 10px 16px; margin-left: 14px; cursor: pointer; } #foot a { color: var(--nav); } #foot a:hover { color: var(--gold-bright); } /* ---- 8b tablet -------------------------------------------------------------------------- */ @media (max-width: 1179px) { .home .masthead { margin-bottom: 34px; } .console { gap: 38px; } .turntable { width: 300px; height: 300px; } .turntable .rays { inset: -26px; } .tt-record { inset: 12px; } .tt-groove.g1 { inset: 30px; } .tt-groove.g2 { inset: 48px; } .tt-groove.g3 { inset: 64px; } .tt-sweep { inset: 22px; } .tt-sweep i { height: 32px; } #tune { inset: 88px; } /* flex:none, not flex:1 1 0 — in a column the 0 basis plus .paper's overflow:hidden zeroes * the automatic minimum size and the card collapses to a sliver. */ .filed { flex-direction: column; } .casefile { flex: none; } .previously { flex: none; } .studio { height: 260px; } } /* ---- 8a phone --------------------------------------------------------------------------- */ @media (max-width: 599px) { /* Proto order: wordmark → lede → turntable → progress row → VU. display:contents lifts the * hero-copy children into the console flex so the turntable can sit between them. */ .console { flex-direction: column; align-items: stretch; gap: 0; } .hero-copy { display: contents; } .hero-copy .eyebrow { order: 1; margin-bottom: 12px; } .hero-copy h1 { order: 2; } .hero-copy .lede { order: 3; margin: 18px 0 26px; } .turntable { order: 4; margin: 0 auto; } .readout { order: 5; flex-direction: column; align-items: stretch; gap: 22px; margin-top: 26px; } .readout .vu { width: 170px; margin: 0 auto; } .filed { margin-top: 36px; gap: 20px; } .casefile { padding: 22px 22px 26px; } .casefile .ring { right: -52px; bottom: -80px; width: 200px; } .previously { padding: 20px 22px; } .studio { height: 200px; margin-top: 36px; } .studio img { object-position: 60% 46%; } .studio-copy { top: auto; bottom: 20px; transform: none; } .studio-copy p { display: none; } .carried { margin-top: 26px; } }