From a090f5adcf5bf0e9da2bd2884b38bb71395d407f Mon Sep 17 00:00:00 2001
From: Fabian Schieder <fabian.schieder.1010@gmail.com>
Date: Tue, 31 Mar 2026 00:47:36 +0200
Subject: [PATCH] Refactor product card styles for enhanced visual effects and
 smoother transitions

---
 assets/css/compcard.css | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/assets/css/compcard.css b/assets/css/compcard.css
index 6e6222f..b677563 100644
--- a/assets/css/compcard.css
+++ b/assets/css/compcard.css
@@ -13,12 +13,12 @@
 
 /* ─── Product Card ─── */
 .product-card {
-    background: #2d3b50;
-    border: 1px solid var(--border-subtle);
+    background: linear-gradient(145deg, #2d3b50 0%, #202b3d 100%);
+    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
     border-radius: var(--radius-lg);
     overflow: hidden;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+    box-shadow: var(--shadow-sm);
+    transition: all var(--transition-smooth);
     display: flex;
     flex-direction: column;
     min-height: 270px;
@@ -35,12 +35,12 @@
     position: absolute;
     inset: -1px;
     border-radius: var(--radius-lg);
-    padding: 1px;
+    padding: 2px;
     background: linear-gradient(
         135deg,
-        rgba(37, 99, 235, 0.3),
-        rgba(74, 222, 128, 0.2),
-        rgba(37, 99, 235, 0.1)
+        rgba(0, 113, 227, 0.5),
+        rgba(74, 222, 128, 0.3),
+        rgba(236, 72, 153, 0.4)
     );
     -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
@@ -59,7 +59,7 @@
     left: 0;
     right: 0;
     height: 120px;
-    background: linear-gradient(180deg, rgba(37, 99, 235, 0.04), transparent);
+    background: linear-gradient(180deg, rgba(236, 72, 153, 0.06), transparent);
     opacity: 0;
     transition: opacity var(--transition-smooth);
     pointer-events: none;
@@ -67,8 +67,9 @@
 }
 
 .product-card:hover {
-    transform: translateY(-8px) scale(1.02);
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+    transform: translateY(-4px);
+    box-shadow: 0 25px 50px -12px rgba(0, 113, 227, 0.25);
+    background: linear-gradient(145deg, #32445e 0%, #253147 100%);
     border-color: transparent;
 }
 
@@ -106,14 +107,13 @@
     background: #ffffff;
     padding: 16px;
     border-bottom: 1px solid var(--border-subtle);
-    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.4s ease;
+    transition: transform var(--transition-smooth);
     position: relative;
     z-index: 2;
 }
 
 .product-card:hover img {
-    transform: scale(1.12) rotate(-1.5deg);
-    filter: brightness(1.05);
+    transform: scale(1.05);
 }
 
 /* ─── Card Content ─── */