From 6ff45745580cedb412343b526aafc41ce2e969e0 Mon Sep 17 00:00:00 2001
From: matt <matt@harborsmith.co>
Date: Fri, 19 Sep 2025 00:35:05 +0200
Subject: [PATCH] fixes

---
 apps/website/assets/css/main.css          | 64 ++++++++++++++++++++---
 apps/website/assets/css/voyage-layout.css | 29 ++++++++--
 2 files changed, 81 insertions(+), 12 deletions(-)

diff --git a/apps/website/assets/css/main.css b/apps/website/assets/css/main.css
index 948353c..21a425a 100644
--- a/apps/website/assets/css/main.css
+++ b/apps/website/assets/css/main.css
@@ -119,23 +119,71 @@ html {
   }
 
   .btn-secondary-warm {
-    @apply px-8 py-3 bg-transparent border-2 border-harbor-gold text-harbor-gold font-semibold rounded-full;
-    @apply hover:bg-harbor-gold hover:text-white transition-all duration-300;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.75rem;
+    border-radius: 9999px;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    background: rgba(255, 255, 255, 0.12);
+    color: #ffffff;
+    border: 1px solid rgba(255, 255, 255, 0.35);
+    backdrop-filter: blur(12px);
+    transition: all 0.3s ease;
+  }
+
+  .btn-secondary-warm:hover {
+    background: rgba(255, 255, 255, 0.24);
+    border-color: rgba(255, 255, 255, 0.55);
+    transform: translateY(-2px);
+    box-shadow: 0 12px 30px rgba(12, 35, 64, 0.25);
   }
 
   .btn-booking {
-    @apply inline-flex items-center justify-center px-6 py-3 rounded-lg font-semibold;
-    @apply transition-all duration-300 transform hover:-translate-y-1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.75rem;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    background: rgba(255, 255, 255, 0.14);
+    color: #ffffff;
+    border: 2px solid rgba(255, 255, 255, 0.35);
+    backdrop-filter: blur(10px);
+  }
+
+  .btn-booking:hover {
+    background: rgba(255, 255, 255, 0.4);
+    color: #10213c;
+    border-color: rgba(255, 255, 255, 0.7);
   }
 
   .btn-booking.primary {
-    @apply bg-gradient-to-r from-harbor-gold to-harbor-yellow text-white;
-    @apply hover:shadow-2xl hover:from-harbor-amber hover:to-harbor-gold;
+    background: #ffffff;
+    color: #b48b4e;
+    border-color: #ffffff;
+    box-shadow: 0 10px 25px rgba(180, 139, 78, 0.25);
+  }
+
+  .btn-booking.primary:hover {
+    background: linear-gradient(135deg, #b48b4e 0%, #c9a56f 100%);
+    color: #ffffff;
+    border-color: transparent;
   }
 
   .btn-booking.secondary {
-    @apply bg-white text-harbor-navy border-2 border-harbor-gold;
-    @apply hover:bg-harbor-gold hover:text-white hover:border-harbor-gold;
+    background: rgba(255, 255, 255, 0.12);
+    color: #ffffff;
+    border-color: rgba(255, 255, 255, 0.35);
+  }
+
+  .btn-booking.secondary:hover {
+    background: #ffffff;
+    color: #10213c;
+    border-color: #ffffff;
   }
 
   /* Card Styles */
diff --git a/apps/website/assets/css/voyage-layout.css b/apps/website/assets/css/voyage-layout.css
index f3b14ef..716dda8 100644
--- a/apps/website/assets/css/voyage-layout.css
+++ b/apps/website/assets/css/voyage-layout.css
@@ -178,7 +178,13 @@ img {
 /* Star rating icons */
 .stars-icons {
     display: inline-flex;
-    gap: 2px;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.4rem;
+}
+
+.stars-icons svg {
+    display: inline-block;
 }
 
 .star-filled {
@@ -1067,8 +1073,8 @@ html {
 /* Service Stats */
 .service-stats {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: var(--space-md);
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: clamp(1.5rem, 4vw, 3rem);
     margin-top: var(--space-xl);
     padding: var(--space-lg);
     background: white;
@@ -1076,9 +1082,24 @@ html {
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
 }
 
+@media (max-width: 1024px) {
+  .service-stats {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .service-stats {
+    grid-template-columns: 1fr;
+  }
+}
+
 .stat-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    align-items: center;
     text-align: center;
-    padding: var(--space-md);
 }
 
 .stat-icon {