From 93854147c498930fdf0747dbb56b31fc9afbfea2 Mon Sep 17 00:00:00 2001
From: sotrali <vesspa0330@gmail.com>
Date: Wed, 15 Oct 2025 22:57:55 -0400
Subject: [PATCH] services style setup

---
 css/dropdown.css |  11 ++-
 css/style.css    |  11 +--
 index.html       |  18 ++---
 reviews.html     |  10 +--
 services.html    | 203 +++++++++++++++++++++++++++++++++++++++++++----
 5 files changed, 213 insertions(+), 40 deletions(-)

diff --git a/css/dropdown.css b/css/dropdown.css
index 859e65c..870a541 100644
--- a/css/dropdown.css
+++ b/css/dropdown.css
@@ -10,7 +10,7 @@
 
   padding: 10px;
 
-  border: 1px solid var(--dark-gold);
+  border: 1px solid var(--gold);
 
   cursor: pointer;
   transition: 0.5s;
@@ -20,10 +20,15 @@
   border: 1px solid white;
 }
 
+.dropdown-header:hover span {
+  transform: rotate(65deg); /** arrow hover effect */
+}
+
 .dropdown-arrow {
   color: var(--gold);
   transform: rotate(90deg);
   transition: transform 0.3s ease;
+  font-size: 2rem;
 }
 
 .dropdown-arrow.open {
@@ -33,7 +38,8 @@
 .dropdown-content {
   overflow: hidden;
   max-height: 0;
-
+  border-left: solid 1px var(--dark-gold);
+  border-right: solid 1px var(--dark-gold);
   transition: max-height 0.3s ease;
 }
 
@@ -43,4 +49,5 @@
 
 .dropdown-body {
   padding: 10px;
+  color: white;
 }
diff --git a/css/style.css b/css/style.css
index 3c68cca..d222ca8 100644
--- a/css/style.css
+++ b/css/style.css
@@ -9,8 +9,8 @@
 /** COLOR VARIABLES */
 :root {
   --black: #111111;
-  --gold: #ffd700;
-  --dark-gold: #d1b410;
+  --gold: rgb(223, 200, 65);
+  --dark-gold: rgb(158, 141, 44);
   --light-gold: rgba(255, 215, 0, 0.5);
 }
 
@@ -93,19 +93,16 @@ a {
 h1 {
   font-size: 2.5rem;
   color: #fff;
-  text-align: center;
 }
 
 h2 {
   font-size: 2rem;
-  color: var(--gold);
-  margin-bottom: 1rem;
-  border-bottom: 2px solid var(--gold);
+  color: #fff;
 }
 
 h3 {
   font-size: 1.5rem;
-  color: var(--black);
+  color: #fff;
 }
 
 p {
diff --git a/index.html b/index.html
index a7e6989..b02e7d5 100644
--- a/index.html
+++ b/index.html
@@ -5,9 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta
       name="description"
-      content="Maine Luxury Detailing provides mobile professional car cleaning services in the Portland Area"
+      content="Luxury Detailing Maine provides mobile professional car cleaning services in the Portland Area"
     />
-    <title>Maine Luxury Detailing</title>
+    <title>Luxury Detailing Maine</title>
     <link href="css/style.css" rel="stylesheet" />
     <link href="css/dropdown.css" rel="stylesheet" />
     <link href="css/hamburger.css" rel="stylesheet" />
@@ -106,7 +106,7 @@
 
     <header>
       <div class="banner" role="banner">
-        <a href="#" class="logo" aria-label="Company Logo">LMD</a>
+        <a href="#" class="logo" aria-label="Company Logo">LD</a>
 
         <button
           id="hamburger"
@@ -122,7 +122,7 @@
           <a class="navLink" role="navigation" href="services.html">Services</a>
           <a class="navLink" role="navigation" href="ceramic_coating.html">Ceramic Coating</a>
           <a class="navLink" role="navigation" href="reviews.html">Reviews</a>
-          <a class="navLink" role="navigation" href="contact.html">Contact</a>
+          <a class="navLink" role="navigation" href="contact.html">About</a>
         </nav>
       </div>
     </header>
@@ -148,7 +148,7 @@
 
         <div class="dropdown">
           <div class="dropdown-header" onclick="toggleDropdown(this)">
-            <span>Question 1</span>
+            <h2>Question 1</h2>
             <span class="dropdown-arrow">▼</span>
           </div>
           <div class="dropdown-content">
@@ -160,7 +160,7 @@
 
         <div class="dropdown">
           <div class="dropdown-header" onclick="toggleDropdown(this)">
-            <span>Question 2</span>
+            <h2>Question 2</h2>
             <span class="dropdown-arrow">▼</span>
           </div>
           <div class="dropdown-content">
@@ -172,7 +172,7 @@
 
         <div class="dropdown">
           <div class="dropdown-header" onclick="toggleDropdown(this)">
-            <span>Question 3</span>
+            <h2>Question 3</h2>
             <span class="dropdown-arrow">▼</span>
           </div>
           <div class="dropdown-content">
@@ -184,7 +184,7 @@
 
         <div class="dropdown">
           <div class="dropdown-header" onclick="toggleDropdown(this)">
-            <span>Question 4</span>
+            <h2>Question 4</h2>
             <span class="dropdown-arrow">▼</span>
           </div>
           <div class="dropdown-content">
@@ -198,7 +198,7 @@
 
     <footer>
       <div id="footer-left">
-        &copy;Maine Luxury Detailing 2025<br />
+        &copy;Luxury Detailing Maine 2025<br />
         All rights reserved<br />
         Portland, ME
       </div>
diff --git a/reviews.html b/reviews.html
index 66557e8..23168be 100644
--- a/reviews.html
+++ b/reviews.html
@@ -5,9 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta
       name="description"
-      content="Maine Luxury Detailing provides mobile professional car cleaning services in the Portland Area"
+      content="Luxury Detailing Maine provides mobile professional car cleaning services in the Portland Area"
     />
-    <title>Maine Luxury Detailing</title>
+    <title>Luxury Detailing Maine</title>
     <link href="css/style.css" rel="stylesheet" />
     <link href="css/hamburger.css" rel="stylesheet" />
     <style>
@@ -168,7 +168,7 @@
 
     <header>
       <div class="banner" role="banner">
-        <a href="index.html" class="logo" aria-label="Company Logo">LMD</a>
+        <a href="index.html" class="logo" aria-label="Company Logo">LD</a>
 
         <button
           id="hamburger"
@@ -184,7 +184,7 @@
           <a class="navLink" role="navigation" href="services.html">Services</a>
           <a class="navLink" role="navigation" href="ceramic_coating.html">Ceramic Coating</a>
           <a class="navLink" role="navigation" href="reviews.html">Reviews</a>
-          <a class="navLink" role="navigation" href="contact.html">Contact</a>
+          <a class="navLink" role="navigation" href="contact.html">About</a>
         </nav>
       </div>
     </header>
@@ -261,7 +261,7 @@
 
     <footer>
       <div id="footer-left">
-        &copy;Maine Luxury Detailing 2025<br />
+        &copy;Luxury Detailing Maine 2025<br />
         All rights reserved<br />
         Portland, ME
       </div>
diff --git a/services.html b/services.html
index 898157c..b351418 100644
--- a/services.html
+++ b/services.html
@@ -5,17 +5,21 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta
       name="description"
-      content="Maine Luxury Detailing provides mobile professional car cleaning services in the Portland Area"
+      content="Luxury Detailing Maine provides mobile professional car cleaning services in the Portland Area"
     />
-    <title>Maine Luxury Detailing</title>
+    <title>Luxury Detailing Maine</title>
     <link href="css/style.css" rel="stylesheet" />
     <link href="css/dropdown.css" rel="stylesheet" />
     <link href="css/hamburger.css" rel="stylesheet" />
     
     <style>
+
+      section {
+        gap: 2rem;
+      }
+
       #book-button {
         background-color: var(--black);
-        min-width: 100%;
         color: var(--gold);
 
         border: 1px solid var(--dark-gold);
@@ -43,6 +47,70 @@
         margin-top: 5rem;
       } 
 
+      /** Dropdown Menu Style Overrides */
+
+      .dropdown {
+        width: 100%;
+        border: 1px solid var(--gold);
+        transition: 1s;
+      }
+      .dropdown:hover {
+        border: 1px solid white;
+      }
+
+      .dropdown-header {
+        align-items: center;
+        justify-content: flex-start;
+        gap: 1rem;
+        text-align: left;
+
+        padding: 1.5rem 4rem 2rem 4rem;
+        border: none;
+
+        transition: 1s;
+      }
+      .dropdown-header:hover {
+        border: none;
+      }
+      
+      .dropdown-arrow {
+        transform: rotate(-90deg);
+      }
+      .dropdown-arrow.open {
+        transform: rotate(0deg);
+      }
+
+      .dropdown-header:hover span {
+        transform: rotate(-65deg); /** arrow hover effect */
+      }
+
+      .dropdown-header div {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      .dropdown-content {
+        text-align: left;
+      }
+      .dropdown-content.open {
+        max-height: 700px;
+      }
+
+      .dropdown-body {
+        margin: 1rem 1rem 1.5rem 6rem;
+      }
+
+      /** mobile rules */
+      /** MOBILE */
+      @media screen and (max-width: 850px) {
+        .dropdown-header {
+          padding: 1.5rem 1rem 2rem 1rem;
+        }
+        .dropdown-body {
+          margin: 1rem 1rem 1.5rem 3rem;
+        }
+      }
 
     </style>
   </head>
@@ -52,7 +120,7 @@
 
     <header>
       <div class="banner" role="banner">
-        <a href="index.html" class="logo" aria-label="Company Logo">LMD</a>
+        <a href="index.html" class="logo" aria-label="Company Logo">LD</a>
 
         <button
           id="hamburger"
@@ -68,20 +136,111 @@
           <a class="navLink" role="navigation" href="services.html">Services</a>
           <a class="navLink" role="navigation" href="ceramic_coating.html">Ceramic Coating</a>
           <a class="navLink" role="navigation" href="reviews.html">Reviews</a>
-          <a class="navLink" role="navigation" href="contact.html">Contact</a>
+          <a class="navLink" role="navigation" href="contact.html">About</a>
         </nav>
       </div>
     </header>
 
     <main id="main-content">
-      <section id="interior">
-        <h1>Interior Detailing</h1>
-        <p>Clean car with vaccuum, wipes, brushes, and more.</p>
-        <a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/iy5yKtAhm0O0w0P05acA">
-          <button id="book-button">Book Interior Detailing</button>
+
+      <section id="packages">
+        <h1>Service Packages</h1>
+
+        <div class="dropdown">
+          <div class="dropdown-header" onclick="toggleDropdown(this)">
+            <span class="dropdown-arrow">▼</span>
+            <div>
+              <h2>Level One</h2>
+              <p>Give your car the time, love, and care it deserves.</p>
+            </div>
+          </div>
+          <div class="dropdown-content">
+            <hr>
+            <div class="dropdown-body">
+              <h3>Interior:</h3>
+              <ul>
+                <li>Vacuum & light carpet shampooing</li>
+                <li>Plastics, leather, and vinyls cleaning</li>
+                <li>Light seat shampooing</li>
+                <li>Interior & exterior window cleaning</li>
+                <li>Crack & crevice cleaning</li>
+              </ul>
+              <br /><br />
+              <h3>Exterior:</h3>
+              <ul>
+                <li>Hand wash & dry</li>
+                <li>Bug gut removal</li>
+                <li>Tire, wheel, and wheel well cleaning + tire shine</li>
+                <li>Window cleaning</li>
+                <li>Light door jam cleaning</li>
+              </ul>
+              <br />
+              <a target="_blank" class="book-link" 
+                href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/XGQVAkJx15acdsEemvEr?productServiceId=sIUtLBqGS4mjAQNwHtI4&sku=rH37oV6muKqDXStXhH3k"
+              >
+                <button id="book-button">Book Level One Package Now</button>
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <div class="dropdown">
+          <div class="dropdown-header" onclick="toggleDropdown(this)">
+            <span class="dropdown-arrow">▼</span>
+            <div>
+              <h2>Level Two</h2>
+              <p>Tell the world you're proud of your car.</p>
+            </div>
+          </div>
+          <div class="dropdown-content">
+            <hr>
+            <div class="dropdown-body">
+              <h3>Interior:</h3>
+              <ul>
+                <li>Vacuum & light carpet shampooing</li>
+                <li>Plastics, leather, and vinyls cleaning</li>
+                <li>Light seat shampooing</li>
+                <li>Interior & exterior window cleaning</li>
+                <li>Crack & crevice cleaning</li>
+              </ul>
+              <br /><br />
+              <h3>Exterior:</h3>
+              <ul>
+                <li>Hand wash & dry</li>
+                <li>Bug gut removal</li>
+                <li>Tire, wheel, and wheel well cleaning + tire shine</li>
+                <li><em>Clay service to remove embedded contamination</em></li>
+                <li><em>3 to 6 month ceramic paint sealant: gloss, protection, hydrophobic & self-cleaning properties</em></li>
+              </ul>
+
+              <a target="_blank" class="book-link" 
+                href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/XGQVAkJx15acdsEemvEr?productServiceId=ZUyqKhnZtS3uAT9Auo2I&sku=EsEnqIEVcVedKRDITk7e"
+              >
+                <button id="book-button">Book Level Two Package Now</button>
+              </a>
+            </div>
+          </div>
+        </div>
+
+      </section>
+
+      <section id="packages">
+        <h1>Ceramic Coating</h1>
+        <p>Buy Buy Buy!</p>
+        <a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/Z2TzVLNpkirBka11huXA">
+          <button id="book-button">Book Ceramic Coating</button>
         </a>
       </section>
 
+
+      <section id="packages">
+        <h1>Polishing & Paint Correction</h1>
+        <h2>Buy Buy Buy!</h2>
+        <a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/W7MYzeflJr6yEAlpgreQ">
+          <button id="book-button">Book a Polish</button>
+        </a>
+      </section>
+      
       <section id="exterior">
         <h1>Exterior Detailing</h1>
         <p>Wipe, wash, polish, wax, you name it.</p>
@@ -90,11 +249,11 @@
         </a>
       </section>
 
-      <section id="packages">
-        <h1>Service Packages</h1>
-        <p>Combine and save.</p>
-        <a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/XGQVAkJx15acdsEemvEr">
-          <button id="book-button">Buy a Package</button>
+      <section id="interior">
+        <h1>Interior Detailing</h1>
+        <p>Clean car with vaccuum, wipes, brushes, and more.</p>
+        <a target="_blank" class="book-link" href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/iy5yKtAhm0O0w0P05acA">
+          <button id="book-button">Book Interior Detailing</button>
         </a>
       </section>
 
@@ -102,7 +261,7 @@
 
     <footer>
       <div id="footer-left">
-        &copy;Maine Luxury Detailing 2025<br />
+        &copy;Luxury Detailing Maine 2025<br />
         All rights reserved<br />
         Portland, ME
       </div>
@@ -117,6 +276,16 @@
       </div>
     </footer>
     <script src="js/hamburger.js"></script>
-    <script src="js/dropdown.js"></script>
+    <script>
+      function toggleDropdown(headerClicked) {
+        let body = headerClicked.nextElementSibling;
+        let arrow = headerClicked.children[0];
+
+        headerClicked.parentElement.classList.toggle("open");
+        body.classList.toggle("open");
+        arrow.classList.toggle("open");
+      }
+
+    </script>
   </body>
 </html>