From a9217b54cb01c0844341c9f70f66b5742e8c324d Mon Sep 17 00:00:00 2001
From: matt <matt@harborsmith.co>
Date: Sun, 21 Sep 2025 18:06:56 +0200
Subject: [PATCH] fix: comprehensive safe area implementation for hero video

- Remove overflow:clip from .hero-voyage that was blocking video extension
- Replace hardcoded -50px with proper env(safe-area-inset-top) calculations
- Update hero-content to use env() values directly instead of CSS variables
- Video now properly extends under notch/Dynamic Island on all iOS devices
- Works with Chrome mobile's dynamic address bar using lvh units
- Content stays within safe areas for proper usability
---
 apps/website/assets/css/voyage-layout.css | 18 ++++++-----
 apps/website/components/HeroSection.vue   | 37 ++++++++---------------
 2 files changed, 23 insertions(+), 32 deletions(-)

diff --git a/apps/website/assets/css/voyage-layout.css b/apps/website/assets/css/voyage-layout.css
index 2c7cc33..5e81b26 100644
--- a/apps/website/assets/css/voyage-layout.css
+++ b/apps/website/assets/css/voyage-layout.css
@@ -443,7 +443,7 @@ html {
     min-height: 100vh; /* Fallback for browsers that don't support newer units */
     min-height: -webkit-fill-available; /* iOS Safari - fills available space */
     min-height: 100dvh; /* Dynamic viewport height */
-    overflow: clip; /* Prevents scrollbars while allowing content to extend */
+    overflow: visible; /* Allow video to extend into safe area */
     overscroll-behavior-y: none;
     -webkit-overflow-scrolling: touch;
     max-width: 100vw !important;
@@ -456,9 +456,10 @@ html {
     position: fixed;
     left: 0;
     right: 0;
-    --hero-safe-area-top: var(--safe-area-cover-top);
-    top: calc(-1 * var(--hero-safe-area-top));
-    height: calc(100lvh + var(--hero-safe-area-top));
+    /* Pull up by safe-area to extend under notch */
+    top: calc(-1 * env(safe-area-inset-top));
+    /* Grow height to compensate */
+    height: calc(100lvh + env(safe-area-inset-top));
     transform: translate3d(0, var(--parallax-offset, 0px), 0);
     background: #ffffff;
     z-index: 0; /* Behind content */
@@ -468,7 +469,7 @@ html {
 /* Fallback for browsers without lvh support */
 @supports not (height: 100lvh) {
     .hero-video-container {
-        height: calc(100vh + var(--hero-safe-area-top));
+        height: calc(100vh + env(safe-area-inset-top));
     }
 }
 
@@ -512,8 +513,11 @@ html {
     align-items: center;
     justify-items: center;
     text-align: center;
-    /* Apply safe area padding HERE to protect content from being obscured */
-    padding: calc(var(--safe-area-cover-top) + clamp(2rem, 8vh, 5rem)) var(--space-md) calc(var(--safe-area-cover-bottom) + clamp(1.25rem, 3vh, 2.5rem));
+    /* Use env() directly for safe area padding */
+    padding-top: calc(env(safe-area-inset-top) + clamp(2rem, 8vh, 5rem));
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+    padding-bottom: calc(env(safe-area-inset-bottom) + clamp(1.25rem, 3vh, 2.5rem));
     row-gap: clamp(2rem, 6vh, 4rem);
 }
 
diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue
index fcaa9a2..928fb3a 100644
--- a/apps/website/components/HeroSection.vue
+++ b/apps/website/components/HeroSection.vue
@@ -172,45 +172,32 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* Hero video container - Fixed for both Safari notch and Chrome mobile */
+/* Hero video container - proper safe area implementation */
 .hero-video-container {
   position: fixed;
-  top: 0;
   left: 0;
+  right: 0;
   width: 100vw;
-  /* Use 100dvh for dynamic viewport (Chrome mobile fix) */
-  height: 100dvh;
-  /* Fallback for browsers without dvh support */
-  height: 100vh;
+  /* Pull up by safe-area to extend under notch */
+  top: calc(-1 * env(safe-area-inset-top));
+  /* Grow height to compensate */
+  height: calc(100lvh + env(safe-area-inset-top));
   z-index: 1;
   pointer-events: none;
   background: #ffffff;
 }
 
-/* Additional support for browsers with dvh */
-@supports (height: 100dvh) {
+/* Fallback for browsers without lvh */
+@supports not (height: 100lvh) {
   .hero-video-container {
-    height: 100dvh;
+    height: calc(100vh + env(safe-area-inset-top));
   }
 }
 
-/* Safari-specific fix for notch/Dynamic Island */
-@supports (-webkit-touch-callout: none) {
+/* Additional support for browsers with dvh */
+@supports (height: 100dvh) {
   .hero-video-container {
-    /* Extend beyond safe area for Safari */
-    top: -50px; /* Covers notch (44px) and Dynamic Island (59px) */
-    height: calc(100vh + 50px);
-    /* Use dvh if available */
-    height: calc(100dvh + 50px);
-  }
-
-  /* Adjust for landscape orientation */
-  @media (orientation: landscape) {
-    .hero-video-container {
-      top: 0;
-      height: 100vh;
-      height: 100dvh;
-    }
+    height: calc(100dvh + env(safe-area-inset-top));
   }
 }