/* ============================================================================ MAITRI ONBOARDING — FLOW PRIMITIVES · .ob-* A route-first, linear first-run flow built ENTIRELY from design tokens. Link AFTER onboarding.css and components.css. Auto-darkens via tokens-night.css with zero extra rules here (every value is var(--token) or a color-mix over one). Contract: · TOKENS ONLY — no raw hex / font / shadow. Scrims use color-mix(in srgb, var(--token) N%, transparent). · Aura (--maitri-aura / --maitri-aura-soft / --maitri-glow) is Maitri's voice only: the orb, a faint wash behind an offer, a 4px left edge on Maitri's own modules. Never on chrome, borders, or neutral cards. · All custom motion is gated by prefers-reduced-motion at the foot of the file; durations already collapse to 0 via the tokens. ========================================================================= */ /* ============================================================================ 1 · .ob-stage — PRE-rail onboarding canvas Full-bleed, centered, no left rail. onboarding.css already flexes to center + paints the warm radial canvas; .ob-stage adds the column container and a faint, single maitri-aura wash so Maitri's presence frames the whole flow. Put
directly inside . ========================================================================= */ .ob-stage { position: relative; width: 100%; max-width: 780px; /* self-center + restore breathing room: later-loaded maitri-app.css sets body.app{display:block;padding:0}, which kills onboarding.css's flex centering. .ob-stage is never targeted there, so center it directly. */ margin-inline: auto; margin-block: var(--space-12) var(--space-16); display: flex; flex-direction: column; gap: var(--space-8); /* onboarding runs a calmer button scale than the dense app — re-point the button geometry tokens here (defaults live on .btn). No new class, no markup edits; app pages never set these so they keep the larger default. */ --btn-min-h: 44px; --btn-pad-y: var(--space-3); --btn-pad-x: var(--space-6); } /* faint aura wash — Maitri's presence behind the whole flow, never chrome */ .ob-stage::before { content: ""; position: absolute; inset: calc(var(--space-8) * -1) calc(var(--space-6) * -1) auto; height: 360px; border-radius: var(--radius-2xl); background: var(--maitri-aura-soft); opacity: 0.9; filter: blur(40px); pointer-events: none; z-index: -1; } /* a centered header cluster for the orb + question copy */ .ob-stage__head { text-align: center; display: grid; justify-items: center; gap: var(--space-4); } .ob-stage__title { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--color-text); margin: 0; max-width: 24ch; } .ob-stage__title em { font-style: italic; color: var(--color-primary-text); } .ob-stage__sub { font-size: var(--fs-body-lg); color: var(--color-text-muted); margin: 0; max-width: 52ch; line-height: var(--lh-normal); } /* ============================================================================ 2 · .ob-progress — slim linear step indicator (segments) Distinct from onboarding.css .steps dots: a horizontal segmented bar that reads as "where am I in the route". Each .ob-progress__seg is one step; add .is-done (filled aura) / .is-now (filled aura + glow) / leave bare (track). ========================================================================= */ .ob-progress { display: flex; align-items: center; gap: var(--space-2); width: 100%; max-width: 360px; margin: 0 auto; } .ob-progress__seg { flex: 1; height: 5px; border-radius: var(--radius-pill); background: var(--color-border-strong); transition: background var(--dur-base) var(--ease-standard); } .ob-progress__seg.is-done { background: var(--color-primary); } .ob-progress__seg.is-now { background: var(--maitri-aura); box-shadow: var(--maitri-glow); } .ob-progress__label { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--color-text-subtle); white-space: nowrap; margin-left: var(--space-2); } /* ============================================================================ 3 · .ob-intent-grid + .ob-intent-card — "What brings you to Maitri?" picker Large tappable cards (label or button). Selected/active state is a teal-soft fill + teal border. --other is the muted "Something else" escape hatch. Markup:
========================================================================= */ .ob-account-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); transition: border-color var(--dur-fast), box-shadow var(--dur-base) var(--ease-emphasized); } .ob-account-row:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); } .ob-account-row__logo { width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center; flex: none; background: var(--color-bg-sunken); color: var(--color-text-muted); overflow: hidden; } .ob-account-row__logo img { width: 26px; height: 26px; object-fit: contain; } .ob-account-row__body { min-width: 0; display: grid; gap: 5px; } .ob-account-row__name { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--color-text); } .ob-account-row__value { font-size: var(--fs-body-sm); color: var(--color-text-muted); margin: 0; line-height: var(--lh-normal); } .ob-account-row__value em { font-style: italic; color: var(--color-primary-text); font-weight: var(--fw-medium); } /* read-only consent scope chip — quiet, trustworthy */ .ob-account-row__scope { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--color-primary-text); margin-top: 2px; } .ob-account-row__scope svg { width: 13px; height: 13px; flex: none; } /* priority pill — essential / recommended / optional */ .ob-account-row__pill { font-size: var(--fs-micro); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); padding: 2px var(--space-2); border-radius: var(--radius-pill); border: 1px solid transparent; white-space: nowrap; } .ob-account-row__pill--essential { color: var(--color-primary-text); background: var(--color-primary-soft); border-color: color-mix(in srgb, var(--color-primary) 32%, var(--color-surface)); } .ob-account-row__pill--recommended { color: var(--color-accent-text); background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-accent) 36%, var(--color-surface)); } .ob-account-row__pill--optional { color: var(--color-text-subtle); background: var(--color-bg-sunken); border-color: var(--color-border); } /* the single Connect / Connected control sits in the third column. Use .btn .btn--tonal .btn--sm for "Connect"; swap to .btn--done for the connected state. This wrapper just keeps it from stretching. */ .ob-account-row__cta { flex: none; white-space: nowrap; } /* connected affirmation chip alternative to a button */ .ob-account-row__done { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--success-700); white-space: nowrap; } .ob-account-row__done svg { width: 16px; height: 16px; flex: none; } /* whole row reads "settled" once connected */ .ob-account-row.is-connected { border-color: var(--success-border); background: var(--success-bg); } @media (max-width: 480px) { .ob-account-row { grid-template-columns: auto 1fr; } .ob-account-row__cta, .ob-account-row__done { grid-column: 2; justify-self: start; } } /* ============================================================================ 5 · .ob-consent — per-scope toggle list + trust-ladder strip A grouped card of switch rows (one per data scope), capped by a calm, teal (never red) trust-ladder strip restating the guarantees. Markup:
Receipts & confirmations…
…
…
read-only explainable …
========================================================================= */ .ob-consent { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; } .ob-consent__scope { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); } .ob-consent__scope + .ob-consent__scope { border-top: 1px solid var(--color-border); } .ob-consent__scope-body { flex: 1; min-width: 0; } .ob-consent__scope-body b { display: block; font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--color-text); } .ob-consent__scope-body span { display: block; font-size: var(--fs-caption); color: var(--color-text-subtle); line-height: var(--lh-normal); margin-top: 2px; } /* the trust-ladder strip — Maitri's own voice, so it earns a faint aura edge */ .ob-consent__ladder { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-primary-soft) 60%, var(--color-surface)); } .ob-consent__ladder::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--maitri-aura); } .ob-consent__ladder i { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--color-primary-text); } .ob-consent__ladder i::before { content: ""; width: 5px; height: 5px; border-radius: var(--radius-round); background: var(--color-primary); flex: none; } /* ============================================================================ 6 · .ob-scan — the magical inbox-scan reveal A progress phase (orb + animated bar) that resolves into a "here's what I already know about you" card. The reveal carries Maitri's aura (left edge). Toggle phases with [data-phase]: data-phase="scanning" shows __progress, data-phase="done" shows __reveal (drive via inline JS / class swap). ========================================================================= */ .ob-scan { position: relative; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-8) var(--space-6); box-shadow: var(--shadow-2); } .ob-scan::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--maitri-aura); } /* scanning phase */ .ob-scan__phase { display: grid; justify-items: center; gap: var(--space-5); text-align: center; } .ob-scan__count { font-family: var(--font-mono); font-size: var(--fs-h2); font-weight: var(--fw-medium); color: var(--color-primary-text); line-height: 1; } .ob-scan__caption { font-size: var(--fs-body-sm); color: var(--color-text-muted); margin: 0; } /* the scanning bar — a track with a sweeping aura fill */ .ob-scan__bar { position: relative; width: 100%; max-width: 320px; height: 6px; border-radius: var(--radius-pill); background: var(--color-bg-sunken); overflow: hidden; } .ob-scan__bar::after { content: ""; position: absolute; inset: 0; width: 40%; border-radius: var(--radius-pill); background: var(--maitri-aura); animation: ob-scan-sweep var(--dur-ambient) var(--ease-in-out) infinite; } @keyframes ob-scan-sweep { 0% { transform: translateX(-110%); } 100% { transform: translateX(360%); } } /* reveal phase — the "what I already know" card */ .ob-scan__reveal { display: grid; gap: var(--space-4); } .ob-scan__reveal-head { display: flex; align-items: center; gap: var(--space-3); } .ob-scan__reveal-title { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--color-text); margin: 0; } .ob-scan__reveal-title em { font-style: italic; color: var(--color-primary-text); } /* a grid of discovered facts, mono-keyed like the vault peek */ .ob-scan__facts { display: grid; gap: var(--space-2); } .ob-scan__fact { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-bg-sunken); border-radius: var(--radius-md); font-size: var(--fs-body-sm); color: var(--color-text); } .ob-scan__fact b { font-family: var(--font-mono); font-weight: var(--fw-medium); color: var(--color-primary-text); white-space: nowrap; } .ob-scan__fact span { color: var(--color-text-muted); min-width: 0; } .ob-scan__note { font-size: var(--fs-caption); color: var(--color-text-subtle); margin: 0; } /* ============================================================================ 7 · .ob-payoff — the success handoff card The end-of-flow "you're set" moment. Calm success language (never loud), a hero orb, the affirmation, and the handoff CTA into the app. ========================================================================= */ .ob-payoff { position: relative; overflow: hidden; text-align: center; display: grid; justify-items: center; gap: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); padding: var(--space-12) var(--space-8); box-shadow: var(--shadow-3); } /* faint aura wash behind the payoff — Maitri welcoming you in */ .ob-payoff::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.10; background: var(--maitri-aura); z-index: 0; } .ob-payoff > * { position: relative; z-index: 1; } .ob-payoff__title { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--color-text); margin: 0; max-width: 20ch; } .ob-payoff__title em { font-style: italic; color: var(--color-primary-text); } .ob-payoff__sub { font-size: var(--fs-body-lg); color: var(--color-text-muted); margin: 0; max-width: 46ch; line-height: var(--lh-normal); } /* a quiet summary of what's now connected / ready */ .ob-payoff__summary { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); } /* ============================================================================ 8 · .ob-freeform — the "Something else" capture Framed as "help us build what's next": a generous textarea, optional chips to seed the answer, and a calm submit. Warm, not a dead-end form. ========================================================================= */ .ob-freeform { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-1); display: grid; gap: var(--space-4); } .ob-freeform__eyebrow { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--color-primary-text); margin: 0; } .ob-freeform__prompt { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--color-text); margin: 0; } .ob-freeform__prompt em { font-style: italic; color: var(--color-primary-text); } .ob-freeform__area { width: 100%; min-height: 132px; resize: vertical; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--color-text); background: var(--color-bg-sunken); border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } .ob-freeform__area::placeholder { color: var(--color-text-hint); } .ob-freeform__area:hover { border-color: var(--line-strong); } .ob-freeform__area:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: var(--shadow-focus); background: var(--color-surface); } /* optional seed chips — selectable */ .ob-freeform__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); } .ob-freeform__chip { cursor: pointer; font-family: var(--font-sans); display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); font-weight: var(--fw-medium); padding: 6px var(--space-3); border-radius: var(--radius-pill); background: var(--color-bg-sunken); color: var(--color-text-muted); border: 1px solid var(--color-border); transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast); } .ob-freeform__chip:hover { border-color: var(--line-strong); color: var(--color-text); } .ob-freeform__chip[aria-pressed="true"], .ob-freeform__chip.is-selected { background: var(--color-primary-soft); color: var(--color-primary-text); border-color: color-mix(in srgb, var(--color-primary) 32%, var(--color-surface)); } .ob-freeform__chip:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .ob-freeform__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .ob-freeform__note { font-size: var(--fs-caption); color: var(--color-text-subtle); margin: 0; } /* ============================================================================ Responsive — single column for the intent grid on narrow screens ========================================================================= */ @media (max-width: 560px) { .ob-intent-grid { grid-template-columns: 1fr; } } /* ============================================================================ Reduced motion — gate every custom keyframe / transition here. (Token durations already collapse to 0; this neutralizes the named anims and hover transforms so nothing surprises a motion-sensitive user.) ========================================================================= */ @media (prefers-reduced-motion: reduce) { .ob-scan__bar::after { animation: none; width: 100%; } .ob-intent-card:hover { transform: none; } .ob-progress__seg { transition: none; } .ob-intent-card, .ob-intent-card__check, .ob-account-row, .ob-freeform__area, .ob-freeform__chip { transition: none; } }