Align hero content grid and tweak iOS theme color

apps/website/assets/css/voyage-layout.css

@@ -500,22 +500,23 @@ html {
     height: 100%;
     min-height: 100dvh;
     width: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+    display: grid;
+    grid-template-rows: 1fr auto;
     align-items: center;
+    justify-items: center;
     text-align: center;
     /* Apply safe area padding HERE to protect content from being obscured */
-    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));
+    padding: calc(var(--safe-area-cover-top) + clamp(2rem, 8vh, 5rem)) var(--space-md) calc(var(--safe-area-cover-bottom) + clamp(1.25rem, 3vh, 2.5rem));
+    row-gap: clamp(2rem, 6vh, 4rem);
 }
 
 .hero-main {
+    width: min(720px, 100%);
+    margin: 0 auto;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: var(--space-md);
-    width: min(720px, 100%);
-    margin: 0 auto;
 }
 
 .trust-badge {
@@ -1757,15 +1758,16 @@ html {
         padding-left: max(env(safe-area-inset-left, 0), clamp(1rem, 3vw, 2rem));
         padding-right: max(env(safe-area-inset-right, 0), clamp(1rem, 3vw, 2rem));
         width: 100%;
-        display: flex;
-        flex-direction: column;
+        display: grid;
+        grid-template-rows: 1fr auto;
         align-items: center;
-        justify-content: space-between;
+        justify-items: center;
         min-height: 100vh;
         min-height: -webkit-fill-available;
         min-height: 100dvh;
         position: relative;
         z-index: 10; /* Ensure content is above video */
+        row-gap: clamp(1.5rem, 6vw, 3rem);
     }
 
     .hero-main {

apps/website/components/HeroSection.vue

@@ -219,7 +219,7 @@ onMounted(() => {
 
 .scroll-to-explore {
   margin-top: auto;
-  margin-bottom: calc(max(var(--safe-area-cover-bottom, 0px), clamp(2.5rem, 10vh, 4rem)));
+  margin-bottom: calc(var(--safe-area-cover-bottom, 0px) + clamp(0.75rem, 2vh, 1.75rem));
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -229,6 +229,7 @@ onMounted(() => {
   opacity: 0.8;
   transition: all 0.3s ease;
   animation: bounce 2s infinite;
+  justify-self: center;
 }
 
 .scroll-to-explore:hover {

apps/website/nuxt.config.ts

@@ -124,7 +124,7 @@ export default defineNuxtConfig({
         { name: 'author', content: 'Harbor Smith' },
         { name: 'keywords', content: 'yacht charter, boat maintenance, San Francisco Bay, mobile boat service, yacht repair, marine services, boat cleaning, yacht management' },
         { name: 'robots', content: 'index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' },
-        { name: 'theme-color', content: '#001f3f' },
+        { name: 'theme-color', content: '#ffffff' },
         { name: 'apple-mobile-web-app-capable', content: 'yes' },
         { name: 'apple-mobile-web-app-status-bar-style', content: 'default' },
         // Open Graph