From f30c846e9ef8c3dd68c004d27c8e04fe0e97bb2d Mon Sep 17 00:00:00 2001
From: dereklseitz <derekseitz@dsnet.works>
Date: Sat, 6 Sep 2025 19:29:59 -0500
Subject: [PATCH] Feat, Fix, and Refactor: Consolidate index page changes

Feat: Refactor index.njk to be data-driven and fix related rendering issues.

Fix: Resolve layout and functionality bugs, including broken JavaScript for the featured item carousel, layout shifts in category navigation, and CSS issues with the testimonial carousel.

Refactor: Centralize global styles using CSS custom property variables and clean up redundant CSS rules.
---
 src/credits.njk                               |   2 +-
 .../patio/{fire-pit.jpg => firepit.jpg}       | Bin
 ...maple-tree.jpg => japanese-maple-tree.jpg} | Bin
 .../patio/{fire-pit.jpg => firepit.jpg}       | Bin
 ...maple-tree.jpg => japanese-maple-tree.jpg} | Bin
 src/index.njk                                 | 200 ++++++------------
 src/scripts/script.js                         |  37 ++--
 src/styles/about.css                          | 106 +++++-----
 src/styles/base.css                           |  15 +-
 src/styles/community.css                      |  82 ++++---
 src/styles/gallery.css                        |  80 +++----
 src/styles/header-footer.css                  | 104 +++++----
 src/styles/index.css                          | 181 ++++++++--------
 src/styles/variables.css                      |  36 ++++
 14 files changed, 395 insertions(+), 448 deletions(-)
 rename src/images/_m-thumbs/patio/{fire-pit.jpg => firepit.jpg} (100%)
 rename src/images/_m-thumbs/trees/{maple-tree.jpg => japanese-maple-tree.jpg} (100%)
 rename src/images/_s-thumbs/patio/{fire-pit.jpg => firepit.jpg} (100%)
 rename src/images/_s-thumbs/trees/{maple-tree.jpg => japanese-maple-tree.jpg} (100%)

diff --git a/src/credits.njk b/src/credits.njk
index d85552f..a646ff4 100644
--- a/src/credits.njk
+++ b/src/credits.njk
@@ -25,7 +25,7 @@ pageScripts:
 
     <div>
         <ul class="credits-list">
-        {% for credit in credits.credits %}
+        {% for credit in credits.CREDITS %}
             <li class="credit" data-tooltip="../images/_m-thumbs/{{ credit.category }}/{{ credit.fileName }}">
                 <div class="thumb">
                     <img class="thumb-inline"
diff --git a/src/images/_m-thumbs/patio/fire-pit.jpg b/src/images/_m-thumbs/patio/firepit.jpg
similarity index 100%
rename from src/images/_m-thumbs/patio/fire-pit.jpg
rename to src/images/_m-thumbs/patio/firepit.jpg
diff --git a/src/images/_m-thumbs/trees/maple-tree.jpg b/src/images/_m-thumbs/trees/japanese-maple-tree.jpg
similarity index 100%
rename from src/images/_m-thumbs/trees/maple-tree.jpg
rename to src/images/_m-thumbs/trees/japanese-maple-tree.jpg
diff --git a/src/images/_s-thumbs/patio/fire-pit.jpg b/src/images/_s-thumbs/patio/firepit.jpg
similarity index 100%
rename from src/images/_s-thumbs/patio/fire-pit.jpg
rename to src/images/_s-thumbs/patio/firepit.jpg
diff --git a/src/images/_s-thumbs/trees/maple-tree.jpg b/src/images/_s-thumbs/trees/japanese-maple-tree.jpg
similarity index 100%
rename from src/images/_s-thumbs/trees/maple-tree.jpg
rename to src/images/_s-thumbs/trees/japanese-maple-tree.jpg
diff --git a/src/index.njk b/src/index.njk
index 3ca9cce..a9c9c39 100644
--- a/src/index.njk
+++ b/src/index.njk
@@ -1,6 +1,7 @@
 ---
 layout: base.njk
 metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev"
+seoIndexing: false
 title: "Landing - Bloom Valley Nursery Demo"
 stylesheet: 
     - "/styles/variables.css"
@@ -16,144 +17,71 @@ pageScripts:
 ---
 
 <!-- Main Content Section -->
-
-<div id="left-aside">
-  <section id="perks-feature-container" >
-    <h2 id="perks-heading">Shopper Perks</h2>
-    <div class="perk-item">
-      <h3>- 50% Off Deal -</h3>
-      <p>New subscribers to our newsletter this month will receive a coupon for 50% off their first purchase! Click here for details! Terms and conditions apply.</p>
-    </div>
-    <div class="perk-item">
-      <h3>Exceptional Quality</h3>
-      <p>Every plant is carefully cultivated from seed or bulb to maturity, offering you vibrant, healthy specimens.</p>
-    </div>
-    <div class="perk-item">
-      <h3>Expert Guidance</h3>
-      <p>Our knowledgeable team is here to help, from selecting the perfect plants to offering planting tips.</p>
-    </div>
-    <div class="perk-item">
-      <h3>Eco-Friendly Practices</h3>
-      <p>We prioritize sustainability by using environmentally conscious growing methods, so you can feel good about your choices.</p>
-    </div>
-  </section>
+<div id="left-side">
   
-  <section id="testimonials-feature" >
-    <h2>What Others Say</h2>
-    <div class="testimonial-container">
-      <div class="testimonial">
-        <p>"My order arrived the very next day. The speed of delivery and high-quality products provided by Bloom Valley Nursery helped my project go smoothly from start to finish!"</p>
-        <h3>- Caroline N.</h3>
-      </div>
-      <div class="testimonial">
-        <p>"Thanks to the Gardening 101 Workshop with Bethany and Bloom Valley Nursery's amazing line of products, I won 'Best Azaleas' at the 2024 Royal Horticultural Society's American Cup!"</p>
-        <h3>- Morris F.</h3>
-      </div>
-      <div class="testimonial">
-        <p>"Bloom Valley Nursery's community garden inspired me take charge of my health. I was able to lose 50 pounds!"</p>
-        <h3>- Gladis B.</h3>
-      </div>
-    </div> 
-  </section>
+  <!-- Promo Feature -->
+	<section id="promos-container">
+		<h2 id="promos-heading">Shopper Promos</h2>
+		{% for promo in promotions.PROMOS %}
+			<div id="{{ promo.id }}" class="promo-item">
+				<h3 class="promo-title">{{ promo.title }}</h3>
+				<p class="promo-description">{{ promo.description }}</p>
+				<button type="button" class="ctaButton">{{ promo.ctaText }}</button>
+			</div>
+		{% endfor %}
+	</section>
+
+  <!-- Testimonials Feature -->
+	<section id="testimonials-container">
+		<h2 id="testimonials-heading">What Others Say</h2>
+		{% for item in testimonials.TESTIMONIALS %}
+			<div id="{{ id }}" class="testimonial-item">
+				<h3 class="client-name">{{ item.clientName }} said<h3>
+				<p class="client-quote">"{{ item.testimonial }}"</p>
+			</div>
+		{% endfor %}
+	</section>
 </div>
 
