/* Li Ranci — base tokens, typography, primitives. Loaded by both the public site and the guest area. */ /* Fonts are loaded via in the HTML (with preconnect hints) for parallel fetching. See public/index.html and functions/g/[[token]].js. */ :root { --paper: #fafaf7; --paper-2: #f3f2ec; --ink: #1a1a1a; --ink-soft: #3a3a38; --pencil: #8a8a85; --pencil-light: #c9c8c1; --sea: #2b6a9a; --sea-deep: #1f4f73; /* AA on paper for body links */ --sea-soft: #d9e6ef; /* --font-hand : Caveat — expressive headlines and brand voice only. --font-body : Source Serif 4 — anything the user has to read. --font-mono : JetBrains Mono — metadata, kickers, captions, codes. */ --font-hand: 'Caveat', cursive; --font-body: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --font-brand: 'Cinzel', 'Trajan Pro', 'Source Serif 4', serif; --shadow-card: 3px 3px 0 rgba(26,26,26,0.08); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; } body { background-image: radial-gradient(circle at 20% 30%, rgba(0,0,0,0.015) 1px, transparent 1px), radial-gradient(circle at 70% 60%, rgba(0,0,0,0.01) 1px, transparent 1px); background-size: 140px 140px, 200px 200px; } a { color: var(--sea-deep); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--ink); } button { font: inherit; cursor: pointer; } img { max-width: 100%; display: block; } /* ── Brand chrome ───────────────────────────────────── */ .brand-mark { font-family: var(--font-hand); font-weight: 700; line-height: 0.9; display: inline-flex; align-items: center; text-decoration: none; color: inherit; } .brand-mark { gap: 10px; } .brand-crab { width: 44px; height: auto; display: block; filter: drop-shadow(0 1px 0 rgba(26,26,26,0.06)); } .brand-wordmark { font-family: var(--font-brand); font-weight: 600; font-size: 22px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); line-height: 1; } .brand-foot-img { width: 220px; height: auto; display: block; margin: 0; filter: brightness(0) invert(1) opacity(0.92); } .brand-name { font-family: var(--font-brand); font-style: normal; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .brand-mark small { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pencil); font-weight: 400; margin-top: 4px; } /* mono kicker / caption */ .kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pencil); } .kicker.sea { color: var(--sea); } /* sea CTA */ .cta-sea { display: inline-block; background: var(--sea); color: var(--paper); font-family: var(--font-hand); font-size: 20px; padding: 8px 18px; border-radius: 2px; text-decoration: none; border: none; } .cta-sea:hover { background: var(--ink); color: var(--paper); } /* dashed kv row used in guest cards + hero panel: left b key in body serif, right v value in mono */ .kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 6px 0; border-top: 1px dashed var(--pencil-light); } .kv:first-child { border-top: none; } .kv b { font-weight: 500; } .kv .v { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); } /* visually-hidden but screen-reader available */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }