/* ══════════════════════════════════════════════════════════════════ LIQUA · TYPE SYSTEM Loaded LAST so it wins. Three jobs: 1 · ONE type system instead of five families 2 · Every size legible — nothing below 14px, body at 16px 3 · Every colour measured against the REAL background ── Why the text was unreadable ───────────────────────────────── The palette assumes a near-black navy (#0a0c12). The arcade skin repaints the page a mid-green (rgb(47,74,61)) but the text tokens never followed, so contrast collapsed: --muted #7a849c → 5.22 on navy · 2.59 on green (needs 4.5) --dimc #495066 → 2.44 on navy · 1.21 on green (invisible) Nine of thirteen text styles failed WCAG AA. The colours below are chosen to pass on BOTH backgrounds, so the skin can change again without silently making the site unreadable a second time. ── The voice ─────────────────────────────────────────────────── Outfit for display: geometric, round, confident — the Google register. At 800 it gets the tight, heavy punch that reads as TikTok. Inter for body, because it is still the most legible UI face at small sizes. JetBrains Mono for numbers ONLY, never prose. ══════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap'); :root{ --font-display: 'Outfit', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace; /* v3: measured against the midnight board (#161838) and the card cel (#1f2250). */ --text: #f6f3ff; /* 15.7 board · 13.7 cel */ --muted: #c7c2ea; /* 10.1 board · 8.8 cel */ --dimc: #b5afdf; /* 8.3 board · 7.2 cel */ --dim: #b5afdf; /* Fluid scale — one ratio, so nothing is an arbitrary size. */ --t-xs: clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem); /* 13→14 · labels only */ --t-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem); /* 14→15 */ --t-base:clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); /* 16→17 · body */ --t-lg: clamp(1.125rem, 1.07rem + 0.28vw, 1.25rem); --t-xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem); --t-2xl: clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem); --t-3xl: clamp(2.25rem, 1.7rem + 2.6vw, 4rem); } /* ── Body ─────────────────────────────────────────────────────── */ body{ font-family: var(--font-body); font-size: var(--t-base); line-height: 1.7; color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ── Display ──────────────────────────────────────────────────── */ h1, h2, h3, h4, .brand, .sec, .ititle{ font-family: var(--font-display); font-weight: 800; line-height: 1.08; letter-spacing: -0.022em; /* the tight TikTok set */ color: var(--text); } h1, .ititle{ font-size: var(--t-3xl); font-weight: 900; letter-spacing: -0.03em; } h2, .sec { font-size: var(--t-2xl); } h3 { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.012em; } h4 { font-size: var(--t-base); font-weight: 700; letter-spacing: -0.008em; } .brand{ font-weight: 900; letter-spacing: .1em; } /* ── Prose ────────────────────────────────────────────────────── */ p, li, dd, dt, label, figcaption{ font-family: var(--font-body); } p{ line-height: 1.75; } .sub{ font-size: var(--t-lg); line-height: 1.65; color: var(--muted); font-weight: 400; max-width: 68ch; /* measure — the other half of readability */ } /* ── Labels ─────────────────────────────────────────────────────── Uppercase micro-labels are where legibility usually dies. Floor at 13px, add tracking (uppercase needs it), and never below 4.5:1. */ .eyebrow, .lq-chip, .k, .ctitle, .hlabel{ font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4; } .eyebrow{ color: var(--muted); display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; } /* ── Numbers ────────────────────────────────────────────────────── Mono is for DATA, never for sentences. Tabular figures so columns of numbers line up and can be compared by eye. */ .stat .v, .num, .lq-tier__mult, .lq-calc__grid dd, .lq-shard__delta, .lq-shard__share, pre, code, kbd{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; } pre, code{ font-size: var(--t-sm); line-height: 1.65; } /* ── Component minimums ─────────────────────────────────────────── Everything the audit caught below 14px or under 4.5:1. */ .lq-steps p, .lq-tier__note, .lq-calc__grid dt, .lq-honest, .feat p, .lq-duo__role, .lq-note p, .lq-shardgrid p, .expect, .sub{ font-size: var(--t-sm); color: var(--muted); line-height: 1.7; } .lq-shard__delta, .lq-shard__share, .lq-calc__foot{ font-size: var(--t-xs); color: var(--dimc); } .lq-steps h4{ font-size: var(--t-base); } .lq-duo__line{ font-size: var(--t-base); color: var(--text); } .lq-calc__grid dt{ font-weight: 500; } .lq-calc__grid dd{ font-weight: 700; font-size: var(--t-base); } /* ── Kill the decorative faces on public pages ──────────────────── Special Elite and Press Start 2P arrive with the arcade/nostalgia skin. They are lovely on the arcade surfaces and actively hostile to a whitepaper, so they are overridden HERE ONLY — the shared stylesheet is untouched and every other project keeps them. */ body, body *:not(pre):not(code):not(kbd):not([class*="arcade"]):not([class*="retro"]){ font-family: inherit; } h1, h2, h3, h4, .sec, .brand, .eyebrow{ font-family: var(--font-display) !important; } p, li, dd, dt, .sub, label, span:not([class*="mono"]):not(.v):not(.num){ font-family: var(--font-body); } /* ── Links ────────────────────────────────────────────────────── */ a{ color: var(--ice); text-underline-offset: 3px; } a:hover{ text-decoration: underline; } /* ── Small screens ──────────────────────────────────────────────── Tighten the display face, never the body copy. */ @media (max-width: 640px){ h1, .ititle{ letter-spacing: -0.02em; } .sub{ font-size: var(--t-base); } body{ line-height: 1.65; } } /* Respect the reader's own font-size preference — never lock rem. */ @media (prefers-reduced-motion: no-preference){ html{ scroll-behavior: smooth; } } /* ── 18 · THE HERO STAT BLOCK ───────────────────────────────────── The arcade skin styles .k with Special Elite (typewriter) and .stat .v with Press Start 2P — an 8-bit face with no lowercase, no tabular figures and near-zero legibility below 24px. It was rendering the numbers that matter most: chain ID, block height, emission/block. Those two rules carry the skin's own weight, so overriding them needs !important. Scoped to these classes only, in a liqua-only stylesheet — the shared arcade sheet is untouched and every other project keeps its 8-bit look. */ .k, .stat .k, .hlabel{ font-family: var(--font-display) !important; font-size: var(--t-xs) !important; font-weight: 700 !important; letter-spacing: .13em !important; text-transform: uppercase; color: var(--muted) !important; line-height: 1.4 !important; } .stat .v, .stat .stat .stat .v{ /* Numbers get mono for tabular alignment — a stat that changes must not make the row jump. */ font-family: var(--font-mono) !important; font-variant-numeric: tabular-nums; font-weight: 700 !important; letter-spacing: -0.01em !important; font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem) !important; line-height: 1.15 !important; } /* Any remaining decorative face on a public liqua page. */ [style*="Press Start"], [style*="Special Elite"]{ font-family: var(--font-body) !important; } /* ── 19 · THE SMALL-TEXT FLOOR ──────────────────────────────────── A full computed-style audit of every visible element found 37 items under 12.5px on the home page alone — tags at 10px, the legal disclaimer at 11px, stat captions at 10.88px. Nothing that carries meaning goes below 13px. The disclaimer gets 14px because text with legal weight that nobody can read is worse than no disclaimer at all. */ .tag, a.tag, span.tag, .tagchip, .ph, .n, .mono, em, .lq-step__n, .lq-shard__share, .pct, .step__n, .expect, .lq-duo__stats span, .fld span, label.fld span{ font-size: var(--t-xs) !important; /* 13→14px fluid */ line-height: 1.5 !important; } .disc, .disclaimer, footer, footer *{ font-size: var(--t-sm) !important; /* 14→15px */ line-height: 1.65 !important; color: var(--muted) !important; } /* Uppercase micro-labels need tracking to stay legible when small. */ .tag, .tagchip, .ph, .lq-step__n, .step__n{ letter-spacing: .08em; } /* ── 20 · NAVIGATION CONTRAST ───────────────────────────────────── The arcade skin paints the top bar as tan paper — rgb(176,125,74). Light text on that is 1.89:1, so the nav was the least legible thing on the page: the first six words a visitor reads. The paper bar is the '95-classroom character of the design and worth keeping, so the fix is INK, not repainting the bar. Measured on rgb(176,125,74): #ffffff 3.57 fail #2a2620 4.21 fail #b3bdd0 1.89 fail #15110c 5.26 PASS Scoped to