-  <!--<div id="featured-images">
-<div class="featured-item">
-<img src="image1.jpg" alt="Feature 1">
-</div>-->
+<div id="center">
+	<section id="featured-container">
+		<h2 class="featured-heading">Featured Items</h2>
+		<ul id="featured-list">
+			{% for item in inventory.INVENTORY %}
+				{% if item.isFeatured %}
+					<li>
+						<div id="{{ item.skuID }}-{{ item.catNumber }}-{{ item.productNumber }}" class="featured-card">
+							<a href="/gallery/">
+                <h3 class="product-name">{{ item.productName }}</h3>
+								<figure>
+									<img src="images/_m-thumbs/{{ item.category }}/{{ item.imageFile }}" alt="{{ item.altText }}" class="featured-item">
+									<figcaption class="short-description">{{ item.shortDescription }}</figcaption>
+								</figure>
+								<p class="price">${{ item.price }}</p>
+							</a>
+						</div>
+					</li>
+				{% endif %}
+			{% endfor %}
+		</ul>
+	</section>
+</div>
 
-<section id="featured-container" >
-  <h2> This Week's Featured Items</h2>
-  <ul id="featured-images">
-    <li>
-      <a href="/gallery/" id="featured-aloe-plant">
-        <figure>
-          <img src="images/indoor/AloePlant.png" alt="An Aloe Vera plant in a turquoise ceramic planter." class="featured-item">
-          <figcaption>Aloe Vera / Turquoise Planter</figcaption>
-        </figure>
-      </a>
-    </li>
-    <li>
-      <a href="/gallery/" id="featured-bird-house">
-        <figure>
-          <img src="images/accessories/BirdHouse.png" alt="A handmade wooden birdhouse painted blue." class="featured-item">
-          <figcaption>Handmade Wooden Birdhouse - Blue</figcaption>
-        </figure>
-      </a>
-    </li>
-    <li>
-      <a href="/gallery/" id="featured-apple-tree">
-        <figure>
-          <img src="images/trees/AppleTree.png" alt="A Red Gala apple sapling in a burlap wrap." class="featured-item">
-          <figcaption>Red Gala Apple Sapling - Burlap Bound</figcaption>
-        </figure>
-      </a>
-    </li>
-    <li>
-      <a href="/gallery/" id="featured-potting-soil"> 
-        <figure>
-          <img src="images/accessories/PottingSoil.png" alt="A 10 lbs bag of potting soil." class="featured-item">
-          <figcaption>Potting Soil - 10 lbs Bag</figcaption>
-        </figure>
-      </a>
-    </li>
-    <li>
-      <a href="/gallery/" id="featured-spider-plant">
-        <figure>
-          <img src="images/indoor/SpiderPlant.png" alt="A Spider plant in a light gray ceramic planter." class="featured-item">
-          <figcaption>Spider Plant / Light Gray Planter</figcaption>
-        </figure>
-      </a>
-    </li>
-    <li>
-      <a href="/gallery/" id="featured-birch-tree">
-        <figure>
-          <img src="images/trees/BirchTree.png" alt="A Silver Birch sapling in a disposable plastic container." class="featured-item">
-          <figcaption>Silver Birch Sapling - Containerized</figcaption>
-        </figure>
-      </a>
-    </li>
-    <li>
-      <a href="/gallery/" id="featured-watering-can">
-        <figure>
-          <img src="images/accessories/WateringCan.png" alt="A blue painted aluminum watering can." class="featured-item">
-          <figcaption>Painted Aluminum Watering Can - Blue</figcaption>
-        </figure>
-      </a>
-    </li>
-    <li>
-      <a href="/gallery/" id="featured-string-of-pearls">
-        <figure>
-          <img src="images/indoor/StringofPearls.png" alt="String-of-pearls plant in hanging white ceramic planter." class="featured-item">
-          <figcaption>String-of-Pearls Plant / Hanging White Planter</figcaption>
-        </figure>
-      </a>
-    </li>
-    <li>
-      <a href="/gallery/" id="featured-maple-tree">
-        <figure>
-          <img src="images/trees/MapleTree.png" alt="A Japanese Maple sapling in a burlap wrap." class="featured-item">
-          <figcaption>Japanese Maple Sapling - Burlap Bound</figcaption>
-        </figure>
-      </a>
-    </li>
-  </ul>
-</section>
-
-<nav id="right-aside">
-  <div id="category-nav-container">
-    <h2>Shop by Category</h2>
-    <div class="categories">
-      <ul>
-        <li><a href="/gallery/?category=trees#" class="cat-btn">Trees</a></li>
-          <li><a href="/gallery/?category=shrubs#" class="cat-btn">Shrubs</a></li>
-          <li><a href="/gallery/?category=indoor#" class="cat-btn">Indoor</a></li>
-          <li><a href="/gallery/?category=patio#" class="cat-btn">Patio</a></li>
-          <li><a href="/gallery/?category=tools#" class="cat-btn">Tools</a></li>
-          <li><a href="/gallery/?category=accessories#" class="cat-btn">Accessories</a></li>
-          <li><a href="/gallery/?category=landscaping#" class="cat-btn">Landscaping</a></li>
-        </ul>
+<div id="right-side">
+  <nav id="category-nav">
+    <div id="category-nav-container">
+      <h2>Shop by Category</h2>
+      <div class="categories">
+        <ul>
+          <li><a href="/gallery/?category=trees#" class="cat-btn">Trees</a></li>
+            <li><a href="/gallery/?category=shrubs#" class="cat-btn">Shrubs</a></li>
+            <li><a href="/gallery/?category=indoor#" class="cat-btn">Indoor</a></li>
+            <li><a href="/gallery/?category=patio#" class="cat-btn">Patio</a></li>
+            <li><a href="/gallery/?category=tools#" class="cat-btn">Tools</a></li>
+            <li><a href="/gallery/?category=accessories#" class="cat-btn">Accessories</a></li>
+            <li><a href="/gallery/?category=landscaping#" class="cat-btn">Landscaping</a></li>
+          </ul>
+      </div>
     </div>
