diff --git a/src/pages/login.astro b/src/pages/login.astro index bb511a8..206d269 100644 --- a/src/pages/login.astro +++ b/src/pages/login.astro @@ -2,16 +2,24 @@ import Base from '../layouts/Base.astro'; --- -
- -
+ {/* Split-screen auth (2026 convention: Linear/Stripe/Vercel) — clean white + form column + living brand aurora pane. Auth pages are scanned, not read: + one line of copy, one action. */} +
+
- Mock — AAI integration pending

Sign in

- {/* Auth pages are scanned, not read — one line, no reassurance prose */}

Use your CTAO account — single sign-on via CTAO AAI.

No account? Register via CTAO AAI

+

+ Mock — AAI integration pending + ← Back to the portal +

+
+
diff --git a/src/styles/global.css b/src/styles/global.css index 059cbc5..f99fedc 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -642,26 +642,40 @@ mark { background: var(--tint-cherenkov); color: inherit; border-radius: calc(va .pill--review { color: var(--text); background: #fff; } .pill--draft { color: var(--muted); background: #fff; } -/* Auth (login mock) — nebula backdrop + floating card; the ONLY navy band - besides the home hero */ -.auth-band { - min-height: calc(100dvh - 56px); position: relative; - display: grid; place-items: center; padding: var(--space-band) var(--gutter); - background: var(--nebula), var(--galaxy); +/* Auth (login mock) — split-screen (2026 auth convention): white form column, + living aurora pane. The aurora pane reuses .auth-band (the ONLY navy band + besides the home hero) so the static/animated nebula rules apply unchanged. */ +.auth { + display: grid; grid-template-columns: minmax(400px, 40%) 1fr; + min-height: calc(100dvh - 56px); } -.auth-card { - position: relative; background: #fff; border-radius: calc(var(--radius) + 8px); - padding: var(--space-l); max-width: 440px; width: 100%; - box-shadow: var(--shadow-lifted); +.auth-pane { + display: flex; flex-direction: column; justify-content: center; + gap: var(--space-s); padding: var(--space-band) clamp(28px, 6vw, 88px); + max-width: 560px; } -.auth-logo { height: 24px; width: auto; margin-bottom: var(--space-m); } -/* Whisper badge sits top-right, off the reading flow (back in flow ≤480px - where it would collide with the logo) */ -.auth-card .badge-mock { position: absolute; top: var(--space-l); right: var(--space-l); margin: 0; } -@media (max-width: 480px) { .auth-card .badge-mock { position: static; margin-bottom: 14px; } } -.auth-card h1 { color: var(--galaxy); margin: 6px 0 10px; font-size: var(--fs-xl); } -.auth-card .muted { color: var(--muted); font-size: var(--fs-s); } +.auth-logo { height: 26px; width: auto; margin-bottom: var(--space-l); align-self: flex-start; } +.auth-pane h1 { color: var(--galaxy); margin: 0; font-size: var(--fs-h2); } +.auth-pane .muted { color: var(--muted); font-size: var(--fs-s); margin: 0 0 var(--space-s); } .btn-wide { width: 100%; margin-top: var(--space-s); } +.auth-foot { + display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); + margin-top: var(--space-xl); flex-wrap: wrap; +} +.auth-foot .badge-mock { margin: 0; } +.auth-foot .back { font-size: var(--fs-s); } +.auth-visual { position: relative; background: var(--nebula), var(--galaxy); } +.auth-tagline { + position: absolute; left: clamp(28px, 5vw, 64px); bottom: clamp(28px, 6vh, 64px); + margin: 0; color: #fff; font-family: var(--font-display); font-weight: 500; + font-size: var(--fs-xl); letter-spacing: -0.015em; line-height: 1.25; +} +@media (max-width: 900px) { + .auth { grid-template-columns: 1fr; min-height: 0; } + .auth-visual { order: -1; min-height: 180px; } + .auth-tagline { display: none; } + .auth-pane { padding: var(--space-l) var(--gutter) var(--space-xl); max-width: none; } +} /* Footer — brand band: logo + descriptor / spec links (§3.3.1) / demo note + flash. No top margin: Moon/Galaxy bands meet it flush; white pages pad via .page/.article. */