/* Somatro Aurora — Effects: gradients, shadows, restrained glow, blur. Glow is RESTRAINED — a focus cue and brand accent, never decoration. */ :root { /* ---- Gradients ------------------------------------------------------ */ --gradient-aurora: linear-gradient(135deg, #7c4dff 0%, #22d3ee 100%); /* @kind color */ --gradient-aurora-soft: linear-gradient(135deg, rgba(124,77,255,0.9), rgba(34,211,238,0.9)); /* @kind color */ --gradient-cyan: linear-gradient(90deg, #0fb6d6, #55e3f4); /* @kind color */ --gradient-progress: linear-gradient(90deg, #22d3ee, #55e3f4); /* @kind color */ /* ---- SHARED AURORA CANVAS — DECIDED 2026-07-28 (D-C) ----------------- ONE shell-level ambient treatment for all standard television pages. Structure, in order: 1. base floor #070A16 (--sa-navy-900) 2. restrained cyan ambient low opacity, broad and soft 3. restrained violet ambient low opacity, Aurora depth and identity 4. semantic surfaces on top rail / panel / card / selected / dialog SUPERSEDED and must not be used as page canvas: - flat #08111D (was Movies Home, Live TV) - the Settings-only gradient linear-gradient(180deg,#0c1a2c,#070d17) plus its two radial washes. Its atmosphere is absorbed here. Rules: restrained behind content, never washes out panels, no heavy glow, no page-specific gradients, recognisably Somatro Aurora, valid at 720p / 1080p / 4K. Named shell variants may vary INTENSITY only. */ --canvas-base: var(--sa-navy-900); /* #070A16 — the floor */ --canvas-ambient-cyan: radial-gradient(58% 50% at 82% 4%, rgba(18,181,201,0.075), transparent 62%); /* @kind color */ --canvas-ambient-violet: radial-gradient(64% 56% at 12% 0%, rgba(124,77,255,0.065), transparent 60%); /* @kind color */ /* Standard application shell — the default page canvas. */ --gradient-canvas: var(--canvas-ambient-cyan), var(--canvas-ambient-violet), linear-gradient(180deg, #070a16, #05060c); /* @kind color */ /* Named shell variants — INTENSITY only, never different hues. */ --gradient-canvas-hero: radial-gradient(58% 50% at 82% 4%, rgba(18,181,201,0.11), transparent 78%), radial-gradient(64% 56% at 12% 0%, rgba(124,77,255,0.095), transparent 76%), linear-gradient(180deg, #070a16, #05060c); /* @kind color */ --gradient-canvas-player: linear-gradient(180deg, #05060c, #05060c); /* @kind color */ --gradient-canvas-overlay: radial-gradient(70% 60% at 50% 0%, rgba(18,181,201,0.05), transparent 76%), linear-gradient(180deg, #070a16, #05060c); /* @kind color */ /* ---- PER-DESTINATION AMBIENT IDENTITY ------------------------------- Each destination has its own atmospheric colour, carried ONLY by the shared canvas behind the floating shell. The rail, category panel and content panel stay dark and neutral on every destination — that is what keeps the app recognisably Somatro Aurora rather than seven themes. Rules: soft gradients and blurred glows at restrained opacity; never a solid coloured page background; never reduces text contrast or focus-ring visibility; never colours individual rows or controls. Transitions smoothly between destinations and respects Reduce Motion. All sit on the same #070A16 floor. Only hue and intensity vary. */ /* Home — balanced cyan-to-violet Aurora (the reference identity) */ --ambient-home-a: rgba(18,181,201,0.075); --ambient-home-b: rgba(124,77,255,0.065); --ambient-home: radial-gradient(58% 50% at 82% 4%, var(--ambient-home-a), transparent 78%), radial-gradient(64% 56% at 12% 0%, var(--ambient-home-b), transparent 76%), linear-gradient(180deg, #070a16, #05060c); /* @kind color */ /* Live TV — electric cyan + deep broadcast blue */ --ambient-live-a: rgba(18,181,201,0.095); --ambient-live-b: rgba(30,90,214,0.075); --ambient-live: radial-gradient(58% 50% at 84% 2%, var(--ambient-live-a), transparent 78%), radial-gradient(66% 58% at 10% 6%, var(--ambient-live-b), transparent 76%), linear-gradient(180deg, #070a16, #05060c); /* @kind color */ /* Arena — energetic coral/red with restrained violet */ --ambient-arena-a: rgba(240,86,75,0.080); --ambient-arena-b: rgba(124,77,255,0.055); --ambient-arena: radial-gradient(56% 48% at 80% 2%, var(--ambient-arena-a), transparent 60%), radial-gradient(64% 56% at 12% 4%, var(--ambient-arena-b), transparent 76%), linear-gradient(180deg, #070a16, #05060c); /* @kind color */ /* Movies — cinematic violet + magenta */ --ambient-movies-a: rgba(124,77,255,0.090); --ambient-movies-b: rgba(196,66,168,0.065); --ambient-movies: radial-gradient(58% 52% at 80% 2%, var(--ambient-movies-a), transparent 78%), radial-gradient(64% 56% at 14% 4%, var(--ambient-movies-b), transparent 76%), linear-gradient(180deg, #070a16, #05060c); /* @kind color */ /* Series — indigo + cool blue */ --ambient-series-a: rgba(96,84,224,0.085); --ambient-series-b: rgba(42,110,200,0.065); --ambient-series: radial-gradient(58% 50% at 82% 3%, var(--ambient-series-a), transparent 78%), radial-gradient(64% 56% at 12% 4%, var(--ambient-series-b), transparent 76%), linear-gradient(180deg, #070a16, #05060c); /* @kind color */ /* Library — teal + emerald */ --ambient-library-a: rgba(20,166,168,0.080); --ambient-library-b: rgba(52,211,153,0.055); --ambient-library: radial-gradient(58% 50% at 82% 3%, var(--ambient-library-a), transparent 78%), radial-gradient(64% 56% at 12% 4%, var(--ambient-library-b), transparent 76%), linear-gradient(180deg, #070a16, #05060c); /* @kind color */ /* Settings — calm blue-violet, deliberately QUIETER than entertainment */ --ambient-settings-a: rgba(78,96,200,0.055); --ambient-settings-b: rgba(124,77,255,0.040); --ambient-settings: radial-gradient(60% 52% at 82% 4%, var(--ambient-settings-a), transparent 80%), radial-gradient(66% 58% at 10% 2%, var(--ambient-settings-b), transparent 78%), linear-gradient(180deg, #070a16, #05060c); /* @kind color */ /* Fallback when the Appearance setting "Ambient category backgrounds" is OFF. Neutral Aurora cyan-violet — NOT flat black. */ --ambient-off: var(--gradient-canvas); /* @kind color */ /* Cross-destination transition. Paired with prefers-reduced-motion below. */ --ambient-transition: background 420ms var(--ease-standard); /* @kind other */ --gradient-rail: linear-gradient(180deg, #0a0e1e 0%, #0b1224 78%, #0e1a30 100%); /* @kind color */ --gradient-player-idle: radial-gradient(70% 90% at 50% 30%, #2b4a63 0%, #12263a 55%, #0c1a2b 100%); /* @kind color */ /* ---- Shadows -------------------------------------------------------- */ --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-dialog: 0 24px 64px rgba(0, 0, 0, 0.62); /* ---- Restrained glow ------------------------------------------------ */ /* Single authoritative focus treatment: ONE crisp 2px cyan line + soft halo. No second sharp border, no navy gap ring. */ --glow-focus: 0 0 0 2px var(--accent-focus), 0 0 8px 1px rgba(18, 181, 201, 0.30); --glow-cyan-soft: 0 0 22px rgba(18, 181, 201, 0.22); --glow-violet-soft: 0 0 40px rgba(124, 77, 255, 0.18); --glow-live: 0 0 16px rgba(240, 56, 75, 0.35); /* ---- Focus ring ----------------------------------------------------- */ /* THE single Somatro focus treatment: one crisp 2px electric-cyan outline that dominates the normal border, plus a subtle 4–8px low-opacity halo. Drawn as box-shadow so it never shifts layout and hugs the component radius. */ --focus-ring: 0 0 0 2px var(--accent-focus), 0 0 8px 1px rgba(18,181,201,0.30); /* ---- Blur ----------------------------------------------------------- */ --blur-panel: 18px; /* translucent navy surfaces over ambient canvas */ --blur-scrim: 6px; /* ---- Motion --------------------------------------------------------- */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --ease-emphasis: cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 180ms; /* @kind other */ --dur-slow: 260ms; /* @kind other */ } /* Reduce Motion — ambient stays, the cross-destination transition does not. */ @media (prefers-reduced-motion: reduce) { :root { --ambient-transition: none; /* @kind other */ } }