/* ════════════════════════════════════════════════════════════════════════════ SMARTBUILD BRAND LAYER — 2026-09 (Zulq's ask; Tanveer's picks 2026-09-02) ════════════════════════════════════════════════════════════════════════════ The brand-colour override. When enabled it loads as the LAST stylesheet — after flat-2026-08.css — in base.html and auth/_shell.html. UNTIL those s exist this file is inert: nothing references it, so shipping it changes nothing. Source of truth for the mapping: Tanveer's picks pasted in chat 2026-09-02, chosen on /static/brand-concept-2026-09.html (which stays — it is the tuning surface if any value gets revisited). Brand palette: #58C3E7 sky · #4681B1 steel · #8D8F91 grey · #EC1A52 crimson · #77A2B1 dusty teal · #E17125 orange · #C75127 rust · #BBD1D8 / #DEE8EC / #ECF1F3 pale blues · #FFFFFF. Deliberately NOT touched (Tanveer's calls on the concept page): - --ok / --warn stay the muted green/amber — status colours carry meaning and the brand has no green; the brand oranges belong to the Demo & Training identity. - --num-good / --num-warn stay the heritage vivid tones. - --accent-plum stays in light mode (no brand purple exists; six tools need six hues) — dark mode lifts it so it doesn't sink into the canvas. - Card surface (#FFFFFF / #131C28) and sunken surface stay. - The in-progress grey chart treatment, the pastel calls time-chips and the ink scale are out of scope by design. - TABLES ARE INK BY DEFAULT (Tanveer 2026-09-02: "people hate tables with colours if they mean nothing") — a cell is coloured only where a real threshold backs a judgement. That rule is enforced per template during rollout, not from this file. ──────────────────────────────────────────────────────────────────────── */ /* ── Tokens: light ─────────────────────────────────────────────────────── */ :root { --brand: #4681B1; /* steel blue */ --brand-deep: #2A5A8C; --brand-soft: rgba(70, 129, 177, 0.10); --brand-line: rgba(70, 129, 177, 0.30); --bad: #EC1A52; /* full brand crimson (his pick) */ --bad-soft: rgba(236, 26, 82, 0.10); --bad-line: rgba(236, 26, 82, 0.28); --neutral: #75797B; /* brand grey, darkened for text */ --num-bad: #EC1A52; /* headline numbers: exact brand crimson */ --num-info: #33A9D6; /* brand sky, one step darker for white */ --info: #33A9D6; --accent-bronze: #C75127; /* brand rust replaces bronze (Calls) */ --accent-bronze-soft: rgba(199, 81, 39, 0.10); --accent-teal: #4A7585; /* brand dusty teal, darkened (Time Off) */ --accent-teal-soft: rgba(74, 117, 133, 0.10); --tool-dashboard: #58C3E7; /* brand sky (was the board's #33BDF0) */ --bg-app: #FFFFFF; /* his custom pick: pure white page */ --hairline: #DEE8EC; /* solid pale brand blue borders */ --hairline-2: rgba(187, 209, 216, 0.35); /* Chart series — re-ordered blue→rust→green→plum→amber→deep→crimson so look-alike hues never sit adjacent (validated 2026-09-02; the old order had brand-deep beside plum at ΔE 11). Slot 3's green and slot 7's crimson are chart-specific steps, deliberately NOT --ok / --bad: chips may shout, series may not. */ --chart-1: #4681B1; --chart-2: #C75127; --chart-3: #33925F; --chart-4: #5B5D7C; --chart-5: #A57C2A; --chart-6: #2A5A8C; --chart-7: #B73A56; } /* ── Tokens: dark ──────────────────────────────────────────────────────── */ .theme-dark { --brand: #58C3E7; /* the sky blue gets the theme it shines on */ --brand-deep: #8ED2EF; --brand-soft: rgba(88, 195, 231, 0.16); --brand-line: rgba(88, 195, 231, 0.36); --neutral: #8D8F91; /* raw brand grey works on the deep canvas */ --num-bad: #FF5C82; --num-info: #58C3E7; --info: #58C3E7; --accent-plum: #8B7FC7; /* lifted so plum doesn't sink into #131C28 */ --accent-plum-soft: rgba(139, 127, 199, 0.14); --accent-bronze: #E0703F; --accent-bronze-soft: rgba(224, 112, 63, 0.14); --accent-teal: #77A2B1; /* raw brand teal is right at this depth */ --accent-teal-soft: rgba(119, 162, 177, 0.14); --hairline: rgba(187, 209, 216, 0.14); --hairline-2: rgba(187, 209, 216, 0.07); /* Dark chart steps — validated against the #131C28 card: every check passes (worst adjacent pair ΔE 19.4 normal / 7.4 CVD). */ --chart-1: #3E9CC8; --chart-2: #E0703F; --chart-3: #3F9C74; --chart-4: #8B7FC7; --chart-5: #B98A3C; --chart-6: #5B8FD4; --chart-7: #D9557B; } /* ── Activity by day — the amber leaves (Tanveer 2026-09-02: "change the piss yellow in activity by day"). Dials wear the brand steel and emails the brand rust — the same pairing as chart series 1/2, so the card and the charts tell one colour story. The tokens drive the SVG bar fills AND the app.js tooltip dots; unbranded pages (home, until the workspace tool joins the rollout) fall back to the old sky/amber via the var() defaults in activity_card.html. ─────────────────────────────────────────────── */ :root { --act-dials: #4681B1; --act-emails: #C75127; } .theme-dark { --act-dials: #3E9CC8; --act-emails: #E0703F; } /* The Phone/Email pills must match the bars (bar + pill + tooltip are one legend — the invariant theme.css documents). The pastel surfaces go solid brand with white text — FIXED in both themes, like the rail: the pills run one step darker than the (theme-lifted) bars so the 11px white label keeps AA contrast even in dark mode, where the bar tokens are too light to sit behind text. */ .activity-card .stat-phone { background: #4681B1; color: #fff; } .activity-card .stat-phone .stat-ic { background: rgba(255, 255, 255, 0.16); color: #fff; } .activity-card .stat-phone .stat-num { color: #fff; } .activity-card .stat-phone .stat-lbl { color: rgba(255, 255, 255, 0.78); } .activity-card .stat-email { background: #B54E26; color: #fff; } .activity-card .stat-email .stat-ic { background: rgba(255, 255, 255, 0.16); color: #fff; } .activity-card .stat-email .stat-num { color: #fff; } .activity-card .stat-email .stat-lbl { color: rgba(255, 255, 255, 0.78); } /* ── Page background — pure white (his custom pick) ────────────────────── */ /* flat-2026-08.css pins #F2F3F6 with !important, so this must out-cascade it (same specificity + !important → later file wins; keep this layer linked LAST). Dark stays flat's #0A0D17: `.theme-dark body` outranks these selectors, so no dark rule is needed here. */ body, .vibe-soft, .login-shell { background: #FFFFFF !important; } /* ── Profile initials — the SMARTBUILD blues (Tanveer 2026-09-02: "can we also change the user profile initials to be the smartbuild blue"). The rail avatar and the user-menu flyout avatar wore the legacy purple gradient (#7C5BD9 → #5638A8, v1.css). Sky → deep steel, not sky → steel: the white initials sit at the gradient's midpoint and need the darker far stop to stay readable. ─────────────────────────────────────────────── */ .rail .rail-avatar, .user-menu .um-avatar { background: linear-gradient(135deg, #58C3E7, #2A5A8C); } /* ── Icon rail — brand blue-black (his pick) ───────────────────────────── */ .rail { background: #101820 !important; } /* The avatar presence-dot's cutout border must match the rail behind it (same fix flat-2026-08.css made when the rail went #17171A). */ .rail .rail-avatar::after, .theme-dark .rail .rail-avatar::after { border-color: #101820; } /* ── Active rail item — theme.css hardcodes the old slate rgba with !important, so restate it in the new brand blues. ───────────────────── */ .rail .rail-item.active { background: rgba(70, 129, 177, 0.22) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 16px rgba(70, 129, 177, 0.28), 0 0 0 1px rgba(70, 129, 177, 0.25) !important; } .theme-dark .rail .rail-item.active { background: rgba(88, 195, 231, 0.18) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 8px 18px rgba(88, 195, 231, 0.30), 0 0 0 1px rgba(88, 195, 231, 0.34) !important; }