refactor: Adjust HTML/CSS across content pages for a more cohesive UX

src/_data/testimonials.js

@@ -21,7 +21,7 @@ const TESTIMONIALS = [
     {
         "id": "T02",
         "clientName": "Morris F.",
-        "testimonial": "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!",
+        "testimonial": "Thanks to BVN's Workshops and amazing line of products, I won 'Best Azaleas' at the 2024 Royal Horticultural Society's American Cup!",
         "dateObtained": "2024-12-03"
     },
     {

src/_includes/base.njk

@@ -10,6 +10,11 @@
 
         <title>{{title}}</title>
         
+        <link rel="stylesheet" href="/styles/variables.css">
+        <link rel="stylesheet" href="/styles/base.css">
+        <link rel="stylesheet" href="/styles/header.css">
+        <link rel="stylesheet" href="/styles/footer.css">
+        <link rel="stylesheet" href="/styles/modals.css">
         {% if stylesheet %}
             {% for style in stylesheet %}
                 <link rel="stylesheet" href="{{ style }}">
@@ -19,7 +24,6 @@
         {% if hCAPTCHA %}
             <script src="{{ hCAPTCHA }}" async defer></script>
         {% endif %}
-
         {% if fontAwesome %}
             <script src="{{ fontAwesome }}" crossorigin="anonymous"></script>
         {% endif %}
@@ -30,7 +34,7 @@
 
         {% include "header.njk" %}
 
-        <main>
+        <main class="main-content-container">
 
             {{ content | safe }}
 
@@ -40,11 +44,14 @@
 
         {% include "modals.njk" %}
 
+        <script src="/scripts/demo-modal.js"></script>
         {% if pageScripts %}
             {% for script in pageScripts %}
                 <script src="{{ script }}"></script>
             {% endfor %}
         {% endif %}
+        <script src="/scripts/cart.js"></script>
+        <script src="/scripts/newsletter.js">
 
     </body>
 </html>

src/_includes/category-nav.njk

@@ -1,7 +1,8 @@
 <div id="right-side">
     <nav id="category-nav">
         <div id="category-nav-container">
-            <h2>Shop by Category</h2>
+            <h2>Categories</h2>
+            <hr>
             <div class="categories">
                 <ul>
                     <li><a href="/gallery/?category=trees#" class="cat-btn">Trees</a></li>

src/_includes/header.njk

@@ -1,17 +1,20 @@
 <header role="banner">
 	<div class="header-container">	
-        <div class="header-left">
+		<div class="logo-name-cart">
-            <div class="logo">
+			<div class="logo-box">
-                <img
+				<img class="logo" src="/images/Client1_LogoPalette2_F0C06D.png"
-                    src="/images/Client1_LogoPalette2_F0C06D.png"
 							alt="Bloom Valley Nursery Logo">
 			</div>
+			<div class="name-box">
+				<p class="business-name">Bloom Valley Nursery</p>
+			</div>
+			<div class="cart-box">
+				<button id="shopping-cart" aria-label="Shopping Cart">
+					<i class="fa-solid fa-cart-shopping fa-2xl"></i>
+				</button>
+			</div>
 		</div>
 		
-        <div class="header-center">
-            <div class="business-name-container">
-                <p class="business-name">Bloom Valley Nursery</p>
-            </div>
 		<div class="nav-container">
 			<nav role="navigation" aria-label="Main Navigation">
 				<ul>
@@ -31,14 +34,4 @@
 			</nav>
 		</div>
 	</div>
-        
-        <div class="header-right">
-            <button id="menu-toggle" class="menu-toggle" aria-label="Open navigation menu" aria-expanded="false">
-                <i class="fa-solid fa-bars fa-2xl"></i>
-            </button>
-            <button id="shopping-cart" aria-label="Shopping Cart">
-                <i class="fa-solid fa-cart-shopping fa-2xl"></i>
-            </button>
-        </div>
-    </div>
 </header>

src/community.njk

@@ -4,18 +4,11 @@ metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev"
 seoIndexing: false
 title: "Community Events - Bloom Valley Nursery Demo"
 stylesheet: 
-    - "/styles/variables.css"
-    - "/styles/base.css"
-    - "/styles/header.css"
     - "/styles/community.css"
-    - "/styles/footer.css"
-    - "/styles/modals.css"
 fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
 currentPage: "community"
 pageScripts:
     - "/scripts/events-carousel.js"
-    - "/scripts/cart.js"
-    - "/scripts/newsletter.js"
 ---
 <div class="community">
 <h1>Mark Your Calendars!</h1>
@@ -24,6 +17,7 @@ pageScripts:
       
     <div class="upcoming-events">
       <h2>Upcoming Events</h2>
+      <p class="notice">Check out the Upcoming Events at Bloom Valley Nursery and around the community!<br> Our BVN Workshops are for all ages and free of charge. We ask that you use our <a class="com-link" href="../about/#feedback" target="_blank" rel="noopener noreferrer">contact form here</a> to sign up for BVN Workshops in advance. Reservations are not required, though, and we will make space for all who attend.</p>
       <div id="events-navigation">
         <ul class="event-categories">
           <li class="workshops-btn enav"><a href="/community/?category=workshop#" class="cat-btn">Workshops</a></li>
@@ -70,7 +64,7 @@ pageScripts:
   <div class="add-events">
     <p>
       For more details, to add events to this page, or to leave feedback,
-      <a
+      <a class="com-link"
         href="/about/#feedback"
         aria-label="Go to the feedback form on the About Us page to leave feedback or inquiries."
         >click here</a

src/credits.njk

@@ -4,29 +4,35 @@ metaDesc: "Credit & attribution for the contributors of this demo eCommerce webs
 seoIndexing: true
 title: "Credits & Attribution - Bloom Valley Nursery Demo"
 stylesheet: 
-    - "/styles/variables.css"
-    - "/styles/base.css"
-    - "/styles/header.css"
     - "/styles/credits.css"
-    - "/styles/footer.css"
-    - "/styles/modals.css"
 fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
 isLandingPage: false
 pageScripts:
     - "/scripts/tooltips.js"
-    - "/scripts/script.js"
-    - "/scripts/cart.js"
-    - "/scripts/newsletter.js"
 ---
 
 <div class="credits-container">
+    <div class="content">
         <div class="intro">
-        <h1>Credits & Attributions</h1>
+            <h1 class="cred-attr">Credits & Attributions</h1>
-        <p>A heartfelt <strong>Thank You</strong> is extended to these creators and the platforms that host their work. Their royalty-free contributions to the public helped make this demo possible.</p> 
+            <p class="thanks">A heartfelt <strong class="strong-thanks">Thank You</strong> is extended to these creators and the platforms that host their work.<br> Their royalty-free contributions to the public helped make this demo possible.</p> 
             <p id="tip-desc" class="visually-hidden">Preview shows a small version of the linked image.</p>
 
-    <div>
+        <div class="video-box">
-        <ul class="credits-list">
+            <h2 class="videos">Video Content</h2>
+            <ul class="videos-credits-list">
+                <li class="credit" data-tooltip="https://video.pictory.ai/202509100421159152ab7b3c7e5dc46a29dec7057c108b158/20250910051954092q4MZ6z6NHgYUlrP">
+                    <div class="meta">
+                        <p>
+                            <a href="https://video.pictory.ai/202509100421159152ab7b3c7e5dc46a29dec7057c108b158/20250910051954092q4MZ6z6NHgYUlrP">The Story of Bloom Valley</a> was created by <a class="creator" href="https://dlseitz.dev" target="_blank" rel="noopener noreferrer">Derek L. Seitz</a> with <a class="source" href="https://pictory.ai/" target="_blank" rel="noopener noreferrer">Pictory.AI</a> under the <a class="license" href="https://pictory.ai/terms-of-service#:~:text=(c).%20Third%2DParty,new%20Pictoried%20Content." target="_blank" rel="noopener noreferrer">Pictory.AI Terms of Service</a>.
+                        </p>
+                    </div>
+                </li>
+            </ul>
+        </div>
+        <div class="images-box">
+            <h2 class="images">Image Content</h2>
+            <ul class="images-credits-list">
             {% for credit in credits.CREDITS %}
                 <li class="credit" data-tooltip="../images/_m-thumbs/{{ credit.category }}/{{ credit.fileName }}">
                     <div class="thumb">
@@ -48,3 +54,4 @@ pageScripts:
             </ul>
         </div>
     </div>
+</div>

src/gallery.njk

@@ -4,23 +4,16 @@ metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev"
 seoIndexing: false
 title: "Gallery - Bloom Valley Nursery Demo"
 stylesheet: 
-  - "/styles/variables.css"
-  - "/styles/base.css"
-  - "/styles/header.css"
   - "/styles/gallery.css"
   - "/styles/category-nav.css"
-  - "/styles/footer.css"
-  - "/styles/modals.css"
 fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
 currentPage: "gallery"
 pageScripts:
     - "/scripts/gallery-carousel.js"
-    - "/scripts/script.js"
-    - "/scripts/cart.js"
-    - "/scripts/newsletter.js"
 ---
 
 <div id="gallery-top">
+  <div class="left-side">
     <section id="product-carousel-feature" aria-label="Interactive Carousel of Available Products by Category.">
       <h2>Products by Category</h2>
       <div id="product-category-card">
@@ -46,7 +39,8 @@ pageScripts:
         <button id="cart-details">View Shopping Cart</button>
       </div>
     </section>
-
+  </div>
-  {% include "category-nav.njk" %}
+  <div class="right-side">
-
+    {% include "category-nav.njk" %}
+  </div>
 </div>

src/index.njk

@@ -4,19 +4,12 @@ metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev"
 seoIndexing: false
 title: "Landing - Bloom Valley Nursery Demo"
 stylesheet: 
-    - "/styles/variables.css"
-    - "/styles/base.css"
-    - "/styles/header.css"
     - "/styles/index.css"
     - "/styles/category-nav.css"
-    - "/styles/footer.css"
-    - "/styles/modal.css"
 fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
 currentPage: "index"
 pageScripts:
     - "/scripts/script.js"
-    - "/scripts/cart.js"
-    - "/scripts/newsletter.js"
 ---
 
 <!-- Main Content Section -->
@@ -40,7 +33,7 @@ pageScripts:
 			<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>
+					<h3 class="client-name">{{ item.clientName }} said</h3>
 					<p class="client-quote">"{{ item.testimonial }}"</p>
 				</div>
 			{% endfor %}
@@ -58,7 +51,7 @@ pageScripts:
 								<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">
+										<img src="images/_m-thumbs/{{ item.category }}/{{ item.imageFile }}" alt="{{ item.altText }}" width="480" height="320" class="featured-item">
 										<figcaption class="short-description">{{ item.shortDescription }}</figcaption>
 									</figure>
 									<p class="price">${{ item.price }}</p>

src/scripts/demo-modal.js

@@ -0,0 +1,54 @@
+document.addEventListener("DOMContentLoaded", () => {
+    // ================== DEMO NOTICE MODAL ==================
+    if (!sessionStorage.getItem("demoNoticeAcknowledged")) {
+        let modal = document.createElement("div");
+        modal.id = "demoModal";
+        modal.style.position = "fixed";
+        modal.style.left = "0";
+        modal.style.top = "0";
+        modal.style.width = "100%";
+        modal.style.height = "100%";
+        modal.style.background = "rgba(0, 0, 0, 0.7)";
+        modal.style.display = "flex";
+        modal.style.alignItems = "center";
+        modal.style.justifyContent = "center";
+        modal.style.zIndex = "1000";
+
+        let modalContent = document.createElement("div");
+        modalContent.style.background = "white";
+        modalContent.style.padding = "20px";
+        modalContent.style.borderRadius = "10px";
+        modalContent.style.textAlign = "center";
+        modalContent.style.width = "80%";
+        modalContent.style.maxWidth = "400px";
+
+        let heading = document.createElement("h2");
+        heading.innerText = "Demo Notice";
+
+        let message = document.createElement("p");
+        message.innerText =
+            "This site is for demonstration purposes only and is not a real e-commerce store. No purchases can be made.";
+
+        let closeButton = document.createElement("button");
+        closeButton.innerText = "I Understand";
+        closeButton.style.padding = "10px 20px";
+        closeButton.style.marginTop = "15px";
+        closeButton.style.border = "none";
+        closeButton.style.background = "#007bff";
+        closeButton.style.color = "white";
+        closeButton.style.fontSize = "16px";
+        closeButton.style.cursor = "pointer";
+        closeButton.style.borderRadius = "5px";
+
+        closeButton.addEventListener("click", function () {
+            modal.style.display = "none";
+            sessionStorage.setItem("demoNoticeAcknowledged", "true");
+        });
+
+        modalContent.appendChild(heading);
+        modalContent.appendChild(message);
+        modalContent.appendChild(closeButton);
+        modal.appendChild(modalContent);
+        document.body.appendChild(modal);
+    }
+});

src/scripts/gallery-carousel.js

@@ -71,6 +71,20 @@ const updateProductList = (category) => {
   const productList = document.getElementById("product-list");
   if (!productList) return console.error("Element with ID 'product-list' not found.");
 
+  // Remove active class from all buttons
+  document.querySelectorAll(".categories ul li").forEach(li => {
+    li.classList.remove('active');
+  });
+
+  // Add active class to the button for the current category
+  document.querySelectorAll(".cat-btn").forEach(button => {
+    const url = new URL(button.href);
+    const btnCategory = url.searchParams.get('category');
+    if (btnCategory === category) {
+      button.parentElement.classList.add('active');
+    }
+  });
+
   selectedProducts = allProducts.filter(product => product.category === category);
   currentIndex = 0;
 

src/scripts/script.js

@@ -1,58 +1,6 @@
 document.addEventListener("DOMContentLoaded", () => {
-    // ================== DEMO NOTICE MODAL ==================
-    if (!sessionStorage.getItem("demoNoticeAcknowledged")) {
-        let modal = document.createElement("div");
-        modal.id = "demoModal";
-        modal.style.position = "fixed";
-        modal.style.left = "0";
-        modal.style.top = "0";
-        modal.style.width = "100%";
-        modal.style.height = "100%";
-        modal.style.background = "rgba(0, 0, 0, 0.7)";
-        modal.style.display = "flex";
-        modal.style.alignItems = "center";
-        modal.style.justifyContent = "center";
-        modal.style.zIndex = "1000";
 
-        let modalContent = document.createElement("div");
+    // ================== PROMOS CAROUSEL ==================
-        modalContent.style.background = "white";
-        modalContent.style.padding = "20px";
-        modalContent.style.borderRadius = "10px";
-        modalContent.style.textAlign = "center";
-        modalContent.style.width = "80%";
-        modalContent.style.maxWidth = "400px";
-
-        let heading = document.createElement("h2");
-        heading.innerText = "Demo Notice";
-
-        let message = document.createElement("p");
-        message.innerText =
-            "This site is for demonstration purposes only and is not a real e-commerce store. No purchases can be made.";
-
-        let closeButton = document.createElement("button");
-        closeButton.innerText = "I Understand";
-        closeButton.style.padding = "10px 20px";
-        closeButton.style.marginTop = "15px";
-        closeButton.style.border = "none";
-        closeButton.style.background = "#007bff";
-        closeButton.style.color = "white";
-        closeButton.style.fontSize = "16px";
-        closeButton.style.cursor = "pointer";
-        closeButton.style.borderRadius = "5px";
-
-        closeButton.addEventListener("click", function () {
-            modal.style.display = "none";
-            sessionStorage.setItem("demoNoticeAcknowledged", "true");
-        });
-
-        modalContent.appendChild(heading);
-        modalContent.appendChild(message);
-        modalContent.appendChild(closeButton);
-        modal.appendChild(modalContent);
-        document.body.appendChild(modal);
-    }
-
-    // ================== SHOPPER PROMO CAROUSEL ==================
     const promo = document.querySelectorAll(".promo-item");
     let currentIndexPromo = 0;
 
@@ -71,7 +19,7 @@ document.addEventListener("DOMContentLoaded", () => {
     showNextPromo();
     setInterval(showNextPromo, 2250);
 
-    // ================== CUSTOMER HIGHLIGHTS CAROUSEL ==================
+    // ================== TESTIMONIALS CAROUSEL ==================
     const testimonials = document.querySelectorAll(".testimonial-item");
     let currentIndexTestimonials = 0;
 
@@ -91,19 +39,6 @@ document.addEventListener("DOMContentLoaded", () => {
     setInterval(showNextTestimonial, 3500);
 
     // ================== FEATURED ITEMS CAROUSEL ==================
-    /*const featuredItems = document.querySelectorAll("#featured-images .featured-item");
-    let currentIndex = 0;
-
-    function showNextItem() {
-        featuredItems[currentIndex].classList.remove("active");
-        currentIndex = (currentIndex + 1) % featuredItems.length;
-        featuredItems[currentIndex].classList.add("active");
-    }
-
-    featuredItems[currentIndex].classList.add("active");
-    setInterval(showNextItem, 3000);*/
-
-    // ================== UPDATED FEATURED ITEMS CAROUSEL ==================
     const featuredItems = document.querySelectorAll(".featured-card");
     let currentIndexFeatured = 0;
 

src/styles/about.css

@@ -72,8 +72,10 @@ h2#bvn-story {
   justify-content: center;
   align-items: center;
   background-color: var(--color-destin-sand);
-  border: solid 2px var(--color-mid-green);
+  border: solid 3px var(--color-mid-green);
   border-radius: 15px;
+    box-shadow: var(--shadow-medium);
+
 
 }
 
@@ -86,14 +88,6 @@ h2#bvn-story {
   padding: 0 50px;
 }
 
-#bottom {
-  display: flex;
-  flex-direction: row;
-  gap: 20px;
-  width: 100%
-
-}
-
 #bottom {
   display: flex;
   flex-direction: row;
@@ -107,7 +101,6 @@ h2#bvn-story {
   padding: 20px;
   margin: 30px auto;
   box-shadow: var(--shadow-medium);
-
 }
 
 #business-info {
@@ -155,7 +148,10 @@ strong {
 }
 
 #feedback h2 {
-  margin: auto;
+  margin-top: 5px;
+  margin-bottom: 20px;
+  margin-left: auto;
+  margin-right: auto;
   text-align: center;
   background-color: var(--color-mid-green);
   border: solid 2px var(--color-destin-sand);

src/styles/base.css

@@ -1,4 +1,13 @@
 /* Global Styles */
+/* Override Font Awesome font-face globally to prevent CLS */
+@font-face {
+  font-family: "Font Awesome 6 Brands";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://ka-f.fontawesome.com/releases/v7.0.1/webfonts/free-fa-brands-400.woff2") format("woff2");
+}
+
 html {
   font-size: 17px; /* Base font size for scaling */
   scroll-behavior: smooth; 
@@ -9,7 +18,7 @@ body {
   flex-direction: column;
   align-items: center;
   font-family: 'Calibri', sans-serif;
-  font-size: 1rem; /* Default font size based on 16px */
+  font-size: 1rem; /* Default font size based on 17px */
   line-height: 1.5;
   margin: 0;
   padding: 0;
@@ -17,56 +26,53 @@ body {
 }
 
 body h1 {
-  text-shadow: 0.5px 0.5px .5px var(--color-destin-sand), /* Bottom-right top shadow */
+  text-shadow: var(--text-outline-light);
-  -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) */
+/* Title Large (Arial Bold ~32px) */
 h1 {
   font-family: 'Arial', sans-serif;
   font-weight: bold;
-  font-size: 1.875rem; /* 30px for title */
+  font-size: 1.875rem;
 }
 
-/* Title (Arial Bold 25px) */
+/* Title (Arial Bold ~27px) */
 h2 {
   font-family: 'Arial', sans-serif;
   font-weight: bold;
   font-size: 1.5625rem;
 }
 
-/* Subtitle (Comfortaa Normal 15px) */
+/* Subtitle (Comfortaa Normal ~16px) */
 h3 {
   font-family: 'Comfortaa', sans-serif;
-  font-size: .9375rem ; /* 15px for subtitle */
+  font-size: .9375rem ;
 }
 
-/* Body Large (Calibri Normal 20px) */
+/* Body Large (Calibri Normal ~21px) */
 p.body-large {
   font-family: 'Calibri', sans-serif;
-  font-size: 1.25rem; /* 20px for body large */
+  font-size: 1.25rem;
 }
 
-/* Body Strong (Calibri Bold 16px) */
+/* Body Strong (Calibri Bold 17px) */
 strong {
   font-family: 'Calibri', sans-serif;
   font-weight: bold;
-  font-size: 1rem; /* 16px for body strong */
+  font-size: 1rem;
 }
 
-/* Body (Calibri Normal 16px) */
+/* Body (Calibri Normal 17px) */
 p.body {
   font-family: 'Calibri', sans-serif;
-  font-size: 1rem; /* 16px for regular body text */
+  font-size: 1rem;
 }
 
-/* Captions (Arial Bold 11px) */
+/* Captions (Arial Bold ~12px) */
 figcaption {
   font-family: 'Arial', sans-serif;
   font-weight: bold;
-  font-size: .6875rem; /* 11px for captions */
+  font-size: .6875rem;
 }
 
 @media (max-width: 780px) {
@@ -75,10 +81,11 @@ figcaption {
   }
 }
 
-main {
+.main-content-container {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: flex-start;
   justify-content: space-between;
+  max-width: 1440px;
   padding: 20px;
 }

src/styles/category-nav.css

@@ -13,7 +13,7 @@
     padding: 5px 10px;
     margin-top: 10px;
     box-shadow: var(--shadow-strong);
-    max-width: 325px;
+    max-width: 225px;
     border: solid var(--color-destin-sand);
     border-radius: 10px;
 }
@@ -79,3 +79,9 @@
     box-shadow: none;
     color: inherit;
 }
+
+.categories ul li.active {
+    background-color: var(--color-destin-sand);
+    color: var(--color-dark-green);
+    box-shadow: var(--shadow-medium);
+}

src/styles/community.css

@@ -15,17 +15,47 @@ h1 {
   border: solid var(--color-mid-green);
   border-radius: 15px;
   color: var(--color-dark-green);
-  text-decoration: underline;
   text-shadow: var(--text-outline-heading);
   padding: 5px 100px;
   box-shadow: var(--shadow-subtle); 
 }
 
+.notice, .com-link {
+  font-size: 1.3rem;
+  color: var(--color-dark-green);
+}
+
+.com-link {
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.com-link:hover {
+  color: var(--color-soft-golden);
+}
+
 #calendar-events-container {
+  display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 20px;
+  text-align: center;
+  justify-content: center;
   border: none;
+  background-color: var(--color-soft-golden);
+  border: solid 3px var(--color-destin-sand);
+  border-radius: 15px;
+  padding: 10px;
+    box-shadow: var(--shadow-medium);
+}
+
+.events {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding-left: 0;
+  padding-right: 0;
+  padding-bottom: 10px;
 }
 
 .upcoming-events {
@@ -196,7 +226,7 @@ li.enav {
   border: solid var(--color-destin-sand);
   border-radius: 10px;
   margin-top: 20px;
-  margin-botom: 0;
+  margin-bottom: 0;
   margin-left: auto;
   margin-right: auto;
   width: fit-content;
@@ -210,7 +240,7 @@ li.enav {
   align-items: center;
   text-align: center;
   background-color: var(--color-pale-green);
-  border: solid var(--color-dark-green);
+  border: solid var(--color-destin-sand);
   border-radius: 15px;
   padding: 0px 20px 10px 20px;
   width: 95%;
@@ -228,6 +258,8 @@ li.enav {
   border: solid 0.5px var(--color-dark-green);
   border-radius: 10px;
   padding: 2px 20px;
+  box-shadow: var(--shadow-subtle);
+
 }
 
 .event-card h3.workshop {

src/styles/credits.css

@@ -1,6 +1,80 @@
 /* CSS Style Rules for "Credits & Attributions" */
 .credits-container {
     display: flex;
+    font-size: 1.2rem;
+    background-color: var(--color-soft-golden);
+    border: solid 3px var(--color-destin-sand);
+    border-radius: 15px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 30px;
+    padding: 10px;
+    width: auto;
+}
+
+.credits-container a {
+    text-decoration: none;
+    color: var(--color-dark-green);
+    font-weight: 600;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+
+    background-color: var(--color-pale-green);
+    border: solid 3px var(--color-destin-sand);
+    border-radius: 15px;
+    margin: 20px;
+    padding: 20px;
+    gap: 20px;
+
+}
+
+.cred-attr {
+    font-size: 2.25rem;
+    background-color: var(--color-mid-green);
+    color: var(--color-destin-sand);
+    border: solid var(--color-destin-sand);
+    border-radius: 15px;
+    padding: 0 100px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    width: fit-content;
+    text-align: center;
+    text-shadow: var(--text-outline-heading);
+    box-shadow: var(--shadow-medium);
+    align-self: center;
+}
+
+.video-box, .images-box {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--color-destin-sand);
+    border: solid 3px var(--color-mid-green);
+    border-radius: 15px;
+}
+
+.video-box {
+    margin-bottom: 30px;
+}
+
+.videos, .images {
+    font-size: 1.85rem;
+    background-color: var(--color-light-teal);
+    color: var(--color-dark-green);
+    border: solid var(--color-destin-sand);
+    border-radius: 15px;
+    padding: 0 50px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    width: fit-content;
+    text-align: center;
+    text-shadow: var(--text-outline-light);
+    box-shadow: var(--shadow-medium);
+    align-self: center;
 }
 
 .intro {
@@ -10,13 +84,22 @@
     text-align: center;
 }
 
+.thanks {
+    font-size: 1.3rem;
+}
+
+.strong-thanks {
+    font-size: 1.5rem;
+}
+
 #tip-desc {
     display: none;
 }
 
-.credits-list {
+.videos-credits-list,
+.images-credits-list {
     list-style: none;
-    margin: 0;
+    margin: 0 30px;
     padding: 0;
 }
 
@@ -25,6 +108,7 @@
     align-items: flex-start;
     gap: 0.5rem;             /* spacing between thumb and text */
     margin-bottom: 1rem;
+    margin: auto;
 }
 
 .thumb {
@@ -65,3 +149,4 @@
     box-shadow: 0 4px 8px rgba(0,0,0,0.15);
     z-index: 9999;
 }
+

src/styles/footer.css

@@ -5,6 +5,7 @@
 }
 #footer-nav {
     padding: 0;
+    margin-top: 10px;
 }
 
 nav ul, #footer-nav ul {
@@ -19,7 +20,6 @@ nav ul, #footer-nav ul {
     position: relative;
     list-style-type: none;
     flex-direction: row;
-    margin-top: 20px;
     background-color: var(--color-destin-sand);
     border-radius: 5px;
     width: fit-content; 
@@ -145,4 +145,17 @@ footer div label {
 #copyright {
     text-align: center;
     margin-bottom: 20px;
+    font-size: 1.1rem;
+    color: var(--color-dark-green);
+}
+
+#copyright a {
+    color: var(--color-dark-green);
+    font-weight: 600;
+    font-size: 1.1rem;
+    text-decoration: one;
+}
+
+#copyright a:hover {
+    color: var(--color-destin-white);
 }

src/styles/gallery.css

@@ -8,15 +8,23 @@
 #gallery-top {
   display: flex;
   flex-direction: row;
+  align-items: top;
+  gap: 10px;
+  margin-bottom: 50px;
+}
+
+.left-side {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   align-items: center;
-  width: 95vw;
-  gap: 20px;
 }
 
 #product-carousel-feature {
-  align-items: center;
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 #product-carousel-feature h2 {
@@ -29,7 +37,6 @@
   border: solid var(--color-destin-sand);
   border-radius: 10px;
   padding-left: 20px;
-  transform: translateX(30px);
   box-shadow: var(--shadow-medium);
 }
 
@@ -38,27 +45,26 @@
   flex-direction: row;
   align-items: center;
   text-align: center;
-  width: 65vw;
+  width: 60vw;
 }
 
 #product-carousel {
   display: flex;
   flex-direction: row; /* Flexbox layout for horizontal row */
-  gap: 20px; /* Space between product cards */
+  gap: 10px; /* Space between product cards */
   overflow-x: hidden; /* Changed from 'auto' to 'hidden' */
   scroll-behavior: smooth; /* Smooth scrolling for buttons */
   padding: 10px; /* Optional padding inside the carousel */
   white-space: nowrap; /* Prevent wrapping to a new row */
-  transform: translateX(4vw);
+  min-height: 550px;
-  min-height: 600px;
   align-items: center;
 }
 
 .product-card {
   display: flex;
   flex-direction: column;
-  width: 300px;
+  width: 250px;
-  min-width: 300px;
+  min-width: 250px;
   max-height: 350px;
   flex: 0 0 auto; /* Prevent resizing of cards */
   border: 1px solid var(--color-dark-green);
@@ -67,6 +73,7 @@
   margin-left: 20px;
   align-items: center;
   text-align: center;
+  white-space: normal;
   background-color: var(--color-destin-sand);
   box-shadow: var(--shadow-subtle);
   transition: all 0.5s ease-in-out; /* Added for smooth transitions */
@@ -93,10 +100,9 @@
   align-items: center;
 }
 
