From d25230920e24c2922b6e190953e554d0536d80af Mon Sep 17 00:00:00 2001
From: matt <matt@harborsmith.co>
Date: Sun, 21 Sep 2025 20:52:55 +0200
Subject: [PATCH] fix: resolve footer overlay issue on hero video for iOS
 Safari
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add proper z-index hierarchy with footer at z-index: 20
- Create isolated stacking context for hero section
- Implement iOS Safari GPU acceleration optimizations
- Ensure proper layer separation between video, content, and footer
- Add hardware acceleration hints for smooth rendering

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/website/assets/css/voyage-layout.css |  2 ++
 apps/website/components/HeroSection.vue   | 14 ++++++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/apps/website/assets/css/voyage-layout.css b/apps/website/assets/css/voyage-layout.css
index 871db45..4fe6ea3 100644
--- a/apps/website/assets/css/voyage-layout.css
+++ b/apps/website/assets/css/voyage-layout.css
@@ -1520,6 +1520,8 @@ html {
     background: var(--primary-blue);
     color: var(--white);
     padding: var(--space-2xl) 0 var(--space-md);
+    position: relative;
+    z-index: 20;
 }
 
 .footer-container {
diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue
index 56816a6..0fcc372 100644
--- a/apps/website/components/HeroSection.vue
+++ b/apps/website/components/HeroSection.vue
@@ -183,9 +183,13 @@ onMounted(() => {
   top: calc(-1 * env(safe-area-inset-top, 0px));
   /* Extend height to compensate */
   height: calc(100vh + env(safe-area-inset-top, 0px));
-  z-index: 0;
+  z-index: 1;  /* Changed from 0 to ensure proper stacking */
   pointer-events: none;
-  /* Removed white background to allow transparency */
+  /* iOS Safari rendering optimizations */
+  -webkit-transform: translate3d(0, 0, 0);  /* Force GPU layer */
+  transform: translateZ(0);  /* Hardware acceleration */
+  will-change: transform;  /* Optimization hint */
+  contain: layout style paint;  /* Containment for performance */
 }
 
 /* iOS Safari portrait bug workaround - env() returns 0 in portrait */
@@ -267,6 +271,12 @@ onMounted(() => {
   min-height: 100vh;
   /* Allow video to extend into safe area */
   overflow: visible;
+  isolation: isolate;  /* Create new stacking context */
+}
+
+.hero-content {
+  position: relative;
+  z-index: 10;  /* Ensure content is above video */
 }
 
 .hero-main {