From b25512ad655ce0da6b1cc54167cf6601860849d5 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Thu, 25 Sep 2025 16:02:29 +0200
Subject: [PATCH] fix: finally resolve iOS safe area issue by removing body
 background

- Remove body background that was blocking video from showing in safe areas
- Add main-content wrapper with white background for content sections
- This allows video to extend into safe areas while keeping content readable
- Root cause: body's white background was covering entire viewport including safe areas
---
 apps/website/assets/css/voyage-layout.css |  3 +-
 apps/website/pages/index.vue              | 35 +++++++++++++++--------
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/apps/website/assets/css/voyage-layout.css b/apps/website/assets/css/voyage-layout.css
index 8ce381a..60ba3e7 100644
--- a/apps/website/assets/css/voyage-layout.css
+++ b/apps/website/assets/css/voyage-layout.css
@@ -233,7 +233,8 @@ img {
 body {
     font-family: var(--font-sans);
     color: var(--text-dark);
-    background: var(--bg-light); /* Body needs light background for content sections */
+    /* Background removed to allow video to extend into safe areas */
+    /* Content sections will have their own backgrounds */
     max-width: 100vw !important;
     position: relative;
     line-height: 1.6;
diff --git a/apps/website/pages/index.vue b/apps/website/pages/index.vue
index 77cdf03..01a57e4 100644
--- a/apps/website/pages/index.vue
+++ b/apps/website/pages/index.vue
@@ -3,23 +3,26 @@
     <!-- Hero Section with Video Background -->
     <HeroSection />
 
-    <!-- Welcome Section -->
-    <WelcomeSection />
+    <!-- Main content wrapper with white background -->
+    <div class="main-content">
+      <!-- Welcome Section -->
+      <WelcomeSection />
 
-    <!-- Services Section -->
-    <ServicesSection />
+      <!-- Services Section -->
+      <ServicesSection />
 
-    <!-- Trust Indicators Section -->
-    <TrustIndicators />
+      <!-- Trust Indicators Section -->
+      <TrustIndicators />
 
-    <!-- Testimonials Section -->
-    <TestimonialsSection />
+      <!-- Testimonials Section -->
+      <TestimonialsSection />
 
-    <!-- Gallery Section -->
-    <GallerySection />
+      <!-- Gallery Section -->
+      <GallerySection />
 
-    <!-- Booking Section -->
-    <BookingSection />
+      <!-- Booking Section -->
+      <BookingSection />
+    </div>
   </div>
 </template>
 
@@ -53,3 +56,11 @@ useHead({
 
 // Structured data temporarily disabled pending nuxt-seo-utils update
 </script>
+
+<style scoped>
+.main-content {
+  background: #ffffff;
+  position: relative;
+  z-index: 1;
+}
+</style>