/* ═══════════════════════════════════════════════════════════════════════ hero-legibility-patch.css — maju.me Patch: Hero text contrast fix — Options 1 + 3 combined ─────────────────────────────────────────────────────────────────────── WHAT THIS FIXES The hero body paragraph was set to var(--mid) (#6B7280) and the "nobody glamourises" span to var(--subtle) (#9CA3AF). Both are insufficient against the light sketch backdrop image. CHANGES 1. Hero body text → var(--ink) (#1F2937). Full contrast, same warmth. 2. "nobody glamourises" span → var(--charcoal) (#374151). Readable, still visually lighter than the h1, preserving the weight hierarchy. 3. Hero backdrop gets a left-fade scrim so the text zone dissolves from warm ivory to transparent — the image stays fully visible on the right half where the glass card lives. LOAD ORDER Add this file as the LAST stylesheet in , after inline-classes.css: ZERO STRUCTURAL CHANGES — no HTML edits needed for the CSS rules. The only HTML edit is the one-line tag above. The main.js CONFIG edit (mask update) is a separate patch: see note below. ═══════════════════════════════════════════════════════════════════════ */ /* ── 1. Hero h1 subline — "nobody glamourises." ─────────────────────── Was: color: var(--subtle) → #9CA3AF on white = ~2.8:1 ✗ FAIL Now: color: var(--charcoal) → #374151 on white = ~8.5:1 ✓ PASS AAA The span is inline, so we target it via the h1's inline style context. The [style] attribute selector makes the rule specific enough to win without !important — but !important is safe here since this is a patch. */ .hero-copy h1 span[style*="subtle"], section h1 span[style*="var(--subtle)"] { color: var(--charcoal) !important; /* #374151 — still lighter than grad-heading */ font-weight: 300; /* keep the existing thin weight */ } /* Fallback: if the span has no [style] we can't target it safely from CSS. In that case apply the main.js CONFIG mask (Option 3) below — that alone is enough to solve the problem even without the colour change. To fully fix, also edit index.html line 497 (see bottom of this file). */ /* ── 2. Hero body paragraph ──────────────────────────────────────────── Was: color: var(--mid) → #6B7280 on canvas = ~4.5:1 marginal Now: color: var(--ink) → #1F2937 on canvas = ~12:1 ✓ PASS AAA Target: the

directly inside the hero space-y-4 container. The [style] selector catches the inline color that was set there. */ section .space-y-4 p[style*="var(--mid)"], section .space-y-4 p[style*="color: var(--mid)"] { color: var(--ink) !important; } /* Belt-and-suspenders: if the colour is set differently, catch by max-width */ section .max-w-2xl .space-y-4 > p { color: var(--ink) !important; } /* ── 3. Backdrop left scrim ──────────────────────────────────────────── A ::after pseudo on #hero-backdrop creates a gradient that wipes the image to near-canvas-colour on the left (text zone) while leaving the right side untouched (glass card zone). Why ::after and not maskImage? The JS in main.js already owns maskImage (it applies a vertical bottom- fade mask). We can't add a second mask-image here without overriding JS. Instead, a stacked ::after overlay achieves the same visual result and doesn't conflict with JS at all. Gradient breakdown: • 0–30% → rgba(250,247,240, 0.82) — near-opaque ivory (text zone) • 30–52% → smooth fade out • 52–100% → transparent (glass card zone, full image shows through) In dark mode the scrim darkens instead of lightening. */ #hero-backdrop { /* Required for ::after to position correctly */ position: absolute !important; /* already set, but confirm */ } #hero-backdrop::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; /* above the image, below the Three.js canvas */ /* Light mode: ivory left scrim */ background: linear-gradient( to right, rgba(250, 247, 240, 0.82) 0%, /* warm ivory — matches --canvas */ rgba(250, 247, 240, 0.60) 20%, rgba(250, 247, 240, 0.25) 40%, rgba(250, 247, 240, 0.00) 58% /* fully transparent right half */ ); } /* Dark mode: charcoal left scrim instead of ivory */ html[data-theme="dark"] #hero-backdrop::after { background: linear-gradient( to right, rgba(22, 20, 16, 0.88) 0%, /* matches dark --canvas #161410 */ rgba(22, 20, 16, 0.65) 20%, rgba(22, 20, 16, 0.28) 40%, rgba(22, 20, 16, 0.00) 58% ); } /* Mobile: full-width scrim because text stacks above the image on small screens */ @media (max-width: 767px) { #hero-backdrop::after { background: rgba(250, 247, 240, 0.78); /* flat overlay on mobile */ } html[data-theme="dark"] #hero-backdrop::after { background: rgba(22, 20, 16, 0.82); } } /* ═══════════════════════════════════════════════════════════════════════ REQUIRED HTML EDITS (index.html) ─────────────────────────────────────────────────────────────────────── These two inline style= overrides can't be reached from external CSS without !important hacks. Edit them directly: LINE 497 — "nobody glamourises." span BEFORE: nobody glamourises. AFTER: nobody glamourises. LINE 499–501 — hero body paragraph BEFORE:

AFTER:

── REQUIRED main.js CONFIG EDIT ──────────────────────────────────── In main.js, around line 19, update HERO_BACKDROP_MASK_LIGHT so the left-right fade is baked into the mask (as a belt-and-suspenders complement to the ::after overlay above). Replace: BEFORE: HERO_BACKDROP_MASK_LIGHT: 'linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 58%, rgba(0,0,0,0) 100%)', AFTER: HERO_BACKDROP_MASK_LIGHT: 'linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 58%, rgba(0,0,0,0) 100%)', (The ::after overlay handles the left-right scrim — no change to the JS mask needed. The vertical bottom-fade stays as-is.) ═══════════════════════════════════════════════════════════════════════ */