/* ============================================================================ sd-tailwind-shim.css — the ONLY parts of Tailwind Preflight this site uses. WHY THIS FILE EXISTS `hero.html` loaded the Tailwind Play CDN (v3.4.17): 123,264 B gzipped, 407,279 B uncompressed, 51.1% of total page weight, render-blocking in , and a full CSS *compiler* running in the browser on every page view. But hero.html uses essentially ZERO Tailwind utility classes — measured: one match, and that was `grid-rd`, a custom class. The CDN was there purely for Preflight (Tailwind's base reset). Two earlier removal attempts were rolled back because deleting the script silently removed reset rules the opus CSS had come to rely on: SVG icons expanded to fill their cards, and the `#filters` panel stopped hiding. WHAT IS AND ISN'T NEEDED `mockups/opus/tokens.css:62` already declares * { box-sizing: border-box; margin: 0; padding: 0; } which covers the largest and most dangerous chunk of Preflight (box model, heading/paragraph margins, list padding). Only the rules below are missing, and each one is here because something on this site breaks without it. Keep this file boring. It is a compatibility shim, not a design system — design tokens belong in tokens.css / sd-tokens.css. ============================================================================ */ /* --------------------------------------------------------------------------- 1. Replaced-element sizing. THE ONE THAT BROKE THE LAYOUT TWICE. Preflight makes media block-level and intrinsically constrained. Without it, inline SVGs fall back to their viewBox aspect ratio at full width and the ridge bars / weather icons blow out of their cards. --------------------------------------------------------------------------- */ img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } /* --------------------------------------------------------------------------- 2. [hidden] must actually hide. THE OTHER ONE THAT BROKE. The filter panel and several sheets toggle visibility with the `hidden` attribute. The HTML spec's default is `display: none`, but ANY author-level `display` rule on the same element beats a UA default — and the opus layout sets `display: grid` / `display: flex` on those very panels. Tailwind ships this as an author-level rule, which is why it worked. Same specificity here, plus !important so a later layout rule cannot silently re-reveal a panel. --------------------------------------------------------------------------- */ [hidden] { display: none !important; } /* --------------------------------------------------------------------------- 3. Lists. `*` above zeroes padding, but not list markers. Nav lists, facility lists and room lists would otherwise sprout bullets. --------------------------------------------------------------------------- */ ol, ul, menu { list-style: none; } /* --------------------------------------------------------------------------- 4. Form controls do not inherit typography by default in any browser. Without this the airport picker, origin select and filter buttons render in the UA's default font instead of Inter, which reads as a broken control. --------------------------------------------------------------------------- */ button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; background-color: transparent; background-image: none; } button, select { text-transform: none; } /* --------------------------------------------------------------------------- 5. Tables — the score-breakdown and timeline views assume collapsed borders. --------------------------------------------------------------------------- */ table { text-indent: 0; border-color: inherit; border-collapse: collapse; } /* --------------------------------------------------------------------------- 6. Small carry-overs that are cheap and prevent surprises. --------------------------------------------------------------------------- */ hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { text-decoration: underline dotted; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } ::placeholder { opacity: 1; color: #9ca3af; } textarea { resize: vertical; } [role="button"], button { cursor: pointer; } :disabled { cursor: default; }