@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&display=swap'); /* ══════════════════════════════════════════════════════════════════════════ BRAND THEME — ONE SPELLING OF THE COMBE MEDIA WEBSITE'S LOOK, shared by every WarRoom, client-portal, booking and onboarding page. (Chaz, 2026-10-06: "i want the entire warroom UI to match the website please" — and, offered black+cream or cream panels, "gradients please".) Measured from https://www.combemedia.com on 2026-10-06: font Syne. H1 800 UPPERCASE, -0.02em · H2 700, -0.015em · H3 600 colours near-black #141414 (and pure black hero), cream #F1EEE7, white #FFFFFF only for the very biggest headings buttons PILLS, radius 36px. Primary = cream plate #F1EEE7, ink #141414, 1px cream border. Secondary = transparent / dark- translucent, 1px cream border, cream text. Both UPPERCASE, 11-13px, weight 500-600, tracking ~0.12em, often a trailing → labels 11px UPPERCASE, tracking ~0.14em, cream at reduced opacity no green, no gold, no coloured accent anywhere in the brand chrome. This file replaces the "olive glass" / jade theme that used to live as a :root block in public/index.html, a verbatim copy in editor.html, and the same body gradient pasted into seven pages. Pages LINK this file and carry NO copy of the gradient or the brand tokens — verify-website-theme.js fails if the gradient appears anywhere else. The token NAMES are the ones the 500+ existing call sites already use (--l0..--l4, --line*, --fg*, --jw*, the status family, the legacy bridge); only the VALUES moved, so no component markup had to change. STATUS COLOURS STAY. ok / attention / bad / info carry meaning (paid, overdue, needs you, invoiced) and are the only hues on the surface. Each is re-measured >= 4.5:1 against --l4 composited over the lightest part of the gradient (verify-elevation.js composites it, it does not trust the alpha). TABULAR NUMERALS. Syne's Google-hosted cut DOES carry a working `tnum` feature: measured in Chromium 2026-10-06 at 20px / weight 400, "1111" and "8888" and "0000" all render 44.00px wide with font-variant-numeric: tabular-nums (vs 25.77 / 39.20 / 47.05 proportional), and "$1,111.11" = "$8,888.88" = 83.69px. So money, dates and counts keep `font-variant-numeric:tabular-nums` on Syne itself — no second face and no mono fallback is needed. ══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── THE BRAND — the only four colours the website uses ─────────────────── */ --bt-black:#0A0A0A; --bt-ink:#141414; /* the website's near-black */ --bt-cream:#F1EEE7; /* text on dark, and the light plate */ --bt-white:#FFFFFF; --bt-font:'Syne',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; /* ── PILLS — the website's two button styles ─────────────────────────────── */ --btn-radius:36px; /* buttons */ --chip-radius:999px; /* chips, tags, status pills */ --btn-tracking:.12em; /* the site's 1.54px at 11px */ --label-tracking:.14em; /* 11px small caps labels */ --card-radius:14px; /* panels and cards: moderate, never a pill */ --card-hair:rgba(241,238,231,.14); /* the 1px cream-at-low-alpha hairline */ /* ── THE LADDER — near-black floor, cream-at-low-alpha glass above it ───── */ --l0:#0E0E0E; /* sunken wells — a notch below the base */ --l1:#141414; /* app base: canvas, chrome — the site's ink */ --l2:rgba(241,238,231,.07); /* the card — frosted glass over the gradient */ --l3:rgba(241,238,231,.09); /* controls, chips, inputs, segmented tracks */ --l4:rgba(241,238,231,.14); /* hover, pressed, menus */ /* ── HAIRLINES ──────────────────────────────────────────────────────────── */ --line:rgba(241,238,231,.20); --line-soft:rgba(241,238,231,.12); --line-strong:rgba(241,238,231,.32); --edge:inset 0 1px 0 rgba(241,238,231,.10); --edge-2:inset 0 1px 0 rgba(241,238,231,.16); /* ── METAL — neutral warm greys, never a hue ────────────────────────────── */ --platinum:#D4D1CA; --platinum-fg:#B9B6AF; /* tier/Landmark: a clear lightness step below Foundation (verify-elevation PART 5) */ --silver:#B0AEA8; --steel:#8A8882; --champagne:#DEDBD4; /* was a muted gold; the brand has none — a cream step below the white jewel */ /* ── INK — cream ladder, light-on-dark ──────────────────────────────────── */ --fg:#F1EEE7; --fg2:rgba(241,238,231,.84); --fg3:rgba(241,238,231,.74); --fg4:rgba(241,238,231,.70); /* ── THE PRIMARY PLATE — the website's cream pill with dark ink. Primary action + "needs you"; nothing else wears it. ───────────────────────────── */ --jw:#F1EEE7; --jw-hi:#FFFFFF; /* hover: the plate brightens to white */ --jw-ink:#141414; /* ink ON the plate, ~15:1 */ --jw-edge:#F1EEE7; /* 1px cream border, as on the site */ --jw-tint:rgba(241,238,231,.10); --jw-line:rgba(241,238,231,.38); --cta-bg:var(--jw); /* named once for suites that grade the CTA */ --cta-ink:var(--jw-ink); /* The old jade accent (focus ring, active underline) is now cream: the brand has no coloured accent. Names kept because ten call sites read them. */ --jade:#F1EEE7; --jade-fg:#F1EEE7; --olive:#F1EEE7; --olive-hi:#FFFFFF; --olive-deep:#D4D1CA; /* ── THE COMPLEMENT — the warm highlight, now a neutral cream tone ───────── */ --cp:#D4D1CA; --cp-hi:#F1EEE7; --cp-ink:#141414; --cp-tint:rgba(241,238,231,.12); --cp-line:rgba(241,238,231,.40); /* ── STATUS — the only hues, only where colour IS the meaning ─────────────── */ --ok:#8FD0AE; --ok-t:rgba(49,155,114,.18); --ok-l:rgba(49,155,114,.42); --att:#E6C06B; --att-t:rgba(120,90,20,.20); --att-l:rgba(120,90,20,.46); --bad:#E39AA5; --bad-t:rgba(110,35,45,.16); --bad-l:rgba(110,35,45,.40); --bad-d:#9C2E3E; /* SOLID fill for a danger button: cream-white ink clears 4.5:1 on it */ --bad-fg:#F1D3D7; --info-fg:#C8D4E8; --ok-fg:#C3E4D2; --qt-fg:#C7C7EC; --att-fg:#F2D299; --on-att:#141414; /* ink ON a solid attention plate */ --info:#8FA3C4; --info-t:rgba(40,55,85,.16); --info-l:rgba(40,55,85,.40); --qt:#9AA3B8; --qt-t:rgba(45,50,70,.16); --qt-l:rgba(45,50,70,.38); /* ── THE SOLID LADDER — the same warm greys as OPAQUE colours, for the client- facing pages (portal, review, cut, onboarding) whose sticky bars, sheets and drawers must never let content show through. Same family as the glass ladder above, composited over the base. ───────────────────────── */ --solid-bg:#141414; --solid-deep:#0E0E0E; --solid-card:#242321; --solid-raised:#302F2C; --solid-hair:#3F3E3A; --solid-line:#55534E; --solid-control:#3B3A36; --solid-hover:#484742; /* ── ELEVATION — black shadows on a near-black floor ─────────────────────── */ --e0:0 1px 1px rgba(0,0,0,.30); --e1:0 1px 2px rgba(0,0,0,.40), 0 4px 10px -2px rgba(0,0,0,.30); --e-hover:0 2px 4px rgba(0,0,0,.42), 0 10px 22px -6px rgba(0,0,0,.40); --e2:0 4px 8px rgba(0,0,0,.46), 0 22px 44px -14px rgba(0,0,0,.55); /* ── TYPE + GEOMETRY ─────────────────────────────────────────────────────── The scale is unchanged (a colour/type repaint, not a re-layout). Radii stay moderate; pills use --btn-radius / --chip-radius above. */ --t-mi:10px; --t-xs:11px; --t-sm:12px; --t-bd:13px; --t-md:15px; --t-lg:18px; --t-xl:24px; --r1:6px; --r2:8px; --r3:10px; --r4:12px; /* ══ THE LEGACY BRIDGE — old name → new meaning ═════════════════════════════ */ --bg:var(--l1); --deep:var(--l1); --card:var(--l2); --raised:var(--l3); --hair:var(--line-soft); --border:var(--line); --control:var(--l3); --hover:var(--l4); --text:var(--fg); --text2:var(--fg2); --muted:var(--fg3); --dim:var(--fg4); --panel:var(--l2); --accent:var(--jw); --accent-hover:var(--jw-hi); --on-accent:var(--jw-ink); --warn:var(--att); /* One face. Syne carries display and body; headings earn their place with weight, case and tracking, not a second family. */ --serif:var(--bt-font); --sans:var(--bt-font); --t-micro:var(--t-xs); --t-small:var(--t-sm); --t-body:var(--t-bd); --t-h3:var(--t-lg); --t-h2:var(--t-xl); --r-sm:var(--r1); --r-md:var(--r2); --r-lg:var(--r3); --r-xl:var(--r4); --gold:var(--champagne); --white:var(--fg); --grey:var(--fg3); --green:var(--ok); --amber:var(--att); --red:var(--bad); --blue:var(--info); --flow-orange:var(--champagne); /* The wash: neutral tones for any room that still reads --wash-* directly. */ --wash-a:#1F1E1C; --wash-b:#2A2927; --wash-c:#141414; --wash-d:#1F1E1C; /* GLASS — the backdrop-filter recipe every frosted surface shares. */ --glass-blur:blur(18px) saturate(110%); --glass-blur-lg:blur(22px) saturate(110%); } @media (prefers-reduced-transparency: reduce){ /* Solid tones stepped between the floor (#141414) and the lighter gradient stop, same lightness gaps the alpha ladder implies. */ :root{ --l2:#1C1B1A; --l3:#242321; --l4:#2E2D2A; } } @supports not (backdrop-filter: blur(1px)){ :root{ --l2:#1C1B1A; --l3:#242321; --l4:#2E2D2A; } } /* ── THE GRADIENT — a black-to-warm-charcoal diagonal sweep with one very soft cream glow in the top-left corner. Calm, no hue. THE ONLY COPY IN THE REPO. ─────────────────────────────────────────────────────────────────── */ body{background-color:var(--l0); background-image: radial-gradient(900px 700px at 8% 0%, rgba(241,238,231,.07) 0%, transparent 60%), linear-gradient(135deg, #1F1E1C 0%, #141414 45%, #0A0A0A 100%); background-attachment:fixed;background-repeat:no-repeat; color:var(--fg);font-family:var(--sans);font-size:var(--t-bd);line-height:1.45; font-variant-numeric:tabular-nums;min-height:100vh; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} @media (prefers-reduced-transparency: reduce){ body{background-image:none} } .num{font-variant-numeric:tabular-nums} /* ── TYPE — the website's hierarchy ────────────────────────────────────────── Page titles: UPPERCASE, 800, very tight. Section headings 700. Card titles 600 in normal case. */ h1,h2,h3,h4{font-family:var(--bt-font);font-weight:600;letter-spacing:-.015em;line-height:1.18} h1{font-weight:800;letter-spacing:-.02em;text-transform:uppercase} h2{font-weight:700} h3,h4{font-weight:600;text-transform:none} /* The small label: 11px, uppercase, tracked, cream at reduced opacity. */ .bt-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:var(--label-tracking);color:var(--fg4)} /* ── PILLS — the website's two button styles, for any page without its own .btn. Pages that DO have their own button classes take the same tokens (--btn-radius, --btn-tracking, --jw*) rather than a second spelling. ───── */ .bt-btn,.bt-btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--bt-font);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:var(--btn-tracking); border:1px solid var(--bt-cream);border-radius:var(--btn-radius);padding:9px 20px;cursor:pointer;text-decoration:none; transition:background .15s,color .15s,border-color .15s,transform .06s} .bt-btn-primary{background:var(--jw);color:var(--jw-ink)} .bt-btn-primary:hover{background:var(--jw-hi);border-color:var(--jw-hi)} .bt-btn{background:rgba(36,36,36,.27);color:var(--fg)} .bt-btn:hover{background:var(--l4)} .bt-btn:focus-visible,.bt-btn-primary:focus-visible{outline:2px solid var(--bt-cream);outline-offset:2px} /* ── NATIVE DROPDOWNS (Chaz, 2026-10-06: "i also cant see dropdown text") ── A