/* type.css — the TYPE axis for the theme explorer. GENERATED-ADJACENT, demo only. INERT ON PRODUCTION, by the same mechanism as themes.css and layouts.css: this file is loaded by a that Base.astro emits only when PREVIEW_THEMES=1, so jumpstartmd.com never requests it and never carries data-type. ── Why these two faces ────────────────────────────────────────────────── join.jumpstartmd.com — JSMD's own ecommerce checkout — is already set in Literata (titles) + Manrope (body). The site is Lora + Plus Jakarta Sans. So a member currently changes typeface halfway through the funnel, at the exact step where they are being asked to pay. This axis exists to see the site in the checkout's pair, which is an argument from JSMD's own live surface rather than from taste. These are the SAME FILES as the checkout's, copied via the Vercel LP (jsmd-landingpages/weight-loss-v2/fonts/), which took them from the checkout verbatim — so the match is exact rather than approximate. Both are variable, latin + latin-ext, font-display: swap. Self-hosted, not a Google Fonts call: a fonts.googleapis.com lookup plus a second one to fonts.gstatic.com must both complete before a glyph downloads. Same-origin rides the connection the HTML already opened. Files live under /hub/_assets/fonts/ to match the existing Lora/PJS pair. ── Specificity ────────────────────────────────────────────────────────── `:root[data-type="…"]` is (0,2,0) and so outranks theme.css's bare `:root` (0,1,0) whichever lands first. This file is linked BEFORE layouts.css, which is also (0,2,0), so a chosen structure option still wins the type tokens it owns — structure is the more specific choice the client made. */ /* ⚠️ FIXED 2026-09-10 — this said `font-weight: 500 700`, and the file's own fvar says `wght 400..900`. The descriptor is what the browser believes, so every request below 500 was CLAMPED UP to 500 and rendered a weight nobody asked for. It is invisible in devtools: getComputedStyle still reports the 400 you wrote. Proved by measuring one string at 300/400/500 — all three came back 578.69px, while forcing `font-variation-settings:"wght" 400` gave 565.47px. Two elements were affected at EVERY width (1440/1024/768/390): .v2mq__t, the Bourke pull quote, and .v2pcard__sub. Both asked for 400. 🔑 A @font-face weight RANGE is a promise about the file, not a preference — under-declare it and the browser silently serves the nearest edge. */ @font-face { font-family: "Literata"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/hub/_assets/fonts/literata-latin.woff2") format("woff2-variations"), url("/hub/_assets/fonts/literata-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Literata"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/hub/_assets/fonts/literata-latin-ext.woff2") format("woff2-variations"), url("/hub/_assets/fonts/literata-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/hub/_assets/fonts/manrope-latin.woff2") format("woff2-variations"), url("/hub/_assets/fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/hub/_assets/fonts/manrope-latin-ext.woff2") format("woff2-variations"), url("/hub/_assets/fonts/manrope-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── Literata ITALIC, a real drawn face ─────────────────────────────────── Lee 2026-09-09: "use a real italic font! it's free." Correct, and the previous state was worse than not having one: every self-hosted face here shipped `font-style: normal` only, so any `font-style: italic` was a browser-SYNTHESISED oblique — the upright mechanically sheared. Verified these two files are the genuine article: subfamily "Italic", italicAngle -2.0, variable on opsz 7..72 and wght 200..900. (The upright's wght starts at 400; the italic goes down to 200.) Literata is OFL, so self-hosting is licensed. */ @font-face { font-family: "Literata"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("/hub/_assets/fonts/literata-italic-latin.woff2") format("woff2-variations"), url("/hub/_assets/fonts/literata-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Literata"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("/hub/_assets/fonts/literata-italic-latin-ext.woff2") format("woff2-variations"), url("/hub/_assets/fonts/literata-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* The checkout's pair. */ :root[data-type="checkout"] { --jsmd-font-display: "Literata", Georgia, "Times New Roman", serif; --jsmd-font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } /* Today's site pair, stated explicitly so it can be chosen rather than only fallen back to — the client needs to compare, not just revert. */ :root[data-type="brand"] { --jsmd-font-display: "Lora", Georgia, "Times New Roman", serif; --jsmd-font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } /* ── Helvetica at 410 ───────────────────────────────────────────────────── Lee asked to see the H1 in Helvetica at weight 410. NOT self-hosted, and it cannot be: Helvetica is licensed, there is no webfont here to serve, so this option is a SYSTEM stack. That has a real consequence to know before judging it — on macOS and iOS the browser gets Helvetica Neue; on Windows and Android there is no Helvetica, so the stack falls to Arial, which is a different face with different proportions. Two people looking at this URL on different machines are not seeing the same thing. This was first written as 410, and 410 was the wrong number — not merely a rounding of 400. CSS Fonts 4 matches a desired weight between 400 and 500 by checking weights at or ABOVE the target first, ascending, up to 500, before it looks below. So on a machine that has Helvetica Neue Medium — every stock macOS install does — a request for 410 resolves UP to Medium 500, not down to Regular 400. That is a visibly heavier H1 than "regular", which is what was actually wanted. Reverted to a plain 400 (Lee, 2026-09-08). Where the stack falls through to Arial, which ships only Regular and Bold, 410 and 400 both landed on Regular — so the difference shows on macOS and iOS and not on Windows or Android. Same URL, two different results. Body copy keeps the same stack so the page is internally consistent. */ :root[data-type="helvetica"] { --jsmd-font-display: "Helvetica Neue", Helvetica, Arial, sans-serif; --jsmd-font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif; --jsmd-h1-weight: 400; }