/* ============================================================ TYPE Public Sans - headings and display ONLY. Numerals follow their context, so a display stat numeral is Public Sans. Mona Sans - everything else: body, UI, labels, eyebrows, captions. Public Sans is NEVER body copy - both brand guidelines (3.1) say so in as many words. Labels are the system's call; the guides are silent on them. Archivo - the logo wordmark face ONLY. Never UI or body copy. Names mirror Figma: type/heading/1 -> --type-heading-1 Each slot ships a `font:` shorthand because CSS has no composite text style: font: var(--type-heading-2); letter-spacing: var(--type-heading-2-tracking); ============================================================ */ /* Archivo is the logo wordmark face ONLY and is still hotlinked - it was not part of the supplied set. Mona Sans and Public Sans are self-hosted below, so neither appears here any more. CS-29 (the theme stylesheet a WordPress theme enqueues) requires no hotlink at all; this line is what it still owes. */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@800&display=swap'); /* ---- Self-hosted variable faces --------------------------------- CS-1. Both faces supplied under the SIL Open Font Licence; Mona Sans ships its OFL.txt beside the binaries as OFL-Mona-Sans.txt. TWO RECORDED COMPROMISES. 1. All four faces are WOFF2, which is what a theme should ship - roughly 40% smaller over the wire than the .ttf originals. Those originals stay in this folder as the licensed source, unreferenced. Same axes, same weight ranges: the container changed, the faces did not. Nothing in the kit is hotlinked now except Archivo, and Archivo is the wordmark face only - never UI or body copy. 2. Mona Sans is the TWO-axis cut, MonaSansVF[opsz,wght]. The release also carries [wdth,opsz,wght] and [wdth,wght,opsz,ital]. The kit varies only weight, and opsz comes along because browsers apply optical sizing automatically. No token asks for width, so a width axis would be dead bytes in every page load. If a display slot ever wants Condensed or Expanded, that is a new token and a new face, not a rewrite of this one. font-weight ranges are the faces' real ranges: Mona Sans 200-900, Public Sans 100-900. Declaring wider than the binary supports makes the browser synthesise, which is how a 700 ends up looking smeared. */ @font-face { font-family: 'Mona Sans'; src: url('../assets/fonts/MonaSansVF%5Bopsz,wght%5D.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Mona Sans'; src: url('../assets/fonts/MonaSansVF-Italic%5Bopsz,wght%5D.woff2') format('woff2'); font-weight: 200 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Public Sans'; src: url('../assets/fonts/PublicSans-VariableFont_wght.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Public Sans'; src: url('../assets/fonts/PublicSans-Italic-VariableFont_wght.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; } :root { /* Families */ --font-family-display: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-family-body: 'Mona Sans', 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-family-logo: 'Archivo', 'Public Sans', system-ui, sans-serif; --font-family-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Weights */ --type-weight-regular: 400; --type-weight-medium: 500; --type-weight-semibold: 600; --type-weight-bold: 700; --type-weight-black: 800; /* display/xl - a page's SINGLE hero statement. The top of the scale. From the Figma H1 named text style, supplied by the owner: Public Sans Bold 700 / 88px / 100px / 0% / Title Case. CS-3, CS-8. NAMED STYLES BEAT MEASUREMENT FOR TYPE. An earlier pass read this off a screen capture as 96px / 1.05 / -.02em and all three numbers were wrong: 88px Public Sans on 100px leading RENDERS about 96px of glyph extent, so measuring rendered text recovers the extent, not the size. Keep measurement for geometry and colour, where it is sound. Clamped because anything that is not a deck, a document or a fixed export has to reflow, and a fixed display step is a token that only works at one width. 5.62vw is 88/1566, so the clamp passes through the Figma value exactly at the 1566 design width and scales proportionally either side - the vw term is derived from the evidence, not chosen. Floor is half the ceiling, and still comfortably the largest thing on a narrow screen. SCOPE: one per page. A second display/xl on a page means the first is not a hero. No element binds to it - opted into with a class, per CS-3. Named xl rather than a number so it reads as the ceiling; anything that ever needs to sit between lg and xl goes in as a numeric primitive. */ --type-display-xl: 700 clamp(44px, 5.62vw, 88px)/1.136 var(--font-family-display); --type-display-xl-size: 88px; --type-display-xl-tracking: 0; /* display/lg - hero numerals and large page statements that are not THE statement. Unchanged at 64px: the 90px an earlier pass ruled here came from the same rendered-glyph measurement that display/xl documents as unsound, and applying it would have put lg ABOVE xl in a scale where xl is named the ceiling. No element binds to this slot: it is opted into with a class, per CS-3. */ --type-display-lg: 800 64px/1.05 var(--font-family-display); --type-display-lg-size: 64px; --type-display-lg-tracking: -1px; /* heading/1-4 - Title Case. The brand's strongest voice tell. Bound to h1-h4 in base.css (CS-3); h5 and h6 reuse label/base and label/sm rather than adding steps that would land inside body copy. Title Case is enforced by writers, never by text-transform - see the heading block in base.css for why. */ --type-heading-1: 700 48px/1.1 var(--font-family-display); --type-heading-1-size: 48px; --type-heading-1-tracking: -.5px; /* heading/2 - CORRECTED from the Figma H2 named text style: Public Sans Bold 700 / 40px / 52px / +2% / Title Case. Was 36px/1.15/-.4px, which was the system's own call with nothing behind it. THE TRACKING IS POSITIVE, and that is the part no inference would reach. -.02em on a heading is current display-type convention; Solaris tracks H2 loose at +2%. A 1.2px swing per letter at this size, and a real brand tell - which is exactly why a stored decision beats a guess. THE ONLY SECTION-HEADING STEP. Collections, editorial rows and the repeated CTA refrain all take it. Two sizes would need a rule for choosing between them, and "collection headings are bigger" is not one anybody could apply consistently later. FIXED, NOT CLAMPED - a deliberate departure from the handoff, which clamped it on display/xl's terms. Two reasons. h2 is BOUND to an element in base.css, so print consumes it: templates/flyer-a5 sets its A5 headline in heading/2, and a vw clamp resolves against a 148mm page box and collapses to the floor. And the rest of this ladder is fixed px, so one clamped rung is incoherent. Responsive heading sizes are CS-15, which CS-3 already records as an open gap. OPEN: heading/1, /3 and /4 still carry the kit's own tracking, so the ladder now reads -.5 / +.8 / -.3 / 0 and h2 is the odd rung. Either the others are wrong too or Solaris genuinely tracks only H2 loose. Needs the H3/H4 named styles - CS-31 in 05-tasks/cross-surface.md. */ --type-heading-2: 700 40px/1.30 var(--font-family-display); --type-heading-2-size: 40px; --type-heading-2-tracking: .02em; --type-heading-3: 700 28px/1.2 var(--font-family-display); --type-heading-3-size: 28px; --type-heading-3-tracking: -.3px; --type-heading-4: 600 22px/1.3 var(--font-family-display); --type-heading-4-size: 22px; --type-heading-4-tracking: 0; /* body - Mona Sans */ --type-body-lg: 400 18px/1.6 var(--font-family-body); --type-body-lg-size: 18px; --type-body-base: 400 16px/1.6 var(--font-family-body); --type-body-base-size: 16px; --type-body-base-line-height: 1.6; /* label/sm - uppercase eyebrows, captions, badge labels */ --type-label-sm: 500 12px/1.4 var(--font-family-body); --type-label-sm-size: 12px; --type-label-sm-tracking: .5px; /* body/sm - small print, disclaimers, captions. Sentence case. 14px is production's step below body copy: eight independent rules in the live theme sit there (nav links, dropdown links, banner info, the CF7 response output, .small-text, comment meta). 12px is label/sm, and production uses 12px only on buttons and mobile nav, so it is spoken for. Line height was the system's call - the theme's 14px rules run 13, 16, 18 and 28px with no pattern, so there was nothing to ratify. Fine print runs long: cap the block at roughly 68 characters. Unconstrained across the 1280px content column the comparison-rate disclosure sets a 160-character line, which is compliant and unreadable. */ --type-body-sm: 400 14px/1.5 var(--font-family-body); --type-body-sm-size: 14px; --type-body-sm-line-height: 1.5; /* label/base - sentence-case UI and form labels. The non-uppercase label. No production precedent to ratify: the site runs Contact Form 7, the footer subscribe form is placeholder-only, and the one label rule in the theme is 14px in #999999 on a 13px line height - a defect, not a style. So the system sets this one. Matches body/sm's size; differs in weight and case. */ --type-label-base: 500 14px/1.4 var(--font-family-body); --type-label-base-size: 14px; --type-label-base-tracking: 0; /* ---- control/* and item/* -------------------------------- Text INSIDE a control or a menu row. The kit had display, heading, body and label and no step for this, so the mega menu hardcoded five of its own. Ruled from that build. CS-27. Two families, split by ONE question: can the text wrap? control/* pins line-height to /1. A control's height is its padding plus its line box, so an inherited 1.5 silently turns a 32px button into 39px. The step exists to stop that. item/* carries leading, because a menu row wraps. All Mona Sans - a control is UI, and Public Sans is never UI. Tracking is 0 on all five, and the companions ship anyway: every other step in this file has one, and a missing companion makes `letter-spacing: var(--type-control-sm-tracking)` resolve to nothing and silently inherit - the same class of bug the /1 rule exists to prevent. DELIBERATELY ABSENT: control/lg. The menu's phone number is 600 17px/1, and that is one element on one surface - a use, not a class of uses. Every step here covers a repeating element class. The phone number moves to control/base; see 05-tasks/header.md, which owns that change because it costs the phone its emphasis as the conversion path. */ --type-control-sm: 600 14px/1 var(--font-family-body); --type-control-sm-size: 14px; --type-control-sm-tracking: 0; --type-control-base: 500 15px/1 var(--font-family-body); --type-control-base-size: 15px; --type-control-base-tracking: 0; --type-item-sm: 600 15px/1.2 var(--font-family-body); --type-item-sm-size: 15px; --type-item-sm-tracking: 0; --type-item-base: 600 16px/1.25 var(--font-family-body); --type-item-base-size: 16px; --type-item-base-tracking: 0; --type-item-lg: 600 18px/1.2 var(--font-family-body); --type-item-lg-size: 18px; --type-item-lg-tracking: 0; /* Fluid heading sizes - below 1024 headings are fluid between declared steps, from the 360 floor (--viewport-min) to the full size at 1024 and flat above it. SIZE ONLY: pair with the step's own shorthand, so the line-height stays the token's until one is ruled (CA-2.7 owes it). font: var(--type-heading-2); font-size: var(--type-heading-2-fluid-size); Every other heading breakpoint (900, 720, 560) goes. Ruled by the build - consistency audit CA-2.7, 2026-09-27. */ --type-heading-1-fluid-size: clamp(28px, 17.16px + 3.012vw, 48px); /* collection h2: 28 -> 48 */ --type-heading-2-fluid-size: clamp(28px, 21.49px + 1.807vw, 40px); /* h2: 28 -> 40 */ --type-heading-3-fluid-size: clamp(22px, 18.75px + 0.904vw, 28px); /* h3 / card title: 22 -> 28 */ /* Stat numeral - the one numeric step (stat pills, tool figures). display/lg keeps 64. Ruled by the build - consistency audit CA-2.6, 2026-09-27. */ --type-stat: 800 36px/1 var(--font-family-display); --type-stat-size: 36px; --type-stat-tracking: -1px; /* Two documented empty cells remain: type/display/md and type/display/sm. Left undeclared deliberately, not pending. The naming grammar puts them between heading/1 (48px) and display/lg (64px), and display/sm would land on heading/1 - there is no room for two slots in a 16px gap. The use case they were named for is poster and cover display type, which needs sizes ABOVE display/lg, in print units rather than screen px. Owned by PDF-2. */ }