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

@@ -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));