— centres the card and gives it breathing room below the header. */ .auth-page{ width:100%; padding:2.5rem 16px 3.5rem; box-sizing:border-box; font-family:'Inter',system-ui,-apple-system,Segoe UI,Arial,sans-serif; } .auth-wrap{max-width:400px;margin:0 auto;background:#fff;border:1px solid var(--fa-line); border-radius:10px;padding:26px 28px;box-shadow:0 8px 30px rgba(0,0,0,.08); color:var(--fa-ink);} .auth-brand{display:inline-flex;align-items:center;gap:6px;font-size:20px;font-weight:700; color:var(--fa-ink);text-decoration:none;} .auth-brand span{color:var(--fa-accent);} .auth-wrap h1{font-size:19px;margin:12px 0 4px;color:var(--fa-ink);} .auth-sub{color:var(--fa-ink-2);font-size:13px;margin-bottom:18px;line-height:1.45;} .auth-wrap label{display:block;font-size:12px;font-weight:600;color:#456;margin:12px 0 4px;} .auth-wrap input[type=text],.auth-wrap input[type=email],.auth-wrap input[type=password]{ width:100%;box-sizing:border-box;padding:9px 10px;border:1px solid #c7d0d6; border-radius:6px;font-size:14px;font-family:inherit;} .auth-wrap input:focus{outline:2px solid rgba(46,93,120,.25);border-color:var(--fa-accent);} .auth-hint{font-weight:400;color:#8a98a0;} .auth-remember{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:13px; font-weight:500;color:#456;cursor:pointer;} .auth-remember input{width:auto;margin:0;accent-color:var(--fa-accent);cursor:pointer;} .auth-btn{margin-top:18px;width:100%;padding:10px;border:0;border-radius:6px; background:var(--fa-accent);color:#fff;font-size:15px;font-weight:600; cursor:pointer;font-family:inherit;} .auth-btn:hover{background:var(--fa-accent-dk);} .auth-btn[disabled]{background:#9fb3bf;cursor:not-allowed;} .auth-links{margin-top:14px;font-size:13px;display:flex;justify-content:space-between;gap:10px;} .auth-links a{color:var(--fa-accent);text-decoration:none;} .auth-links a:hover{text-decoration:underline;} .auth-err{background:#fdecea;border:1px solid #f3b4ad;color:#922;padding:9px 11px; border-radius:6px;font-size:13px;margin-bottom:6px;line-height:1.45;} .auth-ok{background:#e7f5e6;border:1px solid #8fc78a;color:#216a1c;padding:9px 11px; border-radius:6px;font-size:13px;margin-bottom:6px;line-height:1.45;} .auth-note{background:#fff6e5;border:1px solid #f0d9a8;color:#7a5b16;padding:10px 12px; border-radius:6px;font-size:13px;margin-bottom:10px;line-height:1.5;} .auth-note a{color:#7a5b16;} .auth-foot{margin-top:18px;padding-top:12px;border-top:1px solid var(--fa-line); font-size:12px;color:#8a98a0;text-align:center;} .auth-foot a{color:#8a98a0;text-decoration:none;} .auth-foot a:hover{text-decoration:underline;} /* ── Two-column login (form + register promo) ─────────────────────────────── auth_head($title, true) wraps the promo aside and the form card in .auth-split. The .reg-cta card itself is styled by the shared register_cta.css. */ .auth-split{ display:flex; align-items:stretch; gap:22px; max-width:840px; margin:0 auto; box-sizing:border-box; } .auth-split .auth-wrap{ margin:0; flex:0 0 380px; max-width:380px; } .auth-split-promo{ flex:1 1 auto; min-width:0; display:flex; } .auth-split-promo .reg-cta{ width:100%; } @media (max-width:780px){ .auth-split{ flex-direction:column; max-width:400px; } .auth-split .auth-wrap{ flex-basis:auto; max-width:100%; } .auth-split-promo{ order:2; } /* form first, promo below, on phones */ } /* ── Register page: expanded benefits + reveal-on-check fields ───────────── */ /* Expanded "why register" list at the top of the register form. */ .reg-why{ margin:0 0 20px; padding:14px 16px; border:1px solid var(--fa-line); border-radius:8px; background:#f7fafb; } .reg-why h2{ margin:0 0 10px; font-size:13px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--fa-accent-dk); } .reg-why ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; } .reg-why li{ display:flex; align-items:flex-start; gap:10px; } .reg-why .reg-why-tick{ flex:0 0 auto; width:18px; height:18px; margin-top:1px; border-radius:50%; background:var(--fa-accent); color:#fff; font-size:11px; font-weight:700; line-height:18px; text-align:center; } .reg-why b{ display:block; font-size:13px; color:var(--fa-ink); } .reg-why span{ font-size:12.5px; color:var(--fa-ink-2); line-height:1.45; } /* Grouped checkbox options (keep-updated / open-to-collaborate / roles). */ .reg-opts{ margin:16px 0 4px; padding-top:14px; border-top:1px solid var(--fa-line); } .reg-opts-legend{ font-size:12px; font-weight:700; color:#456; letter-spacing:.02em; margin-bottom:2px; } .reg-check{ display:flex; align-items:flex-start; gap:9px; margin:12px 0 0; font-size:13px; font-weight:500; color:#3a4a52; cursor:pointer; line-height:1.4; } .reg-check input{ width:auto; margin:2px 0 0; accent-color:var(--fa-accent); cursor:pointer; flex:0 0 auto; } .reg-check .reg-check-sub{ display:block; font-weight:400; font-size:12px; color:var(--fa-ink-2); margin-top:1px; } /* A follow-up field that only appears once its checkbox is ticked. */ .reg-reveal{ margin:8px 0 4px 27px; display:none; } .reg-reveal.is-open{ display:block; } .reg-reveal label{ margin-top:6px; }