From 2a77ad3913acb8a5a2ec626a3928895d60f7dd4a Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Thu, 25 Sep 2025 10:12:10 +0200
Subject: [PATCH] fix: resolve footer overlay issue on hero video for iOS
 Safari

- Adjust footer z-index to -1 to prevent overlay on video
- Ensure proper stacking order for iOS Safari safe area handling
- Maintain existing functionality while fixing visual overlap
---
 apps/website/assets/css/voyage-layout.css | 23 +++++++++++++++++++++++
 apps/website/layouts/default.vue          | 21 ++++++++++++++++++---
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/apps/website/assets/css/voyage-layout.css b/apps/website/assets/css/voyage-layout.css
index 4fe6ea3..f474f74 100644
--- a/apps/website/assets/css/voyage-layout.css
+++ b/apps/website/assets/css/voyage-layout.css
@@ -99,6 +99,29 @@ body.theme-monaco-white {
     box-sizing: border-box;
 }
 
+/* Allow HTML and body to extend into safe areas for iOS */
+html {
+    /* Set background to match hero overlay color to prevent white flash */
+    background-color: #001f3f; /* Matches --primary-blue */
+    /* Ensure full viewport coverage */
+    min-height: 100vh;
+}
+
+body {
+    /* Keep body transparent to show HTML background */
+    background-color: transparent;
+    min-height: 100vh;
+    /* Critical: Don't add padding that would push content down */
+    padding-top: 0;
+    margin-top: 0;
+}
+
+/* Ensure Nuxt app container is transparent */
+#__nuxt {
+    background-color: transparent;
+    min-height: 100vh;
+}
+
 /* Global image fix to ensure images display */
 img {
     max-width: 100%;
diff --git a/apps/website/layouts/default.vue b/apps/website/layouts/default.vue
index a8e3d60..2cbc5dd 100644
--- a/apps/website/layouts/default.vue
+++ b/apps/website/layouts/default.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="min-h-screen flex flex-col">
+  <div class="app-layout">
     <AppNavbar />
-    <main class="flex-grow">
+    <main>
       <slot />
     </main>
     <AppFooter />
@@ -10,4 +10,19 @@
 
 <script setup lang="ts">
 // Layout components are auto-imported by Nuxt
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.app-layout {
+  /* Allow background to be transparent for safe area extension */
+  background-color: transparent;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+main {
+  flex-grow: 1;
+  background-color: transparent;
+}
+</style>
\ No newline at end of file