Add selected state styles for service cards
This commit is contained in:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user