/* Lifeline — the styles that survive a bad night. * * Almost every class in this app comes from the Tailwind CDN, which is a script. * If that script is blocked, throttled to death, or fails its integrity check, * the browser is left with unstyled markup — and, worse, without Tailwind's * `.hidden` rule the resource modal and the mobile menu render *open*, on top of * the page. Somebody looking for a food pantry would see a wall of overlapping * text. * * So: `js/tailwind-config.js` removes `.no-tw` from once the CDN has * loaded. Everything scoped under `.no-tw` below is therefore the no-Tailwind * path only, and never fights the real stylesheet. The unscoped rules at the top * (skip link, no-JS panel) are wanted in every case. */ /* ---------------- Always on ---------------- */ /* Keyboard users shouldn't have to tab through the whole header to reach help. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 0.75rem 1.25rem; background: #227560; color: #fff; font-weight: 700; border-radius: 0 0 0.5rem 0; text-decoration: none; } .skip-link:focus { left: 0; } /* Visible focus ring everywhere. Tailwind's reset removes the default outline on some elements and the app never adds one back. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid #f97316; outline-offset: 2px; border-radius: 4px; } /* The no-JavaScript panel. This is the whole app for anyone with scripting off, on a text browser, or behind a proxy that strips modules — so it carries the crisis numbers and the largest national programs as plain links, and it is styled here rather than by Tailwind, which is itself a script. */ #no-js { max-width: 42rem; margin: 2rem auto; padding: 1.5rem; border: 1px solid #d9f0e8; border-radius: 1rem; background: #fff; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; color: #1e293b; line-height: 1.55; } #no-js h2 { font-size: 1.25rem; font-weight: 800; color: #1d5e4f; margin: 0 0 0.5rem; } #no-js h3 { font-size: 1rem; font-weight: 700; color: #1d5e4f; margin: 1.25rem 0 0.4rem; } #no-js p { margin: 0 0 0.75rem; } #no-js ul { margin: 0 0 0.75rem; padding-left: 1.15rem; } #no-js li { margin: 0.3rem 0; } #no-js a { color: #227560; font-weight: 600; } #no-js .urgent { margin: 0 0 1rem; padding: 0.85rem 1rem; border-radius: 0.75rem; background: #fff7ed; border: 1px solid #fed7aa; font-weight: 600; color: #7c2d12; } /* ---------------- Only when Tailwind failed to load ---------------- */ /* The two utilities the app drives from JavaScript. Without these the modal and the mobile menu are stuck open; with them the app is still navigable. */ .no-tw .hidden { display: none; } .no-tw .flex { display: flex; } .no-tw body { margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.55; color: #1e293b; background: #faf8f4; } .no-tw header, .no-tw footer { padding: 0.75rem 1rem; border-bottom: 1px solid #d9f0e8; background: #fff; } .no-tw footer { border-bottom: 0; border-top: 1px solid #d9f0e8; margin-top: 2rem; } .no-tw main { max-width: 60rem; margin: 0 auto; padding: 1rem; } .no-tw h1 { font-size: 1.6rem; } .no-tw h2 { font-size: 1.3rem; } .no-tw h3 { font-size: 1.1rem; } .no-tw a { color: #227560; } .no-tw button { font: inherit; padding: 0.5rem 0.9rem; margin: 0.15rem; border: 1px solid #d9f0e8; border-radius: 0.5rem; background: #fff; color: #1d5e4f; cursor: pointer; } .no-tw #quick-exit { background: #dc2626; color: #fff; border-color: #dc2626; font-weight: 700; } /* The hero is the one place where the two stylesheets disagree badly. Its dark gradient lives in css/app.css, which always loads, but the white text that goes on top of it is a Tailwind class, which here does not — leaving the headline nearly invisible. Drop the gradient rather than guess at every text colour inside it, and the default dark-on-light text is legible again. */ .no-tw .hero-mesh { background: #f0f9f6; border: 1px solid #d9f0e8; border-radius: 1rem; animation: none; } .no-tw .hero-mesh::before, .no-tw .hero-blob { display: none; } /* Un-fix the safety bar: without Tailwind's layout it would sit over content. */ .no-tw .fixed { position: static; } /* Icons are drawn by lucide into these placeholders; empty ones add nothing. */ .no-tw i[data-lucide] { display: none; }