From c9e8dce4d4b6495fe3a6a5ef12a973836869d2c4 Mon Sep 17 00:00:00 2001
From: matt <matt@harborsmith.co>
Date: Sun, 21 Sep 2025 15:42:39 +0200
Subject: [PATCH] Reflow hero layout and update iOS status bar style

---
 apps/website/assets/css/voyage-layout.css | 23 ++++++++---
 apps/website/components/HeroSection.vue   | 50 ++++++++++++++---------
 apps/website/nuxt.config.ts               |  2 +-
 3 files changed, 49 insertions(+), 26 deletions(-)

diff --git a/apps/website/assets/css/voyage-layout.css b/apps/website/assets/css/voyage-layout.css
index 7de1fec..1562649 100644
--- a/apps/website/assets/css/voyage-layout.css
+++ b/apps/website/assets/css/voyage-layout.css
@@ -498,16 +498,24 @@ html {
     position: relative;
     z-index: 10;
     height: 100%;
-    min-height: 100%;
+    min-height: 100dvh;
     width: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: flex-start;
+    justify-content: space-between;
     align-items: center;
-    gap: var(--space-md);
     text-align: center;
     /* Apply safe area padding HERE to protect content from being obscured */
-    padding: calc(max(var(--safe-area-cover-top), clamp(6rem, 14vh, 10rem))) var(--space-md) calc(max(var(--safe-area-cover-bottom), clamp(5rem, 12vh, 8rem)) + var(--space-sm));
+    padding: calc(max(var(--safe-area-cover-top), clamp(4rem, 10vh, 8rem))) var(--space-md) calc(max(var(--safe-area-cover-bottom), clamp(4rem, 12vh, 8rem)) + var(--space-md));
+}
+
+.hero-main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-md);
+    width: min(720px, 100%);
+    margin: 0 auto;
 }
 
 .trust-badge {
@@ -1752,7 +1760,7 @@ html {
         display: flex;
         flex-direction: column;
         align-items: center;
-        justify-content: center;
+        justify-content: space-between;
         min-height: 100vh;
         min-height: -webkit-fill-available;
         min-height: 100dvh;
@@ -1760,6 +1768,11 @@ html {
         z-index: 10; /* Ensure content is above video */
     }
 
+    .hero-main {
+        gap: var(--space-sm);
+        max-width: 100%;
+    }
+
     /* Responsive logo */
     .hero-logo {
         width: 100%;
diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue
index bf17430..a554d58 100644
--- a/apps/website/components/HeroSection.vue
+++ b/apps/website/components/HeroSection.vue
@@ -31,27 +31,28 @@
     </div>
 
     <div class="hero-content" :class="{ 'is-ready': videoLoaded }">
-      <div class="hero-logo animate-fade-in">
-        <img src="/HARBOR-SMITH-white.png" alt="Harbor Smith" width="400" height="250">
-      </div>
+      <div class="hero-main">
+        <div class="hero-logo animate-fade-in">
+          <img src="/HARBOR-SMITH-white.png" alt="Harbor Smith" width="400" height="250">
+        </div>
 
+        <p class="hero-subtext animate-fade-up-delay">
+          <span style="font-size: 1.5rem; font-weight: 500; text-transform: none; letter-spacing: normal; margin-bottom: 10px; display: block;">
+            Personalized Service Maintenance for Your Boat
+          </span>
+          Reliable Care Above and Below the Waterline. Servicing the Bay Area and Beyond!
+        </p>
 
-      <p class="hero-subtext animate-fade-up-delay">
-        <span style="font-size: 1.5rem; font-weight: 500; text-transform: none; letter-spacing: normal; margin-bottom: 10px; display: block;">
-          Personalized Service Maintenance for Your Boat
-        </span>
-        Reliable Care Above and Below the Waterline. Servicing the Bay Area and Beyond!
-      </p>
-
-      <div class="hero-actions animate-fade-up-delay-2">
-        <button class="btn-primary-warm" @click="handlePhoneClick">
-          <LucidePhone class="btn-icon" />
-          Call (510) 701-2535
-        </button>
-        <button class="btn-secondary-warm" @click="handleServicesClick">
-          <LucideWrench class="btn-icon" />
-          View Our Services
-        </button>
+        <div class="hero-actions animate-fade-up-delay-2">
+          <button class="btn-primary-warm" @click="handlePhoneClick">
+            <LucidePhone class="btn-icon" />
+            Call (510) 701-2535
+          </button>
+          <button class="btn-secondary-warm" @click="handleServicesClick">
+            <LucideWrench class="btn-icon" />
+            View Our Services
+          </button>
+        </div>
       </div>
 
       <!-- Scroll to explore indicator -->
@@ -205,11 +206,20 @@ onMounted(() => {
   max-width: 100vw !important;
 }
 
+.hero-main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  width: min(720px, 100%);
+  margin: 0 auto;
+}
+
 /* Scroll to explore indicator */
 
 .scroll-to-explore {
   margin-top: auto;
-  margin-bottom: calc(max(var(--safe-area-cover-bottom, 0px), var(--space-lg)));
+  margin-bottom: calc(max(var(--safe-area-cover-bottom, 0px), clamp(2.5rem, 10vh, 4rem)));
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/apps/website/nuxt.config.ts b/apps/website/nuxt.config.ts
index 41f1004..71f1834 100644
--- a/apps/website/nuxt.config.ts
+++ b/apps/website/nuxt.config.ts
@@ -126,7 +126,7 @@ export default defineNuxtConfig({
         { name: 'robots', content: 'index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' },
         { name: 'theme-color', content: '#001f3f' },
         { name: 'apple-mobile-web-app-capable', content: 'yes' },
-        { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
+        { name: 'apple-mobile-web-app-status-bar-style', content: 'default' },
         // Open Graph
         { property: 'og:type', content: 'website' },
         { property: 'og:url', content: 'https://harborsmith.com' },