fix: finally resolve iOS safe area issue by removing body background
All checks were successful
build-website / build (push) Successful in 1m34s
All checks were successful
build-website / build (push) Successful in 1m34s
- Remove body background that was blocking video from showing in safe areas - Add main-content wrapper with white background for content sections - This allows video to extend into safe areas while keeping content readable - Root cause: body's white background was covering entire viewport including safe areas
This commit is contained in:
@@ -233,7 +233,8 @@ img {
|
|||||||
body {
|
body {
|
||||||
font-family: var(--font-sans);
|
font-family: var(--font-sans);
|
||||||
color: var(--text-dark);
|
color: var(--text-dark);
|
||||||
background: var(--bg-light); /* Body needs light background for content sections */
|
/* Background removed to allow video to extend into safe areas */
|
||||||
|
/* Content sections will have their own backgrounds */
|
||||||
max-width: 100vw !important;
|
max-width: 100vw !important;
|
||||||
position: relative;
|
position: relative;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
|
|||||||
@@ -3,6 +3,8 @@
|
|||||||
<!-- Hero Section with Video Background -->
|
<!-- Hero Section with Video Background -->
|
||||||
<HeroSection />
|
<HeroSection />
|
||||||
|
|
||||||
|
<!-- Main content wrapper with white background -->
|
||||||
|
<div class="main-content">
|
||||||
<!-- Welcome Section -->
|
<!-- Welcome Section -->
|
||||||
<WelcomeSection />
|
<WelcomeSection />
|
||||||
|
|
||||||
@@ -21,6 +23,7 @@
|
|||||||
<!-- Booking Section -->
|
<!-- Booking Section -->
|
||||||
<BookingSection />
|
<BookingSection />
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@@ -53,3 +56,11 @@ useHead({
|
|||||||
|
|
||||||
// Structured data temporarily disabled pending nuxt-seo-utils update
|
// Structured data temporarily disabled pending nuxt-seo-utils update
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.main-content {
|
||||||
|
background: #ffffff;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user