/* The rules that replace Astra's. Astra contributed 112 KB to every page on this site: 45 KB of static stylesheet and 67 KB that it generated per request from its Customizer settings and printed inline. Almost none of that was load bearing. This file is what was, and it was arrived at by measuring rather than by reading minified CSS. The method, which is repeatable and is the only reason to trust this file: python measure.py snapshot --label before (with Astra's CSS present) ... remove it ... python measure.py snapshot --label after python measure.py compare before after Removing all 112 KB moved 95,285 of 1,274,850 computed property readings across 14 pages at two viewports. Every rule below exists to close part of that gap, and the gap is closed to zero. Nothing here was added because it looked sensible. Loaded after style.css so it wins on equal specificity. It is deliberately small: if it grows, something is being copied rather than replaced. */ /* ------------------------------------------------------------------ root */ /* The root. Astra also dropped html to font-size: 91.2% below 921px, a Customizer setting that shrank all mobile text by 8.8 percent. That is NOT carried over, deliberately, and it is the one visible difference this work makes. The reason is that keeping it produces something incoherent rather than faithful. This stylesheet declares `p { font-size: var(--lr-font-size-body) }` and that token is 16px, absolute. Astra's rule was UNLAYERED and 90 percent of style.css sits inside @layer blocks, so Astra won and paragraphs rendered at 14.592px. Remove Astra and our own rule applies at 16px while the containers around it still inherit 14.592px from the root: containers one size, the text inside them another. So either the root scaling goes, or the design system's own body size does. The design system wins. Mobile body text is now 16px, which is what style.css always said it should be. */ html { font-size: 100%; box-sizing: border-box; -webkit-text-size-adjust: 100%; } /* 26.4px at a 16px root, which is what the site was actually rendering. Losing it sent 3,938 elements to `normal`, which browsers resolve per font and per size, so the whole vertical rhythm moved. */ body { margin: 0; line-height: 1.65; position: relative; /* clip, not hidden. `overflow-x: hidden` makes a scroll container, and a sticky header inside a scroll container sticks to THAT box, not to the viewport: the audit found the header "never sticks" on all 57 views. `clip` clips without creating a scroll container. It also stops hiding real overflow from the instrument, which is how a card grid ran 42px past its container on /teaching/esat/ while docW read clean. */ overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* The sticky footer. Astra's inline CSS made #page a full height flex column; without it the page wrapper is a plain block and short pages let the footer ride up. */ #page { display: flex; flex-direction: column; min-height: 100vh; position: relative; } #content { flex: 1 0 auto; } /* Table and form-control borders. Astra painted these #d1d5db; with it gone they fall back to currentColor, which turns every hairline into body-text navy. Measured: 3,078 elements, and they are td, tr, th, table, thead, tbody plus a handful of inputs and one fieldset. Nothing else. An earlier version of this rule used the universal selector, on the theory that Astra had set a global default. It had not: that version painted 22,522 elements grey that should have inherited their own colour, and made the diff WORSE than having no rule at all. Scope it to what was measured. */ table, thead, tbody, tr, th, td, input, select, textarea, fieldset { border-color: #d1d5db; } /* --------------------------------------------------------------- chrome */ /* Header social icons. The SVGs carry a viewBox and no width or height, which is correct for a scalable icon and means they compute to 0 by 0 unless something sizes them. Astra sized them through its own `.ahfb-svg-iconset svg` rule at 17px. Rendering without Astra showed three links present in the DOM, with their SVGs, at zero width: visible in a DOM check and invisible on the page, which is the failure mode a structural diff cannot see. Sized against our own class rather than Astra's, so this survives. */ .lr-social-icon { display: inline-flex; align-self: center; } .lr-social-icon svg { width: 17px; height: 17px; fill: currentColor; } /* No padding on the link itself. An earlier version added 0.25em and the icons measured 26px against production's 18px, which is the kind of difference a structural diff never sees and a person notices at once. */ /* The glyph stays 17px. The LINK grows to a 28px box with 2px between them: the audit measured 17 by 17 targets with zero spacing in the header and the footer, on every page, which fails WCAG 2.2 SC 2.5.8 (24px minimum). */ .site-header .lr-social-element, .site-footer .lr-social-element { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; margin: 0 2px; border-radius: 6px; } /* ------------------------------------------------- header and footer layout These are the rules that actually laid the chrome out, and losing them is what turned the navigation into a vertical list. They are worth understanding rather than just copying. `lr-flex`, `lr-inline-flex`, `lr-flex-grow-1` and `lr-grid-row` are UTILITY classes: Astra's markup wore them and Astra's stylesheet gave them meaning. Our own style.css never styled any of them, because it never had to. So they survived every grep for "what does our CSS use from Astra" and still vanished the moment Astra's CSS went, because the answer to that question was "nothing, and also the entire header layout". The class names below are ours now; the declarations are Astra's, measured out of its stylesheet rather than reinvented, because the goal here is a site that renders as it did and owes nothing to Astra, not a redesign smuggled in under a refactor. */ .lr-flex { display: flex; flex-wrap: wrap; } .lr-inline-flex { display: inline-flex; align-items: center; align-content: center; flex-wrap: wrap; } .lr-flex-grow-1 { flex-grow: 1; } /* The header and footer rows. `auto auto` was Astra's, and it gives the left column whatever the social icons happen to need and the right column the rest, which is why the icons ended up flush against the viewport edge with the navigation adrift in the middle. `auto 1fr` pins the left column to its content and lets the right take the remaining width, so the navigation can justify to the right edge of the container. */ .lr-grid-row { display: grid; align-items: center; grid-column-gap: 20px; overflow-wrap: anywhere; } /* The two column split belongs to the HEADER row only. It was written on the shared class and leaked into the footer, whose row has three sections: the empty one took `auto`, the icons took `1fr`, and the copyright wrapped to a second grid row at x=0 with no gutter. The footer row is laid out in lr-modern.css. */ #masthead .lr-grid-row { grid-template-columns: auto 1fr; } .site-header-section { height: 100%; min-height: 0; align-items: center; } .lr-grid-right-section { justify-content: flex-end; } .main-navigation { height: 100%; display: inline-flex; } .lr-site-identity { display: inline-flex; align-items: center; vertical-align: middle; padding: 1em 0; } /* The menu itself: a row of items, each a full height flex link. The `padding: 0 1em` is the whole reason the navigation reads as eight separate words rather than one run-on string. Astra carried it on a base rule that our stylesheet never duplicated, so it disappeared silently and the first screenshot after the change showed HomeAboutEngineeringResearch. */ .main-header-menu .menu-link, .main-header-menu > a { text-decoration: none; padding: 0 1em; display: inline-block; } .main-header-menu .menu-item { display: flex; justify-content: center; } .main-header-menu > .menu-item > .menu-link { display: flex; align-items: center; height: 100%; } .main-header-bar .main-header-bar-navigation { height: 100%; } /* Below the breakpoint the menu stacks: full width rows with a rule between. */ .lr-narrow .main-header-bar-navigation { flex: auto; line-height: 3; } .lr-narrow .main-navigation ul .menu-item .menu-link { display: inline-block; width: 100%; padding: 0 20px; border: 0; border-bottom-width: 1px; border-style: solid; } /* The content column. 1240px above 922px wide, full width below, which is where the measured 1240 by 80 header container and the 1200px content area come from. */ .lr-container-outer { max-width: 100%; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; } @media (min-width: 922px) { .lr-container-outer { max-width: 1240px; } .site-content .lr-container-outer { display: flex; } } @media (max-width: 921px) { .site-content .lr-container-outer { flex-direction: column; } } /* The footer bar. */ .site-footer-section { justify-content: center; } .site-primary-footer-wrap .lr-grid-row { max-width: 1200px; margin-left: auto; margin-right: auto; } .lr-footer-copyright { display: flex; } /* The mobile menu button. Astra hid this above the breakpoint through its own header-builder rules, which are not carried over, so without an explicit rule it showed as a small white square under the desktop navigation. The breakpoint class on is set by lr-chrome.js. */ .lr-menu-toggle { display: none; align-items: center; padding: 0.5em; background: none; border: 0; color: inherit; cursor: pointer; } .lr-narrow .lr-menu-toggle { display: flex; } /* The desktop navigation is the other half of the same switch. */ .lr-narrow #primary-site-navigation { display: none; } .lr-wide #lr-mobile-header-content { display: none; } /* The header bar's own vertical room. */ .lr-primary-header-bar { padding-top: 0.75rem; padding-bottom: 0.75rem; }