-  </div>
-</nav>
-      <!-- Content specific to this page goes here -->
+  </nav>
+</div>
diff --git a/src/scripts/script.js b/src/scripts/script.js
index f7bf166..de2883b 100644
--- a/src/scripts/script.js
+++ b/src/scripts/script.js
@@ -52,27 +52,27 @@ document.addEventListener("DOMContentLoaded", () => {
         document.body.appendChild(modal);
     }
 
-    // ================== SHOPPER PERKS CAROUSEL ==================
-    const perks = document.querySelectorAll(".perk-item");
-    let currentIndexPerks = 0;
+    // ================== SHOPPER PROMO CAROUSEL ==================
+    const promo = document.querySelectorAll(".promo-item");
+    let currentIndexPromo = 0;
 
-    function showNextPerk() {
-        perks.forEach(perk => {
-            perk.classList.remove("visible");
-            perk.style.display = "none";
+    function showNextPromo() {
+        promo.forEach(promo => {
+            promo.classList.remove("visible");
+            promo.style.display = "none";
         });
 
-        perks[currentIndexPerks].classList.add("visible");
-        perks[currentIndexPerks].style.display = "block";
+        promo[currentIndexPromo].classList.add("visible");
+        promo[currentIndexPromo].style.display = "block";
 
-        currentIndexPerks = (currentIndexPerks + 1) % perks.length;
+        currentIndexPromo = (currentIndexPromo + 1) % promo.length;
     }
 
-    showNextPerk();
-    setInterval(showNextPerk, 2250);
+    showNextPromo();
+    setInterval(showNextPromo, 2250);
 
     // ================== CUSTOMER HIGHLIGHTS CAROUSEL ==================
-    const testimonials = document.querySelectorAll(".testimonial");
+    const testimonials = document.querySelectorAll(".testimonial-item");
     let currentIndexTestimonials = 0;
 
     function showNextTestimonial() {
@@ -91,7 +91,7 @@ document.addEventListener("DOMContentLoaded", () => {
     setInterval(showNextTestimonial, 3500);
 
     // ================== FEATURED ITEMS CAROUSEL ==================
-    const featuredItems = document.querySelectorAll("#featured-images .featured-item");
+    /*const featuredItems = document.querySelectorAll("#featured-images .featured-item");
     let currentIndex = 0;
 
     function showNextItem() {
@@ -101,12 +101,13 @@ document.addEventListener("DOMContentLoaded", () => {
     }
 
     featuredItems[currentIndex].classList.add("active");
-    setInterval(showNextItem, 3000);
+    setInterval(showNextItem, 3000);*/
 
     // ================== UPDATED FEATURED ITEMS CAROUSEL ==================
+    const featuredItems = document.querySelectorAll(".featured-card");
     let currentIndexFeatured = 0;
 
-    function updateFeaturedImages() {
+    function updateFeaturedItems() {
         featuredItems.forEach((item, index) => {
             const text = item.closest('a');
             if (text) text.style.display = (index === currentIndexFeatured ? "block" : "none");
@@ -118,9 +119,9 @@ document.addEventListener("DOMContentLoaded", () => {
 
     function showNextFeatured() {
         currentIndexFeatured = (currentIndexFeatured + 1) % featuredItems.length;
-        updateFeaturedImages();
+        updateFeaturedItems();
     }
 
-    updateFeaturedImages();
+    updateFeaturedItems();
     setInterval(showNextFeatured, 3000);
 });
diff --git a/src/styles/about.css b/src/styles/about.css
index 053c7f0..c6ee993 100644
--- a/src/styles/about.css
+++ b/src/styles/about.css
@@ -1,4 +1,4 @@
-/* |--↓-↓-↓  Start about.html  ↓-↓-↓--| */
+/* |--↓-↓-↓ Start about.html ↓-↓-↓--| */
 .about {
   display: flex;
   flex-direction: column;
@@ -17,39 +17,36 @@
   display: block;
   align-items: center;
   width: 25vw;
-  background-color:#f0c06d;
-  border: solid #f7f7f7;
+  background-color: var(--color-soft-golden);
+  border: solid var(--color-destin-sand);
   border-radius: 10px;
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); 
-
+  box-shadow: var(--shadow-medium); 
 }
 
 #phone,
 #hours {
-  background-color: #f7f7f7;
-  border: solid #bdd4da;
+  background-color: var(--color-destin-sand);
+  border: solid var(--color-light-teal);
   border-radius: 10px;
   margin: 5px 10px;
 }
 
-
-
 #business-info h3,
 #feedback-intro h2 {
-font-size: 1.875rem;
-text-align: center;
-text-shadow: 0.5px 0.5px 2px #014038, /* Bottom-right base shadow */
--0.5px -0.5px 2px #014038, /* Top-left base shadow */
--0.5px 0.5px 2px #014038, /* Bottom-left base shadow */
-0.5px -0.5px 2px #014038; /* Top-right base shadow */
-color: #f7f7f7;
-background-color: #96baa0;
-border: solid #f7f7f7;
-max-width: 75vw;
-border-radius: 10px;
-padding-left: 10px;
-transform: translateX(0px);
-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
+  font-size: 1.875rem;
+  text-align: center;
+  text-shadow: 0.5px 0.5px 2px var(--color-dark-green),
+  -0.5px -0.5px 2px var(--color-dark-green),
+  -0.5px 0.5px 2px var(--color-dark-green),
+  0.5px -0.5px 2px var(--color-dark-green);
+  color: var(--color-destin-sand);
+  background-color: var(--color-mid-green);
+  border: solid var(--color-destin-sand);
+  max-width: 75vw;
+  border-radius: 10px;
+  padding-left: 10px;
+  transform: translateX(0px);
+  box-shadow: var(--shadow-medium);
 }
 
 #business-info p {
@@ -59,13 +56,13 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
 
 #business-info h4 {
   text-align: center;
-  background-color: #bdd4da;
-  border: solid #f7f7f7;
+  background-color: var(--color-light-teal);
+  border: solid var(--color-destin-sand);
   border-radius: 15px;
   padding: 0 10px;
   width: 50%;
   margin-left: 22.5%;
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); 
+  box-shadow: var(--shadow-subtle); 
 }
 
 #story {
@@ -78,23 +75,23 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
 }
 
 #story h2 {
-  background-color: #96baa0;
-  color: #f7f7f7;
-  border: solid #f7f7f7;
+  background-color: var(--color-mid-green);
+  color: var(--color-destin-sand);
+  border: solid var(--color-destin-sand);
   border-radius: 15px;
-  text-shadow: 0.5px 0.5px 2px #014038, /* Bottom-right base shadow */
--0.5px -0.5px 2px #014038, /* Top-left base shadow */
--0.5px 0.5px 2px #014038, /* Bottom-left base shadow */
-0.5px -0.5px 2px #014038; /* Top-right base shadow */
+  text-shadow: 0.5px 0.5px 2px var(--color-dark-green),
+  -0.5px -0.5px 2px var(--color-dark-green),
+  -0.5px 0.5px 2px var(--color-dark-green),
+  0.5px -0.5px 2px var(--color-dark-green);
   width: 50%;
   padding: 5px 10px;
   text-align: center;
   margin-right: 12.5%;
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); 
+  box-shadow: var(--shadow-medium); 
 }
 
 #story p {
-  color: #014038;
+  color: var(--color-dark-green);
   font-size: 1.25rem;
   font-weight: bold;
 }
@@ -104,27 +101,27 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
-  background-color: #96baa0;
-  border: solid #f7f7f7;
+  background-color: var(--color-mid-green);
+  border: solid var(--color-destin-sand);
   border-radius: 15px;
   width: 90vw;
   margin-top: 30px;
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); 
+  box-shadow: var(--shadow-medium); 
 }
 
 #feedback h2 {
-  background-color: #a4ccd6;
-  border: solid #f7f7f7;
+  background-color: var(--color-light-teal);
+  border: solid var(--color-destin-sand);
   border-radius: 10px;
   width: 50vw;
   padding: 5px 10px;
   text-align: center;
   margin-left: 25vw;
   margin-right: 25vw;
