/* Light redesign for the auth screens (login / register / verify / password), * extending the design language ADR-181 introduced for the manage area. * * Loaded ONLY by auth/_shell.html (not by base.html), so landing.html and * anything else on style.css's dark theme is untouched. Everything here is * scoped under `body.auth-body` / `.auth-shell` for the same reason: the * generic class names the auth templates reuse from style.css (.btn, * .form-grid, .alert, .muted) must keep their dark look everywhere else. * * Tokens are the ADR-181 ones (manage-light.css): #4f63e9 blue, #ff5147 * coral, #202746 navy, #898fa2 muted, #e9eefb line, #f3f7ff tint. * The @font-face blocks are repeated here rather than shared, because * manage-light.css is a manage-only sheet that auth pages never load. */ @font-face { font-family: "Discovery Fs"; src: url("/static/fonts/Discovery_Fs-Light.woff2") format("woff2"), url("/static/fonts/Discovery_Fs-Light.ttf") format("truetype"); font-weight: 300; font-display: swap; } @font-face { font-family: "Discovery Fs"; src: url("/static/fonts/Discovery_Fs-Bold.woff2") format("woff2"), url("/static/fonts/Discovery_Fs-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; } @font-face { font-family: "Pil Kahol"; src: url("/static/fonts/FtPilKahol2.ttf") format("truetype"); font-weight: 400; font-display: swap; } .auth-body { --al-blue: #4f63e9; --al-blue-dark: #3b4bd0; --al-navy: #202746; --al-muted: #898fa2; --al-line: #e9eefb; --al-tint: #f3f7ff; --al-coral: #ff5147; --al-font: "Discovery Fs", "Segoe UI", "Arial Hebrew", Arial, sans-serif; /* style.css paints with the dark radial gradient and declares `color-scheme: dark` unconditionally — the latter is what makes native controls (select popups, autofill, scrollbars) render in dark chrome no matter what colors the elements around them get (same trap as ADR-183). */ background: #ffffff; color-scheme: light; color: var(--al-navy); font-family: var(--al-font); font-weight: 300; } /* ══════════════════════════ Split shell ══════════════════════════ */ /* Two explicit grid columns instead of DOM order: the aside comes FIRST in the markup (it is the page's brand header on narrow screens, where the grid collapses to one column), but on desktop RTL column 1 is the right edge, and the form belongs there — where the reader's eye starts. */ .auth-shell { display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 42vw, 620px); min-height: 100vh; } /* grid-row is as load-bearing as grid-column here: with only the column pinned, auto-placement puts the aside in row 1 / column 2 and then finds its cursor already past column 1, so the form drops to a second row and the two halves stack diagonally instead of sitting side by side. */ .auth-main { grid-column: 1; grid-row: 1; } .auth-aside { grid-column: 2; grid-row: 1; } /* ── form side ── */ .auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 2rem; background: #ffffff; } .auth-panel { width: 100%; max-width: 400px; } .auth-panel-wide { max-width: 620px; } .auth-logo { display: block; margin-bottom: 2.2rem; } .auth-logo img { width: 176px; height: auto; display: block; } .auth-head { margin-bottom: 1.6rem; } .auth-head h1 { font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--al-navy); margin: 0 0 .4rem; } .auth-head p, .auth-shell .muted { color: var(--al-muted); font-size: 14px; font-weight: 300; line-height: 1.6; } /* :not(.btn) — the same guard manage-light.css needed for its content links: `.auth-shell a:hover` (0,2,1) outranks `.auth-shell .btn-primary` (0,2,0), so without it the anchor-styled CTA on reset_password_invalid.html took --al-blue-dark as its TEXT color while :hover painted the same value as its background — an invisible label with a stray underline. Excluding .btn from the match means the two rules can never compete on specificity at all. */ .auth-shell a:not(.btn) { color: var(--al-blue); text-decoration: none; font-weight: 700; } .auth-shell a:not(.btn):hover { color: var(--al-blue-dark); text-decoration: underline; } .auth-shell .center { text-align: center; margin-top: 1.6rem; } /* ── step indicator (the 3-screen registration flow) ── */ .auth-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 1.6rem; } .auth-step { display: flex; align-items: center; gap: 8px; } .auth-step-dot { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--al-tint); color: var(--al-muted); border: 1px solid var(--al-line); } .auth-step-label { font-size: 12px; font-weight: 700; color: var(--al-muted); white-space: nowrap; } .auth-step-line { width: 22px; height: 2px; border-radius: 2px; background: var(--al-line); } .auth-step.is-current .auth-step-dot { background: var(--al-blue); border-color: var(--al-blue); color: #fff; } .auth-step.is-current .auth-step-label { color: var(--al-navy); } .auth-step.is-done .auth-step-dot { background: #e6e9fd; border-color: #e6e9fd; color: var(--al-blue); } /* The label of an already-passed step is dropped on narrow screens first — it is the least useful of the three, and three full labels wrap badly. */ .auth-step.is-done .auth-step-label { color: var(--al-muted); } /* ══════════════════════════ Form controls ══════════════════════════ */ .auth-shell .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1rem; margin-top: 0; } .auth-panel:not(.auth-panel-wide) .form-grid { grid-template-columns: 1fr; } .auth-shell .form-grid label { display: flex; flex-direction: column; gap: .4rem; font-size: 12px; font-weight: 700; color: var(--al-muted); } .auth-shell .form-grid input, .auth-shell .form-grid select { width: 100%; padding: .72rem .85rem; border-radius: 12px; border: 1px solid var(--al-line); background: #fdfdff; color: var(--al-navy); font-size: 15px; font-weight: 300; font-family: var(--al-font); transition: border-color .12s ease, box-shadow .12s ease, background .12s ease; } .auth-shell .form-grid input::placeholder { color: #b9bed1; } .auth-shell .form-grid input:hover, .auth-shell .form-grid select:hover { border-color: #d3dbf7; } .auth-shell .form-grid input:focus, .auth-shell .form-grid select:focus { /* background-COLOR, not the shorthand: `background: #fff` also resets background-image to none, and at this specificity it beat the select's own chevron rule below — appearance:none having already removed the native arrow, the focused