/* ============================================================================= * Curzio Hub — login page overrides + layout * * Loaded only on /login. Two responsibilities: * 1. Re-scope the design tokens to the green-canvas palette via .login-page * so every standard component (.btn-primary, .body, etc.) auto-renders * in the login surface's colour relationships. * 2. Define the login screen's own layout: centred wordmark, editorial * headline, max-380px form, footer. * * `.login-page` is stamped on the element (via the `html_class` block * in login.html), so the tokens propagate to the entire document tree and * html's :root tokens cannot peek through on overscroll. * ============================================================================= */ .login-page { /* Canvas — green forest */ --bg: #053a22; --surface: #0a4b2d; --surface-2: #0d5836; --border: rgba(255, 255, 255, 0.08); --border-2: rgba(255, 255, 255, 0.18); /* Text — warm cream against deep green */ --text: #f5f3ed; --text-2: rgba(245, 243, 237, 0.72); --text-3: rgba(245, 243, 237, 0.50); --text-4: rgba(245, 243, 237, 0.32); /* Login-specific input styling */ --login-input-bg: rgba(255, 255, 255, 0.06); --login-input-border: rgba(255, 255, 255, 0.15); --login-input-focus: rgba(255, 255, 255, 0.32); background: var(--bg); color: var(--text); min-height: 100vh; position: relative; } /* Subtle vignette — keeps the green canvas from feeling flat. This is the only * gradient permitted in the design system, and only on the login surface. */ .login-page::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at top, transparent 30%, rgba(0, 0, 0, 0.25) 100%); pointer-events: none; z-index: 0; } .login-page > * { position: relative; z-index: 1; } /* ----------------------------------------------------------------------------- * Login form inputs — transparent fill, white border, mono placeholder * -------------------------------------------------------------------------- */ .login-input { font-family: var(--sans); font-size: 15px; width: 100%; padding: 14px 18px; background: var(--login-input-bg); border: 1px solid var(--login-input-border); border-radius: var(--radius); color: var(--text); transition: border-color 0.15s ease, background 0.15s ease; } .login-input::placeholder { font-family: var(--mono); font-size: 13px; color: rgba(245, 243, 237, 0.40); letter-spacing: 0.02em; } .login-input:focus { border-color: var(--login-input-focus); background: rgba(255, 255, 255, 0.08); } /* ----------------------------------------------------------------------------- * Login button — tonal, matching the form inputs' translucent language * * Overrides the standard .btn-primary inside .login-page so we don't need a * separate class in the markup. It deliberately mirrors .login-input: a * translucent light fill, a matching light border, the cream label, and the * same radius + height — so the Sign-in button reads as the last cell in the * input column. The shared .btn rule renders labels at the mono 10px micro * size, which looked lost on this larger button — so the Sign-in label size is * restored to 13px here (login-only); the mono family, uppercase, and tracking * still come from .btn, and the Hub's Generate / Apply buttons stay at 10px. * Vertical padding is 15px, which (with the 13px label) lines the box height up * with the 15px-text inputs. Hover lifts the fill opacity so it still reads as * clickable. * -------------------------------------------------------------------------- */ .login-page .btn-primary { background: rgba(255, 255, 255, 0.08); color: var(--text); border-color: var(--login-input-border); font-size: 13px; font-weight: 500; padding: 15px 26px; border-radius: var(--radius); } .login-page .btn-primary:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); border-color: var(--login-input-focus); } /* ----------------------------------------------------------------------------- * Login error message — restrained red on the green canvas * -------------------------------------------------------------------------- */ .login-error { background: rgba(217, 112, 112, 0.10); border: 1px solid rgba(217, 112, 112, 0.30); color: #f5b5b5; padding: 10px 14px; border-radius: var(--radius); font-size: 13px; } /* ----------------------------------------------------------------------------- * Layout — sticky-footer column with centred main column * * The body is the flex column; .login-main grows to push .login-footer down. * Designed for desktop viewports (1280–1440px) per spec; not responsive. * -------------------------------------------------------------------------- */ .login-page body { display: flex; flex-direction: column; min-height: 100vh; } .login-main { flex: 1 0 auto; width: 100%; max-width: 720px; margin: 0 auto; padding: 80px 28px 48px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 56px; } .login-brand { display: flex; justify-content: center; } .login-hero { width: 100%; max-width: 920px; } .login-hero .h-display { color: var(--text); margin-bottom: 22px; } .login-subhead { font-size: 16px; color: rgba(245, 243, 237, 0.72); line-height: 1.5; max-width: 560px; margin: 0 auto; } .login-form { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px; text-align: left; } .login-form .btn-primary { width: 100%; justify-content: center; margin-top: 8px; } .login-footer { flex: 0 0 auto; padding: 24px 28px 32px; text-align: center; font-family: var(--mono); font-size: 10px; color: rgba(245, 243, 237, 0.38); letter-spacing: 0.2em; text-transform: uppercase; }