/* ============================================================ Arbah v2 — Login surface (Lane D) Scoped restyle of the existing Login screen DOM under .arbah-v2. Legacy AND v1 paint stay byte-identical when the flag is off — nothing here applies unless carries .arbah-v2. CRITICAL constraint per protocol: CSS-only. Do NOT touch auth JS, theme-flag.js, or roles.js. This file references the existing .login-* class hooks emitted by src/pages/Login.js verbatim — the .legacy-* modifier classes alongside encode the v1 styling decisions and are intentionally not referenced from this file (the .arbah-v2 ancestor specificity beats them in cascade). Hooks targeted (all already in the source DOM): .login-page — full-screen container .login-card — centered max-w-md card .login-brand · .login-logo · .login-brand-name · .login-heading .login-submit · .login-toggle · .login-status (+ -error / -info) Pending Ahmed copy decisions (Riyadh vs Madinah brand name): the file styles the CONTAINER only; the actual string lives in i18n and is untouched. !important policy: 0. The .arbah-v2 ancestor + class compounds out-specify both Tailwind utilities (0,1,0) and the .legacy-* modifiers (0,1,0) — both single-class. Our .arbah-v2 .x is (0,2,0). RTL: form layout uses CSS flex/grid logical flow; the page dir attribute mirrors automatically. One scoped block under .arbah-v2[dir="rtl"] swaps the brand-name font (Plex Serif has no Arabic coverage). ============================================================ */ /* -- Page shell -- */ /* Full-screen centered container. v2 backdrop uses a subtle gradient from sunken to surface so the centered card has visual lift. */ .arbah-v2 .login-page { background: linear-gradient(180deg, var(--arbah-v2-surface-sunken) 0%, var(--arbah-v2-surface-raised) 100%); font-family: var(--arbah-v2-font-sans); color: var(--arbah-v2-ink); } /* -- Card -- */ /* Centered surface card. The page DOM sets max-w-md + p-8; we lift the chrome to v2 tokens. Slightly larger border-radius and stronger shadow than .arbah-v2 .card to read as an auth panel. */ .arbah-v2 .login-card { background: var(--arbah-v2-surface); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-lg); box-shadow: 0 12px 32px rgba(15, 23, 42, .12), 0 4px 8px rgba(15, 23, 42, .06); } /* -- Brand header -- */ .arbah-v2 .login-brand { color: var(--arbah-v2-ink); } /* Logo box — solid navy brand fill with white initial. The page DOM sets width/height via Tailwind (w-14 h-14); v2 lifts the chrome. */ .arbah-v2 .login-logo { background: var(--arbah-v2-brand); color: #fff; border-radius: var(--arbah-v2-radius-md); box-shadow: var(--arbah-v2-shadow-md); font-family: var(--arbah-v2-font-display); } /* Brand name — Plex Serif display. Arabic font swap handled by the dir="rtl" block below. */ .arbah-v2 .login-brand-name { font-family: var(--arbah-v2-font-display); color: var(--arbah-v2-ink); font-weight: 600; letter-spacing: -0.005em; } /* Eyebrow heading — mono. */ .arbah-v2 .login-heading { font-family: var(--arbah-v2-font-mono); color: var(--arbah-v2-ink-muted); letter-spacing: 0.08em; } /* -- Form chrome -- */ /* Restyle the form's inputs to v2 surface + token border + focus halo. The login form mounts inside .login-card so we scope by that. */ .arbah-v2 .login-card input[type="email"], .arbah-v2 .login-card input[type="password"], .arbah-v2 .login-card input[type="text"] { background: var(--arbah-v2-surface); border: 1px solid var(--arbah-v2-border); border-radius: var(--arbah-v2-radius-md); color: var(--arbah-v2-ink); font-family: var(--arbah-v2-font-sans); font-size: 14px; padding-block: 10px; padding-inline: 12px; transition: border-color 120ms ease, box-shadow 120ms ease; } .arbah-v2 .login-card input:focus { outline: none; border-color: var(--arbah-v2-brand); box-shadow: 0 0 0 3px rgba(16, 42, 67, .14); } /* Form labels above inputs. */ .arbah-v2 .login-card label { color: var(--arbah-v2-ink-muted); } /* -- Persona picker rows (legacy local mode) -- */ /* The PersonaPicker renders selectable rows for local-mode users. The page DOM uses conditional .border-blue-500 / .bg-blue-50 for the active row. Lift to v2 brand surface. */ .arbah-v2 .login-card label.border-blue-500 { border-color: var(--arbah-v2-brand); background: var(--arbah-v2-navy-100); } /* Radio accent. */ .arbah-v2 .login-card input[type="radio"].accent-blue-600 { accent-color: var(--arbah-v2-brand); } /* -- Submit button -- */ /* Full-width primary action. The page DOM marks both .login-submit and .legacy-login-submit-bg; the v2 fill wins via ancestor specificity. */ .arbah-v2 .login-submit { background: var(--arbah-v2-accent); color: #fff; border: 1px solid var(--arbah-v2-accent); border-radius: var(--arbah-v2-radius-md); font-family: var(--arbah-v2-font-sans); font-weight: 600; letter-spacing: 0.005em; box-shadow: var(--arbah-v2-shadow-sm); transition: background-color 120ms ease, border-color 120ms ease; } .arbah-v2 .login-submit:hover { background: var(--arbah-v2-bronze-700); border-color: var(--arbah-v2-bronze-700); } .arbah-v2 .login-submit:disabled { opacity: 0.55; cursor: not-allowed; } /* -- Mode toggle (magic / password) -- */ .arbah-v2 .login-toggle { color: var(--arbah-v2-ink-muted); font-family: var(--arbah-v2-font-sans); transition: color 120ms ease; } .arbah-v2 .login-toggle:hover { color: var(--arbah-v2-brand); } /* -- Status banners (magic-link sent / error) -- */ /* The page DOM adds .login-status-info or .login-status-error alongside the bg-{red,blue}-50 utility chrome. v2 token override. */ .arbah-v2 .login-status { border-radius: var(--arbah-v2-radius-md); font-family: var(--arbah-v2-font-sans); font-weight: 500; } .arbah-v2 .login-status-info { background: var(--arbah-v2-info-soft); color: var(--arbah-v2-info); } .arbah-v2 .login-status-error { background: var(--arbah-v2-danger-soft); color: var(--arbah-v2-danger); } /* -- "Local mode" footnote -- */ .arbah-v2 .login-card .text-gray-400 { color: var(--arbah-v2-ink-subtle); } /* -- RTL -- */ /* Plex Serif has no Arabic coverage; swap the brand name + logo typography in RTL to the sans stack. */ .arbah-v2[dir="rtl"] .login-brand-name, .arbah-v2[dir="rtl"] .login-logo { font-family: var(--arbah-v2-font-sans); } /* -- Mobile bump -- */ /* The .login-page is already centered with min-h-screen + p-6 in the source DOM. Tighten card padding for narrow phones so the form doesn't crowd the viewport on a 375px screen. */ @media (max-width: 640px) { .arbah-v2 .login-card { padding: 24px; } } /* ============================================================ Arbah v2 — two-pane login (login-screen.jsx): navy brand pane + form pane. Flag-gated DOM (LoginV2 in src/pages/Login.js); flag OFF renders the legacy centered card, so this is inert when off. ============================================================ */ .arbah-v2 .av2login { min-height: 100vh; display: flex; font-family: var(--arbah-v2-font-sans); color: var(--arbah-v2-ink); background: var(--arbah-v2-surface); } .arbah-v2 .av2login-brand { flex: 0 0 42%; background: var(--arbah-v2-navy-700); color: #fff; display: flex; align-items: center; justify-content: center; padding: 40px; } .arbah-v2 .av2login-brand-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; } .arbah-v2 .av2login-logo { height: 56px; width: auto; filter: brightness(0) invert(1); opacity: 0.95; margin-bottom: 10px; } .arbah-v2 .av2login-brand-name { font-family: var(--arbah-v2-font-display); font-weight: 500; font-size: 30px; color: #fff; } .arbah-v2[dir="rtl"] .av2login-brand-name { font-family: "IBM Plex Sans Arabic", var(--arbah-v2-font-display); font-weight: 600; } .arbah-v2 .av2login-brand-sub { font-family: var(--arbah-v2-font-mono); font-size: 11px; letter-spacing: 2.5px; color: rgba(243,232,213,0.6); } .arbah-v2 .av2login-brand-tag { margin-top: 14px; font-size: 13px; color: rgba(255,255,255,0.55); letter-spacing: 0.04em; text-transform: uppercase; } .arbah-v2 .av2login-form { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; } .arbah-v2 .av2login-form-inner { width: 100%; max-width: 360px; } .arbah-v2 .av2login-title { margin: 0 0 20px; font-family: var(--arbah-v2-font-display); font-weight: 600; font-size: 22px; color: var(--arbah-v2-ink); } .arbah-v2[dir="rtl"] .av2login-title { font-family: "IBM Plex Sans Arabic", var(--arbah-v2-font-display); } /* Inputs/buttons inside the reused EmailForm/PersonaPicker, v2-toned. */ .arbah-v2 .av2login-form input { border-radius: var(--arbah-v2-radius-md); border-color: var(--arbah-v2-border); } .arbah-v2 .av2login-form input:focus { outline: none; border-color: var(--arbah-v2-brand); box-shadow: 0 0 0 3px rgba(16,42,67,.14); } .arbah-v2 .av2login-form .login-submit { background: var(--arbah-v2-brand); border-radius: var(--arbah-v2-radius-md); } /* Mobile: stack, compact brand band on top. */ @media (max-width: 760px) { .arbah-v2 .av2login { flex-direction: column; } .arbah-v2 .av2login-brand { flex: 0 0 auto; padding: 28px; } .arbah-v2 .av2login-logo { height: 40px; } .arbah-v2 .av2login-brand-name { font-size: 24px; } }