/* ============================================================ DATUM — Design System A fixed reference point you measure against. White-led · precise · one confident accent · quietly confident. ============================================================ */ /* ---------- Fonts ---------- */ @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); /* ============================================================ TOKENS ============================================================ */ :root { /* Canvas & surface */ --canvas: #FFFFFF; --canvas-2: #F6F6F2; /* off-white app background */ --surface: #FFFFFF; --surface-2: #FBFBF9; /* Ink (text / structure) */ --ink: #14181C; /* near-black, primary text */ --ink-2: #424A53; /* secondary text */ --ink-3: #6C7682; /* muted / meta */ --ink-4: #9AA4AE; /* placeholder / disabled */ --hairline: #E8E8E1; /* borders on white */ --hairline-2: #F0F0EA; /* faint dividers */ /* Primary — deep ink navy (trust / precision) */ --navy-950: #0A1525; --navy-900: #0E2138; --navy-800: #142A4A; /* ◀ BRAND PRIMARY */ --navy-700: #1D3A60; --navy-600: #2A4F7E; --navy-500: #3B649A; --navy-400: #6385AC; --navy-200: #B9C6D8; --navy-100: #DCE4EF; --navy-50: #EEF2F8; --primary: var(--navy-800); --primary-hover: var(--navy-900); --primary-press: var(--navy-950); /* Accent — JADE (default lead). Swappable via [data-accent]. */ --accent-50: #ECFBF4; --accent-100: #D4F3E5; --accent-200: #A3E6C9; --accent-400: #2FBE89; --accent-500: #12A56F; /* base accent */ --accent-600: #0E8A5F; --accent-700: #0A6B4B; /* AA text on white */ --accent: var(--accent-500); --accent-strong: var(--accent-700); /* for text/icons on white */ --accent-weak: var(--accent-100); /* tint backgrounds */ --accent-faint: var(--accent-50); --accent-on: #FFFFFF; /* text on accent fill */ /* Functional — muted, never neon */ --success: #15875E; --success-bg: #E7F5EE; --warning: #B0791C; --warning-bg: #FBF1DB; --error: #C2453B; --error-bg: #FBEAE7; --info: var(--navy-700); --info-bg: var(--navy-50); /* Condition grades (collector-specific scale) */ --grade-mint: #15875E; --grade-near: #2A8F77; --grade-good: #B0791C; --grade-played:#9AA4AE; /* Radius */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px; /* Elevation — soft, low, premium */ --e1: 0 1px 2px rgba(20,24,28,.05), 0 1px 1px rgba(20,24,28,.04); --e2: 0 6px 18px -6px rgba(20,24,28,.12), 0 2px 6px -2px rgba(20,24,28,.06); --e3: 0 18px 44px -14px rgba(20,24,28,.20), 0 6px 14px -8px rgba(20,24,28,.10); --ring: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); /* Spacing — 4px base */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; /* Type */ --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --t-display: 700 40px/1.04 var(--font-sans); --t-h1: 700 30px/1.1 var(--font-sans); --t-h2: 700 24px/1.15 var(--font-sans); --t-h3: 600 19px/1.25 var(--font-sans); --t-body-lg: 400 17px/1.5 var(--font-sans); --t-body: 400 15px/1.5 var(--font-sans); --t-caption: 400 13px/1.4 var(--font-sans); --motion: 220ms cubic-bezier(.2,.7,.2,1); --motion-fast: 140ms cubic-bezier(.2,.7,.2,1); } /* Accent variants — swap by setting data-accent on */ [data-accent="gold"] { --accent-50:#FBF6E9; --accent-100:#F4E9C6; --accent-200:#E6CF8E; --accent-400:#D9B96E; --accent-500:#C8A24B; --accent-600:#A9842E; --accent-700:#856516; } [data-accent="electric"] { --accent-50:#EEF3FF; --accent-100:#DBE5FF; --accent-200:#B4C8FF; --accent-400:#5E8FFF; --accent-500:#2E6BFF; --accent-600:#1B4FDB; --accent-700:#1A3FA8; } /* ============================================================ BASE ============================================================ */ * { box-sizing: border-box; } body { margin: 0; font: var(--t-body); color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "ss01" 1; } .tnum { font-variant-numeric: tabular-nums; } /* Eyebrow / micro label — the "datum" signature */ .eyebrow { font: 600 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } /* ============================================================ BUTTONS ============================================================ */ .btn { --bg: var(--primary); --fg: #fff; --bd: transparent; appearance: none; border: 1px solid var(--bd); background: var(--bg); color: var(--fg); font: 600 15px/1 var(--font-sans); letter-spacing: .005em; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; height: 48px; border-radius: var(--r-md); cursor: pointer; transition: transform var(--motion-fast), background var(--motion), box-shadow var(--motion); white-space: nowrap; user-select: none; } .btn:active { transform: translateY(1px) scale(.995); } .btn:focus-visible { outline: none; box-shadow: var(--ring); } .btn .ico { width: 18px; height: 18px; display: block; } .btn--primary { --bg: var(--primary); --fg:#fff; } .btn--primary:hover { --bg: var(--primary-hover); } .btn--accent { --bg: var(--accent); --fg: var(--accent-on); } .btn--accent:hover { --bg: var(--accent-600); } .btn--secondary { --bg: #fff; --fg: var(--ink); --bd: var(--hairline); box-shadow: var(--e1); } .btn--secondary:hover { --bg: var(--canvas-2); --bd: var(--navy-200); } .btn--ghost { --bg: transparent; --fg: var(--ink-2); --bd: transparent; } .btn--ghost:hover { --bg: var(--canvas-2); } .btn--block { width: 100%; } .btn--lg { height: 54px; font-size: 16px; border-radius: var(--r-lg); padding: 0 22px; } .btn--sm { height: 38px; font-size: 13px; border-radius: var(--r-sm); padding: 0 14px; } .btn[disabled] { opacity: .42; pointer-events: none; } /* ============================================================ INPUT / SEARCH ============================================================ */ .field { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 14px; background: var(--canvas-2); border: 1px solid transparent; border-radius: var(--r-md); color: var(--ink); transition: border-color var(--motion), background var(--motion), box-shadow var(--motion); } .field:focus-within { background:#fff; border-color: var(--accent); box-shadow: var(--ring); } .field input { all: unset; flex: 1; font: var(--t-body); color: var(--ink); } .field input::placeholder { color: var(--ink-4); } .field .ico { width: 18px; height: 18px; color: var(--ink-3); flex: none; } .field--search { border-radius: var(--r-pill); } .label { font: 600 13px/1 var(--font-sans); color: var(--ink-2); display:block; margin-bottom: 8px; } /* ============================================================ CHIPS / FILTER PILLS ============================================================ */ .chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--hairline); font: 500 13.5px/1 var(--font-sans); color: var(--ink-2); cursor: pointer; transition: all var(--motion-fast); } .chip:hover { border-color: var(--navy-200); } .chip[aria-pressed="true"], .chip.is-active { background: var(--navy-800); border-color: var(--navy-800); color: #fff; } .chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } /* Segmented control (grid / list) */ .seg { display: inline-flex; background: var(--canvas-2); border-radius: var(--r-pill); padding: 3px; gap: 2px; } .seg button { appearance: none; border: 0; background: transparent; cursor: pointer; height: 34px; padding: 0 14px; border-radius: var(--r-pill); font: 600 13px/1 var(--font-sans); color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; transition: all var(--motion-fast); } .seg button.is-active { background: #fff; color: var(--ink); box-shadow: var(--e1); } /* ============================================================ BADGES / STATUS ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--r-sm); font: 600 11px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; background: var(--navy-50); color: var(--navy-700); } .badge--accent { background: var(--accent-weak); color: var(--accent-strong); } .badge--success { background: var(--success-bg); color: var(--success); } .badge--warning { background: var(--warning-bg); color: var(--warning); } .badge--error { background: var(--error-bg); color: var(--error); } .badge--solid { background: var(--ink); color: #fff; } /* Value pill — money/data on a card */ .value-pill { display:inline-flex; align-items:center; gap:5px; font: 600 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; padding: 5px 9px; border-radius: var(--r-sm); background: rgba(255,255,255,.92); color: var(--ink); box-shadow: var(--e1); backdrop-filter: blur(6px); } /* ============================================================ CARD TILE (the hero) ============================================================ */ .card-tile { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--canvas-2); cursor: pointer; transition: transform var(--motion), box-shadow var(--motion); } .card-tile:hover { transform: translateY(-3px); box-shadow: var(--e2); } .card-tile .art { aspect-ratio: 5 / 7; width: 100%; display: block; position: relative; } .card-tile .value-pill { position: absolute; left: 8px; bottom: 8px; } .card-tile .grade { position: absolute; right: 8px; top: 8px; } .card-tile .meta { padding: 10px 4px 2px; } .card-tile .meta .name { font: 600 13.5px/1.25 var(--font-sans); color: var(--ink); } .card-tile .meta .sub { font: 400 12px/1.3 var(--font-sans); color: var(--ink-3); margin-top: 2px; } /* Card-art placeholder (until real images dropped in) */ .art-ph { position:absolute; inset:0; background: linear-gradient(135deg, var(--navy-50), #fff 60%), var(--canvas-2); display: grid; place-items: center; } .art-ph::after { content:""; position:absolute; inset:10px; border-radius: 8px; border: 1px dashed var(--navy-200); } .art-ph .glyph { width: 34px; height: 34px; color: var(--navy-200); } /* ============================================================ LIST ROW ============================================================ */ .list-row { display: flex; align-items: center; gap: 14px; padding: 12px; background: #fff; border-radius: var(--r-md); cursor: pointer; transition: background var(--motion-fast); } .list-row:hover { background: var(--canvas-2); } .list-row .thumb { width: 46px; height: 64px; border-radius: 8px; overflow:hidden; flex:none; position:relative; background: var(--canvas-2); } .list-row .body { flex: 1; min-width: 0; } .list-row .body .name { font: 600 15px/1.3 var(--font-sans); } .list-row .body .sub { font: var(--t-caption); color: var(--ink-3); margin-top: 2px; } .list-row .trail { text-align: right; } .list-row .trail .val { font: 600 15px/1 var(--font-mono); font-variant-numeric: tabular-nums; } .list-row .trail .delta { font: 500 12px/1 var(--font-mono); margin-top: 5px; } .delta.up { color: var(--success); } .delta.down { color: var(--error); } /* ============================================================ DATA GRID (PSA-style card facts) ============================================================ */ .data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline); border-radius: var(--r-md); overflow: hidden; } .data-grid .cell { background: #fff; padding: 12px 14px; } .data-grid .k { font: 600 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } .data-grid .v { font: 600 15px/1.2 var(--font-sans); color: var(--ink); margin-top: 6px; } .data-grid .v.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ============================================================ VALUE DISPLAY (big money) ============================================================ */ .value-xl { font: 700 40px/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--ink); } .value-xl .cur { font-size: 20px; color: var(--ink-3); font-weight: 600; margin-right: 4px; vertical-align: 8px; } /* ============================================================ TAB BAR (bottom nav) ============================================================ */ .tabbar { display: flex; justify-content: space-around; align-items: center; background: rgba(255,255,255,.86); backdrop-filter: blur(18px) saturate(1.4); border-top: 1px solid var(--hairline); padding: 8px 6px; } .tabbar .tab { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink-4); cursor: pointer; flex:1; } .tabbar .tab .ico { width: 24px; height: 24px; } .tabbar .tab span { font: 600 10px/1 var(--font-sans); } .tabbar .tab.is-active { color: var(--navy-800); } .tabbar .tab.scan .ico { color: #fff; background: var(--accent); width: 52px; height: 52px; border-radius: var(--r-md); padding: 14px; box-shadow: var(--e2); } .tabbar .tab.scan { color: var(--accent-strong); } /* ============================================================ SHEET (bottom sheet) ============================================================ */ .sheet { background:#fff; border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--e3); padding: 8px 20px 24px; } .sheet .grabber { width: 38px; height: 4px; border-radius: 999px; background: var(--hairline); margin: 8px auto 14px; } /* ============================================================ UTILITIES ============================================================ */ .divider { height:1px; background: var(--hairline); border:0; margin:0; } .surface-card { background:var(--surface); border:1px solid var(--hairline); border-radius: var(--r-lg); } /* ============================================================ THEME — base extras + dark overrides ============================================================ */ :root { --strong:#14181C; --on-strong:#FFFFFF; --glass:rgba(255,255,255,.9); } [data-theme="dark"] { --canvas:#0E1216; --canvas-2:#0E1216; --surface:#171C22; --surface-2:#1E242B; --ink:#ECEEF0; --ink-2:#B6BDC4; --ink-3:#8A929B; --ink-4:#5E666E; --hairline:#2A313A; --hairline-2:#222B33; --navy-50:#19222F; --navy-100:#2A3646; --navy-200:#3C4A5C; --strong:#EDEFF1; --on-strong:#0E1216; --glass:rgba(18,23,29,.82); --accent-faint: color-mix(in srgb, var(--accent) 14%, #171C22); --accent-weak: color-mix(in srgb, var(--accent) 26%, #171C22); --success-bg: color-mix(in srgb, var(--success) 24%, #171C22); --warning-bg: color-mix(in srgb, var(--warning) 24%, #171C22); --error-bg: color-mix(in srgb, var(--error) 24%, #171C22); }