/* GenWave spectator page — "Wireless" design tokens (.claude/skills/design-aesthetic). Hand-written, no build step: vendored woff2 fonts (never a font CDN), semantic custom-property tokens (never raw hex in rules below the :root block), warm neutrals only. These are the F102.7 never-unstyled FALLBACK, not a live mirror: GET /spectator/theme.css (the runtime composer, rendered from the theme manifest) is the single LIVE source, and it loads AFTER this sheet in index.html — overriding it — so the two surfaces read as one system via the composer, not via this hand-authored block being kept in lockstep with admin-ui/app/globals.css. This block is reached only while that composed sheet is slow, failed or absent (a failure is console.warn'd by switcher.js so the degraded path is observable, not silent). It is hand-kept equal to globals.css's own fallback tokens for their shared semantic set (T168, SPEC F102.16) — a cross-surface parity guard in admin-ui/__specs__/theme-selection.spec.tsx covers exactly that pair, never the live render. The theme switcher (STORY-266, PLAN T166) overturns F63's original "no interactive chrome" ruling — dark still ships via prefers-color-scheme by default, but an explicit choice (the theme-switcher section below) now overrides it via [data-theme] on . */ @font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-variable-latin.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; } @font-face { /* Regular weight only — matches admin-ui's italic usage (wordmark, track titles never combine italic with the 600 weight, so no face requests weight 600 italic and the browser never falls back to faux-bold synthesis). */ font-family: "Fraunces"; src: url("/fonts/fraunces-italic-variable-latin.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Source Sans 3"; src: url("/fonts/source-sans-3-variable-latin.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; } :root { /* light — "Cat's Whisker" (default) */ --bg: #f6efe3; --surface: #fdf8ee; --surface-2: #efe5d2; --line: #ddd0b8; --ink: #2b2320; /* darkened from #77685c — see admin-ui/app/globals.css for the AA rationale (T158/T174) */ --mute: #706256; --accent: #b94f29; --accent-ink: #fdf8ee; --accent-2: #6f632f; --danger: #a63325; --danger-ink: #fdf8ee; --success: #5c7a3f; --font-display: "Fraunces", Georgia, serif; --font-sans: "Source Sans 3", system-ui, sans-serif; } @media (prefers-color-scheme: dark) { :root { /* dark — "walnut & brass" (a tuned token set, not a naive inversion) */ --bg: #1e1713; --surface: #2a211b; --surface-2: #241c16; --line: #3f342a; --ink: #f0e7d8; --mute: #a89a88; --accent: #d96a3d; --accent-ink: #1e1713; --accent-2: #b3a25e; --danger: #e06a55; --danger-ink: #2a211b; --success: #8fae6a; } } * { box-sizing: border-box; } body { margin: 0; background-color: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 1rem; line-height: 1.5; } a { color: var(--accent); } a:focus-visible, audio:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .shell { max-width: 640px; margin: 0 auto; padding: 1.5rem 1rem 3rem; display: flex; flex-direction: column; gap: 1rem; } .masthead { padding: 0.5rem 0 0.25rem; } .masthead__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Theme switcher (STORY-266) — the page's first interactive chrome ──────── */ .theme-switcher { flex: none; display: flex; align-items: center; gap: 0.4rem; } .theme-switcher__select { min-height: 40px; padding: 0 1.6rem 0 0.65rem; border: 1px solid var(--line); border-radius: 6px; background-color: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 0.8rem; } .theme-switcher__mode { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 6px; background-color: var(--surface); color: var(--mute); cursor: pointer; transition: background-color 120ms ease-out, color 120ms ease-out; } .theme-switcher__mode:hover { background-color: var(--surface-2); color: var(--ink); } .theme-switcher__select:focus-visible, .theme-switcher__mode:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-switcher__icon { width: 18px; height: 18px; } /* Default (before switcher.js resolves a mode): show the moon, matching the light-first default every other unstyled state on this page already assumes. */ .theme-switcher__icon--sun { display: none; } .theme-switcher__mode[data-current-mode="dark"] .theme-switcher__icon--moon { display: none; } .theme-switcher__mode[data-current-mode="dark"] .theme-switcher__icon--sun { display: block; } .eyebrow { margin: 0 0 0.25rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-2); } .wordmark { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.9rem; } .card { background-color: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 1.1rem 1.25rem; } .section-title { margin: 0 0 0.75rem; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; } /* ── Now-playing (hero card) ─────────────────────────────────────────────── */ .now-playing { display: flex; gap: 0.85rem; align-items: flex-start; /* Faceplate trim — the one permitted shadow, hero card only. */ box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--line); } .now-playing__dot { flex: none; width: 12px; height: 12px; margin-top: 0.35rem; border-radius: 50%; background-color: var(--line); } .now-playing__dot--live { background-color: var(--accent); animation: onair-pulse 1.6s ease-in-out infinite; } @keyframes onair-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .now-playing__dot--live { animation: none; } } .now-playing__art { flex: none; width: 72px; height: 72px; border: 1px solid var(--line); border-radius: 6px; background-color: var(--surface-2); object-fit: cover; } .now-playing__body { flex: 1 1 auto; min-width: 0; } .now-playing__kicker { margin: 0 0 0.2rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-2); } .now-playing__title { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.6rem; overflow-wrap: break-word; } .now-playing__artist { margin: 0.15rem 0 0; color: var(--mute); } /* DJ card (SPEC F129.3, STORY-335, PLAN T299) — face + name + show, replacing the pre-F129 .now-playing__dj text-only line. Small enough to read as a byline under the artist line, not a second hero image competing with .now-playing__art. */ .dj-card { display: flex; align-items: center; gap: 0.4rem; margin: 0.3rem 0 0; } .dj-card__avatar { position: relative; flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 999px; background-color: var(--surface-2); overflow: hidden; } .dj-card__avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .dj-card__avatar-placeholder { width: 55%; height: 55%; color: var(--mute); } .dj-card__text { display: flex; align-items: baseline; gap: 0.3rem; min-width: 0; overflow-wrap: break-word; } .dj-card__name { color: var(--mute); } .dj-card__show { font-size: 0.82rem; color: var(--mute); } /* Speaking treatment (gh-#582): the byline avatar above (26px) is "tiny to the point of being a waste of space" the moment the persona is actually talking, not merely hosting the hour — Dean's ruling was to enlarge in place rather than swap the album-art/station-logo slot (a circular avatar filling that square box "might not be very visually appealing"). app.js's renderDjAvatar toggles this class on #dj-card only when BOTH kind === "patter" AND a real face is actually rendering (RIGHT FACE OR NO FACE — see its own remarks); a faceless persona's patter, or a music segment naming its scheduled host, both keep the plain .dj-card look above untouched. */ .dj-card--speaking { gap: 0.65rem; margin-top: 0.5rem; } .dj-card--speaking .dj-card__avatar { width: 56px; /* more than double the 26px byline size */ height: 56px; border-width: 2px; border-color: var(--accent); } .dj-card--speaking .dj-card__name { color: var(--ink); font-weight: 600; } .now-playing__meta { margin-top: 0.75rem; } .now-playing__upnext { margin: 0.5rem 0 0; font-size: 0.85rem; font-variant-numeric: tabular-nums; color: var(--mute); } .progress { height: 6px; border-radius: 3px; background-color: var(--surface-2); overflow: hidden; } .progress__fill { height: 100%; width: 0%; background-color: var(--accent); } .now-playing__clock { margin: 0.35rem 0 0; font-size: 0.82rem; font-variant-numeric: tabular-nums; color: var(--accent-2); } /* ── Thumbs (SPEC F150.10, STORY-369) — built entirely by app.js, never pre-rendered ────────── */ .thumbs { margin-top: 0.75rem; } .thumbs__buttons { display: flex; gap: 0.5rem; } .thumbs__button { min-width: 40px; min-height: 40px; padding: 0 0.75rem; border: 1px solid var(--line); border-radius: 6px; background-color: var(--surface); font-size: 1.1rem; line-height: 1; cursor: pointer; transition: background-color 120ms ease-out, border-color 120ms ease-out; } .thumbs__button:hover { background-color: var(--surface-2); } .thumbs__button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .thumbs__button[aria-pressed="true"] { border-color: var(--accent); background-color: var(--surface-2); } .thumbs__message { margin: 0.4rem 0 0; min-height: 1.2em; color: var(--mute); font-size: 0.85rem; } .thumbs-strip { margin-top: 0.75rem; } .thumbs-strip__header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .thumbs-strip__heading { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-2); } .thumbs-strip__clear { border: none; background: none; padding: 0; color: var(--mute); font-family: var(--font-sans); font-size: 0.78rem; text-decoration: underline; cursor: pointer; } .thumbs-strip__clear:hover { color: var(--ink); } .thumbs-strip__clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .thumbs-strip__list { margin: 0.4rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; } .thumbs-strip__row { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.35rem 0; border-bottom: 1px solid var(--line); font-size: 0.85rem; } .thumbs-strip__row:last-child { border-bottom: none; } .thumbs-strip__glyph { flex: none; } .thumbs-strip__label { min-width: 0; overflow-wrap: break-word; color: var(--mute); } /* ── Player ───────────────────────────────────────────────────────────────── */ .player { width: 100%; } .hint { margin: 0; color: var(--mute); } /* ── Request form ─────────────────────────────────────────────────────────── */ .request-form { display: flex; flex-direction: column; gap: 0.4rem; } .request-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-2); } .request-row { display: flex; gap: 0.5rem; } .request-input { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: 6px; background-color: var(--surface-2); color: var(--ink); font-family: var(--font-sans); font-size: 0.9rem; } .request-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .request-submit { flex: none; min-width: 40px; min-height: 40px; padding: 0 1.1rem; border: none; border-radius: 6px; background-color: var(--accent); color: var(--accent-ink); font-family: var(--font-sans); font-weight: 600; font-size: 0.85rem; cursor: pointer; } .request-submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .request-pickers { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.2rem; } .request-picker { flex: 1 1 10rem; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; } .request-picker__label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-2); } .request-select { width: 100%; } .request-message { margin: 0.6rem 0 0; min-height: 1.2em; color: var(--mute); font-size: 0.85rem; } /* ── History ──────────────────────────────────────────────────────────────── */ .history { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; } .history__row { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); } .history__row:last-child { border-bottom: none; } .history__label { min-width: 0; overflow-wrap: break-word; } .history__artist { color: var(--mute); } .history__time { flex: none; font-variant-numeric: tabular-nums; color: var(--mute); font-size: 0.85rem; } .history__empty { margin: 0; color: var(--mute); } /* ── Stats / About ────────────────────────────────────────────────────────── */ .stats, .about { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; } .stats dt, .about dt { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-2); } .stats dd, .about dd { margin: 0; font-variant-numeric: tabular-nums; } .footer { text-align: center; color: var(--mute); font-size: 0.82rem; } .footer p { margin: 0; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }