/* * Sign-up, one question per screen. * * The markup is a single form carrying every question. The script turns it into * a stepper by setting data-stepper="on"; everything below that depends on the * stepper is scoped to that attribute, so with JavaScript off the page stays a * plain form with all the questions on it and nothing hidden. */ .signup-card { max-width: 32rem; } .signup-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; } .signup-count { margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(240, 234, 214, .55); font-variant-numeric: tabular-nums; } .signup-track { height: 3px; background: rgba(240, 234, 214, .14); border-radius: 2px; overflow: hidden; } .signup-track > span { display: block; height: 100%; width: 0; background: #d9a03f; } @media (prefers-reduced-motion: no-preference) { .signup-track > span { transition: width .32s cubic-bezier(.4, 0, .2, 1); } } .signup-summary { background: #fee2e2; color: #b91c1c; padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; } /* A fieldset would otherwise bring its own border, padding and width rules. */ .signup-step { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; } .signup-q { padding: 0; margin: 0 0 2px; font-size: 22px; line-height: 1.2; font-weight: 600; /* The auth card sits on the dark hero, so this follows .auth-title rather than the light-page defaults the rest of the site uses. */ color: var(--brand-cream, #f0ead6); font-family: var(--font-serif); } .signup-sub { margin: 0 0 4px; font-size: 13.5px; line-height: 1.5; color: rgba(240, 234, 214, .7); } .signup-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 30rem) { .signup-pair { grid-template-columns: 1fr; } } .signup-error { margin: 0; min-height: 1.15rem; font-size: 13px; color: #ffb4b4; } .signup-actions { display: flex; align-items: center; gap: 10px; } .signup-actions .auth-submit-btn { margin: 0; flex: 1; } .signup-back { background: none; border: 0; padding: 10px 6px; font: inherit; font-size: 14px; color: rgba(240, 234, 214, .7); cursor: pointer; } .signup-back:hover { color: var(--brand-cream, #f0ead6); } .signup-back:focus-visible, .signup-form :focus-visible { outline: 2px solid #d9a03f; outline-offset: 2px; } /* --- only once the script has taken over ------------------------------- */ .signup-form[data-stepper="on"] .signup-step { display: none; } .signup-form[data-stepper="on"] .signup-step.is-current { display: flex; } /* One question from the first paint. * * data-stepper is set by the script, which cannot run until the document has * been parsed — so for a moment the page showed every question at once and then * visibly collapsed to one. The class below is put on by a line in the * head, before any of this is drawn, so the first question is the only thing * ever painted. * * The first step stays visible rather than hiding everything: if the script * fails to arrive, a form open on question one is a far better failure than a * card with nothing in it. */ html.js-stepper .signup-form:not([data-stepper="on"]) .signup-step { display: none; } html.js-stepper .signup-form:not([data-stepper="on"]) .signup-step:first-of-type { display: flex; } @media (prefers-reduced-motion: no-preference) { .signup-form[data-stepper="on"] .signup-step.is-current { animation: signup-rise .3s cubic-bezier(.2, .7, .3, 1) backwards; } @keyframes signup-rise { from { opacity: 0; transform: translateY(8px); } } } /* The field that failed, marked as the reader is looking at it. */ .signup-form .input-field.has-error { border-color: #b91c1c; } /* --- dropdowns ------------------------------------------------------------- * * The three pickers are SlimSelect, the same control the author modal and the * profile use — a native