FSST/Geizkragen
FSST/Geizkragen
2
0
Fork 0
Code Issues Projects 1 Releases 1 Wiki Activity

Refactor product card styles for enhanced visual effects and smoother transitions

Browse Source
This commit is contained in:
Fabian Schieder 2026-03-31 00:47:36 +02:00
parent 0722c2d5de
commit a090f5adcf
1 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
assets/css/compcard.css
View File

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