/* ===================================================================== HirerAI — Design Tokens (v1.1 — Light-Mode Pivot) Source of truth: research/light-mode-pivot/01-steve-guardrails.md Editorial off-white. Warm near-black. Darkened molten. Hairline-only. Dark tokens moved to [data-theme="dark"] for hub.html, pulse.html, and embedded Living Resume components. ===================================================================== */ :root { /* === BASE / SURFACES (light editorial — Anthropic-leaning) === */ --bg: #F7F4EE; --bg-elevated: #FDFBF6; --surface: #FDFBF6; --surface-2: #FFFFFF; /* rare — only inside cards already on FDFBF6 */ --surface-sunken: #F2EFE9; /* === BORDERS (warm hairline) === */ --border: #E3DED4; --border-strong: #C9C2B3; --border-accent: rgba(212, 85, 26, 0.35); /* === INK (warm near-black) === */ --ink: #14110E; --ink-strong: #0A0805; --muted: #6B665C; --muted-strong: #4A453D; /* --faint: decorative only — dividers, disabled states. NOT for text (fails WCAG AA). */ --faint: #A39E94; /* === ACCENT (molten, contrast-calibrated for light surfaces) === */ --accent: #D4551A; --accent-hover: #E46A2A; --accent-pressed: #B94A15; --accent-focus-ring: rgba(212, 85, 26, 0.60); --accent-glow: rgba(212, 85, 26, 0.12); --accent-tint: rgba(212, 85, 26, 0.06); /* Button-bg alias: white-label text needs 4.5:1 — drop to pressed for CTA bg. */ --accent-btn-bg: #B94A15; /* Accent used for small text/labels on --bg (needs 4.5:1 WCAG AA). */ --accent-text: #A83A0C; /* === SEMANTIC === */ --success: #0F766E; /* forest, re-anchored for paper */ --warning: #B45309; --danger: #B91C1C; --data-live: #0F766E; /* forest — updated-now whisper */ --data-live-glow: rgba(15, 118, 110, 0.15); /* === TYPE === */ --font-sans: 'Geist', 'Geist Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'Geist Mono', 'SF Mono', Menlo, Monaco, 'Courier New', monospace; --t-display-xl: clamp(2.75rem, 5.2vw, 4.25rem); --t-display-lg: clamp(2rem, 3.8vw, 3rem); --t-h1: 2rem; --t-h2: 1.5rem; --t-h3: 1.125rem; --t-h4: 0.9375rem; --t-body-lg: 1.0625rem; --t-body: 0.9375rem; --t-body-sm: 0.8125rem; --t-micro: 0.6875rem; --t-mono: 0.875rem; --t-mono-hero: 1.0625rem; --t-mono-xl: 2rem; /* === MOTION === */ --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; --dur-hero-reveal: 2400ms; /* === ELEVATION (hairline only on light — NO blur shadows) === */ --elev-0: none; --elev-1: 0 0 0 1px var(--border); --elev-2: 0 0 0 1px var(--border-strong); --elev-3: 0 0 0 1px var(--border-strong); --elev-accent: 0 0 0 1px var(--border-accent); /* === RADIUS === */ --radius-sharp: 2px; --radius-input: 6px; --radius-button: 6px; --radius-card: 8px; --radius-panel: 12px; --radius-pill: 999px; /* === SPACING === */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; } /* ===================================================================== Candidate warmth — 2% warmer shift on the LIGHT base. Used on candidate.html and candidate-hub.html. ===================================================================== */ [data-theme="candidate"] { --bg: #F5F1E8; /* 2% warmer than default light */ --bg-elevated: #FBF8F1; --surface: #FBF8F1; --surface-sunken: #EFEBE1; --border: #DFD9CC; } /* ===================================================================== Dark theme — Bloomberg-Terminal register. Used on hub.html, pulse.html, and embedded Living Resume components via data-theme="dark" on the element or a wrapping container. ===================================================================== */ [data-theme="dark"] { /* === BASE / SURFACES === */ --bg: #08090B; --bg-elevated: #0E1014; --surface: #111318; --surface-2: #161920; --surface-sunken: #05060A; /* === BORDERS === */ --border: #1F2229; --border-strong: #2A2E37; --border-accent: rgba(240, 106, 31, 0.35); /* === TEXT === */ --ink: #E8EAED; --ink-strong: #F5F6F7; --muted: #9096A1; --muted-strong: #B5BAC3; --faint: #5A6068; /* === ACCENT (original molten — optimised for dark) === */ --accent: #F06A1F; --accent-hover: #FB8236; --accent-pressed: #D85A10; --accent-focus-ring: rgba(240, 106, 31, 0.35); --accent-glow: rgba(240, 106, 31, 0.18); --accent-tint: rgba(240, 106, 31, 0.08); --accent-btn-bg: #F06A1F; /* === SEMANTIC === */ --success: #10B981; --warning: #F59E0B; --danger: #EF4444; --data-live: #22D3A2; --data-live-glow: rgba(34, 211, 162, 0.22); /* === ELEVATION (blur shadows permitted on dark — they hold) === */ --elev-3: 0 0 0 1px var(--border-strong), 0 0 24px rgba(0, 0, 0, 0.4); --elev-accent: 0 0 0 1px var(--border-accent), 0 0 32px rgba(240, 106, 31, 0.12); } /* ===================================================================== Living Resume container pattern — "document embedded in paper". Wrap any .hero-lr or .hero-side on a light marketing page with:
...
The frame provides the warm-paper hairline against the dark panel. ===================================================================== */ .lr-frame[data-theme="dark"] { background: #08090B; border: 1px solid #E3DED4; /* warm paper hairline, not a dark border */ border-radius: var(--radius-panel); padding: 16px; /* No box-shadow. Hairline on dark surface is the frame. */ } @media (min-width: 768px) { .lr-frame[data-theme="dark"] { padding: 20px; } } /* ===================================================================== Geist font-face — self-hosted (SIL OFL, Vercel/Geist v1.8.0) ===================================================================== */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/Geist-Regular.woff2') format('woff2'); } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/Geist-Medium.woff2') format('woff2'); } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/Geist-SemiBold.woff2') format('woff2'); } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/Geist-Bold.woff2') format('woff2'); } @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/GeistMono-Regular.woff2') format('woff2'); } @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/GeistMono-Medium.woff2') format('woff2'); } /* ===================================================================== Reset + base ===================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { height: 100%; } body { min-height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-feature-settings: 'ss01', 'cv11'; font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; line-height: 1.5; } ::selection { background: var(--accent-tint); color: var(--ink-strong); } /* Focus baseline — always replaced, never nulled */ :focus { outline: none; } :focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-focus-ring); border-radius: var(--radius-input); } /* Links — quiet default, not decorated */ a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } /* ===================================================================== Type classes ===================================================================== */ .display-xl { font-family: var(--font-sans); font-size: var(--t-display-xl); font-weight: 600; line-height: 1.04; letter-spacing: -0.035em; color: var(--ink-strong); } .display-lg { font-family: var(--font-sans); font-size: var(--t-display-lg); font-weight: 600; line-height: 1.08; letter-spacing: -0.028em; color: var(--ink-strong); } .h1 { font-size: var(--t-h1); font-weight: 600; line-height: 1.15; letter-spacing: -0.022em; color: var(--ink-strong); } .h2 { font-size: var(--t-h2); font-weight: 600; line-height: 1.2; letter-spacing: -0.018em; color: var(--ink-strong); } .h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; color: var(--ink); } .h4 { font-size: var(--t-h4); font-weight: 600; line-height: 1.35; letter-spacing: -0.008em; color: var(--ink); } .body-lg { font-size: var(--t-body-lg); font-weight: 400; line-height: 1.55; letter-spacing: -0.005em; color: var(--muted-strong); } .body { font-size: var(--t-body); font-weight: 400; line-height: 1.55; color: var(--ink); } .body-sm { font-size: var(--t-body-sm); font-weight: 400; line-height: 1.5; color: var(--muted); } .micro { font-family: var(--font-sans); font-size: var(--t-micro); font-weight: 500; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .mono { font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--ink); } .mono-hero { font-family: var(--font-mono); font-size: var(--t-mono-hero); font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; color: var(--ink-strong); } .mono-xl { font-family: var(--font-mono); font-size: var(--t-mono-xl); font-weight: 500; line-height: 1.05; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; color: var(--ink-strong); } /* ===================================================================== Shared components — buttons, inputs, metric-row, nav, footer ===================================================================== */ /* --- Buttons --- */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 40px; min-height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-button); background: var(--accent-btn-bg); color: #FFFFFF; font-family: var(--font-sans); font-size: var(--t-body); font-weight: 600; letter-spacing: -0.005em; border: none; cursor: pointer; text-decoration: none; transition: background-color var(--dur-fast) var(--ease-out-quart), box-shadow var(--dur-base) var(--ease-out-quart); } [data-theme="dark"] .btn-primary { color: #0A0506; } .btn-primary:hover { background: var(--accent-hover); box-shadow: var(--elev-accent); } .btn-primary:active { background: var(--accent-pressed); } .btn-primary:focus-visible { box-shadow: 0 0 0 3px var(--accent-focus-ring); } .btn-primary[disabled] { opacity: 0.4; cursor: not-allowed; } .btn-primary.btn-lg { height: 48px; padding: 0 var(--space-6); font-size: var(--t-body-lg); } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 40px; min-height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-button); background: transparent; color: var(--ink); border: 1px solid var(--border); font-family: var(--font-sans); font-size: var(--t-body); font-weight: 500; cursor: pointer; text-decoration: none; transition: background-color var(--dur-fast) var(--ease-out-quart), border-color var(--dur-fast) var(--ease-out-quart); } .btn-ghost:hover { background: var(--surface-2); border-color: var(--border-strong); } .btn-ghost:active { background: var(--surface); } .btn-ghost:focus-visible { box-shadow: 0 0 0 3px var(--accent-focus-ring); } .btn-ghost.btn-lg { height: 48px; padding: 0 var(--space-6); font-size: var(--t-body-lg); } /* --- Inputs --- */ .input { width: 100%; height: 40px; padding: 0 var(--space-4); background: var(--surface-sunken); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-input); font-family: var(--font-sans); font-size: var(--t-body); line-height: 1.5; transition: border-color var(--dur-fast) var(--ease-out-quart), box-shadow var(--dur-fast) var(--ease-out-quart); } .input::placeholder { color: var(--faint); } .input:hover { border-color: var(--border-strong); } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-focus-ring); } .input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22); } .input.input-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* --- Nav --- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 56px; padding: 0 var(--space-6); display: flex; align-items: center; justify-content: space-between; background: var(--bg); border-bottom: 1px solid transparent; transition: background-color var(--dur-base) var(--ease-out-quart), border-color var(--dur-base) var(--ease-out-quart), backdrop-filter var(--dur-base) var(--ease-out-quart); } .nav[data-scrolled="true"] { background: rgba(247, 244, 238, 0.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: var(--border); } [data-theme="dark"] .nav[data-scrolled="true"] { background: rgba(8, 9, 11, 0.72); } .nav-brand { text-decoration: none; display: inline-flex; align-items: center; } .nav-wordmark { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-strong); } .nav-links { display: flex; align-items: center; gap: var(--space-5); } .nav-link { font-size: var(--t-body-sm); font-weight: 500; color: var(--muted); text-decoration: none; transition: color var(--dur-fast) var(--ease-out-quart); } .nav-link:hover { color: var(--ink); } .nav-link[aria-current="page"] { color: var(--ink-strong); } .nav-cta { height: 32px; padding: 0 var(--space-4); font-size: var(--t-body-sm); } @media (max-width: 640px) { .nav { padding: 0 var(--space-4); } .nav-links .nav-link:not(.nav-cta) { display: none; } } /* --- Metric row --- */ .metric-row { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-4) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .metric { display: flex; flex-direction: column; gap: var(--space-1); position: relative; flex: 1; } .metric-label { font-family: var(--font-sans); font-size: var(--t-micro); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); } .metric-value { color: var(--ink-strong); } .metric-divider { width: 1px; height: 28px; background: var(--border); } .metric-pulse { position: absolute; top: 0; right: -2px; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--data-live); /* Light mode: no glow, no pulse — Steve: "just a dot" */ } [data-theme="dark"] .metric-pulse { box-shadow: 0 0 10px var(--data-live-glow); animation: pulse 2s var(--ease-in-out-quart) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* --- Skill crystal (Living Resume atom) --- */ .crystal { display: inline-flex; align-items: center; gap: var(--space-2); height: 26px; padding: 0 var(--space-3); background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-sharp); font-family: var(--font-sans); font-size: var(--t-body-sm); font-weight: 500; letter-spacing: -0.005em; transition: border-color var(--dur-fast) var(--ease-out-quart); list-style: none; } .crystal:hover { border-color: var(--border-strong); } .crystal[data-level="expert"] { border-color: var(--border-accent); box-shadow: inset 0 0 0 1px rgba(240, 106, 31, 0.08); } .crystal[data-level="expert"]::before { content: ''; width: 4px; height: 4px; border-radius: var(--radius-pill); background: var(--accent); } .crystal[data-level="strong"]::before { content: ''; width: 4px; height: 4px; border-radius: var(--radius-pill); background: var(--muted-strong); } .crystal[data-level="growing"] { color: var(--muted); border-style: dashed; } .crystal.crystal-revealing { opacity: 0; transform: translateY(6px) scale(0.96); animation: crystal-in 360ms var(--ease-out-quart) var(--delay, 0ms) forwards; } @keyframes crystal-in { to { opacity: 1; transform: translateY(0) scale(1); } } /* --- Footer --- */ .site-footer { border-top: 1px solid var(--border); padding: var(--space-8) var(--space-6) var(--space-6); } .footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-8); } .footer-col { display: flex; flex-direction: column; gap: var(--space-2); } .footer-wordmark { font-size: 1rem; font-weight: 600; color: var(--ink-strong); letter-spacing: -0.02em; } .footer-tagline { color: var(--muted); max-width: 280px; } .footer-heading { color: var(--muted); margin-bottom: var(--space-2); } .footer-link { font-size: var(--t-body-sm); color: var(--muted); text-decoration: none; padding: var(--space-1) 0; transition: color var(--dur-fast) var(--ease-out-quart); } .footer-link:hover { color: var(--ink); } .footer-legal { max-width: 1200px; margin: var(--space-7) auto 0; padding-top: var(--space-5); border-top: 1px solid var(--border); } @media (max-width: 768px) { .footer-inner { grid-template-columns: 1fr; gap: var(--space-6); } } /* ===================================================================== Reduced motion — honoured universally ===================================================================== */ @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; } .metric-pulse { animation: none !important; } }