diff --git a/apps/website/assets/css/voyage-layout.css b/apps/website/assets/css/voyage-layout.css index b6ebb10..0b51e87 100644 --- a/apps/website/assets/css/voyage-layout.css +++ b/apps/website/assets/css/voyage-layout.css @@ -399,31 +399,27 @@ html { .hero-voyage { position: relative; height: 100vh; /* Fallback for browsers that don't support newer units */ - height: -webkit-fill-available; /* iOS Safari */ + height: -webkit-fill-available; /* iOS Safari - fills available space */ height: 100dvh; /* Dynamic viewport height */ - min-height: 100vh; - min-height: -webkit-fill-available; - min-height: 100dvh; overflow: hidden; overscroll-behavior-y: none; -webkit-overflow-scrolling: touch; overflow-x: hidden !important; max-width: 100vw !important; contain: layout; - /* Extend into safe areas on iOS */ - padding-top: env(safe-area-inset-top); - padding-bottom: env(safe-area-inset-bottom); + /* NO padding here - let container fill entire viewport */ + /* Safe areas will be applied to content only */ } .hero-video-container { position: absolute; - /* Extend beyond safe areas */ - top: calc(-1 * env(safe-area-inset-top)); + /* Simple positioning - fill entire parent container */ + top: 0; left: 0; right: 0; - bottom: calc(-1 * env(safe-area-inset-bottom)); + bottom: 0; width: 100%; - height: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom)); + height: 100%; overflow: hidden; z-index: 1; } @@ -460,14 +456,14 @@ html { position: relative; z-index: 10; height: 100%; - object-fit: cover; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; - padding: var(--space-md); + /* 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)); } .trust-badge {