/* ========================================================================== SELF-HOSTED FONTS — typography spec Part 6 Downloaded from fonts.gstatic.com 2026-08-18 (latin subset), 92KB total: SpaceGrotesk[wght].woff2 22,288 variable 300-700, one file Inter[wght].woff2 48,256 variable SourceSerif4-Italic.woff2 20,092 the citation face, §4.2 ⚠️ WHY SELF-HOST, from the spec: "Offline use in a cardroom, and privacy." Both are real for this product. A student practising on a phone in a cardroom basement has no signal, and a Google Fonts leaks a request -- carrying IP and referrer -- to a third party on every page load of a paid poker app. It is also faster: two fewer DNS lookups and TLS handshakes on first paint, for 92KB served from our own origin. ⚠️ NOT SUBSETTED FURTHER. The spec asks for "Latin + numerals + spades, hearts, diamonds, clubs". These ARE the latin subsets, and the suit symbols are deliberately absent -- the app draws suits as SVG paths (js/suit-paths.js) precisely so they are not at the mercy of a font. Cutting further needs fonttools, which is not installed; at 92KB total the saving would not pay for the build step. font-display:swap so text paints immediately in the fallback and swaps -- a blank screen while a font loads is worse than one reflow, and this audience is on slow connections in bad rooms. ========================================================================== */ @font-face { font-family: 'Space Grotesk'; src: url('../assets/fonts/SpaceGrotesk[wght].woff2') format('woff2-variations'), url('../assets/fonts/SpaceGrotesk[wght].woff2') format('woff2'); font-weight: 300 700; /* the whole range it ships. There is no 800. */ font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../assets/fonts/Inter[wght].woff2') format('woff2-variations'), url('../assets/fonts/Inter[wght].woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* ⭐ The only italic in the app, and it is a REAL one. §4.2 bans italics because Space Grotesk has none; this face ships one, so citations get a true italic rather than a sheared upright. */ @font-face { font-family: 'Source Serif 4'; src: url('../assets/fonts/SourceSerif4-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } /* ========================================================================== TYPOGRAPHY — docs FELT_SHARK_TYPOGRAPHY_SPEC_v7.md, Parts 1, 4 and 5 ⭐ THE TWO OPENTYPE FEATURES ARE THE WHOLE POINT OF THIS FILE. Space Grotesk ships both and turns on NEITHER by default. Before this file, `tnum` appeared in exactly two rules in the entire app (table-stage.css:334 and :427) and `zero` appeared nowhere. 1. SLASHED ZERO. The spec calls this "the single most valuable thing in the font for us" and it is not an aesthetic claim: an unslashed 0 next to a Q is a bet of $100 that could be read as a queen. In a poker app that is not a typography nicety, it is a misread hand. 2. TABULAR FIGURES. Proportional digits are different widths, so a stat counting 8 -> 88 shifts the whole column sideways while the student is reading it. Tabular locks the box. ⚠️ font-synthesis: none is here for a related reason. Space Grotesk has NO italic and ships 300-700 with no 800. Left to itself a browser will happily fake both -- smearing glyphs for a weight that does not exist and shearing them for a slant that does not. All 125 synthetic 800s were dropped to 700 on 2026-08-17; this stops them coming back by accident. ========================================================================== */ :root { --font: 'Space Grotesk', -apple-system, 'Segoe UI', Roboto, sans-serif; /* ⭐ THE ONE PAIRED FACE, AND IT EXISTS FOR ONE REASON: A REAL ITALIC. §4.2 bans italics because Space Grotesk has none -- `font-style:italic` on it asks the browser to SHEAR the uprights, and a tight geometric shears badly. That argument is about the font, not about italics, and it does not apply to a face that actually ships one. Source Serif 4 was drawn for screen reading: large x-height, open apertures, and a true italic with proper cursive letterforms. Used ONLY for tier-2 CITED lines from the ten-volume library, where the serif italic is doing real work -- it says "this came from a book" in the one place where provenance is the point. Never in UI, never in Tiger's own voice. §4.1's "one family, no pairing" holds for body text; this is a citation face, and there is no long body text for it to leak into. */ --font-cite: 'Source Serif 4', Georgia, 'Times New Roman', serif; } body { /* Slashed zero everywhere. Not just on numbers -- a 0 is a 0 wherever it lands, and scoping this to .num means the one in a sentence is wrong. */ font-feature-settings: 'zero' 1; font-variant-numeric: slashed-zero; /* §4.2 — never let the browser invent a weight or a slant we do not ship. */ font-synthesis: none; } /* Anything numeric gets tabular on top of the slash. Listed by the classes this app actually uses, not the spec's generic names — a selector that matches nothing is worse than no selector, because it looks done. */ .num, .stat, .rank, .amount, .equity, .fs-plate .st, .pot, .pot-amount, .board .card, .card .rk, .stack, .stat-val, .statline, .gto-num, .bet-chip, .outs, [data-stack], [data-pot] { font-variant-numeric: tabular-nums slashed-zero; font-feature-settings: 'tnum' 1, 'zero' 1; } /* §4.2 — NEVER ITALICS. The font has no italic; every `font-style: italic` in this codebase was a browser-synthesised oblique, which the spec's sources call "awkward, uneven, and not recommended for professional work". Emphasis is weight. This rule is the backstop; the eight real instances were removed at source on 2026-08-17. */ i, em, cite, address, var, dfn, .italic, [style*="italic"] { font-style: normal; font-synthesis: none; } /* ---- the exception, and the only one ----------------------------------- A quotation from a named author. Real italic, real serif, so nothing is synthesised. font-synthesis stays `none`: if the face ever fails to load, this falls back to Georgia -- which also ships a true italic -- rather than to a sheared Space Grotesk. */ blockquote.cite, .cite-quote, q.cite, .tier-cited blockquote { font-family: var(--font-cite); font-style: italic; font-weight: 400; font-size: 1.06em; /* serif italic runs optically smaller than the sans */ line-height: 1.55; letter-spacing: 0; /* the +0.008em opening is for Space Grotesk only */ border-left: 2px solid #2b4756; padding-left: 13px; color: #CFE3DC; } /* The attribution is NOT italic -- the quote is the voice, the author is a fact. Sans, so the two read as different kinds of thing. */ blockquote.cite cite, .cite-quote cite, .cite-author { display: block; margin-top: 7px; font-family: var(--font); font-style: normal; font-weight: 500; font-size: .86em; color: #8A9490; } /* Tiger's quoted lines used italics to sound like speech. Weight and colour carry it instead — prose sits at 400, so 700 is a large jump. */ em, .tiger-quote, .quote { font-weight: 700; } /* §5 — ON BLACK. Light text on dark optically bolds, and this face is already dense. Pure white maximises halation, so the app's near-white is used instead. */ @media (prefers-color-scheme: dark) { body { letter-spacing: 0.016em; /* §5 — NEVER PURE WHITE. Maximum luminance against near-black maximises halation: the strokes bloom and a dense face closes up. #F2F4F5 is one step down and the difference is invisible except that it stops. */ color: #F2F4F5; } /* §5 — drop one weight step on dark. Light-on-dark optically bolds, and this face is already dense, so a 700 heading on #0A0A0A reads heavier than the same 700 on white. Applied to headings and labels, NOT to the nav active state, which is meant to shout. */ h1, h2, h3, .lbl, .name, .label { font-weight: 600; } } /* ========================================================================== ⛔ NO ORPHANS — Eric, 2026-08-25: "do an audit for ALL orphans and eliminate them." An orphan is a single word stranded on the last line of a paragraph. It reads as a mistake, and on a sales page it reads as a careless one. ⭐ TWO DIFFERENT PROPERTIES, AND THEY ARE NOT INTERCHANGEABLE: · `balance` evens out the lines of SHORT text — right for headings, and every engine caps it at a few lines, so on a paragraph it quietly does nothing at all. · `pretty` reflows the LAST few lines specifically to avoid an orphan — that is the one this is about, and it is right for body copy. Both degrade to ordinary wrapping where unsupported, so the worst case is the behaviour we already had. ========================================================================== */ h1, h2, h3, h4, .eyebrow, .feel b, .player h3, .step h3, blockquote { text-wrap: balance; } p, li, .lede, figcaption, .sub, .hint, .tcoach, .wbw-tiger, dd { text-wrap: pretty; } /* ⚠️ `pretty` IS NOT ENOUGH IN A NARROW COLUMN, AND THESE ARE NARROW. The "Confused" card on the home page is 210px wide. text-wrap:pretty reflows the last few lines to avoid an orphan, but with only three or four words per line it has almost nothing to trade, and the paragraph still ended on a line reading just "hand." at 1440 and 1280. ⛔ A NON-BREAKING SPACE DOES NOT FIX IT EITHER, and that is worth recording because it is the obvious move. Measured: with U+00A0 between "second-best" and "hand." (verified as char code 160 in the DOM) Chrome still broke the line there in a 210px box. `balance` fixed it in the same measurement -- last line came back as "second-best hand.". ⭐ balance over pretty for SHORT blocks in NARROW boxes: it evens the lines out across the whole paragraph rather than only reflowing the tail. */ .feel p, blockquote.founder p, .lk-cost { text-wrap: balance; }