Backend - dev-api.py: Q&A suggest endpoint, Log Contact, cf-orch node detection in wizard hardware step, canonical search_profiles format (profiles:[...]), connections settings endpoints, Resume Library endpoints - db_migrate.py: migrations 002/003/004 — ATS columns, resume review, final resume struct - discover.py: _normalize_profiles() for legacy wizard YAML format compat - resume_optimizer.py: section-by-section resume parsing + scoring - task_runner.py: Q&A and contact-log task types - company_research.py: accessibility brief column wiring - generate_cover_letter.py: restore _candidate module-level binding Frontend - InterviewPrepView.vue: Q&A chat tab, Log Contact form, MarkdownView rendering - InterviewCard.vue: new reusable card component for interviews kanban - InterviewsView.vue: rejected analytics section with stage breakdown chips - ResumeProfileView.vue: sync with new resume store shape - SearchPrefsView.vue: cf-orch toggle, profile format migration - SystemSettingsView.vue: connections settings wiring - ConnectionsSettingsView.vue: new view for integration connections - MarkdownView.vue: new component for safe markdown rendering - ApplyWorkspace.vue: a11y — h1→h2 demotion, aria-expanded on Q&A toggle, confirmation dialog on Reject action (#98 #99 #100) - peregrine.css: explicit [data-theme="dark"] token block for light-OS users (#101), :focus-visible outline (#97) - wizard.css: cf-orch hardware step styles - WizardHardwareStep.vue: cf-orch node display, profile selection with orch option - WizardLayout.vue: hardware step wiring Infra - compose.yml / compose.cloud.yml: cf-orch agent sidecar, llm.cloud.yaml mount - Dockerfile.cfcore: cf-core editable install in image build - HANDOFF-xanderland.md: Podman/systemd setup guide for beta tester - podman-standalone.sh: standalone Podman run script Tests - test_dev_api_settings.py: remove stale worktree path bootstrap (credential_store now in main repo); fix job_boards fixture to use non-empty list - test_wizard_api.py: update profiles assertion to superset check (cf-orch added); update step6 assertion to canonical profiles[].titles format
137 lines
5.2 KiB
CSS
137 lines
5.2 KiB
CSS
/* web/src/assets/peregrine.css
|
||
Peregrine-specific token overrides — imported AFTER theme.css.
|
||
Source of truth: circuitforge-plans/peregrine/2026-03-03-nuxt-design-system.md
|
||
|
||
Brand:
|
||
Falcon Blue (#2B6CB0) — slate-blue back plumage of the peregrine falcon
|
||
Talon Orange (#E06820) — vivid orange-yellow talons and cere
|
||
*/
|
||
|
||
/* ── Page-level ─────────────────────────────────────── */
|
||
html {
|
||
overscroll-behavior-x: none;
|
||
overflow-x: clip; /* clip (not hidden) — no BFC scroll-container side effect. Gotcha #3. */
|
||
}
|
||
|
||
body {
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* ── Light mode (default) ──────────────────────────── */
|
||
:root {
|
||
/* ── Peregrine brand colors ── */
|
||
--app-primary: #2B6CB0; /* Falcon Blue — 4.70:1 on #eaeff8 ✅ AA */
|
||
--app-primary-hover: #245A9E;
|
||
--app-primary-light: #EBF4FF; /* subtle tint — background use only */
|
||
|
||
--app-accent: #E06820; /* Talon Orange — use dark text on top */
|
||
--app-accent-hover: #C05415;
|
||
--app-accent-light: #FFF3EB; /* subtle tint — background use only */
|
||
--app-accent-text: #1a2338; /* on-button text — dark navy, NEVER white (only 2.8:1) */
|
||
|
||
/* ── CSS variable aliases (component names → theme.css canonical names. Gotcha #5.) ── */
|
||
--color-bg: var(--color-surface);
|
||
--color-text-secondary: var(--color-text-muted);
|
||
|
||
/* ── Layout ── */
|
||
--nav-height: 4rem; /* top bar height (mobile) */
|
||
--sidebar-width: 220px; /* persistent sidebar (≥1024px) */
|
||
|
||
/* ── Pipeline status colors ── */
|
||
/* Always pair with text label or icon — never color alone (accessibility) */
|
||
--status-pending: var(--color-warning);
|
||
--status-approve: var(--color-success);
|
||
--status-reject: var(--color-error);
|
||
--status-applied: var(--color-info);
|
||
--status-synced: #5b4fa8;
|
||
--status-archived: var(--color-text-muted);
|
||
--status-survey: #6d3fa8;
|
||
--status-phone: #1a7a6e;
|
||
--status-interview: var(--color-info);
|
||
--status-offer: #b8620a;
|
||
--status-hired: var(--color-success);
|
||
|
||
/* ── Match score thresholds ── */
|
||
--score-high: var(--color-success); /* ≥ 70% */
|
||
--score-mid-high: #2b7cb8; /* 50–69% — Falcon Blue variant */
|
||
--score-mid: var(--color-warning); /* 30–49% */
|
||
--score-low: var(--color-error); /* < 30% */
|
||
--score-none: var(--color-text-muted);
|
||
|
||
/* ── Motion tokens ── */
|
||
--swipe-exit: 300ms;
|
||
--swipe-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
--confetti-dur: 3500ms;
|
||
--transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
--transition-dismiss: 350ms ease-in;
|
||
--transition-enter: 250ms ease-out;
|
||
|
||
/* ── Type scale ── */
|
||
--text-xs: 0.75rem; /* 12px — badge labels, timestamps, keyboard hints */
|
||
--text-sm: 0.875rem; /* 14px — card secondary, captions */
|
||
--text-base: 1rem; /* 16px — body, card descriptions */
|
||
--text-lg: 1.125rem; /* 18px — card title, section headers */
|
||
--text-xl: 1.25rem; /* 20px — page section headings */
|
||
--text-2xl: 1.5rem; /* 24px — page titles */
|
||
--text-3xl: 1.875rem; /* 30px — dashboard greeting */
|
||
}
|
||
|
||
/* ── Dark mode ─────────────────────────────────────── */
|
||
/* Covers both: OS-level dark preference AND explicit dark theme selection in UI */
|
||
@media (prefers-color-scheme: dark) {
|
||
:root:not([data-theme="hacker"]) {
|
||
--app-primary: #68A8D8; /* Falcon Blue (dark) — 6.54:1 on #16202e ✅ AA */
|
||
--app-primary-hover: #7BBDE6;
|
||
--app-primary-light: #0D1F35;
|
||
|
||
--app-accent: #F6872A; /* Talon Orange (dark) — 5.22:1 on #16202e ✅ AA */
|
||
--app-accent-hover: #FF9840;
|
||
--app-accent-light: #2D1505;
|
||
--app-accent-text: #1a2338;
|
||
|
||
--score-mid-high: #5ba3d9; /* lighter blue for dark bg */
|
||
|
||
--status-synced: #9b8fea;
|
||
--status-survey: #b08fea;
|
||
--status-phone: #4ec9be;
|
||
--status-offer: #f5a43a;
|
||
}
|
||
}
|
||
|
||
/* Explicit [data-theme="dark"] — fires when user picks dark via theme picker
|
||
on a light-OS machine (where prefers-color-scheme: dark won't match) */
|
||
[data-theme="dark"]:not([data-theme="hacker"]) {
|
||
--app-primary: #68A8D8;
|
||
--app-primary-hover: #7BBDE6;
|
||
--app-primary-light: #0D1F35;
|
||
|
||
--app-accent: #F6872A;
|
||
--app-accent-hover: #FF9840;
|
||
--app-accent-light: #2D1505;
|
||
--app-accent-text: #1a2338;
|
||
|
||
--score-mid-high: #5ba3d9;
|
||
|
||
--status-synced: #9b8fea;
|
||
--status-survey: #b08fea;
|
||
--status-phone: #4ec9be;
|
||
--status-offer: #f5a43a;
|
||
}
|
||
|
||
/* ── Hacker mode (Konami easter egg) ──────────────── */
|
||
[data-theme="hacker"] {
|
||
--app-primary: #00ff41;
|
||
--app-primary-hover: #00cc33;
|
||
--app-primary-light: #001a00;
|
||
--app-accent: #00ff41;
|
||
--app-accent-hover: #00cc33;
|
||
--app-accent-light: #001a00;
|
||
--app-accent-text: #0a0c0a;
|
||
}
|
||
|
||
/* ── Focus style — keyboard nav (accessibility requirement) ── */
|
||
:focus-visible {
|
||
outline: 2px solid var(--app-primary);
|
||
outline-offset: 3px;
|
||
border-radius: var(--radius-sm);
|
||
}
|