/* ============================================================================ PokéTerminal — design system · "Trading Terminal" OLED-black canvas, sharp corners, mono numerics. A live Pokémon-card trading platform. Bricolage Grotesque (display) + Plus Jakarta Sans (body) + JetBrains Mono (prices). Accent is THEMED — switch via : emerald (default) · electric · amber · synth · crimson. Up/down stay green/red across every theme. Retune a [data-theme] block → whole site shifts. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root{ /* ── spacing ───────────────────────────────────────────────────────── */ --space-xs:.25rem; --space-sm:.5rem; --space-md:1rem; --space-lg:1.5rem; --space-xl:2rem; --space-2xl:3rem; --space-3xl:4rem; /* ── radii / shadow / motion — sharp + terminal ────────────────────── */ --r-sm:4px; --r-md:6px; --r-lg:10px; --r-xl:14px; --r-full:999px; --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 2px 6px rgba(0,0,0,.5),0 10px 30px -12px rgba(0,0,0,.7); --shadow-lg:0 4px 10px -4px rgba(0,0,0,.55),0 24px 48px -20px rgba(0,0,0,.75); --shadow-xl:0 30px 60px -20px rgba(0,0,0,.85); --ease:cubic-bezier(.16,1,.3,1); /* Expo.out */ --ease-snap:cubic-bezier(.4,0,.2,1); /* snappy, PokeTrace-style */ --t-fast:150ms; --t:200ms; --t-slow:300ms; --t-slower:450ms; --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --font-display:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --maxw:1180px; /* ── semantics: up/down + warn are FIXED across all themes ─────────── */ --success:#14D671; --success-dim:rgba(20,214,113,.15); --destructive:#F87171; --destructive-dim:rgba(248,113,113,.14); --warn:#F5B642; --warn-dim:rgba(245,182,66,.14); } /* ══ THEMES ═══════════════════════════════════════════════════════════════ swaps the accent + canvas. Default (no attr) = emerald. */ /* DEFAULT = Mono: professional black & white. Accent is white; colour is used only surgically (up/down green/red, small live dots). White CTAs, warm-white text on OLED black — the PokeTrace look. */ :root,[data-theme="mono"]{ --bg:#000000; --bg-elevated:#0A0A0A; --card:#0D0D0F; --muted:#161618; --fg:#F6F6F4; --fg-muted:#A0A0A7; --border:rgba(255,255,255,.12); --border-soft:rgba(255,255,255,.06); --primary:#FAFAF8; --primary-2:#FFFFFF; --on-primary:#0A0A0A; --secondary:var(--fg); --accent:#FAFAF8; --on-accent:#0A0A0A; --accent-glow:rgba(255,255,255,.15); --ring:rgba(255,255,255,.55); } [data-theme="emerald"]{ --bg:#000000; --bg-elevated:#0A0A0F; --card:#0E0E13; --muted:#16161C; --fg:#F5F7F5; --fg-muted:#9CA3AF; --border:rgba(255,255,255,.10); --border-soft:rgba(255,255,255,.055); --primary:#10B981; --primary-2:#34D399; --on-primary:#04140E; --secondary:var(--fg); --accent:#34D399; --on-accent:#04140E; --accent-glow:rgba(16,185,129,.32); --ring:#10B981; } [data-theme="electric"]{ --bg:#000000; --bg-elevated:#0A0B12; --card:#0E0F16; --muted:#16171F; --fg:#FFFFFF; --fg-muted:#8B94A3; --primary:#2F5BF9; --primary-2:#5B7FFF; --on-primary:#FFFFFF; --secondary:var(--fg); --accent:#5B7FFF; --on-accent:#FFFFFF; --accent-glow:rgba(47,91,249,.36); --ring:#2F5BF9; } [data-theme="amber"]{ --bg:#000000; --bg-elevated:#0E0B06; --card:#14100A; --muted:#1C160C; --fg:#FBF7EF; --fg-muted:#9C9182; --primary:#F59E0B; --primary-2:#FBBF24; --on-primary:#1A1200; --secondary:var(--fg); --accent:#FBBF24; --on-accent:#1A1200; --accent-glow:rgba(245,158,11,.32); --ring:#F59E0B; } [data-theme="synth"]{ --bg:#05030A; --bg-elevated:#0C0916; --card:#100C1C; --muted:#191327; --fg:#F3EFFA; --fg-muted:#968CAA; --primary:#A855F7; --primary-2:#C084FC; --on-primary:#12071F; --secondary:var(--fg); --accent:#22D3EE; --on-accent:#04121A; --accent-glow:rgba(168,85,247,.40); --ring:#A855F7; } [data-theme="crimson"]{ --bg:#000000; --bg-elevated:#120608; --card:#17090C; --muted:#1F0F13; --fg:#FBF1F2; --fg-muted:#A08A8E; --primary:#F43F5E; --primary-2:#FB7185; --on-primary:#1A0206; --secondary:var(--fg); --accent:#FB7185; --on-accent:#1A0206; --accent-glow:rgba(244,63,94,.36); --ring:#F43F5E; } /* display font on headings + brand (Bricolage Grotesque) */ h1,h2,h3,.brand,.h-display{ font-family:var(--font-display); letter-spacing:-.02em } /* ── reset ───────────────────────────────────────────────────────────── */ *,*::before,*::after{ box-sizing:border-box } *{ scrollbar-width:thin; scrollbar-color:var(--border) transparent } html{ -webkit-text-size-adjust:100% } body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--font); font-size:16px; line-height:1.55; font-feature-settings:'ss01' 1; font-optical-sizing:auto; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; display:block } h1,h2,h3{ line-height:1.2; margin:0 } h1{ font-family:var(--font-display); font-size:clamp(2rem,1.35rem + 2.8vw,3.25rem); font-weight:800; letter-spacing:-.035em; line-height:1.05; text-wrap:balance } h2{ font-family:var(--font-display); font-size:clamp(1.35rem,1.12rem + .8vw,1.7rem); font-weight:700; letter-spacing:-.02em; text-wrap:balance } h3{ font-size:1rem; font-weight:700 } p{ margin:0 } a{ color:var(--primary); text-decoration:none; transition:color var(--t) var(--ease) } a:hover{ color:var(--secondary) } ::selection{ background:rgba(47,91,249,.35); color:#fff } ::-webkit-scrollbar{ width:10px; height:10px } ::-webkit-scrollbar-thumb{ background:var(--border); border-radius:999px; border:2px solid var(--bg) } ::-webkit-scrollbar-thumb:hover{ background:var(--fg-muted) } ::-webkit-scrollbar-track{ background:transparent } /* ── ambient: one anchored gold wash + fine grain ("expensive paper") ── */ body::before{ content:''; position:fixed; inset:0 0 auto 0; height:560px; z-index:-2; pointer-events:none; background:radial-gradient(120% 70% at 50% -18%,rgba(47,91,249,.07),transparent 60%) } html::after{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:140px } /* ── focus (a11y) ────────────────────────────────────────────────────── */ :focus-visible{ outline:2px solid var(--ring); outline-offset:2px } /* two-tone ring so the gold ring stays visible on gold/green button fills */ .btn:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ring) } .skip-link{ position:fixed; top:.5rem; left:.5rem; z-index:200; transform:translateY(-160%); background:var(--card); color:var(--fg); border:1px solid var(--border); padding:.6rem 1rem; border-radius:var(--r-md); transition:transform var(--t) var(--ease) } .skip-link:focus{ transform:none } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0 } /* ── layout ──────────────────────────────────────────────────────────── */ .wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--space-md) } @media(min-width:768px){ .wrap{ padding-inline:var(--space-lg) } } .stack>*+*{ margin-top:var(--space-md) } .grid{ display:grid; gap:var(--space-md) } .cards{ grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:var(--space-lg) } .row{ display:flex; gap:var(--space-md); flex-wrap:wrap } .col{ flex:1 1 300px; min-width:0 } .between{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-md) } .section{ margin-block:var(--space-2xl) } .section-head{ display:flex; align-items:end; justify-content:space-between; gap:var(--space-md); margin-bottom:var(--space-md); border-bottom:1px solid var(--border-soft); padding-bottom:var(--space-sm) } /* ── header / nav ───────────────────────────────────────────────────── */ .nav{ position:sticky; top:0; z-index:40; background:rgba(6,6,10,.72); backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%); border-bottom:1px solid transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); } .nav.scrolled{ border-bottom-color:var(--border-soft); box-shadow:0 1px 0 rgba(0,0,0,.4) } .nav .wrap{ display:flex; align-items:center; gap:var(--space-lg); min-height:60px } .brand{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--fg); letter-spacing:-.02em; white-space:nowrap } .brand:hover{ color:var(--fg) } /* brand mark = the tcgterminal-mark.svg logo (a self-contained white-card + arrow graphic) — size it by HEIGHT, width auto, no background box (the artwork is its own lockup; a gradient tile behind it would double up). */ .brand .mark{ display:inline-flex; align-items:center; height:28px; flex:none } .brand .mark img{ height:100%; width:auto; display:block } .nav nav{ display:flex; align-items:center; gap:var(--space-md); margin-left:auto; font-size:.9rem; flex-wrap:wrap; justify-content:flex-end } .nav nav a{ color:var(--fg-muted); font-weight:500; min-height:44px; display:inline-flex; align-items:center } .nav nav a:hover{ color:var(--fg) } /* animated underline on text links (not the buttons) */ .nav nav a:not(.btn){ position:relative } .nav nav a:not(.btn)::after{ content:''; position:absolute; left:0; bottom:8px; height:1px; width:0; background:currentColor; transition:width var(--t) var(--ease) } .nav nav a:not(.btn):hover::after,.nav nav a:not(.btn)[aria-current="page"]::after{ width:100% } .nav-user{ color:var(--fg-muted); font-size:.8rem; max-width:16ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } /* ── mobile nav: hamburger toggle (injected as a sibling of #nav-auth by CX.renderNav in app.js — zero per-page markup) collapses the links into a tap-open accordion under the sticky header instead of wrapping into a tall wall of rows. Hidden entirely ≥761px so desktop is untouched. ────── */ .nav-toggle{ display:none; flex:none; align-items:center; justify-content:center; width:44px; height:44px; margin-left:auto; background:none; border:1px solid var(--border); border-radius:var(--r-md); color:var(--fg); cursor:pointer; transition:border-color var(--t) var(--ease) } .nav-toggle:hover{ border-color:var(--fg-muted) } .nav-toggle .bar{ display:block; width:18px; height:2px; background:currentColor; position:relative } .nav-toggle .bar::before,.nav-toggle .bar::after{ content:''; position:absolute; left:0; width:18px; height:2px; background:currentColor; transition:transform var(--t) var(--ease), top var(--t) var(--ease), opacity var(--t) var(--ease) } .nav-toggle .bar::before{ top:-6px } .nav-toggle .bar::after{ top:6px } .nav-toggle[aria-expanded="true"] .bar{ background:transparent } .nav-toggle[aria-expanded="true"] .bar::before{ top:0; transform:rotate(45deg) } .nav-toggle[aria-expanded="true"] .bar::after{ top:0; transform:rotate(-45deg) } @media(max-width:760px){ .nav .wrap{ flex-wrap:wrap; row-gap:0 } .nav-toggle{ display:inline-flex } .nav nav{ flex-basis:100%; width:100%; margin-left:0; justify-content:flex-start; align-items:stretch; flex-direction:column; gap:0; max-height:0; overflow:hidden; visibility:hidden; transition:max-height var(--t-slow) var(--ease), visibility 0s linear var(--t-slow); } .nav nav.open{ max-height:82vh; overflow-y:auto; -webkit-overflow-scrolling:touch; visibility:visible; padding:6px 0 var(--space-md); transition:max-height var(--t-slow) var(--ease), visibility 0s } /* one hairline divider per row via the direct-child selector — precise (grandchildren, e.g. the Terminal dropdown's own menu links, are untouched) and immune to the .btn-vs-border specificity fight a plain `.nav nav a{border-top:…}` rule would hit. */ .nav nav > *{ border-top:1px solid var(--border-soft) } .nav nav > *:first-child{ border-top:0 } .nav nav a{ min-height:44px; padding:.5rem .1rem; display:flex; align-items:center } .nav nav a:not(.btn)::after{ display:none } /* underline hover cue reads oddly as a stacked list row */ .nav nav .btn{ border-top:0 !important; width:100%; margin:8px 0 2px } .nav nav .theme-switch{ align-self:flex-start; padding:.4rem .1rem } /* the theme menu anchors `right:0` off ITS button — fine on desktop where that button sits mid-header, but here the button hugs the left edge of the accordion, which would push a right-anchored dropdown off-screen. Flip it. */ .nav nav .theme-menu{ left:0; right:auto } .nav-user{ max-width:none; padding:.5rem .1rem } .nav nav .nav-dd{ display:flex; flex-direction:column; align-items:stretch; width:100% } .nav nav .nav-dd-btn{ width:100%; justify-content:space-between; padding:.5rem .1rem; min-height:44px } .nav nav .nav-dd-btn::after{ display:none } .nav nav .nav-dd-menu{ position:static; width:100%; max-width:none; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0 !important; background:transparent; padding:0; max-height:0; overflow:hidden; transition:max-height var(--t) var(--ease) } .nav nav .nav-dd.open .nav-dd-menu{ max-height:220px; padding:2px 0 6px 14px } .nav nav .nav-dd-menu a{ min-height:40px; padding:7px 8px; border-top:0 } } /* ── nav cart badge (item count, hidden at 0) ───────────────────────── */ .cart-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; margin-left:5px; padding:0 4px; border-radius:var(--r-full); background:var(--primary); color:var(--on-primary); font-family:var(--mono); font-size:.62rem; font-weight:700; line-height:1; vertical-align:middle } /* ── "Terminal" nav dropdown (Live terminal / Heatmap / Indices) ─────── */ .nav-dd{ position:relative; display:inline-flex; align-items:center } .nav-dd-btn{ background:none; border:0; padding:0; cursor:pointer; font:inherit; font-size:.9rem; font-weight:500; color:var(--fg-muted); min-height:44px; display:inline-flex; align-items:center; gap:5px; position:relative } .nav-dd:hover .nav-dd-btn,.nav-dd:focus-within .nav-dd-btn,.nav-dd.active .nav-dd-btn{ color:var(--fg) } .nav-dd-btn .cx-caret{ transition:transform var(--t) var(--ease) } .nav-dd:hover .cx-caret,.nav-dd:focus-within .cx-caret,.nav-dd.open .cx-caret{ transform:rotate(180deg) } .nav-dd-btn::after{ content:''; position:absolute; left:0; bottom:8px; height:1px; width:0; background:currentColor; transition:width var(--t) var(--ease) } .nav-dd:hover .nav-dd-btn::after,.nav-dd.active .nav-dd-btn::after{ width:calc(100% - 16px) } .nav-dd-menu{ position:absolute; top:100%; right:0; min-width:230px; padding:6px; background:var(--surface,#12141c); border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:var(--r-md,12px); box-shadow:0 14px 38px -12px rgba(0,0,0,.55); display:flex; flex-direction:column; gap:2px; z-index:60; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility 0s linear var(--t) } .nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu,.nav-dd.open .nav-dd-menu{ opacity:1; visibility:visible; transform:none; transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility 0s } .nav-dd-menu a{ min-height:0; display:flex; align-items:flex-start; gap:11px; padding:9px 11px; border-radius:var(--r-sm,8px); color:var(--fg); font-weight:600 } .nav-dd-menu a:hover{ background:rgba(127,127,127,.12) } .nav-dd-menu a::after{ display:none } /* no underline animation inside the menu */ .nav-dd-menu a svg{ flex:none; margin-top:2px; opacity:.7 } .nav-dd-menu .dd-t{ display:flex; flex-direction:column; line-height:1.2 } .nav-dd-menu .dd-t small{ color:var(--fg-muted); font-size:.72rem; font-weight:400; margin-top:1px } /* ── banner (config warning) ────────────────────────────────────────── */ .banner{ background:rgba(47,91,249,.12); border-bottom:1px solid rgba(47,91,249,.3); color:var(--secondary); padding:.6rem var(--space-md); text-align:center; font-size:.82rem; position:relative; z-index:50; } /* ── hero ───────────────────────────────────────────────────────────── */ .hero{ padding-block:clamp(3rem,8vw,6rem) var(--space-2xl); text-align:center } .hero h1{ font-size:clamp(2.5rem,5.5vw + 1rem,4.8rem); line-height:1.02; font-weight:800; letter-spacing:-.035em } .hero h1 em{ font-style:normal; color:var(--fg-muted) } /* grey emphasis, PokeTrace-style */ .hero p.lede{ color:var(--fg-muted); max-width:56ch; margin:var(--space-lg) auto 0; font-size:clamp(1.02rem,.98rem + .35vw,1.18rem); line-height:1.6 } .hero p.lede b{ color:var(--fg); font-weight:600 } .hero-cta{ display:flex; gap:var(--space-sm); justify-content:center; flex-wrap:wrap; margin-top:var(--space-xl) } .hero-cta .btn{ min-width:170px } /* two 170px-min buttons don't both fit a <390px viewport, wrapping into a lopsided two-line row (one centered button on its own line). Full-width stacked reads cleaner. */ @media(max-width:420px){ .hero-cta{ flex-direction:column; align-items:stretch } .hero-cta .btn{ min-width:0; width:100% } } .eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-muted); background:var(--muted); border:1px solid var(--border-soft); padding:.32rem .78rem; border-radius:var(--r-full) } .eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--success); animation:livepulse 2.2s var(--ease) infinite } @keyframes livepulse{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.45) } 70%{ box-shadow:0 0 0 6px rgba(34,197,94,0) } 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0) } } /* live metrics strip (trading-terminal readout) */ .metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; max-width:740px; margin:var(--space-2xl) auto 0; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg-elevated); overflow:hidden } .metric{ padding:var(--space-md) var(--space-sm); border-left:1px solid var(--border-soft); text-align:center } .metric:first-child{ border-left:0 } .metric .m-v{ display:block; font-family:var(--mono); font-weight:600; color:var(--fg); font-size:clamp(1.35rem,1rem + 1.2vw,1.9rem); letter-spacing:-.02em; line-height:1 } .metric .m-l{ display:block; margin-top:.4rem; font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--fg-muted) } @media(max-width:560px){ .metrics{ grid-template-columns:repeat(2,1fr) } .metric:nth-child(-n+2){ border-bottom:1px solid var(--border-soft) } .metric:nth-child(odd){ border-left:0 } } /* subtle scroll-reveal */ .reveal{ opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease), transform .55s var(--ease) } .reveal.in{ opacity:1; transform:none } @media(prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none } } .search{ position:relative; max-width:560px; margin:var(--space-xl) auto 0 } .search svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--fg-muted); pointer-events:none; transition:color var(--t) var(--ease) } .search:focus-within svg{ color:var(--primary) } .search input{ padding-left:46px; height:52px; font-size:1.05rem; border-radius:var(--r-full); background:var(--bg-elevated); box-shadow:inset 0 1px 2px rgba(0,0,0,.4) } .search input:focus{ box-shadow:0 0 0 3px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.05), 0 10px 34px -14px var(--accent-glow) } /* ── surfaces (double-bezel: lit-from-above glass, not pasted boxes) ─── */ .panel,.card{ background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 42%),var(--card); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-md),inset 0 1px 0 rgba(255,255,255,.05); } .panel{ padding:var(--space-lg) } .panel.tight{ padding:var(--space-md) } .panel h2{ margin-bottom:var(--space-md) } /* product card */ .card{ display:block; padding:var(--space-md); color:inherit; cursor:pointer; touch-action:manipulation; transition:transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease), border-color var(--t) var(--ease); } .card:hover{ box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.06); border-color:var(--border); color:inherit } @media(hover:hover) and (pointer:fine){ .card:hover{ transform:translateY(-3px) } } .card:active{ transform:translateY(0) scale(.99); transition-duration:var(--t-fast) } /* studio white photo tile (scoped :not(.skeleton) so the shimmer still shows) */ .card .thumb{ aspect-ratio:3/4; display:grid; place-items:center; overflow:hidden; background-color:#fff; border-radius:calc(var(--r-xl) - 6px); margin-bottom:.7rem; padding:8px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.22) } .card .thumb:not(.skeleton){ background-image:radial-gradient(120% 120% at 50% 8%,#fff 55%,#e9edf2 100%) } .card .thumb img{ width:100%; height:100%; object-fit:contain; transition:transform var(--t-slower) var(--ease) } @media(hover:hover) and (pointer:fine){ .card:hover .thumb img{ transform:scale(1.04) } } .card .thumb .ph{ color:#cbd5e1; opacity:1 } /* missing / broken image → on-brand fallback tile, not a blank white square */ .thumb-fallback{ display:none; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; padding:10px; text-align:center; width:100%; height:100% } .thumb-fallback svg{ color:var(--primary); opacity:.55 } .thumb-fallback span{ font-size:.72rem; font-weight:500; color:var(--fg-muted); line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden } .card .thumb.noimg{ background:linear-gradient(155deg,var(--muted),var(--card)); background-image:none; box-shadow:inset 0 0 0 1px var(--border-soft) } .card .thumb.noimg .thumb-fallback{ display:flex } /* per-card colour halo (sampled from the art) — the bespoke per-card signal */ #market-root .thumb{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.22), 0 16px 60px -18px var(--item,transparent); transition:box-shadow var(--t-slower) var(--ease) } #market-root .thumb.noimg{ box-shadow:inset 0 0 0 1px var(--border-soft),0 16px 60px -18px var(--item,transparent) } .card .name{ font-weight:600; font-size:.95rem; line-height:1.3; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.5em } .card .sub{ color:var(--fg-muted); font-size:.78rem; margin-top:.2rem; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap } .card .price{ margin-top:.6rem; padding-top:.6rem; border-top:1px solid var(--border-soft); font-family:var(--mono); font-size:.9rem; font-weight:500; display:flex; align-items:baseline; justify-content:space-between; gap:.5rem } .card .price span:last-child{ color:var(--secondary) } /* reserve gold for the value */ .card .price .lbl{ font-family:var(--font); font-size:.7rem; color:var(--fg-muted); text-transform:uppercase; letter-spacing:.06em } .card .price .muted{ color:var(--fg-muted) } /* grade chips — the condition selector on the card page. Each chip carries an accent dot; conditions run green (Near Mint) → red (Damaged). */ .grade-chip{ --gc:var(--fg-muted); font:inherit; font-size:.72rem; font-weight:600; line-height:1; cursor:pointer; touch-action:manipulation; display:inline-flex; align-items:center; gap:.34rem; min-height:32px; padding:.34rem .6rem; border-radius:999px; border:1px solid var(--border); background:var(--muted); color:var(--fg-muted); transition:color var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease) } .grade-chip::before{ content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--gc); flex:none; opacity:.9 } .grade-chip:hover{ color:var(--fg); border-color:var(--gc) } .grade-chip[aria-pressed="true"]{ color:var(--fg); border-color:var(--gc); background:color-mix(in srgb, var(--gc) 15%, var(--muted)); box-shadow:inset 0 0 0 1px var(--gc) } .grade-chip:focus-visible{ outline:2px solid var(--gc); outline-offset:2px } .g-raw{ --gc:var(--fg-muted) } .g-psa{ --gc:#E4002B } .g-cgc{ --gc:#1F7AE0 } .g-bgs{ --gc:#C8A24B } .g-house{ --gc:var(--primary) } .cond-nm{ --gc:#22C55E } .cond-lp{ --gc:#A3E635 } .cond-mp{ --gc:#EAB308 } .cond-hp{ --gc:#F97316 } .cond-dmg{ --gc:#EF4444 } /* market page: larger grade selector with each grade's price under the label */ #market-root .grade-selector{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:var(--space-md) } #market-root .grade-selector .grade-chip{ padding:.46rem .7rem; font-size:.8rem; border-radius:var(--r-sm) } #market-root .grade-selector .gc-price{ font-family:var(--mono); font-size:.74rem; font-weight:500; color:var(--fg-muted) } #market-root .grade-selector .grade-chip[aria-pressed="true"] .gc-price{ color:var(--fg) } /* staggered rise on the browse grid (re-fires on each search rebuild) */ .grid.cards>.card{ animation:rise .5s var(--ease) both } .grid.cards>.card:nth-child(1){ animation-delay:.02s } .grid.cards>.card:nth-child(2){ animation-delay:.05s } .grid.cards>.card:nth-child(3){ animation-delay:.08s } .grid.cards>.card:nth-child(4){ animation-delay:.11s } .grid.cards>.card:nth-child(5){ animation-delay:.14s } .grid.cards>.card:nth-child(6){ animation-delay:.17s } .grid.cards>.card:nth-child(7){ animation-delay:.20s } .grid.cards>.card:nth-child(8){ animation-delay:.23s } @keyframes rise{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } } /* ── buttons ─────────────────────────────────────────────────────────── */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.45rem; font:inherit; font-weight:600; font-size:.9rem; cursor:pointer; touch-action:manipulation; min-height:44px; padding:.7rem 1.15rem; border-radius:var(--r-md); background:var(--muted); color:var(--fg); border:1px solid var(--border); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); transition:transform var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), filter var(--t) var(--ease); } @media(hover:hover) and (pointer:fine){ .btn:hover{ transform:translateY(-1px); border-color:var(--fg-muted) } } .btn:active{ transform:translateY(0) scale(.98) } .btn:disabled{ opacity:.45; cursor:not-allowed; transform:none } .btn.gold,.btn.primary{ background:linear-gradient(180deg,var(--primary-2),var(--primary)); border-color:transparent; color:var(--on-primary); font-weight:700; box-shadow:0 6px 22px -10px var(--accent-glow) } .btn.gold:hover,.btn.primary:hover{ filter:brightness(1.06); box-shadow:0 0 0 1px var(--primary),0 12px 32px -8px var(--accent-glow) } .btn.buy{ background:linear-gradient(180deg,#2FD873,#22C55E); border-color:rgba(0,0,0,.15); color:#04150C; box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 18px -8px rgba(34,197,94,.5) } .btn.buy:hover{ filter:brightness(1.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 26px -8px rgba(34,197,94,.55) } .btn.sell{ background:transparent; border-color:var(--destructive); color:var(--destructive); box-shadow:none } .btn.sell:hover{ background:var(--destructive-dim) } .btn.ghost{ background:transparent; border-color:var(--border) } .btn.block{ width:100% } .btn.sm{ min-height:36px; padding:.4rem .75rem; font-size:.8rem } @media(pointer:coarse),(max-width:768px){ .btn.sm,.grade-chip{ min-height:44px } } /* async loading spinner */ .btn.is-loading{ color:transparent !important; pointer-events:none; position:relative } .btn.is-loading::after{ content:''; position:absolute; width:16px; height:16px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; animation:spin .6s linear infinite } @keyframes spin{ to{ transform:rotate(360deg) } } /* ── theme switcher (nav) ──────────────────────────────────────────────── */ .theme-switch{ position:relative; display:inline-flex } .theme-btn{ display:inline-flex; align-items:center; gap:.4rem; min-height:36px; padding:.3rem .55rem; background:var(--muted); color:var(--fg-muted); border:1px solid var(--border); border-radius:var(--r-md); cursor:pointer; transition:color var(--t) var(--ease-snap), border-color var(--t) var(--ease-snap) } .theme-btn:hover{ color:var(--fg); border-color:var(--primary) } .theme-dot{ width:11px; height:11px; border-radius:50%; background:var(--primary); box-shadow:0 0 8px 0 var(--accent-glow) } .theme-menu{ position:absolute; top:calc(100% + 8px); right:0; z-index:60; min-width:176px; background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:6px; display:flex; flex-direction:column; gap:2px; animation:menuIn .16s var(--ease-snap) } .theme-menu[hidden]{ display:none } @keyframes menuIn{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } } .theme-opt{ display:flex; align-items:center; gap:.6rem; width:100%; text-align:left; font:inherit; font-size:.85rem; font-weight:500; color:var(--fg-muted); background:none; border:0; border-radius:var(--r-sm); padding:.5rem .6rem; cursor:pointer; min-height:0; transition:background var(--t) var(--ease-snap), color var(--t) var(--ease-snap) } .theme-opt:hover{ background:var(--muted); color:var(--fg) } .theme-opt.on{ color:var(--fg) } .theme-opt .sw{ width:15px; height:15px; border-radius:4px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18) } .theme-opt.on::after{ content:'✓'; margin-left:auto; color:var(--primary); font-weight:700 } /* ── motion utilities: price tick-flash · live pulse · accent glow ─────── */ @keyframes flashUp{ 0%{ background:var(--success-dim) } 100%{ background:transparent } } @keyframes flashDown{ 0%{ background:var(--destructive-dim) } 100%{ background:transparent } } .flash-up{ animation:flashUp .8s var(--ease) } .flash-down{ animation:flashDown .8s var(--ease) } @keyframes livePulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } } .live-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--success); box-shadow:0 0 9px 0 rgba(34,197,94,.55); animation:livePulse 2s var(--ease) infinite } .glow{ box-shadow:0 0 0 1px var(--primary),0 0 30px -6px var(--accent-glow) } /* ── logo startup animation (runs once per page load) ─────────────────── */ @keyframes brandPop{ 0%{ transform:scale(.5) rotate(-12deg); opacity:0 } 55%{ transform:scale(1.12) rotate(4deg); opacity:1 } 100%{ transform:scale(1) rotate(0) } } @keyframes brandDraw{ from{ stroke-dashoffset:46 } to{ stroke-dashoffset:0 } } @keyframes brandWord{ from{ opacity:0; transform:translateX(-6px) } to{ opacity:1; transform:none } } .brand{ animation:brandWord .5s var(--ease) .12s both } .brand .mark{ animation:brandPop .6s var(--ease) both } .brand .mark svg path{ stroke-dasharray:46; stroke-dashoffset:46; animation:brandDraw .7s var(--ease-snap) .3s forwards } @media(prefers-reduced-motion:reduce){ .flash-up,.flash-down,.live-dot,.theme-menu,.brand,.brand .mark,.brand .mark svg path{ animation:none } .brand,.brand .mark{ opacity:1; transform:none } .brand .mark svg path{ stroke-dashoffset:0 } } /* ── forms ───────────────────────────────────────────────────────────── */ label{ display:block; font-size:.8rem; font-weight:500; color:var(--fg-muted); margin-bottom:.35rem } label+ input,label+ select{ margin-bottom:.2rem } input,select{ width:100%; font:inherit; font-size:1rem; color:var(--fg); background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--r-md); padding:.7rem .85rem; min-height:44px; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); } input::placeholder{ color:#B4C0D3; opacity:1 } input:focus,select:focus{ outline:none; border-color:var(--ring); box-shadow:0 0 0 3px var(--accent-glow) } .field{ margin-bottom:var(--space-md) } .hint{ font-size:.78rem; color:var(--fg-muted); margin-top:.4rem } .err{ font-size:.82rem; color:var(--destructive); margin-top:.5rem } .ok { font-size:.82rem; color:var(--success); margin-top:.5rem } /* compact toolbar select (sort) — auto width + custom chevron */ .sort-select{ width:auto; min-height:40px; padding:.45rem 2.1rem .45rem .8rem; font-size:.85rem; font-weight:500; color:var(--fg); background-color:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .6rem center; transition:border-color var(--t) var(--ease) } .sort-select:hover{ border-color:var(--fg-muted) } /* ── tables ──────────────────────────────────────────────────────────── */ .table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch } table{ width:100%; border-collapse:collapse; font-size:.88rem } th,td{ text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--border-soft); white-space:nowrap } th{ font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-muted) } tbody tr{ transition:background var(--t-fast) var(--ease) } tbody tr:hover{ background:rgba(255,255,255,.03) } tbody tr:last-child td{ border-bottom:none } td.num,th.num{ text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums } /* ── order book (terminal read) ──────────────────────────────────────── */ .book{ font-family:var(--mono); font-variant-numeric:tabular-nums } .book-row{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); padding:.45rem .7rem; font-size:.85rem; border-radius:var(--r-sm); isolation:isolate; transition:background var(--t-fast) var(--ease) } .book-row:hover{ background:rgba(255,255,255,.03) } .book .book-row + .book-row{ border-top:1px solid var(--border-soft) } .book-row .depth{ position:absolute; inset-block:0; right:0; z-index:-1; border-radius:var(--r-sm); transition:width var(--t-slow) var(--ease) } .book-row.ask .depth{ background:linear-gradient(90deg,transparent,var(--destructive-dim)) } .book-row.bid .depth{ background:linear-gradient(90deg,transparent,var(--success-dim)) } .book-row .p{ font-weight:600; font-variant-numeric:tabular-nums } .book-row.ask .p{ color:var(--destructive) } .book-row.bid .p{ color:var(--success) } .book-row .q{ color:var(--fg-muted); font-size:.8rem } .book-head{ display:flex; justify-content:space-between; padding:0 .7rem .4rem; font-family:var(--font); font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-muted) } /* ── segmented control ──────────────────────────────────────────────── */ .seg{ display:inline-flex; background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--r-md); padding:2px; gap:2px; box-shadow:inset 0 1px 2px rgba(0,0,0,.35) } .seg-btn{ font:inherit; font-size:.78rem; font-weight:600; cursor:pointer; color:var(--fg-muted); background:transparent; border:0; border-radius:6px; padding:.35rem .7rem; min-height:32px; transition:background var(--t) var(--ease),color var(--t) var(--ease); white-space:nowrap } .seg-btn:hover{ color:var(--fg) } .seg-btn[aria-pressed="true"]{ color:var(--fg); background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04)); box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 1px 2px rgba(0,0,0,.4) } @media(pointer:coarse),(max-width:768px){ .seg-btn{ min-height:40px } } /* ── trade ticket (shared) ─────────────────────────────────────────────── One recipe, used by terminal.html's TRADE widget AND market.html's order ticket so they can never drift apart. TradingView-style: a split Sell│Buy price header (replaces separate bid/ask boxes + separate Buy/Sell buttons — click a side to select it), underline Market/Limit tabs, one compact Px/Qty row, and a single CTA with the est. total baked into the button. Buy = --success, Sell = --destructive — the same up/down convention used everywhere else in the app (order book, chart, PnL). No prose: the escrow note lives behind a shield glyph's title tooltip, not a sentence. ── */ .tix-split{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-bottom:9px } .tix-side{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:var(--muted); border:1px solid var(--border); cursor:pointer; padding:9px 6px 8px; font:inherit; color:var(--fg-muted); min-height:52px; transition:background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease) } .tix-side:hover{ color:var(--fg) } .tix-side:first-child{ border-radius:var(--r-md) 0 0 var(--r-md); border-right:0 } .tix-side:last-child{ border-radius:0 var(--r-md) var(--r-md) 0 } .tix-lbl{ font-family:var(--mono); font-size:.6rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase } .tix-px{ font-family:var(--mono); font-size:1.05rem; font-weight:700; font-variant-numeric:tabular-nums } .tix-px.na{ opacity:.55; font-weight:600 } .tix-side.sell.on{ background:var(--destructive); border-color:var(--destructive); color:#1a0206 } .tix-side.sell.on .tix-px{ color:#1a0206 } .tix-side.buy.on{ background:var(--success); border-color:var(--success); color:#04140e } .tix-side.buy.on .tix-px{ color:#04140e } .tix-spread{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; pointer-events:none } .tix-spread .spread{ background:var(--card) } /* opaque disc so it reads over the divider, not through it */ @media(pointer:coarse){ .tix-side{ min-height:44px } } .tix-tabs{ display:flex; gap:16px; border-bottom:1px solid var(--border-soft); margin-bottom:9px } .tix-tab{ background:none; border:0; border-bottom:2px solid transparent; color:var(--fg-muted); font:inherit; font-family:var(--mono); font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:6px 1px 7px; margin-bottom:-1px; cursor:pointer; transition:color var(--t) var(--ease),border-color var(--t) var(--ease) } .tix-tab:hover{ color:var(--fg) } .tix-tab.on{ color:var(--fg); border-bottom-color:var(--primary) } @media(pointer:coarse){ .tix-tab{ min-height:44px; display:inline-flex; align-items:center } } .tix-row{ display:flex; gap:8px; margin-bottom:8px } .tix-field{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px } .tix-field.qty{ flex:0 0 64px } .tix-flbl{ font-family:var(--mono); font-size:.56rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--fg-muted) } .tix-field input{ width:100%; background:var(--muted); border:1px solid var(--border); color:var(--fg); font:inherit; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:.88rem; border-radius:var(--r-md); padding:7px 9px } .tix-field input:disabled{ opacity:.5; color:var(--fg-muted) } @media(pointer:coarse){ .tix-field input{ min-height:44px } } /* escrow disclosure: one glyph + a title tooltip, never a sentence. Inline in the "Est. total" row, so the WCAG inline-target exception applies — no 44px bump needed. */ .tix-shield{ display:inline-flex; align-items:center; vertical-align:-2px; margin-left:5px; color:var(--fg-muted); background:none; border:0; padding:2px; cursor:help; line-height:1 } .tix-shield:hover{ color:var(--fg) } /* one CTA, colored by side, label + est. total baked in (not "· CardName" — the card is already named elsewhere on the page/panel). Shared base; terminal.html's .tgo and market.html's .tk-cta layer this in alongside their own class name. */ .tix-cta{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; font:inherit; font-weight:800; font-size:.9rem; cursor:pointer; border:0; border-radius:var(--r-md); padding:12px 14px; transition:filter var(--t) var(--ease) } .tix-cta:hover:not(:disabled){ filter:brightness(1.06) } .tix-cta:disabled{ opacity:.45; cursor:not-allowed } .tix-cta .tix-cta-amt{ font-family:var(--mono); font-variant-numeric:tabular-nums } .tix-cta.buy{ background:var(--success); color:#04140e } .tix-cta.sell{ background:var(--destructive); color:#1a0206 } /* ── price chart ─────────────────────────────────────────────────────── */ #chart-mount{ min-height:320px } .chart-box{ width:100%; height:320px } .chart-empty{ height:320px; display:grid; place-items:center; color:var(--fg-muted); text-align:center; font-size:.9rem } /* ── card face (stats / attacks / abilities) ────────────────────────── */ .cardface .meta{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-bottom:var(--space-md) } .hpbadge{ font-family:var(--mono); font-weight:700; font-size:.8rem; color:var(--secondary); border:1px solid rgba(47,91,249,.3); background:rgba(47,91,249,.1); border-radius:var(--r-full); padding:.15rem .6rem } .energy{ display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; font-size:.56rem; font-weight:800; color:#0b0e13; flex:none } .attack{ padding:.6rem 0; border-top:1px solid var(--border-soft) } .attack:first-of-type{ border-top:0 } .attack .top{ display:flex; align-items:center; gap:.45rem } .attack .cost{ display:inline-flex; gap:2px } .attack .nm{ font-weight:600 } .attack .dmg{ margin-left:auto; font-family:var(--mono); font-weight:700 } .attack .tx{ color:var(--fg-muted); font-size:.85rem; margin-top:.25rem; line-height:1.45 } .abil{ padding:.55rem 0; border-top:1px solid var(--border-soft) } /* purple survives ONLY here */ .abil .tag{ display:inline-block; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--accent); border:1px solid rgba(91,127,255,.4); background:rgba(91,127,255,.12); border-radius:4px; padding:.05rem .35rem; margin-right:.4rem } .abil .nm{ font-weight:600 } .abil .tx{ color:var(--fg-muted); font-size:.85rem; margin-top:.25rem; line-height:1.45 } .face-foot{ display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; margin-top:var(--space-md); padding-top:var(--space-md); border-top:1px solid var(--border-soft); font-size:.8rem; color:var(--fg-muted) } .face-foot b{ color:var(--fg); font-weight:600 } .flavor{ font-style:italic; color:var(--fg-muted); font-size:.85rem; margin-top:var(--space-md) } /* ── price display / quotes (the money moment) ──────────────────────── */ .quote{ background:var(--bg-elevated); border:1px solid var(--border-soft); border-radius:var(--r-xl); padding:var(--space-md); box-shadow:inset 0 1px 0 rgba(255,255,255,.04) } .quote.ask{ background:linear-gradient(180deg,rgba(248,113,113,.06),transparent),var(--bg-elevated); box-shadow:var(--shadow-md),inset 0 1px 0 rgba(255,255,255,.05) } .quote.bid{ background:linear-gradient(180deg,rgba(34,197,94,.06),transparent),var(--bg-elevated); box-shadow:var(--shadow-md),inset 0 1px 0 rgba(255,255,255,.05) } .quote .lbl{ font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-muted) } .price-lg{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:clamp(1.7rem,1.25rem + 1.6vw,2.4rem); font-weight:600; letter-spacing:-.03em; margin:.25rem 0 .8rem; line-height:1.05 } .price-lg.ask{ color:var(--destructive) } .price-lg.bid{ color:var(--success) } .mono{ font-family:var(--mono); font-variant-numeric:tabular-nums } /* ── badges ──────────────────────────────────────────────────────────── */ .pill{ display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:500; padding:.2rem .55rem; border-radius:var(--r-full); background:var(--muted); border:1px solid var(--border); color:var(--fg-muted); white-space:nowrap } .pill.grade{ color:var(--secondary); border-color:rgba(47,91,249,.3); background:rgba(47,91,249,.1) } /* list-row liquidity badge — spread = lowest ask − highest bid (CX.spreadBadge in app.js). tight = liquid (accent green), wide = muted, none = honest "no book" dash (never fabricated). */ .spread{ display:inline-flex; align-items:center; gap:.35rem; font-family:var(--mono); font-size:.68rem; font-weight:700; letter-spacing:.02em; color:var(--fg-muted); font-variant-numeric:tabular-nums; background:var(--bg-elevated); border:1px solid var(--border-soft); padding:.22rem .55rem; border-radius:var(--r-full); white-space:nowrap } .spread.tight{ color:var(--success); border-color:color-mix(in srgb, var(--success) 40%, transparent); background:color-mix(in srgb, var(--success) 12%, transparent) } .spread.wide{ color:var(--fg-muted) } .spread.none{ color:var(--fg-muted); font-style:italic; opacity:.8 } .status{ text-transform:capitalize } .status.completed,.status.delivered{ color:var(--success); border-color:rgba(34,197,94,.35); background:var(--success-dim) } .status.refunded,.status.cancelled,.status.expired,.status.disputed{ color:var(--destructive); border-color:rgba(239,68,68,.35); background:var(--destructive-dim) } .status.paid,.status.shipped,.status.created,.status.awaiting_shipment{ color:var(--secondary); border-color:rgba(47,91,249,.3); background:rgba(47,91,249,.1) } /* ── trust: one divided strip, not three boxes ──────────────────────── */ .trust{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; background:var(--card); border:1px solid var(--border-soft); border-radius:var(--r-xl); box-shadow:var(--shadow-md),inset 0 1px 0 rgba(255,255,255,.05); overflow:hidden } .trust .item{ background:transparent; border:0; border-left:1px solid var(--border-soft); border-radius:0; padding:var(--space-lg) } .trust .item:first-child{ border-left:0 } .trust .item .ic{ display:grid; place-items:center; width:40px; height:40px; border-radius:var(--r-lg); background:var(--muted); color:var(--fg); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px var(--border-soft); margin-bottom:.6rem } .trust .item h3{ margin-bottom:.3rem } .trust .item p{ color:var(--fg-muted); font-size:.85rem } @media(max-width:640px){ .trust{ grid-template-columns:1fr } .trust .item{ border-left:0; border-top:1px solid var(--border-soft) } .trust .item:first-child{ border-top:0 } } /* ── CTA band ────────────────────────────────────────────────────────── */ .cta{ text-align:center; background:radial-gradient(130% 150% at 0% 0%,var(--accent-glow),transparent 55%),var(--card); border:1px solid var(--border-soft); border-radius:var(--r-xl); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); padding-block:clamp(2.5rem,1.5rem + 3vw,4rem); padding-inline:var(--space-md) } .cta h2{ font-size:clamp(1.5rem,1.2rem + 1.3vw,2.1rem) } .cta p{ color:var(--fg-muted); margin:var(--space-sm) auto var(--space-lg); max-width:52ch } /* ── modal ───────────────────────────────────────────────────────────── */ .modal-overlay{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:var(--space-md); background:rgba(0,0,0,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px) } .modal{ width:100%; max-width:440px; background:var(--card); border:1px solid var(--border); border-radius:var(--r-xl); padding:var(--space-xl); box-shadow:var(--shadow-xl),inset 0 1px 0 rgba(255,255,255,.06); max-height:90vh; overflow-y:auto; animation:pop var(--t-slow) var(--ease) } @keyframes pop{ from{ opacity:0; transform:translateY(8px) scale(.98) } } /* reclaim horizontal room on small phones (e.g. cart.html's Stripe payment modal, portfolio.html's dispute modal) — the overlay+modal padding alone is 96px on a 360px-wide screen otherwise. Purely additive; pages with their own .modal subclass (e.g. terminal.html's .wladd-modal) already override padding and win on source order, so this never fights a page-specific modal. */ @media(max-width:480px){ .modal-overlay{ padding:var(--space-sm) } .modal{ padding:var(--space-lg) } } /* ── toast (replaces alert()) ───────────────────────────────────────── */ .toast-wrap{ position:fixed; left:50%; bottom:24px; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index:120; display:flex; flex-direction:column; gap:.5rem; pointer-events:none } .toast{ background:var(--card); border:1px solid var(--border); border-left:3px solid var(--primary); border-radius:var(--r-md); padding:.7rem 1rem; box-shadow:var(--shadow-lg); font-size:.88rem; max-width:min(92vw,420px); animation:pop var(--t-slow) var(--ease) } .toast.ok{ border-left-color:var(--success) } .toast.err{ border-left-color:var(--destructive) } /* ── empty / loading states ─────────────────────────────────────────── */ .empty{ text-align:center; color:var(--fg-muted); padding:var(--space-2xl) var(--space-md) } .empty svg{ opacity:.35; margin:0 auto var(--space-md) } .skeleton{ background-image:linear-gradient(90deg,var(--muted),var(--card),var(--muted)); background-size:200% 100%; animation:sk 1.4s ease-in-out infinite; border-radius:var(--r-md); height:1rem } @keyframes sk{ to{ background-position:-200% 0 } } .muted{ color:var(--fg-muted) } .small{ font-size:.82rem } .hidden{ display:none !important } .center{ text-align:center } footer{ border-top:1px solid var(--border-soft); margin-top:var(--space-3xl); padding-block:var(--space-xl); color:var(--fg-muted); font-size:.82rem; text-align:center } /* Trademark/IP disclaimer — injected site-wide by CX.init() (see app.js renderDisclaimer) */ .ip-disclaimer{ padding-top:var(--space-sm); line-height:1.5; font-size:.7rem } /* ── motion preference (neutralises everything above) ───────────────── */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important } }