/* ========================================================================== WorkplaceGPT โ€” Customer Sign-in ยท "Aurora Glass" Animated emerald hero (cursor glow + drifting blobs + grain) on the left, glassmorphic form card on the right with a light/dark toggle. The skeleton shimmer (kept from the prior design) is preserved verbatim in behaviour โ€” see ".loading / .skeleton" below. ========================================================================== */ /* Form-panel theme tokens (the hero is always dark; the toggle re-themes the form side only, via data-theme on ). Light is the default. */ :root { --rbg: #eceee8; --rtext: #0a140e; --rmuted: #5f6e66; --rlabel: #2c382f; --inbg: rgba(255, 255, 255, 0.75); --inborder: rgba(10, 30, 20, 0.12); --intext: #0a140e; --cardbg: rgba(255, 255, 255, 0.5); --cardborder: rgba(255, 255, 255, 0.7); --togglebg: rgba(255, 255, 255, 0.7); --toggleborder: rgba(10, 30, 20, 0.1); --toggleicon: #0a140e; --btnbg: #0c130f; --btntext: #ffffff; --trouble: #6b7a72; --sheen: rgba(255, 255, 255, 0.22); --accent: #34c08a; --accent-ring: rgba(52, 192, 138, 0.16); --err: #c23434; --err-bg: rgba(194, 52, 52, 0.10); --err-line: rgba(194, 52, 52, 0.24); /* Skeleton shimmer (kept) */ --skel-base: #e2e5de; --skel-shine: #f4f6f1; } [data-theme="dark"] { --rbg: #08130d; --rtext: #eaf2ed; --rmuted: #84988d; --rlabel: #c4d0c8; --inbg: rgba(255, 255, 255, 0.04); --inborder: rgba(255, 255, 255, 0.1); --intext: #eaf2ed; --cardbg: rgba(255, 255, 255, 0.03); --cardborder: rgba(255, 255, 255, 0.08); --togglebg: rgba(255, 255, 255, 0.06); --toggleborder: rgba(255, 255, 255, 0.12); --toggleicon: #eaf2ed; --btnbg: #eef3ef; --btntext: #08130d; --trouble: #7f928a; --sheen: rgba(0, 0, 0, 0.07); --accent: #6ef2b4; --accent-ring: rgba(110, 242, 180, 0.18); --err: #f0807b; --err-bg: rgba(240, 128, 123, 0.13); --err-line: rgba(240, 128, 123, 0.28); --skel-base: rgba(255, 255, 255, 0.05); --skel-shine: rgba(255, 255, 255, 0.13); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #07140e; } input, button { font-family: inherit; } input { outline: none; } input::placeholder { color: #9aa49c; opacity: 1; } button { cursor: pointer; border: none; background: none; } /* Layout ----------------------------------------------------------------- */ .auth { display: flex; width: 100vw; height: 100vh; min-height: 680px; overflow: hidden; } /* Hero / brand panel (always dark) --------------------------------------- */ .brand-panel { position: relative; flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 54px 56px; background: radial-gradient(125% 120% at 16% 10%, #133d28 0%, #0b2618 38%, #07140e 72%, #040f0a 100%); } /* Cursor-following glow (positioned by JS) */ .brand-glow { position: absolute; left: 0; top: 0; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; background: radial-gradient(circle, rgba(110, 242, 180, 0.14) 0%, rgba(110, 242, 180, 0) 60%); opacity: 0; transition: opacity .5s ease; pointer-events: none; z-index: 1; will-change: transform; } .fx-blob { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; } .fx-blob-1 { width: 640px; height: 640px; left: -170px; top: -140px; background: radial-gradient(circle, rgba(58, 200, 143, 0.42) 0%, rgba(58, 200, 143, 0) 64%); filter: blur(38px); animation: drift1 26s ease-in-out infinite; } .fx-blob-2 { width: 540px; height: 540px; right: -150px; bottom: -150px; background: radial-gradient(circle, rgba(24, 118, 80, 0.55) 0%, rgba(24, 118, 80, 0) 66%); filter: blur(46px); animation: drift2 33s ease-in-out infinite; } .brand-grain { position: absolute; inset: -20%; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grainShift 7s steps(5) infinite; } .brand-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; } .brand-logo { height: 36px; width: auto; display: block; filter: drop-shadow(0 2px 14px rgba(52, 192, 138, 0.35)); } .brand-name { color: #eaf3ee; font-weight: 600; font-size: 17px; letter-spacing: -0.2px; } .brand-mid { position: relative; z-index: 2; } .brand-headline { margin: 0; font-weight: 600; font-size: 48px; line-height: 1.04; letter-spacing: -2px; color: #f3f8f4; } .brand-headline .accent { color: #6ef2b4; } .brand-sub { margin: 22px 0 0; max-width: 380px; font-size: 15px; line-height: 1.6; color: #a9bdb2; } .brand-points { list-style: none; display: flex; flex-direction: column; gap: 16px; margin-top: 38px; } .brand-points li { display: flex; align-items: center; gap: 14px; color: #d0e0d6; font-size: 14.5px; font-weight: 500; } .point-ico { width: 36px; height: 36px; flex: none; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: #7fe3b0; } .brand-foot { position: relative; z-index: 2; font-size: 12.5px; color: rgba(196, 214, 203, 0.55); } /* Staggered entrance reveal (delay set per element via --d) */ .reveal { animation: reveal .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) backwards; } /* Form panel ------------------------------------------------------------- */ .form-panel { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; background: var(--rbg); transition: background .5s ease; } .theme-toggle { position: absolute; top: 26px; right: 26px; width: 44px; height: 44px; border-radius: 13px; background: var(--togglebg); border: 1px solid var(--toggleborder); color: var(--toggleicon); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); transition: transform .3s ease, background .4s ease, border-color .4s ease; animation: reveal .6s cubic-bezier(.2, .7, .2, 1) .42s backwards; z-index: 3; } .theme-toggle:hover { transform: scale(1.07); } .theme-toggle:active { transform: scale(0.92); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle .sun-icon, .theme-toggle .moon-icon { width: 18px; height: 18px; } .sun-icon { display: none; } .moon-icon { display: block; } [data-theme="dark"] .sun-icon { display: block; } [data-theme="dark"] .moon-icon { display: none; } /* Glass card ------------------------------------------------------------- */ .form-card { width: 404px; max-width: calc(100vw - 48px); padding: 42px 40px; border-radius: 22px; background: var(--cardbg); border: 1px solid var(--cardborder); backdrop-filter: blur(22px); box-shadow: 0 24px 60px rgba(15, 35, 25, 0.12); transition: background .5s ease, border-color .5s ease; } .form-head h2 { margin: 0; font-weight: 600; font-size: 30px; letter-spacing: -1px; color: var(--rtext); transition: color .5s ease; } .form-head p { margin: 8px 0 30px; font-size: 14.5px; color: var(--rmuted); transition: color .5s ease; } /* Form ------------------------------------------------------------------- */ .login-form { display: flex; flex-direction: column; } .form-group { display: flex; flex-direction: column; } .form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--rlabel); margin-bottom: 9px; transition: color .5s ease; } .form-group input { width: 100%; height: 52px; padding: 0 16px; border-radius: 13px; background: var(--inbg); border: 1px solid var(--inborder); color: var(--intext); font-size: 15px; transition: border-color .25s, box-shadow .25s, background .4s; } .form-group input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); } /* Error ------------------------------------------------------------------ */ .error-message { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 11px 14px; background: var(--err-bg); border: 1px solid var(--err-line); border-radius: 11px; color: var(--err); font-size: 13px; font-weight: 500; animation: shake .4s ease-out; } .error-message svg { flex-shrink: 0; } /* Microsoft button (primary CTA) ----------------------------------------- */ .btn-microsoft { position: relative; overflow: hidden; width: 100%; height: 54px; margin-top: 18px; border-radius: 13px; background: var(--btnbg); color: var(--btntext); font-weight: 600; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 12px; box-shadow: 0 6px 20px rgba(10, 20, 15, 0.2); transition: transform .18s ease, box-shadow .25s ease, background .4s ease; } .btn-microsoft::before { content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, var(--sheen), transparent); transform: skewX(-18deg); animation: sheen 5.5s ease-in-out infinite; pointer-events: none; } .btn-microsoft:hover { transform: translateY(-2px); box-shadow: 0 13px 32px rgba(10, 20, 15, 0.3); } .btn-microsoft:active { transform: translateY(0) scale(0.99); } .btn-microsoft:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn-microsoft:disabled { opacity: 0.65; cursor: not-allowed; } /* Microsoft 4-square mark */ .ms-logo { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 16px; height: 16px; flex: none; } .ms-logo i { border-radius: 1px; } .ms-logo i:nth-child(1) { background: #F25022; } .ms-logo i:nth-child(2) { background: #7FBA00; } .ms-logo i:nth-child(3) { background: #00A4EF; } .ms-logo i:nth-child(4) { background: #FFB900; } .form-foot { margin: 24px 0 0; text-align: center; font-size: 13px; color: var(--trouble); transition: color .5s ease; } /* Loading skeleton (KEPT โ€” the shimmer) ---------------------------------- */ .loading { display: flex; flex-direction: column; } .skeleton { background: linear-gradient(90deg, var(--skel-base) 0%, var(--skel-shine) 50%, var(--skel-base) 100%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: 13px; } .skeleton-label { height: 13px; width: 84px; border-radius: 5px; margin-bottom: 9px; } .skeleton-input { height: 52px; width: 100%; } .skeleton-button { height: 54px; width: 100%; margin-top: 18px; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Keyframes -------------------------------------------------------------- */ @keyframes drift1 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(7%, -6%) scale(1.18); } 100% { transform: translate(0, 0) scale(1); } } @keyframes drift2 { 0% { transform: translate(0, 0) scale(1.12); } 50% { transform: translate(-9%, 7%) scale(1); } 100% { transform: translate(0, 0) scale(1.12); } } @keyframes grainShift { 0% { transform: translate(0, 0); } 25% { transform: translate(-4%, 3%); } 50% { transform: translate(3%, -4%); } 75% { transform: translate(-2%, -2%); } 100% { transform: translate(0, 0); } } @keyframes reveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes sheen { 0% { left: -60%; } 14% { left: 130%; } 100% { left: 130%; } } @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } } /* Responsive ------------------------------------------------------------- */ @media (max-width: 900px) { .brand-panel { display: none; } .auth { min-height: 100vh; } } @media (max-width: 480px) { .form-card { padding: 36px 26px; } .theme-toggle { top: 18px; right: 18px; } } /* Accessibility ---------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .skeleton { animation: none; background: var(--skel-base); } /* keep entrance content visible (reveal uses `backwards`, but be explicit) */ .reveal { opacity: 1; transform: none; } } @media print { .brand-panel, .theme-toggle { display: none; } }