/* ========================================================================== Devgun Family Law -- Foundation: Legacy overrides (TEMPORARY BRIDGE) site.css is the inherited, minified DS/bootstrap stylesheet. Its .typography rules (2.2rem/2.6rem headings, always-underlined links at 0-1-1 specificity) out-rank the token scale inside prose wrappers and were breaking components rendered within them. This file loads immediately AFTER site.css and re-asserts the verified Devgun token scale for genuine prose (.typography = WYSIWYG content only -- block templates apply it to their own prose divs; layout templates must NOT wrap whole Elemental areas in it). DELETE this file when the legacy typography rules are excised from site.css during the block-restyle passes (tracked in PR follow-ups). ========================================================================== */ /* Prose headings follow the token scale, not the DS 2.2/2.6rem sizes. NOTE (X1 fix): these rules previously omitted font-weight. site.css's `.typography h1,h2,h3 { font-weight:300 }` is the SAME specificity (0-1-1) as these rules, so on any property this block does not set, site.css's later-in-source declaration for that property still wins nothing here -- but font-weight was simply never contested, so the 300 leaked through untouched (verified: hero H1 computed 300 instead of the design's 500). font-weight is now explicit on every line. */ .typography h1 { font-weight: var(--fw-medium); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-family: var(--font-family-base); color: var(--color-text-heading); } .typography h2 { font-weight: var(--fw-regular); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-family: var(--font-family-base); color: var(--color-text-heading); } .typography h3 { font-weight: var(--fw-regular); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-family: var(--font-family-base); color: var(--color-text-heading); } .typography h4 { font-weight: var(--fw-semibold); font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); font-family: var(--font-family-base); color: var(--color-text-heading); } .typography h5 { font-weight: var(--fw-semibold); font-size: var(--fs-h5); line-height: var(--lh-h5); letter-spacing: var(--ls-h5); font-family: var(--font-family-base); color: var(--color-text-heading); } /* X1 (unscoped re-assertion): same properties as foundation/base.css's `h1,.h1` .. `h5,.h5` rules, for any heading rendered OUTSIDE .typography where site.css's later-loading bare `h1{margin}`.."h5{margin}" rules (0-0-1 specificity, margin-only -- verified via grep, they never set weight/size/color) could otherwise still win the margin property against base.css. Belt-and-suspenders with the .typography block above; base.css itself is already correct for weight/size/color outside .typography. */ h1 { font-family: var(--font-family-base); font-weight: var(--fw-medium); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); color: var(--color-text-heading); margin: 0 0 var(--space-gap); } h2 { font-family: var(--font-family-base); font-weight: var(--fw-regular); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); color: var(--color-text-heading); margin: 0 0 var(--space-gap); } h3 { font-family: var(--font-family-base); font-weight: var(--fw-regular); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); color: var(--color-text-heading); margin: 0 0 var(--space-gap); } h4 { font-family: var(--font-family-base); font-weight: var(--fw-semibold); font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); color: var(--color-text-heading); margin: 0 0 var(--space-gap); } h5 { font-family: var(--font-family-base); font-weight: var(--fw-semibold); font-size: var(--fs-h5); line-height: var(--lh-h5); letter-spacing: var(--ls-h5); color: var(--color-text-heading); margin: 0 0 var(--space-gap); } /* X1b: in-article content headings inside the detail-page body column are design H4 scale (~36px/600), not the H2 scale (~50px/300) they render at today (verified: "How Collaborative Divorce Works" computed 47px/300 -- the article h2 rule above wins .typography h2's H2 clamp because it is more specific than a bare h2/.typography h2, so it needs its own higher-specificity override here). Wrapper class confirmed in App/Pages/Layout/TopLevelPage.ss:
. */ .detail-content.typography h2 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); } /* Utility classes must still win inside prose (e.g.

). */ .typography .h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); } .typography .h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); } .typography .h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); } .typography .h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); } .typography .h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); letter-spacing: var(--ls-h5); } /* Prose links: underlined for distinguishability (a11y), but they inherit the surrounding text's metrics instead of the global Links token (18px bold is for nav/CTAs, not body copy). X2: color is Forest Green, not the Canopy Blue --color-link token -- normal-weight Canopy links on white measured 3.24:1 (AA fail, spec F2 pairing). Forest Green matches the pairing already used for the same normal-weight-link-on-white case in page/detail.css's breadcrumb link. */ .typography a:not(.btn) { color: var(--color-green-forest); font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; text-decoration: underline; } .typography a:not(.btn):hover, .typography a:not(.btn):focus-visible { color: var(--color-green-forest); } /* Legacy body/OpenSans re-assertions, in case site.css's body rule wins the cascade order on some page (same specificity, later source). */ body { font-family: var(--font-family-base); color: var(--color-text-default); background-color: var(--color-bg-page); }