/* On the Bench: AI tool benchmark results site. Dark-first, Inter, no framework. */ @font-face { font-family: "Inter"; src: url("fonts/Inter-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Inter"; src: url("fonts/Inter-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; } @font-face { font-family: "Inter"; src: url("fonts/Inter-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; } @font-face { font-family: "Inter"; src: url("fonts/Inter-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; } /* Theme palettes. Every colour used across the site is a variable here, so a single [data-theme] flip on restyles every surface, including the canvas charts (they re-read --fg-dim / --grid via chartTheme() on toggle). Defaults below are the dark palette; [data-theme="light"] overrides them. An inline script in sets data-theme before first paint (no flash), defaulting to the OS prefers-color-scheme when nothing is stored. */ :root, [data-theme="dark"] { color-scheme: dark; --bg: #0d1117; --bg-raise: #161b22; --bg-hover: #1c232d; --border: #2d333b; --fg: #e6edf3; --fg-dim: #9aa4b2; --fg-mute: #626c7a; --accent: #4cc38a; --accent-fg: #08130d; --red: #e5534b; --green: #2ea55f; --grey: #4b5563; --link: #6cb6ff; --chip-fg: #fff; --on-cell-fg: #fff; --grid: rgba(154,164,178,.18); --shadow-strong: rgba(0,0,0,.35); --shadow-soft: rgba(0,0,0,.3); --overlay: rgba(0,0,0,.5); --best: rgba(108,182,255,.14); --img-bg: #fff; } [data-theme="light"] { color-scheme: light; --bg: #f6f8fa; --bg-raise: #ffffff; --bg-hover: #eef1f4; --border: #d0d7de; --fg: #1f2328; --fg-dim: #57606a; --fg-mute: #8b949e; --accent: #1a7f4b; --accent-fg: #ffffff; --red: #c1362f; --green: #1a7f4b; --grey: #8b96a5; --link: #0969da; --chip-fg: #fff; --on-cell-fg: #fff; --grid: rgba(87,96,106,.20); --shadow-strong: rgba(31,35,40,.18); --shadow-soft: rgba(31,35,40,.12); --overlay: rgba(31,35,40,.4); --best: rgba(9,105,218,.12); --img-bg: #fff; } * { box-sizing: border-box; } html { font-size: 15px; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: "Inter", -apple-system, "Segoe UI", sans-serif; line-height: 1.55; font-variant-numeric: tabular-nums; } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } code { background: var(--bg-raise); border: 1px solid var(--border); border-radius: 4px; padding: .1em .35em; font-size: .88em; } .hidden { display: none !important; } .muted { color: var(--fg-mute); } .fineprint { color: var(--fg-mute); font-size: .82rem; margin-top: 1rem; } .lede { color: var(--fg-dim); max-width: 70ch; } /* header */ .site-header { border-bottom: 1px solid var(--border); background: var(--bg-raise); padding-top: 2.2rem; } .site-header h1 { margin: 0 0 .35rem; font-size: 1.7rem; font-weight: 700; letter-spacing: -.01em; } .brand-sub { color: var(--fg-mute); font-size: .95rem; font-weight: 500; margin-left: .45rem; letter-spacing: 0; } .tagline { margin: 0 0 1rem; color: var(--fg-dim); max-width: 72ch; } /* category row: the benchmarked thing (gateways today), above the view tabs */ .catnav { display: flex; align-items: center; gap: .55rem; margin: 0 0 .7rem; } .catnav-label { color: var(--fg-mute); font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; } .catnav .cat { display: inline-block; padding: .18rem .85rem; border: 1px solid var(--border); border-radius: 999px; color: var(--fg-dim); font-size: .84rem; font-weight: 600; text-decoration: none; } .catnav .cat:hover { color: var(--fg); text-decoration: none; } .catnav .cat.active { background: var(--accent); border-color: transparent; color: var(--accent-fg); } .tabs { display: flex; gap: .25rem; } .tab { appearance: none; background: none; border: none; border-bottom: 2px solid transparent; color: var(--fg-dim); font: inherit; font-weight: 500; padding: .55rem .9rem; cursor: pointer; display: inline-block; text-decoration: none; } .tab:hover { color: var(--fg); text-decoration: none; } .tab.active { color: var(--fg); border-bottom-color: var(--accent); } main { padding: 1.6rem 0 3rem; } .view h2 { font-size: 1.2rem; margin: .2rem 0 .6rem; } /* controls */ .controls { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; margin-top: 1.4rem; margin-bottom: .9rem; } .control-group { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .toggle { color: var(--fg-dim); font-size: .86rem; display: inline-flex; gap: .35rem; align-items: center; cursor: pointer; } .toggle input { accent-color: var(--accent); } .chip-filter { appearance: none; font: inherit; font-size: .8rem; font-weight: 500; cursor: pointer; border: 1px solid var(--border); border-radius: 999px; padding: .15rem .7rem; background: var(--bg-raise); color: var(--fg-dim); } .chip-filter.on { color: var(--chip-fg); border-color: transparent; } #search { font: inherit; font-size: .86rem; color: var(--fg); background: var(--bg-raise); border: 1px solid var(--border); border-radius: 6px; padding: .35rem .6rem; min-width: 12rem; } #search:focus { outline: 1px solid var(--accent); } .count { font-size: .82rem; margin-left: auto; white-space: nowrap; } /* results table */ .table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-raise); } table { border-collapse: collapse; width: 100%; font-size: .86rem; } thead th { position: sticky; top: 0; background: var(--bg-raise); color: var(--fg-dim); font-weight: 600; text-align: right; padding: .6rem .7rem; white-space: nowrap; border-bottom: 1px solid var(--border); cursor: pointer; user-select: none; } thead th:first-child, tbody td:first-child { text-align: left; } /* Lock ONLY the identity of each row (checkbox + Gateway name) while the metric columns, Class and Lang included, scroll horizontally. Scoped to the results table only (not the matrix grid or the compare table, which share .table-scroll). Fixed widths give the Gateway column a stable left offset equal to the checkbox width; the inset border is the divider the scrolling columns slide under. Applies at every viewport width. */ #results-table thead th:nth-child(1), #results-table tbody td:nth-child(1), #results-table thead th:nth-child(2), #results-table tbody td:nth-child(2) { position: sticky; z-index: 1; background: var(--bg-raise); } #results-table thead th:nth-child(1), #results-table thead th:nth-child(2) { z-index: 3; } /* Widths must be >= the widest content in each column (auto table-layout would otherwise grow the real column past these and the left offset would drift). min-width pins them. */ /* Slim padding keeps the checkbox column's real width at its declared 2.4rem (content + default padding would overflow it and drift the Gateway column's sticky left offset by the difference). */ #results-table thead th:nth-child(1), #results-table tbody td:nth-child(1) { left: 0; width: 2.4rem; min-width: 2.4rem; padding-left: .4rem; padding-right: .4rem; } #results-table thead th:nth-child(2), #results-table tbody td:nth-child(2) { left: 2.4rem; width: 11rem; min-width: 11rem; box-shadow: inset -1px 0 0 var(--border); } #results-table tbody tr:hover td:nth-child(1), #results-table tbody tr:hover td:nth-child(2) { background: var(--bg-hover); } /* Even, full-width matrix columns: fixed layout so the six upstream columns share the row equally instead of clumping by header-text width. */ .matrix-table table { table-layout: fixed; width: 100%; } .matrix-table th.axis, .matrix-table td.name { width: 8.5rem; } .matrix-table th:not(.axis), .matrix-table td:not(.name) { text-align: center; } thead th.sorted { color: var(--fg); } thead th .dir { color: var(--accent); } tbody td { padding: .5rem .7rem; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover td { background: var(--bg-hover); } td.na { color: var(--fg-mute); font-size: .78rem; } td.name a { color: var(--fg); font-weight: 600; } .lang-chip { display: inline-block; padding: .05rem .55rem; border-radius: 999px; color: var(--chip-fg); font-size: .74rem; font-weight: 600; } .cls-chip { display: inline-block; padding: .05rem .55rem; border-radius: 999px; border: 1px solid var(--border); color: var(--fg-dim); font-size: .74rem; font-weight: 500; white-space: nowrap; } td.sel { width: 1.6rem; } td.sel input { accent-color: var(--accent); cursor: pointer; } thead th.nosort { cursor: default; } tbody tr { cursor: pointer; } /* drawer (per-gateway slide-over) */ .backdrop { position: fixed; inset: 0; background: var(--overlay); z-index: 60; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 94vw); z-index: 61; background: var(--bg-raise); border-left: 1px solid var(--border); overflow-y: auto; padding: 1.1rem 1.3rem 2rem; font-size: .88rem; box-shadow: -12px 0 32px var(--shadow-strong); } .close { position: absolute; top: .7rem; right: .8rem; appearance: none; border: none; background: none; color: var(--fg-mute); font: inherit; font-size: 1rem; cursor: pointer; z-index: 2; } .close:hover { color: var(--fg); } .drawer-head h3 { margin: 0 0 .4rem; font-size: 1.15rem; } .drawer-head h3 a { color: var(--fg); } .drawer-head .chips { display: flex; gap: .4rem; margin-bottom: .5rem; } .stamp { font-size: .78rem; margin: .3rem 0 0; } .drawer-lane { border-top: 1px solid var(--border); margin-top: .9rem; padding-top: .7rem; } .drawer-lane h4 { margin: 0 0 .45rem; font-size: .92rem; } .drawer-lane dl { margin: 0; } .drawer-lane dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .16rem 0; } .drawer-lane dt { color: var(--fg-dim); } .drawer-lane dd { margin: 0; font-weight: 600; } .matrix-list { list-style: none; margin: 0; padding: 0; } .matrix-list li { margin-bottom: .4rem; } .matrix-list .cell { width: .9rem; height: .9rem; vertical-align: -2px; cursor: default; } .matrix-list .cell.na { background: var(--bg-hover); border: 1px solid var(--border); } .matrix-list .evidence { font-size: .78rem; margin-left: 1.3rem; } .matrix-list pre { margin: .25rem 0 0 1.3rem; padding: .45rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; white-space: pre-wrap; word-break: break-all; font-size: .72rem; color: var(--fg-dim); max-height: 8rem; overflow: auto; } /* sweep charts */ .sweeps { display: flex; flex-direction: column; gap: .9rem; } .sweeps figure.sweep { margin: 0; } .sweeps figcaption { color: var(--fg-dim); font-size: .8rem; margin-bottom: .25rem; } .sweeps canvas { width: 100%; height: auto; display: block; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; } /* compare bar + panel */ .compare-bar { position: sticky; bottom: 0; z-index: 40; display: flex; justify-content: space-between; align-items: center; gap: 1rem; max-width: 1180px; margin: 0 auto; padding: .6rem 1.1rem; background: var(--bg-raise); border: 1px solid var(--border); border-radius: 8px 8px 0 0; font-size: .86rem; box-shadow: 0 -8px 24px var(--shadow-soft); } .compare-bar button { font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; border-radius: 6px; padding: .3rem .9rem; background: var(--accent); color: var(--accent-fg); } .compare-bar button:disabled { opacity: .45; cursor: default; } .compare-bar button.ghost { background: none; border-color: var(--border); color: var(--fg-dim); } .compare-panel { position: fixed; inset: 0; z-index: 70; background: var(--overlay); overflow-y: auto; padding: 3vh 1rem; } .compare-inner { position: relative; max-width: 880px; margin: 0 auto; background: var(--bg-raise); border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem 1.4rem 1.6rem; } .compare-inner h2 { margin: 0 0 .8rem; font-size: 1.15rem; } .cmp-table td, .cmp-table th { text-align: right; } .cmp-table td.metric, .cmp-table th:first-child { text-align: left; color: var(--fg-dim); } .cmp-table .lane-row td { font-weight: 600; color: var(--fg); background: var(--bg-hover); text-align: left; } .cmp-table td.best { background: var(--best); font-weight: 700; } .cmp-table .dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .35rem; } #cmp-sweeps { margin-top: 1rem; } /* matrix */ #matrix-grid { overflow-x: auto; } .matrix-gw { margin-bottom: 1.4rem; } .matrix-gw-head { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .4rem; } .matrix-gw-head h3 { margin: 0; font-size: 1rem; } .matrix-gw-head .pass-count { color: var(--green); } .matrix-table { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-raise); } .matrix-table th { cursor: default; } .matrix-table th.axis { font-weight: 400; color: var(--fg-dim); font-size: .74rem; } .matrix-table td.na { color: var(--fg-dim); font-size: .74rem; } .cell { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 3px; cursor: pointer; } .cell.served { background: var(--green); } .cell.failed { background: var(--red); } .cell.unprobed { background: var(--grey); } /* not configurable: neutral, visibly distinct from both a red fail and the grey unprobed_auth */ .cell.notconf { background: var(--bg-hover); border: 1px solid var(--border); } /* not verified: the harness could not get the gateway serving under this egress config; a dashed grey border reads as "we could not test this", visibly distinct from the solid "not declared". */ .cell.unverified { background: var(--bg-hover); border: 1px dashed var(--fg-dim); } /* diagonal cells (same dialect in and out, no translation required): subtle ring */ .cell.diag { outline: 1px solid var(--fg-dim); outline-offset: 1px; } /* compact cell legend: one line of colored squares + short labels, mirrors the cell classes */ .matrix-legend { list-style: none; margin: .2rem 0 .1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .8rem; color: var(--fg-dim); } .matrix-legend li { display: flex; align-items: center; gap: .4rem; } .matrix-legend .lg { display: inline-block; width: .9rem; height: .9rem; border-radius: 3px; } .matrix-legend .lg-pass { background: var(--green); } .matrix-legend .lg-fail { background: var(--red); } .matrix-legend .lg-notconf { background: var(--bg-hover); border: 1px solid var(--border); } .matrix-legend .lg-unverified { background: var(--bg-hover); border: 1px dashed var(--fg-dim); } .matrix-legend .lg-diag { background: var(--bg-hover); outline: 1px solid var(--fg-dim); outline-offset: 1px; } .matrix-legend-note { font-size: .78rem; margin: 0 0 .8rem; } .matrix-detail { margin-top: 1rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-raise); padding: .9rem 1.1rem; font-size: .86rem; } .matrix-detail h4 { margin: 0 0 .4rem; } .matrix-detail pre { margin: .5rem 0 0; padding: .6rem; background: var(--bg); border-radius: 6px; border: 1px solid var(--border); white-space: pre-wrap; word-break: break-all; font-size: .76rem; color: var(--fg-dim); max-height: 12rem; overflow: auto; } /* charts */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.1rem; } .gallery figure { margin: 0; background: var(--bg-raise); border: 1px solid var(--border); border-radius: 8px; padding: .7rem; cursor: zoom-in; } .gallery img { width: 100%; height: auto; display: block; border-radius: 4px; background: var(--img-bg); } .gallery figcaption { color: var(--fg-dim); font-size: .8rem; padding: .55rem .2rem 0; } /* method */ .method-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.1rem; margin-top: 1.2rem; } .method-card { background: var(--bg-raise); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.2rem; } .method-card h3 { margin: 0 0 .5rem; font-size: .95rem; } .method-card h3 a { font-family: ui-monospace, monospace; font-size: .85rem; margin-right: .4rem; } .method-card ul { margin: 0; padding-left: 1.1rem; color: var(--fg-dim); font-size: .86rem; } .method-card li { margin-bottom: .35rem; } /* footer */ .site-footer { border-top: 1px solid var(--border); background: var(--bg-raise); padding: 1.4rem 0 2rem; font-size: .84rem; } .site-footer p { margin: .35rem 0; } /* lightbox */ .lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; cursor: zoom-out; z-index: 50; padding: 2rem; } .lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; background: var(--img-bg); } /* theme toggle (top-right of header) */ .header-top { position: relative; } .theme-toggle { position: absolute; top: 0; right: 0; appearance: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 40px; min-height: 40px; padding: 0 .7rem; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; color: var(--fg-dim); font: inherit; font-size: .82rem; font-weight: 500; line-height: 1; } .theme-toggle:hover { color: var(--fg); border-color: var(--accent); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle .tt-icon { font-size: 1rem; line-height: 1; } .theme-toggle .tt-label { white-space: nowrap; } /* show the icon of the theme the click will switch TO */ [data-theme="dark"] .theme-toggle .tt-sun { display: none; } [data-theme="light"] .theme-toggle .tt-moon { display: none; } /* ---- responsive: phones and narrow tablets --------------------------------- */ @media (max-width: 760px) { html { font-size: 14px; } .wrap { padding: 0 1rem; } .site-header { padding-top: 1.2rem; } .site-header h1 { font-size: 1.35rem; padding-right: 3rem; } .brand-sub { display: block; margin: .15rem 0 0; font-size: .78rem; } .catnav { flex-wrap: wrap; gap: .4rem; } .theme-toggle .tt-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .theme-toggle { min-width: 44px; padding: 0; } .tabs { gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: .6rem .7rem; white-space: nowrap; } .controls { gap: .7rem; } #search { flex: 1 1 100%; min-width: 0; padding: .5rem .6rem; } .control-group { gap: .45rem; } .chip-filter, .toggle { min-height: 40px; display: inline-flex; align-items: center; } .chip-filter { padding: .3rem .8rem; } .count { margin-left: 0; flex: 1 1 100%; } thead th, tbody td { padding: .5rem .55rem; } .drawer { width: 100vw; padding: 1rem 1.1rem 2rem; } .compare-bar { flex-wrap: wrap; gap: .5rem; padding: .6rem .8rem; } .compare-inner { padding: 1rem 1rem 1.4rem; } .compare-panel { padding: 2vh .5rem; } .gallery, .method-grid { grid-template-columns: 1fr; } .matrix-table th, .matrix-table td { padding: .35rem .4rem; } .cell { width: 1.2rem; height: 1.2rem; } } @media (max-width: 400px) { .site-header h1 { font-size: 1.2rem; } .tab { padding: .55rem .55rem; font-size: .9rem; } }