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

Recenter hero content and keep video behind notch
All checks were successful
build-website / build (push) Successful in 1m41s
Details

Browse Source
This commit is contained in:
matt
2025-09-21 15:13:06 +02:00
parent 5055612614
commit 81a8c6cf4b
2 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -453,7 +453,7 @@ html {
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 */
z-index: 0; /* Behind content */
pointer-events: none;
}
@@ -501,9 +501,10 @@ html {
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--space-md);
text-align: center;
/* Apply safe area padding HERE to protect content from being obscured */
padding: max(var(--safe-area-cover-top), var(--space-md)) var(--space-md) max(var(--safe-area-bottom), var(--space-md));
padding: calc(max(var(--safe-area-cover-top), var(--space-lg))) var(--space-md) calc(max(var(--safe-area-bottom), var(--space-lg)) + var(--space-sm));
}
.trust-badge {

15
apps/website/components/HeroSection.vue
View File

@@ -206,11 +206,10 @@ onMounted(() => {
}
/* Scroll to explore indicator */
.scroll-to-explore {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
margin-top: auto;
margin-bottom: var(--space-md);
display: flex;
flex-direction: column;
align-items: center;
@@ -224,7 +223,7 @@ onMounted(() => {
.scroll-to-explore:hover {
opacity: 1;
transform: translateX(-50%) translateY(-3px);
transform: translateY(-3px);
}
.scroll-to-explore span {
@@ -242,13 +241,13 @@ onMounted(() => {
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateX(-50%) translateY(0);
transform: translateY(0);
}
40% {
transform: translateX(-50%) translateY(-10px);
transform: translateY(-10px);
}
60% {
transform: translateX(-50%) translateY(-5px);
transform: translateY(-5px);
}
}