/* ========================================================================== page-auth.css — sign in, sign up, forgot and reset ========================================================================== These four pages sit directly in the path from "interested" to "signed up", and every one of them carried its own 700-line stylesheet in a palette that matched nothing. Going from a clean light homepage to a differently-styled signup form is exactly where people stop. Same tokens as page-home.css, restated here rather than imported, because an auth page that fails to load its stylesheet must still be usable and should not depend on a second file arriving. The layout is a single centred card. No hero, no marketing, no testimonials beside the form: somebody on this page has already decided, and everything next to the fields is something else to read before they finish. ========================================================================== */ /* The scrollbar lives on , not , so clipping the body alone did nothing — the phantom 30px sideways scroll survived. This sheet only loads on the auth pages, so scoping it to the document element is safe here. */ html { overflow-x: hidden; } .auth { --a-bg: #F7F8F7; --a-card: #FFFFFF; --a-line: #E3E6E4; --a-line-2: #CFD4D1; --a-ink: #12171A; --a-ink-2: #4E585E; --a-ink-3: #7C868C; --a-accent: #2F6FDB; --a-accent-2:#2563C9; --a-bad: #B3261E; --a-bad-w: #FCEEED; --a-good: #2F6FDB; --a-good-w: #EDF3FF; margin: 0; min-height: 100vh; background: var(--a-bg); color: var(--a-ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; /* Belt and braces. Measured on a 390px phone, every element sits inside the viewport and yet the document reported a 30px scroll width — enough to rubber-band sideways on a real handset. Nothing here is ever meant to extend past the edge, so clipping it costs nothing and removes the phantom. */ overflow-x: hidden; } .auth *, .auth *::before, .auth *::after { box-sizing: border-box; } /* -------------------------------------------------------------------------- Frame -------------------------------------------------------------------------- */ .au-top { border-bottom: 1px solid var(--a-line); background: #fff; /* Full width, so the rule spans the window like every other header — but the CONTENT starts where a 1080px container would put it, matching the policy pages, the homepage and pricing. Measured against the real legal bar rather than derived from its CSS: its content starts at max(32px, (100% - 1080px) / 2), because that container's padding sits inside its max-width. */ padding: 22px max(32px, calc((100% - 1080px) / 2)); } .au-brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; color: var(--a-ink); text-decoration: none; } .au-brand-mark { /* favicon.png is 348x348 with the disc touching the left and right edges but 12px of transparency top and bottom — which showed as two dark lines on a dark bar. Drawn as a circular badge with its own white face, the strip is filled and it reads as deliberate on any background. */ display: block; width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; background: #FFFFFF; object-fit: cover; } .au-main { flex: 1 1 auto; display: flex; align-items: flex-start; justify-content: center; padding: clamp(28px, 6vw, 64px) 20px; } .au-card { width: 100%; max-width: 440px; padding: clamp(26px, 5vw, 38px); border: 1px solid var(--a-line); border-radius: 14px; background: var(--a-card); box-shadow: 0 1px 2px rgba(18, 23, 26, .04), 0 10px 28px rgba(18, 23, 26, .05); } .au-card.is-wide { max-width: 520px; } .au-card h1 { margin: 0 0 8px; font-size: clamp(23px, 3vw, 28px); font-weight: 700; letter-spacing: -.03em; } .au-card .au-sub { margin: 0 0 26px; font-size: 14.5px; line-height: 1.6; color: var(--a-ink-2); } /* -------------------------------------------------------------------------- Fields Rules target the ELEMENTS rather than the old class names, so the original form markup can be dropped in untouched. Its field names, CSRF token and validation all still work; only the styling around it changed. -------------------------------------------------------------------------- */ .au-card form { display: block; } .au-card label { display: block; margin-bottom: 7px; font-size: 13.5px; font-weight: 600; color: var(--a-ink-2); } .au-card input[type="text"], .au-card input[type="email"], .au-card input[type="password"], .au-card input[type="tel"], .au-card select, .au-card textarea { width: 100%; /* 16px minimum: anything smaller makes iOS Safari zoom the page on focus, which throws the layout and feels broken */ font-size: 16px; font-family: inherit; min-height: 46px; padding: 12px 14px; margin-bottom: 18px; border: 1px solid var(--a-line-2); border-radius: 9px; background: #fff; color: var(--a-ink); } .au-card input:focus, .au-card select:focus, .au-card textarea:focus { outline: none; border-color: var(--a-accent); box-shadow: 0 0 0 3px rgba(75, 144, 255, .18); } .au-card input::placeholder { color: var(--a-ink-3); } /* radio and checkbox rows sit inline with their label */ .au-card input[type="checkbox"], .au-card input[type="radio"] { width: auto; min-height: 0; margin: 0 8px 0 0; accent-color: var(--a-accent); } .au-check { display: flex; align-items: center; min-height: 44px; margin-bottom: 14px; font-size: 14px; color: var(--a-ink-2); } .au-check label { margin: 0; font-weight: 500; } .au-card button[type="submit"], .au-card .au-submit { width: 100%; min-height: 48px; padding: 13px 20px; border: 0; border-radius: 9px; background: var(--a-accent); color: #fff; font-family: inherit; font-size: 15.5px; font-weight: 650; cursor: pointer; } .au-card button[type="submit"]:hover { background: var(--a-accent-2); } .au-card button[type="submit"]:disabled { opacity: .55; cursor: not-allowed; } /* -------------------------------------------------------------------------- Messages — the originals emit .alert with a type suffix, so both are styled -------------------------------------------------------------------------- */ .au-card .alert, .au-msg { margin-bottom: 20px; padding: 12px 14px; border-radius: 9px; font-size: 14px; line-height: 1.55; } .au-card .alert-danger, .au-card .alert-error, .au-msg.is-bad { background: var(--a-bad-w); color: var(--a-bad); } .au-card .alert-success, .au-card .alert-info, .au-msg.is-good { background: var(--a-good-w); color: var(--a-good); } /* -------------------------------------------------------------------------- THE FORMS' OWN CLASS NAMES These are styled rather than stripped. My first attempt removed the classes and let element selectors do the work — which quietly killed the password requirement list, the captcha status and the inline errors, because the pages' OWN JavaScript toggles those class names to show state. Removing a class is not a cosmetic change when a script is reading it. -------------------------------------------------------------------------- */ .auth .form-group { margin-bottom: 0; } .auth .form-label { display: block; margin-bottom: 7px; font-size: 13.5px; font-weight: 600; color: var(--a-ink-2); } /* register lays its fields out two-up on a wide card */ .auth .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 16px; } .auth .full-width { grid-column: 1 / -1; } /* an icon sits inside the field on some inputs */ .auth .input-icon { position: relative; } .auth .input-icon > i { position: absolute; left: 14px; top: 15px; font-size: 14px; color: var(--a-ink-3); pointer-events: none; } .auth .input-icon > .form-control { padding-left: 40px; } /* password rules — the script adds a state class per line as you type */ .auth .password-requirements { margin: 0 0 18px; padding: 14px 16px; border-radius: 9px; background: var(--a-bg); list-style: none; } .auth .requirement { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; color: var(--a-ink-3); } .auth .requirement i { font-size: 10px; } .auth .requirement.valid, .auth .requirement.met, .auth .requirement.is-valid { color: var(--a-good); } .auth .requirement.invalid { color: var(--a-ink-3); } .auth .error-message { display: block; margin: -12px 0 16px; font-size: 13px; color: var(--a-bad); } /* captcha */ .auth .captcha-section, .auth .captcha-container { margin-bottom: 18px; } .auth .captcha-loading, .auth .captcha-notice { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--a-ink-3); } .auth .captcha-loading-spinner { width: 14px; height: 14px; border: 2px solid var(--a-line-2); border-top-color: var(--a-accent); border-radius: 50%; animation: au-spin .8s linear infinite; } @keyframes au-spin { to { transform: rotate(360deg); } } /* checkboxes */ .auth .form-check { display: flex; align-items: center; gap: 9px; min-height: 44px; margin-bottom: 12px; } .auth .form-check-input { margin: 0; } .auth .form-check-label { margin: 0; font-size: 14px; font-weight: 500; color: var(--a-ink-2); } .auth .checkbox-custom { display: inline-flex; align-items: center; } .auth .terms-text { margin: 4px 0 18px; font-size: 12.5px; line-height: 1.6; color: var(--a-ink-3); } .auth .terms-text a { color: var(--a-ink-2); } /* the form's own buttons and links */ .auth .submit-container { margin-bottom: 4px; } .auth .btn-primary { width: 100%; min-height: 48px; padding: 13px 20px; border: 0; border-radius: 9px; background: var(--a-accent); color: #fff; font-family: inherit; font-size: 15.5px; font-weight: 650; cursor: pointer; } .auth .btn-primary:hover { background: var(--a-accent-2); } .auth .btn-outline, .auth .google-button-container a { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; padding: 12px 20px; border: 1px solid var(--a-line-2); border-radius: 9px; background: #fff; color: var(--a-ink); font-size: 15px; font-weight: 600; text-decoration: none; } .auth .btn-outline:hover { background: var(--a-bg); } .auth .btn-outline img { width: 18px; height: 18px; } .auth .google-button-container { margin-top: 18px; } .auth .divider { display: flex; align-items: center; gap: 14px; margin: 20px 0; font-size: 12.5px; color: var(--a-ink-3); } .auth .divider::before, .auth .divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--a-line); } .auth .login-text, .auth .links-container { margin: 18px 0 0; font-size: 14px; color: var(--a-ink-2); text-align: center; } .auth .links-container { display: flex; justify-content: center; gap: 6px 18px; flex-wrap: wrap; } .auth .login-text a, .auth .links-container a, .auth .link { display: inline-flex; align-items: center; min-height: 44px; color: var(--a-accent); font-weight: 600; text-decoration: none; } .auth .login-text a:hover, .auth .links-container a:hover, .auth .link:hover { text-decoration: underline; } /* -------------------------------------------------------------------------- Divider, third-party sign-in, footer links -------------------------------------------------------------------------- */ .au-or { display: flex; align-items: center; gap: 14px; margin: 22px 0; font-size: 12.5px; color: var(--a-ink-3); } .au-or::before, .au-or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--a-line); } .au-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; padding: 12px 20px; border: 1px solid var(--a-line-2); border-radius: 9px; background: #fff; color: var(--a-ink); font-size: 15px; font-weight: 600; text-decoration: none; } .au-google:hover { background: var(--a-bg); } .au-alt { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--a-line); font-size: 14px; color: var(--a-ink-2); text-align: center; } .au-alt a { color: var(--a-accent); font-weight: 600; text-decoration: none; } .au-alt a:hover { text-decoration: underline; } .au-links { display: flex; justify-content: center; gap: 6px 18px; flex-wrap: wrap; margin-top: 6px; } .au-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13.5px; color: var(--a-ink-2); text-decoration: none; } .au-links a:hover { color: var(--a-accent); } .au-fine { margin: 18px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--a-ink-3); text-align: center; } .au-fine a { color: var(--a-ink-2); } .au-foot { padding: 22px 24px 30px; text-align: center; font-size: 12.5px; color: var(--a-ink-3); } .au-foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--a-ink-2); text-decoration: none; } .au-foot a:hover { color: var(--a-accent); } /* -------------------------------------------------------------------------- RESPONSIVE — KEEP LAST A plain rule written after a media query beats it at equal specificity. -------------------------------------------------------------------------- */ @media (max-width: 520px) { .au-main { padding: 18px 14px 34px; align-items: stretch; } .au-card { max-width: none; padding: 24px 20px; border-radius: 12px; } .au-top { padding: 14px 18px; } /* same as the legal bar on a phone */ } /* -------------------------------------------------------------------------- THE BLUE (Aug 2026) Two shades, on purpose. #4B90FF is the exact blue sampled out of favicon.png, and it is used only on the brand mark, where it is a logo rather than something you read. Everything that carries text — buttons, links, the accordion marker — uses #2F6FDB. The logo blue against white is 3.12:1, and normal-size text needs 4.5:1 to be legible for someone with ordinary eyesight, let alone anyone with a mild sight impairment. The deeper shade is 4.75:1 both ways: dark enough to read as a link on white, light enough that white text sits on it. Same family, so the brand still reads as one colour. -------------------------------------------------------------------------- */ .brand-blue { color: #4B90FF; } /* reCAPTCHA retry. A button rather than 'please refresh the page', because refreshing loses everything already typed into the form. */ .captcha-retry { padding: 14px; border: 1px solid var(--a-line, #E3E6E4); border-radius: 10px; background: var(--a-tint, #F4F6F5); text-align: center; } .captcha-retry p { margin: 0 0 10px; font-size: 13.5px; color: var(--a-ink-2, #4E585E); } .captcha-retry button { min-height: 40px; padding: 0 18px; border: 1px solid var(--a-line, #E3E6E4); border-radius: 8px; background: #FFFFFF; font: inherit; font-weight: 600; color: var(--a-ink, #12171A); cursor: pointer; } /* Two-factor setup and recovery codes. */ .au-card.is-wide { max-width: 520px; } .tf-qr { display: grid; place-items: center; margin: 4px 0 18px; padding: 16px; border: 1px solid var(--a-line); border-radius: 12px; background: #FFFFFF; } .tf-manual { margin: 0 0 20px; font-size: 13px; line-height: 1.7; color: var(--a-ink-2); } .tf-manual code { display: inline-block; margin-top: 4px; padding: 6px 10px; border-radius: 6px; background: var(--a-tint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; letter-spacing: .06em; color: var(--a-ink); word-break: break-all; } .tf-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 0 22px; padding: 18px; border: 1px solid var(--a-line); border-radius: 12px; background: var(--a-tint); list-style: none; } .tf-codes li { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; letter-spacing: .05em; color: var(--a-ink); } .ca-error { margin: 0 0 18px; padding: 12px 14px; border: 1px solid rgba(200, 60, 60, .34); border-left: 4px solid #c83c3c; border-radius: 10px; background: #FDF3F3; font-size: 14px; line-height: 1.55; color: var(--a-ink); } @media (max-width: 480px) { .tf-codes { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- After registering (Aug 2026) The whole card becomes the confirmation, rather than a green line above a form somebody has already filled in and does not need again. -------------------------------------------------------------------------- */ .reg-done { text-align: center; padding: 8px 0 4px; } .reg-done-mark { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 18px; border-radius: 50%; background: var(--a-good-w, #EDF3FF); color: var(--a-good, #2F6FDB); font-size: 24px; line-height: 1; } .reg-done h1 { margin: 0 0 10px; } .reg-done .au-sub { margin: 0 auto 18px; max-width: 42ch; } .reg-done .au-fine { margin: 0 auto; max-width: 42ch; }