/* CRE-Hub — the house design language, light by default. * * WHY THIS FILE IS A LIGHT THEME AND THE INTERNAL HUB IS NOT. Guillaume built * the floor-report app light for exactly this reason: dark does not read as * enterprise software in front of a colleague. The plan (§2, 2026-08-18 second * round) rules the same for this site — same design language as the internal * hub, light palette, login portal in front. * * HOW THE TWO THEMES ARE EXPRESSED. The palette lives entirely in tokens on * :root, and :root[data-theme="dark"] redefines the same names — so no rule * below this block ever knows which theme it is in. The inversion against * floor-report is deliberate: there dark was the default and light the opt-in; * here light is the default and dark is the opt-in, because the audience is * the colleague, not him. * * TOKEN NAMES ARE THE INTERNAL HUB'S, unchanged (--bg --panel --panel2 --line * --fg --dim --dimmer --acc --ok --fail --warn --int, plus the --t-* tone * list). That is what "the same furniture" means in practice: a component * lifted from tracker2 lands here and paints itself correctly. * * ⚠ THE ONE THING THAT COULD NOT BE COPIED. tracker2's notices hardcode rgba * literals of their hue instead of reading the tokens, which is invisible in a * one-theme app and wrong the moment there are two. They are rewritten onto * tokens here; the same defect is worth fixing upstream when tracker2 next * moves. */ :root{ /* ── surfaces ─────────────────────────────────────────────────────────── */ --bg:#f4f5f7; --panel:#ffffff; --panel2:#eef0f4; --sunken:#f7f8fa; /* inputs, code, anything recessed */ --line:#dce0e7; --hover:#00000006; --shadow:0 6px 22px rgb(16 22 34 / .13); /* ── ink ──────────────────────────────────────────────────────────────── */ --fg:#1c2129; --dim:#666f7d; --dimmer:#8b94a1; --strong:#0f141b; /* headings — the near-black counterpart of the internal hub's off-token near-whites */ /* ── meaning ──────────────────────────────────────────────────────────── */ --acc:#0b5fa5; /* links + app identity. The hub's pale #a5d6ff is unreadable on white; this is the same blue, dark enough to be link text. */ --on-acc:#ffffff; --ok:#1a7f37; --fail:#cf222e; --warn:#b4600f; --int:#6f42c1; /* admin-only / not public — a TIER, not a status */ --appbar-accent:var(--acc); /* ── ink ON the app bar ─────────────────────────────────────────────────── The bar is painted in the accent, so everything sitting on it needs an ink that contrasts with the ACCENT rather than with the page. These four are that ink at four strengths, and they are the reason the bar survives the theme flip untouched: in light the band is dark blue and its ink is white, in dark the band is pale blue and its ink is near-black. Nothing in the bar names a literal colour. */ --acc-ink:#ffffff; --acc-ink-70:rgb(255 255 255 / .78); /* a tab that is not the open one */ --acc-ink-35:rgb(255 255 255 / .34); --acc-ink-15:rgb(255 255 255 / .15); /* hover wash, and the count chip */ /* ── the one tone list ──────────────────────────────────────────────────── Every coloured mark on every page is painted from THIS list and nothing else. Each tone is an `R G B` triple plus the one foreground readable on a wash of it; the triple is spaced, not comma'd, so `rgb(var(--t-x) / .16)` works for both the fill and the border. The triples are the internal hub's, unchanged — the hue is the identity. What flips for a light ground is every `-fg`: on dark it is a light TINT of the hue, here it is a dark SHADE of the same hue. The wash alpha is a notch higher (.16 against .14) because a tint reads weaker on white. */ --t-red:248 81 73; --t-red-fg:#a4231c; --t-rose:196 92 88; --t-rose-fg:#9c3733; --t-orange:240 136 62; --t-orange-fg:#9c5210; --t-amber:227 160 8; --t-amber-fg:#7d5806; --t-yellow:224 190 68; --t-yellow-fg:#6f5c0a; --t-green:63 185 80; --t-green-fg:#1a7f37; --t-teal:25 158 112; --t-teal-fg:#0f6b4c; --t-cyan:57 181 229; --t-cyan-fg:#0b6a8c; --t-blue:86 138 220; --t-blue-fg:#1b4f9e; --t-slate:104 122 148; --t-slate-fg:#46536a; --t-violet:144 133 233; --t-violet-fg:#4f45a8; --t-pink:192 90 158; --t-pink-fg:#8e3670; --font:-apple-system,Segoe UI,Roboto,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --appbar-h:46px; color-scheme:light; } :root[data-theme="dark"]{ --bg:#0f1013; --panel:#16181c; --panel2:#1b1e23; --sunken:#0b0c0e; --line:#2a2d33; --hover:#ffffff08; --shadow:0 6px 22px rgb(0 0 0 / .45); --fg:#dfe2e6; --dim:#8b9199; --dimmer:#5c6169; --strong:#eceff2; --acc:#a5d6ff; --on-acc:#0f1013; --ok:#3fb950; --fail:#f85149; --warn:#e3a008; --int:#b083f0; --t-red-fg:#f3a49e; --t-rose-fg:#df9f9f; --t-orange-fg:#eda870; --t-amber-fg:#e3bb59; --t-yellow-fg:#dcc46b; --t-green-fg:#6ecb7e; --t-teal-fg:#5fd3a5; --t-cyan-fg:#7fd4f5; --t-blue-fg:#9cbcf2; --t-slate-fg:#9dabbe; --t-violet-fg:#c4bdf5; --t-pink-fg:#e19fd0; --acc-ink:#0f1013; --acc-ink-70:rgb(15 16 19 / .74); --acc-ink-35:rgb(15 16 19 / .30); --acc-ink-15:rgb(15 16 19 / .11); color-scheme:dark; } /* ── frame ────────────────────────────────────────────────────────────────── */ *{box-sizing:border-box} /* The scrollbar's width is reserved on every page, short or long. Without it a page that scrolls is ~15px narrower than one that does not, so the app bar's right-hand block — and the centred column under it — SHIFT as you move between pages. Reported 2026-08-18: "the top menu moves slightly when clicking on a different page". It is the viewport changing width, not the bar. */ html{scrollbar-gutter:stable} body{margin:0;background:var(--bg);color:var(--fg); font:13.5px/1.5 var(--font);-webkit-font-smoothing:antialiased} a{color:var(--acc);text-decoration:none} a:hover{text-decoration:underline} /* The icon sprite in base.html. Its size and its removal from the flow live HERE and not on the element, because `style-src 'self'` refuses a `style=` attribute — an inline rule would be blocked, the sprite would sit in the page's flow, and every page would log a violation. */ svg.sprite{position:absolute;width:0;height:0;overflow:hidden} /* ── the app bar ──────────────────────────────────────────────────────────── * ONE ROW, not two. The brand, every page this account may open, and who you * are signed in as, all on a single 46px band painted in the accent. Chosen * 2026-08-18 from a set of fifteen drawn variants; the two rows it replaces * were the same white as the page under them, so nothing on the bar read as * clickable and the open page was marked only by a hairline. * * Three things carry the work: * - the band is `--appbar-accent`, so the chrome is a coloured object and the * page below it is plainly a different thing; * - the open page is a filled lozenge in `--acc-ink`, the one solid shape on * the bar; * - every page carries a mark, and a page whose state is a NUMBER carries * that number (see `nav_counts` in apps.py — empty today, by design). * * ⚠ IT IS A SINGLE ROW AND IT DOES NOT WRAP, and it will not TELL you when it * stops fitting. A flex row that runs out of space does not overflow visibly, * it SQUEEZES — the tabs give up their padding and the account name slides off * the right edge — so a bar that no longer fits looks merely cramped rather * than broken, and `scrollWidth` reports that it fits at every width. Measure * it off a `max-content` clone, which cannot shrink, or the check is one that * can never fail. * * ✅ Re-measured that way 2026-08-19 at Guillaume's real viewport (1246, of * which 1231 is content once the scrollbar is out), admin — the widest account, * five app tabs plus the audit link: **needs 960px, so 286px spare.** It was * 919 the day before, with seven tabs. Losing the Home tab gave back less than * moving Audit into `.meta` cost: in `