/* COSIGNA account / sign-in SPA — brand v0.1.1 ink/paper/gold. Tokens + topbar + buttons COPIED from desktop-initiator/initiator.css so the two SPAs share one design system. Single-column, centred reading width. */ /* ── Tokens ──────────────────────────────────────────────────────────────── */ /* WP2 complete: tokens.css (linked in before this file) supplies every canonical token AND the legacy-alias block, so this file's plain :root forwarders are gone. The only per-file token override that remains is the dark-mode --grad below (a lighter panel gradient, NOT the canonical header gradient). */ /* ── Dark mode ───────────────────────────────────────────────────────────── */ /* Only --grad is overridden per-file: a lighter panel gradient (surface-ivory → border-default) that deliberately differs from tokens.css's canonical header gradient (--gradient-header). All other dark tokens come from tokens.css. */ [data-theme="dark"] { --grad: linear-gradient(135deg, var(--surface-ivory, #1d3147), var(--border-default, #27405e)); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --grad: linear-gradient(135deg, var(--surface-ivory, #1d3147), var(--border-default, #27405e)); } } /* ── Reset ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; } body { font-family: var(--font); /* v0.532.0 D-5b WP4: aurora ABOVE base --bg; WP5: --material-body-bg paper shields body text from the aurora (AA contrast) */ background: var(--material-body-bg), var(--material-aurora), var(--bg); background-repeat: no-repeat; background-attachment: fixed; color: var(--text); min-height: 100dvh; } /* ── Topbar ──────────────────────────────────────────────────────────────── */ /* W2-A A2: header SKIN properties deleted — topbar.css/.cg-topbar--app now owns background, color, padding, layout, border-bottom, brand-lockup height, and lang-flag* rules. .topbar CLASS is RETAINED: .topbar .btn--ghost (:125-129) and descendant ghost-button rules depend on it. */ .topbar { /* skin intentionally empty — governed by topbar.css .cg-topbar--app */ } .topbar__brand { display: flex; align-items: center; gap: var(--s3); font-size: 18px; font-weight: 800; letter-spacing: -0.3px; color: var(--on-ink, #FAF8F3); /* v0.324.0: brand is now an — strip link chrome, keep visual intact. */ text-decoration: none; } .topbar__brand svg { flex-shrink: 0; } /* W2-A A2: bare .brand-lockup (32px + @1024 56px) deleted — governed by topbar.css .cg-topbar--app .brand-lockup (44px @desktop). */ /* W2-A A2: bare .lang-flag / .lang-flag__btn / .lang-flag__caret / .lang-flag__menu deleted — governed by topbar.css .cg-topbar--app .lang-flag* rules. */ /* v0.503.0 S-F1 (design call #12): .topbar__status small-pill override REMOVED. The element now carries .cg-topbar__title (governed by topbar.css) — large, bold, centered. The old pill (13px, rounded bg, absolute+translateX positioning) was overriding the governed title-block style. topbar.css .cg-topbar__title-block grid centering supersedes this. */ .topbar__actions { display: flex; gap: var(--s2); align-items: center; } /* The topbar is ALWAYS dark (--ink); .btn--ghost defaults to var(--text) which is navy in light mode → invisible icons. Scope topbar ghost buttons to paper-on-ink. (Mirrors initiator fix.) */ .topbar .btn--ghost { color: var(--on-ink, #FAF8F3); border-color: rgba(250, 248, 243, 0.35); } .topbar .btn--ghost:hover { background: rgba(250, 248, 243, 0.12); } /* ── Page layout ─────────────────────────────────────────────────────────── */ .page { max-width: 640px; margin: 0 auto; padding: var(--s6) var(--s5) var(--s12); } .account-shell { display: flex; flex-direction: column; gap: var(--s5); } .auth-card { max-width: 460px; margin: var(--s8) auto 0; width: 100%; } /* ── Cards grid (Task A) ───────────────────────────────────────────────────── Signed-in cards stack in one column on phones; on wide viewports they flow into two columns so the page stops wasting horizontal space. align-items:start keeps each card sized to its own content (no awkward equal-height stretching). */ .cards-grid { display: flex; flex-direction: column; gap: var(--s5); } /* v0.78.0: on wide viewports, MASONRY the cards via CSS multi-column instead of a 2-col grid. The grid + align-items:start left BLANK ZONES under short cards (Buy credits, passkeys) because each grid row aligned to its tallest cell. Columns pack each card tightly top-to-bottom (hidden display:none cards are skipped), so the page has no dead space. break-inside keeps cards whole. */ @media (min-width: 960px) { .page { max-width: 980px; } .cards-grid { display: block; column-count: 2; column-gap: var(--s5); } .cards-grid > .card { break-inside: avoid; margin-bottom: var(--s5); } } /* ── Cards ───────────────────────────────────────────────────────────────── */ .card { /* v0.532.0 D-5b WP4: material card glass (account cards grid) */ background: var(--material-card-bg, linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.52))); border: 1px solid var(--material-card-border, rgba(255,255,255,.72)); border-radius: var(--material-card-radius, 14px); padding: var(--s5); backdrop-filter: var(--material-card-blur, blur(16px) saturate(1.45)); -webkit-backdrop-filter: var(--material-card-blur, blur(16px) saturate(1.45)); box-shadow: var(--material-card-rim, inset 0 1px 0 rgba(255,255,255,.95), 0 8px 22px -12px rgba(20,37,61,.30)); animation: agFadeIn .3s ease; } .card__title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); color: var(--text); } .card__title .icon { font-size: 18px; } .muted-intro { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-bottom: var(--s4); } /* ── Form elements ───────────────────────────────────────────────────────── */ label.field-label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: var(--s1); } input[type="text"], input[type="email"], select { width: 100%; padding: var(--s3) var(--s4); border: 1.5px solid var(--border); border-radius: var(--ag-radius-md); font-family: var(--font); font-size: 14px; background: var(--field); color: var(--text); transition: border-color .2s; } input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(20,37,61,.12); } /* ── Buttons ─────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: 12px var(--s6); border: none; border-radius: var(--ag-radius-lg); font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer; min-height: 44px; transition: transform .15s, box-shadow .15s, opacity .2s; text-decoration: none; white-space: nowrap; } .btn:active { transform: scale(.97); } .btn:disabled { opacity: .4; cursor: not-allowed; } .btn--primary { background: var(--grad); color: var(--on-ink, #FAF8F3); box-shadow: 0 2px 12px rgba(20,37,61,.18); } .btn--primary:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 4px 18px rgba(20,37,61,.28); } .btn--ghost { background: transparent; border: 1.5px solid var(--border); color: var(--text); } .btn--ghost:hover { background: var(--bg); } .btn--danger { background: var(--danger); color: white; } .btn--success { background: var(--success); color: white; } .btn--sm { padding: 8px var(--s4); font-size: 13px; min-height: 34px; } .btn-row { display: flex; gap: var(--s3); flex-wrap: wrap; } /* ── Key/value rows (profile) ────────────────────────────────────────────── */ .kv-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); padding: var(--s2) 0; border-bottom: 1px solid var(--border); font-size: 14px; } .kv-row:last-child { border-bottom: none; } .kv-row__key { color: var(--text-muted); font-size: 13px; } .kv-row__val { color: var(--text); text-align: right; word-break: break-all; } /* ── Device list ─────────────────────────────────────────────────────────── */ .device-list { display: flex; flex-direction: column; gap: var(--s3); } .device-item { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); border: 1px solid var(--border); border-radius: var(--ag-radius-lg); background: var(--bg); } .device-item__row { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: flex-end; } .device-item__field { flex: 1 1 160px; min-width: 0; } .device-item__meta { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); } .device-item__actions { display: flex; gap: var(--s2); flex-wrap: wrap; } /* v0.44.0: unified-inventory badges + borrowed/public note */ .device-item__badges { display: flex; gap: var(--s2); flex-wrap: wrap; } .device-badge { display: inline-block; font-size: 11px; font-weight: 600; line-height: 1.4; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); background: var(--surface); } .device-badge--passkey { color: var(--accent, var(--text)); border-color: var(--accent, var(--border)); } .device-badge--current { color: #fff; background: var(--success, #0F766E); border-color: transparent; } .device-item__note { font-size: 12px; color: var(--text-muted); line-height: 1.5; } /* ── Session list (v0.45.0) — compact, revocable browser sessions ────────────── Deliberately NOT styled like the nameable passkey cards: a single tight row, neutral label, timestamps, and a sign-out button. Stacks vertically within its column. */ .session-list { display: flex; flex-direction: column; gap: var(--s2); } .session-item { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--border); border-radius: var(--ag-radius-lg); background: var(--bg); } .session-item--current { border-color: var(--success); } .session-item__info { min-width: 0; } .session-item__head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; } .session-item__label { font-size: 14px; font-weight: 600; color: var(--text); } .session-item .device-item__meta { margin-top: 2px; } .session-item__revoke { flex: 0 0 auto; } /* ── Referral funnel ─────────────────────────────────────────────────────── */ .referral-stats { display: flex; gap: var(--s3); } .referral-stat { flex: 1 1 0; min-width: 0; text-align: center; padding: var(--s4) var(--s2); border: 1px solid var(--border); border-radius: var(--ag-radius-lg); background: var(--bg); } .referral-stat__num { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--accent); } .referral-stat__lbl { display: block; margin-top: var(--s1); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); } /* ── Divider with text ───────────────────────────────────────────────────── */ .or-divider { display: flex; align-items: center; gap: var(--s3); color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; } .or-divider::before, .or-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* ── Form / status messages ──────────────────────────────────────────────── */ .form-msg { font-size: 13px; line-height: 1.5; margin-top: var(--s3); min-height: 1px; } .form-msg:empty { margin-top: 0; } .form-msg--error { color: var(--danger); } .form-msg--success { color: var(--success); } .form-msg--info { color: var(--text-muted); } /* ── Spinner ─────────────────────────────────────────────────────────────── */ .spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--ink); border-radius: var(--ag-radius-full); animation: agSpin .8s linear infinite; margin: 0 auto; } /* ── Animations ──────────────────────────────────────────────────────────── */ @keyframes agFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } } @keyframes agSpin { to { transform:rotate(360deg); } } /* ── v0.72.0 S-buycredits: balance chip, buy-credits packs, Stripe-return toast ───────────── */ .credit-chip { display: inline-flex; align-items: center; gap: var(--s2); background: rgba(195,161,75,.12); border: 1px solid var(--gold); border-radius: var(--ag-radius-full); padding: var(--s2) var(--s4); font-size: 14px; color: var(--text); margin-bottom: var(--s4); } .credit-chip strong { font-size: 16px; } .credit-chip__sep { opacity: .5; } .credit-chip__never { font-size: 12px; color: var(--text-muted); } .credit-toast { background: var(--surface,#fff); border: 1px solid var(--border,#e3ddd0); border-radius: 12px; padding: var(--s3) var(--s4); margin-bottom: var(--s4); font-size: 14px; display: flex; align-items: center; } .credit-toast--success { border-color: var(--success); color: var(--success); font-weight: 600; } .credit-packs { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); } .credit-pack { flex: 1 1 120px; min-width: 110px; text-align: center; border: 1px solid var(--border,#e3ddd0); border-radius: 12px; padding: var(--s4) var(--s3); display: flex; flex-direction: column; gap: var(--s2); align-items: center; } .credit-pack__credits { font-size: 18px; font-weight: 700; } .credit-pack__price { font-size: 14px; color: var(--text-muted); } .credit-pack__buy { width: 100%; } /* v0.98.0 — Data & danger zone: export-first, then a deliberate hold-to-DELETE. */ .danger-sep { border: none; border-top: 1px solid var(--border); margin: var(--s5) 0 var(--s4); } /* #C0392B = Material Design red-700 / danger zone colour; close to but distinct from --verdict-danger (#B91C1C) This is UI chrome for a destructive action (account delete), NOT an integrity verdict → skin token. Using --state-abort (#B3261E) is close; #C0392B kept as skin literal pending Opus ruling. */ .card__title.danger { color: #C0392B; } .delete-hold-label { text-align: center; font-weight: 800; font-size: 14px; color: #C0392B; margin: var(--s2) 0 6px; line-height: 1.4; } .delete-seal-mount { display: flex; justify-content: center; margin: 4px 0 var(--s2); } /* the danger hold reuses the shared gesture ring; --gold is overridden to red inline (account.js). */ .delete-confirm__pre { font-size: 13px; color: var(--text-muted); font-weight: 600; } /* v0.531.0: Appearance theme selector — a 3-way segmented control. All colours are tokens (so the control itself is theme-aware in both modes); the checked state is the known-good gold+navy pair (the v0.529.5 join-btn fix, 6.26:1 light / ~8:1 dark). */ .theme-select { display: flex; margin-top: 4px; border: 1px solid var(--border); border-radius: var(--ag-radius-md); overflow: hidden; } .theme-opt { flex: 1; padding: 8px 10px; background: transparent; border: 0; border-right: 1px solid var(--border); color: inherit; font: inherit; font-size: 14px; cursor: pointer; transition: background .15s; } .theme-opt:last-child { border-right: 0; } .theme-opt:hover { background: var(--surface-ivory); } .theme-opt[aria-checked="true"] { background: var(--brand-gold); color: #14253D; font-weight: 600; }