-  text-shadow: 0.5px 0.5px 2px #014038, /* Bottom-right base shadow */
-  -0.5px -0.5px 2px #014038, /* Top-left base shadow */
-  -0.5px 0.5px 2px #014038, /* Bottom-left base shadow */
-  0.5px -0.5px 2px #014038; /* Top-right base shadow */
+  text-shadow: 0.5px 0.5px 2px var(--color-dark-green),
+  -0.5px -0.5px 2px var(--color-dark-green),
+  -0.5px 0.5px 2px var(--color-dark-green),
+  0.5px -0.5px 2px var(--color-dark-green);
   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
 }
 
@@ -135,7 +132,6 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
   text-align: center;
   margin-left: 7.5vw;
   margin-right: 7.5vw;
-
 }
 
 #feedback p {
@@ -147,7 +143,7 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
   font-weight: bold;
 }
 
-#feedback-form form{
+#feedback-form form {
   display: flex;
   flex-direction: row;
   gap: 20px;
@@ -166,8 +162,8 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
 }
 
 #customer-info input {
-  background-color: #f7f7f7;
-  border: solid #014038;
+  background-color: var(--color-destin-sand);
+  border: solid var(--color-dark-green);
   border-radius: 15px;
   width: 90%; /* Ensures the input fields fill the section width */
   height: 30px; /* Adjusts height to match the textarea */
@@ -185,8 +181,8 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
 #customer-message #message-field textarea {
   width: 50vw; /* Takes full width of the section */
   height: 30vh; /* Adjust height as needed */
-  background-color: #f7f7f7;
-  border: solid #014038;
+  background-color: var(--color-destin-sand);
+  border: solid var(--color-dark-green);
   border-radius: 15px;
   box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1); 
 }
@@ -200,10 +196,10 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
 
 #form-submit {
   padding: 10px 20px;
-  background-color: #bdd4da;
-  border: solid #f7f7f7;
+  background-color: var(--color-light-teal);
+  border: solid var(--color-destin-sand);
   border-radius: 10px;
-  color: #014038;
+  color: var(--color-dark-green);
   font-size: 1rem;
   cursor: pointer;
   margin-bottom: 10px;
@@ -211,7 +207,7 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
 }
 
 #form-submit:hover {
-  background-color: #f7f7f7;
+  background-color: var(--color-destin-sand);
   box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1); 
 }
-/* |  ↑-↑-↑   End About.html   ↑-↑-↑--| */
\ No newline at end of file
+/* | ↑-↑-↑ End About.html ↑-↑-↑--| */
\ No newline at end of file
diff --git a/src/styles/base.css b/src/styles/base.css
index 4d5e1c3..4581a02 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -13,18 +13,16 @@ body {
   line-height: 1.5;
   margin: 0;
   padding: 0;
-  background-color: #bdd4da; /* Sky Bloom */
+  background-color: var(--color-light-teal); /* Sky Bloom */
 }
 
 body h1 {
-  text-shadow: 0.5px 0.5px .5px #f7f7f7, /* Bottom-right top shadow */
-  -0.5px -0.5px .5px #f7f7f7, /* Top-left top shadow */
-  -0.5px 0.5px .5px #f7f7f7, /* Bottom-left top shadow */
-  0.5px -0.5px .5px #f7f7f7; /* Top-right top shadow */
+  text-shadow: 0.5px 0.5px .5px var(--color-destin-sand), /* Bottom-right top shadow */
+  -0.5px -0.5px .5px var(--color-destin-sand), /* Top-left top shadow */
+  -0.5px 0.5px .5px var(--color-destin-sand), /* Bottom-left top shadow */
+  0.5px -0.5px .5px var(--color-destin-sand); /* Top-right top shadow */
 }
 
