/* cuemania — the sign-in page (auth.cuemania.com, Authelia 4.39) in the family's look (owner, 2026-09-27: "the login page needs the new branding"). Injected by the auth host's nginx user.conf (sub_filter, after Authelia's own stylesheet), served from /cm/ on the same host, so Authelia's CSP (style-src 'self') allows it. If this file fails to load, the page is Authelia's own and still works. How it holds: Authelia 4.39 is Tailwind + shadcn-style; its colours are CSS variables on [data-theme=light|dark] (body). Redefining those variables here (same selector, loaded later) recolours every screen — sign in, reset password, second factor, settings — without touching its markup. The few element rules below use stable ids (#sign-in-button, #language-button, #first-factor-stage) and attribute patterns, never generated class hashes. `theme: auto` in configuration.yml makes Authelia pick light or dark from the device, as the family does by default. An Authelia upgrade can rename the variables or ids: open the page after every upgrade (gatehouse/README.md). */ @font-face{font-family:Inter;src:url("/cm/Inter-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap} /* the family tokens: ink #17232C, muted #526371, line #D7E0E6, dark #151D23 — focus in the chalk-tip blue */ [data-theme=light],[data-theme=auto]{ --background:#ffffff;--foreground:#17232c;--card:#ffffff;--card-foreground:#17232c;--popover:#ffffff;--popover-foreground:#17232c; --primary:#17232c;--primary-foreground:#ffffff;--muted:#f3f5f6;--muted-foreground:#526371;--accent:#eef2f4;--accent-foreground:#17232c; --border:#d7e0e6;--input:#b8c5ce;--ring:#3f79b7;--radius:.625rem;--custom-icon:#17232c;--custom-loading-bar:#17232c;--divider:#d7e0e6; --destructive:#b00000;--cm-page:#f4f6f7;--cm-card-shadow:0 12px 32px rgba(21,35,44,.06)} [data-theme=dark]{ --background:#151d23;--foreground:#f4f7f9;--card:#1b252c;--card-foreground:#f4f7f9;--popover:#1b252c;--popover-foreground:#f4f7f9; --primary:#f4f7f9;--primary-foreground:#151d23;--muted:#223039;--muted-foreground:#aebac4;--accent:#223039;--accent-foreground:#f4f7f9; --border:#34424c;--input:#4a5a66;--ring:#8fb6e0;--radius:.625rem;--custom-icon:#f4f7f9;--custom-loading-bar:#f4f7f9;--divider:#34424c; --destructive:#f19a9a;--cm-page:#11181d;--cm-card-shadow:0 12px 32px rgba(0,0,0,.35)} /* before Authelia settles the theme the body says data-theme="auto" (the loading screen): the device decides, as later */ @media (prefers-color-scheme:dark){[data-theme=auto]{ --background:#151d23;--foreground:#f4f7f9;--card:#1b252c;--card-foreground:#f4f7f9;--popover:#1b252c;--popover-foreground:#f4f7f9; --primary:#f4f7f9;--primary-foreground:#151d23;--muted:#223039;--muted-foreground:#aebac4;--accent:#223039;--accent-foreground:#f4f7f9; --border:#34424c;--input:#4a5a66;--ring:#8fb6e0;--radius:.625rem;--custom-icon:#f4f7f9;--custom-loading-bar:#f4f7f9;--divider:#34424c; --destructive:#f19a9a;--cm-page:#11181d;--cm-card-shadow:0 12px 32px rgba(0,0,0,.35)}} body,#root,#root *{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;font-optical-sizing:auto} body{background:var(--cm-page) !important;color:var(--foreground)} header{background:transparent !important} /* the screen's content as the family's card: 20 px, a hairline, a soft shadow */ [class*="max-w-[444px]"]{max-width:440px !important;padding-inline:16px !important} [class*="max-w-[444px]"] > div{background:var(--card);border:1px solid var(--border);border-radius:20px;box-shadow:var(--cm-card-shadow); padding:28px 28px 20px} /* the wordmark (v3, lowercase, the i as a cue) at the top; the white file on the dark ground */ img[alt="Logo"]{width:200px !important;max-width:70%;height:auto !important;margin:4px auto 20px !important} /* Both themes draw the wordmark from a VERSIONED address (2026-09-27, owner: "still seeing the old brand icon"): Authelia's own logo lives at a fixed /static/media/logo.png, and a browser that saved the old C icon there kept showing it. Bump ?v= on change. */ img[alt="Logo"]{content:url("/cm/wordmark-black.png?v=4")} [data-theme=dark] img[alt="Logo"]{content:url("/cm/wordmark-white.png?v=4")} h5{font-weight:700 !important;letter-spacing:-.02em;font-size:1.5rem !important} /* controls: 10 px, 44 px targets, sentence case */ input[class*="border-input"]{border-radius:10px !important;border-color:var(--input) !important;background:var(--background) !important} input[class*="border-input"]:focus{border-color:var(--ring) !important} button[class*="bg-primary"],#sign-in-button{min-height:44px !important;height:auto !important;border-radius:10px !important; text-transform:none !important;font-weight:600 !important;font-size:1rem !important;letter-spacing:0} button[class*="bg-primary"]:hover{filter:brightness(1.12)} [data-theme=dark] button[class*="bg-primary"]:hover{filter:brightness(.9)} /* a cancel beside the main action is the quiet one (Authelia draws both filled) */ [id^="cancel"][class*="bg-primary"]{background:transparent !important;color:var(--foreground) !important;border:1px solid var(--input) !important;filter:none !important} [id^="cancel"][class*="bg-primary"]:hover{background:var(--accent) !important} #language-button{min-height:44px;min-width:44px;border:1px solid var(--border) !important;border-radius:10px !important;margin-right:4px} #remember-checkbox{width:20px !important;height:20px !important;min-height:0 !important;flex:none;border-radius:5px !important;border-color:var(--input) !important} label{color:var(--muted-foreground)} a,#reset-password-button,[class*="underline-offset"]{color:var(--foreground) !important} [class*="text-primary"][class*="underline-offset"]{text-decoration:underline;text-underline-offset:3px;min-height:44px} /* the family focus: 3 px in the tip blue, offset 3 */ :focus-visible{outline:3px solid var(--ring) !important;outline-offset:3px !important} input:focus-visible{outline-offset:1px !important} /* "Powered by Authelia" under the form: hidden (owner, 2026-09-29). Authelia is Apache-2.0, which allows it; the licence and the credit are kept in gatehouse/README.md ("The sign-in page's look"). */ div:has(> a[href*="authelia.com"]),a[href*="authelia.com"]{display:none !important} /* the family route home (CLAUDE.md §5b), injected by nginx as