/* ============================================================ ella HUB — shared brand stylesheet (Umbrella) Brand: neon purple #AC43FF · mint #43FFBB · cyan #43F4FF on black Type: Inter (with system fallback for offline) Treatment: dark hero (login / covers) + light app (working screens) ============================================================ */ :root { /* -- THE ACCENT: one hue per console, in the two variants a surface needs -- The estate used to hand every console the same purple for its links, its primary button and its focus ring, and then paint the dashboard in four to seven unrelated hues on top. That is backwards. The identity is ONE colour and it is this console's; everything else on a working screen is neutral or is a status. `--accent` is the on-light variant: at least 4.5:1 on white AND on the light-grey page, so it can be a link, a rule, an icon or a figure without a second thought, and white on it clears 4.5:1 so it can be a button. `--accent-on-dark` is the SAME hue for the black sidebar. The on-light variant measures about 3.5:1 there -- enough for a 3px mark, not enough for a label -- and the two used to be one value, which is how a sidebar ends up with a wordmark nobody can quite read. The same split as the status fills and their inks, for the same reason: the surface decides. `--accent-tint` is the accent at 12 per cent, for an icon plate or a selected row. The accent reads at 4.5:1 or better on it. The six console hues are held to one lightness band on purpose. They are a FAMILY: put them side by side in the hub's service tiles and they read as one product's palette rather than as a box of highlighters. */ --accent: #5B52C8; /* indigo-violet */ --accent-on-dark: #A99CF5; --accent-tint: #EBEAF8; --accent-strong: #4B43A4; /* the accent pressed: hover and active on a filled button */ --accent-rgb: 91, 82, 200; /* The wordmark lockup. */ --brand-accent: #43FFBB; --brand-accent-2: #43F4FF; /* ---- neon brand trio ---- */ --purple: #AC43FF; --purple-deep: #7A1FD0; /* readable purple on light */ --mint: #43FFBB; --mint-deep: #0A7050; /* readable mint on light */ --cyan: #43F4FF; --cyan-deep: #0B6076; /* primary = purple (the ella hero colour) */ --primary: var(--accent); /* the console's own, not one shared indigo */ --primary-light: var(--accent); --primary-dark: var(--accent-strong); /* ---- dark / ink ---- */ --black: #000000; --ink: #0B0B12; /* near-black surfaces */ --ink-2: #14141E; /* raised dark surface */ --ink-line: #26263A; /* hairlines on dark */ /* ---- light app neutrals ---- */ --slate: #4A5168; --slate-light: #656B83; --bg: #F7F7F7; --surface: #FFFFFF; --border: #e5e7eb; --border-strong: #D6D6E4; /* ---- status ---- */ /* The four status fills, restated 2026-09-10. They were Bootstrap 4's defaults -- #28a745, #ffc107, #dc3545, #17a2b8 -- and they carried that era's look with them: a traffic-light green, a school-bus amber, a pillarbox red. Beside a palette held to one lightness band they were the loudest thing on every screen, which is the opposite of what a status should be: quiet until it applies. Same four meanings, one generation on, and matched to each other rather than to a framework's 2018 defaults. They remain FILLS -- painted, never read -- and the `-ink` values below are unchanged, so nothing that was legible has moved. */ --success: #16A34A; --success-bg:#DCFCE7; --warning: #D97706; --warning-bg:#FEF3C7; /* ── The four status inks ───────────────────────────────────────────── Amber was fixed first and alone, and the rule it established — the fill is what a status is PAINTED in, the ink is what it is READ in — was never carried to the other three. So --success at 2.85:1 on --success-bg, --info at 2.50:1 and --danger at 4.12:1 all went on being used as text, in exactly the chips and alerts the amber rule was written for. Each ink is the same hue, dark enough to read on its own tint AND on white and on the light-grey page: 4.6 to 8.2:1. Nothing paints text in a fill colour; ReadableTextTest fails the build if anything starts. */ --warning-ink:#78350F; --success-ink:#15803D; --danger-ink: #B02A37; --info-ink: #155E75; /* Purple that can be READ on a light background. --primary is a fill (and now passes with white on it); this is the same colour for a link or a figure, where 4.9:1 is not enough at 13px. */ --primary-ink:#5B4BC4; --danger: #DC2626; --danger-bg: #fff1f2; --danger-strong: #B41F1F; /* the danger fill pressed */ --info: #0891B2; --info-bg: #DBEAFE; /* ---- shape ---- */ --radius: 8px; --radius-sm:4px; --radius-pill:999px; --shadow-sm: 0 2px 4px rgba(0,0,0,0.05); --shadow: 0 5px 15px rgba(0,0,0,0.08); --shadow-lg: 0 10px 30px rgba(0,0,0,0.10); /* ── The brand, handed to Bootstrap in its own vocabulary ────────────── Bootstrap is the base layer of the console. Everything it draws reads these, so a component pasted out of Bootstrap's documentation arrives branded rather than arriving blue — which is the whole reason the estate can use a standard library without looking like one. `--bs-primary` is `--purple-deep` and not `--purple`: these are light surfaces, and the lighter purple manages 2.9:1 on white. Amber is deliberately absent. `--warning` is 1.46:1 on its own background — a fill and a rule, never a word — so `--bs-warning-text-emphasis` gets `--warning-ink` instead, and `.text-warning` is not a thing this estate uses. `AmberContrastTest` fails the build if that slips. */ --bs-primary: var(--accent); --bs-primary-rgb: var(--accent-rgb); --bs-secondary: var(--slate); --bs-success: var(--success); --bs-danger: var(--danger); --bs-warning: var(--warning); --bs-info: var(--info); --bs-body-color: var(--ink); --bs-body-color-rgb: 11, 11, 18; --bs-body-bg: var(--bg); --bs-body-bg-rgb: 247, 247, 247; --bs-emphasis-color: var(--ink); --bs-secondary-color: var(--slate); --bs-tertiary-color: var(--slate-light); --bs-secondary-bg: var(--bg); --bs-tertiary-bg: var(--bg); --bs-heading-color: var(--ink); --bs-border-color: var(--border); --bs-border-color-translucent: var(--border); --bs-border-radius: var(--radius); --bs-border-radius-sm: var(--radius-sm); --bs-border-radius-lg: 12px; --bs-border-radius-pill: var(--radius-pill); --bs-link-color: var(--accent); --bs-link-color-rgb: var(--accent-rgb); --bs-link-hover-color: var(--accent); --bs-code-color: var(--accent); --bs-body-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --bs-body-font-size: .9375rem; /* the estate's 15px, stated once */ --bs-body-line-height: 1.5; --bs-warning-text-emphasis: var(--warning-ink); --bs-box-shadow-sm: var(--shadow-sm); --bs-box-shadow: var(--shadow); --bs-box-shadow-lg: var(--shadow-lg); /* Focus. Bootstrap rings everything focusable in its own blue otherwise, and a purple console with blue focus rings reads as two products. */ --bs-focus-ring-color: rgba(var(--accent-rgb), .16); --bs-focus-ring-width: 3px; /* ---- gradients (neon) ---- */ --gradient: linear-gradient(135deg, #AC43FF 0%, #43F4FF 100%); --gradient-mint: linear-gradient(135deg, #AC43FF 0%, #43FFBB 120%); --gradient-tri: linear-gradient(120deg, #AC43FF 0%, #43F4FF 55%, #43FFBB 110%); --glow-purple: 0 0 0 1px rgba(172,67,255,.4), 0 0 28px rgba(172,67,255,.45); --glow-mint: 0 0 0 1px rgba(67,255,187,.4), 0 0 28px rgba(67,255,187,.4); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; letter-spacing: -.01em; } /* 15px, matching ella Secure — the estate's blueprint. Left unset this inherited the browser's 16px, so every unsized element here was a pixel larger than the same element on Secure, Converse and Draw; it showed first in the left-hand menu, which is where two consoles get compared. On BODY only, never on `html`. rem resolves against the root, and the wordmark is sized in rem — setting it on both shrank the logo from 18.9px to 17.7px, which is the opposite of the point. */ body { font-size: 16px; } a { color: var(--accent); text-decoration: none; } h1,h2,h3,h4 { margin: 0; line-height: 1.15; letter-spacing: -.025em; } /* ---- wordmark ---- */ .wordmark { display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:21px; letter-spacing:-.04em; } .wordmark-mark { width:1.05em; height:1.05em; flex:none; display:inline-flex; align-items:center; justify-content:center; margin-right:2px; filter:drop-shadow(0 0 6px rgba(172,67,255,.45)); } .wordmark-mark svg { width:100%; height:100%; display:block; } .wordmark .ella { color: var(--ink); } .wordmark .hub { background: var(--gradient); color:#04121A; padding:3px 9px; border-radius:8px; font-size:12px; letter-spacing:.04em; text-transform:lowercase; font-weight:800; } .wordmark.on-dark .ella { color:#fff; } .wordmark.on-dark .hub { box-shadow: 0 0 22px rgba(67,244,255,.55); } /* ---- dark hero surface ---- */ .hero-dark { background: radial-gradient(120% 120% at 12% 0%, rgba(172,67,255,.28), transparent 42%), radial-gradient(120% 120% at 100% 100%, rgba(67,255,187,.22), transparent 45%), #000; color:#fff; } /* ---- chips / badges ---- */ .chip { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:var(--radius-pill); background:#F3E9FF; color:var(--purple-deep); } .chip.mint { background:#DCFFF3; color:var(--mint-deep); } .chip.cyan { background:#DBFAFF; color:var(--cyan-deep); } .chip.warn { background:var(--warning-bg); color:var(--warning-ink); } .chip.danger { background:var(--danger-bg); color:var(--danger-ink); } .chip.ok { background:var(--success-bg); color:var(--success-ink); } .chip.info { background:var(--info-bg); color:var(--info-ink); } .chip.wip { background:#FFF4E5; color:#C2410C; } .dot { width:8px; height:8px; border-radius:50%; display:inline-block; } /* ---- cards ---- */ .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); } .muted { color:var(--slate-light); } .small { font-size:13.5px; } /* ---- layout helpers ---- `.row` used to live here as `display:flex; gap:16px`, which is Bootstrap's name for a grid row. Shadowing it meant the estate could load Bootstrap and still not use its grid — the one thing a house grid is supposed to stop you needing to know. It is `d-flex gap-3`, which is the same declaration under a name that is not already taken. */ .between { justify-content:space-between; align-items:center; } .center { align-items:center; } .grow { flex:1; } .stack { display:flex; flex-direction:column; gap:6px; } /* avatar */ .avatar { width:34px; height:34px; border-radius:50%; background:var(--gradient); color:#0A0518; display:grid; place-items:center; font-weight:800; font-size:13px; } ::-webkit-scrollbar { width:10px; height:10px; } ::-webkit-scrollbar-thumb { background:#D8D8EC; border-radius:8px; border:2px solid var(--bg); }