-
-
 /* Title Large (Arial Bold 30px) */
 h1 {
   font-family: 'Arial', sans-serif;
@@ -72,12 +70,11 @@ figcaption {
 }
 
 @media (max-width: 780px) {
-  html{
+  html {
     font-size: 14px;
   }
 }
 
-
 main {
   display: flex;
   flex-direction: row;
diff --git a/src/styles/community.css b/src/styles/community.css
index 0617530..c68255f 100644
--- a/src/styles/community.css
+++ b/src/styles/community.css
@@ -1,4 +1,4 @@
-/* |--↓-↓-↓  Start Community.html  ↓-↓-↓--| */
+/* |--↓-↓-↓ Start Community.html ↓-↓-↓--| */
 .community {
   display: flex;
   flex-direction: column;
@@ -10,17 +10,14 @@
 h1 {
   display: block;
   font-size: 2.3rem;
-  background-color: #f7f7f7;
-  border: solid #96baa0;
+  background-color: var(--color-destin-sand);
+  border: solid var(--color-mid-green);
   border-radius: 15px;
-  color: #014038;
+  color: var(--color-dark-green);
   text-decoration: underline;
-  text-shadow: 0.5px 0.5px 1px #014038, /* Bottom-right base shadow */
-  -0.5px -0.5px 1px #014038, /* Top-left base shadow */
-  -0.5px 0.5px 1px #014038, /* Bottom-left base shadow */
-  0.5px -0.5px 1px #014038; /* Top-right base shadow */
+  text-shadow: var(--text-outline-heading);
   padding: 5px 100px;
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); 
+  box-shadow: var(--shadow-subtle); 
 }
 
 #calendar-events-container {
@@ -30,14 +27,14 @@ h1 {
   border: none;
 }
 
-.calendar iframe{
+.calendar iframe {
   width: 975px;
   height: 750px;
   margin-top: 25px;
   margin-bottom: 20px;
-  background-color: #bdd4da;
+  background-color: var(--color-light-teal);
   border-radius: 15px;
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); 
+  box-shadow: var(--shadow-subtle); 
 }
 
 .upcoming-events {
@@ -51,30 +48,30 @@ h1 {
   flex-direction: column;
   align-items: center;
   text-align: center;
-  background-color: #f0c06d;
-  border: solid #014038;
+  background-color: var(--color-soft-golden);
+  border: solid var(--color-dark-green);
   border-radius: 15px;
   padding: 10px;
   width: 80vw;
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); 
+  box-shadow: var(--shadow-subtle); 
 }
 
 .events h2 {
   font-size: 1.875rem;
   text-align: center;
-  text-shadow: 0.5px 0.5px .5px #014038, /* Bottom-right top shadow */
-  -0.5px -0.5px .5px #014038, /* Top-left top shadow */
-  -0.5px 0.5px .5px #014038, /* Bottom-left top shadow */
-  0.5px -0.5px .5px #014038; /* Top-right top shadow */
-  color: #f7f7f7;
-  background-color: #96baa0;
-  border: solid #f7f7f7;
+  text-shadow: 0.5px 0.5px .5px var(--color-dark-green),
+  -0.5px -0.5px .5px var(--color-dark-green),
+  -0.5px 0.5px .5px var(--color-dark-green),
+  0.5px -0.5px .5px var(--color-dark-green);
+  color: var(--color-destin-sand);
+  background-color: var(--color-mid-green);
+  border: solid var(--color-destin-sand);
   border-radius: 10px;
   margin-left: auto;
   margin-right: auto;
   width: fit-content;
   padding: 0 50px;
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--shadow-medium);
 }
 
 .upcoming-events {
@@ -82,41 +79,39 @@ h1 {
   flex-direction: column;
   align-items: center;
   text-align: center;
-  background-color: #CADCD0;
-  border: solid #014038;
+  background-color: var(--color-pale-green);
+  border: solid var(--color-dark-green);
   border-radius: 15px;
   padding: 0px 20px 10px 20px;
   width: 95%;
   margin-top: 20px;
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
-
+  box-shadow: var(--shadow-subtle);
 }
 
 .zoho-event {
-  background-color:#f7f7f7;
-  border: solid #014038 2px;
+  background-color: var(--color-destin-sand);
+  border: solid var(--color-dark-green) 2px;
   border-radius: 15px;
   box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.8); 
   max-width: 1200px;
-
 }
 
 .zoho-event h3 {
   font-size: 1.875rem;
   text-align: center;
-  text-shadow: 0.5px 0.5px .5px #f7f7f7, /* Bottom-right top shadow */
-  -0.5px -0.5px .5px #f7f7f7, /* Top-left top shadow */
-  -0.5px 0.5px .5px #f7f7f7, /* Bottom-left top shadow */
-  0.5px -0.5px .5px #f7f7f7; /* Top-right top shadow */
-  color: #014038;
-  background-color: #bdd4da;
-  border: solid #f7f7f7;
+  text-shadow: 0.5px 0.5px .5px var(--color-destin-sand),
+  -0.5px -0.5px .5px var(--color-destin-sand),
+  -0.5px 0.5px .5px var(--color-destin-sand),
+  0.5px -0.5px .5px var(--color-destin-sand);
+  color: var(--color-dark-green);
+  background-color: var(--color-light-teal);
+  border: solid var(--color-destin-sand);
   border-radius: 10px;
   margin-left: auto;
   margin-right: auto;
   width: fit-content;
   padding: 0 50px;
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--shadow-medium);
 }
 
 .zoho-event p {
@@ -137,22 +132,21 @@ h1 {
 
 .event-list ul {
   list-style-type: none;
-  
 }
 
 .event-list li {
-  background-color: #f7f7f7;
-  border: solid #bdd4da;
+  background-color: var(--color-destin-sand);
+  border: solid var(--color-light-teal);
   border-radius: 15px;
   text-align: center;
   padding: 5px 10px;
   margin-bottom: 10px;
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); 
+  box-shadow: var(--shadow-subtle); 
 }
 
 .events strong {
-  color:#014038;
+  color: var(--color-dark-green);
   font-size: 1.1rem;
 }
 
-/* |  ↑-↑-↑   End Community.html   ↑-↑-↑--| */
\ No newline at end of file
+/* | ↑-↑-↑ End Community.html ↑-↑-↑--| */
\ No newline at end of file
diff --git a/src/styles/gallery.css b/src/styles/gallery.css
index c03996b..a1cd363 100644
--- a/src/styles/gallery.css
+++ b/src/styles/gallery.css
@@ -1,4 +1,4 @@
-/* |--↓-↓-↓  Start gallery.html  ↓-↓-↓--| */
+/* |--↓-↓-↓ Start gallery.html ↓-↓-↓--| */
 #main-gallery {
   display: flex;
   flex-direction: column;
@@ -10,31 +10,20 @@
   flex-direction: row;
   align-items: center;
   width: 95vw;
-  gap: 20px
+  gap: 20px;
 }
 
 #product-carousel-feature h2 {
   font-size: 1.875rem;
   text-align: center;
-  text-shadow: 0.5px 0.5px 1px #014038, /* Bottom-right base shadow */
-  -0.5px -0.5px 1px #014038, /* Top-left base shadow */
-  -0.5px 0.5px 1px #014038, /* Bottom-left base shadow */
-  0.5px -0.5px 1px #014038, /* Top-right base shadow */
-  0.5px 0.5px .5px #bdd4da, /* Bottom-right mid shadow */
-  -0.5px -0.5px .5px #bdd4da, /* Top-left mid shadow */
-  -0.5px 0.5px .5px #bdd4da, /* Bottom-left mid shadow */
-  0.5px -0.5px .5px #bdd4da, /* Top-right mid shadow */
-  0.5px 0.5px .5px #f7f7f7, /* Bottom-right top shadow */
-  -0.5px -0.5px .5px #f7f7f7, /* Top-left top shadow */
-  -0.5px 0.5px .5px #f7f7f7, /* Bottom-left top shadow */
-  0.5px -0.5px .5px #f7f7f7; /* Top-right top shadow */
-  color: #f7f7f7;
-  background-color: #96baa0;
-  border: solid #f7f7f7;
+  text-shadow: var(--text-shadow-layered);
+  color: var(--color-destin-sand);
+  background-color: var(--color-mid-green);
+  border: solid var(--color-destin-sand);
   border-radius: 10px;
   padding-left: 20px;
   transform: translateX(30px);
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--shadow-medium);
 }
 
 #product-category-card {
@@ -68,7 +57,7 @@
   align-items: center;
   text-align: center;
   white-space: wrap;
-  background-color: #f7f7f7; /* Optional background */
+  background-color: var(--color-destin-sand); /* Optional background */
 }
 
 .product-card img {
@@ -81,7 +70,7 @@
 
 #scroll-left, #scroll-right {
   cursor: pointer; /* Show pointer to indicate clickable buttons */
-  background-color: #014038; /* Dark green background */
+  background-color: var(--color-dark-green); /* Dark green background */
   color: white;
   border: none;
   padding: 10px;
@@ -108,13 +97,13 @@
 
 #main-gallery #right-aside h2 {
   font-size: 1.675rem;
-  background-color: #bdd4da;
-  color: #014038;
-  border: solid #014038;
+  background-color: var(--color-light-teal);
+  color: var(--color-dark-green);
+  border: solid var(--color-dark-green);
   border-radius: 5px;
   padding: 0 5px;
   white-space: nowrap;
-  box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--shadow-strong);
 }
 
 #main-gallery .categories ul {
@@ -126,25 +115,25 @@
 }
 
 #main-gallery .categories ul li {
-  border: solid #014038;
+  border: solid var(--color-dark-green);
   border-radius: 5px;
-  background-color: #96baa0;
+  background-color: var(--color-mid-green);
   margin-top: 20px;
   margin-right: 35px;
   min-width: 100%;
-  box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--shadow-strong);
 }
 
 #main-gallery .categories a {
-  color: #014038;
+  color: var(--color-dark-green);
   font-size: 1.3rem;
 }
 
 button#cart-details {
-  background-color: #f7f7f7;
-  border: solid #014038;
+  background-color: var(--color-destin-sand);
+  border: solid var(--color-dark-green);
   border-radius: 15px;
-  color: #014038;
+  color: var(--color-dark-green);
   font-weight: bold;
   font-size: 1.4em;
   text-align: center; /* Align text horizontally */
@@ -152,7 +141,7 @@ button#cart-details {
   padding: 0 15px; /* Horizontal padding for spacing */
   margin-top: 10px;
   margin-bottom: 10px;
