/* * Shared design language tokens — Newsreader / Instrument Sans / IBM Plex Mono * fonts, and the --rp-* color custom properties. Single source, extracted * from app/views/reports/show.html.erb (the reference implementation; see * ROLE_IA_PLAN.md, WEB_EXPERIENCE_PLAN.md §1). Dark is the default theme. * * Usage: add `wp-surface` to a page's root element to opt in. Add * `wp-theme-light` alongside it for the light/print variant. The `.report` / * `.report-theme-light` selectors are included directly (not duplicated) * so the career report — already shipped — draws from this same source * without any markup changes. * * Fonts are self-hosted (app/assets/fonts/, Latin subset only — matches what * these pages' copy actually uses) rather than the Google Fonts @import this * file used to carry (W2 brief: no external font requests in page source). * Filenames are relative; Propshaft rewrites them to digested /assets/ paths * when it compiles this file (verified: no extra plugin needed). */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/ibm-plex-mono-400-d803141a.woff2") format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/ibm-plex-mono-500-3f7bbac1.woff2") format('woff2'); } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; /* variable font, one file covers the whole range */ font-display: swap; src: url("/assets/instrument-sans-variable-570a9648.woff2") format('woff2'); } @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400 500; /* variable font, one file covers 400 and 500 */ font-display: swap; src: url("/assets/newsreader-normal-4b499f36.woff2") format('woff2'); } @font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/newsreader-italic-400-4de64287.woff2") format('woff2'); } .wp-surface, .report { --rp-bg: #070A10; --rp-text: #EEF2F9; --rp-muted: #97A1B4; --rp-body: #B9C2D0; --rp-hair: rgba(255,255,255,0.07); --rp-hair2: rgba(255,255,255,0.14); --rp-accent: #3DA5FF; --rp-accent2: #29F2FF; /* Added for W2 (concept homepage): dim label / card surface / rule line, plus the canonical domain palette (CLAUDE.md) reused as semantic accents (Jobprint=violet, Strengths=green, Gaps=red, Neutral=steel). */ --rp-dim: #5F6A80; --rp-card: #0B0F17; --rp-rule: #39414F; --rp-label2: #C6CEDD; --rp-violet: #8B7CFF; --rp-green: #73F59D; --rp-red: #FF4D5E; --rp-steel: #8AA0A8; } .wp-surface.wp-theme-light, .report.report-theme-light { --rp-bg: #FAF9F5; --rp-text: #10192A; --rp-muted: #5A6474; --rp-body: #39445A; --rp-hair: rgba(11,21,36,0.10); --rp-hair2: rgba(11,21,36,0.18); --rp-accent: #1F7AD4; --rp-accent2: #0E8FA8; --rp-dim: #7A8394; --rp-card: #F1EFE9; --rp-rule: #D8D3C8; --rp-label2: #2C3547; --rp-violet: #6E5FCF; --rp-green: #2E8B57; --rp-red: #C23B4A; --rp-steel: #5E7276; } /* Base reset for chromeless wp-surface pages (marketing layout body) — the report page has its own equivalent inline; this is the shared version for any future layout that opts into wp-surface at the level. */ .wp-marketing-body { margin: 0; background: var(--rp-bg, #070A10); color: var(--rp-text, #EEF2F9); font-family: 'Instrument Sans', -apple-system, sans-serif; } /* Small reusable typographic voice, matching the report page's grammar (numbered section labels, mono data labels) for any surface that adopts wp-surface without needing to redeclare font-family/letter-spacing. */ .wp-mono { font-family: 'IBM Plex Mono', monospace; } .wp-serif { font-family: 'Newsreader', Georgia, serif; } .wp-kicker { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--rp-accent); margin: 0 0 10px; }