@custom-variant dark (&:is(.dark *)); :root { --background: #fafafa; --foreground: #09090b; --card: #ffffff; --card-foreground: #09090b; --popover: #ffffff; --popover-foreground: #09090b; /* Safety Orange for High Urgency */ --primary: #c2410c; --primary-foreground: #ffffff; /* Dark Zinc for contrast sections */ --secondary: #18181b; --secondary-foreground: #fafafa; --muted: #f4f4f5; --muted-foreground: #5f5f68; --accent: #fff7ed; --accent-foreground: #9a3412; --destructive: #dc2626; --destructive-foreground: #ffffff; --border: #e4e4e7; --input: #e4e4e7; --ring: #c2410c; --radius: 0px; /* Brutalist/sharp edges */ /* Orange text on the dark zinc/black sections. --primary is tuned for white * text sitting on it and for orange text on the light surfaces (5.18:1 and * 4.71:1); on #18181b it drops to 3.42:1, so dark sections get a lighter * orange instead. #f97316 is 6.32:1 on #18181b and 7.49:1 on #000. */ --primary-on-dark: #f97316; } /* Category / FAQ chips pair text-primary with a 20% primary tint. On light * pages that tint resolves to ~#efd5ca and the ratio falls to 3.7, so the chip * text drops to the darker accent tone (5.23:1). Declared before the dark * override below so that dark sections still win — both are (0,2,0). */ .bg-primary\/20.text-primary { color: var(--accent-foreground); } /* text-zinc-400 is the site's muted tone on the dark sections (6.91:1 on * #18181b). A handful of light-background blocks use it too, where #a1a1aa is * only 2.51:1 — so it defaults to the muted foreground and is restored to the * light zinc only inside a dark container. */ .text-zinc-400 { color: var(--muted-foreground); } .bg-black .text-zinc-400, .bg-secondary .text-zinc-400, .bg-zinc-800 .text-zinc-400, .bg-zinc-900 .text-zinc-400, .bg-zinc-950 .text-zinc-400, footer .text-zinc-400 { color: #a1a1aa; } /* Dark-section override for orange text. Two class levels of specificity beats * Tailwind's own .text-primary, and unlayered rules beat @layer utilities. */ .bg-black .text-primary, .bg-secondary .text-primary, .bg-zinc-800 .text-primary, .bg-zinc-900 .text-primary, .bg-zinc-950 .text-primary, footer .text-primary { color: var(--primary-on-dark); } .bg-black .hover\:text-primary:hover, .bg-secondary .hover\:text-primary:hover, .bg-zinc-800 .hover\:text-primary:hover, .bg-zinc-900 .hover\:text-primary:hover, .bg-zinc-950 .hover\:text-primary:hover, footer .hover\:text-primary:hover, .bg-black .group:hover .group-hover\:text-primary, .bg-secondary .group:hover .group-hover\:text-primary, .bg-zinc-800 .group:hover .group-hover\:text-primary, .bg-zinc-900 .group:hover .group-hover\:text-primary, .bg-zinc-950 .group:hover .group-hover\:text-primary, .group.bg-zinc-900:hover .group-hover\:text-primary, footer .group:hover .group-hover\:text-primary { color: var(--primary-on-dark); } @layer base { /* ROADMAP-230: mobile safety net. `overflow-x: clip` blocks horizontal * scroll from any element that escapes the viewport without breaking * `position: sticky`. Both html and body covered for Safari < 16. */ html, body { overflow-x: clip; } h1, h2, h3, h4, h5, h6, p, span, a, li { overflow-wrap: anywhere; word-wrap: break-word; } body { background-color: var(--background); color: var(--foreground); } .grayscale-map { filter: grayscale(100%) contrast(120%) invert(90%) hue-rotate(180deg); } } /* --------------------------------------------------------------------------- * Accessibility and layout-stability rules. These live outside @layer base so * they apply even before the Tailwind runtime finishes compiling, which is * what keeps the skip link and focus rings usable on first paint. * ------------------------------------------------------------------------- */ /* Skip link: clipped to a 1px box until focused, then pinned top-left. Every * page also inlines this rule in so the link can never paint in-flow * while this file is still loading (or is served from a stale cache). Keep the * two copies in sync. `clip` beats the old left:-9999px trick because an * offscreen box can still widen the page on some mobile browsers. */ .skip-link { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed !important; top: 0.5rem; left: 0.5rem; width: auto; height: auto; margin: 0; padding: 0.75rem 1.25rem; overflow: visible; clip: auto; clip-path: none; z-index: 200; background: var(--primary); color: var(--primary-foreground); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8125rem; text-decoration: none; outline: 3px solid #000; outline-offset: 2px; } /* Visible focus state for every interactive element. The brutalist theme sets * focus:outline-none on several controls, so this restores a keyboard-visible * ring without changing the mouse-driven look. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; } /* Images: reserve intrinsic aspect ratio so the width/height attributes * actually prevent layout shift when Tailwind's utilities load late. */ img { max-width: 100%; height: auto; } img[class*="h-full"], img[class*="h-["] { height: 100%; } /* Responsive, accessible data tables used by the comparison / checklist * assets on service, location and article pages. */ .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 2px solid var(--foreground); background: var(--card); } .data-table-wrap:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; } .data-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.9375rem; } .data-table caption { caption-side: top; padding: 0.875rem 1rem; text-align: left; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); border-bottom: 2px solid var(--border); } .data-table th, .data-table td { padding: 0.75rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); } .data-table thead th { background: var(--secondary); color: var(--secondary-foreground); font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; } .data-table tbody th { font-weight: 700; color: var(--foreground); background: var(--muted); } .data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; } /* Definition block used for AEO-friendly 25–40 word answers. */ .definition-block { border-left: 6px solid var(--primary); background: var(--accent); color: var(--accent-foreground); padding: 1.25rem 1.5rem; font-weight: 500; } .definition-block > .definition-label { display: block; font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.375rem; color: var(--primary); } /* Respect users who ask for less motion: the theme uses pulse/ping accents. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }