/* apifystats design system — from the Claude Design doc (boards 1a–1k). IBM Plex Sans for UI/prose, IBM Plex Mono for every numeric and label. Light is warm paper (hue 90), dark is cool ink (hue 260). Theme comes from the OS unless the user picked one (data-theme on , persisted). */ :root { --bg: oklch(0.99 0.003 90); --bg-alt: oklch(0.97 0.004 90); --bg-thead: oklch(0.965 0.004 90); --bg-row-alt: oklch(0.985 0.003 90); --bg-chip: oklch(0.96 0.004 90); --card: #fff; --border: oklch(0.91 0.006 90); --border-soft: oklch(0.93 0.006 90); --border-row: oklch(0.94 0.006 90); --border-strong: oklch(0.89 0.006 90); --border-input: oklch(0.88 0.006 90); --ink: oklch(0.22 0.008 260); --muted: oklch(0.42 0.01 260); --muted-2: oklch(0.5 0.01 260); --faint: oklch(0.55 0.01 260); --accent: oklch(0.52 0.13 255); --accent-hover: oklch(0.42 0.14 255); --accent-text: oklch(0.38 0.13 255); --accent-wash: oklch(0.52 0.13 255 / 0.08); --good: oklch(0.55 0.13 150); --good-text: oklch(0.45 0.13 150); --warn: oklch(0.72 0.14 75); --warn-text: oklch(0.55 0.12 75); --orange: oklch(0.62 0.15 50); --orange-text: oklch(0.55 0.15 50); --bad: oklch(0.55 0.15 30); --bad-text: oklch(0.5 0.15 30); --stale: oklch(0.62 0.02 260); --editorial: oklch(0.56 0.15 330); --editorial-text: oklch(0.44 0.16 330); --editorial-wash: oklch(0.56 0.15 330 / 0.05); --skeleton: oklch(0.93 0.004 90); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: oklch(0.2 0.008 260); --bg-alt: oklch(0.23 0.008 260); --bg-thead: oklch(0.24 0.01 260); --bg-row-alt: oklch(0.22 0.008 260); --bg-chip: oklch(0.25 0.01 260); --card: oklch(0.23 0.008 260); --border: oklch(0.3 0.012 260); --border-soft: oklch(0.3 0.012 260); --border-row: oklch(0.27 0.01 260); --border-strong: oklch(0.32 0.012 260); --border-input: oklch(0.34 0.012 260); --ink: oklch(0.93 0.004 260); --muted: oklch(0.78 0.01 260); --muted-2: oklch(0.72 0.01 260); --faint: oklch(0.65 0.01 260); --accent: oklch(0.68 0.14 255); --accent-hover: oklch(0.78 0.12 255); --accent-text: oklch(0.8 0.1 255); --accent-wash: oklch(0.68 0.14 255 / 0.12); --good: oklch(0.72 0.15 150); --good-text: oklch(0.75 0.15 150); --warn: oklch(0.78 0.15 75); --warn-text: oklch(0.8 0.14 75); --orange: oklch(0.7 0.16 50); --orange-text: oklch(0.75 0.15 50); --bad: oklch(0.65 0.17 30); --bad-text: oklch(0.72 0.16 30); --stale: oklch(0.55 0.02 260); --editorial: oklch(0.62 0.15 330); --editorial-text: oklch(0.72 0.13 330); --editorial-wash: oklch(0.62 0.15 330 / 0.09); --skeleton: oklch(0.28 0.01 260); } } :root[data-theme="dark"] { --bg: oklch(0.2 0.008 260); --bg-alt: oklch(0.23 0.008 260); --bg-thead: oklch(0.24 0.01 260); --bg-row-alt: oklch(0.22 0.008 260); --bg-chip: oklch(0.25 0.01 260); --card: oklch(0.23 0.008 260); --border: oklch(0.3 0.012 260); --border-soft: oklch(0.3 0.012 260); --border-row: oklch(0.27 0.01 260); --border-strong: oklch(0.32 0.012 260); --border-input: oklch(0.34 0.012 260); --ink: oklch(0.93 0.004 260); --muted: oklch(0.78 0.01 260); --muted-2: oklch(0.72 0.01 260); --faint: oklch(0.65 0.01 260); --accent: oklch(0.68 0.14 255); --accent-hover: oklch(0.78 0.12 255); --accent-text: oklch(0.8 0.1 255); --accent-wash: oklch(0.68 0.14 255 / 0.12); --good: oklch(0.72 0.15 150); --good-text: oklch(0.75 0.15 150); --warn: oklch(0.78 0.15 75); --warn-text: oklch(0.8 0.14 75); --orange: oklch(0.7 0.16 50); --orange-text: oklch(0.75 0.15 50); --bad: oklch(0.65 0.17 30); --bad-text: oklch(0.72 0.16 30); --stale: oklch(0.55 0.02 260); --editorial: oklch(0.62 0.15 330); --editorial-text: oklch(0.72 0.13 330); --editorial-wash: oklch(0.62 0.15 330 / 0.09); --skeleton: oklch(0.28 0.01 260); } * { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: "IBM Plex Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; font-size: 15px; line-height: 1.5; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; } table { border-collapse: collapse; } .mono { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; } .label { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); } /* ---- header ---- */ .site-header { display: flex; align-items: center; gap: 24px; padding: 0 32px; height: 60px; border-bottom: 1px solid var(--border); } .wordmark { display: flex; align-items: baseline; gap: 7px; color: var(--ink); } .wordmark:hover { text-decoration: none; color: var(--ink); } .wordmark .datum { width: 11px; height: 11px; background: var(--accent); } .wordmark .name { font-family: "IBM Plex Mono", monospace; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; } .site-nav { display: flex; gap: 22px; font-size: 14px; color: var(--muted); } .site-nav a { color: inherit; } .site-nav a:hover { color: var(--ink); text-decoration: none; } .site-nav a.active { font-weight: 600; color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); } .header-meta { margin-left: auto; display: flex; align-items: center; gap: 14px; font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--muted-2); } .theme-toggle { display: flex; border: 1px solid var(--border-input); border-radius: 7px; overflow: hidden; font-size: 12px; font-family: "IBM Plex Sans", sans-serif; } .theme-toggle button { all: unset; padding: 5px 9px; cursor: pointer; color: var(--muted-2); } .theme-toggle button.on { background: var(--bg-chip); font-weight: 600; color: var(--ink); } /* ---- search box ---- */ .search-box { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 20px; background: var(--card); border: 1.5px solid var(--accent); border-radius: 10px; box-shadow: 0 1px 2px oklch(0.5 0.03 260 / 0.06), 0 0 0 4px var(--accent-wash); } .search-box input { all: unset; flex: 1; font-size: 17px; color: var(--ink); min-width: 0; } .search-box input::placeholder { color: var(--faint); } .search-box .kbd { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--faint); border: 1px solid var(--border-input); border-radius: 5px; padding: 3px 7px; } .search-box.compact { height: 40px; padding: 0 12px; border-radius: 8px; box-shadow: none; } .search-box.compact input { font-size: 14.5px; } /* ---- chips ---- */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 13px; background: var(--bg-chip); border: 1px solid var(--border); color: var(--muted); cursor: pointer; white-space: nowrap; } .chip:hover { color: var(--ink); text-decoration: none; } .chip.on { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-text); font-family: "IBM Plex Mono", monospace; font-size: 12px; } /* ---- stat tiles ---- */ .stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--border); } .stat-tile { padding: 22px 26px; display: flex; flex-direction: column; gap: 5px; border-right: 1px solid var(--border-soft); } .stat-tile:last-child { border-right: none; } .stat-tile .value { font-family: "IBM Plex Mono", monospace; font-size: 32px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .stat-tile .sub { font-size: 12px; color: var(--muted-2); } .stat-tile .sub .up { color: var(--good-text); font-weight: 600; } .stat-tile .sub .down { color: var(--bad-text); font-weight: 600; } /* ---- cards ---- */ .card { border: 1px solid var(--border); border-radius: 10px; padding: 18px; background: var(--card); display: flex; flex-direction: column; gap: 9px; color: var(--ink); } a.card:hover { text-decoration: none; border-color: var(--accent); color: var(--ink); } .card .kicker { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--editorial-text); } .card h3 { margin: 0; font-size: 16px; font-weight: 600; } .card .desc { font-size: 13px; line-height: 1.45; color: var(--muted-2); } .card .meta { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; } /* ---- results table ---- */ .results-table { width: 100%; font-size: 13.5px; } .results-table th { padding: 9px 12px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; color: var(--muted-2); text-align: right; white-space: nowrap; border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); background: var(--bg-thead); cursor: pointer; user-select: none; } .results-table th:first-child { text-align: left; } .results-table th.sorted { font-weight: 600; color: var(--ink); border-bottom: 2px solid var(--accent); } .results-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); text-align: right; font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; white-space: nowrap; } .results-table td:first-child { text-align: left; font-family: "IBM Plex Sans", sans-serif; white-space: normal; } .results-table tbody tr:nth-child(even) { background: var(--bg-row-alt); } .actor-cell { display: flex; flex-direction: column; gap: 2px; } .actor-cell .t { font-weight: 600; } .actor-cell .u { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: var(--muted-2); } .model-badge { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; padding: 2px 5px; border: 1px solid var(--border-strong); border-radius: 4px; color: var(--muted-2); margin-right: 7px; } .price { font-weight: 600; } .price .unit { font-weight: 400; color: var(--muted-2); font-size: 11px; } .mom-up { color: var(--good-text); } .mom-down { color: var(--bad-text); } .mom-none { color: var(--muted-2); } .rating-count { color: var(--faint); font-size: 12px; } .age { color: var(--muted); } /* relative price gauge: 4 ascending bars, signal-strength semantics — MORE bars = BETTER price within the comparable rows of the current result set. 4 green (good) · 3 yellow (fair) · 2 orange (high) · 1 red (steep). */ .price-gauge { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 11px; margin-right: 7px; vertical-align: -1px; cursor: help; } .price-gauge i { width: 3px; border-radius: 1px; background: var(--border-strong); } .price-gauge i:nth-child(1) { height: 4px; } .price-gauge i:nth-child(2) { height: 6.5px; } .price-gauge i:nth-child(3) { height: 9px; } .price-gauge i:nth-child(4) { height: 11px; } .price-gauge.g4 i { background: var(--good); } .price-gauge.g3 i:nth-child(-n+3) { background: var(--warn); } .price-gauge.g2 i:nth-child(-n+2) { background: var(--orange); } .price-gauge.g1 i:nth-child(1) { background: var(--bad); } .price-sub { display: block; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.03em; margin-top: 2px; } .price-sub.l0 { color: var(--good-text); } .price-sub.l1 { color: var(--warn-text); } .price-sub.l2 { color: var(--orange-text); } .price-sub.l3 { color: var(--bad-text); } .fresh-dot { width: 9px; height: 9px; border-radius: 999px; display: inline-block; } .fresh-dot.f0 { background: var(--good); } .fresh-dot.f1 { background: var(--warn); } .fresh-dot.f2 { background: var(--stale); } .success-bar { width: 44px; height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 8px; } .success-bar i { display: block; height: 100%; background: var(--good); } .badge { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 4px; padding: 3px 6px; display: inline-flex; } .badge.measured { color: var(--accent-text); border: 1px solid var(--accent); background: var(--accent-wash); } .badge.cheapest { color: var(--good-text); border: 1px solid var(--good); background: oklch(0.6 0.12 150 / 0.09); } .badge.featured { color: var(--editorial-text); border: 1px solid var(--editorial); letter-spacing: 0.1em; } /* ---- verdict & methodology ---- */ .verdict-card { border: 1px solid var(--editorial); border-left: 4px solid var(--editorial); background: var(--editorial-wash); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; } .verdict-card .label { color: var(--editorial-text); font-weight: 600; letter-spacing: 0.07em; } .method-card { border: 1px solid var(--border); background: var(--bg-alt); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 7px; } /* ---- filters sidebar ---- */ .filters { display: flex; flex-direction: column; gap: 22px; } .filter-group { display: flex; flex-direction: column; gap: 9px; } .filter-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; } .filter-check .count { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--faint); margin-left: auto; font-variant-numeric: tabular-nums; } .filter-check input { display: none; } .filter-check .box { width: 14px; height: 14px; border: 1px solid oklch(0.85 0.008 90); border-radius: 3px; background: var(--card); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; } .filter-check input:checked + .box { border-color: var(--accent); background: var(--accent); } .filter-check input:checked + .box::after { content: "\2713"; } .seg { display: flex; gap: 5px; font-family: "IBM Plex Mono", monospace; font-size: 11.5px; } .seg button { all: unset; flex: 1; text-align: center; padding: 5px 0; border: 1px solid var(--border-strong); border-radius: 5px; color: var(--muted-2); cursor: pointer; } .seg button.on { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-text); font-weight: 600; } /* ---- pagination ---- */ .pagination { display: flex; gap: 6px; font-family: "IBM Plex Mono", monospace; font-size: 12.5px; } .pagination button { all: unset; padding: 5px 10px; border: 1px solid var(--border-strong); border-radius: 6px; cursor: pointer; color: var(--ink); } .pagination button:disabled { color: var(--stale); cursor: default; } .pagination button.on { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 600; } /* ---- states ---- */ .skeleton-row { display: flex; gap: 10px; align-items: center; padding: 8px 0; } .skeleton-row div { height: 11px; background: var(--skeleton); border-radius: 3px; animation: pulse 1.2s ease-in-out infinite; } @keyframes pulse { 50% { opacity: 0.55; } } .empty-state { display: flex; flex-direction: column; gap: 8px; padding: 40px 0; max-width: 480px; } .empty-state h3 { margin: 0; font-size: 15px; } .empty-state p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted-2); } .btn-ghost { all: unset; font-size: 12.5px; padding: 6px 11px; border-radius: 7px; cursor: pointer; border: 1px solid var(--border-input); color: var(--muted); } .btn-ghost.accent { border-color: var(--accent); color: var(--accent-text); } /* ---- footer ---- */ .site-footer { padding: 26px 32px; background: var(--bg-alt); border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; font-size: 12px; color: var(--muted-2); line-height: 1.5; } .site-footer .brand { display: flex; flex-direction: column; gap: 7px; max-width: 560px; } .site-footer strong { font-weight: 600; color: var(--muted); } .site-footer .cols { display: flex; gap: 44px; font-size: 13px; color: var(--muted); } .site-footer .col { display: flex; flex-direction: column; gap: 6px; } /* ---- mobile ---- */ .result-card { border: 1px solid var(--border); border-radius: 11px; padding: 13px; background: var(--card); display: flex; flex-direction: column; gap: 9px; } .result-card .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .result-card .price-lg { font-family: "IBM Plex Mono", monospace; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; } .result-card .stats { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } @media (max-width: 860px) { .site-header { padding: 0 16px; gap: 14px; } .site-nav { gap: 14px; } .header-meta .data-date { display: none; } .stat-strip { grid-template-columns: repeat(2, 1fr); } .stat-tile:nth-child(2) { border-right: none; } .stat-tile { border-bottom: 1px solid var(--border-soft); } } @media (max-width: 560px) { /* phones: the theme switcher goes away entirely — the theme still follows the OS (and any choice made on a wider screen stays in localStorage) */ .theme-toggle { display: none; } .site-header { padding: 0 12px; gap: 12px; height: 52px; } .wordmark .name { font-size: 15px; } .wordmark .datum { width: 9px; height: 9px; } .site-nav { gap: 12px; font-size: 13.5px; } }