From cb74c580c8eb530cfb0d31bc58970459fd053626 Mon Sep 17 00:00:00 2001 From: MayaChat Date: Sun, 23 Nov 2025 23:57:32 -0500 Subject: [PATCH] Add selected state styles for service cards --- styles.css | 1 + 1 file changed, 1 insertion(+) diff --git a/styles.css b/styles.css index 09985b4..5c1659b 100644 --- a/styles.css +++ b/styles.css @@ -20,6 +20,7 @@ main{max-width:1100px;margin:18px auto;padding:12px} .card::after{content:'';position:absolute;inset:0;border-radius:10px;padding:1px;background:linear-gradient(135deg,rgba(79,70,229,0.5),rgba(139,92,246,0.3),rgba(236,72,153,0.5));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;opacity:0;transition:opacity .3s ease} .card:hover{transform:translateY(-6px);box-shadow:0 10px 40px rgba(79,70,229,0.4),0 0 20px rgba(139,92,246,0.3);border-color:rgba(139,92,246,0.5)} .card:hover::after{opacity:1} +.card.selected{transform:translateY(-4px);box-shadow:0 8px 30px rgba(79,70,229,0.5),0 0 15px rgba(139,92,246,0.4);border-color:rgba(139,92,246,0.7);outline:2px solid rgba(79,70,229,0.6);outline-offset:2px} .card .logo{width:36px;height:36px;margin-right:12px;flex:0 0 36px;filter:brightness(0) invert(1)} .card .label{flex:1;text-align:left} .status-dot{position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%;border:2px solid rgba(255,255,255,0.3);animation:pulse 2s infinite}