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