/* ===== Auth pages (login / register) ===== Layered on landing.css, which owns the token contract (--ink, --bg, --accent, --border-strong, --accent-soft, …), theme via [data-mode] on , the .skip-link, and the .lh-* hover helpers reused below. This sheet holds the structural styles the App_Shell handoff expressed as inline `style=""` — moved out of the markup so the pages stay readable and the palette stays tokenised (never hardcoded). Scripts stay external (CSP `script-src 'self'`). */ /* ---- background grove (fixed, inert) ---- */ .auth-grove { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .auth-grove img { position: absolute; height: auto; opacity: var(--bg-grove-op); } .auth-grove .auth-grove-left { left: -9%; bottom: -7%; width: min(42vw, 540px); } .auth-grove .auth-grove-right { right: -6%; bottom: -6%; width: min(46vw, 620px); } /* ---- nav ---- */ .auth-navbar { position: absolute; top: 0; left: 0; right: 0; z-index: 50; padding: 16px 0; } .auth-nav { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 28px); display: flex; align-items: center; gap: 16px; } .auth-brand { display: inline-flex; align-items: center; gap: 12px; } .auth-brand-mark { display: inline-flex; align-items: center; } .auth-brand-mark img { width: 24px; height: 24px; border-radius: 6px; } /* Original brand mark: slate tile in light, cream tile in dark. */ .brand-mark-light{ display: block; } .brand-mark-dark{ display: none; } html[data-mode="dark"] .brand-mark-light{ display: none; } html[data-mode="dark"] .brand-mark-dark{ display: block; } .auth-brand-name { font: 500 21px 'Newsreader', Georgia, serif; letter-spacing: .01em; color: var(--ink); } .auth-nav-spacer { flex: 1; } .auth-nav-link { font: 500 14px 'Inter', sans-serif; color: var(--ink-muted); padding: 8px 12px; border-radius: 999px; transition: .3s var(--ease); } .auth-theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--border-strong); background: color-mix(in oklch, var(--surface) 70%, transparent); color: var(--ink-muted); font-size: 15px; cursor: pointer; transition: .3s var(--ease); } .auth-nav-cta { display: inline-flex; align-items: center; gap: 8px; font: 600 14px 'Inter', sans-serif; color: var(--ink); padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border-strong); transition: .35s var(--ease); background: color-mix(in oklch, var(--surface) 70%, transparent); } /* ---- layout ---- */ .auth-main { padding-top: 80px; } .auth-section { min-height: calc(100vh - 80px); display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 1rem + 4vw, 4.5rem) clamp(20px, 5vw, 40px); } .auth-shell { width: 100%; max-width: 430px; } /* ---- headline ---- */ .auth-head { text-align: center; margin-bottom: 22px; } .auth-eyebrow { display: inline-block; font: 600 12px 'JetBrains Mono', monospace; letter-spacing: .28em; text-transform: uppercase; color: var(--slate); } .auth-title { margin: 12px 0 0; font: 500 clamp(1.9rem, 1.2rem + 2vw, 2.5rem)/1.05 'Newsreader', Georgia, serif; letter-spacing: -.02em; color: var(--ink); } /* ---- card ---- */ .auth-card { background: color-mix(in oklch, var(--ink) 4%, var(--bg)); border: 1px solid var(--border); border-radius: 24px; padding: 7px; box-shadow: var(--shadow-3); } .auth-card-inner { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: clamp(24px, 4vw, 34px); } /* ---- form ---- */ .auth-field { margin-bottom: 16px; } .auth-field--tight { margin-bottom: 10px; } .auth-field--loose { margin-bottom: 22px; } .auth-label { display: block; font: 600 10px 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-subtle); margin-bottom: 7px; } .ls-input { width: 100%; font: 400 15px 'Inter', sans-serif; color: var(--ink); background: var(--bg); border: 1px solid var(--border-strong); border-radius: 12px; padding: 12px 14px; outline: none; transition: .25s var(--ease); } .ls-input::placeholder { color: var(--ink-subtle); } .ls-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* ---- password requirements checklist (reset page) ---- */ .auth-reqs { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 8px; } .auth-req { display: flex; align-items: center; gap: 9px; font: 500 12.5px 'Inter', sans-serif; color: var(--ink-subtle); transition: color .25s var(--ease); } .auth-req-mark { flex: none; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--border-strong); position: relative; transition: border-color .25s var(--ease), background .25s var(--ease); } .auth-req.is-met { color: var(--ink); } .auth-req.is-met .auth-req-mark { border-color: #5f8a74; background: #5f8a74; } /* ---- show/hide password toggle ---- */ .auth-pw { position: relative; } .auth-pw > .ls-input { padding-right: 46px; } .auth-pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; padding: 0; background: transparent; cursor: pointer; color: var(--ink-subtle); border-radius: 8px; transition: color .2s var(--ease), background .2s var(--ease); } .auth-pw-toggle:hover { color: var(--ink); background: color-mix(in oklch, var(--ink) 7%, transparent); } .auth-pw-toggle svg { width: 18px; height: 18px; display: block; } .auth-pw-toggle .eye-off { display: none; } .auth-pw-toggle.is-shown .eye-on { display: none; } .auth-pw-toggle.is-shown .eye-off { display: block; } .auth-forgot-row { text-align: right; margin-bottom: 22px; } .auth-forgot-link { font: 600 12px 'Inter', sans-serif; color: var(--ink-subtle); transition: .3s var(--ease); } .auth-forgot-link:hover { color: var(--accent); } .auth-submit { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: var(--ink); color: var(--bg); font: 600 15px 'Inter', sans-serif; letter-spacing: -.01em; padding: 14px 22px; border-radius: 999px; box-shadow: var(--shadow-2); cursor: pointer; border: none; transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease); } .auth-submit-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: color-mix(in oklch, var(--bg) 20%, transparent); font-size: 14px; } /* ---- inline status ---- */ .ls-status { margin: 14px 0 0; text-align: center; font: 500 13px 'Inter', sans-serif; min-height: 1.2em; color: var(--ink-muted); } .ls-status.err { color: #c2362f; } html[data-mode="dark"] .ls-status.err { color: #e6917f; } /* ---- OAuth (revealed by authpage.js only when configured) ---- */ .auth-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; } .auth-divider-line { flex: 1; height: 1px; background: var(--border); } .auth-divider-text { font: 600 9px 'JetBrains Mono', monospace; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-subtle); } .auth-google { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 600 14px 'Inter', sans-serif; color: var(--ink); background: var(--bg); border: 1px solid var(--border-strong); border-radius: 999px; padding: 12px 20px; cursor: pointer; transition: .3s var(--ease); } /* ---- alt-action line ---- */ .auth-alt { margin: 18px 0 0; text-align: center; font: 400 13px 'Inter', sans-serif; color: var(--ink-subtle); } .auth-alt-link { color: var(--accent); font-weight: 600; } /* ---- footer ---- */ .auth-footer { width: 100%; max-width: 1180px; margin: 0 auto; padding: 46px clamp(20px, 5vw, 40px); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: center; justify-content: center; text-align: center; } .auth-foot-item { font: 600 10px 'JetBrains Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-subtle); } .auth-foot-links { display: inline-flex; gap: 20px; align-items: center; } .auth-foot-link { font: 600 10px 'JetBrains Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-subtle); transition: .3s var(--ease); } button[disabled] { opacity: .6; cursor: default; }