/* ───────────────────────────────────────────────────────────── Bachapan The artwork carries all the colour. Everything the app draws on top is neutral glass, so it sits on whatever background lands in phase 3 without being retuned. ───────────────────────────────────────────────────────────── */ :root { --edge: clamp(1rem, 2.2vw, 1.75rem); --glass: rgba(255, 255, 255, 0.1); --glass-line: rgba(255, 255, 255, 0.2); --shadow-glass: 0 8px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25); --text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); --swift: 160ms cubic-bezier(0.2, 0, 0.2, 1); --glide: 420ms cubic-bezier(0.2, 0, 0.2, 1); /* Baloo 2 is the Devanagari member of the family. The fallbacks are the Devanagari faces that ship with Windows, macOS and Android, for the moment before the webfont lands. */ --display: 'Baloo 2', 'Nirmala UI', 'Kohinoor Devanagari', 'Noto Sans Devanagari', ui-rounded, system-ui, sans-serif; --ui: system-ui, -apple-system, 'Segoe UI', sans-serif; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; color: #fff; font-family: var(--ui); background: #0b0b12; display: flex; flex-direction: column; overflow-x: hidden; text-shadow: var(--text-shadow); } /* ── The stage ─────────────────────────────────────────────── The room loop and the YouTube feed live on one surface, sized and placed entirely by layoutStage() in app.js — the stage is always exactly frame-shaped, so a percentage here is a percentage of the footage. Nothing in this block chooses its own dimensions. ──────────────────────────────────────────────────────────── */ .stage { position: fixed; left: 0; top: 0; /* No negative z-index: that painted the stage behind the page and made the television unclickable — a click at the tube hit . As the first positioned element in the DOM it already stacks under the veil and the chrome; it just needs main to be positioned too (see main). */ transform-origin: 0 0; background: #14100e; /* warm, for the beat before the poster paints */ } .stage__video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; /* The stage replicates cover-fitting itself, so the video just fills it. */ object-fit: fill; } /* ── The tube ──────────────────────────────────────────────── An untransformed 420×320 box (SCREEN in app.js) that the matrix3d presses onto the CRT's measured corners. Everything that makes it read as a tube — crop, cast, glass, glow — rides inside, so it all lands at the same angle. ──────────────────────────────────────────────────────────── */ .tv { position: absolute; left: 0; top: 0; width: 420px; height: 320px; transform-origin: 0 0; will-change: transform; overflow: hidden; background: #060505; /* CRT corners: generous and slightly uneven, like moulded glass. */ border-radius: 7% 8% 8% 7% / 9% 10% 10% 9%; /* Phosphor spill onto the bezel around the tube. Transforms carry shadows, so the glow sits on the footage at the tube's own angle. */ box-shadow: 0 0 42px 10px rgba(150, 190, 255, 0.16); } /* Pan-and-scan plus overscan. A 2000s set did both to a 16:9 broadcast: cropped the sides to fill a 4:3 tube, and pushed every edge of the picture past the glass. Overscan is also what deletes YouTube's chrome — the title band, avatar and pause overlays live in the top and bottom 48 iframe-pixels, so the iframe runs 48px past the tube on each edge and the chrome falls outside the visible glass. height = 320 + 2×48 = 416; width = 416 × 16/9 ≈ 740; left = -(740 − 420)/2 = -160. */ .tv__crop { position: absolute; inset: 0; } .tv__crop iframe { position: absolute; top: -48px; left: -160px; width: 740px; height: 416px; border: 0; /* The 2000s-tube cast: a little hot, a little warm, never quite black. */ filter: saturate(1.14) contrast(1.07) brightness(0.99) sepia(0.09); /* Hover chrome never fires and a stray click can't desync the player. The tube itself is the click target — see the handler in app.js. */ pointer-events: none; } /* Glass, in three coats on one element: scanlines, a curved-glass glare falling from the upper left, and an edge vignette that rounds the picture off into the tube. Decorative, so pointer events pass through to the player underneath. */ .tv__glass { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: repeating-linear-gradient( 0deg, rgba(4, 2, 2, 0.16) 0, rgba(4, 2, 2, 0.16) 1.5px, transparent 1.5px, transparent 4.5px ), linear-gradient(112deg, rgba(255, 246, 228, 0.1) 4%, transparent 30%), radial-gradient(105% 100% at 50% 46%, transparent 58%, rgba(2, 1, 3, 0.5) 100%); } /* Paused means switched off — a television has no pause. The dark tube is also what keeps YouTube's paused-state overlays permanently out of sight: the feed they decorate is behind an unpowered screen. The glass glare stays above this shade, so a dead tube still reflects the room. */ .tv { cursor: pointer; } .tv__off { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(90% 80% at 50% 47%, #0c0b0e 0%, #030303 75%); /* The dark settles just after the collapse line has flashed. */ transition: opacity 200ms ease 140ms; } .tv.is-off .tv__off { opacity: 1; } /* The dying picture: collapses to a bright horizontal line, which shrinks away — the way a real tube let go of its charge. */ .tv__off::after { content: ''; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: #fff; box-shadow: 0 0 18px 5px rgba(215, 228, 255, 0.9); opacity: 0; } .tv.is-off .tv__off::after { animation: crt-die 340ms ease-out; } @keyframes crt-die { 0% { opacity: 0.95; transform: scaleY(110); } 55% { opacity: 0.9; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1) scaleX(0.1); } } /* And the wake: the picture blooms open from a line, briefly too bright, then settles. Never fires on page load because the set starts .is-off. */ .tv:not(.is-off) .tv__crop { animation: crt-wake 360ms ease-out; } @keyframes crt-wake { 0% { transform: scaleY(0.02); filter: brightness(4) saturate(0.2); } 60% { transform: scaleY(1.03); filter: brightness(1.6) saturate(0.75); } 100% { transform: none; filter: none; } } /* Analogue static for channel changes: two interference combs sliding against each other under a flicker. Sits dormant at opacity 0. */ .tv__static { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: repeating-linear-gradient(0deg, #e8e4da 0 1px, #17130f 1px 3px, #9a938a 3px 4px), repeating-linear-gradient(94deg, rgba(255, 255, 255, 0.5) 0 2px, transparent 2px 5px); } .tv.is-zapping .tv__static { animation: static-burst 380ms steps(6, end); } @keyframes static-burst { 0% { opacity: 0.9; background-position: 0 0, 0 0; } 35% { opacity: 0.75; background-position: 0 7px, 3px 0; } 70% { opacity: 0.85; background-position: 0 3px, -2px 0; } 100% { opacity: 0; background-position: 0 11px, 5px 0; } } /* ── Legibility bands ──────────────────────────────────────── The old radial scrim died with the still background — it would smother the scene we just went to this trouble to stage. All the chrome lives at the top and bottom edges, so only those get a gradient; the middle stays untouched. ──────────────────────────────────────────────────────────── */ .veil { position: fixed; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(6, 4, 8, 0.58) 0%, transparent 16%), linear-gradient(0deg, rgba(6, 4, 8, 0.66) 0%, rgba(6, 4, 8, 0.28) 18%, transparent 32%); } /* ── Top bar ─────────────────────────────────────────────────── */ .topbar { position: relative; /* above the stage without leaving the flow */ display: flex; align-items: center; gap: 0.9rem; padding: var(--edge); font-size: 0.8rem; font-weight: 600; color: rgba(255, 255, 255, 0.72); /* The bug owns the top-right corner now, so the whole cluster — clock, watching, live — keeps to the left like a broadcast ticker. */ justify-content: flex-start; } .presence::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 0.45rem; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px rgba(74, 222, 128, 0.9); } /* The label is constant. State is the dot plus the dimming — a control whose text changes makes you stop and decide whether it's reporting the state or naming the action. */ .live { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.25rem 0.8rem 0.25rem 0.65rem; border: 1px solid var(--glass-line); border-radius: 999px; background: var(--glass); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); color: rgba(255, 255, 255, 0.45); font: inherit; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: color var(--swift), border-color var(--swift), opacity var(--swift); } .live__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; transition: box-shadow var(--swift); } .live:hover { color: rgba(255, 255, 255, 0.75); } .live.is-on { color: #4ade80; border-color: rgba(74, 222, 128, 0.45); } .live.is-on .live__dot { box-shadow: 0 0 8px rgba(74, 222, 128, 0.9); } /* ── Layout ──────────────────────────────────────────────────── */ main { /* Positioned so its content paints above the stage — static content would slip underneath a positioned sibling regardless of DOM order. */ position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; /* The room is the hero; the chrome settles to the bottom edge and leaves the scene alone. */ justify-content: flex-end; gap: clamp(0.6rem, 2.5vh, 1.1rem); padding: 0 var(--edge) var(--edge); min-height: 0; /* Let clicks aimed at the television fall through the empty column and reach the player; each real control re-enables itself below. */ pointer-events: none; } .line, .dock { pointer-events: auto; } /* ── The channel bug ───────────────────────────────────────── The wordmark, demoted the way television demotes its own name: a translucent bug parked in the top-right corner for the whole broadcast. It labels the channel without ever competing with the programme. ──────────────────────────────────────────────────────────── */ .bug { position: fixed; top: calc(var(--edge) * 0.75); right: var(--edge); margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1; letter-spacing: 0.02em; color: rgba(245, 238, 226, 0.8); text-shadow: 0 0 16px rgba(255, 196, 110, 0.4), 0 1px 4px rgba(0, 0, 0, 0.65); pointer-events: none; } /* ── Between-programmes line ─────────────────────────────────── */ .line { display: flex; align-items: center; gap: 0.6rem; font-family: var(--display); /* Quieter than before — it sits over the footage now, and its job is a murmur between programmes, not a headline. */ font-size: clamp(0.9rem, 2vw, 1.1rem); color: rgba(255, 255, 255, 0.75); text-align: center; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75); } .line__text { margin: 0; transition: opacity 250ms ease; } .line__text.is-swapping { opacity: 0; } .line__next { border: 0; background: none; color: inherit; font-size: 0.95rem; cursor: pointer; opacity: 0.35; transition: opacity var(--swift); } .line__next:hover { opacity: 1; } /* ── The dock: guide sits directly above the player pill ─────── */ .dock { width: 100%; max-width: 30rem; display: flex; flex-direction: column; gap: 0.6rem; } /* ── The player ──────────────────────────────────────────────── */ .player { display: flex; align-items: center; gap: 0.7rem; padding: 0.4rem 0.9rem 0.4rem 0.4rem; border: 1px solid var(--glass-line); border-radius: 999px; background: var(--glass); backdrop-filter: blur(28px) saturate(150%); -webkit-backdrop-filter: blur(28px) saturate(150%); box-shadow: var(--shadow-glass); } /* Title card as a spinning record. */ .disc { position: relative; flex: none; width: 3.25rem; height: 3.25rem; transition: transform var(--glide); } .player.is-playing .disc { transform: scale(1.03); } .disc__ring { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #1a1a1a; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); outline: 1px solid rgba(255, 255, 255, 0.2); outline-offset: -1px; animation: spin 8s linear infinite; animation-play-state: paused; } .player.is-playing .disc__ring { animation-play-state: running; } @keyframes spin { to { transform: rotate(360deg); } } .disc__art { display: block; width: 100%; height: 100%; object-fit: cover; } /* build-tracks.mjs centre-crops covers to square with ffmpeg. If it wasn't installed they're still 16:9, and object-fit alone would show pillar bars inside the circle — scale past them. */ .disc__art.is-wide { transform: scale(1.34); } .disc__hub { position: absolute; left: 50%; top: 50%; width: 0.5rem; height: 0.5rem; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(0, 0, 0, 0.7); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4); } .meta { flex: 1; min-width: 0; } /* Titles crossfade on track change instead of snapping. */ .meta__title, .meta__show { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 220ms ease; } .player.is-swapping .meta__title, .player.is-swapping .meta__show { opacity: 0; } .meta__title { font-weight: 700; font-size: 0.84rem; line-height: 1.25; } /* Often empty — most entries are just a show name with nothing else known. Reserve the line so the pill doesn't change height between tracks. */ .meta__show { font-size: 0.71rem; font-weight: 600; line-height: 1.25; min-height: 1.25em; /* exactly one line box, so empty and filled match */ color: rgba(255, 255, 255, 0.7); } /* ── Seek ────────────────────────────────────────────────────── */ .seek { position: relative; height: 10px; margin-top: 0.2rem; cursor: pointer; touch-action: none; } .seek__rail { position: absolute; inset-inline: 0; top: 50%; height: 3px; transform: translateY(-50%); border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.2); } /* Driven by scaleX rather than width — width is a layout property and janks; a transform rides the compositor at 60fps. */ .seek__fill { display: block; height: 100%; width: 100%; border-radius: 999px; background: rgba(255, 255, 255, 0.9); transform: scaleX(0); transform-origin: left center; will-change: transform; } /* Positioned by transform in the rAF loop, so `left` stays at 0. */ .seek__knob { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity var(--swift); will-change: transform; } .seek:hover .seek__knob, .seek:focus-visible .seek__knob { opacity: 1; } .time { margin: 0.05rem 0 0; font-size: 0.62rem; font-weight: 600; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.6); } /* ── Controls ────────────────────────────────────────────────── */ .controls { display: flex; align-items: center; gap: 0.15rem; flex: none; } .btn { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; /* A button carries a UA padding of 1px 6px. With box-sizing: border-box that eats 12px out of the width, so on small screens the content box was narrower than the icon inside it — and a grid item wider than its track stops centring and aligns to the start instead. That is what pushed the play triangle off-centre in the circle. */ padding: 0; border: none; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, 0.8); cursor: pointer; transition: background var(--swift), color var(--swift), transform var(--swift); } .btn svg { width: 15px; height: 15px; } .btn:hover { background: rgba(255, 255, 255, 0.15); color: #fff; } .btn:active { transform: scale(0.92); } .btn:disabled { opacity: 0.4; cursor: default; } .btn--play { width: 2.25rem; height: 2.25rem; background: #fff; color: #000; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); } .btn--play svg { width: 17px; height: 17px; } .btn--play:hover { background: #fff; color: #000; } /* The play/pause swap is pure CSS off .player.is-playing — no DOM writes on a state change that happens every few seconds. */ .i-pause, .player.is-playing .i-play { display: none; } .player.is-playing .i-pause { display: block; } .btn.is-on { color: #fff; background: rgba(255, 255, 255, 0.18); } /* ── Channel guide ───────────────────────────────────────────── */ .guide { max-height: 0; overflow: hidden; opacity: 0; transition: max-height var(--glide), opacity var(--glide); } .guide.is-open { max-height: min(42vh, 22rem); overflow-y: auto; opacity: 1; overscroll-behavior: contain; /* The scrollbar is part of the guide, so it dresses like it — a thin warm-glass thumb on no track, not the browser's default chrome. */ scrollbar-width: thin; scrollbar-color: rgba(255, 240, 220, 0.28) transparent; } .guide.is-open::-webkit-scrollbar { width: 8px; } .guide.is-open::-webkit-scrollbar-track { background: transparent; } .guide.is-open::-webkit-scrollbar-thumb { border-radius: 999px; border: 2px solid transparent; /* inset the thumb from the guide's edge */ background: rgba(255, 240, 220, 0.28); background-clip: padding-box; } .guide.is-open::-webkit-scrollbar-thumb:hover { background: rgba(255, 240, 220, 0.45); background-clip: padding-box; } .guide__items { margin: 0; padding: 0.35rem; list-style: none; border: 1px solid var(--glass-line); border-radius: 1.35rem; background: var(--glass); backdrop-filter: blur(28px) saturate(150%); -webkit-backdrop-filter: blur(28px) saturate(150%); box-shadow: var(--shadow-glass); } .guide__items button { display: flex; flex-direction: column; gap: 0.05rem; width: 100%; padding: 0.5rem 0.75rem; border: 0; border-radius: 0.7rem; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background var(--swift); } .guide__items button:hover { background: rgba(255, 255, 255, 0.12); } .guide__items li.is-current button { background: rgba(255, 255, 255, 0.16); } /* YouTube refused to play this one. Leave it visible but obviously out of service, rather than silently vanishing a row mid-scroll. */ .guide__items li.is-dead button { opacity: 0.35; text-decoration: line-through; } .g-title { font-size: 0.78rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .g-show { font-size: 0.68rem; font-weight: 600; line-height: 1.25; min-height: 1.25em; color: rgba(255, 255, 255, 0.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Tooltip ───────────────────────────────────────────────── One shared bubble, wearing the same glass as the pill and the guide. Placed with a transform by showTip() in app.js; left/top stay 0. ──────────────────────────────────────────────────────────── */ .tip { position: fixed; left: 0; top: 0; z-index: 10; max-width: 19rem; padding: 0.55rem 0.85rem; border: 1px solid var(--glass-line); border-radius: 0.85rem; background: rgba(22, 15, 11, 0.82); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14); font-size: 0.74rem; font-weight: 600; line-height: 1.5; color: rgba(255, 250, 240, 0.94); pointer-events: none; } .tip[hidden] { display: none; } /* ── Credit ────────────────────────────────────────────────── Where credit is due, quietly. ──────────────────────────────────────────────────────────── */ .credit { position: fixed; right: var(--edge); bottom: calc(var(--edge) * 0.6); margin: 0; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.34); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } .credit a { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; } .credit a:hover { color: rgba(255, 255, 255, 0.65); } /* ── The source ────────────────────────────────────────────── The credit's twin in the opposite corner. Everything visual is inherited from .credit deliberately — same size, weight, tracking, dotted underline — because two footnotes at two different scales look like an accident, and these are the same kind of remark. ──────────────────────────────────────────────────────────── */ .source { position: fixed; left: var(--edge); bottom: calc(var(--edge) * 0.6); margin: 0; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.34); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } .source a { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; } .source a:hover { color: rgba(255, 255, 255, 0.65); } /* Devanagari at this size needs the extra body to stay readable, and the playlist's own name is the part worth reading. */ .source__name { font-family: var(--display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0; } /* The dock is a centred 30rem pill anchored to this same bottom edge, so the left corner is only free once the viewport leaves a label's width beside it. The label and the pill first stop touching at 770px and the gap is only comfortable by 790px, so the cutoff is 50rem — narrower than that, the text would cross the pill's bottom-left curve. The credit opposite keeps its own 480px cutoff: it's a wider label with a different clearance, and below this width the bottom-right on its own is simply how the site looked before this link existed — not a broken half of a pair. */ @media (max-width: 50rem) { .source { display: none; } } /* ── Small screens ───────────────────────────────────────────── */ @media (max-width: 480px) { .controls { gap: 0; } .btn { width: 1.6rem; height: 1.6rem; } /* Must be restated, not inherited. `.btn` and `.btn--play` are both one class deep, so the rule above — later in the file — was winning on source order alone and flattening play to the size of prev/next. The play button is meant to be the one thing your thumb finds without looking, so it keeps a size of its own here too. */ .btn--play { width: 2rem; height: 2rem; } /* The dock spans nearly the full width here and would sit on top of it. */ .credit { display: none; } } /* ── Respect the setting ─────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } /* Except the record, which is the one animation that carries meaning — it's how you tell playing from paused at a glance. */ .player.is-playing .disc__ring { animation: spin 8s linear infinite !important; } }