-/* New style for the centered card */
 .product-card.is-centered {
   width: 340px;
-  transform: scale(1.4);
+  transform: scale(1.2);
   box-shadow: var(--shadow-strong);
   background-color: var(--color-destin-sand);
   white-space: normal;
@@ -105,12 +111,11 @@
 #scroll-left, #scroll-right {
   cursor: pointer;
   background-color: var(--color-dark-green);
-  color: white;
+  color: var(--color-destin-sand);
   border: none;
   padding: 10px;
   border-radius: 50%;
   font-size: 1.5rem;
-  transform: translateX(4.5vw);
 }
 
 @media (max-width: 768px) {
@@ -163,4 +168,8 @@
   color: var(--color-destin-sand); 
   box-shadow: var(--shadow-medium);
 }
-/* |--↑-↑-↑ End gallery.html ↑-↑-↑--| */
+
+.right-side {
+  margin-left: 48px;
+  margin-top: 52px;
+}

src/styles/header.css

@@ -1,79 +1,70 @@
 /* |--↓-↓-↓ Start Header ↓-↓-↓--| */
 header {
-  padding: 20px;
+  padding-top: 20px;
   background-color: var(--color-light-teal);
-  border-bottom: 3px solid var(--color-mid-green);
   width: 100%;
 }
 
 .header-container {
   display: flex;
+  flex-direction: column;
   justify-content: space-between;
-  align-items: flex-start;
+  align-items: center;
-  max-width: 1400px;
+  max-width: 1440px;
   margin: 0 auto;
   position: relative;
   width: 100%;
-  gap: 20px; /* Adds space between columns */
+  gap: 20px;
 }
 
