/* * Shared styling for the animated product prototypes in public/proto/. * * These are real HTML documents loaded in same-origin iframes on the marketing pages — not GIFs, * not screenshots. That buys three things a video cannot: they are ~10KB instead of megabytes, the * text inside is real DOM (so it never goes stale against a UI change the way a recording does), * and they follow the visitor's theme. * * THEME. The parent page keeps its theme as a class on and an iframe is a separate document, * so it inherits nothing. The tokens below are therefore duplicated here deliberately, kept in step * with app/globals.css by hand. The document is dark by default (the brand is dark-first) and the * parent stamps data-theme="light" via ?theme= and postMessage. prefers-color-scheme is the * fallback for a direct visit to the file with no parent to ask. */ :root { --bg: #121316; --fg: #e0e1e5; --card: #1e1f24; --muted: #2a2b31; --muted-fg: #a0a2a9; --border: #2c2d34; --accent: #c9c2f0; --orange: #ff8c3f; --success: #5fd39b; --danger: #f6889a; --shadow: 0 8px 30px rgb(0 0 0 / 0.35); } :root[data-theme="light"] { --bg: #f1f2f6; --fg: #1f2229; --card: #fafafc; --muted: #e9eaf0; --muted-fg: #63667a; --border: #dcdde6; --accent: #6d5fc0; --orange: #c25708; --success: #1f9d63; --danger: #c2405c; --shadow: 0 8px 30px rgb(20 20 40 / 0.10); } /* A direct visit with no parent to tell us the theme. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #f1f2f6; --fg: #1f2229; --card: #fafafc; --muted: #e9eaf0; --muted-fg: #63667a; --border: #dcdde6; --accent: #6d5fc0; --orange: #c25708; --success: #1f9d63; --danger: #c2405c; --shadow: 0 8px 30px rgb(20 20 40 / 0.10); } } * { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow: hidden; /* the frame is sized exactly; nothing should ever scroll inside it */ } /* ---- The device chrome every scene sits in ---- */ .screen { width: 100%; height: 100%; padding: 18px; display: flex; flex-direction: column; gap: 12px; } .panel { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; } .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-fg); } .num { font-variant-numeric: tabular-nums; } .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted-fg); } .chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .chip.is-online { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); } .chip.is-offline { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 45%, transparent); } /* A cart/ledger line. `.is-new` is what plays when a row lands. */ .line { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: 13px; } .line:last-child { border-bottom: 0; } .line .sub { font-size: 11.5px; color: var(--muted-fg); } @keyframes land { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .is-new { animation: land 260ms ease-out both; } @keyframes flash { 0%, 100% { background: transparent; } 30% { background: color-mix(in srgb, var(--accent) 22%, transparent); } } .is-flash { animation: flash 700ms ease-out; } .banner { font-size: 12.5px; padding: 9px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent); background: color-mix(in srgb, var(--orange) 12%, transparent); color: var(--orange); } .banner.is-good { border-color: color-mix(in srgb, var(--success) 45%, transparent); background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); } .total { font-size: 20px; font-weight: 700; } .muted { color: var(--muted-fg); } .accent { color: var(--accent); } .bar { height: 6px; border-radius: 999px; background: var(--muted); overflow: hidden; } .bar > i { display: block; height: 100%; background: var(--accent); transition: width 500ms ease; } /* * Someone who has asked for less motion still gets the scene — the runtime settles it on its final, * most informative frame instead of looping. So we only disable the transitions, never the content. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } }