/* ───────────────────────────────────────────────────────────────────────── Shared light/dark theme layer for the signed-out auth pages (login, register, forgot-password, reset-password). The pages ship the dark :root palette as their default. Setting data-theme="light" on (done by a tiny inline no-flash script in each page's , from localStorage 'mm-theme' or the OS prefers-color-scheme) swaps in this light palette plus a handful of hardcoded-colour overrides. Every override is scoped [data-theme="light"] .x, so its specificity beats the pages' base rules and stylesheet load order does not matter. ───────────────────────────────────────────────────────────────────────── */ :root[data-theme="light"] { --bg: #ffffff; --panel-right: #ffffff; --card: #ffffff; --card-2: #f7faff; --card-border: rgba(28,52,112,.12); --card-border-strong: rgba(28,52,112,.20); --input-bg: #ffffff; --text: #0f1b34; --text-dim: #3a4763; --text-mut: #566380; --accent: #2f6bff; --accent-2: #2f6bff; --accent-soft: rgba(47,107,255,.10); --buy: #12b76a; --sell: #e5484d; --grad-blue: linear-gradient(135deg, #3b74ff 0%, #2258e6 100%); --grad-head: linear-gradient(92deg, #2f6bff 0%, #5a8bff 100%); --ring: 0 0 0 4px rgba(47,107,255,.15); --lc-accent: #2f6bff; --lc-accent-hover: #2258e6; } /* "Back to home / login" link: bold + high-contrast (near-black in light, near-white in dark) instead of the faint muted grey. */ [data-theme] .back-arrow { color: var(--text); font-weight: 700; } [data-theme] .back-arrow:hover { color: var(--accent); } /* Hero: light gradient backdrop (keeps the existing subtle grid glow) */ [data-theme="light"] .hero { background: radial-gradient(1000px 560px at 85% 12%, rgba(47,107,255,.10) 0%, rgba(47,107,255,0) 60%), linear-gradient(158deg, #eef3fe 0%, #e2ebfb 100%); } [data-theme="light"] .hero::after { background: radial-gradient(60% 90% at 50% 100%, rgba(47,107,255,.10) 0%, rgba(47,107,255,0) 70%), repeating-linear-gradient(90deg, rgba(47,107,255,.05) 0 2px, transparent 2px 26px), repeating-linear-gradient(0deg, rgba(47,107,255,.045) 0 2px, transparent 2px 26px); } /* White wordmark logo -> black so it reads on the light hero */ [data-theme="light"] .brand-row .logo { filter: brightness(0); } [data-theme="light"] .feature .ico { border-color: rgba(47,107,255,.22); } /* Form panel + cards */ [data-theme="light"] .panel { background: #ffffff; border-left: 1px solid var(--card-border); } [data-theme="light"] .card { box-shadow: 0 14px 36px rgba(28,52,112,.10); } [data-theme="light"] .trust-strip { background: #ffffff; box-shadow: 0 6px 20px rgba(28,52,112,.06); } [data-theme="light"] .tabs { background: transparent; border-bottom-color: rgba(28,52,112,.14); } [data-theme="light"] .tab { color: #5b6472; } [data-theme="light"] .tab:hover:not(.active) { background: transparent; color: #000; } [data-theme="light"] .tab.active { color: #000; } [data-theme="light"] .tab.active::after { background: var(--accent); } [data-theme="light"] .btn-social:hover { background: #f4f7fe; } [data-theme="light"] .toast { background: #ffffff; box-shadow: 0 16px 40px rgba(28,52,112,.18); } /* Trust icons -> blue accent (bright theme) */ [data-theme="light"] .trust-strip .ico, [data-theme="light"] .trust-row .ico { background: hsl(155 80% 43% / .10); border-color: hsl(155 80% 43% / .28); color: hsl(155 80% 38%); } /* Mobile: one uniform white surface (mirrors the dark theme's unified mobile bg) */ @media (max-width: 880px) { [data-theme="light"] .hero { background: #ffffff; } } /* ─────────── Theme toggle (injected by auth-theme.js) ─────────── */ .theme-toggle { position: fixed; top: 16px; right: 16px; z-index: 60; width: 40px; height: 40px; border-radius: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--card-border); color: var(--text-dim); box-shadow: 0 6px 18px rgba(0,0,0,.22); transition: color .18s, border-color .18s, background .18s, transform .15s; } .theme-toggle:hover { color: var(--text); border-color: var(--card-border-strong); transform: translateY(-1px); } .theme-toggle svg { display: block; } .theme-toggle .icon-moon { display: none; } [data-theme="light"] .theme-toggle { box-shadow: 0 6px 18px rgba(28,52,112,.12); } [data-theme="light"] .theme-toggle .icon-sun { display: none; } [data-theme="light"] .theme-toggle .icon-moon { display: block; } /* ═════════ HOME-PAGE MOVING VIDEO BACKGROUND (hero) ═════════ Mirrors marketsmill.io: a looping hero-trading-desk.mp4 under a themed wash + vignette. Applies in both themes; hidden on the form-first mobile layout. */ /* .hero > .hero-media (not just .hero-media) so it beats the base `.hero > *` rule that would otherwise force position:relative and collapse it to 0 height. */ .hero > .hero-media { position: absolute; inset: 0; overflow: hidden; z-index: 0; } .hero-media .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.03) translateZ(0); filter: blur(.3px); } /* Exactly the home page's layers: overlay + radial vignette + bottom fade to bg */ .hero-media .hero-media-tint { /* dark theme */ position: absolute; inset: 0; background: linear-gradient(to top, var(--bg) 0%, transparent 24%), radial-gradient(ellipse at center, transparent 30%, hsl(210 40% 4% / .6) 100%), hsl(210 40% 4% / .78); } /* On DESKTOP the hero keeps the dark video treatment in BOTH themes (like the home page) so the moving background is always visible; only the right-hand form panel switches light/dark. On mobile the hero is form-first (video hidden). */ @media (min-width: 881px) { [data-theme="light"] .hero { --bg: #05070f; --text: #eef1f8; --text-dim: #9aa4bc; --text-mut: #626c85; --accent: #3b5bfd; --accent-2: #5b83ff; --accent-soft: rgba(59,91,253,.16); --buy: #2ebd85; --card-border: rgba(255,255,255,.08); color: #eef1f8; /* force inherited text light (over the dark video) */ } [data-theme="light"] .hero .brand-row .logo { filter: none; } [data-theme="light"] .hero .trust-strip { background: rgba(255,255,255,.03); box-shadow: none; } [data-theme="light"] .hero .trust-strip .ico { background: rgba(46,189,133,.12); border-color: rgba(46,189,133,.25); color: #2ebd85; } } [data-theme] .hero::after { display: none; } /* video replaces the grid glow */ @media (max-width: 880px) { .hero-media { display: none; } } /* Home-page green growth accent on the hero headline (both themes) */ [data-theme] .hero h1 .accent { background: linear-gradient(92deg, hsl(155 82% 52%) 0%, hsl(160 84% 64%) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Remove the decorative sliding bar at the top of the form panel — it is pure UI (infinite slide animation, no JS/function) and reads as a stuck loader. */ .panel .topbar { display: none; }