/* ============================================================================================ legibility_fix.css -- James (2026-07-10): "any references showing the Maui map underneath it not just a black when we use our overlays ... fix all the black text box on the website ... make sure all of the text is plainly legible, fix all styles that are competing with that." DROP-IN: include this LAST in the served (after every other stylesheet) so it wins the cascade and neutralizes competing rules. Scoped to the classes below; safe + reversible. ============================================================================================ */ :root{ --leg-ink:#f3efe4; /* legible light text on dark */ --leg-ink-dim:#cfc7b4; --leg-panel:rgba(18,22,28,.72); /* translucent panel, NOT opaque black */ --leg-panel-solid:rgba(24,28,34,.9); --leg-edge:rgba(255,255,255,.14); } /* 1) THE MAP MUST SHOW THROUGH OVERLAYS ----------------------------------------------------- Any overlay over the Maui map (or any map/photo) uses a translucent GRADIENT, never solid black, so the reference underneath stays visible. Map sits at z0; overlay at z1 with low alpha. */ .map, .map-layer, .maui-map, [data-layer="map"]{ position:relative; z-index:0; filter:none !important; } .overlay, .map-overlay, .scrim, .veil, [data-layer="overlay"]{ background:linear-gradient(rgba(8,12,18,.30), rgba(8,12,18,.55)) !important; /* was solid black */ -webkit-backdrop-filter:none; backdrop-filter:none; z-index:1; pointer-events:none; } /* if an overlay carries text, keep the text readable without hiding the map: a soft local shadow */ .overlay *, .map-overlay *{ text-shadow:0 1px 3px rgba(0,0,0,.75); color:var(--leg-ink) !important; } /* 2) NO MORE BLACK-ON-BLACK TEXT BOXES ------------------------------------------------------ Convert opaque black boxes to translucent panels with LIGHT, legible text. Covers the common class names in the app + a hard guard against pure-black backgrounds anywhere. */ .textbox, .text-box, .card, .panel, .box, .tile, .note, .callout, .info, .cell, .civic-card, .tenant-card, .ref, .reference, .quote, .stat, .kpi{ background:var(--leg-panel) !important; color:var(--leg-ink) !important; border:1px solid var(--leg-edge); border-radius:10px; } /* hard guard: elements that were set to a black (or near-black) background get legible light text */ [style*="background:#000"], [style*="background: #000"], [style*="background-color:#000"], [style*="background:black"], [style*="background: black"], .bg-black, .black-box{ color:var(--leg-ink) !important; } /* and never let text be black on those dark surfaces */ [style*="background:#000"] *, [style*="background:black"] *, .bg-black *, .black-box *{ color:var(--leg-ink) !important; } /* 3) LEGIBILITY BASELINE + END THE COMPETING STYLES ----------------------------------------- A floor for contrast. Body text light on the dark ground; links clearly distinct; kill the invisible-text failure mode where a stylesheet set color:#000 on a dark section. */ body{ color:var(--leg-ink); } p, li, td, th, span, label, dd, dt, small{ color:inherit; } h1,h2,h3,h4,h5{ color:#f7f1df; } a{ color:#e6c766; text-decoration-color:rgba(230,199,102,.5); } a:hover{ color:#f4dc8a; } /* common competing utility classes that force dark text on dark backgrounds -> make them legible */ .text-dark, .text-black, .muted-dark{ color:var(--leg-ink-dim) !important; } /* inputs/buttons often inherit black-on-dark; keep them readable */ input, textarea, select{ color:#12161c; background:#f4efe2; } button{ color:#f3efe4; } /* 4) A SMALL, CALM DEFAULT for any bare dark section so nothing is a black void with hidden text */ section, .section, .surface{ color:var(--leg-ink); }