-  box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--shadow-subtle);
   transform: translateX(-15vw) translateY(-5vh);
   transition: background-color 0.3s ease, color 0.3s ease;
   display: flex; /* Flexbox ensures content alignment */
@@ -161,34 +150,33 @@ button#cart-details {
 }
 
 button#cart-details:hover {
-  background-color: #014033;
-  color: #f7f7f7;
-  border: solid #f7f7f7;
+  background-color: var(--color-dark-green);
+  color: var(--color-destin-sand);
+  border: solid var(--color-destin-sand);
   border-radius: 15px;
 }
 
 .product-card {
-  box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--shadow-subtle);
   transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 .add-to-cart-btn {
   cursor: pointer;
-  background-color: #f7f7f7;
-  border: solid #014038;
-  color: #014038;
+  background-color: var(--color-destin-sand);
+  border: solid var(--color-dark-green);
+  color: var(--color-dark-green);
   font-weight: bold;
   border-radius: 5px;
-  box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--shadow-strong);
   transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 .add-to-cart-btn:hover {
-  background-color: #014038;
-  border: solid #f7f7f7;
-  color: #f7f7f7;
+  background-color: var(--color-dark-green);
+  border: solid var(--color-destin-sand);
+  color: var(--color-destin-sand);
   border-radius: 5px;
-  box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
-
+  box-shadow: var(--shadow-strong);
 }
-/* |--↑-↑-↑   End gallery.html   ↑-↑-↑--| */
\ No newline at end of file
+/* |--↑-↑-↑ End gallery.html ↑-↑-↑--| */
\ No newline at end of file
diff --git a/src/styles/header-footer.css b/src/styles/header-footer.css
index 28f3ce1..9422f74 100644
--- a/src/styles/header-footer.css
+++ b/src/styles/header-footer.css
@@ -1,8 +1,8 @@
-/* |--↓-↓-↓  Start Header  ↓-↓-↓--| */
+/* |--↓-↓-↓ Start Header ↓-↓-↓--| */
 header {
   padding: 20px;
-  background-color: #bdd4da;
-  border-bottom: 3px solid #96baa0;
+  background-color: var(--color-light-teal);
+  border-bottom: 3px solid var(--color-mid-green);
   width: 100%;
 }
 
@@ -56,7 +56,7 @@ header .logo img {
   width: 100%;
   height: auto;
   margin-left: 50px;
-  filter: drop-shadow(0 0 2px #f0c06d) drop-shadow(0 0 0px #014038);
+  filter: drop-shadow(0 0 2px var(--color-soft-golden)) drop-shadow(0 0 0px var(--color-dark-green));
 }
 
 /* Business name and navigation container */
@@ -75,12 +75,12 @@ header .logo img {
   position: static;
   padding: 15px;
   border-radius: 10px;
-  background-color: #f7f7f7;
-  color: #014038;
+  background-color: var(--color-destin-sand);
+  color: var(--color-dark-green);
   cursor: pointer;
   z-index: 5;
   transition: all 0.3s ease;
-  box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--shadow-strong);
   border: none;
   display: flex;
   justify-content: center;
@@ -91,19 +91,16 @@ header .logo img {
   font-family: 'Georgia', serif;
   display: block;
   font-size: 3.6rem;
-  color: #014038; /* Dark green for the title */
+  color: var(--color-dark-green); /* Dark green for the title */
   margin: 10px 0;
   text-align: center;
-  text-shadow: 0.5px 0.5px 1px #f7f7f7, /* Bottom-right top shadow */
-  -0.5px -0.5px 1px #f7f7f7, /* Top-left top shadow */
-  -0.5px 0.5px 1px #f7f7f7, /* Bottom-left top shadow */
-  0.5px -0.5px 1px #f7f7f7; /* Top-right top shadow */
+  text-shadow: var(--text-outline-heading);
 }
 
 header p.tagline {
   font-family: 'Arial', sans-serif;
   font-size: 1.4rem;
-  color: #96baa0; /* Pale green for the tagline */
+  color: var(--color-mid-green); /* Pale green for the tagline */
   margin: 0;
   text-align: center;
 }
@@ -167,7 +164,7 @@ header p.tagline {
     display: block;
     background: none;
     border: none;
-    color: #014038;
+    color: var(--color-dark-green);
     cursor: pointer;
   }
   
@@ -176,9 +173,9 @@ header p.tagline {
     display: none;
     width: 100%;
     margin-top: 10px;
-    background-color: #f7f7f7;
+    background-color: var(--color-destin-sand);
     border-radius: 5px;
-    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
+    box-shadow: var(--shadow-subtle);
   }
 
   nav.is-open {
@@ -205,11 +202,11 @@ header p.tagline {
 
 nav, #footer-nav {
   margin-top: 20px;
-  background-color: #f7f7f7; /* White for navigation background */
+  background-color: var(--color-destin-sand); /* White for navigation background */
   padding: 10px 20px;
   border-radius: 5px;
   width: 100%; /* Ensures the nav spans the width of the header */
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--shadow-subtle);
 }
 
 #shopping-cart {
@@ -218,12 +215,12 @@ nav, #footer-nav {
   right: 100px;
   padding: 20px;
   border-radius: 10px;
-  background-color: #f7f7f7;
-  color: #014038; 
+  background-color: var(--color-destin-sand);
+  color: var(--color-dark-green); 
   cursor: pointer;
   z-index: 5;
   transition: background-color 0.3s ease, color 0.3s ease;
-  box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--shadow-strong);
   border: none;
   display: flex;
   justify-content: center;
@@ -231,10 +228,10 @@ nav, #footer-nav {
 }
 
 #shopping-cart:hover {
-  background-color: #014038;
-  color: #96baa0;
-  border: solid #f7f7f7; 
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
+  background-color: var(--color-dark-green);
+  color: var(--color-mid-green);
+  border: solid var(--color-destin-sand); 
+  box-shadow: var(--shadow-medium);
 }
 
 nav ul, #footer-nav ul {
@@ -257,13 +254,13 @@ nav ul li, #footer-nav ul li {
 .current-page {
   font-size: 1.4em;
   font-weight: bold;
-  color: #014038;
-  background-color: #96baa0;
+  color: var(--color-dark-green);
+  background-color: var(--color-mid-green);
   border: none;
   text-decoration: underline;
   white-space: wrap;
   text-align: center;
-  box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--shadow-strong);
 }
 
 .community-link {
@@ -274,7 +271,7 @@ nav ul li a, #footer-nav ul li a {
   font-family: 'Arial', sans-serif;
   font-size: 1rem;
   font-weight: bold;
-  color: #014038; 
+  color: var(--color-dark-green); 
   text-decoration: underline;
   padding: 8px 15px;
   border-radius: 10px;
@@ -282,14 +279,14 @@ nav ul li a, #footer-nav ul li a {
 }
 
 nav ul li a:hover, #footer-nav ul li a:hover {
-  background-color: #f7f7f7;
-  color: #014038;
-  border: solid .5px #014038;
+  background-color: var(--color-destin-sand);
+  color: var(--color-dark-green);
+  border: solid .5px var(--color-dark-green);
   padding: 7px 14px;
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--shadow-medium);
 }
 
