/* ============================================================================ AltSounds Design Tokens — v1.0.0 ============================================================================ Single source of truth for color, typography, spacing, radius, shadow, transition, and z-index primitives. Every component style in AltSounds plugins and the theme SHOULD reference these tokens rather than hardcoding values. Why: without this, each new component invents its own values, and the site drifts visually (a video tile in the info modal looks different from a video tile in the Now Playing panel looks different from a video tile in the channel page). Canonicalize once, reference everywhere. Naming convention: --alts-{category}-{name}. Examples: --alts-color-accent (brand green) --alts-color-bg (page background) --alts-size-md (medium font size) --alts-space-lg (large spacing) --alts-radius-pill (fully rounded) Adding a new token: if it represents a value you'd use in more than one place, add it here. If it's truly local to one component, hard-code it there. Err toward adding — one extra token is cheaper than drift. Modifying an existing token: be careful. Every place that uses it will change. If you want "a slightly different green" that's a NEW token (e.g. --alts-color-accent-dim), not a redefinition. MIGRATION STATUS (as of this release): Tokens are defined but nothing uses them yet. Session 2 of the refactor starts migrating components (alts-video-card, alts-artist-card, etc.) to reference these tokens. The theme's style.css and existing plugin CSS continue using hardcoded values until they're touched for other reasons — at which point they migrate. ============================================================================ */ :root { /* ---------------------------------------------------------------------- COLOR TOKENS ---------------------------------------------------------------------- The AltSounds palette is deliberately narrow. One brand accent (electric green), a near-black bg, a small set of translucent white overlays for surfaces/text. Anything else is either derived from these (with opacity) or noise. The brand green (#BFFF00) is the single most-used hex color in the codebase — used for Play buttons, eyebrows, active states, focus rings, and essentially every "this is AltSounds" affordance. */ /* --- Brand accent ------------------------------------------------- */ --alts-color-accent: #BFFF00; /* the AltSounds green */ --alts-color-accent-90: rgba(191, 255, 0, 0.9); --alts-color-accent-70: rgba(191, 255, 0, 0.7); --alts-color-accent-50: rgba(191, 255, 0, 0.5); --alts-color-accent-30: rgba(191, 255, 0, 0.3); --alts-color-accent-15: rgba(191, 255, 0, 0.15); --alts-color-accent-08: rgba(191, 255, 0, 0.08); /* --- Page backgrounds --------------------------------------------- */ /* The site runs on a near-black base. #0a0b0a is the "true" page bg used behind the main player; #0e0f0e is a faint bump used for card bg fills (hero etc.) so cards feel subtly raised. */ --alts-color-bg: #0a0b0a; --alts-color-bg-raised: #0e0f0e; /* --- Surface overlays --------------------------------------------- */ /* Every "card" or "panel" in the UI uses translucent white-on-dark rather than a solid color, so background images or parent tints show through subtly. Five tiers of opacity give us a natural elevation scale: surface-1 — very subtle (hover states, skeleton fills) surface-2 — base card surface surface-3 — elevated elements within cards (button bg) surface-4 — active/hover elevated surface-5 — pressed/active emphasis */ --alts-surface-1: rgba(255, 255, 255, 0.015); --alts-surface-2: rgba(255, 255, 255, 0.04); --alts-surface-3: rgba(255, 255, 255, 0.06); --alts-surface-4: rgba(255, 255, 255, 0.08); --alts-surface-5: rgba(255, 255, 255, 0.12); /* --- Text ---------------------------------------------------------- */ /* Five-step text color scale mirroring surface opacity. Primary for titles/names, dim for meta/descriptions, muted for time-stamps or quiet attribution (Wikipedia links etc.), faint for skeletons. */ --alts-text: #ffffff; --alts-text-dim: rgba(255, 255, 255, 0.78); --alts-text-muted: rgba(255, 255, 255, 0.55); --alts-text-faint: rgba(255, 255, 255, 0.42); --alts-text-ghost: rgba(255, 255, 255, 0.25); /* --- Borders / dividers -------------------------------------------- */ --alts-border-subtle: rgba(255, 255, 255, 0.06); --alts-border: rgba(255, 255, 255, 0.1); --alts-border-strong: rgba(255, 255, 255, 0.18); /* --- Semantic colors ---------------------------------------------- */ /* For states that need their own color — not green, not white. Use sparingly; most UI should speak in accent/white. */ --alts-color-danger: #e53e3e; /* Clear, remove, destructive */ --alts-color-warning: #f59e0b; /* Rate-limit, broken video */ /* v1.5.11.9 — Canonical "queued" amber/orange. Used by every queue- state surface: NP rail "Queued" pill, taunt button is-queued state, artist-profile per-tile queue button, era queue button. Same value as warning (amber) but separately named so future palette tweaks can split them. */ --alts-color-queued: #f59e0b; /* v1.5.11.10 — Canonical "station" token. Originally cyan; reverted to AltSounds-green in v1.5.11.11 per UX call (cyan competed with brand identity). Kept as a separate token so future palette experiments can split it from --alts-color-accent without editing every callsite. */ --alts-color-station: #BFFF00; --alts-color-station-rgb: 191, 255, 0; --alts-color-success: var(--alts-color-accent); /* alias — green is our success */ /* ---------------------------------------------------------------------- TYPOGRAPHY TOKENS ---------------------------------------------------------------------- One family: Montserrat. Used everywhere. The theme's body text uses `DM Mono` monospace in some places (timecodes, keyboard hints) — captured as --alts-font-mono. Sizes use a modest scale. When I audit the existing Mothership CSS (Session 1 research) I see values scattered across every px from 9 to 32. Collapsing to 7 canonical sizes covers 95% of uses. */ --alts-font: Montserrat, -apple-system, BlinkMacSystemFont, sans-serif; --alts-font-mono: "DM Mono", "Source Code Pro", ui-monospace, monospace; /* --- Size scale --------------------------------------------------- */ /* Names are t-shirt sizes for discoverability. Values are what the existing codebase has converged on organically. */ --alts-size-3xs: 9px; /* tiny eyebrow text, badge labels */ --alts-size-2xs: 10px; /* eyebrow, uppercase tracking labels */ --alts-size-xs: 11.5px; /* tile titles, small body */ --alts-size-sm: 13px; /* body text, blurbs */ --alts-size-md: 14px; /* comfortable body, button labels */ --alts-size-lg: 18px; /* section titles, artist names (small) */ --alts-size-xl: 22px; /* artist names (standard), panel titles */ --alts-size-2xl: 28px; /* hero names (responsive floor) */ --alts-size-3xl: 42px; /* hero names (responsive ceiling) */ /* --- Weight ------------------------------------------------------- */ /* The codebase uses 400/500/700/800. Collapsed into named tiers. */ --alts-weight-regular: 400; --alts-weight-medium: 500; --alts-weight-bold: 700; --alts-weight-heavy: 800; /* --- Line height -------------------------------------------------- */ /* 1 for single-line tight displays (badge text, hero names); 1.3 for titles and button labels; 1.5 for body prose (blurbs, Wikipedia summaries). */ --alts-lh-tight: 1; --alts-lh-snug: 1.2; --alts-lh-normal: 1.35; --alts-lh-relaxed: 1.5; --alts-lh-loose: 1.65; /* --- Letter spacing ----------------------------------------------- */ /* Uppercase eyebrows take wide tracking; body text takes none. */ --alts-tracking-tight: -0.02em; /* hero names, large displays */ --alts-tracking-normal: 0; --alts-tracking-wide: 0.08em; /* small caps, button labels */ --alts-tracking-wider: 0.16em; /* eyebrows, pill labels */ --alts-tracking-widest: 0.24em; /* tiny all-caps displays */ /* ---------------------------------------------------------------------- SPACING TOKENS ---------------------------------------------------------------------- A modular scale of 4px units. Use these for padding, margin, and gap. Sizes named by t-shirt convention so they compose intuitively: a card with padding-lg and gap-md reads clearly. */ --alts-space-3xs: 2px; --alts-space-2xs: 4px; --alts-space-xs: 6px; --alts-space-sm: 8px; --alts-space-md: 12px; --alts-space-lg: 16px; --alts-space-xl: 20px; --alts-space-2xl: 24px; --alts-space-3xl: 32px; --alts-space-4xl: 48px; /* ---------------------------------------------------------------------- RADIUS TOKENS ---------------------------------------------------------------------- Three named radii plus a pill. The codebase mostly uses 6/8/10/14/16 — collapsed into four. Buttons are always pills; tiles use md; cards use lg. */ --alts-radius-sm: 6px; /* small chips, inputs */ --alts-radius-md: 10px; /* video tile thumbnails */ --alts-radius-lg: 16px; /* large cards, panels, hero */ --alts-radius-pill: 999px; /* pill buttons, badges */ --alts-radius-circle: 50%; /* portraits, circular icons */ /* ---------------------------------------------------------------------- SHADOW TOKENS ---------------------------------------------------------------------- Shadows in AltSounds are dark rather than grey — the site lives in a low-light palette, so black shadows read as depth without adding any color cast. Three tiers: subtle card lift, elevated card lift, and "floating" for modals/overlays. */ --alts-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --alts-shadow-md: 0 6px 20px -4px rgba(0, 0, 0, 0.5); --alts-shadow-lg: 0 12px 40px -10px rgba(0, 0, 0, 0.6); --alts-shadow-hero: 0 20px 50px rgba(0, 0, 0, 0.4); /* Accent-colored glow for active/hover states — the brand green casting a soft halo. Used on primary buttons + hero Play CTAs. */ --alts-shadow-accent: 0 8px 22px rgba(191, 255, 0, 0.38); --alts-shadow-accent-hover: 0 12px 28px rgba(191, 255, 0, 0.5); /* ---------------------------------------------------------------------- TRANSITION TOKENS ---------------------------------------------------------------------- Three speeds. Most UI transitions land in the "normal" (180ms) tier — button hovers, tile hovers, state changes. "Fast" (120ms) for micro-interactions that shouldn't feel laggy (icon button presses). "Slow" (350ms) for cross-fades, panel swaps, things the user should perceive as a state TRANSITION rather than an immediate change. */ --alts-transition-fast: 120ms ease; --alts-transition-normal: 180ms ease; --alts-transition-slow: 350ms cubic-bezier(0.2, 0.8, 0.25, 1); /* ---------------------------------------------------------------------- Z-INDEX TOKENS ---------------------------------------------------------------------- Named layers so we stop reading literal z-index: 20; and wondering what it means. The codebase has z-indices from 1 to 100 — collapse into a semantic scale. Tip: avoid using z-indices in components unless you actually need to stack. Most flex/grid layouts don't. */ --alts-z-base: 0; /* default layer */ --alts-z-raised: 1; /* hover lifts, skeleton overlays */ --alts-z-sticky: 10; /* sticky headers, nav */ --alts-z-overlay: 20; /* tile overlays (play buttons on thumbs) */ --alts-z-modal-backdrop: 100; /* modal dim */ --alts-z-modal: 101; /* modal content */ --alts-z-toast: 200; /* notifications */ /* ---------------------------------------------------------------------- ASPECT RATIOS ---------------------------------------------------------------------- The few aspect ratios the codebase uses, named so we stop writing `aspect-ratio: 16 / 9` in dozens of places. */ --alts-aspect-video: 16 / 9; /* video thumbnails */ --alts-aspect-square: 1 / 1; /* artist portraits */ --alts-aspect-tile: 1 / 1.1; /* artist tiles (slight vertical) */ /* ---------------------------------------------------------------------- NOW-PLAYING BADGE — BRAND COMPONENT ---------------------------------------------------------------------- The "NP badge" (or "NP bug" depending on who's writing the spec) is the small pill that appears on tiles representing the artist / era / director / song that's currently playing. It's the SINGLE most-replicated component in the panel — historically each surface built its own variant, leading to four different looks across the same screen (solid green block + blink dot, dark-glass + green border + EQ + PLAYING label, neon-lit frame, plain green dot). v2.13.28 codifies it as a brand component. ANY surface that wants to indicate "this is currently playing" uses .alts-np-badge — tokens defined here, class definition immediately below in this file. Future tweaks to the badge land in ONE place and propagate everywhere automatically. The look: - Solid AltSounds green background (#BFFF00) - BLACK text + EQ bars (sits ON green, not next to it) - Pill shape, top-left anchored on tiles by default - Animated 3-bar EQ + uppercase "PLAYING" label - Soft green glow around the pill */ --alts-np-badge-bg: var(--alts-active-blend-color, var(--alts-color-accent)); --alts-np-badge-fg: var(--alts-color-bg); /* black on green */ --alts-np-badge-radius: 999px; /* full pill */ --alts-np-badge-padding: 5px 11px 5px 9px; --alts-np-badge-gap: 6px; --alts-np-badge-glow: 0 0 16px color-mix(in srgb, var(--alts-active-blend-color, #BFFF00) 50%, transparent), 0 4px 12px rgba(0, 0, 0, 0.3); --alts-np-badge-eq-width: 10px; --alts-np-badge-eq-height: 9px; --alts-np-badge-eq-bar-width: 2px; --alts-np-badge-label-size: 9px; --alts-np-badge-label-tracking: 0.14em; /* Tile-anchor offsets — top-left corner of any tile by default */ --alts-np-badge-anchor-top: 12px; --alts-np-badge-anchor-left: 12px; /* The lit-frame outline applied to the parent tile when its "currently playing" descendant is shown. v2.16.25 — Frame outline + glow follow the active blend color too so the outer ring matches the inner badge color, no more AS-green ring around a recipe-colored badge. */ --alts-np-frame-outline: 2px solid var(--alts-active-blend-color, var(--alts-color-accent)); --alts-np-frame-glow: 0 6px 24px color-mix(in srgb, var(--alts-active-blend-color, #BFFF00) 25%, transparent); } /* ============================================================================= .alts-np-badge — CANONICAL NOW-PLAYING BADGE ============================================================================= Use this class wherever a "currently playing" indicator appears. Markup: The badge is positioned ABSOLUTELY by default at top-left of its nearest positioned ancestor. Override via .alts-np-badge { top: …; left: …; right: …; bottom: …; } on a per-context wrapper if a different anchor is needed (rare). For the "lit frame" treatment around the parent tile when the badge is present, add `.is-now-playing` to the parent and let the rule below handle the outline. ============================================================================ */ .alts-np-badge { position: absolute; top: var(--alts-np-badge-anchor-top); left: var(--alts-np-badge-anchor-left); z-index: 4; display: inline-flex; align-items: center; gap: var(--alts-np-badge-gap); padding: var(--alts-np-badge-padding); background: var(--alts-np-badge-bg); color: var(--alts-np-badge-fg); border: 0; border-radius: var(--alts-np-badge-radius); box-shadow: var(--alts-np-badge-glow); pointer-events: none; /* No backdrop-filter — bg is solid by design */ } .alts-np-badge-eq { display: inline-flex; align-items: flex-end; gap: 2px; width: var(--alts-np-badge-eq-width); height: var(--alts-np-badge-eq-height); } .alts-np-badge-eq span { display: inline-block; width: var(--alts-np-badge-eq-bar-width); background: var(--alts-np-badge-fg); /* BLACK bars — readable on green */ border-radius: 1px; animation: alts-np-badge-eq 0.9s ease-in-out infinite; } .alts-np-badge-eq span:nth-child(1) { height: 60%; animation-delay: 0s; } .alts-np-badge-eq span:nth-child(2) { height: 100%; animation-delay: -0.3s; } .alts-np-badge-eq span:nth-child(3) { height: 75%; animation-delay: -0.6s; } @keyframes alts-np-badge-eq { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } } .alts-np-badge-label { font-family: "IBM Plex Mono", var(--alts-font-mono, monospace); font-size: var(--alts-np-badge-label-size); letter-spacing: var(--alts-np-badge-label-tracking); text-transform: uppercase; color: var(--alts-np-badge-fg); /* BLACK text on green */ font-weight: 700; line-height: 1; } /* Tile-level "lit frame" companion. Add .is-now-playing to ANY tile that contains an .alts-np-badge to get a matching green outline + soft glow around the whole tile. */ .is-now-playing { outline: var(--alts-np-frame-outline); outline-offset: -2px; box-shadow: var(--alts-np-frame-glow); } @media (prefers-reduced-motion: reduce) { .alts-np-badge-eq span { animation: none !important; transform: scaleY(0.65); } } /* ============================================================================= REDUCED-MOTION PREFERENCE ============================================================================= When the user opts into reduced motion, every transition token drops to a near-instant duration. This means components that reference the transition tokens automatically respect the preference without each one having to implement its own @media query. ============================================================================ */ @media (prefers-reduced-motion: reduce) { :root { --alts-transition-fast: 0.01ms linear; --alts-transition-normal: 0.01ms linear; --alts-transition-slow: 0.01ms linear; } }