/* ========================================================================== UtilityBox v2 — customer UI Dark premium. Committed single theme: the dark ground is the identity. Motif: the prepaid meter LCD. Amber = live current, teal = credit. Self-contained. No Bootstrap, Metronic, Framework7 or jQuery Mobile. All colour lives in the :root tokens below, so swapping the brand palette is a single-block edit — nothing downstream hardcodes a hex value. Created 2026-07-31 branch feature/v2-customer-ui Last changed 2026-07-31 Change history: uBoxWebStatic2/Pages/v2/CHANGELOG.md ========================================================================== */ /* Palette taken from the UtilityBox brand mark (2026-07-31). The logo is a purple-to-blue gradient U with an orange and red dot cluster, over a deep purple-black. So: brand purple -> blue, used for the mark, focus and emphasis accent orange, used for actions — it is the warmest thing in the mark and the only colour that should read as "press this" readout sky blue, for the token display; it sits inside the brand range rather than fighting it The ground carries a violet bias rather than a blue one so the mark sits on a surface from its own family. Everything downstream reads these tokens; nothing hardcodes a hex value. */ :root { /* ---- ONE INSET FOR EVERY DISCLOSURE ARROW ---- ⚠ EVERY ▾ ON THIS SITE MEASURES FROM THIS, so they cannot drift apart. The cards that carry them are stacked directly on top of one another, which makes a quarter of a rem of difference plainly visible — and that is exactly what happened: .ub-prof padded its summary 1rem and .ub-ownerbox positioned its arrow at .75rem, so "Your details" and the card below it were misaligned. Fixing that by writing 1rem in both places would have lined them up today and let them drift again the moment either card's padding changed. They now read the same variable, so changing this ONE value moves all of them together and they are aligned BY CONSTRUCTION rather than by two numbers that happen to match. Card padding uses it too, so the arrow always sits on the same margin as the text it belongs to. */ --disc-inset: 1rem; /* ---- ⚠ THE HOUSE RULE FOR EVERY DISCLOSURE ON THIS SITE ---- ARROW ON THE LEFT, BEFORE THE HEADING. ▸ closed, ▾ open. It used to sit on the RIGHT, at the far end of the row. On a card that is the last place the eye reaches, so the control announcing "there is more inside this" was found after the customer had already decided there was not. On the left it is read before the heading it belongs to, which is the order it matters in. ▸ rather than ▾ when closed, because a right-pointing triangle says "this opens" while a down-pointing one reads as decoration until it moves. Rotating one glyph to the other keeps the two states obviously the same control. ⚠ EVERY PULL-DOWN ADDED FROM NOW ON USES .ub-disc. Do not hand-roll another marker: three different ones existed on this page at once and it read as three kinds of control rather than one repeated. */ --disc-mark: .8125rem; /* Ground — violet-black, lifting to a bluer purple on raised surfaces, which is the lighter tone from the mark rather than a grey. --------- */ --ink: #0A0718; --ink-2: #120D28; --surface: #191138; --surface-2: #221847; --line: #2C2158; --line-hi: #3E2F79; /* Brand — the two purples of the mark. This carries the interface. `--amber` is kept as a NAME only so existing rules keep working; it resolves to the brand purple, not to orange. --------------------- */ --brand: #8B5CF6; /* the U and "Box" */ --brand-2: #6366F1; /* mid gradient */ --brand-3: #3B82F6; /* blue end of the U */ --brand-hi: #A78BFA; /* lighter purple, for hover and glow */ --brand-dim: #2C2060; --amber: #8B5CF6; --amber-hi: #A78BFA; --amber-dim: #4C3A8F; /* Token readout — the blue end of the mark's own gradient ------------- */ --lcd: #60A5FA; --lcd-dim: #131E44; --lcd-glow: rgba(96, 165, 250, .35); /* ---- SUCCESS GREEN, NOT THE READOUT BLUE ---- Reported live 2026-08-12: the post-payment "Payment successful" box was blue, not green. .ub-warnbox--good had been built reusing --lcd, because --lcd was already the closest "good news" colour on this page and the readout theme was mid-flight — but --lcd means "this is a token display", not "this succeeded"; the electricity token itself also renders in --lcd, so a payment confirmation in the same blue read as one more piece of read-out data rather than a green light. #22C55E is not a new colour to this codebase: it is the exact green ubox-admin.css already uses for .uadm-pill--ok, .uadm-led--ok and the Commissions net-margin figures. ⚠ THEMED SINCE 2026-08-16, and it used to say here that it must NOT be. The argument was that "successful" should not shift shade with the ground it sits on — but the both-themes audit measured #22C55E as TEXT on a light card at ~2.1:1, which is a success message a customer cannot read. Green stays green in both themes; the light theme block simply carries a darker shade (#15803D), exactly the treatment --danger has always had. The admin keeps the flat #22C55E because the admin is pinned dark, where it reads fine. */ --good: #22C55E; --good-bg: rgba(34, 197, 94, .15); /* Spark — the orange and red of the dot cluster. On the mark these are six small dots and nothing more, so they are used the same way here: tiny status marks and counts only. Never a button, never a heading, never a surface. If it occupies more room than a full stop, it is being used wrongly. */ --spark: #F97316; --spark-2: #EF4444; /* The dot cluster, promoted (2026-08-01). The mark has six warm dots beside the purple U, and the interface used none of them — so every card, button, figure and heading was purple on white and the whole thing read as one colour. These four are the accents. They are drawn from the mark itself (purple U, its blue gradient end, the orange and red of the cluster). They are still never a surface and never a button: they are a 3px rule over a tile, a dot beside a heading, a tint on one strip. Small marks that give the page more than one colour without any of them taking over. */ --dot-1: #8B5CF6; /* purple — the U */ --dot-2: #3B82F6; /* blue — the U's gradient end */ --dot-3: #F97316; /* orange — the cluster */ --dot-4: #EC4899; /* pink — the cluster's warm red, lifted */ /* Text -------------------------------------------------------------- */ --text: #F0EDFA; --text-2: #A99FC7; --text-3: #6F6491; --danger: #FF6B6B; --danger-bg: #2E1420; /* Pending-but-not-failed — the pill orange. Per theme like --danger, since the 2026-08-16 both-themes audit: the raw spark orange (--spark, #F97316) used as pill TEXT was only legible on the dark ground it was written against (~2.8:1 on a white card). Values in the theme blocks alongside --danger's. */ --warn: #FDBA74; --warn-bg: #3B2A14; /* ---- THE ONE DOWN ARROW ---- One data URI, referenced everywhere something opens downward: every