matt/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: iOS hero video extends under notch with safe area support
All checks were successful
build-website / build (push) Successful in 1m36s
Details

Browse Source 
- 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.
This commit is contained in:
matt
2025-09-21 13:14:22 +02:00
parent 3b921f4609
commit b97be94e2f
1 changed files with 22 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
apps/website/assets/css/voyage-layout.css
View File

@@ -225,14 +225,14 @@ html {
background: rgba(255, 255, 255, 0); background: rgba(255, 255, 255, 0);
backdrop-filter: blur(0); backdrop-filter: blur(0);
transition: var(--transition-slow); 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 { .voyage-nav.scrolled {
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); 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 { .nav-container {
@@ -1686,18 +1686,31 @@ html {
min-height: 100vh; min-height: 100vh;
min-height: -webkit-fill-available; min-height: -webkit-fill-available;
min-height: 100dvh; min-height: 100dvh;
/* Extend into safe areas */ /* Video will extend under notch - no padding-top here */
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
overflow-x: hidden !important; overflow-x: hidden !important;
max-width: 100vw !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 { .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: clamp(1rem, 4vw, 2rem);
padding-top: max(env(safe-area-inset-top), 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), clamp(1rem, 4vw, 2rem)); 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; overflow-x: hidden;
width: 100%; width: 100%;
display: flex; display: flex;
@@ -1707,6 +1720,8 @@ html {
min-height: 100vh; min-height: 100vh;
min-height: -webkit-fill-available; min-height: -webkit-fill-available;
min-height: 100dvh; min-height: 100dvh;
position: relative;
z-index: 10; /* Ensure content is above video */
} }
/* Responsive logo */ /* Responsive logo */