From b97be94e2f0f9b9a4ad8052fac1e3e162397c3a5 Mon Sep 17 00:00:00 2001
From: matt <matt@harborsmith.co>
Date: Sun, 21 Sep 2025 13:14:22 +0200
Subject: [PATCH] feat: iOS hero video extends under notch with safe area
 support

- Video now uses fixed positioning on mobile to fill entire viewport
- Hero content respects safe-area-inset on all sides (top, left, right, bottom)
- Navigation bar includes safe area padding to stay below notch
- Removed padding-top from hero-voyage to allow video under notch
- Maintains smooth scroll transitions and navbar background changes

This allows the hero video to create an immersive edge-to-edge experience
on iOS devices while keeping all interactive elements accessible.
---
 apps/website/assets/css/voyage-layout.css | 29 +++++++++++++++++------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/apps/website/assets/css/voyage-layout.css b/apps/website/assets/css/voyage-layout.css
index ac21233..a26e7e5 100644
--- a/apps/website/assets/css/voyage-layout.css
+++ b/apps/website/assets/css/voyage-layout.css
@@ -225,14 +225,14 @@ html {
     background: rgba(255, 255, 255, 0);
     backdrop-filter: blur(0);
     transition: var(--transition-slow);
-    padding: var(--space-md) 0;
+    padding: calc(var(--space-md) + env(safe-area-inset-top, 0)) 0 var(--space-md) 0;
 }
 
 .voyage-nav.scrolled {
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-    padding: var(--space-sm) 0;
+    padding: calc(var(--space-sm) + env(safe-area-inset-top, 0)) 0 var(--space-sm) 0;
 }
 
 .nav-container {
@@ -1686,18 +1686,31 @@ html {
         min-height: 100vh;
         min-height: -webkit-fill-available;
         min-height: 100dvh;
-        /* Extend into safe areas */
-        padding-top: env(safe-area-inset-top);
+        /* Video will extend under notch - no padding-top here */
         padding-bottom: env(safe-area-inset-bottom);
         overflow-x: hidden !important;
         max-width: 100vw !important;
     }
 
+    /* Make video container fixed on mobile to fill entire viewport including notch */
+    .hero-video-container {
+        position: fixed !important;
+        inset: 0;
+        width: 100vw;
+        height: 100vh;
+        height: -webkit-fill-available;
+        height: 100dvh;
+        z-index: 0;
+        pointer-events: none;
+    }
+
     .hero-content {
-        /* Adjust padding to account for safe areas */
+        /* Adjust padding to account for safe areas on all sides */
         padding: clamp(1rem, 4vw, 2rem);
-        padding-top: max(env(safe-area-inset-top), clamp(1rem, 4vw, 2rem));
-        padding-bottom: max(env(safe-area-inset-bottom), clamp(1rem, 4vw, 2rem));
+        padding-top: max(env(safe-area-inset-top, 0), clamp(2rem, 4vw, 3rem));
+        padding-bottom: max(env(safe-area-inset-bottom, 0), clamp(1rem, 4vw, 2rem));
+        padding-left: max(env(safe-area-inset-left, 0), clamp(1rem, 3vw, 2rem));
+        padding-right: max(env(safe-area-inset-right, 0), clamp(1rem, 3vw, 2rem));
         overflow-x: hidden;
         width: 100%;
         display: flex;
@@ -1707,6 +1720,8 @@ html {
         min-height: 100vh;
         min-height: -webkit-fill-available;
         min-height: 100dvh;
+        position: relative;
+        z-index: 10; /* Ensure content is above video */
     }
 
     /* Responsive logo */