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

@@ -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%;

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 />
@@ -11,3 +11,18 @@
 <script setup lang="ts">
 // Layout components are auto-imported by Nuxt
 </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>