/** * Base reset — the source (Design Refrance) uses a single rule: * *{margin:0;padding:0;box-sizing:border-box} * on every page. Kept as the foundation below, extended with a small set of * standard modern-reset rules (images, lists, form elements, anchors) that * the source pages don't need to restate per-file since WordPress core * already outputs semantic markup these rules apply cleanly to. * * Do not add component-specific overrides here — this file only resets * browser defaults, nothing else. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased; } img, picture, video, canvas, svg { display: block; max-width: 100%; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } /** * Design Refrance never sets a line-height on body (browser default * "normal", ~1.15), so its form controls' fixed padding produces a * 35–44px control height. This theme's body sets a much taller * line-height for paragraph readability, and without a reset that value * was inherited into every input/select/textarea/button too — confirmed * via computed-style comparison showing the header search box at 46px * instead of the reference's 35px, and Contact form inputs at 50.5px * instead of 44px. * * A plain `button, input, select, textarea { line-height: normal }` rule * here isn't enough: style.css's own boilerplate has * `body, button, input, select, optgroup, textarea { line-height: 1.5; }` * at the SAME specificity (0,0,1 per type selector) and loads after this * file, so it would win the tie by source order alone. The extra `html` * ancestor below raises this rule's specificity to (0,0,2), guaranteeing * it wins regardless of enqueue order. Components that need a specific * line-height (e.g. .ct-form textarea's 1.6) still win via their own * higher specificity. */ html button, html input, html select, html textarea { line-height: normal; } button { background: none; border: none; cursor: pointer; } /** * Mobile horizontal-overflow safety net — every Design Refrance page's own * mobile media query includes this exact rule (`html,body{overflow-x:hidden}` * at max-width:768px). It's not decorative: CSS Grid's `1fr` tracks don't * shrink below their content's min-content width by default (no implicit * `minmax(0,1fr)`), so a grid of unevenly-sized cards (e.g. a 3-up stat * band, a 2-up value/feature grid) can compute a total width a few px * wider than the viewport at narrow widths — confirmed directly against * the reference file itself (Design Refrance/TSI About.html), which has * this exact same sub-pixel grid overflow at 320px but never shows it, * because this rule clips it. Sitewide, not page-specific — any card grid * on any page can hit the same CSS Grid behavior, not just the About page. */ @media (max-width: 768px) { html, body { overflow-x: hidden; } } /** * style.css still contains the original "_s" scaffold's boilerplate * `.post, .page { margin: 0 0 1.5em; }` — harmless on its own, but * WordPress's body_class() puts the literal class `page` on for * every Page template, so that rule unintentionally gives itself a * 24px bottom margin on every single WordPress Page on the site. With no * border/padding on , that margin isn't contained — it shows up as * empty page-background space below the footer (confirmed: none of * Design Refrance's pages have this gap). Same class of bug as the h1 * margin fix in content-hero.css — leftover boilerplate winning by * specificity because nothing more specific zeroed it first. */ body.page { margin-bottom: 0; }