/* ============================================================================= $RF - RISK FREE* · TYPE SYSTEM Register: fixed-income terminal at 3am. Condensed monospace, tabular by construction, one number allowed to be negative. Authority: working/DESIGN-TOKENS.json. Consumed verbatim. Corrections applied per BUILD-SPEC A3 (1-5): 1. the three .rf-hero[data-state] colour rules are DELETED. Digits are --figure in every state; only the pinned sign cell carries colour. 2. Source Serif 4, --rf-serif and RF Serif Fallback are REMOVED. Font budget 196 KB -> 87 KB. 3. --rf-hero-chars / --rf-hero-w / --rf-hero-size are REPLACED by the fixed 6-cell --t-board formula. A hero that resizes with string length reflows on a sign change; the fixed array exists to prevent that. 4. every font-variant-numeric on a Martian Mono rule is DELETED. It is a silent no-op on that binary and reads as a guarantee that is not there. 5. mono caps label tracking is 0.06em, not 0.08em. FACES Martian Mono (display + mono) · Schibsted Grotesk (body) LICENCE both OFL-1.1 - subsetting permitted TOTAL 87,472 bytes woff2 (38,832 + 48,640), both variable ============================================================================= */ /* --------------------------------------------------------------------------- 1 · FACES - self-hosted variable woff2, subset latin + finance punctuation --------------------------------------------------------------------------- */ @font-face { font-family: "Martian Mono"; src: url("/assets/fonts/MartianMono-var.woff2") format("woff2"); font-weight: 100 800; /* measured fvar: wght 100-800, default 400 */ font-stretch: 75% 112.5%; /* measured fvar: wdth 75-112.5, default 112.5*/ font-style: normal; font-display: swap; /* preloaded; the board figure must not FOIT */ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Schibsted Grotesk"; src: url("/assets/fonts/SchibstedGrotesk-var.woff2") format("woff2"); font-weight: 400 900; /* measured fvar: wght 400-900 */ font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --------------------------------------------------------------------------- 2 · CLS KILLERS - metric-matched fallback faces. The banned metric-source names (Menlo, Arial) appear ONLY inside src:local(), never as a font-family value. --------------------------------------------------------------------------- */ @font-face { /* Martian Mono vs Menlo */ font-family: "RF Mono Fallback"; src: local("Menlo"), local("DejaVu Sans Mono"), local("Consolas"); size-adjust: 124.57%; ascent-override: 80.27%; descent-override: 16.05%; line-gap-override: 0%; } @font-face { /* Schibsted Grotesk vs Arial */ font-family: "RF Sans Fallback"; src: local("Arial"), local("Liberation Sans"), local("Arimo"); size-adjust: 101.71%; ascent-override: 96.01%; descent-override: 25.35%; line-gap-override: 0%; } /* --------------------------------------------------------------------------- 3 · TOKENS - names verbatim from DESIGN-TOKENS.json --------------------------------------------------------------------------- */ :root { /* -- stacks. Never a bare generic: system-ui / ui-* always sits ahead of it. */ --rf-mono: "Martian Mono", "RF Mono Fallback", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; --rf-sans: "Schibsted Grotesk", "RF Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif; /* -- 8 steps, fluid 360 -> 1440px. --t-board is a deliberate outlier solved from the 6-cell array, not from the ladder. */ --t-micro: clamp(0.6875rem, 0.6667rem + 0.0926vw, 0.75rem); /* 11 -> 12 */ --t-fine: clamp(0.75rem, 0.7188rem + 0.1389vw, 0.8438rem); /* 12 -> 13.5 */ --t-body: clamp(1rem, 0.9688rem + 0.1389vw, 1.0938rem); /* 16 -> 17.5 */ --t-lede: clamp(1.125rem, 1.0625rem + 0.2778vw, 1.3125rem); /* 18 -> 21 */ --t-h3: clamp(1.3125rem, 1.2083rem + 0.463vw, 1.625rem); /* 21 -> 26 */ --t-h2: clamp(1.5625rem, 1.3958rem + 0.7407vw, 2.0625rem); /* 25 -> 33 */ --t-h1: clamp(1.8125rem, 1.5625rem + 1.1111vw, 2.5625rem); /* 29 -> 41 */ /* --t-ticker is an ASSET-ONLY step. It is never rendered on the page, so it is not declared here. See DESIGN-TOKENS.json typography.scale.t-ticker. */ /* -- the board figure. F. Solved from the array: 4.055 = 6 cells x 0.600 advance + 5 gutters x 0.055 + 2 well insets x 0.09, all at wdth 75. The fallback uses vw; the container-query override in styles.css uses cqw so a classic scrollbar cannot push the well past the viewport. The 16px here is the scrollbar allowance the fallback needs and the container-query path does not. */ --t-board: min(50vh, calc((100vw - (2 * var(--pad, 20px)) - 16px) / 4.055)); /* -- leading */ --lh-board: 0.85; --lh-h1: 1.1; --lh-h2: 1.2; --lh-h3: 1.3; --lh-body: 1.6; --lh-cap: 1.45; --lh-data: 1.65; --lh-hex: 1.5; /* -- tracking. Declared at every step, never omitted. */ --tr-board: -0.02em; /* carried by the cell gutter, not by letter-spacing: see .flap__glyph, which is a single character. */ --tr-head: -0.01em; --tr-lede: 0; --tr-body: 0; --tr-label: 0.06em; /* mono caps micro-label. NOT 0.08em, and never 0.18em. */ --tr-caps: 0.05em; /* grotesque caps */ --tr-data: 0; /* zero. Tracking a mono destroys the tabular grid. */ --tr-hex: 0.02em; /* the one exception: 42-char strings need the air */ } /* --------------------------------------------------------------------------- 4 · BASE --------------------------------------------------------------------------- */ html { font-family: var(--rf-sans); font-size: 100%; font-synthesis: none; /* never fake a weight on a variable face */ } body { font-family: var(--rf-sans); font-size: var(--t-body); font-weight: 400; line-height: var(--lh-body); letter-spacing: var(--tr-body); font-feature-settings: "kern" 1, "liga" 1, "calt" 1; font-variant-numeric: proportional-nums; /* tnum is OFF in running prose */ text-wrap: pretty; -webkit-font-smoothing: antialiased; /* amber on near-black: subpixel */ -moz-osx-font-smoothing: grayscale; /* AA fattens it into a glow */ } /* --------------------------------------------------------------------------- 5 · ROLE - DISPLAY. The board. The only object on the page above --t-h1. No [data-state] colour rule exists here, by law L1. --------------------------------------------------------------------------- */ .rf-board-glyph { font-family: var(--rf-mono); font-weight: 700; font-stretch: 75%; /* MUST be explicit: wdth defaults 112.5 */ font-size: var(--t-board); line-height: 1; letter-spacing: 0; /* one glyph per cell; --tr-board is the gutter, applied as geometry */ font-feature-settings: "calt" 1, "case" 1; white-space: nowrap; } .rf-wordmark { font-family: var(--rf-mono); font-weight: 700; font-stretch: 75%; line-height: 1; letter-spacing: var(--tr-label); text-transform: uppercase; font-feature-settings: "case" 1; } .rf-h1 { font-family: var(--rf-mono); font-weight: 700; font-stretch: 75%; line-height: var(--lh-h1); letter-spacing: var(--tr-label); text-transform: uppercase; font-feature-settings: "case" 1; } .rf-h2 { font-family: var(--rf-sans); font-weight: 700; font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-head); text-wrap: balance; } .rf-h3 { font-family: var(--rf-sans); font-weight: 400; font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-head); text-wrap: balance; } /* --------------------------------------------------------------------------- 6 · ROLE - MONO. The live column. Same family as the board, one width wider, because a data column at 13px needs 8% more air than a numeral at 40vh. --------------------------------------------------------------------------- */ .rf-label { font-family: var(--rf-mono); font-weight: 500; font-stretch: 75%; font-size: var(--t-micro); line-height: var(--lh-data); letter-spacing: var(--tr-label); text-transform: uppercase; font-feature-settings: "case" 1; } .rf-data { font-family: var(--rf-mono); font-weight: 400; font-stretch: 87.5%; font-size: var(--t-fine); line-height: var(--lh-data); letter-spacing: var(--tr-data); font-feature-settings: "calt" 1; } .rf-hex { /* addresses, tx hashes, block numbers */ font-family: var(--rf-mono); font-weight: 400; font-stretch: 100%; /* widest cut we ship, for the longest strings: 0/O and 1/l must not collide */ font-size: var(--t-fine); line-height: var(--lh-hex); letter-spacing: var(--tr-hex); font-feature-settings: "calt" 1; } /* The verdict is prose, not a field label: Schibsted 400 at --t-lede, set in --ink. Colouring it would re-introduce colour as a state carrier. */ .rf-verdict { font-family: var(--rf-sans); font-weight: 400; font-size: var(--t-lede); line-height: 1.35; letter-spacing: var(--tr-lede); text-wrap: pretty; } .rf-lede { font-family: var(--rf-sans); font-weight: 400; font-size: var(--t-lede); line-height: 1.45; letter-spacing: var(--tr-lede); text-wrap: pretty; } .rf-fine { font-family: var(--rf-sans); font-weight: 400; font-size: var(--t-fine); line-height: var(--lh-body); letter-spacing: 0; text-wrap: pretty; } /* --------------------------------------------------------------------------- 7 · TABLES - the only place tnum is switched on explicitly, and the only place the sans is allowed to carry a figure. Martian Mono is tabular by construction (one advance for every glyph), so it needs no feature flag. --------------------------------------------------------------------------- */ .rf-table { font-variant-numeric: tabular-nums slashed-zero; font-feature-settings: "tnum" 1, "zero" 1; } /* Never justify. Rivers in a 62ch measure on a dark ground are unreadable. */ p, li, dd { text-align: start; }