-/* |--↓-↓-↓  Start Footer  ↓-↓-↓--| */
+/* |--↓-↓-↓ Start Footer ↓-↓-↓--| */
 #footer {
   display: flex;
   flex-direction: column;
@@ -310,7 +307,7 @@ nav ul li a:hover, #footer-nav ul li a:hover {
   padding: 5px 10px;
   text-align: center;
   border-radius: 10px;
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--shadow-subtle);
 }
 
 button#submit-btn {
@@ -318,25 +315,25 @@ button#submit-btn {
   padding: 5px 10px;
   border-radius: 10px;
   cursor: pointer;
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--shadow-subtle);
   z-index: 5;
 }
 
 footer div label {
   font-size: 1.2rem;
   font-weight: bold;
-  color: #014038
+  color: var(--color-dark-green);
 }
 
 #newsletter-form {
   display: inline-block;
-  background-color: #f0c06d;
-  border: solid #f7f7f7;
+  background-color: var(--color-soft-golden);
+  border: solid var(--color-destin-sand);
   border-radius: 10px;
   width: 60%;
   padding: 5px;
   text-align: center;
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--shadow-medium);
 }
 
 /* #footer-nav {
@@ -348,7 +345,7 @@ footer div label {
   list-style-type: none;
   flex-direction: row;
   margin-top: 20px;
-  background-color: #f7f7f7;
+  background-color: var(--color-destin-sand);
   border-radius: 5px;
   width: fit-content; 
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -364,8 +361,8 @@ footer div label {
 #footer-nav ul li .current-page {
   font-size: 1.2em;
   font-weight: bold;
-  color: #014038;
-  background-color: #96baa0;
+  color: var(--color-dark-green);
+  background-color: var(--color-mid-green);
   text-decoration: underline;
 }
 
@@ -373,7 +370,7 @@ footer div label {
   font-family: 'Arial', sans-serif;
   font-size: 1rem;
   font-weight: bold;
-  color: #014038; 
+  color: var(--color-dark-green); 
   text-decoration: none;
   padding: 8px 15px;
   border-radius: 5px;
@@ -381,9 +378,9 @@ footer div label {
 }
 
 #footer-nav ul li a:hover {
-  background-color: #f7f7f7;
-  color: #014038;
-  border: solid #014038;
+  background-color: var(--color-destin-sand);
+  color: var(--color-dark-green);
+  border: solid var(--color-dark-green);
   border-radius: 10px;
 } */
 
@@ -410,13 +407,13 @@ text-align: center;
   display: inline-block;
   margin: 0 10px;
   padding: 0 10px;
-  color: #014038;
+  color: var(--color-dark-green);
 }
 
 #social-media ul li a {
   font-family: 'Arial', sans-serif;
   font-size: 1rem;
-  color: #014038; /* Dark green for the links */
+  color: var(--color-dark-green); /* Dark green for the links */
   text-decoration: none;
   padding: 8px 15px;
   border-radius: 5px;
@@ -424,10 +421,9 @@ text-align: center;
 }
 
 #social-media ul li a:hover {
-  background-color: #f0c06d;
-  color: #f7f7f7;
-  box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
-
+  background-color: var(--color-soft-golden);
+  color: var(--color-destin-sand);
+  box-shadow: var(--shadow-strong);
 }
 
 #copyright {
@@ -473,4 +469,4 @@ text-align: center;
 
 .visible {
   display: block;
-} 
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/styles/index.css b/src/styles/index.css
index 1b11de3..c6fe196 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,68 +1,68 @@
 
-.perk-item,
-.testimonial,
+.promo-item,
+.testimonial-item,
 .featured-item {
   display: none; /* Hide all by default */
 }
 
-.perk-item.visible,
-.testimonial.visible,
+.promo-item.visible,
+.testimonial-item.visible,
 .featured-item.active {
   display: block; /* Show visible or active items */
 }
 
-#left-aside,
-#right-aside {
+#left-side,
+#category-nav {
   flex: 1;
-  box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--shadow-strong);
 }
 
-#left-aside {
+#left-side {
   display: flex;
   flex-direction: column;
-  background-color: #f0c06d;
-  border: solid #f7f7f7;
+  background-color: var(--color-soft-golden);
+  border: solid var(--color-destin-sand);
   padding: 5px 10px;
   margin-top: 10px;
   border-radius: 10px;
 }
 
-#left-aside h2 {
-  border: solid #014038;
-  background-color: #bdd4da;
+#left-side h2 {
+  border: solid var(--color-dark-green);
+  background-color: var(--color-light-teal);
   border-radius: 10px;
 }
 
-#perks-feature-container {
-  background-color: #96baa0;
-  color: #014038;
-  border: solid #014038;
+#promos-container {
+  background-color: var(--color-mid-green);
+  color: var(--color-dark-green);
+  border: solid var(--color-dark-green);
   border-radius: 10px;
   padding: 5px 10px;
   margin-top: 5px;
   text-align: center;
-  box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--shadow-strong);
 }
 
-.perk-item {
-  background-color: #f7f7f7;
-  color: #014038;
-  border: solid #014038;
+.promo-item {
+  background-color: var(--color-destin-sand);
+  color: var(--color-dark-green);
+  border: solid var(--color-dark-green);
   border-radius: 10px;
   padding: 5px 10px;
   white-space: normal;
   max-height: 175px;
   min-height: 175px;
   max-width: 400px;
-  box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--shadow-strong);
   text-align: center;
 }
 
-#perks-heading {
+#promos-heading, #testimonials-heading {
   font-family: 'Arial', sans-serif;
   font-weight: bold;
   font-size: 1.875rem; /* 30px for title */
-  box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--shadow-strong);
 }
 
 #featured-container {
@@ -79,26 +79,15 @@
 #featured-container h2 {
   font-size: 1.875rem;
   text-align: center;
-  text-shadow: 0.5px 0.5px 1px #014038, /* Bottom-right base shadow */
-  -0.5px -0.5px 1px #014038, /* Top-left base shadow */
-  -0.5px 0.5px 1px #014038, /* Bottom-left base shadow */
-  0.5px -0.5px 1px #014038, /* Top-right base shadow */
-  0.5px 0.5px .5px #bdd4da, /* Bottom-right mid shadow */
-  -0.5px -0.5px .5px #bdd4da, /* Top-left mid shadow */
-  -0.5px 0.5px .5px #bdd4da, /* Bottom-left mid shadow */
-  0.5px -0.5px .5px #bdd4da, /* Top-right mid shadow */
-  0.5px 0.5px .5px #f7f7f7, /* Bottom-right top shadow */
-  -0.5px -0.5px .5px #f7f7f7, /* Top-left top shadow */
-  -0.5px 0.5px .5px #f7f7f7, /* Bottom-left top shadow */
-  0.5px -0.5px .5px #f7f7f7; /* Top-right top shadow */
-  color: #f7f7f7;
-  background-color: #96baa0;
-  border: solid #f7f7f7;
+  text-shadow: var(--text-shadow-layered);
+  color: var(--color-destin-sand);
+  background-color: var(--color-mid-green);
+  border: solid var(--color-destin-sand);
   border-radius: 10px;
   margin-left: 30px;
   width: fit-content;
   padding: 0 20px;
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--shadow-medium);
 }
   
 #featured-container ul {
