/* ============================================================= HireStrike Career — Colors & Type Source of truth: static/css/design-system.css + templates/marketing_base.html Teal-forward AI hiring platform. Two surfaces: - Marketing (light, airy, warm): Sora + Manrope, soft teal/orange radials - App (bright, product): Plus Jakarta Sans + Inter + Source Serif 4 body, sidebar uses a deeper teal gradient with cyan accent. ============================================================= */ /* Google Font fallbacks — the codebase self-hosts these. SUBSTITUTION FLAG: we import the Google Fonts CDN copies. Ship the self-hosted woff2s from static/fonts/ if exact-metric match is required. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Sora:wght@500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap'); :root { /* ---------- FONT STACKS ---------- Unified 3-family system: - Sora → ALL headings (marketing + app) - Inter → body, UI, captions, forms - Space Grotesk → numeric display only (KPIs, metrics) Legacy aliases kept so existing tokens still resolve. */ --font-display: "Sora", -apple-system, BlinkMacSystemFont, sans-serif; --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display-mono: "Space Grotesk", "JetBrains Mono", monospace; /* Legacy aliases — do not use in new code, but keep existing templates working */ --font-heading-app: var(--font-display); --font-heading-marketing: var(--font-display); --font-ui-marketing: var(--font-ui); --font-body-editorial: var(--font-ui); /* ---------- TYPE SCALE ---------- */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.25rem; /* 20 */ --text-2xl: 1.5rem; /* 24 */ --text-3xl: 1.875rem; /* 30 */ --text-4xl: 2.25rem; /* 36 */ --text-5xl: 3rem; /* 48 */ --text-6xl: 3.75rem; /* 60 */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.625; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-eyebrow: 0.05em; /* ---------- TOOLTIPS & POPOVERS (reference scale) ---------- Three tooltip variants live in the codebase today (each a different visual context, not just drift -- audit confirmed): 1. `.badge-item__tooltip` (ui-components.css) — micro hover-tip on stat badges. 11px font / 6px radius / 0.15s. 2. `.score-tooltip-overlay` (ui-components.css) — full-screen modal explainer for score breakdowns. 32px padding / 12px radius / 200ms / 600px max-width. 3. `.hs-help-menu` (onboarding_deck.css) — dropdown help menu. 14px radius / 320px width / 0.14s. New tooltip-like UI should use these tokens for radius / timing / padding so we stop accumulating one-off values. Existing three implementations stay where they are (different visual contexts, not in scope for retroactive migration). */ --tooltip-radius-micro: 6px; /* hover badges, small chips */ --tooltip-radius-card: 12px; /* score explainers, modals */ --tooltip-radius-menu: 14px; /* dropdown menus, popovers */ --tooltip-padding-y: 8px; --tooltip-padding-x: 12px; --tooltip-padding-card: 24px; /* roomier explainer body */ --tooltip-transition: 0.15s ease; --tooltip-font-micro: 11px; --tooltip-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); /* ---------- BREAKPOINTS (documentation only) ---------- CSS @media rules can't read CSS custom properties, so these are reference values, not consumed by the cascade. Every @media in the codebase should use one of these literal pixel values, not a bespoke number, so the responsive ladder stays consistent. Scale: --bp-2xs: 360px smallest phones (one-off, mobile-candidate only) --bp-xs: 480px small phones --bp-sm: 640px phones (tab landscape) --bp-md: 768px tablets / mobile cutoff (primary breakpoint) --bp-lg: 1024px small laptops --bp-xl: 1200px standard laptop --bp-2xl: 1440px mac-laptop / desktop hd Documented exceptions (do not migrate): 1100px — features/cockpit.css collapses the 380px sidebar layout at this point; intentional layout breakpoint. Eliminated anomalies (this audit): 769px → 768px was creating a 1px gap at the 768-769 boundary 992px → 1024px consolidated to --bp-lg 900px → 1024px consolidated to --bp-lg 420px → 480px consolidated to --bp-xs */ /* ---------- BRAND / PRIMARY - Teal ---------- Portal interiors should match the candidate/training login palette. */ --color-primary: #0F4C5C; /* default CTA, link, active nav */ --color-primary-hover: #0A3744; --color-primary-deep: #08313B; /* sidebar tail, hero footer */ --color-primary-light: #67E8F9; /* cyan highlight, sidebar logo stroke #22D3EE */ --color-primary-muted: #A5F3FC; --color-primary-bg: #ECFEFF; /* badge/chip tint */ --color-cyan-accent: #22D3EE; /* sidebar logo stroke */ /* ---------- ACCENT - Teal ---------- */ --color-accent: #0F4C5C; --color-accent-hover: #0A3744; --color-accent-light: #FDBA74; --color-accent-muted: #FED7AA; --color-accent-soft: #FFF2E8; /* from marketing tokens */ /* ---------- SECONDARY — Navy/Deep ---------- */ --color-navy: #1E3A5F; --color-navy-hover: #0F172A; --color-blue-bright: #3B82F6; /* ---------- FEATURE — Purple (sparingly, training) ---------- */ --color-purple: #8B5CF6; --color-purple-light: #EDE9FE; --color-purple-bg: #F5F3FF; /* ---------- BACKGROUNDS ---------- */ --bg-1: #FAFAF9; /* app page background — warm off-white */ --bg-2: #F5F5F4; /* section */ --bg-3: #E7E5E4; /* divider panel */ --bg-elevated: #FFFFFF; --bg-marketing: #F4F8FC; /* marketing --bg */ --bg-marketing-soft: #F7FBFF; --bg-dark-blue: #0A3744; /* inverse hero */ /* Marketing ambient wash — two radials + vertical fade */ --bg-marketing-ambient: radial-gradient(1100px 540px at -10% -20%, #d8efff 0%, rgba(216,239,255,0) 72%), radial-gradient(900px 520px at 110% 0%, #e2f9f2 0%, rgba(226,249,242,0) 70%), linear-gradient(180deg, #f7fbff 0%, #f4f8fc 100%); /* ---------- TEXT ---------- */ --fg-1: #1C1917; /* headings */ --fg-2: #44403C; /* body */ --fg-3: #78716C; /* caption */ --fg-muted: #A8A29E; --fg-inverse: #FFFFFF; --fg-link: #0F4C5C; --fg-marketing-text: #0F2439; --fg-marketing-muted: #4D667F; /* ---------- BORDERS ---------- */ --border-1: #E2E8F0; /* default */ --border-2: #CBD5E1; /* inputs */ --border-3: #94A3B8; /* focus/active */ --border-marketing: #CFE0F0; /* ---------- SEMANTIC ---------- */ --success: #059669; --success-light: #D1FAE5; --warning: #D97706; --warning-light: #FEF3C7; --error: #DC2626; --error-light: #FEE2E2; --info: #0284C7; --info-light: #E0F2FE; /* ---------- GRADIENTS ---------- */ --grad-primary: linear-gradient(135deg, #0F4C5C 0%, #0A3744 100%); --grad-hero: linear-gradient(135deg, #0F4C5C 0%, #0A3744 50%, #08313B 100%); --grad-sidebar: linear-gradient(180deg, #0A3744 0%, #08313B 100%); --grad-accent: linear-gradient(135deg, #0F4C5C 0%, #0A3744 100%); --grad-btn-marketing: linear-gradient(135deg, #067E9E 0%, #0C8FB0 52%, #26A7C7 100%); --grad-eyebrow: linear-gradient(125deg, #E8F6FE 0%, #EAFAF4 100%); /* ---------- SHADOWS ---------- Trimmed to 3 steps, unified ink (warm #1C1917 @ low alpha). - sm: hover lift, chips, subtle elevation - md: cards, default elevation - lg: modals, dropdowns, floating panels, prominent CTAs Legacy aliases kept so existing templates still resolve. */ --shadow-sm: 0 1px 2px rgba(28,25,23,0.06), 0 1px 1px rgba(28,25,23,0.04); --shadow-md: 0 4px 12px rgba(28,25,23,0.08), 0 2px 4px rgba(28,25,23,0.04); --shadow-lg: 0 12px 32px rgba(28,25,23,0.12), 0 4px 8px rgba(28,25,23,0.06); /* Legacy aliases — do not use in new code */ --shadow-xs: var(--shadow-sm); --shadow-xl: var(--shadow-lg); --shadow-marketing: var(--shadow-lg); --shadow-cta-primary: 0 8px 18px rgba(10,133,162,0.28); /* primary CTA keeps tinted glow */ /* ---------- SPACING ---------- Hybrid system: 10 numeric primitives on a 4px grid (for flexibility) + 4 semantic aliases (for intent). Prefer semantic aliases in new code. */ --space-1: 0.25rem; /* 4 · hairline gap, icon padding */ --space-2: 0.5rem; /* 8 · tight inline gap */ --space-3: 0.75rem; /* 12 · row padding, chip gap */ --space-4: 1rem; /* 16 · default item gap */ --space-5: 1.25rem; /* 20 · compact card padding */ --space-6: 1.5rem; /* 24 · card padding, grid gap */ --space-7: 1.75rem; /* 28 · generous card padding (was ad-hoc 28px) */ --space-8: 2rem; /* 32 · section gap */ --space-10: 2.5rem; /* 40 · section header margin */ --space-12: 3rem; /* 48 · block separation */ --space-16: 4rem; /* 64 · section vertical, hero y */ --space-20: 5rem; /* 80 · large breaks */ /* Semantic aliases — prefer these for intent */ --space-inline: var(--space-2); /* 8 · gap between inline things (icon↔label) */ --space-stack: var(--space-4); /* 16 · gap between stacked content blocks */ --space-card: var(--space-6); /* 24 · card inner padding */ --space-section: var(--space-16); /* 64 · section vertical rhythm */ /* ---------- RADII ---------- Trimmed to 3 steps. One system for app + marketing. - sm (8) : chips, inputs, small buttons, badges - md (14) : cards, tiles, panels (app + marketing) - pill : rounded buttons, pills, avatars Legacy aliases kept so existing templates still resolve. */ --radius-sm: 8px; --radius-md: 14px; --radius-pill: 9999px; /* Legacy aliases — do not use in new code */ --radius-lg: var(--radius-md); --radius-xl: var(--radius-md); --radius-2xl: var(--radius-md); --radius-marketing-lg: var(--radius-md); --radius-marketing-md: var(--radius-md); /* ---------- TRANSITIONS ---------- */ --transition-fast: 150ms ease; --transition-normal: 200ms ease; --transition-slow: 300ms ease; } /* ============================================================= SEMANTIC — ELEMENTS ============================================================= */ body { font-family: var(--font-ui); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg-2); background: var(--bg-1); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading-app); color: var(--fg-1); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin: 0; } h1 { font-size: var(--text-5xl); font-weight: 700; } h2 { font-size: var(--text-4xl); font-weight: 700; } h3 { font-size: var(--text-2xl); font-weight: 600; } h4 { font-size: var(--text-xl); font-weight: 600; } h5 { font-size: var(--text-lg); font-weight: 600; } h6 { font-size: var(--text-base);font-weight: 600; } /* Marketing pages swap heading font to Sora */ .on-marketing h1, .on-marketing h2, .on-marketing h3 { font-family: var(--font-heading-marketing); } .on-marketing { font-family: var(--font-ui-marketing); color: var(--fg-marketing-text); background: var(--bg-marketing-ambient); } .prose { font-family: var(--font-body-editorial); font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--fg-2); } .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--grad-eyebrow); color: var(--color-primary-hover); border: 1px solid rgba(10,140,168,0.2); border-radius: var(--radius-pill); padding: 0.35rem 0.75rem; font-size: 0.76rem; font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; } a { color: var(--fg-link); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-primary-hover); } ::selection { background: var(--color-primary-muted); color: var(--color-primary-deep); } /* ============================================================= ACCESSIBILITY — KEYBOARD FOCUS INDICATORS (WCAG 2.4.7) Global :focus-visible outline for keyboard navigation. Contrast: brand blue #0F4C5C on white (#FFFFFF) = 4.07:1. WCAG 2.1 AA requires 3:1 for non-text UI components (focus rings), so 3.91:1 passes comfortably. (Text would need 4.5:1.) Why outline (not box-shadow): outline cannot be overridden by other stylesheets via shadow stacking, and it doesn't affect layout. ============================================================= */ button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid #0F4C5C; outline-offset: 2px; border-radius: inherit; } /* Suppress focus ring for mouse users (focus without keyboard signal) */ button:focus:not(:focus-visible), a:focus:not(:focus-visible), input:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible), [tabindex]:not([tabindex="-1"]):focus:not(:focus-visible) { outline: none; }