From 4ea7cbc9843330764a3c703664e57361e2c1221e Mon Sep 17 00:00:00 2001 From: Chris Date: Fri, 25 Sep 2026 12:25:56 -0700 Subject: [PATCH] Keep the #1 medal ring visible on hover The Podium and Spotlight ring was a box-shadow, which the card hover shadow replaced. Draw it as an outline instead. Co-Authored-By: Claude Opus 5.5 --- web/static/css/app.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/web/static/css/app.css b/web/static/css/app.css index b42fa48..2c3e281 100644 --- a/web/static/css/app.css +++ b/web/static/css/app.css @@ -297,7 +297,9 @@ code { font: 0.9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; bac .podium--1 .podium-spot--1 { order: 0; } .podium-card { align-items: center; text-align: center; gap: 12px; padding: 0 4px 14px; } .podium-card .item-art { width: 100%; box-shadow: var(--shadow); } -.podium-spot--1 .item-art { box-shadow: 0 0 0 3px var(--medal), var(--shadow); } +/* The medal ring is an outline, not a box-shadow, so the hover shadow on + .item-art doesn't replace it. */ +.podium-spot--1 .item-art { outline: 3px solid var(--medal); } .podium-card .item-body { align-items: center; width: 100%; } .podium-card .item-title { font-size: 16px; } .podium-spot--1 .item-title { font-size: 18px; font-weight: 700; } @@ -358,7 +360,7 @@ code { font: 0.9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; bac .spotlight-bg { position: absolute; inset: 0; z-index: -1; } .spotlight-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.4); filter: blur(50px) saturate(1.4); opacity: 0.32; } .spotlight-art { position: relative; } -.spotlight-art .item-art { box-shadow: 0 0 0 3px var(--gold), var(--shadow); } +.spotlight-art .item-art { outline: 3px solid var(--gold); box-shadow: var(--shadow); } .spotlight-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; align-items: flex-start; } .spotlight-rank { font: 800 46px/1 var(--font-display); color: var(--gold); } .spotlight-title { font-size: clamp(24px, 3.4vw, 36px); font-weight: 800; }