Modularize CSS into page-specific files

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>
2026-07-28 01:02:35 -05:00 · 2026-06-15 17:32:57 +00:00
parent f54148dbe7
commit 771e1a15b1
6 changed files with 307 additions and 316 deletions
@@ -0,0 +1,118 @@
+/* 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; }
+}