-/* Left column - Logo */
+.logo-name-cart {
-.header-left {
-  flex: 0 0 150px; /* Fixed width for logo */
-  position: relative;
-  z-index: 1;
-}
-
-/* Center column - Business name and navigation */
-.header-center {
-  flex: 1;
-  min-width: 0; /* Prevents flex item from overflowing */
-  max-width: 800px;
-  margin: 0;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  justify-content: center;
   align-items: center;
+  gap: 30px;
 }
 
-/* Right column - Shopping cart */
+.logo-box {
-.header-right {
-  flex: 0 0 150px; /* Fixed width for shopping cart */
   display: flex;
-  justify-content: flex-end;
+  justify-content: flex-start;
-  position: relative;
-  z-index: 1;
 }
 
-/* Logo styles */
+img.logo {
-header .logo {
-  width: 100%;
-  max-width: 180px;
-  height: auto;
-}
-
-header .logo img {
   display: block;
-  width: 100%;
+  width: 180px;
-  height: auto;
+  height: 180px;
-  margin-left: 50px;
   filter: drop-shadow(0 0 2px var(--color-soft-golden)) drop-shadow(0 0 0px var(--color-dark-green));
 }
 
-/* Business name and navigation container */
+.name-box {
-.business-name-container {
+  display: flex;
-  width: 100%;
+  align-items: center;
+  justify-content: center;
+  max-width: 700px;
+}
+
+.business-name {
+  font-family: 'Georgia', serif;
+  display: block;
+  font-size: 4rem;
+  color: var(--color-dark-green);
+  margin: 10px 0;
   text-align: center;
-  margin-bottom: 15px;
+  text-shadow: var(--text-outline-business);
 }
 
-.nav-container {
+.cart-box {
-  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  z-index: 1;
+  align-self: flex-end;
 }
 
-/* Shopping cart button */
 #shopping-cart {
-  position: static;
+  position: block;
   padding: 15px;
+  margin-left: 75px;
   border-radius: 10px;
   background-color: var(--color-destin-sand);
   color: var(--color-dark-green);
@@ -82,149 +73,8 @@ header .logo img {
   transition: all 0.3s ease;
   box-shadow: var(--shadow-strong);
   border: none;
-  display: flex;
+  width: 60px;
-  justify-content: center;
+  height: 55px;
-  align-items: center;
-}
-
-.business-name {
-  font-family: 'Georgia', serif;
-  display: block;
-  font-size: 3.6rem;
-  color: var(--color-dark-green); /* Dark green for the title */
-  margin: 10px 0;
-  text-align: center;
-  text-shadow: var(--text-outline-business);
-}
-
-header p.tagline {
-  font-family: 'Arial', sans-serif;
-  font-size: 1.4rem;
-  color: var(--color-mid-green); /* Pale green for the tagline */
-  margin: 0;
-  text-align: center;
-}
-
-.menu-toggle {
-  display: none;
-}
-
-@media (max-width: 780px) {
-  /* --- Main Header Container --- */
-  header {
-    flex-direction: column;
-    padding: 10px;
-  }
-
-  .header-main {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-  }
-
-  .logo-and-title {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-  }
-
-  /* --- Logo --- */
-  header .logo {
-    position: static;
-    width: 100px; /* Smaller logo for compact header */
-  }
-
-  header .logo img {
-    width: 100%;
-  }
-
-  /* --- Business Name --- */
-  .business-name {
-    font-size: 1.8rem; /* Smaller name for mobile */
-    margin: 0;
-  }
-
-  /* --- Header Icons --- */
-  .header-icons {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-  }
-
-  #shopping-cart {
-    position: static;
-    padding: 0;
-    background: none;
-    box-shadow: none;
-    font-size: 1.5rem;
-  }
-
-  .menu-toggle {
-    display: block;
-    background: none;
-    border: none;
-    color: var(--color-dark-green);
-    cursor: pointer;
-  }
-  
-  /* --- Compact Navigation Menu --- */
-  nav {
-    display: none;
-    width: 100%;
-    margin-top: 10px;
-    background-color: var(--color-destin-sand);
-    border-radius: 5px;
-    box-shadow: var(--shadow-subtle);
-  }
-
-  nav.is-open {
-    display: block;
-  }
-
-  nav ul {
-    flex-direction: column;
-    padding: 5px 0; /* Reduced vertical padding */
-  }
-
-  nav ul li a {
-    padding: 10px 0; /* Reduced padding for each link */
-    font-size: 1rem;  /* Smaller font size for links */
-    text-align: center;
-    border: none;
-  }
-
-  nav ul li a.current-page {
-    background: none;
-    text-decoration: underline;
-  }
-}
-
-nav {
-  margin-top: 20px;
-  background-color: var(--color-destin-sand);
-  padding: 10px 20px;
-  border-radius: 5px;
-  width: 100%;
-  box-shadow: var(--shadow-subtle);
-}
-
-#shopping-cart {
-  position: absolute;
-  top: 100px;
-  right: 100px;
-  padding: 20px;
-  border-radius: 10px;
-  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: var(--shadow-strong);
-  border: none;
-  display: flex;
-  justify-content: center;
-  align-items: center;
 }
 
 #shopping-cart:hover {
@@ -234,16 +84,38 @@ nav {
   box-shadow: var(--shadow-medium);
 }
 
+
+.nav-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-bottom: 20px;
+    border-bottom: solid var(--color-dark-green);
+
+}
+
+nav {
+  display: flex;
+  flex-direction: row;
+  background-color: var(--color-destin-sand);
+  padding: 2px 50px;
+  border-radius: 5px;
+  width: 100%;
+  box-shadow: var(--shadow-subtle);
+}
+
 nav ul {
   display: flex;
+  flex-direction: row;
   justify-content: center;
   list-style: none;
   padding: 0;
   margin: 0;
-}
-
-nav ul {
   gap: 40px;
+  
 }
 
 nav ul li {
@@ -264,7 +136,7 @@ nav ul li {
 }
 
 .community-link {
-  font-size: 0.9em;
+  font-size: 1.2rem;
 }
 
 nav ul li a {

src/styles/index.css

@@ -2,8 +2,8 @@
 .main-content-container {
   display: flex;
   flex-direction: row;
-  align-items: center;
+  align-items: flex-start;
-  gap: 50px;
+  gap: 35px;
 }
 
 .promo-item,
@@ -15,14 +15,21 @@
 .promo-item.visible,
 .testimonial-item.visible,
 .featured-item.active {
-  display: block; /* Show visible or active items */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center; /* Show visible or active items */
+}
+
+.testimonial-item:active {
+  
 }
 
 #left-side,
 #category-nav {
   flex: 1;
   box-shadow: var(--shadow-strong);
-  max-width: 325px;
+  max-width: 300px;
 }
 
 #left-side {
@@ -60,8 +67,8 @@
   border-radius: 10px;
   padding: 5px 10px;
   white-space: normal;
-  max-height: 200px;
+  max-height: 250px;
-  min-height: 200px;
+  min-height: 250px;
   max-width: 350px;
   box-shadow: var(--shadow-strong);
   text-align: center;
@@ -93,19 +100,23 @@
 }
 
 .testimonial-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   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: 200px;
+  max-height: 275px;
   max-width: 350px;
-  min-height: 200px;
+  min-height: 275px;
   box-shadow: var(--shadow-strong);
   text-align: center;
 }
 
+
 /* FEATURED ITEMS */
 #featured-container {
   display: flex;
@@ -125,7 +136,7 @@
   color: var(--color-destin-sand);
   background-color: var(--color-mid-green);
   border: solid var(--color-destin-sand);
-  border-radius: 10px;
+  border-radius: 15px;
   width: fit-content;
   padding: 0 50px;
   margin: 0px;
@@ -170,6 +181,8 @@
   margin: 0 auto;
   margin-bottom: 10px;
   box-shadow: var(--shadow-strong);
+  width: 480px;
+  height: 320px;
 }
 
 #featured-list {

src/styles/variables.css

@@ -25,6 +25,12 @@
     -0.5px 0.5px 1px var(--color-destin-sand),
     0.5px -0.5px 1px var(--color-destin-sand);
 
+    --text-outline-light:
+    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);
+
     /* Layered Text Shadow */
     --text-shadow-layered:
     0.5px 0.5px 1px var(--color-dark-green),