/* Control-plane page styles. Uses ONLY tokens from tokens.css so we stay in * the same visual family as Quill. Three pages live here — splash, signup, * login — plus the in-flight "provisioning" dashboard. * * Layout is page-driven: each carries a class (.splash / .signup / * .login / .dashboard) and owns its own min-height + padding. No global * body padding. */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--paper); color: var(--ink); font-family: var(--font-ui); font-size: var(--type-body); line-height: 1.6; min-height: 100vh; } h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.025em; color: var(--ink); margin: 0; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-deep); } /* Dead links — placeholder anchors that don't lead anywhere yet. * Muted color + strike-through so it's visually obvious they're stubs, * and pointer-events:none so they don't act interactive. `!important` * because per-section rules (.splash-nav__links a, .splash-footer__links a * etc.) carry higher specificity and would otherwise win on color. */ a.dead, a.dead:hover { color: var(--ink-3) !important; text-decoration: line-through !important; text-decoration-color: var(--ink-3) !important; cursor: not-allowed; pointer-events: none; } /* Utility ------------------------------------------------------------- */ .note { color: var(--ink-3); font-size: var(--type-body-sm); } .err { color: var(--alarm); background: var(--alarm-soft); border-radius: var(--r-12); padding: var(--space-12) var(--space-16); margin: 0 0 var(--space-16) 0; font-size: var(--type-body-sm); } code { font-family: var(--font-mono); font-size: var(--type-mono); color: var(--ink-2); background: var(--paper-3); border-radius: var(--r-6); padding: 2px 6px; } /* Brand --------------------------------------------------------------- * * Mirrors the Quill design system's QMark (see q-mark.tsx in quill-web): * a 🪶 emoji clipped to a flat fill via `background-clip: text`, so the * silhouette matches Apple/Google/Microsoft's native color emoji and the * favicon PNGs exported from it. * * One CP-specific addition: an SVG-mask backdrop on ::after, painted in * the same color. On browsers with a color-emoji font (Apple, most * desktop Windows/Chrome), the emoji renders on top and covers it. On * browsers without one (headless Chromium, many Linux installs), the * emoji paints nothing and the SVG silhouette shows through — so the * brand mark is always visible, never an empty disc. * * Tier 2 (filled circle) is .qmark; Tier 3 (bare glyph, ink-or-accent * silhouette) is .qmark.qmark--bare. */ .qmark { /* Tier-2 filled disc: saturated accent surface w/ cream feather glyph. * In dark mode --accent-surface diverges to a deeper teal so the disc * doesn't glare. --q-accent is read by .qmark--bare below (the bare * variant treats the glyph as a thin mark, so it stays on --accent). */ --q-size: 32px; --q-accent: var(--accent); --q-feather: url("data:image/svg+xml;utf8,"); position: relative; display: inline-block; width: var(--q-size); height: var(--q-size); flex-shrink: 0; border-radius: 50%; background: var(--accent-surface); } /* ::before is the SVG-mask backdrop (fallback). */ .qmark::before { content: ""; position: absolute; inset: 0; background: var(--accent-surface-fg); -webkit-mask: var(--q-feather) no-repeat center / 60%; mask: var(--q-feather) no-repeat center / 60%; pointer-events: none; } /* ::after is the OS color-emoji 🪶 clipped to its own glyph shape with * background-clip:text. When the emoji font is present this paints on top * of the SVG backdrop; when absent, the pseudo-element paints nothing * and the backdrop shows through. */ .qmark::after { content: "🪶"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "EmojiOne Color", sans-serif; font-size: calc(var(--q-size) * 0.6); line-height: 1; background: var(--accent-surface-fg); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; pointer-events: none; user-select: none; } .qmark--bare { background: transparent; border-radius: 0; } .qmark--bare::before { background: var(--q-accent); -webkit-mask-size: 95%; mask-size: 95%; } .qmark--bare::after { font-size: calc(var(--q-size) * 0.95); background: var(--q-accent); } .wordmark { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-family: var(--font-display); font-weight: 600; letter-spacing: -0.035em; line-height: 1; } .wordmark .qmark { --q-size: 24px; --q-accent: currentColor; } .wordmark > span { font-size: inherit; } /* Buttons ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: var(--r-full); font-family: var(--font-ui); font-weight: 500; letter-spacing: -0.005em; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease; padding: 14px 24px; font-size: 15px; } .btn--sm { padding: 8px 16px; font-size: 12px; } .btn--md { padding: 11px 20px; font-size: 14px; } .btn--lg { padding: 14px 24px; font-size: 15px; } .btn--full { width: 100%; } .btn--accent { background: var(--accent-surface); color: var(--accent-surface-fg); border-color: var(--accent-surface); } .btn--accent:hover { filter: brightness(1.08); } .btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn--secondary { background: var(--paper-2); color: var(--ink); border-color: var(--ink-3); } .btn--secondary:hover { background: var(--paper-3); } .btn--ghost { background: transparent; color: var(--ink-2); border-color: transparent; } .btn--ghost:hover { color: var(--ink); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--accent-soft); } .btn--sso[disabled], .btn[disabled] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* Chips/pills --------------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-full); font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.2; } .chip--accent { background: var(--accent-soft); color: var(--accent-deep); } .chip--positive { background: var(--positive-soft); color: var(--positive); } .chip--paper { background: var(--paper-3); color: var(--ink-2); } .chip--ink { background: var(--ink); color: var(--paper); } .chip--soon { margin-left: 8px; text-transform: lowercase; } .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; display: inline-block; } /* Form atoms ---------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: 6px; } .field__top { display: flex; align-items: baseline; justify-content: space-between; } .field__label { font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: 0.02em; } .field__optional { font-size: 11px; color: var(--ink-3); } .field__hint { font-size: 12px; color: var(--ink-2); line-height: 1.45; } .field__error { font-size: 12px; color: var(--alarm); line-height: 1.45; } .input-wrap { display: flex; align-items: center; gap: 10px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; transition: border-color 120ms ease, box-shadow 120ms ease; } .input-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .input-wrap .lead, .input-wrap .trail { display: flex; color: var(--ink-2); flex-shrink: 0; } .input-wrap input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--ink); padding: 4px 0; } .input-wrap input::placeholder { color: var(--ink-3); } .eye-btn { background: transparent; border: 0; padding: 0; cursor: pointer; display: flex; color: var(--ink-2); } /* Toggle -------------------------------------------------------------- */ .toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; color: var(--ink); font-weight: 500; user-select: none; } .toggle input { display: none; } .toggle__track { width: 32px; height: 18px; border-radius: 999px; background: var(--line); padding: 2px; display: inline-flex; transition: background 150ms ease; } .toggle__thumb { width: 14px; height: 14px; border-radius: 999px; background: #fff; transition: transform 150ms ease; } .toggle input:checked + .toggle__track { background: var(--accent-surface); } .toggle input:checked + .toggle__track .toggle__thumb { transform: translateX(14px); } /* ----- Splash page (body.splash) ------------------------------------ */ .splash { padding: 0; } .splash-nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 56px; border-bottom: 1px solid var(--line-soft); background: var(--paper); } .splash-nav .wordmark { font-size: 26px; } .splash-nav__links { display: flex; align-items: center; gap: 30px; font-size: 14px; color: var(--ink-2); } .splash-nav__links a { color: var(--ink); font-weight: 500; display: inline-flex; align-items: center; gap: 5px; } .splash-nav__links a.muted { color: var(--ink-2); font-weight: 400; } .splash-nav__links .lock { color: var(--accent); display: inline-flex; } .splash-nav__cta { display: flex; gap: 20px; align-items: center; } /* Hero */ .splash-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; padding: 72px 56px 32px; } .eyebrow-row { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; } .eyebrow { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.4px; } .hero-h1 { font-size: 84px; line-height: 0.96; letter-spacing: -0.035em; color: var(--ink); margin: 0 0 22px; text-wrap: balance; } .hero-h1 .accent { color: var(--accent); } .hero-lede { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 540px; margin: 0 0 32px; text-wrap: pretty; } .hero-ctas { display: flex; gap: 10px; align-items: center; margin-bottom: 28px; flex-wrap: wrap; } .trust-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); } .trust-row span.check { color: var(--positive); display: inline-flex; } .trust-sep { width: 3px; height: 3px; border-radius: 99px; background: var(--ink-3); } .trust-pair { display: inline-flex; align-items: center; gap: 6px; } /* Hero visual — Lina's Quill preview card */ .hero-visual { position: relative; display: flex; justify-content: center; } .quill-preview { width: 100%; max-width: 460px; background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: 28px; padding: 22px; box-shadow: var(--elev-lift); position: relative; } .qp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .qp-id { display: flex; align-items: center; gap: 8px; } .qp-id .qmark { --q-size: 28px; } .qp-id__name { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; color: var(--ink); } .qp-id__sub { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-top: 3px; } /* Chat bubbles — design-system in-thread spec. * Quill side: paper-3 fill + 1px line border (border holds shape on dark * where paper-3 sits close to paper-2). Tail at top-left (6px corner). * User side: ink fill, paper text, no border. Tail at bottom-right. * Both bubbles max 78% so a long reply doesn't span the column. */ .bubble { font-size: 13.5px; line-height: 1.5; padding: 11px 16px; margin-bottom: 8px; width: fit-content; } .bubble.quill { background: var(--paper-3); color: var(--ink); border: 1px solid var(--line); border-radius: 6px 20px 20px 20px; max-width: 78%; } .bubble.user { background: var(--ink); color: var(--paper); border-radius: 20px 20px 6px 20px; margin-left: auto; margin-right: 0; max-width: 78%; margin-bottom: 14px; } /* Thread layout for capability previews — Quill row gets a small avatar * to the left of its bubble, matching the in-thread spec. */ .thread { display: flex; flex-direction: column; margin-top: 4px; } .thread-row { display: flex; gap: 8px; align-items: flex-start; } .thread-avatar { --q-size: 28px; margin-top: 2px; } .qp-foot { border-top: 1px dashed var(--line); padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .qp-foot__crypt { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); } .url-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: var(--r-full); padding: 4px 10px; } .url-chip .lock { color: var(--accent); display: inline-flex; } .stamp { position: absolute; top: -14px; right: 24px; background: var(--accent-surface); color: var(--accent-surface-fg); border-radius: 14px; padding: 8px 12px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; transform: rotate(3deg); box-shadow: 0 4px 14px rgba(15, 74, 77, 0.28); display: flex; align-items: center; gap: 6px; } /* Three tiles section */ .tiles-section { padding: 40px 56px 32px; } .tiles-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; gap: 16px; } .label-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .tiles-h2 { font-size: 42px; line-height: 1.05; letter-spacing: -0.025em; max-width: 760px; text-wrap: balance; } .tiles-link { color: var(--accent); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .tile { background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 14px; } .tile__head { display: flex; align-items: center; justify-content: space-between; } .tile__kind { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 1px; } .tile__icon { width: 36px; height: 36px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-deep); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tile h3 { font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; } .tile p { font-size: 14px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; } .tile__action-row { display: flex; align-items: center; gap: 10px; background: var(--paper-3); border-radius: 14px; padding: 10px 12px; margin-top: 4px; } .tile__action-row .check-square { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; background: var(--accent-surface); color: var(--accent-surface-fg); display: flex; align-items: center; justify-content: center; font-size: 13px; } .tile__action-row .copy { flex: 1; min-width: 0; } .tile__action-row .copy .t { font-size: 12.5px; font-weight: 500; color: var(--ink); } .tile__action-row .copy .s { font-size: 11px; color: var(--ink-2); } .tile__action-row .when { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); } .tile__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); line-height: 1.6; } /* Privacy tile — always-dark island. * Uses fixed hex instead of var(--ink) so it stays a dark island in * dark mode too (otherwise --ink flips to cream and the inverse * styling inverts again, washing out the hardcoded tan helper colors). */ .tile--privacy { background: #1a160e; color: #faf2dc; border-color: #1a160e; position: relative; overflow: hidden; } .tile--privacy .tile__kind { color: #a89770; } /* Warm muted cream instead of near-white — bright #faf2dc on the dark * tile reads as harsh, especially in dark mode where the page bg is * also dark and the headings have nothing to play off against. */ .tile--privacy h3 { color: #e6d9b4; } .tile--privacy p { color: #c8bb96; } .tile--privacy .tile__icon { background: rgba(125, 212, 207, 0.18); color: #7ed4cf; } .promise-bullets { display: flex; flex-direction: column; gap: 9px; font-size: 13px; position: relative; } .promise-bullets li { display: flex; gap: 10px; align-items: flex-start; } .promise-bullets .check-tile { width: 18px; height: 18px; border-radius: 6px; flex-shrink: 0; margin-top: 1px; background: rgba(125, 212, 207, 0.18); color: #7ed4cf; display: flex; align-items: center; justify-content: center; } .promise-bullets .label { font-weight: 600; color: #e6d9b4; line-height: 1.3; } .promise-bullets .sub { color: #a89770; font-size: 12.5px; line-height: 1.45; margin-top: 1px; } /* Receipt strip ------------------------------------------------------- */ .receipt-section { padding: 32px 56px 48px; } .receipt-strip { /* Same always-dark island as .tile--privacy — fixed hex so dark mode * doesn't flip --ink to cream and break the inverse styling. */ background: #1a160e; color: #faf2dc; border-radius: 28px; padding: 34px 40px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; align-items: center; } .receipt-strip--two { grid-template-columns: 1.2fr 1fr; } .receipt-strip .eyebrow-strip { font-family: var(--font-mono); font-size: 10px; color: #9a8e70; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 10px; } .receipt-strip h3 { font-size: 28px; line-height: 1.1; color: #faf2dc; text-wrap: balance; } .receipt-strip .col-title { font-size: 12px; font-weight: 600; margin-bottom: 10px; letter-spacing: 0.5px; } .receipt-strip .col-title.bad { color: #bbad8c; } .receipt-strip .col-title.good { color: #7ed4cf; } .receipt-strip ul { display: flex; flex-direction: column; gap: 7px; font-size: 14px; line-height: 1.45; color: #faf2dc; } /* Footer */ .splash-footer { padding: 24px 56px 30px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--ink-3); } .splash-footer .wordmark { font-size: 18px; color: var(--ink-2); } .splash-footer__links { display: flex; gap: 22px; } .splash-footer__links a { color: var(--ink-2); } /* ----- Signup page (body.signup) ------------------------------------ */ .signup { display: flex; flex-direction: column; min-height: 100vh; } .signup-nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 56px; flex-shrink: 0; } .signup-nav .wordmark { font-size: 24px; } .signup-nav__right { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--ink-2); } .signup-nav__right a.underline { color: var(--ink); font-weight: 600; border-bottom: 1.5px solid var(--accent); padding-bottom: 1px; } .signup-grid { flex: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; min-height: 0; padding: 8px 56px 40px; } .signup-col { display: flex; flex-direction: column; justify-content: center; padding: 24px 60px 24px 0; } .signup-col__inner { max-width: 460px; } .signup-h1 { font-size: 50px; line-height: 1.0; letter-spacing: -0.03em; margin: 18px 0 14px; text-wrap: balance; } .signup-h1 .accent { color: var(--accent); } .signup-lede { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 0 0 28px; text-wrap: pretty; } .signup-form { display: flex; flex-direction: column; gap: 16px; } .signup-form__name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .divider-or { display: flex; align-items: center; gap: 12px; margin: 4px 0; } .divider-or hr { flex: 1; border: 0; height: 1px; background: var(--line-soft); } .divider-or span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.4px; } .sso-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; } .sso-btn { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-full); padding: 11px 18px; font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; position: relative; } .tos { font-size: 11.5px; line-height: 1.55; color: var(--ink-3); text-wrap: pretty; margin: 4px 0 0; } .tos a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; } /* Right column — promise panel */ .signup-aside { background: var(--paper-3); border-radius: 28px; padding: 40px 36px; display: flex; flex-direction: column; position: relative; overflow: hidden; } .aside-watermark { position: absolute; right: -50px; top: -50px; opacity: 0.08; pointer-events: none; } .aside-watermark .qmark { --q-size: 300px; } .aside-inner { position: relative; z-index: 1; } .aside-h2 { font-size: 34px; line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 24px; text-wrap: balance; } .promise-list { display: flex; flex-direction: column; gap: 16px; margin: 0; } .promise-list li { display: flex; gap: 12px; } .promise-list .check-tile { width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; margin-top: 2px; background: var(--accent-surface); color: var(--accent-surface-fg); display: flex; align-items: center; justify-content: center; } .promise-list .t { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -0.015em; line-height: 1.3; margin-bottom: 3px; } .promise-list .s { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; } .promise-receipt { margin-top: 32px; padding: 16px; border-radius: 16px; background: var(--paper-2); border: 1px dashed var(--line); display: flex; align-items: center; gap: 14px; } .promise-receipt__seal { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; background: var(--accent-surface); color: var(--accent-surface-fg); display: flex; align-items: center; justify-content: center; } .promise-receipt .t { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; } .promise-receipt .s { font-size: 12px; color: var(--ink-2); margin-top: 2px; line-height: 1.45; } .promise-foot { margin-top: 18px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); display: flex; align-items: center; gap: 8px; } .promise-foot .lock { color: var(--accent); display: flex; } /* ----- Login page (body.login) -------------------------------------- */ .login { display: flex; flex-direction: column; min-height: 100vh; position: relative; overflow: hidden; } .login-watermark { position: absolute; left: -120px; bottom: -160px; opacity: 0.05; pointer-events: none; z-index: 0; } .login-watermark .qmark { --q-size: 520px; --q-accent: var(--accent); } .login-nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 56px; flex-shrink: 0; position: relative; z-index: 1; } .login-nav .wordmark { font-size: 24px; } .login-nav__right { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--ink-2); } .login-nav__right a.underline { color: var(--ink); font-weight: 600; border-bottom: 1.5px solid var(--accent); padding-bottom: 1px; } .login-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px 56px 40px; position: relative; z-index: 1; } .login-card { width: 100%; max-width: 440px; background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: 28px; padding: 40px 38px; box-shadow: var(--elev-lift); } .login-card .qmark-row { display: flex; justify-content: center; margin-bottom: 18px; } .login-card .qmark-row .qmark { --q-size: 52px; } .login-h1 { font-size: 38px; line-height: 1.0; letter-spacing: -0.03em; text-align: center; margin: 0 0 8px; text-wrap: balance; } .login-lede { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); margin: 0 0 28px; text-align: center; } .login-form { display: flex; flex-direction: column; gap: 14px; } .login-form__row { display: flex; align-items: center; justify-content: space-between; padding: 2px; font-size: 13px; } .login-form__row .forgot { color: var(--accent); font-weight: 500; } .login-rail { padding: 20px 56px 28px; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; } .login-rail .receipt { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); } .login-rail .privacy-link { font-size: 12px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 5px; } /* ----- Dashboard (provisioning + error states) ---------------------- */ .dashboard { display: flex; align-items: center; justify-content: center; padding: 48px 16px; } .dashboard .card { background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: var(--r-20); padding: var(--space-32); box-shadow: var(--elev-rest); max-width: 28rem; width: 100%; } .dashboard h1 { font-size: var(--type-display-lg); margin: 0 0 var(--space-16) 0; } .dashboard p { margin: var(--space-12) 0 0 0; line-height: 1.6; color: var(--ink-2); } .dashboard form { margin-top: var(--space-24); } /* ----- Responsive trims --------------------------------------------- */ @media (max-width: 1024px) { .splash-hero, .signup-grid { grid-template-columns: 1fr; gap: 32px; } .signup-col { padding: 0; } .signup-grid { padding: 8px 24px 32px; } .splash-nav, .splash-hero, .tiles-section, .receipt-section, .splash-footer { padding-left: 24px; padding-right: 24px; } .signup-nav, .login-nav, .login-body, .login-rail { padding-left: 24px; padding-right: 24px; } .receipt-strip { grid-template-columns: 1fr; } .tiles { grid-template-columns: 1fr; } .hero-h1 { font-size: 56px; } .signup-h1 { font-size: 38px; } } @media (max-width: 640px) { .splash-nav__links { display: none; } .splash-nav__cta { margin: 0; } .splash-hero { padding-top: 40px; } .hero-h1 { font-size: 40px; } .tiles-h2 { font-size: 30px; } .receipt-strip { padding: 24px; } .stamp { right: 8px; } } /* Dark theme tweaks — most things just flip via the token swap, but pills * need their hairline border to retain shape against the dark surface. */ @media (prefers-color-scheme: dark) { .chip--accent { border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); } .chip--positive { border: 1px solid color-mix(in srgb, var(--positive) 50%, transparent); } .chip--paper { border: 1px solid var(--ink-3); } .sso-btn { background: var(--paper-2); } .promise-receipt { background: var(--paper-2); } }