/* PayTP demo suite — framework-agnostic, theme-aware (light/dark), responsive. Themed entirely via CSS variables so the whole suite re-skins to whatever paytp.org adopts (and survives a PayTP→PayTP rename). */ /* Vars live on both :root (standalone page) and :host (the web component's shadow root) so the suite themes identically in either context. */ :root, :host { --bg: #fbfbfc; --panel: #ffffff; --ink: #14161a; --dim: #6a7180; --line: #e6e8ec; --accent: #3b5bdb; --accent-ink: #fff; --merchant: #94a3b8; --meed: #3b5bdb; --il: #4f6ef2; --wallet: #10b981; --os: #f59e0b; --fund: #8b5cf6; --ok: #16a34a; --bad: #dc2626; --mono: ui-monospace, SFMono-Regular, Menlo, monospace; --sans: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; } @media (prefers-color-scheme: dark) { :root, :host { --bg: #0e1014; --panel: #171a21; --ink: #e8eaed; --dim: #9aa2b1; --line: #262b34; --accent: #6b8afd; --accent-ink: #0e1014; } } :root[data-theme="dark"], :host([data-theme="dark"]) { --bg: #0e1014; --panel: #171a21; --ink: #e8eaed; --dim: #9aa2b1; --line: #262b34; --accent: #6b8afd; --accent-ink: #0e1014; } :root[data-theme="light"], :host([data-theme="light"]) { --bg: #fbfbfc; --panel: #ffffff; --ink: #14161a; --dim: #6a7180; --line: #e6e8ec; --accent: #3b5bdb; --accent-ink: #fff; } * { box-sizing: border-box; } /* :host carries the body-level styles when embedded (shadow root has no ). */ body, :host { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.5; } :host { display: block; } .top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); } .brand { display: flex; gap: .75rem; align-items: center; } .mark { color: var(--accent); font-size: 1.6rem; } h1 { font-size: 1.15rem; margin: 0; font-weight: 650; } h1 .dim { color: var(--dim); font-weight: 400; } .sub { margin: .15rem 0 0; color: var(--dim); font-size: .82rem; max-width: 60ch; } .theme { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; width: 38px; height: 38px; font-size: 1.1rem; cursor: pointer; } .layout { display: grid; grid-template-columns: 250px 1fr; gap: 0; min-height: 70vh; } .nav { border-right: 1px solid var(--line); padding: .75rem; } .nav button { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--ink); padding: .55rem .6rem; border-radius: 8px; cursor: pointer; font-size: .9rem; margin-bottom: .1rem; } .nav button .id { color: var(--dim); font-variant-numeric: tabular-nums; font-size: .78rem; margin-right: .4rem; } .nav button:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); } .nav button[aria-current="true"] { background: color-mix(in srgb, var(--accent) 15%, transparent); font-weight: 600; } .nav button:disabled { color: var(--dim); cursor: default; opacity: .55; } .stage { padding: 1.25rem 1.5rem; min-width: 0; } .status { color: var(--dim); padding: 2rem 0; } .status.err { color: var(--bad); } .demo-head h2 { margin: 0 0 .2rem; font-size: 1.25rem; } .proves { margin: 0 0 .8rem; color: var(--dim); max-width: 70ch; } .controls { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; } .tag { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); padding: .12rem .5rem; border-radius: 6px; font-size: .75rem; font-weight: 600; } .inputs { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .inputs label { font-size: .82rem; color: var(--dim); display: inline-flex; gap: .35rem; align-items: center; } .inputs select, .inputs input { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: .3rem .5rem; font-size: .85rem; } .run { background: var(--accent); color: var(--accent-ink); border: none; border-radius: 8px; padding: .45rem 1.1rem; font-size: .9rem; font-weight: 600; cursor: pointer; } .run:active { transform: translateY(1px); } .viz { min-height: 260px; } /* money-flow split view */ .flow { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.25rem; align-items: start; } .source { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.2rem; text-align: center; align-self: center; } .source .amt { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; } .source .lbl { color: var(--dim); font-size: .78rem; margin-top: .2rem; } .recips { display: flex; flex-direction: column; gap: .5rem; } .recip { display: grid; grid-template-columns: 1fr auto; gap: .1rem .8rem; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .55rem .8rem; } .recip .name { font-weight: 600; font-size: .9rem; } .recip .dest { grid-column: 1 / -1; color: var(--dim); font-family: var(--mono); font-size: .7rem; word-break: break-all; } .recip .amt { font-variant-numeric: tabular-nums; font-weight: 650; text-align: right; } .recip .bp { color: var(--dim); font-size: .75rem; text-align: right; } .bar { grid-column: 1 / -1; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; margin-top: .3rem; } .bar > span { display: block; height: 100%; width: 0; border-radius: 4px; transition: width .9s cubic-bezier(.2,.7,.2,1); } .recip.merchant .bar > span { background: var(--merchant); } .recip.il .bar > span { background: var(--il); } .recip.wallet .bar > span { background: var(--wallet); } .recip.os .bar > span { background: var(--os); } .recip.fund .bar > span { background: var(--fund); } .recip.meed .bar > span { background: var(--meed); } .maghead { font-size: .78rem; color: var(--dim); margin: .7rem 0 .1rem; font-weight: 600; letter-spacing: .01em; } .badge { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; font-size: .82rem; padding: .3rem .6rem; border-radius: 8px; } .badge.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); } .badge.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); } /* generic step list (non-split demos) */ .legend { font-size: .74rem; color: var(--dim); margin-bottom: .6rem; } .modetag { font-size: .66rem; font-weight: 700; padding: .05rem .35rem; border-radius: 5px; white-space: nowrap; } .modetag.exec { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); } .modetag.dep { color: var(--dim); background: color-mix(in srgb, var(--ink) 8%, transparent); } .modetag.off { color: var(--os); background: color-mix(in srgb, var(--os) 15%, transparent); } .step .modetag { align-self: center; } .steps { display: flex; flex-direction: column; gap: .5rem; } .step { display: flex; flex-wrap: wrap; gap: .7rem; align-items: baseline; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .85rem; opacity: 0; transform: translateY(6px); } /* "Under the hood — which code ran": per-step (or per-split-demo) map to the real RI entry points, with an executed/depicted/off-protocol tag inline on each row. */ .hood-code { flex-basis: 100%; margin-top: .5rem; border-top: 1px dashed var(--line); padding-top: .45rem; } .hood-code > summary { cursor: pointer; color: var(--dim); font-size: .74rem; font-weight: 600; list-style: none; } .hood-code > summary::-webkit-details-marker { display: none; } .hood-code > summary::before { content: "⌵ "; } .hood-code[open] > summary::before { content: "⌃ "; } .viz > .hood-code { margin-top: 1rem; } .codeline { display: grid; grid-template-columns: max-content 1fr; column-gap: .55rem; row-gap: .12rem; margin: .55rem 0 .2rem; } .codeline .modetag { grid-column: 1; align-self: start; margin-top: .1rem; } .codeline .cfn { grid-column: 2; font-family: var(--mono); font-size: .76rem; color: var(--accent); word-break: break-word; font-weight: 600; } .codeline .cpath { grid-column: 2; font-family: var(--mono); font-size: .68rem; color: var(--dim); word-break: break-all; } .codeline .cdoes { grid-column: 2; font-size: .78rem; color: var(--ink); line-height: 1.45; } .step .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); font-weight: 700; min-width: 92px; } .step.reject .k { color: var(--bad); } .step.ok .k { color: var(--ok); } .step .d { font-size: .9rem; } .step .d .mono { font-family: var(--mono); font-size: .8rem; color: var(--dim); } .hood { margin-top: 1.4rem; border-top: 1px solid var(--line); padding-top: .8rem; } .hood summary { cursor: pointer; color: var(--dim); font-size: .85rem; } .hood-note { font-size: .82rem; color: var(--dim); margin: .5rem 0; } .trace { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .8rem; font-family: var(--mono); font-size: .72rem; overflow-x: auto; max-height: 320px; } .foot { padding: 1rem 1.5rem; border-top: 1px solid var(--line); color: var(--dim); font-size: .78rem; } code { font-family: var(--mono); font-size: .9em; } /* Embedded in the website: the site provides header/nav/footer, so hide the demo's own page chrome — only the demo nav + stage remain, reading as a subpage. */ :root.embed .top, :root.embed .foot { display: none; } :root.embed body { background: transparent; } :root.embed .stage { padding-top: 1rem; } @media (max-width: 720px) { .layout { grid-template-columns: 1fr; } .nav { border-right: none; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .25rem; } .nav button { width: auto; } .flow { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .bar > span { transition: none; } .step { transition: none; opacity: 1; transform: none; } }