@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap'); /* ============================================================================= AI MOCK CASE — auth.css · "AURORA" direction Shared light, Stripe-grade split layout for the auth gateway (sign-in + sign-up). Loads AFTER design-system.css. Re-tones the design tokens ON the .auth2 scope (warm cream -> crisp cool white) so every design-system form control inherits the new palette automatically — no per-component rewrites. The showcase is a flowing multi-hue gradient (the signature moment); the form is airy white. ========================================================================== */ .auth2 { /* ---- Re-toned tokens (scoped; cascade into all descendant components) ---- */ --bg: #FFFFFF; --card: #FFFFFF; --field: #F6F8FC; /* cool inset, not warm cream */ --field-2: #EEF1F6; --line: #E4E8F0; /* cool hairline */ --line-2: #EEF1F6; --muted: #58607A; /* secondary (cool slate) */ --muted-2: #8891A6; --accent: #3E6AE1; /* royal blue CTA, a touch brighter */ --accent-700: #2F5CDB; --accent-tint: #ECF1FC; --accent-tint-2: #F5F8FE; --focus-ring-accent: 0 0 0 4px rgba(47,92,219,.20); --ink-text: #0E1530; --serif: 'Space Grotesk', 'Inter', system-ui, sans-serif; /* firm display */ min-height: 100vh; display: grid; grid-template-columns: 1.04fr 0.96fr; background: #fff; color: var(--ink-text); } /* auth.css only loads on auth pages, so resetting here is safely scoped. */ body { background: #fff; background-image: none; background-attachment: scroll; } ::selection { background: var(--accent-tint); color: var(--ink-text); } /* ============ LEFT — THE GRADIENT SHOWCASE ============ */ .auth2__show { position: relative; overflow: hidden; isolation: isolate; color: #fff; /* On-brand royal blue only — navy ink + royal blue is the whole palette (no pink/indigo/blue). */ background: linear-gradient(155deg, #3257C9 0%, #1E2E78 44%, #0E1530 100%); padding: var(--sp-7) clamp(var(--sp-6), 4vw, var(--sp-9)); display: flex; flex-direction: column; gap: var(--sp-6); } /* flowing colour blobs over the base gradient — the Stripe-style "living" mesh */ .auth2__show::before { content: ""; position: absolute; inset: -25%; z-index: -2; background: radial-gradient(34% 34% at 16% 20%, rgba(120,160,255,.55), transparent 60%), /* warm amber */ radial-gradient(40% 40% at 84% 26%, rgba(62,106,225,.48), transparent 60%), /* bright royal blue */ radial-gradient(46% 46% at 66% 90%, rgba(30,42,110,.52), transparent 60%), /* deep rust */ radial-gradient(34% 34% at 10% 86%, rgba(90,120,230,.42), transparent 60%); /* royal blue */ filter: blur(50px); will-change: transform; animation: auroraFlow 22s ease-in-out infinite alternate; } /* whisper-thin scrim to guarantee white-text contrast without darkening the mood */ .auth2__show::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14,21,48,.12), rgba(14,21,48,.02) 42%, rgba(14,21,48,.16)); } @keyframes auroraFlow { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-2%,2%,0) scale(1.10); } } .auth2__brand .brand__name { color: #fff; } .auth2__brand .brand__name b { color: #fff; } .auth2__brand .brand__mark { background: #fff; color: var(--accent); } .auth2__show-body { display: flex; flex-direction: column; gap: var(--sp-5); margin-block: auto; max-width: 31rem; } .auth2__kicker { display: inline-flex; align-items: center; gap: var(--sp-2); align-self: flex-start; font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34); border-radius: var(--r-pill); padding: 0.36rem 0.72rem; backdrop-filter: blur(4px); } .auth2__kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; flex: 0 0 6px; } .auth2__h { font-family: var(--serif); font-weight: 600; font-size: clamp(2.1rem, 3.5vw, 3.2rem); line-height: 1.07; letter-spacing: -0.022em; color: #fff; } .auth2__h em { font-style: normal; color: #fff; } .auth2__sub { color: rgba(255,255,255,.92); font-size: var(--fs-md); line-height: 1.62; max-width: 44ch; } .auth2__sub strong { color: #fff; font-weight: 600; } /* ---- the scorecard: a clean white product card floating on the gradient ---- */ .auth2__glass { position: relative; background: #FFFFFF; border: 1px solid rgba(255,255,255,.7); border-radius: var(--r-xl); padding: var(--sp-5); color: var(--ink-text); box-shadow: 0 40px 80px -30px rgba(24,18,60,.5), 0 14px 34px -16px rgba(24,18,60,.34); } .auth2__glass-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); } .auth2__glass-title { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .auth2__glass-overall { display: flex; align-items: baseline; gap: var(--sp-2); } .auth2__glass-overall small { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); } .auth2__glass-num { font-family: var(--serif); font-weight: 600; font-size: 2.7rem; line-height: 1; color: var(--ink-text); } .auth2__glass .dims { gap: var(--sp-4); } .auth2__glass .dim__name { color: var(--ink-text); font-weight: 600; } .auth2__glass .dim__score { color: var(--muted); font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .auth2__glass .dim__track { background: #EDF0F6; height: 6px; } .auth2__glass .dim__fill { background: var(--ink-text); } .auth2__glass .dim--accent .dim__fill { background: var(--accent); } .auth2__glass-foot { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line-2); font-size: var(--fs-xs); color: var(--muted); } .auth2__glass-foot .dot--live { background: var(--accent); } /* ---- proof + live strip (white-on-gradient) ---- */ .auth2__proof { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); } .auth2__proof .pi { display: inline-flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-sm); color: rgba(255,255,255,.9); } .auth2__proof .pi b { font-family: var(--serif); font-weight: 600; font-size: var(--fs-lg); color: #fff; line-height: 1; } .auth2__proof .sep { color: rgba(255,255,255,.42); } .auth2__live { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em; color: rgba(255,255,255,.95); } .auth2__live .dot--live { background: #fff; position: relative; } .auth2__live .dot--live::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255,255,255,.6); animation: livePulseRing 2.4s ease-out infinite; } @keyframes livePulseRing { from { transform: scale(1); opacity: .7; } to { transform: scale(2.6); opacity: 0; } } /* ============ RIGHT — THE AIRY WHITE FORM ============ */ .auth2__form { position: relative; display: flex; flex-direction: column; padding: var(--sp-6) clamp(var(--sp-5), 4vw, var(--sp-9)); background: #fff; border-left: 1px solid var(--line); } .auth2__form-top { display: flex; justify-content: flex-end; } .auth2__form-inner { width: 100%; max-width: 25rem; margin: auto; } .auth2__welcome { text-align: left; margin-bottom: var(--sp-5); } .auth2__welcome h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.9rem, 2.4vw, 2.35rem); letter-spacing: -0.015em; color: var(--ink-text); } .auth2__welcome p { color: var(--muted); margin-top: var(--sp-2); } .provider-stack > * + * { margin-top: var(--sp-3); } .auth2__legal { margin-top: var(--sp-7); text-align: center; } /* Light-form polish: royal blue focus ring + Stripe-style button lift. (Inputs, labels, dividers, links, badges all inherit the re-toned tokens.) */ .auth2 input:focus, .auth2 select:focus, .auth2 textarea:focus { border-color: var(--accent); background: #fff; box-shadow: var(--focus-ring-accent); } .auth2 .btn--accent:hover { box-shadow: 0 14px 32px -12px rgba(47,92,219,.5); } .auth2 .btn--secondary { --_bg: #fff; --_fg: var(--ink-text); --_bd: var(--line); } .auth2 .btn--secondary:hover { border-color: var(--accent); background: var(--accent-tint-2); } .auth2 .btn--provider:hover { border-color: #C9D2E0; } /* ============ REVEAL MOTION ============ */ /* Resting state is fully visible; entrance armed only via .preanim and force- cleared by a safety timeout, so content is never trapped invisible. */ .reveal { opacity: 1; } .preanim .reveal { opacity: 0; animation: rise .7s cubic-bezier(.2,.7,.2,1) both; } @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* ============ RESPONSIVE ============ */ @media (max-width: 980px) { .auth2 { grid-template-columns: 1fr; } .auth2__show { gap: var(--sp-5); padding: var(--sp-6) var(--sp-5) var(--sp-7); } .auth2__show::before { animation: none; } /* pause peak-cost paint on phones */ .auth2__show-body { margin-block: 0; gap: var(--sp-4); } .auth2__glass { padding: var(--sp-4); } .auth2__h { font-size: clamp(2rem, 7.5vw, 2.6rem); } .auth2__form { padding: var(--sp-6) var(--sp-5) var(--sp-7); border-left: 0; border-top: 1px solid var(--line); } .auth2__form-inner { margin-top: var(--sp-5); } } @media (prefers-reduced-motion: reduce) { .auth2__show::before { animation: none; } .auth2__live .dot--live::after { animation: none; } .preanim .reveal { opacity: 1; animation: none; } }