/* ============================================ Login Page — Obsidian Aurora ============================================ */ /* Google Fonts load via in the page's (not @import here) — avoids the extra serial round-trip that contributes to FOUC on fast reloads. Keep in sync: Inter 400;500;600;700;800, JetBrains Mono 400;500;600, Instrument Serif ital@1. */ :root { --canvas: #000000; --surface-0: #0A0D14; --surface-1: #11151F; --surface-2: #1A1F2C; --surface-3: #242B3D; --fg-mark: #FFFFFF; --fg-1: #E4E8F1; --fg-2: #B8C0D0; --fg-3: #8E99B0; --fg-4: #5A6478; --line-1: rgba(255,255,255,0.06); --line-2: rgba(255,255,255,0.12); --line-3: rgba(255,255,255,0.20); --line-inset: inset 0 1px 0 rgba(255,255,255,0.04); --up: #22c55e; --down: #ef4444; --down-line: rgba(239,68,68,0.30); --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-pill: 999px; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; --font-serif: 'Instrument Serif', serif; --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-base: 250ms; --elev-1: 0 1px 3px rgba(0,0,0,0.24), 0 2px 8px rgba(0,0,0,0.18); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* The page owns the light, so it can cover the full viewport while the content grid below stays narrower and centred. Painting this on .auth instead would tie the background to the grid's max-width and leave bare canvas down both edges. */ body { background-color: var(--canvas); /* Light only — the 48px grid was removed. Its lines are a fixed size, so on a wider display they multiply instead of scaling, and they were the one element still drawing hard edges across a page whose whole point is that it has none. */ background-image: /* one light source, low-left — it never reaches the form side */ radial-gradient(ellipse 44% 54% at 2% 99%, rgba(34,197,94,0.32) 0%, transparent 62%), radial-gradient(ellipse 38% 34% at 66% 1%, rgba(110,168,255,0.06) 0%, transparent 70%); background-attachment: fixed; color: var(--fg-1); font: 400 15px/1.6 var(--font-sans); -webkit-font-smoothing: antialiased; min-height: 100vh; } a { color: inherit; text-decoration: none; } /* Brand */ .brand { display: flex; align-items: center; gap: 10px; } .brand-text { font: 700 16px/1 var(--font-sans); letter-spacing: -0.03em; color: var(--fg-mark); } /* Button base */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: var(--radius-sm); font: 600 14px/1 var(--font-sans); cursor: pointer; border: none; text-decoration: none; transition: all var(--dur-base) var(--ease); } /* Auth layout — one page, split by a line (not two pages side by side) --------------------------------------------------------------------------- The aurora and the grid used to be painted twice: once on .auth-aside and once on .auth-form-wrap. The two gradients met at the halfway mark and drew a visible vertical edge, so the page read as two unrelated screens — and the green that bled into the right half made the split worse, not softer. Both are painted ONCE on .auth now; the halves are transparent and the only divider is the hairline below, which is strongest in the middle and dissolves at both ends. */ /* Everything below is sized in vw so the composition is the SAME PICTURE at every width — only larger or smaller. The previous attempt capped the grid at a fixed max-width:1900px and centred it. That looks balanced at exactly one size: on a 2560px display it left 330px down each edge, but on a 1920px display the 1900px grid nearly filled the screen, so the outer margins collapsed to ~10px while the gap down the middle stayed as wide as ever. Margins shrank 97%, the gap shrank 0% — two different layouts on two monitors. A fixed cap can only ever be right for one viewport; proportional units are right for all of them. The clamp() floors and ceilings only take over at the extremes, to stop text becoming unreadable on a small laptop or absurd on an ultrawide. */ :root { /* outer margin, identical on both sides by construction */ --auth-edge: clamp(24px, 15vw, 400px); /* 720/2560 and 420/2560 — the proportions that read well on the 27" screen */ --auth-story: clamp(380px, 28vw, 720px); --auth-form-w: clamp(320px, 16.4vw, 420px); } .auth { position: relative; min-height: 100vh; display: grid; /* 70/30 — the form needs only enough width to be comfortable, the rest belongs to the content. */ grid-template-columns: 70fr 30fr; } /* No divider rule on purpose. A hairline at the 70% mark drew exactly the seam this layout is meant to avoid — the halves are held together by one continuous background and matching margins, not by a line. */ /* Aside */ .auth-aside { position: relative; /* Right side is an inner gutter, NOT the page margin. Using --auth-edge on both sides charged the outer margin twice: at 1024px that made the row need 153+380+153 + 320+153 = 1160px and the page scrolled sideways by 137px. */ padding: 5vh 3vw 5vh var(--auth-edge); background: none; display: flex; flex-direction: column; /* space-between pushed brand / quote / stats apart and left a hole above and below the quote on a tall screen. One centred block instead. */ justify-content: center; } /* logo aligns with the column of text below it, at every width */ .auth-aside .brand { position: absolute; top: 5vh; left: var(--auth-edge); } .aside-inner { width: var(--auth-story); } .auth-aside .quote h2 { font: italic 400 36px/1.2 var(--font-serif); color: var(--fg-mark); margin: 0 0 18px; } .auth-aside .quote p { font: 400 14px/1.6 var(--font-sans); color: var(--fg-3); margin: 0 0 20px; } .quote-meta { display: flex; align-items: center; gap: 12px; } .quote-av { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #22c55e, #6EA8FF); flex-shrink: 0; } .quote-meta strong { display: block; font: 600 13px/1.3 var(--font-sans); color: var(--fg-1); } .quote-meta span { display: block; font: 400 11px/1.3 var(--font-mono); color: var(--fg-3); margin-top: 2px; } .ministats { display: flex; gap: 40px; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line-1); /* sit on a hairline, not loose in space */ } .ministats .num { font: 500 22px/1 var(--font-mono); color: var(--fg-mark); font-variant-numeric: tabular-nums; } .ministats .lbl { font: 500 10px/1 var(--font-sans); color: var(--fg-3); margin-top: 6px; letter-spacing: 0.12em; text-transform: uppercase; } /* Ecosystem strip — what the platform actually connects to, stated as fact. /login is also the first page a new visitor sees (the landing CTA points here), so it carries a little proof without turning into a second landing page. */ .eco { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line-1); } .eco-label { font: 500 10px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-4); margin-bottom: 14px; } .eco-list { display: flex; flex-wrap: wrap; gap: 8px; } .eco-item { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: rgba(255,255,255,0.02); font: 500 12px/1 var(--font-sans); color: var(--fg-2); } .eco-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--up); flex-shrink: 0; } .eco-note { margin-top: 16px; font: 400 12px/1.7 var(--font-sans); color: var(--fg-3); } .eco-pair { font: 500 11.5px/1 var(--font-mono); color: var(--fg-2); white-space: nowrap; } .eco-pair .arrow { color: var(--up); padding: 0 3px; } .eco-note .sep { color: var(--fg-4); padding: 0 8px; } /* Form pane */ .auth-form-wrap { display: flex; align-items: center; /* flex-end, not center: the form is pinned to the right margin so the space left of the page edge is exactly --auth-edge, matching the story's left margin. Centring inside this column would make the right margin depend on the column width and the two sides would drift apart as the viewport changes. */ justify-content: flex-end; padding: 5vh var(--auth-edge) 5vh 0; background: none; /* the page owns the background now, not the half */ } .auth-form { width: var(--auth-form-w); } .auth-form h1 { /* Fluid for the same reason as the layout: a fixed 32px in a column that shrinks with the viewport made "Continue to TradeAon." wrap to two lines at 1920px while sitting on one at 2560px — the headline has to scale with the box that holds it. */ font: 700 clamp(25px, 1.25vw, 32px)/1.2 var(--font-sans); letter-spacing: -0.03em; color: var(--fg-mark); margin: 0 0 8px; } .auth-form .sub { font: 400 14px/1.5 var(--font-sans); color: var(--fg-3); margin: 0 0 32px; } /* Google button */ .google-btn { width: 100%; justify-content: center; padding: 15px; font-size: 14.5px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--fg-1); border-radius: var(--radius-sm); box-shadow: var(--line-inset); margin-bottom: 24px; } .google-btn:hover { background: var(--surface-3); border-color: var(--line-3); transform: translateY(-1px); } /* Error message */ .auth-error { margin-bottom: 16px; padding: 12px 16px; background: rgba(239,68,68,0.08); border-left: 3px solid var(--down); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font: 400 13px/1.5 var(--font-sans); color: var(--fg-2); } .auth-error.hidden { display: none; } /* Loading indicator */ .auth-loading { display: flex; align-items: center; gap: 10px; color: var(--fg-3); font: 400 13px/1 var(--font-sans); margin-bottom: 16px; } .auth-loading.hidden { display: none; } .auth-spinner { width: 18px; height: 18px; border: 2px solid rgba(34,197,94,0.2); border-top-color: var(--up); border-radius: 50%; animation: spin 0.9s linear infinite; flex-shrink: 0; } @keyframes spin { to { transform: rotate(360deg); } } /* Session reassurance — tells the user the 30-day session (PERMANENT_SESSION_LIFETIME in app_factory.py) actually exists. It always did; nothing on screen ever said so, so returning users assumed they were not remembered. */ .auth-reassure { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 20px; font: 400 12.5px/1.55 var(--font-sans); color: var(--fg-3); } .auth-reassure svg { color: var(--up); flex-shrink: 0; margin-top: 2px; } .auth-reassure strong { font-weight: 600; color: var(--fg-2); } /* Legal disclaimer */ .auth-legal { font: 400 12px/1.6 var(--font-sans); color: var(--fg-4); text-align: center; } .auth-legal a { color: var(--fg-3); text-decoration: underline; text-underline-offset: 2px; } .auth-legal a:hover { color: var(--fg-1); } /* Responsive 1180px, not 1000px: below roughly this width the two columns can only fit by squeezing both the story and the form to their clamp() floors, which looks cramped long before it actually overflows. A 1024px iPad in landscape is better served by the single-column layout than by a two-column one it has no room for. */ @media (max-width: 1180px) { .auth { grid-template-columns: 1fr; } .auth-aside { display: none; } .auth-form-wrap { justify-content: center; padding: 40px 24px; min-height: 100vh; } .auth-form { width: 100%; max-width: 420px; } /* The aurora sits at the bottom-left of a two-column page; on one column pull it under the form instead of leaving it stranded off to the side. */ body { background-image: radial-gradient(ellipse 120% 42% at 50% 104%, rgba(34,197,94,0.26) 0%, transparent 66%); } }