/* Paypump Pulse — identity provider account pages (sign in, accept invitation). --------------------------------------------------------------------------------------------- Served by THIS service, from its own wwwroot. That is the point: these pages must render when Pulse is down. They are a different service with a different deploy, and pulling CSS from the hub would couple the group login path to the hub's availability. Tokens mirror web/src/App.css. Light on bare :root; dark only REDEFINES. Three states, same contract: no explicit choice follows the system, and an explicit choice wins in both directions. The theme arrives as the pulse.theme cookie and is stamped server-side on . */ @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/instrument-sans-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/instrument-sans-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/instrument-sans-latin-700-normal.woff2') format('woff2'); } :root { --bg: #f7f8f4; --card: #ffffff; --ink: #1c2622; --ink-soft: #5c6763; --muted: #8a948f; --line: #e9ebe3; --field: #ffffff; --accent: #5f7d00; --accent-hover: #465e00; --on-accent: #ffffff; --brand: #5f7d00; --brand-glow: rgba(95, 125, 0, 0.22); --bad: #a83b2a; --bad-bg: #fdf1ef; --ok: #4f7a1f; --shadow: 0 14px 40px rgba(24, 26, 16, 0.07); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --bg: #161616; --card: #1f1f1f; --ink: #e8eae6; --ink-soft: #9aa09b; --muted: #7c837e; --line: #2e2e2e; --field: #191919; --accent: #a9e000; --accent-hover: #c2f23f; --on-accent: #161616; --brand: #a9e000; --brand-glow: rgba(169, 224, 0, 0.4); --bad: #e0776a; --bad-bg: #2a1b18; --ok: #a9e000; --shadow: 0 14px 40px rgba(0, 0, 0, 0.35); } } :root[data-theme='dark'] { --bg: #161616; --card: #1f1f1f; --ink: #e8eae6; --ink-soft: #9aa09b; --muted: #7c837e; --line: #2e2e2e; --field: #191919; --accent: #a9e000; --accent-hover: #c2f23f; --on-accent: #161616; --brand: #a9e000; --brand-glow: rgba(169, 224, 0, 0.4); --bad: #e0776a; --bad-bg: #2a1b18; --ok: #a9e000; --shadow: 0 14px 40px rgba(0, 0, 0, 0.35); } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); color: var(--ink); font: 13px/1.5 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; } .card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 34px 36px; width: 100%; max-width: 400px; box-shadow: var(--shadow); } /* The lockup follows --brand: lime with its glow on charcoal exactly as the prototype draws it, deep olive on white where the lime would sit near 1.8:1 against the card. */ .brand { display: flex; align-items: center; gap: 9px; } .wordmark { font-size: 18px; font-weight: 700; letter-spacing: 0.24em; color: var(--brand); text-shadow: 0 0 16px var(--brand-glow); line-height: 1; } .beat { width: 34px; height: 14px; display: block; flex-shrink: 0; overflow: visible; color: var(--brand); } /* The heartbeat draws itself once on load and then stays drawn — not the prototype's infinite loop. See brain/DECISIONS.md (2026-09-26). `both` is what holds the drawn state; without a fill mode the line snaps back to undrawn the instant it finishes. pathLength="1" makes dasharray 1 the whole line whatever the geometry measures. */ .beat polyline { stroke-dasharray: 1; animation: pulse-draw 1.2s ease-out 0.15s both; } @keyframes pulse-draw { from { stroke-dashoffset: 1; opacity: 0.15; } to { stroke-dashoffset: 0; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .beat polyline { animation: none; stroke-dashoffset: 0; opacity: 1; } } .sub { margin: 9px 0 26px; color: var(--ink-soft); font-size: 12.5px; } label { display: block; font-weight: 600; font-size: 11.5px; margin-bottom: 6px; } input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); color: var(--ink); font-family: inherit; font-size: 13px; margin-bottom: 16px; } /* One ring, not two. Tinting the border as well as drawing an offset outline stacks into a heavy double halo — very loud on the lime accent, and it shows on load because a field autofocuses. */ input:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--line); } button { width: 100%; padding: 11px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } button:hover { background: var(--accent-hover); } .err { background: var(--bad-bg); border: 1px solid var(--bad); color: var(--bad); padding: 10px 12px; border-radius: 8px; margin-bottom: 16px; font-size: 12.5px; } .ok { color: var(--ok); font-size: 12.5px; font-weight: 600; } .hint { margin: 0 0 16px; color: var(--muted); font-size: 11.5px; line-height: 1.5; } .done { margin: 0 0 18px; font-size: 12.5px; color: var(--ink-soft); } /* ── Account pages beyond sign-in (challenge, set-up, security, reset) ───────────────────────── Same tokens, same card. The security page is the only wide one: it lists devices and passkeys, and a 400px column would wrap every row. */ .card.wide { max-width: 580px; } h2 { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 28px 0 10px; } h2:first-of-type { margin-top: 4px; } .links { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* A second choice next to the primary one — outlined so the page keeps one obvious next step. */ button.secondary, .button.secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); } button.secondary:hover { background: var(--bg); } button.danger { background: transparent; color: var(--bad); border: 1px solid var(--bad); } button.danger:hover { background: var(--bad-bg); } button.small { width: auto; padding: 6px 14px; font-size: 11.5px; } button:disabled { opacity: 0.55; cursor: default; } .stack > * + * { margin-top: 10px; } .check { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 12.5px; margin: -4px 0 16px; } .check input { width: auto; margin: 0; } .divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11.5px; margin: 18px 0; } .divider::before, .divider::after { content: ''; flex: 1; border-top: 1px solid var(--line); } /* The QR sits on white in both themes: authenticator apps read dark-on-light, and an inverted code fails to scan on a fair number of them. */ .qr { background: #fff; border-radius: 10px; padding: 12px; width: 196px; margin: 0 auto 14px; } .qr svg { display: block; width: 172px; height: 172px; } .secret { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12px; letter-spacing: 0.08em; word-break: break-all; text-align: center; color: var(--ink-soft); margin: 0 0 18px; } .codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 8px; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 13px; letter-spacing: 0.06em; margin-bottom: 16px; } .item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); } .item:last-of-type { border-bottom: 1px solid var(--line); } .item-main { min-width: 0; } .item-name { font-weight: 600; } .item-sub { color: var(--muted); font-size: 11.5px; } .item form { margin: 0; } .state { font-size: 11.5px; font-weight: 600; } .state.on { color: var(--ok); } .state.off { color: var(--muted); } .muted { color: var(--muted); } .note { color: var(--ink-soft); font-size: 12px; margin: 0 0 14px; } .app { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-weight: 600; } .app + .app { margin-top: 8px; } .app:hover { border-color: var(--accent); text-decoration: none; } .app span { color: var(--accent); } @media (max-width: 480px) { .card { padding: 26px 20px; } .codes { grid-template-columns: 1fr; } }