/* Task Tracker — auth & account pages (login, signup, forgot, reset, verify, and the settings shell). Same "Cadence" tokens + fonts as the main app, with a split value-prop layout for login/signup and a centered card for the rest. Theme follows set by ui-prefs.js. */ @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/hanken-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/jetbrains-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --font: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --bg: oklch(0.985 0.003 270); --surface: #ffffff; --surface-2: oklch(0.975 0.004 270); --surface-3: oklch(0.962 0.005 270); --border: oklch(0.922 0.006 270); --border-2: oklch(0.87 0.008 270); --text: oklch(0.28 0.014 274); --text-2: oklch(0.50 0.013 274); --text-3: oklch(0.64 0.011 274); --accent: oklch(0.575 0.185 277); --accent-2: oklch(0.52 0.19 277); --accent-soft: oklch(0.955 0.028 277); --on-accent: #ffffff; --danger: oklch(0.58 0.17 25); --ok: oklch(0.62 0.13 152); --shadow-lg: 0 18px 50px rgba(20,20,45,.16), 0 4px 14px rgba(20,20,45,.08); } html[data-theme="dark"] { --bg: oklch(0.195 0.012 274); --surface: oklch(0.235 0.013 274); --surface-2: oklch(0.265 0.014 274); --surface-3: oklch(0.30 0.016 274); --border: oklch(0.315 0.014 274); --border-2: oklch(0.40 0.018 274); --text: oklch(0.955 0.004 274); --text-2: oklch(0.74 0.012 274); --text-3: oklch(0.60 0.012 274); --accent: oklch(0.70 0.155 277); --accent-2: oklch(0.76 0.14 277); --accent-soft: oklch(0.33 0.07 277); --on-accent: oklch(0.16 0.02 277); --ok: oklch(0.72 0.13 152); --shadow-lg: 0 18px 50px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.35); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; -webkit-font-smoothing: antialiased; } a { color: var(--accent-2); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- Split auth layout (login / signup) ---------- */ .auth { display: flex; min-height: 100vh; } .auth-aside { flex: 1; background: var(--accent); color: var(--on-accent); padding: 48px; display: flex; flex-direction: column; position: relative; overflow: hidden; } html[data-theme="dark"] .auth-aside { background: linear-gradient(160deg, var(--accent-soft), var(--surface)); color: var(--text); } .auth-brand { display: flex; align-items: center; gap: 11px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; } .auth-brand .brand-logo { width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.18); display: grid; place-items: center; flex: 0 0 auto; } html[data-theme="dark"] .auth-brand .brand-logo { background: var(--accent); color: var(--on-accent); } .auth-aside-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 400px; } .auth-aside-mid h2 { font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1.12; } .auth-aside-mid p { font-size: 15.5px; line-height: 1.6; margin-top: 16px; opacity: .85; } .auth-feats { list-style: none; margin-top: 28px; display: flex; flex-direction: column; gap: 14px; } .auth-feats li { display: flex; align-items: center; gap: 11px; font-size: 14.5px; font-weight: 500; } .auth-feats .ck { width: 22px; height: 22px; border-radius: 7px; background: rgba(255,255,255,.2); display: grid; place-items: center; flex: 0 0 auto; } html[data-theme="dark"] .auth-feats .ck { background: var(--accent); color: var(--on-accent); } .auth-trust { font-size: 12.5px; opacity: .65; } .auth-panel { width: 480px; flex: 0 0 480px; background: var(--bg); display: flex; flex-direction: column; justify-content: center; padding: 48px 56px; } .auth-card { width: 100%; max-width: 360px; margin: 0 auto; } .auth-tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 26px; } .auth-tabs a { flex: 1; text-align: center; height: 38px; line-height: 38px; border-radius: 7px; font-size: 14px; font-weight: 600; color: var(--text-2); text-decoration: none; transition: background .12s, color .12s; } .auth-tabs a.is-on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(20,20,40,.06); } html[data-theme="dark"] .auth-tabs a.is-on { background: var(--surface-3); } .auth-card h1 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; } .auth-sub { font-size: 13.5px; color: var(--text-2); margin-top: 5px; margin-bottom: 22px; } .auth-form { display: flex; flex-direction: column; gap: 15px; } .field { display: flex; flex-direction: column; gap: 7px; } .field label { font-size: 12.5px; font-weight: 600; color: var(--text-2); } .field label .opt { font-weight: 500; color: var(--text-3); } .hint-sm { font-size: 11.5px; color: var(--text-3); } input[type=email], input[type=password], input[type=text] { width: 100%; height: 42px; padding: 0 13px; font-size: 14px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-md); outline: none; transition: border-color .12s, box-shadow .12s, background .12s; font-family: inherit; } input::placeholder { color: var(--text-3); } input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface); } .auth-btn, button[type=submit] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; margin-top: 4px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 15px; font-family: inherit; border: none; border-radius: var(--r-md); cursor: pointer; box-shadow: 0 2px 10px -3px var(--accent); transition: background .12s; } .auth-btn:hover, button[type=submit]:hover { background: var(--accent-2); } .auth-or { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--text-3); font-size: 12px; } .auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--border); } .auth-switch { font-size: 13px; color: var(--text-2); text-align: center; } .auth-link { font-weight: 600; color: var(--accent-2); text-decoration: none; } .auth-link:hover { text-decoration: underline; } .auth-error { background: color-mix(in oklch, var(--danger) 10%, var(--surface)); border: 1px solid color-mix(in oklch, var(--danger) 30%, var(--border)); color: var(--danger); font-size: 13px; padding: 9px 12px; border-radius: var(--r-md); margin-bottom: 16px; } @media (max-width: 820px) { .auth-aside { display: none; } .auth-panel { width: 100%; flex: 1; } } /* ---------- Centered card (forgot / reset / verify / settings shell) ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 28px; width: 100%; max-width: 460px; box-shadow: var(--shadow-lg); } body.auth-centered { display: flex; align-items: center; justify-content: center; padding: 24px; } .card h1 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 4px; color: var(--text); } .card .sub { color: var(--text-2); font-size: 13.5px; margin-bottom: 20px; } .card label { display: block; font-size: 12.5px; color: var(--text-2); margin-bottom: 6px; font-weight: 600; } .card input[type=email], .card input[type=password], .card input[type=text] { margin-bottom: 14px; } .card button { width: 100%; height: 44px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 14px; font-family: inherit; border: none; border-radius: var(--r-md); cursor: pointer; transition: background .12s; } .card button:hover { background: var(--accent-2); } .error { background: color-mix(in oklch, var(--danger) 10%, var(--surface)); border: 1px solid color-mix(in oklch, var(--danger) 30%, var(--border)); color: var(--danger); font-size: 13px; padding: 9px 12px; border-radius: var(--r-md); margin-bottom: 14px; } .ok { background: color-mix(in oklch, var(--ok) 12%, var(--surface)); border: 1px solid color-mix(in oklch, var(--ok) 30%, var(--border)); color: var(--ok); font-size: 13px; padding: 9px 12px; border-radius: var(--r-md); margin-bottom: 14px; } .hint { font-size: 12.5px; color: var(--text-3); margin-top: 12px; text-align: center; } .hint a, a.link { color: var(--accent-2); text-decoration: none; font-weight: 600; }