From 2d6ec4e4324a804bd50a42ca1b9f9582e2d29356 Mon Sep 17 00:00:00 2001
From: matt <matt@harborsmith.co>
Date: Fri, 19 Sep 2025 01:16:44 +0200
Subject: [PATCH] Fix critical mobile optimizations for iPhone
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Update viewport meta to prevent zoom-out issues
- Add video preload and smooth fallback transitions
- Implement iOS overscroll bounce prevention
- Center service offering buttons properly
- Add mobile-specific padding and touch target sizing
- Optimize video loading with canplaythrough event
- Add fade-out transition for fallback image

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/website/assets/css/main.css          | 20 +++++++++++++++++++-
 apps/website/assets/css/voyage-layout.css | 15 +++++++++++++++
 apps/website/components/HeroSection.vue   |  6 ++++--
 apps/website/nuxt.config.ts               |  2 +-
 4 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/apps/website/assets/css/main.css b/apps/website/assets/css/main.css
index 2b347fa..766876e 100644
--- a/apps/website/assets/css/main.css
+++ b/apps/website/assets/css/main.css
@@ -3,9 +3,16 @@
 @tailwind components;
 @tailwind utilities;
 
-/* Smooth Scroll Behavior */
+/* Smooth Scroll Behavior and iOS Overscroll Prevention */
 html {
   scroll-behavior: smooth;
+  overscroll-behavior-y: contain;
+  -webkit-overflow-scrolling: touch;
+}
+
+body {
+  overscroll-behavior-y: contain;
+  -webkit-overflow-scrolling: touch;
 }
 
 /* Accessibility: Reduced Motion */
@@ -237,6 +244,17 @@ html {
       max-width: 280px;
       margin: 20px auto;
     }
+
+    /* Reduce hero padding on mobile */
+    .hero-content {
+      padding: 1rem;
+    }
+
+    /* Ensure touch targets are at least 44x44px */
+    button, .btn-primary-warm, .btn-secondary-warm {
+      min-height: 44px;
+      min-width: 44px;
+    }
   }
 
   .gradient-warm {
diff --git a/apps/website/assets/css/voyage-layout.css b/apps/website/assets/css/voyage-layout.css
index b19c6e3..29c5ee5 100644
--- a/apps/website/assets/css/voyage-layout.css
+++ b/apps/website/assets/css/voyage-layout.css
@@ -397,6 +397,9 @@ html {
     height: 100vh;
     min-height: 600px;
     overflow: hidden;
+    /* Prevent iOS overscroll bounce */
+    overscroll-behavior-y: none;
+    -webkit-overflow-scrolling: touch;
 }
 
 .hero-video-container {
@@ -424,6 +427,13 @@ html {
     background-position: center;
     background-repeat: no-repeat;
     z-index: -1;
+    opacity: 1;
+    transition: opacity 0.5s ease-in-out;
+}
+
+.hero-image-fallback.fade-out {
+    opacity: 0;
+    pointer-events: none;
 }
 
 .hero-overlay {
@@ -1415,6 +1425,11 @@ html {
     transition: var(--transition);
     opacity: 1;
     visibility: visible;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    margin: 0 auto;
 }
 
 /* Non-featured card buttons */
diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue
index 7f2adc0..02a9aad 100644
--- a/apps/website/components/HeroSection.vue
+++ b/apps/website/components/HeroSection.vue
@@ -7,8 +7,10 @@
         loop
         muted
         playsinline
+        preload="metadata"
+        poster="/golden_gate.jpg"
         class="hero-video"
-        @loadeddata="handleVideoLoaded"
+        @canplaythrough="handleVideoLoaded"
       >
         <source
           src="https://videos.pexels.com/video-files/3571264/3571264-uhd_2560_1440_30fps.mp4"
@@ -17,8 +19,8 @@
       </video>
 
       <div
-        v-if="!videoLoaded"
         class="hero-image-fallback"
+        :class="{ 'fade-out': videoLoaded }"
         :style="{ backgroundImage: 'url(/golden_gate.jpg)' }"
       />
 
diff --git a/apps/website/nuxt.config.ts b/apps/website/nuxt.config.ts
index de2cb26..de8a424 100644
--- a/apps/website/nuxt.config.ts
+++ b/apps/website/nuxt.config.ts
@@ -118,7 +118,7 @@ export default defineNuxtConfig({
       title: 'Harbor Smith - Personalized Service Maintenance For Your Boat',
       meta: [
         { charset: 'utf-8' },
-        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+        { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes' },
         { name: 'description', content: 'Professional boat maintenance services in San Francisco Bay. Mobile service at your dock.' },
         { name: 'format-detection', content: 'telephone=no' }
       ],