/* ============================================================ Benchmark Arena — "Decision Lab" cockpit theme Ported from demos/index.html, layered on Buefy/Bulma 1.x (dark theme activated via ). ============================================================ */ /* ── Design tokens (demo palette) ─────────────────────────── */ :root { --bg: #070b16; --bg-elev: #0d1426; --surface: #121a30; --surface-2: #182240; --surface-3: #1e2b4f; --line: #27345a; --line-2: #354675; --text: #e9eefc; --muted: #8b9bb8; --faint: #5d6d8f; --teal: #2ee6c7; --teal-dim: rgba(46, 230, 199, 0.14); --indigo: #8b9cff; --indigo-dim: rgba(139, 156, 255, 0.16); --gold: #f5c15a; --gold-dim: rgba(245, 193, 90, 0.14); --rose: #ff7a93; --rose-dim: rgba(255, 122, 147, 0.14); --green: #3ee0a0; --shadow: 0 18px 50px rgba(0, 0, 0, 0.35); --radius: 16px; } /* ── Re-theme Bulma (bundled by Buefy) to the palette ─────── */ :root[data-theme='dark'] { --bulma-scheme-h: 224; --bulma-scheme-s: 45%; --bulma-primary-h: 168; --bulma-primary-s: 78%; --bulma-primary-l: 54%; --bulma-link-h: 232; --bulma-link-s: 100%; --bulma-link-l: 77%; --bulma-info-h: 229; --bulma-info-s: 100%; --bulma-info-l: 66%; --bulma-success-h: 155; --bulma-success-s: 68%; --bulma-success-l: 56%; --bulma-warning-h: 40; --bulma-warning-s: 87%; --bulma-warning-l: 65%; --bulma-danger-h: 349; --bulma-danger-s: 100%; --bulma-danger-l: 73%; --bulma-body-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; --bulma-title-family: Outfit, 'IBM Plex Sans', sans-serif; --bulma-subtitle-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; } /* ── Base ─────────────────────────────────────────────────── */ html, body { background: var(--bg) !important; color: var(--text); } body { min-height: 100vh; font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; } #app { min-height: 100vh; display: flex; flex-direction: column; } h1, h2, h3, h4, .brand-word, .display { font-family: Outfit, 'IBM Plex Sans', sans-serif; letter-spacing: -0.03em; } .mono, .num { font-family: 'IBM Plex Mono', ui-monospace, monospace; } a { color: var(--teal); } a:hover { color: #7ff3df; } ::selection { background: var(--teal-dim); color: var(--teal); } /* ── Navbar ───────────────────────────────────────────────── */ .lab-nav { background: rgba(7, 11, 22, 0.86) !important; backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); min-height: 4rem; } .lab-nav .navbar-item, .lab-nav .navbar-link { color: var(--text) !important; } .lab-nav .navbar-item:hover, .lab-nav .navbar-link:hover, .lab-nav .navbar-item.is-active { background: var(--teal-dim) !important; color: var(--teal) !important; } .lab-nav .navbar-burger { color: var(--text); } .brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; margin-right: 10px; background: linear-gradient(135deg, var(--teal), var(--indigo)); color: #061018; font-weight: 800; font-size: 14px; } .brand-word { font-weight: 700; font-size: 1.05rem; } .brand-word span { color: var(--teal); } .compare-pill { background: var(--gold-dim); color: var(--gold) !important; border-radius: 999px; padding: 0.35rem 0.8rem !important; font-weight: 600; font-size: 0.85rem; } /* ── Layout ───────────────────────────────────────────────── */ .shell { flex: 1; padding: 5.4rem 0 3rem; } .wrap { width: min(1240px, calc(100% - 2rem)); margin: 0 auto; } .page-head { margin-bottom: 1.2rem; } /* ── Hero ─────────────────────────────────────────────────── */ .hero-lab { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(900px 280px at 10% -10%, rgba(46,230,199,.18), transparent 50%), radial-gradient(700px 240px at 90% 0%, rgba(139,156,255,.18), transparent 46%), linear-gradient(180deg, var(--bg-elev), var(--surface)); padding: 3.2rem 2.4rem 2.4rem; box-shadow: var(--shadow); } .kicker { color: var(--teal); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .display { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; margin: 0.4rem 0 1rem; } .lede { color: var(--muted); font-size: 1.08rem; max-width: 46rem; } .mesh { position: absolute; inset: 0; pointer-events: none; opacity: 0.18; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(#000, transparent 80%); } /* ── Cards ────────────────────────────────────────────────── */ .panel-lab, .stat, .model-tile, .box { background: var(--surface) !important; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.18); } .lbl { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; } .stat { padding: 1.05rem 1.15rem; } .stat .val { font-size: 1.55rem; font-weight: 700; margin-top: .15rem; } .stat .sub { color: var(--faint); font-size: .8rem; } .section-title { font-size: 1.45rem; margin: 0 0 .35rem; } .section-sub { color: var(--muted); margin-bottom: 1.1rem; } /* ── Tiles ────────────────────────────────────────────────── */ .model-tile { padding: 1.1rem; transition: .15s ease; cursor: pointer; } .model-tile:hover { transform: translateY(-3px); border-color: var(--line-2); } .tile-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; } .score-xl { font-size: 1.8rem; font-weight: 800; color: var(--teal); } /* ── Chips ────────────────────────────────────────────────── */ .chips { display: flex; flex-wrap: wrap; gap: .4rem; } .chip { border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); border-radius: 999px; padding: .28rem .7rem; font-size: .78rem; cursor: pointer; font-weight: 600; transition: .12s ease; user-select: none; } .chip.on, .chip:hover { color: var(--teal); border-color: var(--teal); background: var(--teal-dim); } /* ── Tags ─────────────────────────────────────────────────── */ .tag-lab { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .18rem .55rem; font-size: .72rem; font-weight: 700; background: var(--surface-3); color: var(--muted); border: 1px solid var(--line); } .tag-lab.teal { background: var(--teal-dim); color: var(--teal); border-color: transparent; } .tag-lab.gold { background: var(--gold-dim); color: var(--gold); border-color: transparent; } .tag-lab.indigo { background: var(--indigo-dim); color: var(--indigo); border-color: transparent; } .tag-lab.rose { background: var(--rose-dim); color: var(--rose); border-color: transparent; } /* ── Model cells / avatars ────────────────────────────────── */ .model-cell { display: flex; align-items: center; gap: .7rem; } .av { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: .78rem; color: #061018; flex: none; } /* ── Rank badges ──────────────────────────────────────────── */ .rank { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-3); color: var(--muted); font-weight: 700; font-size: .8rem; } .rank.g { background: linear-gradient(135deg, #f5c15a, #f97316); color: #2a1600; } .rank.s { background: linear-gradient(135deg, #d0d7e8, #8b9bb8); color: #1a2233; } .rank.b { background: linear-gradient(135deg, #d97757, #9a5b3c); color: #2a1208; } /* ── Bars ─────────────────────────────────────────────────── */ .bar { height: 8px; background: #0b1224; border-radius: 99px; overflow: hidden; min-width: 72px; } .bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--indigo), var(--teal)); } .track { height: 12px; background: #0b1224; border-radius: 99px; overflow: hidden; } .track > i { display: block; height: 100%; border-radius: 99px; } /* ── hbar ranking (per-benchmark explorer) ────────────────── */ .hbar { display: grid; grid-template-columns: minmax(150px, 220px) 1fr 64px; gap: .7rem; align-items: center; margin: .45rem 0; } .hbar .name { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hbar .row-click { cursor: pointer; } .hbar .row-click:hover .name { color: var(--teal); } /* ── Key-value rows ───────────────────────────────────────── */ .kv { display: grid; grid-template-columns: 1fr auto; gap: .35rem .8rem; font-size: .86rem; padding: .35rem 0; border-bottom: 1px solid var(--line); } .kv:last-child { border-bottom: 0; } .kv .k { color: var(--muted); } .winner { color: var(--teal); font-weight: 700; } .loser { color: var(--faint); } /* ── Notice / footer ──────────────────────────────────────── */ .notice { background: var(--gold-dim); border: 1px solid rgba(245,193,90,.25); color: #f3d9a0; border-radius: 12px; padding: .8rem 1rem; font-size: .84rem; } .footer-lab { border-top: 1px solid var(--line); color: var(--faint); padding: 1.4rem 0 2rem; font-size: .82rem; } /* ── Grid / utility ───────────────────────────────────────── */ .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .stack { display: flex; flex-direction: column; gap: 1rem; } .row { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; } .mt { margin-top: 1.6rem; } .mt-sm { margin-top: .8rem; } /* ── Buefy table polish (dark cockpit) ────────────────────── */ .b-table .table { background: transparent; color: var(--text); font-size: .9rem; } .b-table .table th, .b-table .table td { border: 0; vertical-align: middle; } .b-table .table tbody td, .b-table .table tfoot td { border-top: 1px solid var(--line); } .b-table .table thead th { background: var(--surface-2); color: var(--muted); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; } .b-table .table tbody tr:hover { background: rgba(46,230,199,.05); } .b-table .table td.is-sticky, .b-table .table th.is-sticky { background: var(--surface); } .b-table .table thead th.is-sticky { background: var(--surface-2); } .b-table .table-wrapper { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); } .b-table input[type=checkbox] { accent-color: var(--teal); } /* sub text under model names inside cells */ .cell-sub { color: var(--faint); font-size: .75rem; } /* ── Buefy tabs (leaderboard tier switcher) ───────────────── */ .b-tabs .tabs { margin-bottom: 1.1rem; } .b-tabs .tab-content { padding: 0; } .b-tabs .tabs a { color: var(--muted); font-weight: 600; font-size: .88rem; border-bottom-color: var(--line-2); } .b-tabs .tabs a:hover { color: var(--teal); border-bottom-color: var(--teal); } .b-tabs .tabs li.is-active a { color: var(--teal); border-bottom-color: var(--teal); } /* toggle variant → segmented control on cockpit surfaces */ .b-tabs .tabs.is-toggle a { background: var(--surface-2); border: 1px solid var(--line); border-bottom-color: var(--line); border-bottom-width: 1px; color: var(--muted); border-radius: 0; } .b-tabs .tabs.is-toggle a:hover { color: var(--teal); border-color: var(--teal); background: var(--surface-3); } .b-tabs .tabs.is-toggle li.is-active a { background: var(--teal-dim); border-color: var(--teal); color: var(--teal); } .b-tabs .tabs.is-toggle li:first-child a { border-radius: 10px 0 0 10px; } .b-tabs .tabs.is-toggle li:last-child a { border-radius: 0 10px 10px 0; } /* keep the segmented look when items wrap on narrow screens */ .b-tabs .tabs.is-toggle.is-multiline li { margin-bottom: .35rem; } .b-tabs .tabs.is-toggle.is-multiline li:first-child a, .b-tabs .tabs.is-toggle.is-multiline li:last-child a { border-radius: 0; } .b-tabs .tabs.is-toggle.is-multiline a { border-radius: 10px !important; margin-right: .4rem; } /* tier chip inside merged-table model cells */ .tier-chip { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .06rem .35rem; border-radius: 6px; margin-left: .35rem; } .tier-chip.closed { background: var(--rose-dim); color: var(--rose); } .tier-chip.open { background: var(--teal-dim); color: var(--teal); } /* Hugging Face chip in table model cells (open-weight models with a verified HF repo — links to huggingface.co/) */ .hf-chip { font-size: .6rem; font-weight: 800; letter-spacing: .05em; padding: .05rem .32rem; margin-left: .35rem; border-radius: 6px; background: var(--teal-dim); color: var(--teal); text-decoration: none; vertical-align: 1px; } .hf-chip:hover { background: var(--teal); color: #06231d; text-decoration: none; } /* full repo id rendered as a clickable tag on the model card header */ .hf-link { font-family: var(--mono, ui-monospace, monospace); font-weight: 600; text-decoration: none; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } .hf-link:hover { color: var(--teal) !important; border-color: var(--teal) !important; } /* ── Model pages / deep links ─────────────────────────────── */ .crumbs { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; } .crumb { color: var(--faint); font-size: .82rem; font-weight: 600; text-decoration: none; } .crumb:hover { color: var(--teal); } .crumb.current { color: var(--muted); } .crumb-sep { color: var(--line-2); } .model-head { display: flex; align-items: center; gap: 1rem; padding: 1.2rem; flex-wrap: wrap; } .model-head .grow { flex: 1; min-width: 220px; } .av.lg { width: 52px; height: 52px; border-radius: 14px; font-size: 1.05rem; } .tag-lab.rose { background: var(--rose-dim); color: var(--rose); border-color: transparent; } .model-link { color: var(--text); text-decoration: none; } .model-link:hover { color: var(--teal); } a.hbar { color: inherit; text-decoration: none; } a.hbar:hover .name { color: var(--teal); } .hbar.missing { opacity: .4; } .crown { color: var(--gold); font-size: .7rem; font-weight: 700; margin-left: .4rem; text-transform: uppercase; letter-spacing: .05em; } .home-stats { margin-bottom: 1.4rem; } .kv.row-click { cursor: pointer; } .kv.row-click:hover .k { color: var(--teal); } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 980px) { .grid-4, .grid-3 { grid-template-columns: 1fr 1fr; } .hbar { grid-template-columns: 130px 1fr 56px; } } @media (max-width: 700px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } .hero-lab { padding: 2rem 1.2rem; } .hbar { grid-template-columns: 1fr; } } /* ── Side-by-side comparison view ─────────────────────────── */ .cmp-toolbar { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; } .cmp-scroll { overflow-x: auto; } .cmp-grid { display: grid; min-width: 760px; } .cmp-corner, .cmp-label { position: sticky; left: 0; z-index: 2; background: var(--surface); border-bottom: 1px solid var(--line); padding: .7rem 1rem; display: flex; flex-direction: column; justify-content: center; gap: .15rem; } .cmp-corner { z-index: 3; border-bottom-color: var(--line-2); } .cmp-label { font-size: .84rem; font-weight: 600; color: var(--muted); } .cmp-hint { color: var(--faint); font-size: .7rem; font-weight: 500; } .cmp-cell { border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); padding: .7rem .9rem; font-size: .92rem; display: flex; flex-direction: column; gap: .3rem; justify-content: center; min-width: 0; } .cmp-headcell { border-bottom-color: var(--line-2); } .cmp-main { font-weight: 600; color: var(--text); overflow-wrap: anywhere; } .cmp-sub { color: var(--faint); font-size: .72rem; } .cmp-bar { max-width: 130px; } .cmp-arrow { color: var(--faint); font-size: .68rem; align-self: center; } .cmp-group { grid-column: 1 / -1; padding: .75rem 1rem .45rem; font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--teal); font-weight: 800; border-bottom: 1px solid var(--line-2); background: var(--surface-2); position: sticky; left: 0; } .cmp-cell.winner-cell { background: var(--teal-dim); } .cmp-cell.winner-cell .cmp-main { color: var(--teal); } .cmp-link { color: var(--indigo); font-size: .78rem; text-decoration: none; } .cmp-link:hover { color: var(--teal); } .cmp-x { border: 0; background: transparent; color: var(--faint); cursor: pointer; width: 26px; height: 26px; border-radius: 8px; flex: none; } .cmp-x:hover { background: var(--rose-dim); color: var(--rose); } .cmp-headcell .av { width: 38px; height: 38px; } /* ── Coverage opacity tiers (leaderboard rows) ───────────────────────── */ /* Rows fade as CL drops so thin benchmark coverage is obvious at a glance without hiding anything. Hover solidifies the row for readability. */ .cov-table tbody tr { transition: opacity .15s ease; } .cov-table tbody tr.cov-full { opacity: 1; } .cov-table tbody tr.cov-mid { opacity: .7; } .cov-table tbody tr.cov-low { opacity: .52; } .cov-table tbody tr.cov-min { opacity: .38; } .cov-table tbody tr:hover { opacity: 1; } /* ── Older (superseded) rows — inline in the main table ──────────────── */ /* When the Older-versions toggle is on, old models interleave in the same ranked table: dimmed, unranked, with a small "older" chip on the name. Rules sit AFTER the coverage tiers so is-older dimming wins while idle; the explicit :hover rules restore full opacity on mouseover. */ .cov-table tbody tr.is-older-row { opacity: .55; } .cov-table tbody tr.is-older-row:hover { opacity: 1; } .cov-table tbody tr.is-older-row .rank { filter: grayscale(1); opacity: .7; } .older-chip { display: inline-block; margin-left: .35rem; padding: 0 .35rem; border-radius: 6px; font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; vertical-align: middle; color: var(--gold, #f5c15a); cursor: help; background: color-mix(in srgb, var(--gold, #f5c15a) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gold, #f5c15a) 35%, transparent); } /* stats-35: "limited data" badge — row covers fewer than half of the selected benchmarks, so its Score leans mostly on the neutral prior. Muted slate (distinct from gold "older" and indigo "new"). */ .limited-chip { display: inline-block; margin-left: .35rem; padding: 0 .35rem; border-radius: 6px; font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; color: #9aa7b5; cursor: help; background: rgba(154, 167, 181, 0.12); border: 1px solid rgba(154, 167, 181, 0.35); } /* ★ footnote marker: model listed under a different name on a source site (tooltip = alias_note from models_meta) */ .alias-star { margin-left: .22rem; font-size: .68rem; vertical-align: middle; color: var(--gold, #f5c15a); cursor: help; opacity: .85; } .alias-star:hover { opacity: 1; } /* Older rows inside the per-benchmark explorer bar list */ .hbar.is-older-row { opacity: .5; } .hbar.is-older-row:hover { opacity: 1; } .hbar.is-older-row .rank { filter: grayscale(1); opacity: .7; } /* ── Min-CL slider ───────────────────────────────────────────────────── */ .cl-slider { -webkit-appearance: none; appearance: none; flex: 1; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--rose, #e2557b), var(--gold, #f5c15a), var(--teal, #2ee6c7)); outline: none; cursor: pointer; max-width: 260px; } .cl-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--text, #e8ecf4); border: 2px solid var(--indigo, #4f6dff); box-shadow: 0 1px 4px rgba(0,0,0,.4); } .cl-slider::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--text, #e8ecf4); border: 2px solid var(--indigo, #4f6dff); box-shadow: 0 1px 4px rgba(0,0,0,.4); } /* ── Status tag on the compare page ──────────────────────────────────── */ .tag-lab.warning { color: var(--gold, #f5c15a); border-color: color-mix(in srgb, var(--gold, #f5c15a) 55%, transparent); background: color-mix(in srgb, var(--gold, #f5c15a) 12%, transparent); } /* ── Avg-set dropdown (user-selectable average, commit B) ────────────── */ .avg-trigger { border-radius: 999px; font-weight: 600; } .avg-trigger.is-warning { border-color: color-mix(in srgb, var(--gold, #f5c15a) 60%, transparent); color: var(--gold, #f5c15a); background: color-mix(in srgb, var(--gold, #f5c15a) 12%, transparent); } .avg-dropdown .dropdown-menu { min-width: 280px; max-width: 320px; } .avg-dropdown .dropdown-item.is-active-preset { color: var(--teal, #2ee6c7); font-weight: 600; background: color-mix(in srgb, var(--teal, #2ee6c7) 8%, transparent); } .avg-bench-list { max-height: 240px; overflow-y: auto; padding: .2rem .9rem; } .avg-bench-row { padding: .15rem 0; } .avg-bench-row .b-checkbox { width: 100%; } /* ── Pricing layer (Price column + Providers page) ────────── */ .price-cell { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: .92rem; color: var(--text); } .price-sep { color: var(--faint); margin: 0 .18rem; } .prov-kind-title { font-family: 'Outfit', sans-serif; font-size: 1.15rem; font-weight: 700; margin: 0; color: var(--text); } /* stats-22: labs vs providers regroup — super-section headers above the kind sub-headers; Labs cards sit directly under their super-header */ .prov-super-title { font-family: 'Outfit', sans-serif; font-size: 1.38rem; font-weight: 700; margin: 0; color: var(--text); } .prov-super .prov-kind-title { font-size: 1.02rem; } /* stats-22 round 2: collapsible sections — header button with chevron + count chip + summary stats; expand/collapse-all pill buttons */ .prov-section-head { display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left; font: inherit; background: none; border: none; padding: .45rem .5rem; cursor: pointer; border-radius: 8px; } .prov-section-head:hover { background: rgba(139, 156, 255, 0.06); } .prov-chevron { color: var(--faint); font-size: .8rem; width: 1rem; text-align: center; } .prov-sec-n { font-family: 'IBM Plex Mono', monospace; font-size: .78rem; font-weight: 700; color: var(--teal); background: var(--teal-dim); border: 1px solid rgba(46, 230, 199, 0.35); border-radius: 10px; padding: 0 .45rem; } .prov-sec-stats { white-space: nowrap; } .prov-sec-desc { color: var(--faint); font-size: .8rem; margin-left: auto; text-align: right; } @media (max-width: 860px) { .prov-sec-desc { display: none; } } .prov-section-body { padding: 0 .25rem; } .prov-expbtn { font-size: .78rem; font-weight: 600; color: var(--muted); background: rgba(139, 156, 255, 0.08); border: 1px solid var(--line); border-radius: 8px; padding: .22rem .65rem; cursor: pointer; } .prov-expbtn:hover:not(:disabled) { background: rgba(139, 156, 255, 0.16); color: var(--text); } .prov-expbtn:disabled { opacity: .45; cursor: default; } .prov-card { padding: 1rem 1.15rem; } .prov-name { font-family: 'Outfit', sans-serif; font-size: 1.02rem; font-weight: 600; margin: 0; } .prov-table { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: .55rem; } .prov-table th { color: var(--faint); font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; text-align: right; padding: .3rem .5rem; border-bottom: 1px solid var(--line); } .prov-table th.left { text-align: left; } .prov-table td { padding: .34rem .5rem; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; } .prov-table tbody tr:last-child td { border-bottom: none; } .prov-table tbody tr:hover td { background: rgba(139, 156, 255, 0.05); } .prov-table td.left { text-align: left; } .prov-model { color: var(--text); font-weight: 500; } .prov-id { color: var(--faint); font-size: .78rem; margin-left: .45rem; font-family: 'IBM Plex Mono', monospace; } .free-chip { display: inline-block; margin-left: .45rem; padding: 0 .4rem; border-radius: 10px; font-size: .68rem; font-weight: 700; letter-spacing: .03em; color: var(--teal); background: var(--teal-dim); border: 1px solid rgba(46, 230, 199, 0.35); vertical-align: 1px; cursor: help; } /* ── Availability chips + model-card seller rows (stats-18) ───────────── "available at" layer: the leaderboard shows compact signals (free chip above, sellers chip here), the model card lists every seller in full. */ .avail-chip { display: inline-block; margin-left: .35rem; padding: 0 .35rem; border-radius: 10px; font-size: .62rem; font-weight: 700; letter-spacing: .03em; color: var(--gold); background: var(--gold-dim); border: 1px solid rgba(245, 193, 90, 0.35); vertical-align: 1px; cursor: help; white-space: nowrap; } .avail-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--line); } .avail-row:last-of-type { border-bottom: 0; } .avail-seller { color: var(--text); font-weight: 600; font-size: .92rem; } .avail-side { display: flex; align-items: center; gap: .55rem; white-space: nowrap; } .avail-price { font-family: 'IBM Plex Mono', monospace; font-size: .85rem; color: var(--muted); } /* ── Compare pivot — models × providers (stats-18) ────────── */ .pm-controls { flex-wrap: wrap; gap: .35rem .45rem; align-items: center; } /* stats-23: By-provider pricing filters — the same reusable widget as the Compare row (.pm-controls), same look; a separate class keeps the tabs' DOM scoping (and the e2e selectors) unambiguous. */ .pv-controls { flex-wrap: wrap; gap: .35rem .45rem; align-items: center; } .pm-chip { cursor: pointer; user-select: none; padding: .16rem .58rem; border-radius: 14px; font-size: .78rem; font-weight: 600; font-family: inherit; color: var(--faint); background: transparent; border: 1px solid var(--line); transition: color .12s ease, border-color .12s ease, background .12s ease; } .pm-chip:hover { color: var(--muted); border-color: var(--line-2); } .pm-chip.is-on { color: var(--text); border-color: rgba(139, 156, 255, 0.55); background: rgba(139, 156, 255, 0.12); } .pm-chip-n { color: var(--faint); font-weight: 500; margin-left: .3rem; font-size: .72rem; } /* stats-22: picker chips clustered Providers / Labs */ .pm-chip-group { color: var(--faint); font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin: 0 .3rem 0 .55rem; white-space: nowrap; } .pm-chip-group + .pm-chip { margin-left: .1rem; } .pm-price-label { min-width: 11ch; display: inline-block; } .pm-coverage { text-align: right; } .pm-page-label { white-space: nowrap; margin: 0 .5rem; } .page-size select, .pm-pager select { width: auto; } .pm-wrap { overflow-x: auto; margin-top: .55rem; } .pm-table { min-width: 760px; } .pm-table th.pm-h { cursor: pointer; white-space: nowrap; user-select: none; } .pm-table th.pm-h:hover { color: var(--muted); } .pm-table th.is-sorted { color: var(--text); } .pm-sort-arrow { font-size: .82em; } .pm-model-col { position: sticky; left: 0; z-index: 2; background: var(--bg-elev, #0d1426); min-width: 220px; max-width: 340px; box-shadow: 1px 0 0 var(--line); } .pm-cell { white-space: nowrap; } .pm-cell.is-cheapest { background: var(--teal-dim); box-shadow: inset 0 0 0 1px rgba(46, 230, 199, 0.30); } .pm-cell.is-cheapest .price-cell { font-weight: 700; color: var(--teal); } .pm-absent { color: var(--faint); opacity: .4; } .pm-cell.score-cell .score-val { font-weight: 600; font-variant-numeric: tabular-nums; } th.pm-h.score-col { min-width: 58px; } /* Latency ladder — live since stats-24 (AA median TTFT via models_meta) */ .lat-fast .price-cell, .price-cell.lat-fast { color: var(--green); } .lat-ok .price-cell, .price-cell.lat-ok { color: var(--gold); } .lat-slow .price-cell, .price-cell.lat-slow { color: var(--rose); } /* Tier chips inside the Compare legend paragraph (stats-24) */ .legend-chip { display: inline-block; padding: 0 0.45em; border-radius: 8px; font-weight: 600; white-space: nowrap; } .legend-chip.lat-fast { background: rgba(var(--green-rgb, 46, 230, 122), 0.12); color: var(--green); } .legend-chip.lat-ok { background: rgba(var(--gold-rgb, 255, 193, 7), 0.12); color: var(--gold); } .legend-chip.lat-slow { background: rgba(var(--rose-rgb, 255, 99, 132), 0.12); color: var(--rose); } /* ── stats-26: Buefy tooltip wrappers on full-width rows ──────────────── b-tooltip renders an inline-flex root; rows that must stretch to the container width (model-card hbars, benchmark ranking rows, top-3 kv rows) get the .tt-block class so the trigger fills the row again. */ .tt-block { display: flex; width: 100%; } .tt-block > .tooltip-trigger { width: 100%; } /* ── stats-27: NEW badge — freshly released models ────────────────────── Date-based flag from models_meta.created (release date per OpenRouter), window user-adjustable (7/14/30 days, lib/newFlag.js singleton). Indigo — distinct from the teal free chip, gold sellers chip and the latency ladder. Same pill anatomy as the other chips. */ .new-chip { display: inline-block; margin-left: .45rem; padding: 0 .4rem; border-radius: 10px; font-size: .66rem; font-weight: 700; letter-spacing: .06em; color: var(--indigo); background: var(--indigo-dim); border: 1px solid rgba(139, 156, 255, 0.4); vertical-align: 1px; cursor: help; white-space: nowrap; } /* Model-card header variant — the card's tag row uses .tag-lab pills */ .tag-lab.new-tag { color: var(--indigo); background: var(--indigo-dim); border: 1px solid rgba(139, 156, 255, 0.4); cursor: help; } /* ── Value map (stats-31) — interactive quality-per-dollar scatter ────── */ .vm-controls { padding: .9rem 1rem; display: flex; flex-direction: column; gap: .55rem; } .vm-row { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center; } .vm-pick { display: inline-flex; align-items: center; gap: .5rem; } .vm-lab { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; white-space: nowrap; } .vm-wrap { position: relative; padding: .9rem .5rem .2rem; } .value-map { width: 100%; height: auto; display: block; } .value-map .vgrid { stroke: var(--line); stroke-opacity: .5; stroke-width: 1; } .value-map .vaxl { stroke: var(--line-2); stroke-width: 1.2; } .value-map .vtick { fill: var(--muted); font-size: 11px; } .value-map .vaxtitle { fill: var(--muted); font-size: 12.5px; font-weight: 600; } .value-map .vfrontier { fill: none; stroke: var(--teal); stroke-width: 1.7; stroke-dasharray: 7 5; stroke-opacity: .85; } .value-map .vhalo { fill: none; stroke: var(--teal); stroke-opacity: .65; stroke-width: 1.6; } .value-map .vpt { cursor: pointer; fill-opacity: .82; } .value-map .vpt.old { fill-opacity: .16; stroke-width: 1.4; } .value-map .vpt.newm { stroke-width: 2.2; } .value-map .vpt:hover { fill-opacity: 1; } .vm-empty { padding: 3rem 1rem; text-align: center; color: var(--muted); } .vtip { position: absolute; z-index: 30; pointer-events: none; min-width: 230px; max-width: 300px; background: var(--surface-3); border: 1px solid var(--line-2); border-radius: 10px; padding: .6rem .75rem .55rem; box-shadow: 0 12px 32px rgba(0, 0, 0, .5); } .vt-head { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; } .vt-name { font-weight: 700; font-size: .95rem; } .vt-sub { color: var(--muted); font-size: .78rem; margin: .1rem 0 .45rem; } .vt-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .8rem; padding: .13rem 0; } .vt-row span { color: var(--muted); white-space: nowrap; } .vt-row b { font-weight: 600; text-align: right; } .vt-hint { margin-top: .45rem; color: var(--faint); font-size: .72rem; font-style: italic; } .vnew-chip { font-size: .64rem; font-weight: 800; letter-spacing: .06em; color: var(--gold); background: var(--gold-dim); border: 1px solid rgba(245, 193, 90, .45); border-radius: 8px; padding: 0 .35rem; vertical-align: 1px; } .vold-chip { font-size: .64rem; font-weight: 700; letter-spacing: .06em; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 0 .35rem; vertical-align: 1px; } .vm-frontier { display: flex; flex-wrap: wrap; gap: .4rem .45rem; align-items: center; justify-content: center; margin-top: .7rem; } .vm-legend { display: flex; flex-wrap: wrap; gap: .4rem .95rem; justify-content: center; margin-top: .7rem; } .vm-lg { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .78rem; } .vm-lg i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } /* ── Use-case advisor (stats-33) ───────────────────────────── 4-step wizard: progress bar, step cards, lab-style inputs. */ .wizard-bar { height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: .8rem; } .wizard-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--indigo), var(--teal)); transition: width .25s ease; } .step-card { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 1rem; cursor: pointer; transition: .15s ease; } .step-card:hover { border-color: var(--teal); transform: translateY(-2px); } .step-card.on { border-color: var(--teal); background: var(--teal-dim); } .field-lab label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; } .input-lab { width: 100%; padding: .5rem .7rem; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--text); } .input-lab:focus { outline: none; border-color: var(--teal); } .btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .95rem; border-radius: 10px; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 600; font-size: .9rem; text-decoration: none; transition: .15s ease; } .btn:hover { border-color: var(--teal); color: var(--teal); } .btn.primary { background: var(--teal); border-color: var(--teal); color: #06231d; } .btn.primary:hover { filter: brightness(1.08); color: #06231d; } .btn.tiny { padding: .3rem .6rem; font-size: .8rem; border-radius: 8px; } .btn:disabled { opacity: .45; cursor: not-allowed; } .tag-lab.muted { background: transparent; color: var(--muted); border-color: var(--line); } .adv-meta { color: var(--muted); font-size: .82rem; display: flex; flex-wrap: wrap; gap: .9rem; } .adv-note { color: var(--muted); font-size: .8rem; } /* ── stats-38: "my gateways" overlay columns on the Compare pivot ───────── The user's own gateways appended after the catalog columns. Dashed teal accents mark the overlay so it never reads as a catalog seller. The overlay is additive-only: cheapest-cell highlighting and the pricing filters stay catalog-only by construction. */ .pm-h-mine { border-left: 1px dashed rgba(46, 230, 199, 0.45); } .pm-mine-tag { font-size: .56rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; background: var(--teal-dim); color: var(--teal); border-radius: 6px; padding: .05rem .3rem; margin-left: .3rem; vertical-align: 1px; } .pm-cell-mine { box-shadow: inset 1px 0 0 var(--line); } .pm-mine-price { color: var(--teal); } .mine-under { color: var(--teal); font-size: .62rem; font-weight: 800; letter-spacing: .04em; margin-left: .3rem; white-space: nowrap; }