/* Quantic Alpha brand overlay for the Authelia login portal.
*
* Authelia's `asset_path` only honors logo.png + favicon.ico — any other file
* dropped there (this one included) gets eaten by the React SPA fallback and
* returns index.html. So we don't ship this through Authelia. Instead:
*
* * Caddy mounts the assets dir read-only and serves the file at
* /quantic-brand.css (see infra/caddy/Caddyfile).
* * The Caddy `replace-response` module injects a
* tag into Authelia's on the way out. CSP allows self-origin
* stylesheets, so no nonce wrangling is needed.
*
* Same trick covers the title-pinning script at /quantic-title-fix.js, and a
* static Login - QTS → "Login - QTS" rewrite at the edge.
*
* What this file overrides:
* 1. Default user-silhouette avatar → brand swirl (the data-logooverride
* flag flips automatically when /config/assets/logo.png exists; Authelia
* serves the file at /static/media/logo.png).
* 2. "Sign in" portal title → hidden, replaced by two brand lines.
* 3. Submit button + link colors → brand yellow with dark text.
*
* Class names verified via Playwright DOM dump (2026-05-12). The hashed
* `authelia-*` / `jssN` classes are emotion-generated and can drift between
* Authelia builds; we target stable structural selectors (alt attr, tag +
* MUI variant, ids) instead.
*
* Keep the brand color values in sync with client/src/brand/palette.json.
*/
:root {
--brand-200: #fce9a7;
--brand-300: #fce38a;
--brand-400: #fbd758;
--surface-100: #e0e0e0;
--surface-200: #c2c2c2;
--surface-900: #1f1f1f;
}
/* Logo sizing: . */
#root img[alt="Logo"] {
width: 144px;
height: 144px;
object-fit: contain;
}
/* "Sign in" title is
. Blank its text by
* zeroing the font, then inject the brand title + subtitle via pseudos.
* Both lines share the surface-100 light grey for a uniform read. */
#root h5.MuiTypography-h5 {
font-size: 0 !important;
line-height: 0 !important;
margin-bottom: 24px !important;
}
#root h5.MuiTypography-h5::before {
content: "Quantic Alpha";
display: block;
font-size: 2.25rem;
font-weight: 700;
line-height: 1.2;
color: var(--surface-100);
letter-spacing: 0.02em;
}
#root h5.MuiTypography-h5::after {
content: "Trading System";
display: block;
margin-top: 6px;
font-size: 1.425rem;
font-weight: 500;
line-height: 1.4;
color: var(--surface-100);
letter-spacing: 0.04em;
}
/* Primary submit button — yellow with dark text. Targeting by id since the
* MUI hashed class can drift. */
#sign-in-button,
.MuiButton-containedPrimary {
background-color: var(--brand-300) !important;
color: var(--surface-900) !important;
}
#sign-in-button:hover,
.MuiButton-containedPrimary:hover {
background-color: var(--brand-200) !important;
}
/* Links — "Reset password?" button and any MUI link. Scope to id +
* non-footer .MuiLink-root so we don't recolor the copyright override
* we inject below (which sits inside the original footer container). */
#reset-password-button,
.MuiLink-root:not(.qts-copyright) {
color: var(--brand-400) !important;
}
/* Hide the original "Powered by Authelia" link. JS below replaces the
* footer container's content with our copyright line, but Authelia's
* React render passes briefly show the original — keep it invisible so
* the swap is instant. Targeting by the authelia.com href is stable
* across MUI hash drift. */
#root a[href*="authelia.com"] {
display: none !important;
}
/* Quantic Alpha copyright line, injected by brand-overlay.js into the
* footer container (Authelia's original wrapper around "Powered by").
* `white-space: nowrap` is the defensive backstop — title-fix.js also
* widens the parent container inline, but if a future Authelia rev
* changes the layout the nowrap keeps us on one line until we adjust. */
.qts-copyright {
display: block;
font-size: 0.75rem;
color: var(--surface-200);
text-align: center;
letter-spacing: 0.02em;
white-space: nowrap;
}
. */
#root img[alt="Logo"] {
width: 144px;
height: 144px;
object-fit: contain;
}
/* "Sign in" title is