124 lines
2.2 KiB
CSS
124 lines
2.2 KiB
CSS
.product-card {
|
|
background: white;
|
|
border: 0.0625rem solid var(--gray-200);
|
|
border-radius: var(--radius-xl);
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
transition: all 0.25s;
|
|
position: relative;
|
|
}
|
|
|
|
.product-card-link {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.product-card:hover {
|
|
border-color: var(--blue);
|
|
box-shadow: 0 0.5rem 1.5rem rgba(26, 111, 212, 0.12);
|
|
transform: translateY(-0.25rem);
|
|
}
|
|
|
|
.product-img {
|
|
height: 18rem;
|
|
background: var(--gray-50); /* neutral fallback while image loads */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.product-img img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
transition: transform 0.35s ease;
|
|
}
|
|
|
|
.product-card:hover .product-img img {
|
|
transform: scale(1.05); /* subtle zoom on hover */
|
|
}
|
|
|
|
.product-disc {
|
|
position: absolute;
|
|
top: var(--space-3);
|
|
left: var(--space-3);
|
|
background: var(--red);
|
|
color: white;
|
|
font-size: var(--text-xs);
|
|
font-weight: 800;
|
|
padding: var(--space-1) var(--space-2);
|
|
border-radius: var(--radius-sm);
|
|
z-index: 3;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.product-body {
|
|
padding: var(--space-4);
|
|
}
|
|
.product-name {
|
|
font-size: var(--text-md);
|
|
font-weight: 700;
|
|
color: var(--gray-800);
|
|
margin-bottom: var(--space-2);
|
|
line-height: 1.4;
|
|
}
|
|
.product-rating {
|
|
font-size: var(--text-sm);
|
|
color: #f4b400;
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.product-price {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: var(--space-2);
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
.product-price .rp-now {
|
|
font-size: var(--text-xl);
|
|
font-weight: 800;
|
|
color: var(--blue);
|
|
}
|
|
.product-price .rp-old {
|
|
font-size: var(--text-md);
|
|
color: var(--gray-400);
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.product-add-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
place-self: end;
|
|
gap: var(--space-2);
|
|
width: 100%;
|
|
background: var(--blue-light);
|
|
color: var(--blue);
|
|
border: none;
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-3);
|
|
font-size: var(--text-md);
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
transition: all 0.25s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.product-add-btn svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.product-add-btn:hover {
|
|
background: var(--blue);
|
|
color: white;
|
|
}
|