/* * Hand-written overrides for legacy page bodies inside the 2026 shell. * * legacy-content.css and legacy-reset.css are GENERATED from the legacy theme by * src/tools/legacy-css-split.php and get overwritten on every run. Anything hand-authored * belongs here instead. * * Scope rules to .legacy-content unless they are genuinely page-level. This file only loads on * pages using the legacy template, so an unscoped selector is still confined to those pages -- * but within a page it reaches the 2026 header and footer too, so use it deliberately. */ /* Legacy bodies overflow the viewport on purpose: several decorations are absolutely positioned past the right edge, and the legacy theme clipped them at the root. This has to stay on rather than move to the content wrapper -- on the wrapper it creates a block formatting context and a nested scrollbar, which shifts the page down 73px and narrows every child by ~13px. Safe globally here because the 2026 header is position:relative, so there is no sticky or fixed positioning for root overflow to break. */ html { overflow-x: hidden; } /* theme.css sets *{box-sizing:border-box} for the whole site, but legacy content predates that and is authored against the browser default. The legacy theme opts individual components into border-box instead -- 54 times, deliberately. Left on border-box, any legacy rule combining a percentage width with padding loses exactly its padding in width: .block-content__left is width:50% plus padding-left:13px, and rendered 13px narrower with its neighbour pushed over. :where() keeps this at zero specificity, the same as the * it is countering. A plain .legacy-content * would score (0,1,0) and beat the legacy theme's own deliberate border-box rules, which is the opposite of what we want. */ :where(.legacy-content), :where(.legacy-content) *, :where(.legacy-content) *::before, :where(.legacy-content) *::after { box-sizing: content-box; } /* theme.css styles bare headings for the 2026 design -- h1-h4 get the navy and a -.01em tracking, and h2 additionally gets 32px/1.22. Legacy bodies bring their own heading typography and only expect the browser defaults underneath, so those opinions have to stop at the wrapper. The tracking is not cosmetic: at 54px it pulled a heading from three lines to two and moved everything below it up by 60px. Margin and font-weight are already handled -- legacy-reset.css restores those and loads after theme.css. Only what the reset does not speak to is repeated here. */ :where(.legacy-content) :is(h1, h2, h3, h4, h5, h6) { color: inherit; letter-spacing: normal; } :where(.legacy-content) h2 { font-size: 1.5em; /* the browser default theme.css overrides */ line-height: normal; } /* The legacy header was position:fixed, so legacy bodies expect to start under it and open with their own full-bleed hero. The 2026 header is in normal flow, so that offset is gone (the tool drops main{margin-top:71.5px}) and the body can sit flush against the header. */ .legacy-content { margin: 0; }