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)); top: calc(-1 * var(--hero-safe-area-top));
height: calc(100lvh + var(--hero-safe-area-top)); height: calc(100lvh + var(--hero-safe-area-top));
transform: translate3d(0, var(--parallax-offset, 0px), 0); transform: translate3d(0, var(--parallax-offset, 0px), 0);
z-index: -1; /* Behind content */ z-index: 0; /* Behind content */
pointer-events: none; pointer-events: none;
} }
@@ -501,9 +501,10 @@ html {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: var(--space-md);
text-align: center; text-align: center;
/* Apply safe area padding HERE to protect content from being obscured */ /* 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 { .trust-badge {

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

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