fix: resolve CSS specificity issue causing white safe areas on iOS Safari
All checks were successful
build-website / build (push) Successful in 1m47s

- 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
This commit is contained in:
Matt
2025-09-25 10:59:52 +02:00
parent d504adabf7
commit 1d8e9be567

View File

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