/* ========================================================================== VisualAds auth pages — theme layer (public/theme/front/css/v3-auth.css) -------------------------------------------------------------------------- Loaded after v3.css only when DevTools::getFrontBodyClass() === 'login' (login, signup, forgot). The theme switch lives on , so the --au-* tokens are the ONLY tokens on :root in the v3 stylesheets. Sections 01 Auth tokens — light (:root) 02 Auth tokens — dark, OS preference (:root:not([data-theme="light"])) 03 Auth tokens — dark, explicit choice (:root[data-theme="dark"]) — IDENTICAL to 02 04 Remap: every shared v3 component inside main.v3 follows the theme 05 Scene, frame, layout 06 Header inside the frame 07 Compact footer 08 Theme button (sun / moon) 09 Theme-dependent extras + transitions ========================================================================== */ /* ========================================================================== 01 Auth tokens — light ========================================================================== */ :root { --au-scene: #EFEEE9; /* page behind the frame */ --au-ground: #FFFFFF; /* frame / form column */ --au-ground-2: #F6F5F1; /* secondary surface inside the frame (readonly inputs, neutral chips) */ --au-panel: #1C1B19; /* aside — charcoal in BOTH themes */ --au-panel-2: #23231B; --au-ink: #1C1B19; --au-ink-2: #3A3936; --au-muted: #5F5D57; --au-faint: #6F6D68; /* 5.2:1 on white — placeholders, field icons, captions */ --au-line: #E4E2DB; /* decorative only */ --au-line-strong: #CFCDC4; /* decorative only */ --au-line-input: #8F8D85; /* 3.3:1 on white — input/checkbox/ghost borders */ --au-input: #FFFFFF; --au-input-hover-line: #5F5D57; --au-accent: #FBBC04; --au-accent-ink: #7A4F00; /* gold-as-text on light */ --au-accent-soft: #FFF4CC; --au-btn: #1C1B19; /* primary: ink with OFF-WHITE label in light (= .v3-btn--dark); gold only on the arrow icon */ --au-btn-ink: #F6F5F1; --au-btn-hover: #000000; --au-btn-hover-ink: #F6F5F1; --au-btn-icon: #FBBC04; --au-btn-hover-shadow: 0 8px 24px -12px rgba(28,27,25,.22); --au-sec-line: #8F8D85; /* secondary (ghost) — 3.3:1 */ --au-sec-ink: #1C1B19; --au-grid: rgba(28,27,25,.04); --au-aside-grid: rgba(255,255,255,.04); --au-aside-glow: rgba(251,188,4,.16); --au-focus: #B45309; --au-focus-border: #F59E0B; --au-ok: #1E7A4F; --au-ok-bg: #E9F7EF; --au-danger: #B42318; --au-danger-bg: #FDECEC; --au-shadow: 0 1px 2px rgba(20,18,10,.05), 0 24px 64px -32px rgba(20,18,10,.25); --au-header: #1C1B19; /* header inside the frame is dark in both themes */ --au-footer: #1C1B19; --au-r-frame: 32px; /* = --v3-r-2xl; 16px (= --v3-r-lg) below 576 */ color-scheme: light; } /* ========================================================================== 02 Auth tokens — dark. OWNER DECISION (2026-09-28): the default is ALWAYS light; dark applies only when the visitor switches with the theme button (html[data-theme="dark"]). The OS preference is deliberately ignored, so this block is keyed to the explicit attribute (duplicate of section 03). ========================================================================== */ @media (prefers-color-scheme: dark) { :root[data-theme="dark"] { --au-scene: #0A0B0D; --au-ground: #0D0E10; --au-ground-2: #15171B; --au-panel: #121316; --au-panel-2: #1A1C21; --au-ink: #F1EFE8; --au-ink-2: #D5D3CC; --au-muted: #A9A79F; --au-faint: #8B8981; --au-line: #272A30; --au-line-strong: #353941; --au-line-input: #5F646D; --au-input: #0F1013; --au-input-hover-line: #8A9099; --au-accent: #FBBC04; --au-accent-ink: #FFD45C; --au-accent-soft: rgba(251,188,4,.12); --au-btn: #FBBC04; --au-btn-ink: #1C1B19; --au-btn-hover: #FFC72E; --au-btn-hover-ink: #1C1B19; --au-btn-icon: #1C1B19; --au-btn-hover-shadow: 0 12px 24px -10px rgba(251,188,4,.95); --au-sec-line: rgba(251,188,4,.55); --au-sec-ink: #F1EFE8; --au-grid: rgba(255,255,255,.035); --au-aside-grid: rgba(255,255,255,.03); --au-aside-glow: rgba(251,188,4,.12); --au-focus: #FBBC04; --au-focus-border: #FBBC04; --au-ok: #6FD3A0; --au-ok-bg: rgba(46,158,107,.14); --au-danger: #FF8A8E; --au-danger-bg: rgba(229,72,77,.14); --au-shadow: 0 1px 2px rgba(0,0,0,.4), 0 24px 64px -28px rgba(0,0,0,.8); --au-header: #0D0E10; --au-footer: #0A0B0D; color-scheme: dark; } } /* ========================================================================== 03 Auth tokens — dark (explicit choice) — IDENTICAL to 02; the two must never drift ========================================================================== */ :root[data-theme="dark"] { --au-scene: #0A0B0D; --au-ground: #0D0E10; --au-ground-2: #15171B; --au-panel: #121316; --au-panel-2: #1A1C21; --au-ink: #F1EFE8; --au-ink-2: #D5D3CC; --au-muted: #A9A79F; --au-faint: #8B8981; --au-line: #272A30; --au-line-strong: #353941; --au-line-input: #5F646D; --au-input: #0F1013; --au-input-hover-line: #8A9099; --au-accent: #FBBC04; --au-accent-ink: #FFD45C; --au-accent-soft: rgba(251,188,4,.12); --au-btn: #FBBC04; --au-btn-ink: #1C1B19; --au-btn-hover: #FFC72E; --au-btn-hover-ink: #1C1B19; --au-btn-icon: #1C1B19; --au-btn-hover-shadow: 0 12px 24px -10px rgba(251,188,4,.95); --au-sec-line: rgba(251,188,4,.55); --au-sec-ink: #F1EFE8; --au-grid: rgba(255,255,255,.035); --au-aside-grid: rgba(255,255,255,.03); --au-aside-glow: rgba(251,188,4,.12); --au-focus: #FBBC04; --au-focus-border: #FBBC04; --au-ok: #6FD3A0; --au-ok-bg: rgba(46,158,107,.14); --au-danger: #FF8A8E; --au-danger-bg: rgba(229,72,77,.14); --au-shadow: 0 1px 2px rgba(0,0,0,.4), 0 24px 64px -28px rgba(0,0,0,.8); --au-header: #0D0E10; --au-footer: #0A0B0D; color-scheme: dark; } /* ========================================================================== 04 Remap — makes every shared v3 component inside main.v3 follow the theme. main.v3 pins the semantic --v3-* names to light constants; on auth pages the whole form column lives inside it, so labels, checkbox text, password rules, chips, ledger keys, links and every focus ring are rebound here. Lives after the three token blocks so it wins by source order at equal specificity. ========================================================================== */ body.login .v3 { color-scheme: inherit; /* follows :root (light or dark) */ --v3-bg: var(--au-scene); --v3-surface: var(--au-ground); --v3-surface-2: var(--au-ground-2); --v3-ink: var(--au-ink); --v3-ink-2: var(--au-ink-2); --v3-muted: var(--au-muted); --v3-faint: var(--au-faint); --v3-line: var(--au-line); --v3-line-strong: var(--au-line-strong); --v3-line-input: var(--au-line-input); --v3-gold-ink: var(--au-accent-ink); --v3-gold-soft: var(--au-accent-soft); --v3-ok: var(--au-ok); --v3-ok-soft: var(--au-ok-bg); --v3-danger: var(--au-danger); --v3-danger-soft: var(--au-danger-bg); --v3-focus: var(--au-focus); } /* The aside keeps its own .v3-dark scope (charcoal in both themes) — re-asserted at higher specificity */ body.login .v3 .v3-dark { --v3-surface: var(--v3-d-surface); --v3-surface-2: var(--v3-d-surface-hover); --v3-ink: var(--v3-d-ink); --v3-ink-2: var(--v3-d-text); --v3-muted: var(--v3-d-muted); --v3-faint: var(--v3-d-faint); --v3-line: var(--v3-d-line); --v3-line-strong: var(--v3-d-line-strong); --v3-line-input: var(--v3-d-line-input); --v3-gold-ink: var(--v3-d-gold); --v3-gold-soft: var(--v3-d-gold-soft); --v3-ok: var(--v3-d-ok); --v3-danger: var(--v3-d-danger); --v3-focus: var(--v3-d-focus); color-scheme: dark; } /* ========================================================================== 05 Scene, frame, layout ========================================================================== */ body.login { background: var(--au-scene); color: var(--au-ink); margin: 0; padding: 24px 16px 32px; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; } /* the 48px ledger grid behind the frame — one grid pitch site-wide */ body.login::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--au-grid) 1px, transparent 1px), linear-gradient(90deg, var(--au-grid) 1px, transparent 1px); background-size: 48px 48px; } body.login .auth_frame { max-width: 1200px; margin: 0 auto; background: var(--au-ground); border: 1px solid var(--au-line); border-radius: var(--au-r-frame); box-shadow: var(--au-shadow); overflow: hidden; position: relative; } body.login main.v3 { background: var(--au-ground); } @media (max-width: 575.98px) { :root { --au-r-frame: 16px; } body.login { padding: 12px 12px 24px; } } /* ========================================================================== 06 Header inside the frame — relative (the frame clips), 72px, no sticky jump ========================================================================== */ body.login .v3-header.h_site, body.login .v3-header.h_site.sticky_top { position: relative; top: auto; z-index: 2; height: auto; background: var(--au-header); box-shadow: none; border-bottom: 1px solid rgba(255,255,255,.08); -webkit-backdrop-filter: none; backdrop-filter: none; } body.login .v3-header .v3-nav, body.login .v3-header.sticky_top .v3-nav { height: 72px; } body.login .v3-header .v3-nav__logo img, body.login .v3-header.sticky_top .v3-nav__logo img { width: 150px; } @media (max-width: 991.98px) { body.login .v3-header .v3-nav, body.login .v3-header.sticky_top .v3-nav { height: 64px; } body.login .v3-header .v3-nav__logo img, body.login .v3-header.sticky_top .v3-nav__logo img { width: 128px; } } /* ========================================================================== 07 Compact footer — kills the dead space under the form (HF-02) ========================================================================== */ body.login .v3-footer.f_site { margin: 0; border-radius: 0; border-top: 1px solid var(--au-line); background: var(--au-footer); } body.login .v3-footer.f_site::after { display: none; } body.login .v3-foot-grid, body.login .v3-foot-certs { display: none; } body.login .v3-foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px 24px; padding: 20px 0; border-top: 0; } body.login .v3-foot-marks { margin-left: auto; } @media (max-width: 575.98px) { body.login .v3-foot-marks { margin-left: 0; width: 100%; } } /* ========================================================================== 08 Theme button — sun by default, moon when the resolved theme is dark ========================================================================== */ .theme_btn .moon { display: none; } .theme_btn .sun { display: block; } :root[data-theme="light"] .theme_btn .sun { display: block; } :root[data-theme="light"] .theme_btn .moon { display: none; } /* (no OS-preference rule here: light is the default until the visitor switches) */ :root[data-theme="dark"] .theme_btn .sun { display: none; } :root[data-theme="dark"] .theme_btn .moon { display: block; } /* ========================================================================== 09 Theme-dependent extras + transitions ========================================================================== */ /* dark theme: the auth button is gold, so its hover carries the gold glow (token-driven) */ body.login .v3-btn--auth:hover { box-shadow: var(--au-btn-hover-shadow); } /* eye / rules / hints already follow the remap; the offcanvas and header stay dark in both themes */ /* 200ms colour transitions — no flash on first paint because the pre-paint script sets data-theme before CSS */ body.login, body.login .auth_frame, body.login .v3-auth .left, body.login .v3-input, body.login .v3-alert, body.login .v3-footer.f_site { transition: background-color 200ms, color 200ms, border-color 200ms; }