/* auth.css — standalone auth pages (/auth/, /auth/signup/, /auth/reset/). Loaded with tokens.css + base.css + forms.css ONLY; the app's 20-sheet cascade never loads here. Selectors under "moved" came from menus-modals.css 2026-08-08. Spec: docs/superpowers/specs/2026-08-08-dedicated-auth-pages-design.md LAYOUT (2026-08-08, owner review): no card. The page is a three-band column — brand at the top, content centred in the middle, footer pinned at the bottom — the way app.mindmup.com/auth and app.raindrop.io/account/signup do it. A bordered box in the middle of an empty page reads like a widget dropped onto a background; letting the content BE the page reads like a room you walked into. TYPE: the welcome line is Bricolage Grotesque, the same display face the landing page uses. That is the point — landing → auth → app should feel like one product, and the funnel this page exists for starts on that landing page. Inter carries everything else, as it does in the app. */ .auth-page { /* base.css sizes for the APP SHELL — height:100vh + overflow:hidden, which would clip this page on a short screen with no way to scroll. Undo both. */ height: auto; min-height: 100dvh; overflow: auto; display: flex; flex-direction: column; padding: 0; } /* ---------- band 1: brand ---------- */ .auth-top { display: flex; justify-content: center; padding: 46px 24px 0; } .auth-brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: var(--fs-md); letter-spacing: -0.01em; color: var(--ink); } .auth-brand img { width: 26px; height: 26px; } /* ---------- band 2: the content, optically centred ---------- */ .auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; } .auth-col { width: 100%; max-width: 372px; } /* The signature: the page opens with a SENTENCE, not a field label. Left-aligned against the centred brand mark on purpose — full centring turns any form into a login widget. Everything else on the page stays deliberately quiet so this line is the one thing carrying personality. */ .auth-display { font-family: "Bricolage Grotesque", "Inter", system-ui, sans-serif; font-weight: 600; font-size: clamp(1.75rem, 6vw, 2.125rem); line-height: 1.12; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 10px; } .auth-lede { font-size: var(--fs-md); line-height: 1.5; color: var(--muted); margin: 0 0 30px; } .auth-form { display: flex; flex-direction: column; gap: 15px; } /* First / Last name share one row. Equal halves rather than auto-fit so the two inputs line up whatever the labels say. Collapses to stacked on narrow phones — two 150px-wide name fields are worse than two full-width ones. */ .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 380px) { .field-row { grid-template-columns: 1fr; gap: 15px; } } /* Required marker. Same class + look as the app's dialogs (menus-modals.css), which these pages don't load — so it is redeclared here, not shared. Only the required field is marked; the optional one is left bare on purpose (owner, 2026-08-08), which is why the asterisk has to carry the meaning on its own. */ .field-req { color: var(--danger); margin-left: 2px; font-weight: 600; } .auth-submit { width: 100%; justify-content: center; height: 42px; margin-top: 5px; font-size: var(--fs-md); } .auth-alt { margin: 22px 0 0; font-size: var(--fs-sm); color: var(--muted); } .auth-alt a { color: var(--accent-text); font-weight: 600; } .auth-alt a:hover { text-decoration: underline; } /* ---------- band 3: footer, pinned bottom ---------- */ .auth-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 16px; padding: 24px; font-size: var(--fs-sm); color: var(--faint); } .auth-foot a { color: var(--faint); } .auth-foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; } /* ---------- password field + show/hide eye ---------- */ .pw-wrap { position: relative; display: flex; } .pw-wrap .field-input { padding-right: 40px; } .pw-toggle { position: absolute; right: 4px; top: 0; height: 38px; width: 34px; display: inline-flex; align-items: center; justify-content: center; color: var(--faint); border-radius: var(--r-sm); } .pw-toggle:hover { color: var(--ink); } /* Only one of the two eye glyphs shows; [aria-pressed] does the swap so the button's state and its icon can never disagree. */ .pw-toggle .pw-eye-off { display: none; } .pw-toggle[aria-pressed="true"] .pw-eye-on { display: none; } .pw-toggle[aria-pressed="true"] .pw-eye-off { display: inline; } /* ---------- moved from menus-modals.css (2026-08-08) ---------- */ /* NOTE: the original also had `padding: 0`, but it was DEAD — `.link-btn`'s `padding: 4px` sat later in the same file and won at equal specificity, so the app always rendered 4px. Dropped rather than resurrected, so this page matches what users actually saw. */ .auth-forgot { align-self: flex-end; margin-top: -8px; } /* OAuth (Google) sign-in + "or" divider */ .auth-oauth { display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; } .auth-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 42px; font-size: var(--fs-md); } .auth-google-icon { flex: none; } .auth-or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: var(--fs-sm); } .auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* Signup-only consent checkbox (clickwrap). Row layout overrides .field's column. */ .auth-consent { flex-direction: row; align-items: flex-start; gap: 9px; margin-top: 2px; font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); cursor: pointer; } .auth-consent-box { flex: none; margin-top: 2px; width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; } .auth-consent a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; } .auth-consent a:hover { color: var(--ink); } @media (max-width: 420px) { .auth-top { padding-top: 34px; } .auth-main { padding: 30px 22px; } }