/* ============================================================
Arbah v1 — Login page migration (first per-page rollout)
Scoped under .arbah-v1. Legacy login styles (all inline +
Tailwind utilities on src/pages/Login.js) untouched; nothing
here applies unless has .arbah-v1.
Spec: cluade/design/arbah-v1-design-system-COMPLETE-2026-05-12.md
(no explicit login mockup; layout extrapolated from the locked
token system + goal description for the foundation rollout).
Login page is OUTSIDE the shell — rendered by src/app.js when
`!user`, before Layout mounts. No sidebar / topbar / bottom-nav
selectors appear on this surface.
============================================================ */
/* ---------- Legacy class definitions (paint-preserving) -------- */
/* These classes replace inline style= attributes on Login.js. Outside
the .arbah-v1 scope so unflagged renders pick them up at specificity
(0,1,0). Each .arbah-v1 .legacy-X rule below has (0,2,0) and wins
under the flag on plain specificity.
Migrated from inline styles in PR 17 (zero-specificity-hack cleanup):
legacy-login-page-bg ← style="background:linear-gradient(135deg,#0B2545 0%,#13315C 100%);"
legacy-login-logo ← gradient + Cormorant Garamond + inset bronze
legacy-login-brand-name ← color #0B2545 + Cormorant Garamond
legacy-login-heading ← color #B8860B + font-weight 600
legacy-login-submit-bg ← background #0B2545 (used on 2 buttons)
*/
.legacy-login-page-bg {
background: linear-gradient(135deg, #0B2545 0%, #13315C 100%);
}
.legacy-login-logo {
background: linear-gradient(135deg, #0B2545, #13315C);
font-family: 'Cormorant Garamond', serif;
box-shadow: inset 0 1px 0 #B8860B;
}
.legacy-login-brand-name {
color: #0B2545;
font-family: 'Cormorant Garamond', serif;
}
.legacy-login-heading {
color: #B8860B;
font-weight: 600;
}
.legacy-login-submit-bg {
background: #0B2545;
}
/* ---- Outer page wrapper ----
The legacy wrapper now carries .legacy-login-page-bg instead of an
inline gradient. Scope-specificity (0,2,0) beats it (0,1,0) — v1
paints the flat neutral surface from the token. */
.arbah-v1 .login-page {
background: var(--arbah-bg);
font-family: var(--arbah-font-sans);
color: var(--arbah-text);
}
/* ---- Card container ----
Selector is .arbah-v1 .login-card (specificity 0,2,0) which beats
Tailwind's single-class .max-w-md / .rounded-xl / .shadow-2xl
(0,1,0). */
.arbah-v1 .login-card {
background: var(--arbah-surface);
border: 1px solid var(--arbah-border);
border-radius: var(--arbah-radius-lg);
box-shadow: var(--arbah-shadow-md);
padding: var(--arbah-space-8);
max-width: 420px;
width: 100%;
}
/* ---- Brand block (logo + name + tagline) ---- */
.arbah-v1 .login-brand {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--arbah-space-2);
}
/* Logo box — legacy now carries .legacy-login-logo; scope wins on
plain specificity. */
.arbah-v1 .login-logo {
background: var(--arbah-navy-700);
box-shadow: inset 0 1px 0 var(--arbah-bronze-500);
border-radius: var(--arbah-radius-md);
color: #fff;
font-family: var(--arbah-font-serif);
font-weight: 600;
}
/* Brand name — legacy now carries .legacy-login-brand-name. */
.arbah-v1 .login-brand-name {
color: var(--arbah-navy-700);
font-family: var(--arbah-font-sans);
font-weight: 600;
font-size: var(--arbah-text-lg);
}
/* Heading (uppercase tagline) — legacy goldenrod #B8860B is bronze-600
(print variant per spec). v1 surfaces the interactive bronze-500. */
.arbah-v1 .login-heading {
color: var(--arbah-bronze-500);
font-family: var(--arbah-font-sans);
font-weight: 600;
font-size: var(--arbah-text-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* ---- Form fields ----
Inputs and labels are targeted by descendant selector — no class
additions on each /