From 890bcea30135438ed2813bc7f6c3372a91b1611c Mon Sep 17 00:00:00 2001
From: sotrali <vesspa0330@gmail.com>
Date: Mon, 19 Jan 2026 23:14:33 -0500
Subject: [PATCH] book buttons added to services

---
 TODO          |  3 +-
 services.html | 76 +++++++++++++++++++++++++++++++++++++++------------
 2 files changed, 61 insertions(+), 18 deletions(-)

diff --git a/TODO b/TODO
index 811591d..6211f78 100644
--- a/TODO
+++ b/TODO
@@ -1,2 +1,3 @@
 address missing star unicode on all browser
-address disappearing content when inner service dropdown is closed
+thicken book button border
+instead of classes for service sizes, use JS to go over service cards and round them up to standardize similar length cards? idk. otherwise will need to pass class in with JSON
diff --git a/services.html b/services.html
index 81d2f7d..cf33c99 100644
--- a/services.html
+++ b/services.html
@@ -60,15 +60,16 @@
       }
       #downArrow {
         transform: rotate(-45deg);
-        height: 20px;
-        width: 20px;
-        border-left: solid 2px var(--gold);
-        border-bottom: solid 2px var(--gold);
-      }
-      #downArrow:hover {
+        height: 30px;
+        width: 30px;
         border-left: solid 3px var(--gold);
         border-bottom: solid 3px var(--gold);
       }
+      #downArrow:hover {
+        /** border-left: solid 3px var(--gold);
+        border-bottom: solid 3px var(--gold);*/
+        transform: rotate(-45deg) scaleX(110%) scaleY(110%);
+      }
 
       #categoryContainer {
         width: 90%;
@@ -99,11 +100,49 @@
       .service {
         display: flex;
         flex-direction: column;
+        align-items: center;
 
         height: 100%;
 
         width: 40rem;
       }
+      /** "BOOK NOW" buttons */
+      .service button {
+        height: 5rem;
+        min-width: 100%;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        background-color: var(--black);
+        color: var(--gold);
+
+        border: 1px solid var(--dark-gold);
+        border-radius: 5rem;
+
+        padding: 2rem 1rem;
+        margin: 2rem 0;
+
+        font-size: 1.5rem;
+        font-weight: bold;
+        text-decoration: none;
+        transition: 0.3s ease;
+      }
+      .service button:hover {
+        cursor: pointer;
+        box-shadow: 0px 0px 10px var(--gold);
+        font-size: 1.75rem;
+      }
+      .service button:active {
+        background-color: var(--gold);
+      }
+      /** booking link */
+      .service a {
+        display: block;
+        width: 50%;
+        text-decoration: none;
+      }
 
       .card {
         padding: 3rem;
@@ -571,19 +610,22 @@
             target.insertAdjacentHTML(
             "beforeend",
             `
-            <a class="service" href=${service.url} target="_blank">
-              <div class="card">
-                <div class="card-head">
-                  <h2>${service.title}</h2>
-                  <p>${service.subtitle}</p>
-                </div>
-                <div class="card-body">
-                  ${leftSide  ? leftSide : ""}
-                  ${rightSide ? rightSide : ""}
+              <div class="service">
+                <div class="card">
+                  <div class="card-head">
+                    <h2>${service.title}</h2>
+                    <p>${service.subtitle}</p>
+                  </div>
+                  <div class="card-body">
+                    ${leftSide  ? leftSide : ""}
+                    ${rightSide ? rightSide : ""}
+                  </div>
                 </div>
+                <a href=${service.url} target="_blank" class="book-link">
+                <button>BOOK</button>
+                </a>
               </div>
-            </a>
-          `);
+            `);
           }
         }
       }