From 9e8b7b3075d86998c143585cb63885fe70b4feb1 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Thu, 25 Sep 2025 11:55:17 +0200
Subject: [PATCH] fix: restore proper CSS hierarchy for iOS Safari safe areas

- Remove forced navy background from body element
- Restore white background for body to fix content sections
- Fix hero content padding to allow extension into safe areas
- Remove padding-top additions that pushed content away from safe areas

This fixes the regression where blue background showed through during scrolling
and allows content to properly extend into iOS Safari safe areas.
---
 apps/website/assets/css/voyage-layout.css | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/apps/website/assets/css/voyage-layout.css b/apps/website/assets/css/voyage-layout.css
index b328b67..847557a 100644
--- a/apps/website/assets/css/voyage-layout.css
+++ b/apps/website/assets/css/voyage-layout.css
@@ -112,8 +112,8 @@ html {
 }
 
 body {
-    /* Ensure navy background for safe area coverage */
-    background-color: #001f3f !important; /* Force navy background */
+    /* Body should have light background for content sections */
+    /* Safe area coverage is handled by HTML element */
     min-height: 100vh;
     min-height: -webkit-fill-available;
     /* Critical: Don't add padding that would push content down */
@@ -233,8 +233,7 @@ img {
 body {
     font-family: var(--font-sans);
     color: var(--text-dark);
-    /* Removed white background that was overriding navy */
-    /* background: var(--bg-light); -- REMOVED to maintain navy background */
+    background: var(--bg-light); /* Body needs light background for content sections */
     max-width: 100vw !important;
     position: relative;
     line-height: 1.6;
@@ -537,8 +536,8 @@ html {
 /* iOS-specific padding for hero content */
 @supports (-webkit-touch-callout: none) {
     .hero-content {
-        /* Use larger fallback for Dynamic Island devices */
-        padding-top: calc(max(constant(safe-area-inset-top), env(safe-area-inset-top), 59px) + clamp(2rem, 8vh, 5rem));
+        /* Allow content to extend into safe area, don't push it down */
+        padding-top: clamp(2rem, 8vh, 5rem); /* Normal padding only, no safe area addition */
     }
 }
 
@@ -1812,9 +1811,9 @@ html {
     }
 
     .hero-content {
-        /* Adjust padding to account for safe areas on all sides */
+        /* Adjust padding to allow content into safe areas */
         padding: clamp(1rem, 4vw, 2rem);
-        padding-top: max(env(safe-area-max-inset-top, env(safe-area-inset-top, 0)), clamp(2rem, 4vw, 3rem));
+        padding-top: clamp(2rem, 4vw, 3rem); /* Normal padding without safe area addition */
         padding-bottom: max(env(safe-area-max-inset-bottom, env(safe-area-inset-bottom, 0)), clamp(1rem, 4vw, 2rem));
         padding-left: max(env(safe-area-inset-left, 0), clamp(1rem, 3vw, 2rem));
         padding-right: max(env(safe-area-inset-right, 0), clamp(1rem, 3vw, 2rem));