@@ -109,31 +98,36 @@
   padding: 0;
 }
 
-#featured-images {
-  border: solid #96baa0;
+#featured-list {
+  border: solid var(--color-mid-green);
   border-radius: 10px;
 }
 
 
-#featured-images a {
-  color: #014038;
-  background-color: #f7f7f7;
+#featured-list a {
+  color: var(--color-dark-green);
+  background-color: var(--color-destin-sand);
   border-radius: 10px;
   padding: 5px 10px;
   display: block;
   text-align: center;
   font-size: 1.4rem;
-  color:#014038;
+  color:var(--color-dark-green);
 }
 
-#featured-images img {
+#featured-list {
+  min-width: 710px;
+  background-color: var(--color-destin-sand);
+}
+
+#featured-list img {
   display: block;
   margin: 0 auto;
   margin-bottom: 10px;
-  box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--shadow-strong);
 }
 
-#featured-images {
+#featured-list {
   overflow: hidden; /* Hide anything outside the container */
   /*text-align: center; 
   width: 100%; */
@@ -144,79 +138,96 @@ figcaption {
   font-size: 1.2rem;
 }
 
-#featured-images img {
-  display: none; /* Hide all items initially */
+#featured-list img {
   max-width: 100%; /* Ensure images are responsive */
   height: auto; /* Maintain aspect ratio */
-  background-color: #96baa0;
-  border: solid #014038;
+  background-color: var(--color-mid-green);
+  border: solid var(--color-dark-green);
   border-radius: 5px;
   padding: 5px;
 }
 
-#testimonials-feature{
-  background-color: #96baa0;
-  color: #014038;
-  border: solid #014038;
+h3.product-name {
+  font-size: 1.6rem;
+  margin-bottom: 5px;
+  padding-bottom: 0;
+}
+
+p.short-description {
+  font-size: 1.1rem;
+}
+
+#featured-container a {
+  text-decoration: none;
+}
+
+
+/* --- TESTIMONIALS --- */
+
+#testimonials-container{
+  background-color: var(--color-mid-green);
+  color: var(--color-dark-green);
+  border: solid var(--color-dark-green);
   border-radius: 10px;
   padding: 5px 10px;
   margin-top: 10px;
   white-space: normal;
-  box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--shadow-strong);
 }
 
-#testimonials-feature h2 {
+#testimonials-container h2 {
   font-size: 1.675rem;
   text-align: center;
 }
 
-.testimonial {
-  background-color: #f7f7f7;
-  color: #014038;
-  border: solid #014038;
+.testimonial-item {
+  background-color: var(--color-destin-sand);
+  color: var(--color-dark-green);
+  border: solid var(--color-dark-green);
   border-radius: 5px;
   padding: 5px 10px;
   white-space: normal;
   max-height: 175px;
   max-width: 400px;
   min-height: 175px;
-  box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--shadow-strong);
   text-align: center;
 }
 
-#right-aside {
+
+/* --- CATEGORY NAVIGATION --- */
+#category-nav {
   display: flex;
   flex-direction: column;
   align-items: center;
-  background-color: #f0c06d;
+  background-color: var(--color-soft-gold);
   padding: 5px 10px;
   margin-top: 10px;
-  margin-left: 20px;
-  border: solid #f7f7f7;
+  border: solid var(--color-destin-sand);
   border-radius: 10px;
 }
 
 #category-nav-container {
-  background-color: #f7f7f7;
-  color: #014038;
-  border: solid #014038;
+  background-color: var(--color-destin-sand);
+  color: var(--color-dark-green);
+  border: solid var(--color-dark-green);
   border-radius: 10px;
   padding: 5px 10px;
   margin-top: 5px;
   text-align: center;
   width: 90%;
-  box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--shadow-strong);
 }
 
-#right-aside h2 {
+#category-nav h2 {
   font-size: 1.675rem;
-  background-color: #bdd4da;
-  color: #014038;
-  border: solid #014038;
+  background-color: var(--color-light-teal);
+  color: var(--color-dark-green);
+  border: solid var(--color-dark-green);
   border-radius: 10px;
   padding: 0 5px;
   white-space: nowrap;
-  box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--shadow-strong);
 }
 
 .categories ul {
@@ -228,17 +239,17 @@ figcaption {
 }
 
 .categories ul li {
-  border: solid #014038;
+  border: solid var(--color-dark-green);
   border-radius: 10px;
-  background-color: #96baa0;
+  background-color: var(--color-mid-green);
   margin-top: 20px;
   min-width: 100%;
   transition: background-color 0.3s ease, color 0.3s ease;
-  box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--shadow-strong);
 }
 
 .categories a {
-  color: #014038;
+  color: var(--color-dark-green);
   font-size: 1.3rem;
   font-weight: bold;
   transition: background-color 0.3s ease, color 0.3s ease;
@@ -246,9 +257,9 @@ figcaption {
 }
 
 .categories ul li:hover {
-  background-color: #f7f7f7;
-  color: #014038; 
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
+  background-color: var(--color-destin-sand);
+  color: var(--color-dark-green); 
+  box-shadow: var(--shadow-medium);
 }
 
 .categories ul li a:hover {
diff --git a/src/styles/variables.css b/src/styles/variables.css
index e69de29..df4123b 100644
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@@ -0,0 +1,36 @@
+:root {
+    /* Colors */
+    --color-destin-sand: #f7f7f7;
+    --color-dark-green: #014038;
+    --color-mid-green: #96baa0;
+    --color-pale-green: #cadcd0;
+    --color-light-teal: #bdd4da;
+    --color-soft-golden: #f0c06d;
+
+    /* Box Shadows */
+    --shadow-subtle: 1px 2px 4px rgba(0, 0, 0, 0.3);
+    --shadow-medium: 1px 2px 4px rgba(0, 0, 0, 0.5);
+    --shadow-strong: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
+
+    /* Text Outline */
+    --text-outline-heading:
+    0.5px 0.5px 1px var(--color-dark-green),
+    -0.5px -0.5px 1px var(--color-dark-green),
+    -0.5px 0.5px 1px var(--color-dark-green),
+    0.5px -0.5px 1px var(--color-dark-green);
+
+    /* Layered Text Shadow */
+    --text-shadow-layered:
+    0.5px 0.5px 1px var(--color-dark-green),
+    -0.5px -0.5px 1px var(--color-dark-green),
+    -0.5px 0.5px 1px var(--color-dark-green),
+    0.5px -0.5px 1px var(--color-dark-green),
+    0.5px 0.5px .5px var(--color-light-teal),
+    -0.5px -0.5px .5px var(--color-light-teal),
+    -0.5px 0.5px .5px var(--color-light-teal),
+    0.5px -0.5px .5px var(--color-light-teal),
+    0.5px 0.5px .5px var(--color-destin-sand),
+    -0.5px -0.5px .5px var(--color-destin-sand),
+    -0.5px 0.5px .5px var(--color-destin-sand),
+    0.5px -0.5px .5px var(--color-destin-sand);
+}
\ No newline at end of file