/* ========================================================================== LLM API Cost Calculator — styles Single stylesheet, no imports, no external fonts. System font stack only. Light and dark are both designed; dark is driven by prefers-color-scheme and can be overridden by [data-theme] on (set by the toggle). ========================================================================== */ /* ---------- Design tokens: light ---------- */ :root { --bg: #f6f6f3; --bg-grad: radial-gradient(1200px 520px at 50% -180px, #e8ecf7 0%, rgba(232,236,247,0) 70%); --surface: #ffffff; --surface-2: #f1f1ec; --surface-3: #e9e9e2; --border: #e0e0d8; --border-strong: #c8c8be; --text: #17181a; --text-2: #4a4d52; --text-3: #74787e; --accent: #2a4fd7; --accent-hover: #2141b6; --accent-soft: #e8ecfb; --accent-text: #ffffff; --good: #0f7a45; --good-soft: #e2f4ea; --good-border: #a9dcc2; --warn: #8a5300; --warn-soft: #fbf0dc; --danger: #a5271c; --danger-soft: #fbe9e7; --focus: #2a4fd7; --shadow-sm: 0 1px 2px rgba(20, 22, 28, .05), 0 1px 1px rgba(20, 22, 28, .04); --shadow-md: 0 1px 2px rgba(20, 22, 28, .05), 0 8px 24px -12px rgba(20, 22, 28, .18); --radius: 12px; --radius-sm: 8px; --radius-pill: 999px; --wrap: 1180px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } /* ---------- Design tokens: dark ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0e1013; --bg-grad: radial-gradient(1200px 520px at 50% -180px, #17203a 0%, rgba(23,32,58,0) 70%); --surface: #16191e; --surface-2: #1c2026; --surface-3: #242931; --border: #292e36; --border-strong: #3a414b; --text: #eceef1; --text-2: #b0b6bf; --text-3: #868d97; --accent: #7d9bff; --accent-hover: #9ab0ff; --accent-soft: #1a2340; --accent-text: #0e1013; --good: #47c98a; --good-soft: #10281f; --good-border: #24513c; --warn: #e0aa5a; --warn-soft: #2a2113; --danger: #f08a80; --danger-soft: #2c1614; --focus: #7d9bff; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -14px rgba(0, 0, 0, .8); } } :root[data-theme="dark"] { --bg: #0e1013; --bg-grad: radial-gradient(1200px 520px at 50% -180px, #17203a 0%, rgba(23,32,58,0) 70%); --surface: #16191e; --surface-2: #1c2026; --surface-3: #242931; --border: #292e36; --border-strong: #3a414b; --text: #eceef1; --text-2: #b0b6bf; --text-3: #868d97; --accent: #7d9bff; --accent-hover: #9ab0ff; --accent-soft: #1a2340; --accent-text: #0e1013; --good: #47c98a; --good-soft: #10281f; --good-border: #24513c; --warn: #e0aa5a; --warn-soft: #2a2113; --danger: #f08a80; --danger-soft: #2c1614; --focus: #7d9bff; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -14px rgba(0, 0, 0, .8); } /* ---------- Reset-ish ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--text); background-color: var(--bg); background-image: var(--bg-grad); background-repeat: no-repeat; overflow-x: hidden; /* the page never scrolls sideways */ -webkit-font-smoothing: antialiased; } h1, h2, h3 { line-height: 1.22; margin: 0; letter-spacing: -0.018em; font-weight: 650; } p { margin: 0; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--accent-hover); } button, input { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; } .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; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 20; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 10px 14px; text-decoration: none; box-shadow: var(--shadow-md); transition: top .15s ease; } .skip-link:focus { top: 12px; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 10; background: var(--bg); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 650; letter-spacing: -0.02em; } .brand-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--accent); color: var(--accent-text); font-family: var(--mono); font-size: 14px; font-weight: 700; } .brand-text { font-size: 15px; } .header-side { display: flex; align-items: center; gap: 10px; } .dataset-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 4px 11px 4px 9px; white-space: nowrap; } .dataset-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex: none; } .dataset-badge[data-state="ok"] .dot { background: var(--good); } .dataset-badge[data-state="error"] .dot { background: var(--danger); } .dataset-badge[data-state="fallback"] .dot { background: var(--warn); } .icon-btn { display: grid; place-items: center; width: 32px; height: 32px; flex: none; background: var(--surface); color: var(--text-2); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: 15px; line-height: 1; } .icon-btn:hover { color: var(--text); border-color: var(--border-strong); } /* ---------- Hero ---------- */ .hero { padding-top: 52px; padding-bottom: 26px; max-width: 820px; } .hero h1 { font-size: clamp(1.85rem, 1.25rem + 2.6vw, 2.85rem); } .lede { margin-top: 14px; font-size: clamp(1rem, .96rem + .2vw, 1.1rem); color: var(--text-2); max-width: 66ch; } .hero-meta { margin-top: 16px; font-size: 13.5px; color: var(--text-3); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; } .hero-meta strong { color: var(--text-2); font-weight: 600; } /* ---------- Panel / inputs ---------- */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 20px; } .presets { margin-bottom: 20px; } .presets-label { display: block; font-size: 12px; font-weight: 620; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); margin-bottom: 9px; } .preset-chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { appearance: none; cursor: pointer; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 6px 13px; font-size: 13.5px; line-height: 1.4; transition: background .12s ease, color .12s ease, border-color .12s ease; } .chip:hover { border-color: var(--border-strong); color: var(--text); } .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 560; } .preset-hint { margin-top: 9px; font-size: 13px; color: var(--text-3); } .fields { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .field label { display: block; font-size: 13.5px; font-weight: 570; color: var(--text); margin-bottom: 6px; } .field input[type="text"], .search-field input { width: 100%; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; transition: border-color .12s ease, background .12s ease; } .field input[type="text"]:hover, .search-field input:hover { border-color: var(--text-3); } .field input[type="text"]:focus, .search-field input:focus { background: var(--surface); } .field input[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-soft); } .input-suffix { position: relative; display: block; } .input-suffix .suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: 14px; pointer-events: none; } .input-suffix input { padding-right: 30px !important; } .field-hint { margin-top: 6px; font-size: 12.5px; color: var(--text-3); } .input-error { margin-top: 14px; padding: 10px 12px; background: var(--warn-soft); color: var(--warn); border: 1px solid var(--border-strong); border-color: color-mix(in srgb, var(--warn) 30%, transparent); border-radius: var(--radius-sm); font-size: 13.5px; } .panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); } .panel-note { font-size: 12.5px; color: var(--text-3); } .btn { appearance: none; cursor: pointer; border-radius: var(--radius-sm); padding: 9px 15px; font-size: 14px; font-weight: 560; border: 1px solid transparent; transition: background .12s ease, border-color .12s ease, color .12s ease; } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); } .btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-quiet { background: var(--surface-2); border-color: var(--border); color: var(--text-2); } .btn-quiet:hover { color: var(--text); border-color: var(--border-strong); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn.is-done { background: var(--good); border-color: var(--good); color: #fff; } /* ---------- Summary stats ---------- */ .summary-section { padding-top: 26px; } .stat-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 2px; min-width: 0; } .stat-label { font-size: 11.5px; font-weight: 620; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); } .stat-value { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.85rem); font-weight: 660; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .stat:first-child .stat-value { color: var(--good); } .stat-sub { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; } .summary-line { margin-top: 14px; font-size: 14.5px; color: var(--text-2); max-width: 78ch; } .summary-line strong { color: var(--text); font-weight: 620; } /* ---------- Results ---------- */ .results-section { padding-top: 34px; } .results-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 14px; } .results-head h2 { font-size: 1.28rem; } .results-sub { font-size: 13.5px; color: var(--text-3); font-variant-numeric: tabular-nums; } .toolbar { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; margin-bottom: 14px; } .search-field { flex: 1 1 220px; max-width: 320px; } .search-field input { background: var(--surface); } .provider-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; } .filter-label { font-size: 11.5px; font-weight: 620; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); } .provider-chips { display: flex; flex-wrap: wrap; gap: 7px; } .provider-chips .chip { background: var(--surface); font-size: 13px; padding: 5px 12px; } /* Table: scrolls inside its own container, never the page */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .table-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .results-table { width: 100%; min-width: 940px; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; } .results-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); border-bottom: 1px solid var(--border-strong); padding: 0; text-align: left; white-space: nowrap; } .results-table th.num, .results-table td.num { text-align: right; } .th-btn { appearance: none; background: none; border: 0; cursor: pointer; width: 100%; padding: 10px 12px; font-size: 12px; font-weight: 620; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); display: inline-flex; align-items: center; gap: 5px; } .results-table th.num .th-btn { justify-content: flex-end; } .th-btn:hover { color: var(--text); } th[aria-sort="ascending"] .th-btn, th[aria-sort="descending"] .th-btn { color: var(--text); } .sort-ind { font-size: 9px; opacity: 0; } th[aria-sort="ascending"] .sort-ind::after { content: "\25B2"; } th[aria-sort="descending"] .sort-ind::after { content: "\25BC"; } th[aria-sort="ascending"] .sort-ind, th[aria-sort="descending"] .sort-ind { opacity: 1; } .results-table th.hero-col { background: var(--accent-soft); } .results-table td.hero-col { background: var(--accent-soft); background: color-mix(in srgb, var(--accent-soft) 45%, transparent); font-weight: 640; font-size: 14.5px; } .results-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; } .results-table tbody tr:last-child td { border-bottom: 0; } .results-table tbody tr:hover td { background: var(--surface-2); } .results-table tbody tr:hover td.hero-col { background: var(--accent-soft); } .results-table tr.is-cheapest td { background: var(--good-soft); } .results-table tr.is-cheapest td.hero-col { background: var(--good-soft); color: var(--good); font-weight: 700; } .results-table tr.is-cheapest:hover td { background: var(--good-soft); } .model-name { font-weight: 570; color: var(--text); display: block; } .model-meta { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; } .provider-cell a { font-weight: 520; } .tag { display: inline-block; padding: 1px 8px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 580; letter-spacing: .01em; background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border); white-space: nowrap; } .tag-flagship { background: var(--accent-soft); color: var(--accent); border-color: transparent; } .tag-reasoning { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .badge-best { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: var(--radius-pill); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--good); color: #fff; vertical-align: 1px; } .no-cache { display: inline-block; margin-left: 6px; font-size: 11px; color: var(--warn); cursor: help; border-bottom: 1px dotted currentColor; } .mult { color: var(--text-3); } .mult-hi { color: var(--text-2); font-weight: 570; } .muted { color: var(--text-3); } .table-empty { padding: 34px 16px !important; text-align: center; color: var(--text-3); } .table-error { color: var(--danger); } /* Provenance markers + legend */ .vmark { display: inline-block; vertical-align: 1px; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; flex: none; border: 1.5px solid var(--text-3); background: transparent; cursor: help; } .vmark-official_page { background: var(--good); border-color: var(--good); } .vmark-cross_referenced { background: transparent; border-color: var(--text-3); } .verify-legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin-top: 12px; font-size: 12.5px; color: var(--text-3); } .verify-legend[hidden] { display: none; } .legend-title { font-size: 11.5px; font-weight: 620; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); } .legend-item { display: flex; align-items: baseline; gap: 8px; flex: 1 1 300px; min-width: 0; max-width: 46ch; } .legend-item .vmark { margin-left: 0; position: relative; top: -1px; cursor: default; } .legend-item strong { color: var(--text-2); font-weight: 620; } .table-foot { margin-top: 12px; font-size: 12.5px; color: var(--text-3); max-width: 80ch; } /* ---------- Prose ---------- */ .prose { padding-top: 56px; max-width: 760px; } .prose h2 { font-size: 1.6rem; margin-bottom: 16px; } .prose h3 { font-size: 1.12rem; margin-top: 30px; margin-bottom: 8px; } .prose p { margin-bottom: 15px; color: var(--text-2); } .prose p:last-child { margin-bottom: 0; } .prose em { color: var(--text); font-style: normal; font-weight: 570; } .callout { margin-top: 26px !important; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 14.5px; } .callout strong { color: var(--text); } /* ---------- FAQ ---------- */ .faq { padding-top: 48px; max-width: 760px; } .faq h2 { font-size: 1.6rem; margin-bottom: 14px; } .faq details { border-bottom: 1px solid var(--border); } .faq details:first-of-type { border-top: 1px solid var(--border); } .faq summary { cursor: pointer; list-style: none; padding: 15px 30px 15px 0; position: relative; font-weight: 570; color: var(--text); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 4px; top: 13px; font-size: 19px; font-weight: 400; color: var(--text-3); line-height: 1; } .faq details[open] summary::after { content: "\2212"; } .faq summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; } .faq details p { margin: 0 0 16px; color: var(--text-2); font-size: 14.5px; padding-right: 30px; } /* ---------- Footer ---------- */ .site-footer { margin-top: 72px; padding: 40px 0 48px; border-top: 1px solid var(--border); background: var(--surface); } .footer-inner { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .footer-title { font-size: 1rem; margin-bottom: 8px; } .footer-text { font-size: 14px; color: var(--text-2); margin-bottom: 10px; } .footer-note { font-size: 12.5px; color: var(--text-3); margin-top: 8px; } .signup { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .signup input { flex: 1 1 190px; min-width: 0; padding: 9px 12px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); } .signup input:disabled { opacity: .6; cursor: not-allowed; } /* ---------- Small screens ---------- */ @media (max-width: 640px) { .wrap { padding-inline: 16px; } .hero { padding-top: 34px; } .panel { padding: 16px; } .brand-text { font-size: 14px; } .dataset-badge { display: none; } /* the date stays visible in the table footnote + footer */ .panel-note { flex-basis: 100%; } .results-table { font-size: 13.5px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } @media print { .site-header, .toolbar, .panel-actions, .site-footer, .skip-link { display: none !important; } body { background: #fff; } .table-scroll { overflow: visible; border: 0; } .results-table { min-width: 0; } }