From 6c6158ad5e58579c670914be2a4aadbddcd97f5b Mon Sep 17 00:00:00 2001 From: chris Date: Thu, 10 Sep 2026 13:01:09 -0400 Subject: [PATCH] =?UTF-8?q?Who's=20that=20Pok=C3=A9mon=3F:=20accent-tinted?= =?UTF-8?q?=20spotlight=20instead=20of=20the=20white=20panel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The near-white stage was too bright. Swap it for a radial gradient off var(--accent): a pale centre (accent mixed 35% white) for the silhouette to read against, through the full accent colour, to a soft dark rim. Adapts to the chosen accent and works in every theme. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_017Ve7HLspzeG2xDPtJQ8vmu --- src/styles/layout.css | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/styles/layout.css b/src/styles/layout.css index 30bb3cd..766c6e3 100644 --- a/src/styles/layout.css +++ b/src/styles/layout.css @@ -3760,17 +3760,21 @@ color: var(--text-dim); font-weight: 600; } -/* A bright "TV screen" so the black silhouette reads in any theme. */ +/* Accent-tinted spotlight: a pale centre for the silhouette to read + against, fading out to the full accent colour and a soft dark rim. */ .wtp__stage { display: grid; place-items: center; padding: 20px; border-radius: var(--radius-lg); - background: - radial-gradient(70% 60% at 50% 38%, #ffffff, transparent 75%), - linear-gradient(165deg, #cfe7ff 0%, #eaf4ff 55%, #f6fbff 100%); - border: 1px solid rgba(0, 0, 0, 0.12); - box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.5); + background: radial-gradient( + circle at 50% 46%, + color-mix(in srgb, var(--accent) 35%, #fff) 0%, + color-mix(in srgb, var(--accent) 88%, #fff) 42%, + var(--accent) 68%, + color-mix(in srgb, var(--accent) 78%, #000) 100% + ); + border: 1px solid color-mix(in srgb, var(--accent) 60%, #000); } .wtp__art { width: 260px;