/* ============================================================================= auth.css · THE auth + onboarding surface (2026-08-07) ============================================================================= ONE stylesheet for every credential and terminal-state screen on the public site: /signin, /onboarding/create-account, /onboarding/payment-summary, the eight state pages (cancelled, failed, summary-error, success, the three email-confirmation screens, onboarding-incomplete) and /change-password. REPLACES ----------------------------------------------------------------------- static/css/onboarding.css (3,198 lines, 7 consumers) static/css/quantum_signin.css (1,752 lines, 1 consumer) Both are deleted. Four documented defects died with them, and none of them are re-created here — each is called out at the rule that would have been the place to re-introduce it: 1. `header:not(.login-header) { display: none }` — killed the SHARED site header on all seven onboarding pages. Nothing in this file selects a bare element outside the reset-free zone below; every selector here is class-scoped. 2. `.login-wrapper { height: 100vh }` on a that already carries site-chrome.css's 62px `has-site-header` pad — 100vh + 62px = a permanent phantom scrollbar. `.auth-shell` subtracts the header. 3. `font-family: 'Inter' !important` on `body` AND `body *` — which is why the shared header rendered in Inter on these seven pages and General Sans on the other nine. Amended 2026-08-21: this file now contains exactly ONE `!important` block, the autofill override in §4, which cannot be written any other way because it is out-ranking the UA's own important declaration. Nothing else uses it. THIS FILE SETS NO FONT ON body. 4. Decorative motion layers behind a credential form (.aurora-container, .quantum-bg, .holographic-orb, .particle-field, .cyber-lines, plus signin's particle field). Deleted at the template, not hidden here — there is no rule in this file for any of those class names. LOAD ORDER ----------------------------------------------------------------------- fonts.css -> site-tokens.css -> site-base.css -> site-chrome.css -> THIS public_base.html renders `additional_head` after `site_chrome_css`, so this file is last and wins on source order without needing specificity tricks. CONTRACT ----------------------------------------------------------------------- Every colour, radius, duration, easing and type size below comes from site-tokens.css. THERE IS NOT ONE HEX IN THIS FILE. 2026-08-07 · P2. The four private TONE PIGMENTS this file used to declare (--tone-success #34d399 / --tone-warning #fbbf24 / --tone-error #f87171 / --tone-neutral #8fa3c4) are GONE. They existed because the contract could only say "accent" and "not accent"; it can now say five things, so this surface reads THE SEMANTIC COLOUR SYSTEM instead of carrying a fifth private palette next to guides' and how-to-access's. The mapping is one-to-one and is the whole of the change: old --tone-success -> --sem-master (ladder 3 · it worked) old --tone-warning -> --sem-caution (interrupt · decide before acting) old --tone-error -> --sem-halt (interrupt · it did not work) old --tone-neutral -> --sem-entry (ladder 1 · arriving, waiting) WHY THIS SURFACE. It is the only place on the public site with real OUTCOME states — a payment either went through or it did not — so it is the one surface where the two INTERRUPT hues are earned rather than decorative. COLOUR IS NEVER THE ONLY SIGNAL (WCAG 1.4.1). --sem-entry (#00f2fe) measures 1.004:1 against --ink-2 over the page black: same brightness, separated by hue alone. So every semantic use below ships a second, non-colour channel, and the channels are tokenised so a call site cannot quietly drop one: 1. THE WORD .state-page__status is a required element, not an option. It defaults per tone and every state page overrides it with its own literal outcome word ("Payment declined", "Confirmed", "Payment cancelled", "Link expired"). A reader who cannot see hue reads the outcome. 2. THE GLYPH the status chip's icon is chosen by TONE, never by the page, so the interrupt glyphs stay shape-distinct (triangle / x-circle) from the ladder's round ones even when the page picks a topical hero glyph. 3. EDGE WEIGHT --sem-rule-ladder (3px) vs --sem-rule-interrupt (5px) on the card's top rule, and 1px vs 2px on the chip and glyph borders. A rule nearly twice as thick reads as different before hue is processed at all. 4. FILL vs RING the onboarding ladder's completed rung is a FILLED disc carrying a tick; an active rung is a RING carrying a numeral. Shape and count, not hue. Every inline link here is still underlined; every input state still carries a ring + border-weight change on focus and an icon + text on error. ============================================================================= */ /* ============================================================================= 0 · LOCAL VOCABULARY ----------------------------------------------------------------------------- There is none any more. The old block declared --auth-on-accent (a mirror of site-tokens' file-private --_ink-on-accent) and the four tone pigments. The semantic block in site-tokens.css publishes --sem-ink-on-fill for exactly the first job and the five roles for the second, so both are read directly now. The only local custom properties left in this file are the --st-* level group on .state-page and the --rung-* group on the onboarding ladder, and both are PARAMETERS (they change per tone / per step), not pigments. ============================================================================= */ /* ============================================================================= 1 · SHELL ----------------------------------------------------------------------------- The centred stage every auth screen sits in. `min-height` SUBTRACTS the header pad site-chrome.css writes onto `body.has-site-header` (62px, 56px under 620px). The old sheet used a flat 100vh here and produced a scrollbar on a page with nothing to scroll — see defect 2 in the header docblock. `svh` with a `vh` fallback: on mobile Safari `vh` is the LARGE viewport, so the toolbar overlaps the card's bottom edge on first paint. ============================================================================= */ .auth-shell { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 62px); min-height: calc(100svh - 62px); padding: clamp(24px, 5vh, 64px) var(--space-5); /* 2026-08-20 · RAISED ABOVE THE ATMOSPHERE. §1c renders a `position: fixed` backdrop at z-index 0. A positioned z-index:0 element paints in CSS 2.1 Appendix E step 8; in-flow non-positioned blocks paint in step 4 — and `.site-main` is exactly that (site-base.css:136, `display: block`, no positioning). Left alone the backdrop paints OVER this card. individual.css solves the same problem the same way at :272. `position: relative` + z-index creates a STACKING CONTEXT but NOT a containing block for `position: fixed`, so `.site-header` is untouched. That distinction is the whole reason this is safe here and a `transform` would not be. --z-content is 70, well under --z-header's 600. */ position: relative; z-index: var(--z-content); } @media (max-width: 620px) { .auth-shell { min-height: calc(100vh - 56px); min-height: calc(100svh - 56px); padding-inline: var(--space-4); } } /* ============================================================================= 1b · SPLIT STAGE (2026-08-20) ----------------------------------------------------------------------------- The two FORM surfaces only: /signin and /onboarding/create-account. The other eleven consumers of this file stay a single centred column, deliberately — a state page is one decision surface, and a marketing column beside "your card was declined" is the same failure §7 already forbids with tinted cards. change_password renders for a SIGNED-IN user (acquisition copy is tone-deaf there) and payment_summary's right column already IS a summary. NO transform / filter / perspective / will-change on ANY of these wrappers. `.site-header` is `position: fixed` and resolves against its nearest transformed ancestor rather than the viewport (public_base.html:57-59), so anything here that establishes a containing block silently detaches the header from the top of the window. A grid does not; that is why this is a grid and not something cleverer. 1024, NOT 900. At 900 the aside gets 900 - 48 (shell padding) - 520 (the --wide card) - 40 (minimum gap) = 292px, which is an offcut rather than a column. At 1024 it is 408px. 1023/1024 is also already this repo's breakpoint (individual.css:1140). ============================================================================= */ .auth-split { width: 100%; max-width: 460px; /* below 1024 this IS the card, centred as before */ margin-inline: auto; } .auth-split--wide { max-width: 520px; } @media (min-width: 1024px) { .auth-split { /* The card track. An explicit modifier rather than :has(.auth-card--wide): the fallback for a browser without :has() would be a 520px card in a 460px track, and two class names cost less than that support question. */ --auth-col: 460px; display: grid; grid-template-columns: minmax(320px, 1fr) var(--auth-col); align-items: center; gap: clamp(48px, 6vw, 96px); max-width: 1120px; } .auth-split--wide { --auth-col: 520px; max-width: 1180px; } /* Grid children default to min-content; without this a long unbroken string in the card can push the track wider than its declared width. */ .auth-stage { min-width: 0; } .auth-stage .auth-card { max-width: none; } } /* ----------------------------------------------------------------------------- THE ASIDE Two variants, because the two pages need opposite collapse behaviour. `.auth-aside--decor` (signin) is purely decorative and DISAPPEARS below 1024. Nothing is lost: the wordmark is already in `.sh-brand__name` in the fixed header, the positioning line is already the meta description, and the trust cues are already the wallet button label and `.auth-hint--center`. Restacking would push the form below a screenful of restated marketing on exactly the viewport where the fold is tightest. Bare `.auth-aside` (onboarding) STAYS IN FLOW at every width, because it carries the progress ladder — and `aria-current="step"` is the only thing telling a screen-reader user where they are in the funnel. It is the one element here that is not duplicated elsewhere on the page. Only its decorative children hide. ----------------------------------------------------------------------------- */ .auth-aside { display: flex; flex-direction: column; align-items: center; /* stacked: the ladder centres as it does today */ gap: var(--space-5); width: 100%; } .auth-aside--decor { display: none; } .auth-aside__glass, .auth-aside__lockup, .auth-aside__brand, .auth-aside__line, .auth-aside__proof { display: none; } @media (min-width: 1024px) { .auth-aside { align-items: flex-start; max-width: 460px; } .auth-aside--decor { display: flex; } .auth-aside__glass { display: block; } .auth-aside__lockup { display: block; } .auth-aside__brand { display: block; } .auth-aside__line { display: block; } .auth-aside__proof { display: flex; } } /* ----------------------------------------------------------------------------- THE MARK IN THE RAIL (2026-08-21) Two layers of the same object: an oversized ghost bleeding off the panel edge for atmosphere, and a small crisp one in the lockup. One object at two scales reads as depth; a single centred logo reads as a placeholder. 2026-08-21 (b) · SWAPPED FROM THE AUTHORED VECTOR TO THE BAKED RENDER. static/landing/mark-baked/pose-front-900.webp is the offline-baked 3D glass mark -- the same render the site header's brand mark and the favicon come from -- and it has real refraction, thickness and specular depth that a flat SVG cannot fake. Kaust's call, and he is right: a vector of this mark reads as an app icon, the render reads as glass. THE TRADE, STATED: the render cannot be re-tinted per level, so the mark no longer walks cyan -> violet -> mint through the funnel. That cue is not lost; the onboarding ladder beside it still carries the level on every rung, which is where it was load-bearing. What went was decoration, not signal. THE GHOST IS A GLOW, NOT A SECOND MARK. It was a huge low-opacity copy of the vector, which worked while the mark was flat: crisp shapes at 20% read as a watermark. The baked render carries its own soft bloom, so blown up and masked it turned into a grey rectangular haze that read as a rendering fault behind the copy. It is now a pure radial gradient -- the same atmosphere, none of the silhouette, and one fewer image. THE LOCKUP IS SIZED TO THE GLASS, NOT TO THE CANVAS. Measured off the asset's alpha channel: the render is 900x900 but the glass occupies only x 103-797, y 189-709, i.e. 695x521 centred in a lot of transparent padding. Sized naively, 184px of is 145px of visible glass sitting 21px inboard of the text below it, which is what made the lockup look indented. So the canvas is sized so the GLASS is 184px (184 * 900/695 = 238) and the padding is pulled back with negative margins derived from the same measurement (103/900 * 238 = 27 horizontally, 189/900 * 238 = 50 vertically). Re-measure these four numbers if the asset is ever re-baked. The ghost is `position: absolute` inside the aside, so `.auth-aside` takes `position: relative` below. Relative positioning is safe here — it is `transform`/`filter`/`will-change` that would make an ancestor a containing block and tear the fixed .site-header off the viewport, and there are none. The mask is doing real work: without it the ghost's hard glass edges cut across the trust list and the copy has to compete with a logo. Faded to nothing before it reaches the text, it reads as light in the room instead. ----------------------------------------------------------------------------- */ .auth-aside { position: relative; } .auth-aside__glass { position: absolute; z-index: -1; /* inset rather than a centring transform: with no transform anywhere on this surface there is nothing that could become a containing block for the fixed .site-header, so the safety note above needs no exception. */ inset: -10% -34% auto -34%; height: 82%; pointer-events: none; background: radial-gradient(ellipse 48% 42% at 44% 36%, var(--sem-entry-glow), transparent 70%); opacity: .5; } /* The crisp one. Sized off the type scale so it sits in the lockup rather than floating: roughly two lines of the display face. */ .auth-aside__lockup { display: block; margin-bottom: var(--space-4); } /* 238px of canvas = 184px of actual glass; the negative margins reclaim the transparent padding so the glass's left edge lines up with the wordmark. */ .auth-aside__lockup .mk { display: block; width: 238px; height: auto; margin: -50px -27px; } .auth-aside__brand { margin: 0; font-family: var(--font-display); font-size: var(--type-d3); font-weight: 600; /* inside Clash Display's 200-700 range */ line-height: var(--lh-display); letter-spacing: var(--track-display); color: var(--ink-1); } .auth-aside__line { margin: 0; max-width: 24ch; font-size: var(--type-u3); line-height: var(--lh-snug); color: var(--ink-3); } /* The trust cues take .ind-note's left-rail idiom (individual.css:464-490) rather than inventing a third callout vocabulary — but as a LIST, because there are three of them and three stacked callouts is the same slab wall §7 exists to break up. */ .auth-aside__proof { margin: 0; padding: 0 0 0 var(--space-4); list-style: none; flex-direction: column; gap: var(--space-3); /* This rail sits directly on the page black, so --sem-entry-edge would in fact be legal here. It still uses the -line tier: this is 1px of framing next to 13px text, and the quieter tier is what reads as a rail rather than as a border. */ border-left: var(--sem-rule-ladder) solid var(--sem-entry-line); } .auth-aside__proof li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--type-u6); line-height: var(--lh-snug); color: var(--ink-3); } .auth-aside__proof li i { flex: 0 0 auto; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sem-entry-line); border-radius: var(--r-sm); background: var(--sem-entry-wash); color: var(--sem-entry); font-size: .78em; } /* ----------------------------------------------------------------------------- THE LADDER GOES VERTICAL IN THE RAIL At 408px the horizontal ladder is tight: 2 x (26 circle + 10 + ~90 label + 10 + 22 pips) + 2 x 12 gap + 40 connector is about 380px with nothing spare. Vertical is both safer and better in a rail, and ALL FOUR non-colour channels survive — the connector's WEIGHT channel simply swaps axis, 1px vs --sem-rule-ladder measured across instead of along. The <=560px `.onboarding-progress__label { display: none }` rule in §8 is untouched and still bites only in stacked mode, exactly as today. ----------------------------------------------------------------------------- */ @media (min-width: 1024px) { .auth-aside .onboarding-progress { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--space-2); max-width: none; margin: 0; } .auth-aside .onboarding-progress__connector { flex: 0 0 24px; width: 1px; max-width: none; height: 24px; /* centres the run under the 26px circle: 13 - half the travelled 3px */ margin-inline-start: 12px; } .auth-aside .onboarding-progress__connector--travelled { width: var(--sem-rule-ladder); height: 24px; margin-inline-start: 11px; } } /* ============================================================================= 1c · ATMOSPHERE (2026-08-20) ----------------------------------------------------------------------------- Renders from public_base.html's `page_background_markup` block (:198), so it is a DIRECT CHILD of and a SIBLING of `.site-header`. It wraps nothing and carries no transform / filter / perspective / will-change, so it cannot become a containing block for the fixed header. individual.html:120 already uses this exact block for `.ind-backdrop`. ZERO ANIMATION. Four static radials, the same construction and the same alpha tiers as `.ind-backdrop` (individual.css:263-270). This is the deliberate no-motion alternative to guide-system.css's drifting mesh orbs: commit 8b73fe1 removed six infinite animations from behind this very password field, and nothing here reintroduces one. ON THE HEX CONTRACT. The header docblock says there is not one hex in this file, and there still is not — these are rgba() channel values, the same form .ind-backdrop uses. site-tokens.css publishes no atmosphere alpha tier; its lowest is --sem-*-wash at .10, which is two to three times too strong to sit behind reading text without moving the measured surface luminance the contrast numbers in this file depend on. ============================================================================= */ .auth-backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: /* the header horizon, in ENTRY cyan: every page on this surface is a ladder-1 arrival, and the atmosphere should say so */ radial-gradient(ellipse 90% 55% at 50% -12%, rgba(0, 242, 254, .07), transparent 70%), /* the left field, behind the aside */ radial-gradient(ellipse 60% 45% at 4% 34%, rgba(179, 136, 255, .05), transparent 72%), /* the low-right settle */ radial-gradient(ellipse 55% 40% at 96% 80%, rgba(105, 240, 174, .035), transparent 70%), radial-gradient(ellipse 70% 50% at 88% 108%, rgba(88, 185, 255, .05), transparent 72%); } /* A decorative fixed wash in a forced-colours theme is either invisible or an opaque block the UA cannot reason about. Remove it there. */ @media (forced-colors: active) { .auth-backdrop { display: none; } } /* ============================================================================= 2 · CARD ----------------------------------------------------------------------------- NO backdrop-filter. A blurred plate on a page with no content behind it buys nothing and costs a compositor layer on the one screen where first paint is the conversion. STILL TRUE after the 2026-08-20 pass: the depth below is box-shadow, which is painted, not composited, so it costs no layer. There is no `filter` on this card either, for the same reason. 2026-08-20 · the flat --sf-1 rectangle became a lit surface. --sf-1 is one uniform 3% white top to bottom, which is what made the card read as a plane rather than an object; the gradient below is the same top-lit wash .ind-card uses (individual.css:584-585), so the head reads as the lit edge and the foot falls away. Peak alpha is .05, under --sf-2's .055, so the surface stays inside the contract's resting/hover band rather than inventing a tier. ============================================================================= */ .auth-card { position: relative; /* The ::before level rule runs corner to corner and has to clip to the radius. Verified safe against focus rings: the only absolutely-positioned descendant on this surface is `.auth-reveal`, inset inside `.auth-password` with 12-14px of field padding around it, and the widest ring on the page is site-base.css's 2px outline at 2px offset. Nothing reaches the card edge. */ overflow: hidden; width: 100%; max-width: 460px; border: 1px solid var(--line-1); border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012)); box-shadow: /* lifts the card off the atmosphere behind it */ 0 24px 64px -24px rgba(0, 0, 0, .60), /* and a level halo bleeding down from the rule below */ 0 0 48px -20px var(--sem-entry-glow); padding: clamp(28px, 4vw, 44px); } /* THE LEVEL RULE. The `.gs-card::before` idiom (guide-system.css:643-653), which is this repo's existing answer to exactly this. ENTRY, because every page that renders a bare `.auth-card` is a ladder-1 arrival surface: signing in, creating an account, changing a password, reviewing an order. The tone pages in §7 set their own from --st-grad. */ .auth-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: var(--sem-rule-ladder); background: var(--grad-entry); z-index: 1; } /* Signup carries three fields plus a strength meter; 520 keeps the meter and the label on one line at 320px zoomed to 200%. */ .auth-card--wide { max-width: 520px; } .auth-head { margin-bottom: var(--space-5); } .auth-head__eyebrow { display: block; margin-bottom: var(--space-2); font-family: var(--font-mono); font-size: var(--type-m3); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-4); } .auth-head h1 { margin: 0; font-family: var(--font-display); font-size: var(--type-u1); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--track-display); color: var(--ink-1); } .auth-head p { margin: var(--space-2) 0 0; font-size: var(--type-u5); color: var(--ink-3); } /* ACCENT-SPLIT HEADING · the closing phrase of an

takes the entry gradient. Lifted from `.ind-accent` (individual.css:192-205) INCLUDING its forced-colors fallback, which guide-system.css's equivalent does not have: `background-clip: text` with a transparent fill is INVISIBLE in a forced-colours theme, because the UA replaces the background and the text is left with nothing to paint with. Split at a phrase boundary, never mid-clause. NOT used on the state page's

— that heading is the outcome, and §7 already spends its colour budget on the rule, the glyph and the chip. SIZE FLOOR: `.auth-head h1` is --type-u1 (24 -> 32px) at weight 600, which clears WCAG's 18.66px-bold large-text threshold at every step of the clamp, so the 3:1 tier applies to both gradient stops. */ .auth-accent { background: var(--grad-entry); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } @media (forced-colors: active) { .auth-accent { background: none; -webkit-text-fill-color: currentColor; color: CanvasText; } } /* ============================================================================= 3 · ANTI-PHISHING BLOCK ----------------------------------------------------------------------------- Sits ABOVE the fields, so it is read before a password is typed rather than after. Swyftx (the client's own named reference) ships this on its login; Mirror Ai did not. Mono + a wash chip so the URL reads as a machine fact, not marketing copy. ============================================================================= */ .auth-origin { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid var(--line-1); border-radius: var(--r-md); /* 2026-08-20 · stepped down from --sf-1. The card now paints its own .05 wash, so --sf-1's .03 on top of it was the same fill on the same fill and the block simply disappeared. .02 reads as an inset well against a lit card, which is what this always wanted to be. */ background: rgba(255, 255, 255, .02); } .auth-origin__label { font-family: var(--font-mono); font-size: var(--type-m3); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); } .auth-origin__url { padding: 4px 12px; border: 1px solid var(--sem-entry-line); border-radius: var(--r-pill); background: var(--sem-entry-wash); font-family: var(--font-mono); font-size: var(--type-m2); letter-spacing: var(--track-data); color: var(--ink-1); word-break: break-all; } /* ============================================================================= 4 · FIELDS ----------------------------------------------------------------------------- The label is a real, persistent