/* Warm UI — design-system token layer (#design-system). Loaded AFTER bootstrap.min.css in every base template; overrides Bootstrap's defaults through its own CSS variables plus targeted component rules. Phase 1: re-tint the whole app (ground, ink, cards, buttons, fields, type) without touching markup. Per-screen bespoke work comes later. Palette read from the app screenshots: light warm theme, orange the single accent, violet-night is the ink not a surface. */ /* ── Clash Display (self-hosted, /static/fonts) ───────────────────────────── */ @font-face{font-family:'Clash Display';src:url('/static/fonts/clash-display-400.woff2') format('woff2');font-weight:400;font-display:swap;font-style:normal} @font-face{font-family:'Clash Display';src:url('/static/fonts/clash-display-500.woff2') format('woff2');font-weight:500;font-display:swap;font-style:normal} @font-face{font-family:'Clash Display';src:url('/static/fonts/clash-display-600.woff2') format('woff2');font-weight:600;font-display:swap;font-style:normal} @font-face{font-family:'Clash Display';src:url('/static/fonts/clash-display-700.woff2') format('woff2');font-weight:700;font-display:swap;font-style:normal} /* ── Tokens ───────────────────────────────────────────────────────────────── */ :root{ --brand:#F76C22; --brand-hover:#ef6014; --ink:#0f0339; --ink-hover:#1c0a4d; --ground:#F7F7F3; --surface:#FFFFFF; --peach:#FDECE0; --muted:#9e93b4; --violet:#6d28d9; --blue:#2563eb; --green:#16a34a; --danger:#dc2626; --shadow-sm:0 1px 2px rgba(15,3,57,.04), 0 4px 12px rgba(15,3,57,.03); --shadow-md:0 4px 6px -1px rgba(15,3,57,.05), 0 12px 24px -4px rgba(15,3,57,.08); --shadow-lg:0 10px 25px -3px rgba(15,3,57,.10), 0 20px 48px -6px rgba(15,3,57,.12); --glow-brand:0 6px 22px rgba(247,108,34,.30); --r-lg:20px; --r-md:14px; --r-sm:10px; --ease:cubic-bezier(.16,1,.3,1); --t:all .25s var(--ease); --fd:'Clash Display', system-ui, -apple-system, sans-serif; /* Map onto Bootstrap so text-primary/bg-primary/links/radius follow the theme. --bs-body-bg is WHITE (not the cream ground): Bootstrap defaults cards, list-groups, tables, dropdowns and modals to --bs-body-bg, and they must be white surfaces. The cream page ground is set on directly below. */ --bs-body-bg:var(--surface); --bs-body-color:var(--ink); --bs-body-font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --bs-primary:#F76C22; --bs-primary-rgb:247,108,34; --bs-link-color:var(--brand); --bs-link-color-rgb:247,108,34; --bs-link-hover-color:var(--brand-hover); --bs-border-color:rgba(15,3,57,.10); --bs-border-radius:var(--r-md); --bs-border-radius-sm:var(--r-sm); --bs-border-radius-lg:var(--r-lg); --bs-emphasis-color:var(--ink); } body{background:var(--ground);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} /* The page ground is warm cream and cards are white (like the mockup). Templates put bg-light on , which otherwise wins as near-white — pin it back to the ground. Cards are forced white here because Bootstrap's --bs-card-bg defaults to --bs-body-bg (cream), which would make cards the same colour as the ground. */ body.bg-light{background:var(--ground)!important} /* ── Typography — Clash Display on headings + brand ───────────────────────── */ h1,h2,h3,h4,h5,h6,.navbar-brand,.display-1,.display-2,.display-3,.display-4,.display-5,.display-6{ font-family:var(--fd);letter-spacing:-.02em} .text-muted{color:var(--muted)!important} /* ── Depth — soft, diffuse shadows replace Bootstrap's flat ones ──────────── */ .shadow-sm{box-shadow:var(--shadow-sm)!important} .shadow{box-shadow:var(--shadow-md)!important} .shadow-lg{box-shadow:var(--shadow-lg)!important} /* ── Cards ────────────────────────────────────────────────────────────────── */ .card{--bs-card-bg:var(--surface);background-color:var(--surface);border:1px solid rgba(15,3,57,.06);border-radius:var(--r-lg);transition:var(--t)} .card.shadow-sm:hover{box-shadow:var(--shadow-md)!important} /* ── Buttons — rounded, tactile, brand glow on primary ────────────────────── */ .btn{border-radius:var(--r-sm);font-weight:600;transition:var(--t)} .btn:active{transform:translateY(0) scale(.985)} .btn-dark{--bs-btn-bg:var(--ink);--bs-btn-border-color:var(--ink); --bs-btn-hover-bg:var(--ink-hover);--bs-btn-hover-border-color:var(--ink-hover); --bs-btn-active-bg:var(--ink-hover);--bs-btn-active-border-color:var(--ink-hover)} .btn-dark:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(15,3,57,.22)} .btn-primary{--bs-btn-bg:var(--brand);--bs-btn-border-color:var(--brand); --bs-btn-hover-bg:var(--brand-hover);--bs-btn-hover-border-color:var(--brand-hover); --bs-btn-active-bg:var(--brand-hover);--bs-btn-active-border-color:var(--brand-hover); box-shadow:var(--glow-brand)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(247,108,34,.42)} .btn-outline-secondary{--bs-btn-color:var(--ink);--bs-btn-border-color:rgba(15,3,57,.14); --bs-btn-hover-bg:var(--peach);--bs-btn-hover-border-color:var(--brand);--bs-btn-hover-color:var(--brand)} .btn-outline-primary{--bs-btn-color:var(--brand);--bs-btn-border-color:var(--brand); --bs-btn-hover-bg:var(--brand);--bs-btn-hover-border-color:var(--brand)} /* ── Forms — soft glow focus, no rigid outline ────────────────────────────── */ .form-control,.form-select{border-radius:var(--r-sm);border-color:rgba(15,3,57,.10);transition:var(--t)} .form-control:focus,.form-select:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--peach)} .form-check-input:checked{background-color:var(--brand);border-color:var(--brand)} .form-check-input:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--peach)} /* ── Navbar / chrome — violet-night, not black ────────────────────────────── */ .navbar.bg-dark,.bg-dark{background-color:var(--ink)!important} .navbar-brand{font-weight:600} /* ── Status colours — soft-filled pills for the bg-* badges used on statuses ─ */ .badge.bg-success{background-color:rgba(22,163,74,.12)!important;color:var(--green)!important} .badge.bg-info{background-color:rgba(37,99,235,.12)!important;color:var(--blue)!important} .badge.bg-warning{background-color:rgba(247,108,34,.14)!important;color:var(--brand)!important} .badge.bg-secondary{background-color:rgba(15,3,57,.06)!important;color:var(--muted)!important} .badge.bg-primary{background-color:var(--peach)!important;color:var(--brand)!important} .badge.rounded-pill{font-weight:600} /* ── Alerts — softer ──────────────────────────────────────────────────────── */ .alert{border-radius:var(--r-sm)} .alert-success{--bs-alert-bg:#f0faf3;--bs-alert-border-color:rgba(22,163,74,.22);--bs-alert-color:#136c33} .alert-danger{--bs-alert-bg:#fdf1f1;--bs-alert-border-color:rgba(220,38,38,.2);--bs-alert-color:#a71d1d} /* ── Accessibility ────────────────────────────────────────────────────────── */ :focus-visible{outline:2px solid var(--brand);outline-offset:2px} @media (prefers-reduced-motion: reduce){ *,.btn,.card{transition:none!important} .btn:hover,.card.shadow-sm:hover,.btn-dark:hover,.btn-primary:hover{transform:none} } /* ── Component-library helpers (used by templates/components/ui.html) ──────── */ .text-brand{color:var(--brand)!important} .bg-peach{background:var(--peach)!important} /* Initials-fallback avatars — peach + brand (like the mockup), not grey/ink. Applied to the inline rounded-circle avatars that keep their own px sizing. */ .avatar-initials{background:var(--peach)!important;color:var(--brand)!important;font-family:var(--fd)} /* Bootstrap 5 has no min-width-0 utility, but templates use it to let flex children (message rows, job cards) shrink so text-truncate works instead of overflowing. */ .min-width-0{min-width:0!important} .field-error .form-control,.field-error .form-select{border-color:var(--danger);box-shadow:0 0 0 4px rgba(220,38,38,.12)} .field-err{color:var(--danger);font-size:12.5px;margin-top:6px} /* avatar with initials fallback — circle to match the whole app (operator call 2026-07-24); a `square` variant keeps the rounded-square token if ever needed */ .avatar{border-radius:50%;background:var(--brand);color:#fff;font-family:var(--fd);font-weight:600; display:inline-flex;align-items:center;justify-content:center;object-fit:cover;flex-shrink:0} .avatar.square{border-radius:14px} .avatar.peach{background:var(--peach);color:var(--brand)} .avatar-sm{width:36px;height:36px;font-size:15px} .avatar-md{width:48px;height:48px;font-size:19px} .avatar-lg{width:64px;height:64px;font-size:24px} .avatar-sm.square{border-radius:11px} .avatar-lg.square{border-radius:16px} /* stat card (ui.stat) — clickable dashboard tiles, uniform size per row */ .stat-card{transition:transform .15s ease, box-shadow .15s ease} a:hover > .stat-card{transform:translateY(-2px);box-shadow:var(--shadow-lg)} .stat-card .display-6{letter-spacing:-.02em} /* empty state */ .empty-state{text-align:center;padding:44px 20px;color:var(--muted)} .empty-state .glyph{width:60px;height:60px;border-radius:18px;background:var(--peach);color:var(--brand); margin:0 auto 16px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)} .empty-state .es-title{font-family:var(--fd);font-weight:600;color:var(--ink);font-size:17px;letter-spacing:-.02em} /* Work-Folio entries — ONE card language for the three places they render: the editable list on the talent profile, and the read-only grid the profile view and the business candidate page both include. The read-only grid used to be bare Bootstrap (`border rounded`, 0.75rem inline type) next to the styled editable list, so the talent's own stories looked unfinished to the business reading them. */ .wf-entry{border:1px solid rgba(15,3,57,.08);border-radius:var(--r-md);background:var(--surface); overflow:hidden;transition:border-color .15s ease, box-shadow .15s ease} /* Masonry, via CSS columns rather than a Bootstrap row. Covers keep their own height (no crop, no fixed band), so a row grid made every row as tall as its tallest card: a portrait next to a text-only story left half a screen blank. Cards now fill a column and continue in the next one, so the only whitespace left is the gap between them. Reading order becomes top-to-bottom per column, which is what a portfolio wants anyway. */ .wf-grid{column-count:2;column-gap:16px} .wf-grid > .wf-entry{display:block;width:100%;margin-bottom:16px; -webkit-column-break-inside:avoid;break-inside:avoid} @media (max-width:575.98px){.wf-grid{column-count:1}} .wf-entry:hover{border-color:rgba(247,108,34,.35);box-shadow:var(--shadow-sm)} .wf-entry .wf-title{font-family:var(--fd);font-weight:600;letter-spacing:-.01em} .wf-entry .wf-meta{color:var(--muted)} .wf-entry summary{list-style:none} .wf-entry summary::-webkit-details-marker{display:none} /* The editable entry's action row. Closed, the

is only its summary, so [Edit] and [Delete] sit side by side. Open, the summary labels a form that is already on screen — it goes, the form takes the whole row, and Save drops in beside Delete under the fields. Save is hidden while the form is collapsed: there is nothing on screen for it to submit. */ .wf-form[open]{flex:1 0 100%} .wf-form[open] > summary{display:none} .wf-form:not([open]) ~ .wf-buttons .wf-save{display:none} /* Cover photo: the image keeps its OWN ratio, capped in height. Never cropped — a Work-Folio photo IS the story, and filling a frame cut the subject out of any shot that wasn't already 2:1. No fixed band either: forcing every photo into one ratio and letterboxing the rest left a panorama as a strip in a sea of mat and a portrait as a stamp. A wide photo now spans the card edge to edge with no mat at all; only a tall one shows the ground on its sides, where there is genuinely nothing to draw. Centres itself and carries its own mat, so the rule holds whether or not the photo is wrapped in the lightbox trigger. The mat is the card's own surface, not `--ground`: a tinted block behind a tall photo read as a second frame drawn around it, which is exactly the noise this rule exists to remove. */ .wf-cover{display:block;max-width:100%;max-height:320px;width:auto;height:auto; object-fit:contain;margin-inline:auto;background:var(--surface)} /* Same no-crop rule at thumbnail size, on the editable list. */ .wf-thumb{width:56px;height:56px;border-radius:var(--r-sm);object-fit:contain; background:var(--ground);flex-shrink:0} /* Space held for a photo that isn't there — reserved, never painted. An empty mat would read as a photo that failed to load. */ .wf-thumb-none{background:none} /* The cover is a button (it opens the lightbox) but must render as the bare image. It carries the mat and centres the photo, so a tall shot sits in the middle of the card instead of hugging one edge. Resetting `background` and `border` is not cosmetic: unstyled, a