/* * Sque authorization surface — login, consent, and error pages. * * Served first-party (CSP style-src 'self'); loads no third-party resources and no fonts * over the network — the type is a system stack, matching the privacy posture of the page. * Aesthetic: minimal and editorial — the form floats on Sque's near-black void, a centered * pinwheel mark, a serif display voice, outlined fields with notched floating labels, and a * single cream action. No panel, no ornament. Brand tokens are lifted from the Sque frontend. */ :root { --ink-void: #030303; /* Ink — the brand cream, stepped down for hierarchy */ --cream: #f4efe4; --cream-dim: #a49f96; --cream-faint: #79746b; /* RGB triplets for the two hues used at arbitrary alpha elsewhere in this file (badges, notices, * invite panels) — kept in sync with --cream/--green-lit above rather than repeated as separate * literals, which is what let those spots go stale when `.theme-light` below needs its own values. */ --cream-rgb: 244, 239, 228; --green-rgb: 125, 154, 138; /* Field outlines */ --field-border: rgba(244, 239, 228, 0.2); --field-border-hover: rgba(244, 239, 228, 0.4); /* Brand green — lifted so it reads on black; used only for focus + grant marks */ --green-lit: #7d9a8a; --green-glow: rgba(125, 154, 138, 0.28); /* Primary action — Sque's cream button on slate ink */ --button: #f1ede5; --button-hover: #fffdf8; --button-ink: #202a2b; /* Status */ --danger: #d97a7a; --danger-bg: rgba(208, 92, 92, 0.1); --danger-line: rgba(208, 92, 92, 0.35); /* Success — the brand green, at the same three weights as danger above so the two read as a pair. * Derived from --green-lit rather than a new hue: this is the same green as focus rings and grant * marks, so an outcome that went well looks like the rest of the product rather than like a * borrowed traffic light. */ --success: #8fae9c; --success-bg: rgba(125, 154, 138, 0.12); --success-line: rgba(125, 154, 138, 0.38); /* Type roles — editorial serif display, neutral sans body, mono for the fine print */ --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, ui-serif, serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace; --radius: 10px; } /* ── Light theme — the client portal surface ───────────────────────────── * * Applied via `.theme-light` on (see `_layout.html`'s `body_class` block), set only by * portal_login.html and portal_registration.html (which the self-serve /portal/self-registration * route also fronts). Everything below re-derives the SAME roles the dark void above defines — * void/ink swap, the button inverts, green and danger deepen for contrast on a light ground — so * every rule elsewhere in this file that already reads a variable (not a literal) picks this up * for free. Nothing in the client flow reads differently from the firm flow by ACCIDENT; this is * the one block that makes it read differently on purpose. */ .theme-light { --ink-void: #faf7f1; --cream: #1c1c1a; --cream-dim: #6b675f; --cream-faint: #9b968c; --cream-rgb: 28, 28, 26; --field-border: rgba(28, 28, 26, 0.16); --field-border-hover: rgba(28, 28, 26, 0.32); /* Deepened from the dark theme's --green-lit/--success: the original values were tuned to read on * near-black (per the comment above) and wash out to near-invisible on a light ground. */ --green-lit: #4f7d68; --green-glow: rgba(79, 125, 104, 0.18); --green-rgb: 79, 125, 104; --button: #1c1c1a; --button-hover: #000000; --button-ink: #faf7f1; --danger: #b23b3b; --danger-bg: rgba(178, 59, 59, 0.08); --danger-line: rgba(178, 59, 59, 0.3); --success: #4f7d68; --success-bg: rgba(79, 125, 104, 0.1); --success-line: rgba(79, 125, 104, 0.3); } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px; font-family: var(--font-body); color: var(--cream); background-color: var(--ink-void); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ── The centered column ──────────────────────────────────────────────── */ .stage { width: 100%; max-width: 360px; animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .stage--wide { max-width: 428px; } /* ── Mark + heading ───────────────────────────────────────────────────── */ .mark { display: flex; justify-content: center; margin-bottom: 26px; } .mark svg { width: 38px; height: 38px; color: var(--cream); } .eyebrow { margin: 0 0 8px; font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-dim); text-align: center; } .title { margin: 0 0 12px; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 6vw, 40px); line-height: 1.1; letter-spacing: -0.01em; text-align: center; } .lede { margin: 0 auto 34px; max-width: 30ch; font-family: var(--font-display); font-size: 17px; line-height: 1.5; color: var(--cream-dim); text-align: center; } .lede strong { color: var(--cream); font-weight: 600; } /* ── Outlined fields with notched floating labels ─────────────────────── */ form { margin: 0; } .field { position: relative; margin-bottom: 16px; } .field-input { width: 100%; height: 56px; padding: 0 16px; font-family: var(--font-body); font-size: 16px; color: var(--cream); background: transparent; border: 1px solid var(--field-border); border-radius: var(--radius); outline: none; appearance: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .field-input:hover { border-color: var(--field-border-hover); } .field-input:focus { border-color: var(--green-lit); box-shadow: 0 0 0 1px var(--green-lit); } .field-label { position: absolute; left: 11px; top: 28px; transform: translateY(-50%); padding: 0 5px; font-family: var(--font-body); font-size: 16px; color: var(--cream-faint); background: var(--ink-void); pointer-events: none; transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease; } .field-input:focus + .field-label, .field-input:not(:placeholder-shown) + .field-label, /* A stays * fully functional and reasonably dressed, matching this file's progressive-enhancement posture. */ .field--select .field-input { padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a49f96' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; cursor: pointer; } /* ── Enhanced select (JS-built listbox) ─────────────────────────────────── * * The chevron rule above is what a ` is kept in the DOM, inert and visually hidden, as the actual form value; if the * script never runs, nothing above is touched and the plain select still works. */ .select-trigger { display: flex; align-items: center; width: 100%; text-align: left; color: var(--cream-faint); font: inherit; } .select-trigger.select-trigger--filled { color: var(--cream); } /* Mirrors `.field--select .field-input:not(:invalid) + .field-label` above — a