/* ================================================================= NLI Portal — Design Tokens "The Record" — interpreting is fidelity work: nothing added, nothing lost. The portal reads as a well-kept official register. Audience: court/medical interpreters, school district and county agency staff. Institutional software for high-stakes work. GOLD IS RARE AND MEANS SOMETHING — verified credentials, a signed agreement, active status. It is a notary seal, never decoration. ================================================================= */ /* ---------- Typefaces (self-hosted, no CDN) ---------- Newsreader : editorial serif, authority for headings + the signature moment. Public Sans : USWDS's federal-government face. NLI serves courts, school districts and county agencies — the reference is deliberate, and it holds up at table sizes. Both are variable: one file per family covers every weight. */ @font-face { font-family: 'Newsreader'; src: url('/static/fonts/newsreader-var-latin.woff2') format('woff2-variations'); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Public Sans'; src: url('/static/fonts/publicsans-var-latin.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* ---------- Brand (fixed) ---------- */ --navy: #1a2b4a; --blue: #2e6bc6; --gold: #d4a843; /* ---------- Navy scale: the chrome ---------- */ --navy-900: #0f1a2e; --navy-800: #14223c; --navy-700: #1a2b4a; --navy-600: #24395e; --navy-500: #33496f; --navy-400: #4c6285; --navy-300: #7d8da8; /* ---------- Paper: content surfaces ---------- Warm off-white, never stark #fff. Long sessions, document feel. */ --paper: #faf8f4; --paper-raised:#fffdf9; --paper-sunk: #f2efe8; --rule: #e2ddd2; --rule-strong: #cdc6b8; /* ---------- Ink ---------- */ --ink: #1c1e22; --ink-muted: #5a6068; --ink-faint: #878d96; --ink-inverse: #f3f1ec; /* ---------- Accents ---------- */ --blue-600: #2456a3; --blue-500: #2e6bc6; --blue-050: #e8f0fb; --gold-600: #a8811f; --gold-500: #d4a843; --gold-050: #fbf3dd; /* CONTRAST RULE FOR GOLD — measured, not eyeballed. Brand gold #d4a843 is 2.18:1 on paper: it FAILS AA body (4.5:1), AA large, and the 3:1 UI threshold. It is legal only as a FILL under dark text (navy on gold = 7.85:1) or on navy (6.37:1). White on gold is never legal (2.21:1) — do not invert it on hover. For gold-coloured TEXT on a light surface use --gold-ink. */ --gold-ink: #7a5c18; /* 6.13:1 on --paper-raised — AA body */ --gold-ink-hi: #8a6a19; /* 4.97:1 — AA body, closer to the brand */ /* ---------- Semantic (used sparingly) ---------- */ --ok: #2f6f4f; --ok-050: #e7f2ec; --warn: #9a6b12; --warn-050: #fdf2dd; --danger: #a33232; --danger-050: #fbeaea; /* ---------- Type ---------- Serif for voice, sans for work. */ --font-display: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif; --font-ui: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace; /* Modular scale, 1.2 minor third off 16px */ --t-xs: 0.75rem; /* 12 — table meta, labels */ --t-sm: 0.875rem; /* 14 — dense UI, table body */ --t-base: 1rem; /* 16 — body */ --t-md: 1.125rem; /* 18 — lead paragraph */ --t-lg: 1.375rem; /* 22 — section heading */ --t-xl: 1.75rem; /* 28 — page heading */ --t-2xl: 2.25rem; /* 36 — display */ --t-3xl: 3rem; /* 48 — hero / signature moment */ --lh-tight: 1.15; --lh-snug: 1.35; --lh-body: 1.6; /* Letterspacing: labels are set in small caps, tracked out like a ledger column header. */ --track-label: 0.09em; --track-tight: -0.011em; /* ---------- Space: 4px base ---------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; /* ---------- Rules & radii ---------- Hairlines, not chunky borders. Radii stay small — documents have corners. */ --hair: 1px; --r-sm: 3px; --r-md: 5px; --r-lg: 8px; /* ---------- Elevation: paper lifting off paper ---------- */ --lift-1: 0 1px 2px rgba(26, 43, 74, 0.06), 0 1px 1px rgba(26, 43, 74, 0.04); --lift-2: 0 2px 4px rgba(26, 43, 74, 0.07), 0 4px 12px rgba(26, 43, 74, 0.06); --lift-3: 0 8px 24px rgba(26, 43, 74, 0.10), 0 2px 6px rgba(26, 43, 74, 0.06); --ring-focus: 0 0 0 3px rgba(46, 107, 198, 0.28); --ring-seal: 0 0 0 3px rgba(212, 168, 67, 0.30); /* ---------- Motion: restrained, deliberate ---------- */ --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1); --ease-seal: cubic-bezier(0.34, 1.28, 0.64, 1); --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 520ms; --measure: 68ch; --shell-w: 76rem; } /* Honour user preference — some interpreters work with accessibility tooling professionally and will notice if we don't. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ================================================================= Primitives shared by every portal surface ================================================================= */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-ui); font-size: var(--t-base); line-height: var(--lh-body); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: var(--lh-tight); letter-spacing: var(--track-tight); margin: 0; } /* Ledger column header — used for every field label and table head */ .label { font-family: var(--font-ui); font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-faint); } /* Hairline rule with a gold tick — the register motif */ .rule { border: 0; border-top: var(--hair) solid var(--rule); margin: var(--s-5) 0; } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--r-sm); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }