/* ============================================================================ PRE-AUTH SURFACE SYSTEM — the doors into MinMax Pro. ---------------------------------------------------------------------------- Sign In, Reset Password, the SSO handoff, Book a Visit, Leave a Review and the Client Portal sign-in used to be six separately-invented pages: one on a pale cyan gradient with no chrome at all, one on a warm grey field with a green button left over from the emerald era, one on a black card, one a two-tone slab. A person who books a visit, then gets a review link, then signs into the portal saw three different products. This is the one design they now share, and it is the CONSOLE's design read back at a visitor who is not signed in yet: · DARK CHROME on top. The console's rail is a lifted graphite panel that sits in FRONT of the page; with no rail to put it in, that same graphite becomes a bar across the top. It carries the identity and the one or two links a signed-out page owes you, and nothing else. · LIGHT PAPER below it. The same cool off-white, the same faint blueprint grid, the same twin accent glows the console paints behind every page. · CYAN as the one accent. --teal (#007c89) wherever it is TEXT, because it has to pass on paper; --teal-bright (#00E5FF) wherever it is a fill or a glow, because that is the brand colour. ── EVERY VALUE IS A TOKEN WITH A FALLBACK ───────────────────────────────── Three of these six pages are WHITE-LABEL: a tenant's customer reaches them from the tenant's own email, and the brand engine repaints them by writing its tokens INLINE on :root. So nothing here may be a literal in a place a tenant can repaint — every rule reads var(--pa-*), and the .pa block below is the ONE place those resolve, each one pointing at the engine's token first and the product's own value only as the fallback. A page that never resolves a tenant renders in the product's cyan; a page that does renders in theirs, with no rule in this file knowing the difference. Consequence worth stating: do not add a #ffffff, a #00E5FF or a rgba() ink to a rule below. Add a --pa-* token for it here instead, or a dark-pack tenant gets a white card punched through their charcoal page. Pages that link this file: login.html, reset-password.html, sso.html, booking.html. review.html deliberately does NOT — it is opened on a phone, outdoors, on one bar of signal, and a review that cannot be left because a stylesheet did not arrive is a worse outcome than an unstyled one; it carries its own copy of the handful of rules it needs. The client portal's sign-in screen gets the same treatment from portal-skin.css, where the rest of that surface already lives. ========================================================================== */ /* ── Tokens ──────────────────────────────────────────────────────────────── Scoped to .pa on rather than :root on purpose: :root is where the brand engine writes, and a stylesheet that also writes there would either lose to it (inline wins) or have to fight it with !important. One level down, these READ the engine's values and can never collide with them. */ .pa { /* Chrome — the graphite bar. Fixed and neutral, exactly like the console's rail: decoupled from the brand hue so it stays a calm near-black panel in front of the page whatever colour the tenant is. A white-label page overrides --pa-chrome-base with the tenant's own ink (see booking.html), which is the one case where the chrome SHOULD be theirs — it is their customer's first sight of them, not of us. */ --pa-chrome-base: var(--rail-bg, #20242c); --pa-chrome: var(--pa-chrome-base); --pa-chrome-2: color-mix(in srgb, var(--pa-chrome-base) 88%, #fff); --pa-chrome-line: rgba(255, 255, 255, .10); --pa-chrome-tx: #eef0f5; --pa-chrome-dim: rgba(238, 240, 245, .68); /* Paper — the console's canvas. */ --pa-paper: var(--paper, #e4ecf4); --pa-card: var(--card, #ffffff); --pa-card-2: var(--card-2, #f2f7fb); --pa-line: var(--line, #d2dfea); --pa-line-soft: var(--line-soft, #e0e9f2); /* Ink */ --pa-tx: var(--tx, #151b21); --pa-tx-soft: var(--tx-soft, #454d58); --pa-tx-mute: var(--tx-mute, #5a6068); --pa-tx-dim: var(--tx-dim, #9aa1ad); --pa-head: var(--head, #0d1b20); /* Accent. The engine's --brand-primary-text is the tenant's colour already stepped down until it passes as TEXT on paper, which is the same job --teal does for the product; --brand-primary is the raw brand colour, which is the same job --teal-bright does. Pairing them the other way round is what turns a lit page muddy and an unlit one illegible. */ --pa-accent: var(--brand-primary-text, var(--teal, #007c89)); --pa-accent-deep: var(--brand-primary-deep, var(--teal-deep, #00626d)); --pa-accent-fill: var(--brand-primary, var(--teal-bright, #00E5FF)); --pa-on-accent: var(--brand-on-primary, var(--on-teal, #ffffff)); --pa-accent-2: var(--brand-accent, var(--accent-2, #2EE0A8)); --pa-ok: var(--ok, #1f9d57); --pa-bad: var(--bad, #d6492f); --pa-gold: var(--gold, #f4b03e); /* Type — the console's three families, with the engine's names first so a custom-tier pack's fonts arrive here too. */ --pa-f-head: var(--f-head, 'Bricolage Grotesque', Georgia, serif); --pa-f-body: var(--f-body, 'Plus Jakarta Sans', system-ui, sans-serif); --pa-f-mono: var(--f-mono, 'JetBrains Mono', ui-monospace, monospace); --pa-bar-h: 64px; --pa-r: 14px; --pa-r-lg: 18px; --pa-sh-1: 0 1px 2px rgba(16, 21, 28, .05), 0 1px 3px rgba(16, 21, 28, .04); --pa-sh-2: 0 8px 22px -14px rgba(16, 21, 28, .30); --pa-sh-3: 0 26px 56px -28px rgba(16, 21, 28, .34); } *, *::before, *::after { box-sizing: border-box; } /* [hidden] is a UA rule of display:none, and ANY author display beats it. Most things on these pages carry display:flex or display:grid, so without this the tenant lockup and the product marketing both stayed on screen after the brand engine hid them. hidden has to mean hidden. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; } body.pa { min-height: 100vh; display: flex; flex-direction: column; font-family: var(--pa-f-body); font-size: 14px; line-height: 1.55; color: var(--pa-tx); background: var(--pa-paper); -webkit-font-smoothing: antialiased; } /* ── The ambient wash ─────────────────────────────────────────────────────── The console's canvas, layer for layer (see the body::before block in components.css): a faint blueprint grid, the brand glow from the top right, the secondary thread from the bottom left, over a lit fade into the paper. It is a FIXED pseudo-element rather than a background on the body. Fixed background-attachment forces a full repaint of every layer on each scroll frame — it cannot be lifted onto a compositor layer — and the booking page is long enough for that to show as scroll jank. */ body.pa::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(84% 62% at 100% -6%, color-mix(in srgb, var(--pa-accent-fill) 16%, transparent), transparent 66%), radial-gradient(76% 58% at -8% 104%, color-mix(in srgb, var(--pa-accent-2) 8%, transparent), transparent 68%), var(--pa-paper); } /* ── The grid, on its own layer, FADING OUT ────────────────────────────────── It used to be two more layers inside the wash above, which meant it ran at full strength to the bottom of the viewport. A blueprint grid that terminates at the fold in a hard edge reads as a background image that failed to tile; one that dissolves reads as depth. It needs its own element to be masked, because a mask applies to the whole box and not to one background layer. */ body.pa::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(var(--pa-grid, color-mix(in srgb, var(--pa-head) 4%, transparent)) 1px, transparent 1px) 0 0 / 60px 60px, linear-gradient(90deg, var(--pa-grid, color-mix(in srgb, var(--pa-head) 4%, transparent)) 1px, transparent 1px) 0 0 / 60px 60px; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, rgba(0, 0, 0, .35) 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 34%, rgba(0, 0, 0, .35) 72%, transparent 100%); } /* WHY THESE RATIOS. The console runs the same wash at 22%/11% plus a lit 170deg sheet, and it is right there: a rail covers the left quarter and dense cards cover most of the rest, so the colour only ever shows in the gaps. A pre-auth page is one card on an otherwise empty field, and at those numbers the same wash stopped being atmosphere and became the subject: the top half of every screen went pale cyan and the card floated in it. Turned down and pulled into the corners, the page reads as lit from the top right, which is what it was always meant to say. Do not raise these back to the console's numbers without looking at /login and /review, the two emptiest pages in the set. */ /* A dark-canvas tenant. The ratios are NOT interchangeable with the light ones: 22% cyan over white is the pale tint that makes the canvas read as lit, and the same 22% over near-black is a saturated fog. The grid has to flip outright — a faint dark rule on paper is a faint light one on charcoal. Keyed off the attribute applyBrand() already stamps, so nothing has to detect anything. */ :root[data-brand-polarity="dark"] body.pa::before { background: radial-gradient(84% 62% at 100% -6%, color-mix(in srgb, var(--pa-accent-fill) 7%, transparent), transparent 66%), radial-gradient(76% 58% at -8% 104%, color-mix(in srgb, var(--pa-accent-2) 4.5%, transparent), transparent 68%), var(--pa-paper); } :root[data-brand-polarity="dark"] body.pa::after { --pa-grid: rgba(255, 255, 255, .05); } /* ============================================================================ 1 · THE CHROME BAR ========================================================================== */ .pa-bar { position: sticky; top: 0; z-index: 30; flex: none; min-height: var(--pa-bar-h); display: flex; align-items: center; gap: 18px; padding: 0 26px; /* Three things make this read as a PANEL IN FRONT of the page rather than a black stripe painted on it, and all three are one line each: · the vertical gradient, so the bar is lit from above; · the inset top highlight, the same 1px catch-light a physical bevel has; · a real drop shadow onto the paper below. The console's rail earns its depth the same way. Without them the bar was flat, and a flat near-black rectangle is the single most common tell of a template header. */ background: /* Grain. A fractal-noise tile at 3% over the gradient, so the graphite has tooth instead of reading as a printed swatch. WHITE on alpha, never a greyscale tile: a greyscale noise needs a blend mode to disappear, and blend modes die inside any ancestor that creates a stacking context. */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E") 0 0 / 160px 160px, /* The bloom off the leading edge. The console's rail lifts a wide, shallow accent glow from just outside its TOP edge; rotate that panel flat and the same gesture arrives from just outside the LEFT edge, behind the lockup. Added 2026-08-12 so these doors carry the same lit chrome as the marketing pages and the console itself. It reads --pa-accent-fill, so a white-label tenant gets their own colour here and not ours. */ radial-gradient(54% 240% at -4% 50%, color-mix(in srgb, var(--pa-accent-fill) 16%, transparent), transparent 78%), /* Three stops, not two: lifted at both ends, deeper through the middle, along the bar's length. Flat ends read as a printed band. */ linear-gradient(90deg, var(--pa-chrome-2), var(--pa-chrome) 54%, var(--pa-chrome-2)); border-bottom: 1px solid var(--pa-chrome-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px -18px rgba(12, 16, 22, .55); color: var(--pa-chrome-tx); } /* The accent hairline under the bar — the same thread the console runs along the top of its rail. One pixel, and it is the whole reason the bar reads as lit rather than as a black strip laid on the page. */ .pa-bar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pa-accent-fill) 55%, transparent) 22%, color-mix(in srgb, var(--pa-accent-fill) 20%, transparent) 62%, transparent); pointer-events: none; } .pa-bar-brand { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: inherit; } .pa-bar-brand img { display: block; } /* The lockup the brand engine builds. It replaces its own children on every repaint with ITS class names, so the monogram has to be styled as .brand-mark here — the markup this page shipped does not survive first paint. */ .pa-bar .brand-lockup { display: flex; align-items: center; gap: 11px; min-width: 0; } .pa-bar .brand-lockup .brand-mark { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; overflow: hidden; font-family: var(--pa-f-head); font-weight: 800; font-size: 17px; color: var(--pa-on-accent); background: linear-gradient(150deg, var(--pa-accent-fill), var(--pa-accent)); } .pa-bar .brand-lockup .brand-wrap { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .pa-bar .brand-lockup .brand-wrap b { font-family: var(--pa-f-head); font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: var(--pa-chrome-tx); } .pa-bar .brand-lockup .brand-wrap small, .pa-bar .brand-lockup-sub { font-family: var(--pa-f-mono); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--pa-chrome-dim); } /* With a real logo the logo IS the identity — the monogram and the typed wordmark beside it are the classic tell of a white-labelled template. */ .pa-bar .brand-lockup.has-logo .brand-mark, .pa-bar .brand-lockup.has-logo .brand-wrap { display: none; } /* A mono caption beside the identity: which door this is. */ .pa-bar-word { font-family: var(--pa-f-mono); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--pa-chrome-dim); padding-left: 18px; margin-left: 2px; border-left: 1px solid var(--pa-chrome-line); white-space: nowrap; } @media (max-width: 620px) { .pa-bar-word { display: none; } } .pa-bar-spacer { flex: 1; } .pa-bar-nav { display: flex; align-items: center; gap: 6px; } .pa-bar-link { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid transparent; background: transparent; font-family: var(--pa-f-body); font-size: 13px; font-weight: 600; color: var(--pa-chrome-dim); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .14s, color .14s, border-color .14s; } .pa-bar-link:hover { background: rgba(255, 255, 255, .07); color: var(--pa-chrome-tx); } .pa-bar-link svg { width: 15px; height: 15px; } /* The one lit control in the chrome. Border and glow rather than a solid fill: a solid cyan pill on a graphite bar is louder than anything on the page below it, and the page below it is where the visitor is meant to be looking. */ .pa-bar-cta { border-color: color-mix(in srgb, var(--pa-accent-fill) 42%, transparent); background: color-mix(in srgb, var(--pa-accent-fill) 12%, transparent); color: var(--pa-chrome-tx); } .pa-bar-cta:hover { border-color: color-mix(in srgb, var(--pa-accent-fill) 72%, transparent); background: color-mix(in srgb, var(--pa-accent-fill) 20%, transparent); color: #fff; } @media (max-width: 520px) { .pa-bar { padding: 0 16px; gap: 10px; } .pa-bar-link { padding: 0 9px; font-size: 12.5px; } } /* ============================================================================ 2 · THE PAGE ========================================================================== */ .pa-main { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 46px 26px 56px; } .pa-main.pa-narrow { max-width: 480px; } .pa-main.pa-wide { max-width: 1180px; } /* A single card centred in what is left of the viewport once the bar is gone. min-height rather than height so a card taller than the fold still scrolls. */ .pa-main.pa-center { display: grid; place-items: center; min-height: calc(100vh - var(--pa-bar-h) - 64px); } @media (max-width: 640px) { .pa-main { padding: 30px 18px 42px; } } /* Two columns: the story on the left, the thing you came to do on the right. The right column is fixed-ish so the form never stretches past a comfortable measure on a wide monitor. */ .pa-split { display: grid; grid-template-columns: 1fr 424px; gap: 54px; align-items: center; } @media (max-width: 1000px) { .pa-split { grid-template-columns: 1fr; gap: 34px; max-width: 480px; margin: 0 auto; } .pa-split .pa-tell { display: none; } } /* ── The telling side ─────────────────────────────────────────────────────── */ .pa-eyebrow { font-family: var(--pa-f-mono); font-size: 11.5px; font-weight: 600; /* The DEEP step. This is 11.5px mono at .16em on the page canvas, not a link on a white card — --pa-accent measured 4.15:1 there and --pa-accent-deep is 5.5:1 in the same hue. (check-contrast.mjs, 2026-08-11.) */ letter-spacing: .16em; text-transform: uppercase; color: var(--pa-accent-deep); margin-bottom: 18px; } /* .pa-tell-h2: the same visual heading on an element that is NOT an

. login.html uses it because its marketing panel sits BEFORE the card's

Every button in this file used to be a