HEADER — YELLOW (z-50)

🔬 Tour Atmosphere — Layer Diagnosis

Computed Values (tick=0)

data-home-mode: NOT SET

body computed bg: rgb(255, 255, 255)

html computed bg: rgba(0, 0, 0, 0)

Color Key

body (RED) — deepest layer

Layout shell (GREEN) — middle

Home content (BLUE) — topmost area

Header (YELLOW) — fixed z-50

Bottom nav (FUCHSIA) — fixed z-50

What You Should See

✅ YELLOW bar at top = header is visible
✅ FUCHSIA bar at bottom = nav is visible
✅ BLUE area in center = content is rendering
✅ Thin GREEN strips = Layout shell visible around edges
❌ BLACK anywhere = opaque layer covering others
❌ RED visible = body showing through gaps

Layer Stack Analysis

STACK (back to front):
─────────────────────────────
1. <html>  — bg from index.css (:root)
2. <body>  — bg from globals.css (bg-background + inline #0a0a0f)
3. <div id="root">  — no bg
4. AuthProvider → QueryClientProvider → Router
5. AuthenticatedApp → Routes
6. LayoutWrapper → Layout → LayoutContent
7. LayoutContent root <div> — bg-[#0a0a0f] (Quest) or bg-[#e8f1f5] (Tour)
   └─ .nautical-texture::before — SVG overlay (z:0, opacity:0.08)
   └─ <style> tag: body { background: #0a0a0f }
8. <header> — fixed, z-50, bg-[#0a0a0f]/90
9. <main> — Home page content (transparent)
10. <nav> — fixed, z-50, bg-[#0d0d14]/95

POTENTIAL OPACITY BLOCKERS:
• globals.css body rule: background-color: #0a0a0f (HARDCODED)
• globals.css .dark class on LayoutContent root div
• index.css :root --background variable
• LayoutContent <style> tag overrides body inline

IN TOUR MODE, Layout changes:
• LayoutContent root div → bg-[#e8f1f5] ✅
• <style> body bg → #e8f1f5 ✅
• header → bg-white/85 ✅
• nav → bg-white/90 ✅
• nautical-texture::before → hidden by CSS rule ✅

SUSPECTED ISSUE:
The globals.css has: body { background-color: #0a0a0f; }
This is in @layer base, which may compete with the
inline <style> tag. The !important was missing.
FIXED: now using !important in the <style> tag.

BOTTOM NAV — FUCHSIA (z-50)