mirror of
https://github.com/myronblair/tomsjavajive
synced 2026-06-30 17:50:32 -05:00
myron
771e1a15b1
Split style.css into home.css (hero, features, newsletter, splash) and products.css (product grid/cards). Each page loads only what it needs via $extraHead. style.css now contains only truly shared styles. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
119 lines
2.2 KiB
CSS
119 lines
2.2 KiB
CSS
/* Product Grid */
|
|
.product-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 2rem;
|
|
}
|
|
|
|
/* Product Card */
|
|
.product-card {
|
|
background: var(--color-surface);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
transition: var(--transition);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.product-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: var(--shadow-xl);
|
|
}
|
|
|
|
.product-card-image {
|
|
display: block;
|
|
position: relative;
|
|
padding-top: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.product-card-image img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.5s ease;
|
|
}
|
|
|
|
.product-card:hover .product-card-image img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.product-card-badge {
|
|
position: absolute;
|
|
top: 1rem;
|
|
left: 1rem;
|
|
background: var(--color-primary);
|
|
color: white;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: var(--radius-full);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.product-card-body {
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
.product-card-category {
|
|
font-size: 0.8125rem;
|
|
color: var(--color-primary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.product-card-title {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.product-card-title a {
|
|
color: inherit;
|
|
}
|
|
|
|
.product-card-title a:hover {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.product-card-price {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.product-card-price .current {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.product-card-price .original {
|
|
font-size: 0.9375rem;
|
|
color: var(--color-text-muted);
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.product-card-rating {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
color: #F59E0B;
|
|
font-size: 0.875rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.product-card-rating span {
|
|
color: var(--color-text-muted);
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.product-grid { grid-template-columns: 1fr; }
|
|
}
|