From a4189f0d2abf2c232bc28edf187e8c5365e345a7 Mon Sep 17 00:00:00 2001 From: Iqbal Date: Fri, 23 Oct 2026 12:33:51 +0700 Subject: [PATCH] Fit the sign-in page on phones with a full blue background Shorten the story header so the form shows without scrolling, keep the Clerk card inside the screen, and run one blue background behind the whole page. Co-Authored-By: Claude Opus 5.5 --- src/styles/theme.css | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/styles/theme.css b/src/styles/theme.css index ad054a7..3ba7ccb 100644 --- a/src/styles/theme.css +++ b/src/styles/theme.css @@ -235,7 +235,20 @@ dialog::backdrop{background:rgba(16,24,40,.45);backdrop-filter:blur(4px)} .page-head h1{font-size:30px} .page-head p{font-size:14px} .metric strong{font-size:32px} - .login-story{padding:28px 20px} + /* Phone: a short story header so the sign-in form shows without scrolling past it */ + /* Phone: one blue background behind both the story and the form, dot grid included */ + .login-layout{background:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.2px) 0 0/22px 22px,radial-gradient(circle 360px at 100% 0,rgba(255,255,255,.28),rgba(255,255,255,0)),linear-gradient(170deg,#175cd3,#1570ef 45%,#2e90fa)} + .login-story,.login-panel{background:transparent} + .login-story::before,.login-story::after{display:none} + .login-story{padding:20px 16px 24px} + .login-copy{padding:20px 0 0} + .login-copy h1{font-size:28px;line-height:1.1;margin:14px 0 10px} + .login-copy>p{font-size:14px;line-height:1.5} + .eyebrow{font-size:10.5px;padding:5px 12px 5px 6px} + .login-benefits,.login-footer{display:none} + .login-panel{padding:24px 16px 32px} + .login-form-wrap{width:100%} + .login-form-wrap :is(.cl-rootBox,.cl-cardBox){width:100%;max-width:100%} } @media (prefers-reduced-motion:reduce){ .btn,.content-card,.sidebar nav :is(button,a){transition:none}