/* CareerBridge design system — bright slate canvas, teal instrument light. Light-mode only. Slate carries every neutral, teal every action, emerald confirmation; amber and red appear only as score bands. Gradients are six named moments, never a texture. Structure: tokens → base → components → utilities → responsive. COMPONENTS own every visual decision (color, border, radius, shadow, padding, state). UTILITIES only do layout, spacing and type size/weight/color — there is deliberately no color-fill, border, radius or shadow utility. That is the guardrail that keeps this from drifting into hand-written Tailwind. Loaded by base.html and by each standalone legacy page's own . */ :root { /* ── Teal — the primary ────────────────────────────────────────────────── */ --teal-50: #f0fdfa; --teal-100: #ccfbf1; --teal-200: #99f6e4; --teal-300: #5eead4; --teal-400: #2dd4bf; --teal-500: #14b8a6; --teal-600: #0d9488; --teal-700: #0f766e; --teal-800: #115e59; /* ── Emerald — success, confirmation, the top score band ───────────────── */ --emerald-50: #ecfdf5; --emerald-100: #d1fae5; --emerald-200: #a7f3d0; --emerald-500: #10b981; --emerald-600: #059669; --emerald-700: #047857; /* ── Slate — every neutral, surfaces through ink ───────────────────────── */ --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; /* ── Amber / red — score bands and destructive actions only ────────────── */ --amber-50: #fffbeb; --amber-100: #fef3c7; --amber-200: #fde68a; --amber-500: #f59e0b; --amber-600: #d97706; --amber-700: #b45309; --red-50: #fef2f2; --red-100: #fee2e2; --red-200: #fecaca; --red-500: #ef4444; --red-600: #dc2626; --red-700: #b91c1c; /* ── Blue — LinkedIn's brand only. Never a UI color. ───────────────────── */ --blue-50: #eff6ff; --blue-100: #dbeafe; --blue-600: #2563eb; --linkedin: #0a66c2; /* ── Semantic aliases — what components actually reference ─────────────── */ --bg: var(--slate-50); --surface: #ffffff; --surface-sunken: var(--slate-50); /* card footers, side rails */ --surface-deep: var(--slate-200); /* the preview canvas behind the CV */ --border: var(--slate-200); --border-strong: var(--slate-300); --border-hairline: var(--slate-100); /* inside a card, between its sections */ --ink: var(--slate-900); --ink-2: var(--slate-800); --ink-3: var(--slate-700); --muted: var(--slate-500); --faint: var(--slate-400); --primary: var(--teal-600); --primary-hover: var(--teal-700); --primary-text: var(--teal-700); --primary-soft: var(--teal-50); --primary-soft-2: var(--teal-100); --primary-line: var(--teal-200); --ok: var(--emerald-600); --warn: var(--amber-600); --danger: var(--red-600); /* Score bands — ONE definition, shared by every ring, badge and gauge. Thresholds differ per domain (see DESIGN.md); the colors never do. */ --band-high: var(--emerald-500); --band-mid: var(--amber-500); --band-low: var(--red-500); --band-track: var(--slate-200); /* ── Radii ─────────────────────────────────────────────────────────────── */ --r-sm: 4px; --r-md: 6px; --r-lg: 8px; /* nav items, icon tiles, small controls */ --r-xl: 12px; /* buttons + inputs — the signature control radius */ --r-2xl: 16px; /* cards + panels — the signature surface radius */ --r-full: 9999px; /* ── Shadows. The colored ones are a signature, not decoration. ────────── */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); --shadow-teal: 0 1px 2px 0 var(--teal-200); --shadow-teal-lg: 0 10px 15px -3px var(--teal-200), 0 4px 6px -4px var(--teal-200); --shadow-red: 0 1px 2px 0 var(--red-200); /* ── Gradients. Exactly six. Adding a seventh is a design decision. ────── */ --grad-brand: linear-gradient(to bottom right, var(--teal-500), var(--emerald-600)); --grad-brand-r: linear-gradient(to right, var(--teal-600), var(--emerald-600)); --grad-avatar: linear-gradient(to bottom right, var(--teal-400), var(--emerald-500)); --grad-placeholder: linear-gradient(to bottom right, var(--slate-100), var(--slate-200)); --grad-stage: linear-gradient(to bottom, var(--slate-700), var(--slate-900)); --grad-portrait: linear-gradient(to bottom right, var(--slate-500), var(--slate-600)); /* ── Type — the system stack, no webfont ───────────────────────────────── */ --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace; --t-10: 10px; --t-11: 11px; --t-xs: 12px; --t-sm: 14px; --t-base: 16px; --t-lg: 18px; --t-xl: 20px; --t-2xl: 24px; --t-3xl: 30px; /* ── Spacing ───────────────────────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ── Layout ────────────────────────────────────────────────────────────── */ --nav-h: 64px; /* ⚠️ The nav's inner bar reads this SAME token as `.page`, which is what keeps the wordmark aligned with the content beneath it. Widen one and you must widen the other, so change it here rather than overriding max-width on a single page — otherwise the content starts 100+px left of the logo. Went 1280 -> fluid (100%) -> 1600 -> back near the original: both wider steps read as too large on an ordinary monitor. 1360 is a modest bump over the original 1280, not a return to full-bleed. */ --page-max: 1360px; --page-max-md: 960px; --page-max-sm: 800px; --page-max-xs: 672px; /* ── Motion ────────────────────────────────────────────────────────────── */ --t-fast: 150ms; --t-mid: 200ms; --t-slow: 700ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); --focus-ring: 0 0 0 2px var(--teal-400); } /* ── Base ─────────────────────────────────────────────────────────────────── */ * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--t-sm); line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3 { text-wrap: balance; } a { color: var(--primary-text); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } :is(a, button, input, select, textarea, summary):focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-lg); } ::selection { background: var(--primary); color: #fff; } .ico { flex: none; display: block; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ── App shell ────────────────────────────────────────────────────────────── */ /* The nav is fixed, so every page pays for it once here rather than each one inventing its own offset. (This replaced the old `.nav-flush` hack.) */ body.has-nav { padding-top: var(--nav-h); } /* Sticky "Powered by" footer: a flex column pins the footer to the bottom of the viewport on short pages without it floating up over content on tall ones. `min-height` accounts for the fixed nav the body is already padded for. */ body.has-footer { display: flex; flex-direction: column; min-height: 100vh; } body.has-footer > .site-footer { margin-top: auto; } /* The attribution strip. Deliberately quiet — a hairline, muted, small — so it credits CareerBridge without competing with the tenant's branding above it. The mark keeps CareerBridge's own colour (set inline on the SVG), never the tenant's --primary. */ .site-footer { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-5) var(--sp-6); border-top: 1px solid var(--border-hairline); color: var(--faint); font-size: var(--t-xs); } .site-footer__by { letter-spacing: 0.01em; } .site-footer__brand { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-weight: 600; } .site-footer__brand:hover { text-decoration: none; color: var(--ink); } .site-footer__brand svg { display: block; } .app-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--nav-h); background: var(--surface); border-bottom: 1px solid var(--border); } .app-nav__inner { max-width: var(--page-max); height: 100%; margin: 0 auto; padding: 0 var(--sp-6); display: flex; align-items: center; gap: var(--sp-4); } .nav-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); flex: none; } .nav-brand:hover { text-decoration: none; } .nav-brand svg { display: block; } /* Tenant logo in the brand slot: it stands alone now (no wordmark beside it), so it can fill more of the 64px bar. Letterboxed (contain) so a wide or tall logo never distorts or overflows. */ .nav-brand__logo { display: block; height: var(--tenant-logo-h, 40px); max-width: 220px; object-fit: contain; } .nav-wordmark { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.025em; } .nav-tabs { display: flex; align-items: center; gap: var(--sp-1); margin-inline: auto; } .nav-item { position: relative; display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-lg); color: var(--muted); font-size: var(--t-sm); font-weight: 500; transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .nav-item:hover { color: var(--ink); background: var(--slate-100); text-decoration: none; } .nav-item[aria-current="page"] { color: var(--primary-text); background: var(--primary-soft); } /* The pip under the active tab — bolt's telltale for "you are here". */ .nav-item[aria-current="page"]::after { content: ""; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 16px; height: 2px; border-radius: var(--r-full); background: var(--primary); } .nav-right { display: flex; align-items: center; gap: var(--sp-3); flex: none; margin-inline-start: auto; } .nav-tabs + .nav-right { margin-inline-start: 0; } .nav-icon-btn { position: relative; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r-lg); background: transparent; color: var(--muted); cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .nav-icon-btn:hover { background: var(--slate-100); color: var(--ink-3); } .nav-icon-btn__dot { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: var(--r-full); background: var(--primary); } .nav-chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 6px var(--sp-3); border-radius: var(--r-lg); color: var(--ink-3); font-size: var(--t-sm); font-weight: 500; background: transparent; border: 0; transition: background var(--t-fast) var(--ease); } .nav-chip:hover { background: var(--slate-100); text-decoration: none; } .nav-chip__name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The interview-minute readout. Neutral slate at every value — it is a budget, not a score, and DESIGN.md reserves band colours for good/bad. */ .nav-chip--meter { color: var(--muted); font-variant-numeric: tabular-nums; } .avatar { width: 28px; height: 28px; border-radius: var(--r-full); background: var(--grad-avatar); color: #fff; font-size: var(--t-xs); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; text-transform: uppercase; } .nav-signout { margin: 0; display: flex; } /* ── Page containers ──────────────────────────────────────────────────────── */ /* ⚠️ `width: 100%` is required here, not decorative. `.page` is a DIRECT flex item of `body.has-footer` (the sticky-footer flex column added for the "Powered by" strip), and its `margin: 0 auto` sets auto CROSS-axis margins — which, per the flexbox spec, disables stretch on that item. Without an explicit width, `.page` falls back to shrink-to-fit sizing instead of filling the viewport, landing at whatever width the grid's own content prefers rather than the page's actual max-width. This was invisible while `--page-max` was a small fixed px (shrink-to-fit happened to land near the cap anyway); it became a visible bug the moment the cap went fluid. */ .page { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: var(--sp-8) var(--sp-6); } .page--md { max-width: var(--page-max-md); } .page--sm { max-width: var(--page-max-sm); } .page--xs { max-width: var(--page-max-xs); padding-block: var(--sp-12); } .page > * + * { margin-top: var(--sp-6); } /* ── Cards ────────────────────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2xl); box-shadow: var(--shadow-sm); overflow: hidden; } /* `overflow: hidden` above keeps content inside the rounded corners, but it also clips any absolutely-positioned popup escaping the card. A card holding a dropdown opts out; it has no scrolling content to clip anyway. */ .card--overflow { overflow: visible; } .card--interactive { transition: border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease); } .card--interactive:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); } .card--selected { border-color: var(--primary-line); box-shadow: 0 0 0 1px var(--primary-line); } .card--flat { box-shadow: none; } .card-hd { padding: var(--sp-5) var(--sp-6) var(--sp-4); border-bottom: 1px solid var(--border-hairline); } .card-bd { padding: var(--sp-5) var(--sp-6); } .card-ft { padding: var(--sp-4) var(--sp-6); background: var(--surface-sunken); border-top: 1px solid var(--border-hairline); } /* The uppercase micro-heading that labels a card or a section. */ .eyebrow { margin: 0; font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); } .eyebrow--muted { color: var(--muted); } .eyebrow--teal { color: var(--teal-700); } /* ── Buttons ──────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 10px var(--sp-5); border: 1px solid transparent; border-radius: var(--r-xl); background: transparent; color: var(--ink-3); font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .btn:hover { text-decoration: none; } .btn:active:not(:disabled) { transform: scale(0.96); } .btn:disabled, .btn[aria-disabled="true"] { background: var(--slate-200); border-color: transparent; color: var(--faint); box-shadow: none; cursor: not-allowed; } .btn:disabled:active, .btn[aria-disabled="true"]:active { transform: none; } .btn--primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-teal); } .btn--primary:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--primary-hover); } .btn--outline { background: var(--surface); border-color: var(--border); color: var(--ink-3); font-weight: 500; } .btn--outline:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--border-strong); background: var(--slate-50); } .btn--ghost { color: var(--muted); font-weight: 500; } .btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) { color: var(--ink-3); background: var(--slate-100); } .btn--dark { background: var(--slate-800); color: #fff; } .btn--dark:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--slate-700); } .btn--danger { background: var(--red-500); color: #fff; box-shadow: var(--shadow-red); } .btn--danger:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--red-600); } .btn--danger-soft { background: var(--red-50); border-color: var(--red-200); color: var(--red-600); font-weight: 500; } .btn--danger-soft:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--red-100); } .btn--success { background: var(--emerald-500); color: #fff; } /* On a brand gradient: an inverted pill. */ .btn--inverse { background: #fff; color: var(--primary-text); } .btn--inverse:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--primary-soft); } .btn--sm { padding: 6px var(--sp-3); font-size: var(--t-xs); gap: 6px; } .btn--lg { padding: 14px var(--sp-6); font-size: var(--t-base); } .btn--block { width: 100%; } .btn--icon { padding: 0; width: 32px; height: 32px; } .btn--icon.btn--outline { color: var(--faint); } .btn--icon.btn--outline:hover:not(:disabled) { color: var(--primary); border-color: var(--primary-line); } /* ── Forms ────────────────────────────────────────────────────────────────── */ .field { margin-bottom: var(--sp-4); } .field:last-child { margin-bottom: 0; } .label { display: block; margin-bottom: 6px; font-size: var(--t-xs); font-weight: 500; color: var(--muted); } .label__opt { color: var(--faint); font-weight: 400; } .input, .select, .textarea { width: 100%; padding: 10px var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); color: var(--ink); font-family: var(--font-sans); font-size: var(--t-sm); line-height: 1.4; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } /* A native select's popup is drawn by the OS: the option font size is only partly respected and the highlight colour not at all, so on Windows the list renders small with a system-blue selection. This rule helps browsers that do honour it; `.cbsel` below replaces the popup entirely where it matters. */ .select option { font-family: var(--font-sans); font-size: var(--t-base); color: var(--ink); background: var(--surface); padding: var(--sp-2) var(--sp-3); } /* ── Custom dropdown (cbSelect) ───────────────────────────────────────────── */ /* The real restyled, so forms and JS keep working. */ .checkbox { appearance: none; width: 20px; height: 20px; flex: none; margin: 0; border: 2px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); cursor: pointer; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .checkbox:hover { border-color: var(--primary); } .checkbox:checked { background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat; border-color: var(--primary); } /* ── Badges, pills, chips ─────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: var(--sp-1) 10px; border-radius: var(--r-full); font-size: var(--t-xs); font-weight: 600; background: var(--slate-100); color: var(--muted); box-shadow: inset 0 0 0 1px var(--border); } .badge--emerald { background: var(--emerald-50); color: var(--emerald-700); box-shadow: inset 0 0 0 1px var(--emerald-200); } .badge--amber { background: var(--amber-50); color: var(--amber-700); box-shadow: inset 0 0 0 1px var(--amber-200); } .badge--red { background: var(--red-50); color: var(--red-600); box-shadow: inset 0 0 0 1px var(--red-200); } .badge--teal { background: var(--teal-50); color: var(--teal-700); box-shadow: inset 0 0 0 1px var(--teal-200); } .badge--slate { background: var(--slate-100); color: var(--muted); box-shadow: inset 0 0 0 1px var(--border); } .badge__dot { width: 6px; height: 6px; border-radius: var(--r-full); background: currentColor; opacity: 0.6; } /* A neutral tag — facts about a row, not a status. */ .pill { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-2); border-radius: var(--r-md); background: var(--slate-100); color: var(--ink-3); font-size: var(--t-xs); } /* A count next to a heading. */ .chip { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-2); border-radius: var(--r-full); background: var(--slate-100); color: var(--muted); font-size: var(--t-xs); font-weight: 500; } /* ── Icon tile ────────────────────────────────────────────────────────────── */ .tile { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: var(--r-lg); background: var(--slate-100); color: var(--muted); } .tile--sm { width: 28px; height: 28px; } .tile--md { width: 40px; height: 40px; border-radius: var(--r-xl); } .tile--lg { width: 56px; height: 56px; border-radius: var(--r-2xl); } .tile--xl { width: 64px; height: 64px; border-radius: var(--r-2xl); } .tile--teal { background: var(--teal-100); color: var(--teal-700); } .tile--emerald { background: var(--emerald-50); color: var(--emerald-600); } .tile--amber { background: var(--amber-50); color: var(--amber-600); } .tile--red { background: var(--red-50); color: var(--red-600); } .tile--dark { background: var(--slate-800); color: #fff; } .tile--brand { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-teal-lg); } .tile--placeholder { background: var(--grad-placeholder); color: var(--faint); } /* ── Stats ────────────────────────────────────────────────────────────────── */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2xl); box-shadow: var(--shadow-sm); padding: var(--sp-4) var(--sp-5); } .stat__label { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--muted); margin-bottom: var(--sp-1); } .stat__value { font-size: var(--t-2xl); font-weight: 700; color: var(--ink); line-height: 1.15; font-variant-numeric: tabular-nums lining-nums; } .stat__value--high { color: var(--emerald-600); } .stat__value--mid { color: var(--amber-600); } .stat__value--low { color: var(--red-600); } .stat__sub { font-size: var(--t-xs); color: var(--faint); margin-top: 2px; } /* A labelled number beside (or instead of) a ring. Shared by the HR dashboard and the public interview record. */ .scorebit { display: flex; align-items: center; gap: var(--sp-3); } .scorebit__label { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .scorebit__label b { display: block; font-size: var(--t-xl); color: var(--ink); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums lining-nums; } /* ── Score ring (SVG). Emitted by cbRing() in ui.js. ──────────────────────── */ .ring { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; } .ring > svg { position: absolute; inset: 0; transform: rotate(-90deg); } .ring__track { stroke: var(--band-track); } .ring__value { transition: stroke-dashoffset var(--t-slow) var(--ease); } .ring__num { position: relative; font-size: var(--t-xs); font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums lining-nums; text-align: center; line-height: 1.1; } .ring--lg .ring__num { font-size: var(--t-3xl); color: var(--ink); } .ring--lg .ring__den { display: block; font-size: var(--t-xs); font-weight: 400; color: var(--faint); } .band-high { stroke: var(--band-high); color: var(--emerald-600); } .band-mid { stroke: var(--band-mid); color: var(--amber-600); } .band-low { stroke: var(--band-low); color: var(--red-600); } /* ── Alerts ───────────────────────────────────────────────────────────────── */ .alert { display: flex; align-items: flex-start; gap: var(--sp-2); padding: 10px var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--slate-50); color: var(--ink-3); font-size: var(--t-sm); } .alert--danger { background: var(--red-50); border-color: var(--red-200); color: var(--red-700); } .alert--warn { background: var(--amber-50); border-color: var(--amber-200); color: var(--amber-700); } .alert--success { background: var(--emerald-50); border-color: var(--emerald-200); color: var(--emerald-700); } .alert--info { background: var(--teal-50); border-color: var(--teal-200); color: var(--teal-800); } /* `.show` toggling is load-bearing in login/signup — keep both selectors. */ .alert[hidden], .alert:not(.show).alert--toggle { display: none; } /* ── Empty state ──────────────────────────────────────────────────────────── */ .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-12) var(--sp-6); text-align: center; } .empty__title { margin: 0; font-size: var(--t-lg); font-weight: 600; color: var(--ink-2); } .empty__body { margin: 0; font-size: var(--t-sm); color: var(--muted); max-width: 42ch; } /* ── Table ────────────────────────────────────────────────────────────────── */ .table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); } .table th { text-align: left; padding: 10px var(--sp-3); background: var(--surface-sunken); border-bottom: 1px solid var(--border); font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; } .table td { padding: 10px var(--sp-3); border-bottom: 1px solid var(--border-hairline); color: var(--ink-3); vertical-align: top; } .table tbody tr:last-child td { border-bottom: 0; } .table-scroll { overflow-x: auto; } /* ── Segmented control ────────────────────────────────────────────────────── */ .seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-xl); background: var(--slate-100); } .seg-btn { padding: 6px var(--sp-3); border: 0; border-radius: var(--r-lg); background: transparent; color: var(--muted); font: 500 var(--t-xs)/1.2 var(--font-sans); cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .seg-btn:hover { color: var(--ink-3); } .seg-btn.is-active, .seg-btn[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); } /* ── Picker — large selectable cards (platform choice, role choice) ───────── */ .picker { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); } .picker input { position: absolute; opacity: 0; pointer-events: none; } .picker-card { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-4); border: 2px solid var(--border); border-radius: var(--r-xl); background: var(--surface); text-align: left; cursor: pointer; transition: border-color var(--t-mid) var(--ease), background var(--t-mid) var(--ease); } .picker-card:hover { border-color: var(--border-strong); } .picker-card.is-active, .picker input:checked + .picker-card { border-color: var(--primary); background: var(--primary-soft); } .picker input:focus-visible + .picker-card { box-shadow: var(--focus-ring); } .picker-card__name { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--ink); } .picker-card__desc { display: block; font-size: var(--t-xs); color: var(--muted); line-height: 1.35; } /* Brand-owned variants: the choice IS the brand, so it borrows its color. */ .picker-card--github.is-active { border-color: var(--slate-800); background: var(--slate-50); } .picker-card--github.is-active .tile { background: var(--slate-800); color: #fff; } .picker-card--linkedin.is-active { border-color: var(--linkedin); background: var(--blue-50); } .picker-card--linkedin.is-active .tile { background: var(--linkedin); color: #fff; } /* ── Pagination ───────────────────────────────────────────────────────────── */ .pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-2) 0; } .pager-btn { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); color: var(--ink-3); font: 500 var(--t-sm)/1 var(--font-sans); cursor: pointer; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .pager-btn:hover:not(:disabled) { border-color: var(--border-strong); background: var(--slate-50); } .pager-btn:disabled { color: var(--faint); cursor: not-allowed; } .pager-btn.is-current { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; } .pager-gap { color: var(--faint); padding: 0 var(--sp-1); } /* ── Progress pips ────────────────────────────────────────────────────────── */ .pips { display: inline-flex; gap: var(--sp-1); } .pip { width: 20px; height: 6px; border-radius: var(--r-full); background: var(--slate-200); transition: background var(--t-mid) var(--ease); } .pip.is-done { background: var(--primary); } .pip.is-current { background: var(--primary); opacity: 0.7; } /* ── Stepper (HR wizard) ──────────────────────────────────────────────────── */ .stepper { display: flex; align-items: center; gap: var(--sp-2); } .step { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 6px var(--sp-3); border: 0; border-radius: var(--r-full); background: transparent; color: var(--faint); font: 500 var(--t-xs)/1.2 var(--font-sans); cursor: pointer; transition: color var(--t-mid) var(--ease), background var(--t-mid) var(--ease); } .step__num { width: 20px; height: 20px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-full); background: var(--slate-200); color: var(--muted); font-size: var(--t-10); font-weight: 700; transition: background var(--t-mid) var(--ease), color var(--t-mid) var(--ease); } .step:hover:not(:disabled) { color: var(--ink-3); } .step:disabled { cursor: not-allowed; opacity: 0.6; } .step.is-done { color: var(--muted); } .step.is-done .step__num { background: var(--primary); color: #fff; } .step.is-current { color: var(--primary-text); background: var(--primary-soft); } .step.is-current .step__num { background: var(--primary); color: #fff; box-shadow: 0 0 0 3px var(--primary-soft-2); } .step-line { flex: 1; height: 2px; border-radius: var(--r-full); background: var(--slate-200); min-width: 12px; } .step-line.is-done { background: var(--primary); } /* ── Gradient surfaces ────────────────────────────────────────────────────── */ .banner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5); border-radius: var(--r-2xl); background: var(--grad-brand-r); color: #fff; } .banner__title { font-size: var(--t-sm); font-weight: 600; margin: 0; } /* On the re-themed --grad-brand-r banner, a translucent white harmonises with any tenant colour where a fixed --teal-100 would clash. */ .banner__sub { font-size: var(--t-xs); color: rgb(255 255 255 / 0.85); margin: 0; } .gradient-bar { padding: var(--sp-3); border-radius: var(--r-xl); background: var(--grad-brand-r); color: #fff; } .gradient-bar .input { background: rgb(255 255 255 / 0.2); border-color: rgb(255 255 255 / 0.3); color: #fff; } .gradient-bar .input::placeholder { color: rgb(255 255 255 / 0.7); } .gradient-bar .input:focus { background: rgb(255 255 255 / 0.3); box-shadow: 0 0 0 2px rgb(255 255 255 / 0.5); } /* ── Accordion ────────────────────────────────────────────────────────────── */ .acc { border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); overflow: hidden; } .acc-hd { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: 10px var(--sp-4); background: var(--surface); border: 0; cursor: pointer; transition: background var(--t-fast) var(--ease); } .acc-hd:hover { background: var(--slate-50); } .acc-bd { padding: var(--sp-2) var(--sp-4) var(--sp-4); border-top: 1px solid var(--border-hairline); } /* ── Stage — the dark surface. The app has exactly one. ───────────────────── */ .stage { position: relative; border-radius: var(--r-2xl); overflow: hidden; background: var(--grad-stage); display: flex; flex-direction: column; justify-content: flex-end; } .stage.is-live { box-shadow: 0 0 0 2px var(--primary); } .stage__rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .stage__rings span { position: absolute; border-radius: var(--r-full); background: rgb(45 212 191 / 0.12); } .stage__rings span:nth-child(1) { width: 128px; height: 128px; animation: cb-ping 2s var(--ease) infinite; } .stage__rings span:nth-child(2) { width: 96px; height: 96px; animation: cb-pulse 2s var(--ease) infinite; } /* A scrim, not a backdrop-filter: `backdrop-filter` over a WebGL canvas samples the canvas unevenly and leaves a visible grey block. */ .stage__status { position: relative; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-5) var(--sp-4) var(--sp-3); background: linear-gradient(to top, rgb(2 6 23 / 0.85), rgb(2 6 23 / 0)); color: var(--slate-300); font-size: var(--t-xs); } .stage__dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--slate-500); flex: none; } .stage__dot.is-live { background: var(--primary); animation: cb-pulse 2s var(--ease) infinite; } /* ── Mic meter ────────────────────────────────────────────────────────────── */ .meter { display: flex; align-items: flex-end; gap: 2px; height: 24px; } .meter-bar { flex: 1; min-height: 2px; border-radius: var(--r-sm); background: var(--primary); transition: height 80ms linear; } /* ── Spinner ──────────────────────────────────────────────────────────────── */ .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: var(--r-full); animation: cb-spin 700ms linear infinite; flex: none; } .spinner--lg { width: 28px; height: 28px; border-width: 3px; } /* Staged progress list (cbStages) — long blocking operations that report no real progress. Completed steps get a tick, the running one spins, pending are dim. NOTE the `pstep` naming: `.stage`/`.stage__dot` are ALREADY the dark stage surface above, and reusing them here made the rows render as dark cards with the icon absolutely positioned over unreadable text. Keep this namespace distinct. */ .psteps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); } .pstep { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--t-sm); text-align: left; } .pstep--wait { color: var(--muted); } .pstep--now { color: var(--ink); font-weight: 600; } .pstep--done { color: var(--muted); } .pstep__icon { width: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; } .pstep__tick { color: var(--success); font-weight: 700; } .pstep__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); } .pstep .spinner { width: 15px; height: 15px; border-width: 2px; } .psteps__meta { margin: var(--sp-4) 0 0; font-size: var(--t-xs); } @keyframes cb-spin { to { transform: rotate(360deg); } } @keyframes cb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes cb-ping { 0% { transform: scale(1); opacity: 0.7; } 75%, 100% { transform: scale(1.8); opacity: 0; } } /* ── Transcript ───────────────────────────────────────────────────────────── */ .turn { display: flex; margin-bottom: var(--sp-3); } .turn--user { justify-content: flex-end; } .bubble { max-width: 68ch; padding: 10px var(--sp-4); border-radius: var(--r-2xl); background: var(--surface); border: 1px solid var(--border); color: var(--ink-3); font-size: var(--t-sm); line-height: 1.55; } .turn--user .bubble { background: var(--primary); border-color: var(--primary); color: #fff; } /* ── Rendered LLM prose (interview feedback, HR summaries) ────────────────── */ .prose-feedback { font-size: var(--t-sm); line-height: 1.65; color: var(--ink-3); } .prose-feedback h2, .prose-feedback h3 { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--t-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); } .prose-feedback h2:first-child, .prose-feedback h3:first-child { margin-top: 0; } .prose-feedback p { margin: 0 0 var(--sp-3); } .prose-feedback ul { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); list-style: none; } .prose-feedback li { position: relative; margin-bottom: 6px; } .prose-feedback li::before { content: ""; position: absolute; left: calc(var(--sp-5) * -1 + 4px); top: 0.62em; width: 5px; height: 5px; border-radius: var(--r-full); background: var(--primary); } .prose-feedback strong { color: var(--ink); font-weight: 600; } /* ── Auth pages ───────────────────────────────────────────────────────────── */ .auth-shell { min-height: calc(100vh - var(--nav-h)); display: grid; place-items: center; padding: var(--sp-10) var(--sp-4); } .auth-card { width: 100%; max-width: 440px; } /* The role picker gets the card's full width — two columns at 440px leaves the descriptions ragged over four lines. */ .auth-card .picker { grid-template-columns: 1fr; gap: var(--sp-2); } .auth-card__inner { padding: var(--sp-8); } .auth-card h1 { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; } .auth-card .sub { color: var(--muted); font-size: var(--t-sm); margin: 0 0 var(--sp-6); } .auth-alt { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border-hairline); font-size: var(--t-sm); color: var(--muted); text-align: center; } /* ── Utilities. Layout, spacing and type only — never color fills. ────────── */ .row { display: flex; align-items: center; gap: var(--sp-3); } .row--top { align-items: flex-start; } .row--between { justify-content: space-between; } .row--end { justify-content: flex-end; } .row--center { justify-content: center; } .row--wrap { flex-wrap: wrap; } .col { display: flex; flex-direction: column; } .grow { flex: 1; } .noshrink { flex: none; } .min0 { min-width: 0; } .grid { display: grid; gap: var(--sp-4); } .g-2 { grid-template-columns: repeat(2, 1fr); } .g-3 { grid-template-columns: repeat(3, 1fr); } .g-4 { grid-template-columns: repeat(4, 1fr); } .g-5 { grid-template-columns: repeat(5, 1fr); } .g-12 { grid-template-columns: repeat(12, 1fr); } .span-1 { grid-column: span 1; } .span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-12 { grid-column: 1 / -1; } .gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); } .gap-5 { gap: var(--sp-5); } .gap-6 { gap: var(--sp-6); } .gap-8 { gap: var(--sp-8); } .stack-2 > * + * { margin-top: var(--sp-2); } .stack-3 > * + * { margin-top: var(--sp-3); } .stack-4 > * + * { margin-top: var(--sp-4); } .stack-5 > * + * { margin-top: var(--sp-5); } .stack-6 > * + * { margin-top: var(--sp-6); } .t-10 { font-size: var(--t-10); } .t-11 { font-size: var(--t-11); } .t-xs { font-size: var(--t-xs); } .t-sm { font-size: var(--t-sm); } .t-base { font-size: var(--t-base); } .t-lg { font-size: var(--t-lg); } .t-xl { font-size: var(--t-xl); } .t-2xl { font-size: var(--t-2xl); } .t-3xl { font-size: var(--t-3xl); } .w-500 { font-weight: 500; } .w-600 { font-weight: 600; } .w-700 { font-weight: 700; } .ink { color: var(--ink); } .muted { color: var(--muted); } .faint { color: var(--faint); } .teal-txt { color: var(--primary-text); } .ok-txt { color: var(--ok); } .warn-txt { color: var(--warn); } .danger-txt { color: var(--danger); } .num { font-variant-numeric: tabular-nums lining-nums; } .center { text-align: center; } .nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .clamp-2 { -webkit-line-clamp: 2; } .clamp-3 { -webkit-line-clamp: 3; } .m-0 { margin: 0; } .hidden { display: none !important; } .vis-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── Responsive. Desktop-first, two honest breakpoints, no hamburger. ─────── */ @media (max-width: 900px) { .app-nav__inner { padding: 0 var(--sp-4); gap: var(--sp-2); } /* Icon-only tabs rather than the old "nav vanishes entirely". */ .nav-item { padding: var(--sp-2); } .nav-item__label { display: none; } .nav-chip__name { display: none; } .nav-signout .btn span { display: none; } .g-4, .g-5, .stat-grid { grid-template-columns: repeat(2, 1fr); } .g-12 { grid-template-columns: repeat(6, 1fr); } .span-5, .span-7, .span-8 { grid-column: span 6; } .picker { grid-template-columns: 1fr; } } @media (max-width: 640px) { .page { padding: var(--sp-5) var(--sp-4); } .g-2, .g-3, .g-4, .g-5, .g-12, .stat-grid { grid-template-columns: 1fr; } .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8 { grid-column: 1 / -1; } .nav-wordmark { display: none; } } /* Surfaces that genuinely need width. Say so rather than pretending. */ .needs-width { display: none; } @media (max-width: 900px) { .needs-width { display: flex; } } /* ── Modal dialog ─────────────────────────────────────────────────────────── */ /* Replaces the browser's confirm()/alert(). Promoted here from page-board.css, which asked for exactly this once a third page needed the component. Nine do. Built by cbConfirm/cbAlert in ui.js; hr_board.html and hr_search.html also write .confirm markup by hand. ⚠️ NO `display` on `.confirm` itself. It beats the browser's own closed- rule (display: none), so the dialog renders inline on page load before anyone opens it. page-search.css records the same trap. Layout lives on .confirm__form. */ .confirm { border: 1px solid var(--border); border-radius: var(--r-2xl); box-shadow: var(--shadow-lg); background: var(--surface); color: var(--ink); padding: 0; width: min(440px, calc(100vw - 2 * var(--sp-4))); } .confirm::backdrop { background: rgb(15 23 42 / 45%); } .confirm__form { padding: var(--sp-5) var(--sp-6) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); } .confirm__title { margin: 0; font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.02em; } .confirm__body { margin: 0; font-size: var(--t-sm); color: var(--ink-3); } /* Multi-paragraph bodies: the messages this replaces used "\n\n" freely, and cbDialog turns each blank-line-separated run into its own

. The child selector leaves hand-written `

` markup alone. */ .confirm__body > p { margin: 0 0 var(--sp-2); } .confirm__body > p:last-child { margin-bottom: 0; } .confirm__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); }