/* 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; --page-max: 1280px; --page-max-md: 896px; --page-max-sm: 768px; --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); } .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; } .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(--teal-700); background: var(--teal-50); } /* 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(--teal-500); } .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(--teal-500); } .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; } .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 ──────────────────────────────────────────────────────── */ .page { 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; } .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(--teal-300); box-shadow: 0 0 0 1px var(--teal-200); } .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(--teal-700); } .btn--inverse:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--teal-50); } .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); } .input::placeholder, .textarea::placeholder { color: var(--faint); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: transparent; box-shadow: var(--focus-ring); } .input:disabled, .select:disabled, .textarea:disabled { background: var(--slate-50); color: var(--faint); cursor: not-allowed; } .textarea { resize: vertical; min-height: 90px; } .select { appearance: none; padding-right: var(--sp-8); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--sp-3) center; } /* Icon-prefixed input: wrap in .input-icon, put the svg first. */ .input-icon { position: relative; } .input-icon > .ico { position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; } .input-icon > .input, .input-icon > .select { padding-left: 36px; } .input--sm, .select--sm { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-lg); } .select--sm { padding-right: var(--sp-6); } .hint { font-size: var(--t-xs); color: var(--faint); } /* Styled file picker — hides the native input behind an on-palette button and a filename readout. Markup: