From c35c2f80d128bf60d5d24df66ecaf2ee96d0797c Mon Sep 17 00:00:00 2001
From: matt <matt@harborsmith.co>
Date: Sun, 21 Sep 2025 17:33:22 +0200
Subject: [PATCH] fix: make hero video cover iOS notch/Dynamic Island using CSS
 transform
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use transform translateY to bypass iOS safe area constraints
- Video now extends into notch/Dynamic Island area on page load
- Removed ineffective iOS-specific negative positioning rules

The transform approach works by moving the element after layout calculations,
successfully bypassing Safari's safe area boundaries.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/website/components/HeroSection.vue | 30 +++----------------------
 1 file changed, 3 insertions(+), 27 deletions(-)

diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue
index 9cf8d9f..f8d195f 100644
--- a/apps/website/components/HeroSection.vue
+++ b/apps/website/components/HeroSection.vue
@@ -175,40 +175,16 @@ onMounted(() => {
 /* Hero video container positioned absolutely behind content */
 .hero-video-container {
   position: fixed;
-  top: 0;
+  top: env(safe-area-inset-top, 0); /* Start at safe area boundary */
   left: 0;
   width: 100vw;
-  height: 100vh;
+  height: calc(100vh + env(safe-area-inset-top, 0)); /* Extend height to cover full screen */
   z-index: 1;
+  transform: translateY(calc(-1 * env(safe-area-inset-top, 0))); /* Move up into notch/Dynamic Island */
   pointer-events: none;
   background: #ffffff; /* White fallback */
 }
 
-/* iOS-specific: Extend video into safe area */
-@supports (-webkit-touch-callout: none) {
-  @media (max-width: 768px) {
-    .hero-video-container {
-      /* Extend beyond safe area on iOS to ensure coverage */
-      top: calc(-1 * env(safe-area-inset-top, 0));
-      height: calc(100vh + env(safe-area-inset-top, 0));
-    }
-
-    /* Support for dynamic viewport height */
-    @supports (height: 100dvh) {
-      .hero-video-container {
-        height: calc(100dvh + env(safe-area-inset-top, 0));
-      }
-    }
-
-    /* Support for large viewport height (iOS 15+) */
-    @supports (height: 100lvh) {
-      .hero-video-container {
-        height: calc(100lvh + env(safe-area-inset-top, 0));
-      }
-    }
-  }
-}
-
 /* Video fade-in transition to prevent flash */
 .hero-video {
   opacity: 0;