From 1d8e9be567be5bf70d5031de55eb905cddf8454b Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Thu, 25 Sep 2025 10:59:52 +0200
Subject: [PATCH] fix: resolve CSS specificity issue causing white safe areas
 on iOS Safari

- Remove white background override from body element (line 238)
- Ensure html and body maintain navy background (#001f3f)
- Simplify HTML element CSS to work properly on iOS
- Add !important to body background to prevent cascade issues
---
 apps/website/assets/css/voyage-layout.css | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/apps/website/assets/css/voyage-layout.css b/apps/website/assets/css/voyage-layout.css
index 427f46e..b328b67 100644
--- a/apps/website/assets/css/voyage-layout.css
+++ b/apps/website/assets/css/voyage-layout.css
@@ -106,21 +106,19 @@ html {
     /* Ensure full viewport coverage including safe areas */
     min-height: 100vh;
     min-height: -webkit-fill-available;
-    /* Extend background into safe areas */
-    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+    /* Simple approach for iOS Safari safe areas */
     margin: 0;
-    /* Negative margin to counter padding and extend background */
-    margin: calc(-1 * env(safe-area-inset-top)) calc(-1 * env(safe-area-inset-right)) calc(-1 * env(safe-area-inset-bottom)) calc(-1 * env(safe-area-inset-left));
+    padding: 0;
 }
 
 body {
-    /* Fallback background color for safe area coverage */
-    background-color: #001f3f;
+    /* Ensure navy background for safe area coverage */
+    background-color: #001f3f !important; /* Force navy background */
     min-height: 100vh;
     min-height: -webkit-fill-available;
     /* Critical: Don't add padding that would push content down */
-    padding-top: 0;
-    margin-top: 0;
+    padding: 0;
+    margin: 0;
 }
 
 /* Ensure Nuxt app container is transparent */
@@ -235,7 +233,8 @@ img {
 body {
     font-family: var(--font-sans);
     color: var(--text-dark);
-    background: var(--bg-light);
+    /* Removed white background that was overriding navy */
+    /* background: var(--bg-light); -- REMOVED to maintain navy background */
     max-width: 100vw !important;
     position: relative;
     line-height: 1.6;