From 771e1a15b156f9760d5cc889849c7ddd72c96daa Mon Sep 17 00:00:00 2001 From: Myron Blair Date: Mon, 15 Jun 2026 17:32:57 +0000 Subject: [PATCH] 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 --- assets/css/home.css | 182 +++++++++++++++++++++++ assets/css/products.css | 118 +++++++++++++++ assets/css/style.css | 319 +--------------------------------------- index.php | 2 + product.php | 1 + shop.php | 1 + 6 files changed, 307 insertions(+), 316 deletions(-) create mode 100644 assets/css/home.css create mode 100644 assets/css/products.css diff --git a/assets/css/home.css b/assets/css/home.css new file mode 100644 index 0000000..f5e5f37 --- /dev/null +++ b/assets/css/home.css @@ -0,0 +1,182 @@ +/* Hero Section */ +.hero { + background: linear-gradient(135deg, rgba(27,27,27,0.7) 0%, rgba(27,27,27,0.4) 100%), + url('/assets/images/hero-coffee.jpg'); + background-size: cover; + background-position: center; + min-height: 600px; + display: flex; + align-items: center; + text-align: center; + color: white; + padding: 4rem 0; +} + +.hero h1 { + font-family: var(--font-display); + font-size: 3.5rem; + font-weight: 700; + margin-bottom: 1rem; + line-height: 1.2; +} + +.hero p { + font-size: 1.25rem; + margin-bottom: 2rem; + opacity: 0.9; + max-width: 600px; + margin-left: auto; + margin-right: auto; +} + +/* Features Section */ +.features-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; +} + +.feature-card { + text-align: center; + padding: 2rem; +} + +.feature-icon { + width: 64px; + height: 64px; + background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); + border-radius: var(--radius-lg); + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 1.5rem; + color: white; + font-size: 1.5rem; +} + +.feature-card h3 { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.75rem; +} + +.feature-card p { + color: var(--color-text-muted); + font-size: 0.9375rem; +} + +/* Newsletter Section */ +.newsletter { + background: linear-gradient(135deg, var(--color-secondary) 0%, #5D2E0A 100%); + color: white; + padding: 4rem 0; + text-align: center; +} + +.newsletter h2 { + font-family: var(--font-display); + font-size: 2rem; + margin-bottom: 0.5rem; +} + +.newsletter p { + opacity: 0.9; + margin-bottom: 1.5rem; +} + +.newsletter-form { + display: flex; + gap: 0.75rem; + max-width: 450px; + margin: 0 auto; +} + +.newsletter-form input { + flex: 1; + padding: 0.875rem 1rem; + border: none; + border-radius: var(--radius-md); + font-size: 1rem; +} + +.newsletter-form button { + padding: 0.875rem 1.5rem; + background: var(--color-primary); + color: white; + border: none; + border-radius: var(--radius-md); + font-weight: 600; + cursor: pointer; + transition: var(--transition); +} + +.newsletter-form button:hover { + background: var(--color-primary-dark); +} + +/* Coffee Splash Blocks */ +.splash-section { overflow: hidden; } + +.splash-scroll-wrap { + position: relative; + display: flex; + align-items: center; + gap: .5rem; +} + +.splash-scroll-track { + display: flex; + gap: 1.5rem; + overflow-x: auto; + scroll-behavior: smooth; + scrollbar-width: none; + -ms-overflow-style: none; + padding: .5rem 0; + flex: 1; +} + +.splash-scroll-track::-webkit-scrollbar { display: none; } + +.splash-item { + min-width: 220px; + flex-shrink: 0; +} + +.splash-arrow { + flex-shrink: 0; + width: 40px; + height: 40px; + border-radius: 50%; + border: 2px solid var(--color-border); + background: var(--color-surface); + color: var(--color-text); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all .2s; + z-index: 2; +} + +.splash-arrow:hover { + background: var(--color-primary); + border-color: var(--color-primary); + color: white; +} + +.splash-arrow:disabled { + opacity: .3; + cursor: default; +} + +@media (max-width: 768px) { + .hero h1 { font-size: 2.5rem; } + .hero p { font-size: 1.125rem; } + .newsletter-form { flex-direction: column; } + .splash-arrow { display: none; } + .splash-scroll-track { padding-bottom: .5rem; } +} + +@media (max-width: 480px) { + .hero h1 { font-size: 2rem; } +} diff --git a/assets/css/products.css b/assets/css/products.css new file mode 100644 index 0000000..e408c81 --- /dev/null +++ b/assets/css/products.css @@ -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; } +} diff --git a/assets/css/style.css b/assets/css/style.css index 43e83a6..bad09ae 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -197,37 +197,6 @@ img { justify-content: center; } -/* Hero Section */ -.hero { - background: linear-gradient(135deg, rgba(27,27,27,0.7) 0%, rgba(27,27,27,0.4) 100%), - url('/assets/images/hero-coffee.jpg'); - background-size: cover; - background-position: center; - min-height: 600px; - display: flex; - align-items: center; - text-align: center; - color: white; - padding: 4rem 0; -} - -.hero h1 { - font-family: var(--font-display); - font-size: 3.5rem; - font-weight: 700; - margin-bottom: 1rem; - line-height: 1.2; -} - -.hero p { - font-size: 1.25rem; - margin-bottom: 2rem; - opacity: 0.9; - max-width: 600px; - margin-left: auto; - margin-right: auto; -} - /* Buttons */ .btn { display: inline-flex; @@ -316,157 +285,6 @@ img { color: var(--color-text-muted); } -/* 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; -} - -/* Features Section */ -.features-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 2rem; -} - -.feature-card { - text-align: center; - padding: 2rem; -} - -.feature-icon { - width: 64px; - height: 64px; - background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); - border-radius: var(--radius-lg); - display: flex; - align-items: center; - justify-content: center; - margin: 0 auto 1.5rem; - color: white; - font-size: 1.5rem; -} - -.feature-card h3 { - font-size: 1.25rem; - font-weight: 600; - margin-bottom: 0.75rem; -} - -.feature-card p { - color: var(--color-text-muted); - font-size: 0.9375rem; -} - /* Cards */ .card { background: var(--color-surface); @@ -594,55 +412,6 @@ img { color: var(--color-error); } -/* Newsletter Section */ -.newsletter { - background: linear-gradient(135deg, var(--color-secondary) 0%, #5D2E0A 100%); - color: white; - padding: 4rem 0; - text-align: center; -} - -.newsletter h2 { - font-family: var(--font-display); - font-size: 2rem; - margin-bottom: 0.5rem; -} - -.newsletter p { - opacity: 0.9; - margin-bottom: 1.5rem; -} - -.newsletter-form { - display: flex; - gap: 0.75rem; - max-width: 450px; - margin: 0 auto; -} - -.newsletter-form input { - flex: 1; - padding: 0.875rem 1rem; - border: none; - border-radius: var(--radius-md); - font-size: 1rem; -} - -.newsletter-form button { - padding: 0.875rem 1.5rem; - background: var(--color-primary); - color: white; - border: none; - border-radius: var(--radius-md); - font-weight: 600; - cursor: pointer; - transition: var(--transition); -} - -.newsletter-form button:hover { - background: var(--color-primary-dark); -} - /* Footer */ .footer { background: var(--color-text); @@ -747,105 +516,23 @@ img { } @media (max-width: 768px) { - .hero h1 { - font-size: 2.5rem; - } - - .hero p { - font-size: 1.125rem; - } - .section-header h2 { font-size: 2rem; } - + .nav-links { display: none; } - + .footer-grid { grid-template-columns: 1fr; gap: 2rem; } - + .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; } - - .newsletter-form { - flex-direction: column; - } } -@media (max-width: 480px) { - .hero h1 { - font-size: 2rem; - } - - .product-grid { - grid-template-columns: 1fr; - } -} - -/* ── Coffee Splash Blocks ─────────────────────────── */ -.splash-section { overflow: hidden; } - -.splash-scroll-wrap { - position: relative; - display: flex; - align-items: center; - gap: .5rem; -} - -.splash-scroll-track { - display: flex; - gap: 1.5rem; - overflow-x: auto; - scroll-behavior: smooth; - scrollbar-width: none; - -ms-overflow-style: none; - padding: .5rem 0; - flex: 1; -} - -.splash-scroll-track::-webkit-scrollbar { display: none; } - -.splash-item { - min-width: 220px; - flex-shrink: 0; -} - -.splash-arrow { - flex-shrink: 0; - width: 40px; - height: 40px; - border-radius: 50%; - border: 2px solid var(--color-border); - background: var(--color-surface); - color: var(--color-text); - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: all .2s; - z-index: 2; -} - -.splash-arrow:hover { - background: var(--color-primary); - border-color: var(--color-primary); - color: white; -} - -.splash-arrow:disabled { - opacity: .3; - cursor: default; -} - -@media (max-width: 768px) { - .splash-arrow { display: none; } - .splash-scroll-track { padding-bottom: .5rem; } -} -/* ────────────────────────────────────────────────── */ diff --git a/index.php b/index.php index 8a41e16..bf1702d 100644 --- a/index.php +++ b/index.php @@ -4,6 +4,8 @@ */ $pageTitle = "Tom's Java Jive | Premium Coffee Beans & Fresh Roasts"; +$extraHead = ' +'; require_once __DIR__ . '/includes/functions.php'; // Get about us sections diff --git a/product.php b/product.php index b3fd904..0795e9d 100644 --- a/product.php +++ b/product.php @@ -3,6 +3,7 @@ * Tom's Java Jive - Product Detail Page */ +$extraHead = ''; require_once __DIR__ . '/includes/functions.php'; $productId = $_GET['id'] ?? ''; diff --git a/shop.php b/shop.php index dd47b84..b0d3c0d 100644 --- a/shop.php +++ b/shop.php @@ -4,6 +4,7 @@ */ $pageTitle = "Shop - Tom's Java Jive"; +$extraHead = ''; require_once __DIR__ . '/includes/functions.php'; // Get filters