/* PIE V8 — Login premium theme. Scoped entirely under `.lx` so register/onboarding are unaffected. Warm deep graphite + matte champagne gold (wealth) over a cool engine graph (intelligence). */ /* Brand metal — the single themeable identity colour (logo, loader rings, hero accents). Later a theme picker just overrides these three on . Default: Gold. */ :root{ --brand-metal:#c8a869; --brand-metal-ink:#e6d3a0; --brand-metal-lo:#8f7238; } .lx{ --text:#f1eee8; --muted:#a49d92; --dim:#6b6459; --line:rgba(255,255,255,0.075); --line-2:rgba(255,255,255,0.13); --gold:#c8a869; --gold-ink:#e6d3a0; --gold-soft:rgba(200,168,105,.16); background:#0b0a0d; } /* Kill the stock blue aurora + orbs for the login page only */ .lx::before{display:none!important} .lx .auth-orb{display:none!important} /* Living background */ .lx-graph{position:fixed;inset:0;z-index:0;opacity:.95;pointer-events:none} .lx-watermark{position:fixed;z-index:0;top:50%;left:30%;width:118vh;height:118vh;transform:translate(-50%,-50%);pointer-events:none;opacity:.08} .lx-watermark svg{width:100%;height:100%;display:block} .lx-drift{position:fixed;inset:0;z-index:0;pointer-events:none; background:radial-gradient(ellipse 55% 48% at 22% 20%,rgba(203,171,108,.15),transparent 60%), radial-gradient(ellipse 50% 45% at 82% 85%,rgba(123,163,221,.11),transparent 62%)} /* ── LEFT hero (reuses .auth-hero container, restyled) ── */ .lx .auth-hero{background:none;border-right:1px solid rgba(255,255,255,0.05);z-index:2;overflow:hidden; padding:clamp(26px,4vh,58px) clamp(44px,4.6vw,90px);display:flex;align-items:center} .lx .auth-hero::before,.lx .auth-hero::after{display:none!important} .lx-hero{display:flex;flex-direction:column;justify-content:center;gap:clamp(15px,2.3vh,26px);max-width:560px;margin-left:clamp(4px,1.5vw,30px)} .lx-reveal{opacity:0;animation:lxRise 1.1s cubic-bezier(.22,.68,.2,1) forwards} .lx-d1{animation-delay:.05s}.lx-d2{animation-delay:.24s}.lx-d3{animation-delay:.42s}.lx-d4{animation-delay:.6s}.lx-d5{animation-delay:.8s}.lx-d6{animation-delay:.96s} @keyframes lxRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} /* Brand — your G logo (gold) in an animated tile + full form */ .lx-brand{display:flex;align-items:center;gap:17px} .lx-mono{width:62px;height:62px;border-radius:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden; background:linear-gradient(180deg,#1a1922,#121118);border:1px solid var(--line-2); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 12px 30px rgba(0,0,0,.55)} .lx-mono svg{width:44px;height:44px;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))} /* Metallic glint — a light band sweeps across the badge every few seconds (then rests). */ .lx-mono::after{content:'';position:absolute;top:-50%;left:0;width:46%;height:200%;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,249,224,.55),transparent); transform:translateX(-170%) rotate(18deg);animation:lxShine 6.6s ease-in-out infinite} @keyframes lxShine{0%{transform:translateX(-170%) rotate(18deg)}16%,100%{transform:translateX(330%) rotate(18deg)}} .lx-name{font-size:24px;font-weight:700;letter-spacing:.4px;line-height:1;color:var(--text)} .lx-full{font-size:11px;font-weight:500;color:var(--gold-ink);margin-top:8px;letter-spacing:.16em;text-transform:uppercase} .lx-full b{color:inherit;font-weight:inherit} .lx-eyebrow{font-size:11px;font-weight:600;letter-spacing:2.1px;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:11px} .lx-eyebrow::before{content:'';width:26px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)} /* Rotating one-line brand promise under the eyebrow (subtle, fixed height = no layout shift) */ .lx-rotator{margin-top:-6px;min-height:16px;font-size:12.5px;letter-spacing:.3px;color:var(--muted)} .lx-rotator-line{display:inline-block;transition:opacity .5s ease,transform .5s ease} .lx-rotator-line.out{opacity:0;transform:translateY(4px)} .lx-headline{font-size:clamp(29px,2.9vw,42px);font-weight:600;line-height:1.11;letter-spacing:-1px;max-width:17ch;color:var(--text)} .lx-headline em{font-style:normal;color:var(--gold-ink)} .lx-sub{font-size:15px;line-height:1.7;color:var(--muted);max-width:44ch} .lx-sub b{color:var(--text);font-weight:500} .lx-rec{max-width:448px} .lx-rec-eyebrow{display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:var(--dim);margin-bottom:12px} .lx-rec-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:lxPulse 2.6s infinite} @keyframes lxPulse{0%{box-shadow:0 0 0 0 rgba(200,168,105,.5)}70%{box-shadow:0 0 0 7px rgba(200,168,105,0)}100%{box-shadow:0 0 0 0 rgba(200,168,105,0)}} .lx-rec-card{position:relative;padding:22px 24px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022));border:1px solid var(--line);box-shadow:0 18px 48px rgba(0,0,0,.42);min-height:104px;overflow:hidden} .lx-rec-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,transparent,var(--gold),transparent);background-size:100% 200%;animation:lxSheen 4.3s ease-in-out infinite} @keyframes lxSheen{0%,100%{background-position:0 -100%}50%{background-position:0 100%}} .lx-swap{transition:opacity .55s ease,transform .55s ease} .lx-swap.out{opacity:0;transform:translateY(5px)} .lx-rec-head{display:flex;align-items:center;gap:11px;margin-bottom:8px} .lx-chip{font-size:10.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--gold-ink);padding:3px 9px;border:1px solid rgba(200,168,105,.32);border-radius:6px} .lx-rec-title{font-size:17.5px;font-weight:600;letter-spacing:-.3px;color:var(--text)} .lx-rec-why{font-size:13.5px;line-height:1.55;color:var(--muted)} .lx-rec-why b{color:var(--text);font-weight:500} .lx-feats{display:flex;gap:26px 46px;flex-wrap:wrap} .lx-feat{display:flex;align-items:center;gap:11px} .lx-feat svg{width:19px;height:19px;color:var(--gold);opacity:.92;flex-shrink:0} .lx-feat-t{font-size:13px;font-weight:500;color:var(--text)} .lx-feat-t small{display:block;font-size:11.5px;font-weight:400;color:var(--dim);margin-top:1px} .lx-trust{display:flex;flex-direction:column;gap:6px} .lx-trust-1{font-size:12.5px;color:var(--muted);letter-spacing:.2px} .lx-trust-2{font-size:11px;color:var(--dim);letter-spacing:.4px;display:flex;align-items:center;gap:16px;flex-wrap:wrap} .lx-trust-2 span{display:inline-flex;align-items:center;gap:6px} .lx-trust-2 i{width:3px;height:3px;border-radius:50%;background:var(--gold);opacity:.75} /* ── RIGHT: re-theme the existing form to gold + a soft glass frame ── */ .lx .auth-pane{z-index:2} .lx .auth-root--split .auth-card{max-width:398px;padding:42px 38px;border-radius:22px; background:rgba(19,18,24,.82);border:1px solid var(--line);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px); box-shadow:0 30px 84px rgba(0,0,0,.6)} .lx .auth-brand{display:none} /* hero already carries the brand */ .lx .auth-title{font-weight:600} .lx .auth-input:focus{border-color:rgba(200,168,105,.5);background:rgba(255,255,255,.055);box-shadow:0 0 0 3px rgba(200,168,105,.12)} .lx .auth-btn-primary{color:#191308;background:linear-gradient(180deg,var(--gold-ink),var(--gold)); border:1px solid rgba(200,168,105,.5);box-shadow:0 10px 28px rgba(200,168,105,.24)} .lx .auth-btn-primary:hover:not(:disabled){filter:brightness(1.06);background:linear-gradient(180deg,var(--gold-ink),var(--gold));box-shadow:0 14px 36px rgba(200,168,105,.36)} .lx .auth-forgot a,.lx .auth-footer a,.lx .auth-secondary a{color:var(--gold-ink)} .lx .auth-input:focus + .auth-input-toggle,.lx .auth-input-icon{color:var(--dim)} /* Post-login "Signing you in" overlay — gold rings to match the brand (logo asset is already gold) */ #authLoadingOverlay .auth-loading-logo::before{border-top-color:#c8a869;border-right-color:#c8a869} #authLoadingOverlay .auth-loading-logo::after{border-bottom-color:#e6d3a0} @media (max-width:980px){.lx .auth-hero{display:none}} @media (prefers-reduced-motion:reduce){ .lx-graph,.lx-watermark,.lx-drift,.lx-mono::after,.lx-rec-card::before,.lx-rec-dot{animation:none!important} .lx-reveal{animation:none!important;opacity:1!important;transform:none!important} }