From 436a710478aeece704ccb69ff68b897741a558df Mon Sep 17 00:00:00 2001 From: Disco DeDisco Date: Mon, 25 May 2026 00:28:09 -0400 Subject: [PATCH] =?UTF-8?q?A.3-polish-2:=20thicker=20contour=20stroke=20(0?= =?UTF-8?q?.2rem=20each=20cardinal)=20+=20tray-card=20down-right=20black?= =?UTF-8?q?=20silhouette=20drop-shadow.=20User=20visual=20polish=20after?= =?UTF-8?q?=20browser-verifying=20A.3+A.3-polish:=20stroke=20thickness=20b?= =?UTF-8?q?umped=20from=201.5px=20=E2=86=92=200.2rem=20(~3.2px)=20per=20ca?= =?UTF-8?q?rdinal,=20giving=20~6.4px=20combined=20apparent=20stroke=20(~2?= =?UTF-8?q?=C3=97=20prior);=20user-confirmed=20thickness=20is=20comfortabl?= =?UTF-8?q?e=20in=20palette-baltimore=20at=20the=20current=20sig-card-w.?= =?UTF-8?q?=20Bonus:=20appended=20the=20same=20silhouette=20black=20drop-s?= =?UTF-8?q?hadow=20that=20`.tray-cell=20>=20img`=20carries=20(`=5Ftray.scs?= =?UTF-8?q?s:272`,=20`drop-shadow(1px=201px=202px=20rgba(0,0,0,1))`)=20to?= =?UTF-8?q?=20the=20sig-stage-card=20image=20filter=20chain=20as=20a=20"li?= =?UTF-8?q?fted=20off=20the=20felt"=20depth=20cue=20=E2=80=94=20consistent?= =?UTF-8?q?=20w.=20the=20rest=20of=20the=20project's=20image-card=20treatm?= =?UTF-8?q?ent.=20Ordering=20matters=20in=20the=20filter=20chain:=20silhou?= =?UTF-8?q?ette=20black=20comes=20AFTER=20the=204=20stroke=20drop-shadows?= =?UTF-8?q?=20so=20it=20traces=20the=20STROKED=20contour,=20not=20just=20t?= =?UTF-8?q?he=20original=20PNG=20alpha=20(otherwise=20the=20depth=20shadow?= =?UTF-8?q?=20would=20land=20underneath=20the=20orange-or-mustard=20stroke?= =?UTF-8?q?,=20partially=20occluded).=204-cardinal=20stroke=20is=20still?= =?UTF-8?q?=20adequate=20at=200.2rem;=20flagged=20in=20comment=20to=20bump?= =?UTF-8?q?=20to=208-direction=20(cardinals=20+=20diagonals)=20if=20we=20e?= =?UTF-8?q?ver=20push=20past=20~0.5rem=20since=20curved=20edges=20would=20?= =?UTF-8?q?otherwise=20show=20uneven=20thickness=20at=20gap-prone=20diagon?= =?UTF-8?q?als.=20Pure=20SCSS=20=E2=80=94=20no=20model/template/JS/test=20?= =?UTF-8?q?changes.=20Visual-only=20polish=20atop=2050a12bc's=20A.3-polish?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 4.7 (1M context) --- src/static_src/scss/_card-deck.scss | 28 +++++++++++++++++++--------- 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/src/static_src/scss/_card-deck.scss b/src/static_src/scss/_card-deck.scss index 7ccc484..caacc67 100644 --- a/src/static_src/scss/_card-deck.scss +++ b/src/static_src/scss/_card-deck.scss @@ -652,16 +652,26 @@ html:has(.sig-backdrop) { width: 100%; height: 100%; object-fit: contain; - // 4 cardinal-direction drop-shadows track the PNG's alpha - // channel → contour-following stroke. 1.5px each → ~3px - // combined apparent stroke. Mobile-safe: opacity-based effects - // per [[feedback-mobile-svg-glow]] (filter on raster images - // works fine across browsers, the dead-end was SVG glow). + // Filter chain (order matters — each drop-shadow operates on + // the prior result): + // 1-4: 4 cardinal-direction drop-shadows at 0.2rem (~3.2px) + // each → contour-following stroke. Combined apparent width + // ~6.4px. Bump to 8-direction stack if we ever go past + // ~0.5rem so curved edges stay even. + // 5: down-right black 1,1 offset 2px-blur drop-shadow + // matches the silhouette shadow `.tray-cell > img` carries + // (`_tray.scss:272`) — "lifted off the felt" depth cue. + // Comes AFTER the strokes so it traces the stroked + // silhouette, not just the original PNG alpha. + // Mobile-safe: filter on raster images works fine cross-browser + // (the [[feedback-mobile-svg-glow]] dead-end was specifically + // SVG glow, not raster drop-shadow). filter: - drop-shadow( 1.5px 0 0 var(--img-stroke-color)) - drop-shadow(-1.5px 0 0 var(--img-stroke-color)) - drop-shadow( 0 1.5px 0 var(--img-stroke-color)) - drop-shadow( 0 -1.5px 0 var(--img-stroke-color)); + drop-shadow( 0.2rem 0 0 var(--img-stroke-color)) + drop-shadow(-0.2rem 0 0 var(--img-stroke-color)) + drop-shadow( 0 0.2rem 0 var(--img-stroke-color)) + drop-shadow( 0 -0.2rem 0 var(--img-stroke-color)) + drop-shadow( 1px 1px 2px rgba(0, 0, 0, 1)); } } }