From 0c16ced7d7ece8f457ba277d0b51fa1a73750bc0 Mon Sep 17 00:00:00 2001 From: Ionut Neagu Date: Mon, 22 Jun 2026 17:53:07 +0200 Subject: [PATCH] fix(onboarding): reveal the color swatch only on card hover The per-card color summary showed at rest, adding visual noise to the grid. Hide it at rest and reveal it on card hover/focus (matching the page-shot tabs) so the resting grid stays clean; the full white pill still appears on hover. Co-Authored-By: Claude Opus 4.8 (1M context) Claude-Session: https://claude.ai/code/session_01QrGf4K9upxDKhRPVCztoLs --- onboarding/src/scss/_starter-site-card.scss | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/onboarding/src/scss/_starter-site-card.scss b/onboarding/src/scss/_starter-site-card.scss index a5a68540..a5ba2ea6 100644 --- a/onboarding/src/scss/_starter-site-card.scss +++ b/onboarding/src/scss/_starter-site-card.scss @@ -46,6 +46,12 @@ transform: translateY(0); pointer-events: auto; } + + .ss-color-summary { + opacity: 1; + transform: translateY(0); + pointer-events: auto; + } } } @@ -122,12 +128,17 @@ background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); box-shadow: 0 6px 18px rgba(12, 19, 31, 0.12); - transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; + // Hidden at rest — revealed only when the card is hovered/focused (like the page-shots), + // so it adds no visual noise to the resting grid. + opacity: 0; + transform: translateY(4px); + pointer-events: none; + transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.18s ease, + background 0.18s ease; z-index: 2; gap: 6px; &:hover { - transform: translateY(-1px); background: rgba(255, 255, 255, 0.99); box-shadow: 0 10px 22px rgba(12, 19, 31, 0.16); }