:root{ --off: #000000; --room: #08090A; /* the walls, barely not black */ --ash: #3A3A3A; --signal: #9A9A9A; --phosphor: #E8E6E1; /* warm white — all text */ --burn: #FFFFFF; /* RESERVED: live channel + buy */ /* The only chroma on the site. It is light, never ink. */ --cold: 168, 200, 232; /* Between --ash and --signal. The tuner has three states — resting, hover, tuned — and resting at --ash was 1.7:1 on --room, which is not readable on a control people are meant to click. Lifting it straight to --signal would have collided with the hover state, so this is its own step: about 3.7:1, clearly dimmer than --signal without being invisible. Still not for body copy; --signal remains the floor for that. */ --dim: #6B6B6B; --gap: clamp(1rem, 2.2vw, 2.1rem); --hair: 1px solid #191919; --mono: "DM Mono", ui-monospace, Menlo, monospace; --grot: "Archivo", system-ui, sans-serif; } *{ box-sizing:border-box; margin:0; padding:0; min-width:0; } html,body{ height:100%; max-width:100%; overflow:hidden; } /* The overscroll area on iOS takes its colour from the root element, not from body. Without this, rubber-banding past the top on an iPhone exposes the browser's own default backdrop under the room. */ html{ background:var(--off); } /* iOS paints a blue rectangle over any text it thinks you are selecting, and a drag on a fixed, non-scrolling element is easy to misread as a selection gesture rather than a scroll. The room is scenery — there is nothing in it anyone would want to copy — so it opts out entirely. The copy in .ui is deliberately NOT included: prices and format lists are worth selecting. -webkit-tap-highlight-color kills the separate flash iOS puts under a tap. */ .room, .room *{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; } *{ -webkit-tap-highlight-color:transparent; } body{ background: var(--off); color: var(--phosphor); font-family: var(--grot); -webkit-font-smoothing: antialiased; } /* Film grain over the whole room. Suppressed when the GL room is live (data-gl-ready on ) because the GL post pass already applies grain. */ body::after{ content:""; position:fixed; inset:-50%; pointer-events:none; z-index:80; opacity:.055; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 900ms steps(4,end) infinite; } :root[data-gl-ready="true"] body::after{ display:none; } /* The CSS room is the pre-JS paint and the no-WebGL2 fallback. Once the GL room is live it is dead weight sitting directly behind a canvas that covers it — and on a window resize the canvas reallocates its backing store and is blank for a frame or two, which let the CSS room flash through. Taking it out of the layer entirely is what stops that. It stays fully present when data-gl-ready is absent, which is the fallback path. */ :root[data-gl-ready="true"] .set{ display:none; } @keyframes grain{ 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)} 100%{transform:translate(0,0)} } /* ============================================================ THE ROOM */ .room{ position:fixed; inset:0; perspective: 1100px; perspective-origin: 44% 44%; background: var(--off); overflow:hidden; } /* back wall */ .wall{ position:absolute; left:0; right:0; top:0; height:62%; background: radial-gradient(120% 150% at 42% 78%, rgba(var(--cold), .085) 0%, rgba(var(--cold), .028) 26%, transparent 58%), linear-gradient(#050506, var(--room)); } /* skirting board — the line that sells the corner */ .wall::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1.4%; min-height:5px; background:linear-gradient(#101113, #060607); box-shadow:0 -1px 0 #17191C; } /* window on the back wall, blinds shut, night behind it */ .window{ position:absolute; left:5%; top:9%; width:19%; height:30%; background:linear-gradient(#0A0C10, #070809); box-shadow: inset 0 0 0 1px #0F1113, 0 0 50px 10px rgba(var(--cold),.025); } .window::before{ content:""; position:absolute; inset:6% 7%; background:repeating-linear-gradient( to bottom, rgba(var(--cold),.055) 0 1px, rgba(0,0,0,.5) 1px 8px); } /* The desk. This is the plane that used to be the floor — laid at a shallower angle and higher in frame, because you're sitting at it rather than standing in the room. The floor is gone entirely: the desk occludes it. */ .desk{ position:absolute; left:-60%; right:-60%; top:60%; height:150%; transform-origin: top center; transform: rotateX(68deg); background: radial-gradient(40% 30% at 44% 3%, rgba(var(--cold), .22) 0%, rgba(var(--cold), .07) 38%, transparent 70%), linear-gradient(#0D0E10 0%, #070708 40%, #000 100%); } /* Semi-gloss: the screen smears down the desk toward you. Masked to the pool of light so the surface stays black everywhere the telly isn't reaching. */ .desk::before{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(var(--cold),.13) 0%, rgba(var(--cold),.05) 14%, transparent 34%); -webkit-mask-image:radial-gradient(26% 30% at 44% 0%, #000 0%, transparent 76%); mask-image:radial-gradient(26% 30% at 44% 0%, #000 0%, transparent 76%); } /* the pool of light thrown forward across the desk */ .spill{ position:absolute; left:50%; top:58%; width:78%; height:42%; transform:translateX(-50%); pointer-events:none; background:radial-gradient(50% 50% at 44% 0%, rgba(var(--cold), .11) 0%, rgba(var(--cold), .035) 45%, transparent 72%); filter:blur(6px); } /* the telly's light thrown across the whole scene — sits above the wall and floor so it washes both, below the set so the box stays solid. This is what makes the room feel lit by the screen rather than tinted by CSS. */ .bloom{ position:absolute; left:44%; top:47%; width:150vmax; height:150vmax; transform:translate(-50%,-50%); pointer-events:none; z-index:1; background:radial-gradient(closest-side, rgba(var(--cold),.16) 0%, rgba(var(--cold),.085) 18%, rgba(var(--cold),.035) 34%, rgba(var(--cold),.012) 52%, transparent 72%); opacity:.55; transition:opacity .6s ease; /* the one ambient motion in the scene. a real screen never sits perfectly still, and an almost-imperceptible drift is the difference between a render and a room. brightness rather than opacity because opacity is already carrying the live/dead state below and the two would fight. */ animation:breathe 11s ease-in-out infinite alternate; } @keyframes breathe{ from{ filter:brightness(.86); } to { filter:brightness(1.08); } } /* a dead channel throws almost nothing */ body:has(.tv__screen[data-live="true"]) .bloom{ opacity:1; } /* ============================================================ THE SET */ .set{ position:absolute; /* 44% keeps the box clear of the tuner column at the narrowest desktop width; at 38% it slid underneath the channel list. */ left:44%; top:47%; transform:translate(-50%,-50%) rotateY(7deg); transform-style:preserve-3d; width:min(36vw, 52vh); z-index:2; /* above .bloom, so the box stays solid in the wash */ } /* The telly stands directly on the desk now — no unit. All that's left is the contact shadow, which is what actually makes it look like it's resting on something rather than floating. */ .unit{ position:absolute; left:50%; top:99.5%; width:96%; height:min(5vh,38px); transform:translateX(-50%); background:radial-gradient(60% 100% at 50% 0%, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 45%, transparent 78%); filter:blur(5px); } .tv{ position:relative; padding:2.6% 2.6% 6.4%; border-radius:12px; background:linear-gradient(#141516, #050506 66%); box-shadow: inset 0 1px 0 #26282B, inset 0 -1px 0 #000, 0 30px 70px -20px #000, 0 0 90px 14px rgba(var(--cold), .05); transition:box-shadow .5s ease; } .tv:has(.tv__screen[data-live="true"]){ box-shadow: inset 0 1px 0 #26282B, inset 0 -1px 0 #000, 0 30px 70px -20px #000, 0 0 150px 40px rgba(var(--cold), .10); } .tv__screen{ position:relative; width:100%; aspect-ratio:4/3; border-radius:6% / 8%; overflow:hidden; background:#000; box-shadow: inset 0 0 34px 8px #000; cursor:pointer; } /* a live channel is the room's light source — the glass itself has to emit */ .tv__screen[data-live="true"]{ background: radial-gradient(72% 62% at 50% 42%, rgba(var(--cold),.16) 0%, rgba(var(--cold),.05) 46%, #000 78%); } .tv__screen:focus-visible{ outline:2px solid var(--phosphor); outline-offset:5px; } .tv__foot{ position:absolute; left:0; right:0; bottom:1.6%; display:flex; align-items:center; justify-content:center; gap:.45rem; } .tv__brand{ font-family:var(--mono); font-size:.48rem; letter-spacing:.32em; color:#2C2E30; text-transform:uppercase; } .led{ width:4px; height:4px; border-radius:50%; background:#202224; } .led[data-on="true"]{ background:rgb(var(--cold)); box-shadow:0 0 7px rgba(var(--cold),.9); } /* layers inside the glass */ .layer{ position:absolute; inset:0; } /* canvas is a replaced element: inset:0 alone leaves it at its intrinsic size, which made sizeCanvas() shrink it on every pass. Pin it explicitly. */ #static{ z-index:1; width:100%; height:100%; } .media{ z-index:2; border:0; width:100%; height:100%; display:none; } .media[data-live="true"]{ display:block; } .card{ z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; text-align:center; padding:1rem; /* scrim so the channel name holds up against the snow behind it */ background:radial-gradient(58% 46% at 50% 50%, rgba(0,0,0,.82) 0%, rgba(0,0,0,.45) 62%, transparent 100%); } .card[hidden]{ display:none; } .card__pat{ width:min(38%,120px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 1px #232527; background:repeating-conic-gradient(#000 0 15deg, #0E0F10 15deg 30deg); } .card__pat span{ font-family:var(--mono); font-size:.55rem; letter-spacing:.2em; color:var(--signal); } .card__name{ font-variation-settings:"wdth" 125,"wght" 300; font-size:clamp(.9rem,1.9vw,1.5rem); letter-spacing:.2em; text-transform:uppercase; } .card__state{ font-family:var(--mono); font-size:.58rem; letter-spacing:.24em; color:var(--signal); text-transform:uppercase; } .card__play{ font-family:var(--mono); font-size:.56rem; letter-spacing:.22em; color:var(--burn); text-transform:uppercase; } .scan{ z-index:4; pointer-events:none; opacity:.5; background:repeating-linear-gradient(to bottom, rgba(0,0,0,.36) 0 1px, transparent 1px 3px); } .glass{ z-index:5; pointer-events:none; background: radial-gradient(118% 88% at 50% 50%, transparent 50%, rgba(0,0,0,.88) 100%), linear-gradient(158deg, rgba(255,255,255,.05) 0 24%, transparent 44%); } .burst{ z-index:6; pointer-events:none; opacity:0; background:var(--phosphor); } .tv__screen[data-tuning="true"] .burst{ animation: tune .34s steps(3,end); } @keyframes tune{ 0%{opacity:.45} 30%{opacity:.05} 60%{opacity:.28} 100%{opacity:0} } .tv__screen[data-boot="true"]{ animation: boot .62s cubic-bezier(.2,.8,.2,1); } @keyframes boot{ 0% { transform:scaleY(.004) scaleX(.7); filter:brightness(4); } 55% { transform:scaleY(.02) scaleX(1); filter:brightness(3); } 100%{ transform:scaleY(1) scaleX(1); filter:brightness(1); } } /* ==================================================== THE GEAR (SVG) */ /* Monitor speakers, on the desk, angled inward. SVG because these need real silhouettes — the old sofa was built from rounded rectangles and read as a rounded rectangle. The near edge of each cabinet is rim-lit by the screen, which is what sells the room as three-dimensional. */ /* z-index 1 puts these behind the CRT (z-index 2), so each cabinet is part occluded by the telly. That is how nearfields actually sit, and it keeps them tucked in the middle of the frame where the copy columns never reach — an earlier pass had the right one sitting directly behind the BUY button. */ .mon{ position:absolute; z-index:1; width:min(10vw, 14vh); height:auto; pointer-events:none; } /* flanked about the CRT's centre (44%), not about the viewport */ .mon--l{ left:19%; bottom:29%; transform:rotate(-1.2deg); } .mon--r{ left:57%; bottom:29%; transform:rotate(1.2deg) scaleX(-1); } .mon__body{ fill:#0A0B0C; } .mon__baffle{ fill:#0D0E10; } .mon__cone{ fill:#08090A; stroke:#151719; stroke-width:.6; } .mon__dust{ fill:#121416; } .mon__port{ fill:#050506; } /* rim: the edge facing the telly catches the light */ .mon__rim{ fill:none; stroke:rgba(var(--cold),.30); stroke-width:1.1; } .mon__led{ fill:rgba(var(--cold),.55); } /* MIDI keyboard, immediate foreground, heavily out of focus — this is your POV, you're sitting at the desk. Deliberately cropped by the frame. */ /* above the vignette: the vignette is centred on the screen, and anything it covers at the bottom of the frame goes to black — which erased these */ .fg{ position:absolute; inset:0; pointer-events:none; z-index:16; } .keys{ position:absolute; left:50%; bottom:-7%; width:min(78vw, 108vh); height:auto; transform:translateX(-50%); filter:blur(9px); } .keys__body{ fill:#000; } .keys__white{ fill:#0A0B0C; } .keys__black{ fill:#000; } /* the tops of the keys catch the screen */ .keys__lit{ fill:none; stroke:rgba(var(--cold),.26); stroke-width:1.6; } /* near edge of the desk, closest to you and furthest out of focus */ .fg__edge{ position:absolute; left:-5%; right:-5%; bottom:0; height:5%; background:linear-gradient(transparent, rgba(0,0,0,.75) 70%); filter:blur(8px); } /* The 3D room. Sits above the CSS room, which stays as the pre-JS paint and the no-WebGL fallback. No transition here on purpose. This used to crossfade in over .6s, and because the CSS room underneath is a genuinely different, cruder scene, the whole load read as the site showing an old version and then correcting itself. The reveal is now the warm-up curtain below: black, then the room. Snapping the canvas on under an opaque curtain is invisible; fading it in under a lifting curtain would show both rooms mixed together. */ .gl{ position:absolute; inset:0; width:100%; height:100%; z-index:15; pointer-events:none; opacity:0; image-rendering:pixelated; } .gl[data-ready="true"]{ opacity:1; } /* The warm-up curtain. Black until the renderer has something to show, which is also just what a CRT does. It sits above the canvas (15) and the foreground (16) but below the UI (20), so the tuner and the headline are readable immediately while the room comes up behind them. It lifts on html[data-gl-ready], set by room/boot.js on its first frame. Two ways out if that never happens, because a curtain that never lifts is a black page — worse than the flash it was added to fix: - no JavaScript at all: the