/* ========================================================================= liveverify — verification flow UI ========================================================================= Deliberately BRAND-NEUTRAL. This flow is intended to be offered to third parties as an embeddable identity check (see LIVEVERIFY_OPTICAL_BETA_SCOPE.md's "Agreed order of work", item 6), so it must not read as SignedBy's own product the way the dashboard does. Everything a relying party would want to change is one token: --brand. Nothing else in this file hard-codes an accent, so re-skinning is a single line, not a hunt. The default --brand (#3b5bdb) and --ink (#12203f) are lifted from the SignedBy transactional-email wordmark ("Signed" in ink, "By" in blue), which is already the most customer-facing surface the product has -- so the default skin is consistent with what a verifying user has just been emailed, without the dashboard's yellow badge making it look like an internal tool. Light throughout, with ONE deliberate exception: the camera stage is near-black (--stage). That isn't a style choice -- a light panel behind live video washes out the preview and reflects off the user's face during the liveness step. Stripe Identity does the same thing for the same reason. ========================================================================= */ :root { /* The one token a third party would swap -- see LIVEVERIFY_API_DESIGN.md §8 step 6 (2026-09-07): app.js's applySessionBranding() sets exactly this one custom property from an org's brand_color, and relies on --brand-strong/--brand-soft being DERIVED from it rather than separate literals, so a tenant override actually reaches every place --brand is used, not just the two spots that reference the base token directly. The three literal values below (used until a session carries a brand override, and always for the default skin) are the resolved color-mix() outputs at the default --brand, kept in sync by hand -- see that file header's own note on why this stays a literal default. */ --brand: #3b5bdb; --brand-strong: color-mix(in srgb, var(--brand) 82%, black); --brand-soft: color-mix(in srgb, var(--brand) 10%, white); --ink: #12203f; --body: #3c4658; --muted: #8a93a6; --surface: #ffffff; --canvas: #f6f8fb; --line: #e4e9f0; --line-soft: #eef1f6; --good: #0e9f6e; --good-soft: #e8f6f0; --bad: #d92d20; --bad-soft: #fdeceb; --warn: #b54708; /* Camera stage -- see file header. */ --stage: #0b0f17; --radius: 12px; --radius-lg: 18px; --shadow-card: 0 1px 2px rgba(18, 32, 63, 0.04), 0 8px 24px rgba(18, 32, 63, 0.06); /* System stack, matching signedby-app's own deliberate no-webfont choice (see its globals.css) -- renders instantly, no loading flash, one less network dependency for a flow that runs on strangers' phones. */ --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-family: var(--font-sans); color-scheme: light; } * { box-sizing: border-box; } html, body { min-height: 100%; } body { margin: 0; background: var(--canvas); color: var(--body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } a { color: var(--brand); } /* Dev-only chrome. The harness and the real deployment serve the SAME index.html (see server.mjs / build-public.mjs and the deployment-mode meta tag); app.js stamps data-mode on so production can hide the developer-facing header without a second template to keep in sync. */ [data-mode="serverless"] .dev-only { display: none !important; } /* ---------------------------------------------------------------- shell -- */ #harness { min-height: 100vh; } main { width: 100%; max-width: 480px; margin: 0 auto; padding: 0 20px 48px; } main[hidden] { display: none; } /* The product header: wordmark only. No navigation, no marketing -- a person mid-verification has exactly one job, and anything else here is a way to leave. */ .flow-header { width: 100%; max-width: 480px; margin: 0 auto; padding: 22px 20px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .flow-brand { display: flex; align-items: center; min-width: 0; } .wordmark { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin: 0; } .wordmark .id { color: var(--brand); } /* Org logo, swapped in for #flowWordmark once branding resolves with one -- same slot, same vertical rhythm as the wordmark it replaces (21px text line-height), not the smaller 22px badge size the old in-card logo used. */ .flow-brand-logo { height: 26px; max-width: 160px; object-fit: contain; } .flow-secure { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--muted); } .flow-secure svg { width: 13px; height: 13px; flex: none; } /* --------------------------------------------------------- dev header -- */ header.dev-only { padding: 18px 20px 14px; border-bottom: 1px solid var(--line); background: var(--surface); } header h1 { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; } header p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; max-width: 640px; } header p code { color: var(--brand); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; } header p.build-tag { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--muted); margin-bottom: 8px; } /* -------------------------------------------------------------- progress -- */ /* Segmented bar rather than labelled chips: on a phone the step title is already stated directly below in .step-title, so repeating it here spent a whole line to say the same thing twice. The segments answer only "how far through am I", which is the one thing the title can't say. Pill text is kept in the DOM (zeroed, not removed) so it still reaches assistive tech. */ .steps { display: flex; gap: 6px; padding: 4px 0 18px; } .step-pill { flex: 1 1 0; height: 4px; border-radius: 999px; background: var(--line); font-size: 0; line-height: 0; color: transparent; overflow: hidden; transition: background-color 0.25s ease; } .step-pill.active { background: var(--brand); } .step-pill.done { background: rgba(59, 91, 219, 0.45); } /* ----------------------------------------------------------------- panel -- */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-card); } .step-title { margin: 0 0 6px; font-size: 21px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); text-wrap: balance; } .step-desc { margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; color: var(--body); } /* --------------------------------------------------- camera stage (fn) --- */ .video-wrap { position: relative; width: 100%; /* Fixed 1:1 square, deliberately -- not matched to the camera's native resolution (an earlier version of this rule did that instead, see git history). The