From 826326f4e2aac8ed8e6e5179c88aa4d51200cec7 Mon Sep 17 00:00:00 2001 From: sotrali Date: Tue, 11 Nov 2025 13:49:08 -0500 Subject: [PATCH] buuuncha updates --- ceramic-coating.html | 76 ++++++++++++++---- index.html | 7 +- reviews.html | 100 +++++++++++++----------- services.html | 179 +++++++++++++++++++++++++++---------------- 4 files changed, 235 insertions(+), 127 deletions(-) diff --git a/ceramic-coating.html b/ceramic-coating.html index 33e8297..6cb0321 100644 --- a/ceramic-coating.html +++ b/ceramic-coating.html @@ -13,9 +13,9 @@ + + + @@ -204,52 +237,25 @@
+ @@ -347,5 +354,8 @@ insertReviews(reviewData); }; + + + diff --git a/services.html b/services.html index 2bc7b51..c9355c2 100644 --- a/services.html +++ b/services.html @@ -21,6 +21,7 @@ } #book-button { + width: 100%; background-color: var(--black); color: var(--gold); @@ -44,8 +45,7 @@ #book-link { display: block; - width: 50%; - margin-top: 5rem; + width: 100%; } /** Dropdown Menu Style Overrides */ @@ -104,9 +104,26 @@ .dropdown-content { text-align: left; border: none; + /** closing speed */ + transition: max-height .3s ease; } + /** service section dropdowns that are v long */ + .dropdown-content.open-longest { + max-height: 1100px; + /** opening speed */ + transition: max-height 1s ease; + } + /** service section dropdowns */ + .dropdown-content.open-long { + max-height: 1100px; + /** opening speed */ + transition: max-height 1s ease; + } + /** dropdowns holding specific service info */ .dropdown-content.open { - max-height: 2000px; + max-height: 400px; + /** opening speed */ + transition: max-height .5s ease; } .dropdown-body { @@ -115,7 +132,7 @@ justify-items: space-around; align-items: flex-start; flex-wrap: wrap; - margin: 1rem 1rem 1.5rem 6rem; + margin: 1rem 1rem 0rem 6rem; user-select: text; } @@ -125,9 +142,12 @@ .dropdown-body-half { flex-basis: 50%; } - .dropdown-body-full { - flex-basis: 100%; + .dropdown-button { + margin: auto; + margin-bottom: 1.5rem; + width: 80%; } + /** mobile rules */ /** MOBILE */ @media screen and (max-width: 850px) { @@ -145,8 +165,28 @@ .dropdown-header { padding: 1.5rem 1rem 2rem 1rem; } + + /** service section dropdowns that are v long */ + .dropdown-content.open-longest { + max-height: 1700px; + /** opening speed */ + transition: max-height 1s ease; + } + /** service section dropdowns */ + .dropdown-content.open-long { + max-height: 1450px; + /** opening speed */ + transition: max-height 1s ease; + } + /** dropdowns holding specific service info */ + .dropdown-content.open { + max-height: 600px; + /** opening speed */ + transition: max-height .5s ease; + } + .dropdown-body { - margin: 1rem 1rem 1.5rem 3rem; + margin: 1rem 1rem 0rem 3rem; flex-direction: column; } .dropdown-body span:not(:first-child) { @@ -155,11 +195,6 @@ .dropdown-body p { padding-right: 0rem; } - .book-link { - padding: 0; - margin: 0; - align-self: center; - } } @@ -195,7 +230,7 @@
-
+
▼

Service Packages

@@ -235,15 +270,14 @@
  • Light door jam cleaning
    • +
    - - - - - - +
    + + +
    @@ -281,31 +315,32 @@
  • 3 to 6 month ceramic paint sealant: gloss, protection, hydrophobic & self-cleaning properties
    • - - - - - - + +
    + + + +
    -
    -
    +
    ▼

    Ceramic Coating

    + question for aden: should clicking this just bring user to "ceramic coating" page? +
    ▼ @@ -335,12 +370,11 @@
  • 1 Step polish to remove light swirls and enhance gloss
    • - - - - - - +
    +
    + + +
    @@ -380,12 +414,11 @@ - - - - - - +
    +
    + + +
    @@ -407,11 +440,11 @@ Only available if the entire car receives a ceramic coating.

    - - - - - + +
    + + +
    @@ -421,7 +454,7 @@
    -
    +
    ▼

    Polishing & Paint Correction

    @@ -451,12 +484,11 @@
  • Ceramic coating, sealant, or wax required after
    • - - - - - - +
    +
    + + +
    @@ -485,22 +517,23 @@
  • Ceramic coating, sealant, or wax required after
    • - - - - - - + +
    + + +
    + + wip below
    -
    +
    ▼

    Exterior Detailing

    @@ -568,7 +601,7 @@
    -
    +
    ▼

    Interior Detailing

    @@ -653,11 +686,23 @@ let body = headerClicked.nextElementSibling; let arrow = headerClicked.children[0]; - headerClicked.parentElement.classList.toggle("open"); - body.classList.toggle("open"); - arrow.classList.toggle("open"); - } + if (headerClicked.parentElement.classList.contains("longest")) { + headerClicked.parentElement.classList.toggle("open-longest"); + body.classList.toggle("open-longest"); + arrow.classList.toggle("open-longest"); + } + else if (headerClicked.parentElement.classList.contains("long")) { + headerClicked.parentElement.classList.toggle("open-long"); + body.classList.toggle("open-long"); + arrow.classList.toggle("open-long"); + } + else { + headerClicked.parentElement.classList.toggle("open"); + body.classList.toggle("open"); + arrow.classList.toggle("open"); + } + }