*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #ffffff; --bg2: #f5f7fa; --bg3: #eaecf2; --border: #dde2ee; --border-bright: #c4ccde; /* ── Brand accent ────────────────────────────────────────────────────── --brand-primary is the ONLY colour the runtime overrides: the branding bootstrap in each page's and applyBranding() in app.js set it as an inline style on , which beats this :root declaration on the same element. Every other accent token derives from it here in CSS, so one injected value reaches all 85 var(--teal*) uses plus the literals that used to bypass them. Leaving it unset is the supported default and reproduces the original Curious Code teal exactly — which is why no Python or JS anywhere repeats this hex. #007f67 measures 4.96:1 against white; agents/branding.py clamps every company colour to at least 4.5:1 so a tenant's accent can never carry white text less legibly than this one does. color-mix() replaces the hand-written rgba() literals: it takes the alpha from a variable that is not known until runtime. Mixing with `transparent` in srgb is premultiplied per CSS Color 5, so 6% here is identical to the rgba(0,127,103,0.06) it replaces. */ --brand-primary: #007f67; --brand-primary-hover: #006655; --teal: var(--brand-primary); --teal-dim: color-mix(in srgb, var(--brand-primary) 6%, transparent); --teal-glow: 0 0 0 1px var(--brand-primary), 0 0 24px color-mix(in srgb, var(--brand-primary) 14%, transparent); /* Semantic status green — NOT the brand accent, and deliberately not derived from it. It sits in a traffic light with --amber and --red (the favicon's done/running/error badges read these three straight out of this file), so letting a red- or orange-branded tenant paint "done" in their brand red would make it indistinguishable from "failed". Pinned for every company. */ --ok: #007f67; --amber: #b36b00; --red: #c0392b; --grey: #6b7a99; --text: #1a2332; --text-dim: #6b7a99; --mono: 'Montserrat', sans-serif; --sans: 'Montserrat', sans-serif; } body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; line-height: 1.5; min-height: 100vh; padding: 0 0 80px; } /* ── Header ── */ header { border-bottom: 1px solid var(--border); padding: 20px 40px; display: flex; align-items: center; gap: 16px; } .logo-mark { width: 32px; height: 32px; border: 1.5px solid var(--teal); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 13px; color: var(--teal); letter-spacing: -1px; } /* Company logo. Painted as a background on the existing mark element rather than swapped in as an , so the branding bootstrap in each page's can apply it before first paint — an could only be inserted once app.js parses at end of body, which guarantees the default mark flashes first. Two selectors because the toolbox home has its own brand markup. `contain` plus a hairline of padding letterboxes an arbitrary company asset instead of distorting it; the header's fixed 32px flex box means no layout shift while the image loads. */ html[data-brand-logo] .logo-mark, html[data-brand-logo] .tb-brand-mark { background-image: var(--brand-logo); background-position: left center; background-repeat: no-repeat; background-size: contain; border: none; color: transparent; /* hides the "CC" text without editing eight page headers */ padding: 1px; /* The box keeps its 32px height and widens to the artwork's real aspect ratio. Many companies publish no square icon — Hydro-Quebec's only asset is a 3:1 wordmark — and forcing one into a 32px square renders it 32x10 and illegible. applyBranding() measures the loaded image and sets the ratio; until then 1 keeps the original square, so nothing jumps on a cold load. */ width: calc(32px * var(--brand-logo-aspect, 1)); max-width: 132px; } /* The home page's default mark is an inline