/* =========================================================================== lg.* — the new component layer --------------------------------------------------------------------------- WHAT THIS IS A second, independent CSS layer that sits ON TOP of a.css without being part of it. a.css is 3,300 lines of unprefixed, unscoped selectors (.container, .panel, .button, .content) accumulated over years; every new rule added to it has to be checked against everything already there. This layer does not touch it and does not extend it. THE RULES OF THE LAYER 1. Every class starts "lg-". That matches the --lg- custom properties in tokens.css and, more importantly, guarantees no collision with a.css, which prefixes nothing. 2. BEM: .lg-block, .lg-block__element, .lg-block--modifier. Two underscores and two hyphens, always, so the structure is readable from the class name alone. 3. Values come from tokens.css. A literal colour, radius or font in this layer is a bug unless there is a comment saying why. 4. Components never set their own outer margin or position. The page places them; they only describe themselves. That is what makes them reusable across grammar, reading, listening, dictation and vocabulary. 5. No !important, ever. If something here loses to a.css, the selector is wrong or the markup is nested inside legacy markup that should be moved out. Both are worth fixing rather than papering over. HOW A PAGE OPTS IN Set $lg_components before including includes/header.php: $lg_components = array( "section-header", "score-card" ); include ("includes/header.php"); header.php always links this file, then one css/lg..css per entry. Adding a component means adding a file and naming it — no edit to header.php. This file holds only what more than one component needs: the box model, the button, and the small print. Anything used by exactly one component lives in that component's own file. =========================================================================== */ /* --------------------------------------------------------------------------- Anchor offset under the sticky header .header is position:sticky; top:0 (a.css:70), so an in-page jump puts the target at the very top of the viewport - underneath the header - and the first line or two of the section is hidden behind it. scroll-padding-top on the scroll container fixes every anchor on the page at once, including ones this layer knows nothing about and including the initial jump when a URL arrives with a #hash. Preferred over putting scroll-margin-top on each target, which only helps the targets someone remembered. THE VALUE IS MEASURED, NOT GUESSED The header has no fixed height: it is sized by the logo, which changes at five breakpoints (110px to 210px wide), and it grows again when one of the alert bars in includes/header.php is showing. Any constant here would be wrong at some width or for some visitor. So includes/header.php sets --lg-header-offset from the real offsetHeight and keeps it up to date on resize. The value below is only the fallback for the moment before that runs, and for a visitor with no JavaScript - it is deliberately on the generous side, because overshooting a heading by a few pixels is invisible and undershooting hides it. The extra 1rem is breathing room: landing with the heading flush against the header reads as clipped even when nothing is covered. --------------------------------------------------------------------------- */ :root { --lg-header-offset: 5.5rem; } html { scroll-padding-top: calc(var(--lg-header-offset) + 1rem); } /* Border-box for this layer only. a.css is content-box in most places and changing that globally would move several hundred boxes; scoping it to lg-prefixed elements gets the sane model without touching the old page. */ [class^="lg-"], [class*=" lg-"], [class^="lg-"] *, [class*=" lg-"] * { box-sizing: border-box; } /* Paragraph sizing stays with the block, not with a.css. a.css:30 sets `p { font-size: var(--lg-font-size-p) }` - 1.0625em, the x-height correction for DM Sans - on every

on the site. Inside this layer that correction has already been applied by the block, which states its own size in rem, so a

child multiplied it a second time: the section header body rendered at 1.05rem x 1.0625, visibly larger than the lead beside it, which has no

because its text arrives untagged. Reset rather than matched per component. Editorial HTML from the language files can put a

inside any prose slot in this layer, so every one of them was one stored tag away from the same bug - .lg-score-card__note already was. Only the size is reset; margins stay with the component that wants them. :not([class]) matters. The layer renders four paragraphs of its own with a class and a declared size - __eyebrow, __title, __subtitle, __lead - and a bare `[class^="lg-"] p` outspecifies all of them at (0,1,1) against (0,1,0), which would reset the eyebrow from 0.8rem to whatever it inherits. Only UNCLASSED paragraphs are editorial HTML, and only those are reset. */ [class^="lg-"] p:not([class]), [class*=" lg-"] p:not([class]) { font-size: inherit; } /* --------------------------------------------------------------------------- Button Shares nothing with a.css's .button, which carries a gradient, a 5px radius and a text-shadow from an older visual language. These are flat pills.