/* ============================================================================ fonts-v2.css - the licensed font substitution. Task 1.2, 28 Aug 2026. THIS IS THE FILE THAT MAKES THE PAGE SHIPPABLE. Everything else in this sandbox could travel to prepareissb.com already; three typefaces could not: Lateral Condensed Bold every heading, every eyebrow, every button label. EverWonder's licensed Webflow font. KMR Melange Grotesk Med all body copy, and the footer wordmark. Also EverWonder's licensed Webflow font. ABCDiatype Medium/Bold the cloned Wolverine header. A commercial Dinamo licence. Replaced by, and only by: Lateral Condensed -> Oswald 700 (SIL OFL 1.1, Google Fonts) KMR Melange -> Instrument Sans (SIL OFL 1.1, already vendored) ABCDiatype -> Instrument Sans (in nav-v2.css, not here) Owner's decision; the measured case for it is in _build/FONT-DECISION.md. --------------------------------------------------------------------------- WHY THIS IS THREE CUSTOM-PROPERTY OVERRIDES AND NOT A SHEET FULL OF SELECTORS The vendored Webflow bundle names its faces exactly three times, all of them at :root, all of them in one place: --_fonts---fonts--heading: "Lateral Condensed", Impact, sans-serif; --_fonts---fonts--paragraph: "KMR Melange Grotesk", Arial, sans-serif; --_fonts---fonts--eyebrow: "KMR Melange Grotesk", Arial, sans-serif; Every other font-family in the bundle - all 38 of them - reads one of those three through a chain of per-role vars (--_headings---heading-xl--font and friends). Verified by grep rather than assumed: the ONLY literal font names left in the whole 217 KB sheet are the two @font-face declarations themselves plus the webflow-icons data URI. Nothing bypasses the vars. So redefining the three vars swaps every heading, eyebrow, button and paragraph on the page at once, at the same specificity the bundle uses, winning on document order because this sheet is linked after it. No !important anywhere, no selector list to keep in sync with the markup, and - the point of the exercise - once nothing RESOLVES to "Lateral Condensed" or "KMR Melange Grotesk", the browser stops requesting their woff2 files. Fonts are fetched lazily on first use, so removing the last use is what unloads them. Verified in the network panel: zero requests for either file. The two @font-face blocks in the vendored sheet are deliberately left in place. That sheet is never edited - every override in this folder is a separate -v2.css file for exactly that reason - and a declaration nothing matches costs nothing. --_fonts---fonts--eyebrow IS OVERRIDDEN EVEN THOUGH NOTHING READS IT. It is defined once and consumed nowhere (grep: one occurrence, its own definition) - .label takes --_fonts---fonts--heading instead, which is why the eyebrows are display-face and not body-face, and why they follow Lateral to Oswald rather than KMR to Instrument Sans. Leaving the var naming a font the page may not use would be a loaded gun for whoever wires it up next. --------------------------------------------------------------------------- THE NAV IS NOT HERE ABCDiatype is declared and used in assets/css/nav-v2.css, which is OURS, so it is edited directly rather than overridden from a distance. See the fonts block at the top of that file. The inline logotype in the header carries no font-family of its own on purpose (localize.py, logotype_svg) - it inherits from .c-header, so it followed the nav's swap for free, and textLength holds it to its box. --------------------------------------------------------------------------- CASCADE POSITION Inserted by STRUCTURAL EDIT 31, immediately BEFORE cta-v2.css and after everything else. cta-v2.css must stay the last stylesheet in the document - its .button-073.is-cta rules beat the Webflow bundle on document order alone - and nothing here competes with it: this sheet sets custom properties and font descriptors, cta-v2.css sets font-size and padding on a button. Verified after the insertion that the CTA still computes its own values. ============================================================================ */ /* ------------------------------------------------------------------ */ /* Faces */ /* ------------------------------------------------------------------ */ /* Oswald, ONE STATIC WEIGHT, and that is the whole trick. Lateral Condensed is @font-face'd exactly once, at 700. The page asks for 500 in four display roles (.highlight-text-h, .label, .button-073__text and the 48px statements) and 700 in the rest, and all of them resolve to that single 700 file - so what actually ships is "always bold". Declaring a VARIABLE Oswald with `font-weight: 200 700` would honour those 500 requests and render four roles lighter than they are today: a design change, arriving as a side effect of a licensing fix. One static 700 face reproduces the current rendering exactly, with no per-role weight overrides to write and none to forget. It is also the smaller file - 12.7 KB against the variable build's 27.8 KB, and against Lateral's 39.7 KB. _build/fetch-fonts.sh pulls it with `Oswald:wght@700`; the RANGE form of that query is what makes Google hand back the variable file instead. No synthesis can occur here: asking for 500 when only 700 exists renders 700, because synthetic bolding only ever goes heavier. font-synthesis below is belt-and-braces. */ @font-face { font-family: "Oswald"; src: url("../fonts/Oswald-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* Instrument Sans is ALREADY declared, identically, in pricing-v2.css - same family, same file, same 400-700 range - and that sheet is linked before this one. Repeating it is deliberate, not an oversight: - It is the same URL, so it is the same single network request. The duplicate costs nothing on the wire. - This sheet is now the one thing standing between the page and three licences it does not hold. It must not depend on the pricing row's stylesheet still existing. The pricing row has already been built, reverted and rebuilt once in this sandbox. If the filename ever changes, both copies need it. That is the price, and it is cheaper than a page whose body copy silently falls back to Arial. */ @font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-latin-variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } /* ------------------------------------------------------------------ */ /* The substitution */ /* ------------------------------------------------------------------ */ /* Fallback stacks are kept exactly as the bundle wrote them - Impact behind the display face, Arial behind the body face - so a failed fetch degrades the way it always did. */ :root { --_fonts---fonts--heading: "Oswald", Impact, sans-serif; --_fonts---fonts--paragraph: "Instrument Sans", Arial, sans-serif; --_fonts---fonts--eyebrow: "Instrument Sans", Arial, sans-serif; /* Nothing on this page can trigger synthesis today and that was checked, not hoped: the only weights requested are 400, 500 and 700; Oswald answers all three from its 700 face (lighter requests are never synthesised) and Instrument Sans covers 400-700 natively. The bundle's .text-weight-xbold (800) and .text-weight-black (900) exist but appear zero times in the markup. This is here so that stays true - a future 800 would render as Instrument Sans 700 rather than as a smeared fake bold. */ font-synthesis: none; } /* ------------------------------------------------------------------ */ /* Cap-height correction - the one thing the swap could not keep */ /* ------------------------------------------------------------------ */ /* Oswald was chosen because it width-matches Lateral to within 0.5%, so every line BREAK on this page lands exactly where it did before - and that held: the hero is three lines before and after, the two statements four and five, the Featured titles two and four and four. Nothing rewrapped. What it does not match is CAP HEIGHT: 0.810 of the em against Lateral's 0.710. At the same font-size Oswald draws caps about 14% taller, and that collides with the fact that the display line-heights here are all BELOW 1.0 - they were chosen for a short-capped face. Every display role is text-transform: uppercase (checked on all seven, not assumed), so there are no descenders anywhere and the gap between one line's ink and the next line's ink is exactly line-height minus cap height. Measured at 1440, before and after: role px / line-box ratio Lateral cap Oswald cap ink gap .heading-xl hero 96 / 76.8 .80 68.2 77.8 8.6 -> -1.0 .heading-l 72 / 57.6 .80 51.1 58.3 6.5 -> -0.7 .heading-m 60 / 48.0 .80 42.6 48.6 5.4 -> -0.6 .highlight-text-h 48 / 40.8 .85 34.1 38.9 6.7 -> +1.9 .heading-xs 30 / 25.5 .85 21.3 24.3 4.2 -> +1.2 .label / button 12 / 12.0 1.00 8.5 9.7 3.5 -> +2.3 THE SPLIT IS EXACTLY THE AUTHORED RATIO, WHICH IS WHY THE FIX IS NOT A JUDGEMENT CALL. Everything the page authors at .85em survives the swap with room to spare. Everything it authors at .8em - and only that - goes negative. So the correction is to move the .8em roles onto .85em: not a number invented to make Oswald fit, but the value this page already uses for its other headings. Afterwards the four corrected roles read 3.8 / 2.9 / 2.4 px of gap, which lands them in the same band as the three that were never touched (1.2 - 2.3). Negative here means the next line's caps begin fractionally above the previous line's baseline. With no descenders that is not overlapping ink - it is zero air, which at 96px reads as a mistake rather than as tight typesetting. Worth being precise about, because "collides" would overstate it. FONT SIZES ARE NOT REBASED. That was the cost of the other finalist (Anton, cap ratio 0.859) and the reason Oswald was preferred over it; paying it here anyway would throw away what the choice bought. .heading-xxl and .heading-s appear zero times in the page today - xxl is included because it is authored .8em and would break identically the day something uses it, s is left out because it is authored .85em and would not. Written against the classes rather than the --_headings---*--line-height vars on purpose. The bundle's wiring is crossed - .heading-l reads heading-m's font var and heading-l's size var, .heading-m resolves to a .8 ratio despite --_headings---heading-m--line-height being .85em - so a var override would not land where the table above says it does. The classes are what the markup carries and what was measured. em and not a unitless number, matching how the bundle authors it, so the ratio survives the --size-unit adaptive scale at every breakpoint. */ .heading-xxl, .heading-xl, .heading-l, .heading-m { line-height: .85em; }