/* wegroup — shared login surface. * * ONE canonical copy, linked by every staff app at /login-assets/login.css. Editing this file * restyles all of them; that is the entire point. Do NOT fork it into an app's own template — * three divergent login pages is the problem this replaced (2026-07-31). * * Markup contract — an app's template supplies only semantics, never styles: * * * *

…

live region: channel used, errors *

admin

* * * Colour comes from the official logo (#f15022). Social Studio's pink #e23a5f was dropped: an * orange wordmark above a pink button clashed. */ @import url('fonts.css'); :root{ color-scheme:light; --wg-brand:#f15022; --wg-brand-2:#f0912c; --wg-ink:#17181c; --wg-ink-2:#4b4d55; --wg-ink-3:#898c96; --wg-page:#f4f5f7; --wg-panel:#ffffff; --wg-line:rgba(18,20,28,.10); --wg-line-2:rgba(18,20,28,.17); --wg-ok:#2c7a4b; --wg-err:#c0342f; --wg-shadow:0 30px 80px rgba(18,20,28,.13); } /* The OS preference is the default; the toggle stamps data-theme and must beat it both ways. */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; --wg-ink:#ffffff; --wg-ink-2:#c3c2b7; --wg-ink-3:#898781; --wg-page:#0d0d0d; --wg-panel:#161615; --wg-line:rgba(255,255,255,.09); --wg-line-2:rgba(255,255,255,.16); --wg-ok:#6fbf86; --wg-err:#e66767; --wg-shadow:0 30px 80px rgba(0,0,0,.55); } } :root[data-theme="dark"]{ color-scheme:dark; --wg-ink:#ffffff; --wg-ink-2:#c3c2b7; --wg-ink-3:#898781; --wg-page:#0d0d0d; --wg-panel:#161615; --wg-line:rgba(255,255,255,.09); --wg-line-2:rgba(255,255,255,.16); --wg-ok:#6fbf86; --wg-err:#e66767; --wg-shadow:0 30px 80px rgba(0,0,0,.55); } *,*::before,*::after{ box-sizing:border-box; } body.wg-login{ margin:0; min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:24px; font-family:'Manrope','Noto Sans Georgian',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:15.5px; line-height:1.5; letter-spacing:-.006em; color:var(--wg-ink); background: radial-gradient(1200px 800px at 20% -10%, rgba(241,80,34,.09), transparent), radial-gradient(1000px 700px at 110% 110%, rgba(240,145,44,.10), transparent), var(--wg-page); -webkit-font-smoothing:antialiased; } .wg-card{ width:min(400px,100%); background:var(--wg-panel); border:1px solid var(--wg-line); border-radius:18px; padding:40px 36px; box-shadow:var(--wg-shadow); } /* The mark is 5.14:1 and already cropped to its bounds — height follows width, never set both. */ .wg-logo{ display:block; width:132px; height:auto; } .wg-sub{ margin:16px 0 26px; color:var(--wg-ink-3); font-size:13px; } .wg-step[hidden]{ display:none; } .wg-label{ display:block; margin:0 0 6px; font-size:12px; font-weight:700; color:var(--wg-ink-2); text-transform:uppercase; letter-spacing:.06em; } .wg-input{ width:100%; min-height:46px; padding:12px 14px; border:1px solid var(--wg-line-2); border-radius:10px; background:var(--wg-panel); color:var(--wg-ink); font:inherit; font-size:15.5px; outline:none; } .wg-input::placeholder{ color:var(--wg-ink-3); } .wg-input:focus-visible{ border-color:var(--wg-brand); box-shadow:0 0 0 3px rgba(241,80,34,.16); } /* The one-time code: wide tracking so six digits read as six, not a number. */ .wg-input--code{ text-align:center; font-size:21px; font-weight:600; letter-spacing:.42em; text-indent:.42em; /* re-centres: trailing letter-spacing shifts glyphs left */ font-variant-numeric:tabular-nums; } .wg-btn{ display:block; width:100%; min-height:48px; margin-top:24px; padding:13px; border:0; border-radius:10px; background:linear-gradient(135deg,var(--wg-brand),var(--wg-brand-2)); color:#fff; font:inherit; font-size:15.5px; font-weight:700; cursor:pointer; transition:filter .15s, transform .1s; } .wg-btn:hover{ filter:brightness(1.06); } .wg-btn:active{ transform:scale(.985); } .wg-btn:focus-visible{ outline:2px solid var(--wg-brand); outline-offset:3px; } .wg-btn[disabled]{ opacity:.55; cursor:default; transform:none; filter:none; } .wg-links{ margin-top:15px; text-align:center; font-size:13px; color:var(--wg-ink-3); } .wg-link{ color:var(--wg-ink-3); text-decoration:underline; text-underline-offset:3px; cursor:pointer; background:none; border:0; font:inherit; padding:0; } .wg-link:hover{ color:var(--wg-ink); } .wg-link:focus-visible{ outline:2px solid var(--wg-brand); outline-offset:3px; border-radius:4px; } .wg-sep{ opacity:.5; margin:0 6px; } /* Status line. Reserves its height so revealing a message never nudges the card. */ .wg-msg{ margin:14px 0 0; min-height:19px; text-align:center; font-size:13px; font-weight:600; color:var(--wg-ok); } .wg-msg--err{ color:var(--wg-err); } .wg-rule{ margin-top:22px; padding-top:16px; border-top:1px solid var(--wg-line); font-size:13px; } .wg-pw{ margin-top:14px; } .wg-pw[hidden]{ display:none; } .wg-pw .wg-label{ margin-top:16px; } .wg-theme{ position:fixed; top:16px; right:16px; background:none; border:0; padding:8px; border-radius:10px; line-height:0; color:var(--wg-ink-3); cursor:pointer; } .wg-theme:hover{ color:var(--wg-ink); } .wg-theme:focus-visible{ outline:2px solid var(--wg-brand); outline-offset:2px; } .wg-theme svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; display:none; } .wg-theme .wg-moon{ display:block; } :root[data-theme="dark"] .wg-theme .wg-moon{ display:none; } :root[data-theme="dark"] .wg-theme .wg-sun{ display:block; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .wg-theme .wg-moon{ display:none; } :root:not([data-theme="light"]) .wg-theme .wg-sun{ display:block; } } @media (max-width:420px){ .wg-card{ padding:32px 24px; border-radius:16px; } } @media (prefers-reduced-motion:reduce){ .wg-btn{ transition:none; } .wg-btn:active{ transform:none; } }