From 8ecb5f9059f0ae1d7069753d4e644958852a4c93 Mon Sep 17 00:00:00 2001
From: matt <matt@harborsmith.co>
Date: Fri, 19 Sep 2025 02:42:13 +0200
Subject: [PATCH] Polish hero and buttons for responsiveness

---
 apps/website/assets/css/voyage-layout.css | 54 ++++++++---------------
 1 file changed, 18 insertions(+), 36 deletions(-)

diff --git a/apps/website/assets/css/voyage-layout.css b/apps/website/assets/css/voyage-layout.css
index 05a2bf5..7575a27 100644
--- a/apps/website/assets/css/voyage-layout.css
+++ b/apps/website/assets/css/voyage-layout.css
@@ -398,13 +398,11 @@ html {
 /* Hero Section */
 .hero-voyage {
     position: relative;
-    height: 100vh;
-    min-height: 600px;
+    height: 100dvh;
+    min-height: 100dvh;
     overflow: hidden;
-    /* Prevent iOS overscroll bounce */
     overscroll-behavior-y: none;
     -webkit-overflow-scrolling: touch;
-    /* Prevent horizontal overflow */
     overflow-x: hidden !important;
     max-width: 100vw !important;
     contain: layout;
@@ -412,28 +410,24 @@ html {
 
 .hero-video-container {
     position: absolute;
-    top: 0;
-    left: 0;
+    inset: 0;
     width: 100%;
     height: 100%;
-    z-index: 1;
     overflow: hidden;
+    z-index: 1;
 }
 
-.hero-video {
+.hero-video,
+.hero-image-fallback,
+.hero-overlay {
+    position: absolute;
+    inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
-    /* Ensure video doesn't cause overflow */
-    max-width: 100%;
 }
 
 .hero-image-fallback {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
@@ -448,31 +442,15 @@ html {
 }
 
 .hero-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
     z-index: 2;
 }
 
-.gradient-warm {
-    background: linear-gradient(to bottom, 
-        rgba(0, 31, 63, 0.3) 0%, 
-        rgba(0, 31, 63, 0.5) 50%, 
-        rgba(0, 31, 63, 0.7) 100%);
-}
-
-.gradient-depth {
-    background: linear-gradient(to right, 
-        rgba(220, 20, 60, 0.1) 0%, 
-        transparent 100%);
-}
-
 .hero-content {
     position: relative;
     z-index: 10;
     height: 100%;
+    object-fit: cover;
+    width: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -835,6 +813,8 @@ html {
     width: 100%;
     height: 100%;
     object-fit: cover;
+    width: 100%;
+    object-fit: cover;
     transition: var(--transition-slow);
 }
 
@@ -1215,6 +1195,8 @@ html {
     width: 100%;
     height: 100%;
     object-fit: cover;
+    width: 100%;
+    object-fit: cover;
 }
 
 .story-overlay {
@@ -1297,6 +1279,8 @@ html {
     width: 100%;
     height: 100%;
     object-fit: cover;
+    width: 100%;
+    object-fit: cover;
     transition: var(--transition-slow);
 }
 
@@ -1675,9 +1659,8 @@ html {
 @media (max-width: 768px) {
     .hero-voyage {
         padding: 0;
-        min-height: 100vh;
         min-height: 100dvh;
-        height: 100vh;
+        height: 100dvh;
         height: 100dvh;
         overflow-x: hidden !important;
         max-width: 100vw !important;
@@ -1691,7 +1674,6 @@ html {
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        min-height: 100vh;
         min-height: 100dvh;
     }