/* ============================================================================ Candidate Kit – Design System Theme ============================================================================ Drop this file into your Blazor project and reference it in App.razor: Pair with FluentDesignTheme in MainLayout.razor: ============================================================================ */ /* ── Fonts ── Loaded in App.razor via preconnect + non-blocking pattern so the CSS file itself doesn't wait on the external fetch. Kept documented here for discoverability — if you add a font, update both places together. */ /* ============================================================================ 1. Design Tokens ============================================================================ */ :root { /* ── Primary – Blue ── */ --ck-primary-50: #E6F1FB; --ck-primary-100: #B5D4F4; --ck-primary-200: #85B7EB; --ck-primary-400: #378ADD; --ck-primary-600: #185FA5; --ck-primary-800: #0C447C; --ck-primary-900: #042C53; /* ── Accent – Coral ── */ --ck-coral-50: #FAECE7; --ck-coral-100: #F5C4B3; --ck-coral-200: #F0997B; --ck-coral-400: #D85A30; --ck-coral-600: #993C1D; --ck-coral-800: #712B13; --ck-coral-900: #4A1B0C; /* ── Neutrals – Slate ── */ --ck-neutral-50: #F8FAFC; --ck-neutral-100: #F1F5F9; --ck-neutral-200: #E2E8F0; --ck-neutral-400: #94A3B8; --ck-neutral-600: #475569; --ck-neutral-800: #1E293B; --ck-neutral-900: #0F172A; /* ── Pipeline stage colours ── */ --ck-stage-applying: #CBD5E1; --ck-stage-applied: #94A3B8; --ck-stage-phone: #378ADD; --ck-stage-interview: #185FA5; --ck-stage-final: #7F77DD; --ck-stage-offer: #D85A30; --ck-stage-accepted: #16A34A; /* ── Semantic ── */ --ck-success: #16A34A; --ck-success-bg: #DCFCE7; --ck-success-text: #14532D; --ck-warning: #D97706; --ck-warning-bg: #FEF3C7; --ck-warning-text: #78350F; --ck-error: #DC2626; --ck-error-bg: #FEE2E2; --ck-error-text: #7F1D1D; --ck-rejected-dot: #C2410C; /* ── Typography ── */ --ck-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --ck-font-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace; /* ── Spacing (4px base) ── */ --ck-space-1: 4px; --ck-space-2: 8px; --ck-space-3: 12px; --ck-space-4: 16px; --ck-space-6: 24px; --ck-space-8: 32px; --ck-space-12: 48px; /* ── Border radius ── */ --ck-radius-sm: 4px; --ck-radius: 8px; --ck-radius-lg: 12px; } /* ============================================================================ 2. Page heading hierarchy ============================================================================ .body-scroll-container is the
that wraps @@Body in MainLayout.razor. Targeting h1/h2 there catches every page title and section heading without touching individual Razor files. ============================================================================ */ .body-scroll-container h1 { font-size: 22px; font-weight: 600; color: var(--ck-neutral-900, #0F172A); line-height: 1.3; margin: 0 0 4px 0; letter-spacing: -0.01em; } .body-scroll-container h2 { font-size: 18px; font-weight: 600; color: var(--ck-neutral-900, #0F172A); line-height: 1.35; margin: 0 0 8px 0; } .page-subtitle { font-size: 14px; font-weight: 400; color: var(--ck-neutral-600, #475569); margin: 0 0 16px 0; line-height: 1.5; } /* ============================================================================ 3. Global font-family override ============================================================================ */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body, fluent-nav-menu, fluent-nav-menu-item, fluent-button, fluent-text-field, fluent-select, fluent-dialog, fluent-card, .fluent-typography, h1, h2, h3, h4, h5, h6, p, span, label, a, li, td, th, div { font-family: var(--ck-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif) !important; } .ck-mono, code, pre, samp, kbd { font-family: var(--ck-font-mono, 'JetBrains Mono', 'Cascadia Code', Consolas, monospace) !important; } /* ============================================================================ 3. Stage pill utility classes ============================================================================ Usage: Phone screen ============================================================================ */ .ck-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 10px; border-radius: var(--ck-radius); font-weight: 500; line-height: 1.4; } .ck-pill-applied { background: var(--ck-neutral-100); color: var(--ck-neutral-800); } .ck-pill-phone { background: var(--ck-primary-50); color: var(--ck-primary-800); } .ck-pill-interview { background: #DBEAFE; color: var(--ck-primary-900); } .ck-pill-final { background: #EEEDFE; color: #26215C; } .ck-pill-offer { background: var(--ck-coral-50); color: var(--ck-coral-800); } .ck-pill-accepted { background: var(--ck-success-bg); color: var(--ck-success-text); } .ck-pill-rejected { background: var(--ck-neutral-100); color: var(--ck-neutral-600); } .ck-pill-ghosted { background: var(--ck-neutral-100); color: var(--ck-neutral-600); border: 1px dashed var(--ck-neutral-400); } .ck-pill-withdrawn { background: var(--ck-neutral-100); color: var(--ck-neutral-600); } /* ============================================================================ 4. Card left-border stage colours (pipeline board) ============================================================================ Usage:
...
============================================================================ */ .ck-border-applying { border-left: 3px solid var(--ck-stage-applying); } .ck-border-applied { border-left: 3px solid var(--ck-stage-applied); } .ck-border-phone { border-left: 3px solid var(--ck-stage-phone); } .ck-border-interview { border-left: 3px solid var(--ck-stage-interview); } .ck-border-final { border-left: 3px solid var(--ck-stage-final); } .ck-border-offer { border-left: 3px solid var(--ck-stage-offer); } .ck-border-accepted { border-left: 3px solid var(--ck-stage-accepted); } /* ============================================================================ 5. Indicator dots ============================================================================ Usage: ============================================================================ */ .ck-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .ck-dot-success { background: var(--ck-success); } .ck-dot-warning { background: var(--ck-warning); } .ck-dot-rejected { background: var(--ck-rejected-dot); } .ck-dot-ghosted { background: var(--ck-neutral-400); outline: 1px dashed var(--ck-neutral-400); outline-offset: 1px; } /* ============================================================================ 6. Semantic alert / banner backgrounds ============================================================================ Usage:
...
============================================================================ */ .ck-alert { padding: var(--ck-space-3) var(--ck-space-4); border-radius: var(--ck-radius); font-size: 13px; line-height: 1.5; } .ck-alert-success { background: var(--ck-success-bg); color: var(--ck-success-text); } .ck-alert-warning { background: var(--ck-warning-bg); color: var(--ck-warning-text); } .ck-alert-error { background: var(--ck-error-bg); color: var(--ck-error-text); } .ck-alert-info { background: var(--ck-primary-50); color: var(--ck-primary-800); } /* ============================================================================ 7. Coral accent utility (for celebratory / brand moments) ============================================================================ Usage: Kit in the wordmark wrapped in ============================================================================ */ .ck-coral { color: var(--ck-coral-400); } .ck-icon-coral { color: var(--ck-coral-400); } .ck-icon-coral svg { fill: currentColor; } /* ============================================================================ 8. Score badge (review queue / job detail) ============================================================================ Usage: 80 / 100 55 / 100 29 / 100 ============================================================================ */ .ck-score { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: var(--ck-radius-sm); font-family: var(--ck-font-mono); } /* 70+ */ .ck-score-high { background: var(--ck-primary-600); color: #FFFFFF; } /* 40–69 */ .ck-score-medium { background: var(--ck-neutral-200); color: var(--ck-neutral-800); } /* Below 40 */ .ck-score-low { background: var(--ck-neutral-100); color: var(--ck-neutral-400); }