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

Clamp nav safe area and fix hero video offsets
All checks were successful
build-website / build (push) Successful in 1m36s
Details

Browse Source
This commit is contained in:
matt
2025-09-21 15:04:42 +02:00
parent 07eaf316a0
commit 5055612614
3 changed files with 121 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -37,7 +37,8 @@
/* Safe area helpers */
--safe-area-top: env(safe-area-inset-top, 0px);
--safe-area-bottom: env(safe-area-inset-bottom, 0px);
--initial-safe-area-top: env(safe-area-inset-top, 0px);
--initial-safe-area-top: 0px;
--safe-area-cover-top: max(var(--safe-area-top), var(--initial-safe-area-top));
}
@@ -228,17 +229,16 @@ html {
background: rgba(255, 255, 255, 0);
backdrop-filter: blur(0);
transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
--nav-safe-area-top: var(--safe-area-top);
--nav-padding-top: calc(var(--space-md) + var(--nav-safe-area-top));
--nav-padding-bottom: var(--space-md);
padding: var(--nav-padding-top) 0 var(--nav-padding-bottom) 0;
--nav-safe-area-top: var(--safe-area-cover-top);
--nav-padding-top-base: var(--space-md);
--nav-padding-bottom-base: var(--space-md);
padding: calc(var(--nav-padding-top-base) + var(--nav-safe-area-top)) 0 var(--nav-padding-bottom-base) 0;
}
@supports (top: constant(safe-area-inset-top)) {
:root {
--safe-area-top: constant(safe-area-inset-top);
--safe-area-bottom: constant(safe-area-inset-bottom);
--initial-safe-area-top: constant(safe-area-inset-top);
}
}
@@ -246,16 +246,15 @@ html {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
--nav-safe-area-top: var(--initial-safe-area-top);
--nav-padding-top: calc(var(--space-sm) + var(--nav-safe-area-top));
--nav-padding-bottom: var(--space-sm);
padding: var(--nav-padding-top) 0 var(--nav-padding-bottom) 0;
--nav-padding-top-base: var(--space-sm);
--nav-padding-bottom-base: var(--space-sm);
}
@media (max-width: 768px) {
.voyage-nav {
--nav-padding-top: calc(var(--space-sm) + var(--nav-safe-area-top));
--nav-padding-bottom: var(--space-sm);
.voyage-nav,
.voyage-nav.scrolled {
--nav-padding-top-base: var(--space-sm);
--nav-padding-bottom-base: var(--space-sm);
}
}
@@ -448,17 +447,20 @@ html {
.hero-video-container {
position: fixed;
inset: 0;
height: calc(100lvh + var(--safe-area-top));
transform: translateY(calc(-1 * var(--safe-area-top)));
z-index: 0; /* Behind content but above page background */
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));
transform: translate3d(0, var(--parallax-offset, 0px), 0);
z-index: -1; /* Behind content */
pointer-events: none;
}
/* Fallback for browsers without lvh support */
@supports not (height: 100lvh) {
.hero-video-container {
height: calc(100vh + var(--safe-area-top));
height: calc(100vh + var(--hero-safe-area-top));
}
}
@@ -501,7 +503,7 @@ html {
align-items: center;
text-align: center;
/* Apply safe area padding HERE to protect content from being obscured */
padding: max(env(safe-area-inset-top), var(--space-md)) var(--space-md) max(env(safe-area-inset-bottom), var(--space-md));
padding: max(var(--safe-area-cover-top), var(--space-md)) var(--space-md) max(var(--safe-area-bottom), var(--space-md));
}
.trust-badge {