/* * Widen docs pages beyond Mintlify's defaults. * * Mintlify stacks several width caps that all need to lift together; * lifting only one is silently absorbed by the next: * * 1. Outer page-layout wrapper (parent of #sidebar + #content-container) * caps every page at `max-w-8xl` (1280px). * 2. Pages with `mode: "wide"` add a second `max-w-6xl` (1152px) cap on * #content-container itself. * 3. Tailwind Typography caps the article at ~65ch inside #content. */ /* =========================================================================== * GLOBAL BRANDING * * Geist (body + headings) is loaded by Mintlify via the `fonts` field in * docs.json (Google Fonts auto-load). The `fonts` field has no monospace * slot, so the code/mono face (Geist Mono, per the Sail design system) is * loaded and applied here. Geist + Geist Mono are a matched family. * * `@import` must precede every style rule, so this stays at the very top of * the file. The rest of the branding rules (code-block frame, cards, * callouts) live in the matching section at the BOTTOM of the file. * =========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&display=swap"); /* Layout tuning knobs — every width rule below references one of these, so * the layout (header included) stays self-consistent and is easy to retune. * * --sail-layout-max Outer cap for the whole sidebar + content + TOC * layout AND the top navbar. The mint default (~85rem * centered) leaves very large empty margins on wide * monitors; a high cap fills most of the viewport while * still reining things in on ultrawide displays. * --sail-prose-max Reading measure for body text. Kept comfortably wide * but capped so long lines stay readable. * --sail-toc-width Width of the "On this page" TOC column. Narrower than * the mint default (16.5rem); because #content-area uses * `grow`, the freed space goes to the article. */ :root { --sail-layout-max: 110rem; --sail-prose-max: 90ch; --sail-toc-width: 14rem; } /* Apply Geist Mono everywhere monospace text renders. Mintlify/Shiki control * code-block colors and backgrounds; we only swap the family so syntax * highlighting is untouched. */ code, kbd, samp, pre, pre code, .prose :where(code, pre) { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } /* Dark-mode body copy: raise contrast. * Mintlify renders article text via Tailwind Typography prose, which * pulls body color from --tw-prose-invert-body in dark mode (default * gray-300 #d1d5db). Lift to slate-50 to match the slate palette used * across this file and read at higher contrast on the dark surface. */ html.dark .prose { --tw-prose-invert-body: rgb(248, 250, 252); /* slate-50 */ } /* Sidebar nav indentation + density. * * The Documentation tab is a flat IA under top-level product sections * (Inference / Sailbox / Guides). Mintlify renders section headers with * `pl-4` (1rem), which indents them past the logo column. Pull those headers * back to the sidebar edge so they align with the logo, then indent direct page * links slightly so pages read as children of their section header without * feeling over-indented. Nested group toggles (e.g. Concepts) get that same * 0.75rem indent so a folder sits flush with its sibling pages and is set apart * only by its right-side caret, rather than Mintlify's default 1rem. * * Mintlify defaults to `py-1.5` on every sidebar link/toggle; shave that to * `py-1` and tighten header/section gaps so the nav reads a bit denser. * * Lives outside the desktop layout `@media` block so these rules apply in * the mobile drawer too. */ #sidebar ul.sidebar-group > li > a, #sidebar ul.sidebar-group > li > button { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } #sidebar ul.sidebar-group > li > a, #sidebar ul.sidebar-group > li > button { padding-left: 0.75rem !important; } /* Subitem text-box gap = link py-bottom + li space-y-px + link py-top (9px). * Header-to-first-subitem gap = header mb + link py-top; set mb to py + 1px * so section baseline lands on the same rhythm as subitem baselines. */ #sidebar .sidebar-group-header { padding-left: 0 !important; margin-bottom: calc(0.25rem + 1px) !important; } #sidebar #navigation-items > div.mt-6 { margin-top: 1.25rem !important; } /* Mintlify's sticky h-8 top spacer is hidden; apply equivalent padding so the * first nav section doesn't sit flush against the navbar. */ #sidebar .sticky.top-0.h-8.z-10 { display: none !important; } #sidebar #sidebar-content { padding-top: 1.5rem !important; } @media (min-width: 1024px) { #sidebar { top: 4rem !important; } } @media (max-width: 1023px) { #sidebar #navigation-items > div.mt-6 { margin-top: 1rem !important; } } @media (min-width: 1024px) { /* (1) Outer layout wrapper — applies to every page. * * Raise the cap (was 85rem) to --sail-layout-max so the whole * sidebar + content + TOC layout fills most of the desktop viewport * instead of sitting in a narrow centered column with large empty * margins on wide monitors. The wrapper stays centered, so on * ultrawide displays the cap still reins it in. Reading width is * preserved separately by the 80ch prose cap on #content / * mdx-content below, so only the container grows — body text stays * comfortable and the TOC docks near the right edge. */ div:has(> #sidebar):has(> #content-container) { max-width: var(--sail-layout-max) !important; margin-inline: auto !important; } /* (3) Inner prose: keep a sane reading width on standard pages. * * Wide-mode pages override this in the block below so wide * elements (capabilities + pricing tables) can fill the * container; the reading cap is then re-applied to direct prose * children (paragraphs, lists, headings) so reading text stays * comfortable. */ #content, mdx-content { max-width: var(--sail-prose-max) !important; } /* * Wide-mode pages (e.g. Models & Pricing): widen the column wrapper * so wide content has room. The TOC is hidden in wide mode, so * there's room to spend. * * Prose stays at the 80ch reading width set above on every page, * including wide-mode pages — only specific wide elements * (currently just the pricing table) escape that cap via the * .pricing-table-wrapper rule below. That keeps paragraphs/lists/ * headings under the table from stretching across the whole * column. */ html[data-page-mode="wide"] #content-container { max-width: var(--sail-layout-max) !important; } /* (2) Top navbar — cap the header's inner content to the body layout width * (the mint navbar bar spans the full viewport, but its inner content sits in * a separate `max-w-8xl` centered column), AND put the header on the same * horizontal grid as the body content. * * Mintlify lays the navbar out on a 3rem grid (logo row `lg:px-12`, tabs row * `px-12`), but the body content — sidebar links, the TOC, and wide-mode * tables — sits on a 2rem grid. That 1rem gap is what makes wide content * overflow past the header on the right. Override both navbar rows to 2rem so * the header lines up with the body content on both sides: gutters stay * symmetric, and the logo lines up with "Guides", the sidebar links, and the * content's right edge. */ #navbar div.max-w-8xl { max-width: var(--sail-layout-max) !important; } #navbar div.max-w-8xl .lg\:px-12, #navbar div.max-w-8xl .px-12 { padding-left: 2rem !important; padding-right: 2rem !important; } /* Narrow the "On this page" TOC column so more width goes to the article. * #content-area uses `grow`, so shrinking this column hands the freed * space to the content. The outer layout reserves the column width plus * its 2.5rem (`pl-10`) gutter; the inner list takes the column width. * Both IDs are stable Mintlify hooks. */ #table-of-contents-layout { width: calc(var(--sail-toc-width) + 2.5rem) !important; } #table-of-contents { width: var(--sail-toc-width) !important; } /* * Lift the 80ch prose cap on the article container for wide-mode * pages so wide-content children (.capabilities-table-wrapper, * .pricing-table-page) can actually fill the 85rem column. The * default 80ch cap on `#content`/`mdx-content` (set above) wins * via `!important`, so wide-mode needs an `!important` override. * Reading-width is re-applied to the standard prose children so * paragraphs, lists, and headings stay comfortable to read. * * The :where() pseudo-class lets us match common prose elements * with zero specificity, so any individual element can still * override its own max-width via a higher-specificity rule. */ html[data-page-mode="wide"] #content, html[data-page-mode="wide"] mdx-content { max-width: none !important; } html[data-page-mode="wide"] mdx-content > :where(p, ul, ol, dl, blockquote, h1, h2, h3, h4, h5, h6, hr, pre) { max-width: var(--sail-prose-max); } /* * Let the pricing table break out of the 80ch prose cap and grow to * the inner 's intrinsic width (model 18rem + window 6.5rem + * 3×9rem ≈ 51.5rem). `width: max-content` sizes the wrapper to its * children regardless of the parent's max-width; `max-width: 100%` * keeps the wrapper from spilling past the wide-mode column. * * The page wrapper is `.pricing-table-page` (rather than * `.pricing-table-wrapper`) so the unit callout and table share one * breakout width. */ html[data-page-mode="wide"] .pricing-table-page { width: max-content !important; max-width: 100% !important; } /* * Capabilities table (Models page) — desktop max-width. * * Now that the wide-mode block above lifts mdx-content's 80ch prose * cap, the wrapper's `width: 100%` would resolve to the full 85rem * #content-container — far wider than the table needs. Cap the * wrapper at 60rem so the slug column (the only auto-sized column * under `table-layout: fixed`) gets enough room for full slugs * without truncation, while leaving visible right-edge breathing * room before the wider page column ends. * * 60rem breakdown: 16rem model + 18rem bool (3 × 6rem) leaves * ~24.5rem for the slug column after the 1.5rem of internal * right-edge padding (set unconditionally below) — enough for the * longest checkpoint slug (`deepseek-ai/DeepSeek-V3.2`) plus the * external link icon and copy button. * * `margin-right: auto` keeps the wrapper left-aligned with the * prose above/below. The empty space to the right (between the * 60rem wrapper and the 85rem column) reads as deliberate content * margin rather than the table being squished. * * Gated on `min-width: 1024px` instead of `data-page-mode="wide"` * so the cap fires reliably even before the page-mode attribute is * set client-side (Mintlify mounts that attribute via a hydration * script — pre-hydration the attribute reads "none" and any * wide-only rule would no-op). */ .capabilities-table-wrapper { max-width: 60rem; margin-right: auto; } } /* * Right-edge breathing room — applies at every viewport. * * `box-sizing: border-box` keeps padding-right inside the declared * width (otherwise content-box adds the padding to width, bursting * the wrapper past its parent). `padding-right: 2rem` reads as a * deliberate gutter without eating too much of the slug column's * room. Unconditional (no media query) so narrow desktops still get * a visible gutter between the table's last column and the page's * right edge. * * NOTE on the LEFT edge: a symmetric `padding-left: 2rem` here had * no visible effect (Mintlify's content area appears to clip or * absorb wrapper padding on the left), so the left gutter is shrunk * at the cell level instead — see `.cap-th-model` / * `.cap-cell-model` below, which use a small `padding-left` to keep * the MODEL header close to the page edge. */ .capabilities-table-wrapper { box-sizing: border-box; padding-right: 2rem; } /* * Pricing table (Pricing page). * * Same monochrome aesthetic as the capabilities table, organized * differently: 5 columns (Model + Window + Input + Cached + Output), * with one row per completion window; the model cell row-spans its * tiers. Light borders separate window rows within a model. A unit * callout above the table notes USD per 1M tokens. * * Mobile (≤1023px): the table reflows into one stacked card per * model (model header, then a labeled block per completion window) — * see the mobile-reflow block below. */ /* Tailwind Typography ships `.prose :where(table) { display: block; * table-layout: auto; ... }`. Same overrides as the capabilities * table so `table-layout: fixed` actually wins and the explicit * column widths drive layout. */ table.pricing-table { display: table !important; width: 100%; border-collapse: collapse; table-layout: fixed !important; overflow: visible !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* Per-1M-tokens callout above the table. */ .pricing-header { display: flex; justify-content: flex-end; margin: 0 0 1.25rem 0; } .pricing-unit-callout { display: inline-flex; align-items: baseline; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgb(100, 116, 139); /* slate-500 */ white-space: nowrap; font-variant-numeric: tabular-nums; } html.dark .pricing-unit-callout { color: rgb(148, 163, 184); /* slate-400 */ } .pricing-unit-currency, .pricing-unit-num { font-weight: 700; color: rgb(51, 65, 85); /* slate-700 */ } html.dark .pricing-unit-currency, html.dark .pricing-unit-num { color: rgb(226, 232, 240); /* slate-200 */ } .pricing-unit-sep { opacity: 0.55; } /* Header row: small caps, slate-700/200 to match capabilities. */ .pricing-table thead { border-bottom: 1px solid rgba(148, 163, 184, 0.35); } .pricing-th { padding: 0.75rem 1rem 0.875rem; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgb(51, 65, 85); /* slate-700 */ text-align: left; vertical-align: bottom; background: var(--background-primary, Canvas); } html.dark .pricing-th { color: rgb(226, 232, 240); /* slate-200 */ } .pricing-th-model { padding-left: 1.25rem; } /* Body rows — one per model. */ .pricing-model-group { transition: background-color 150ms ease; } .pricing-model-group:hover { background: rgba(148, 163, 184, 0.08); } .pricing-cell { padding: 0.75rem 1rem; border-bottom: 1px solid rgba(148, 163, 184, 0.18); vertical-align: middle; box-sizing: border-box; } /* Lighter dividers between window tiers within one model. */ .pricing-model-group .pricing-row-window:not(.pricing-row-model-last) .pricing-cell { border-bottom: 1px solid rgba(148, 163, 184, 0.1); } .pricing-row-last .pricing-cell { border-bottom: none; } /* Model cell: logo + meta block. * * The ` of its ``, so under `display: block` it simply renders * as the first block in the card — no rowSpan artifacts. Each * `tbody.pricing-model-group` becomes a card: the model header on top, * then one labeled block per completion window (Standard / Priority / * Flex / ASAP), each listing its Input / Cached / Output prices. Axis * labels are injected from `data-axis` on the price cells via * `::before { content: attr(data-axis) }` — the same data-attribute * pattern the capabilities table uses for `data-cap`. This avoids the * scroll-right-past-empty-cells pattern on the phone traffic the * pricing page sees; no JS required. */ @media (max-width: 1023px) { .pricing-table thead { display: none; } .pricing-table, .pricing-table tbody.pricing-model-group, .pricing-table tr.pricing-row, .pricing-table .pricing-cell { display: block; } /* Override the base `table-layout: fixed` width math now that the * table is a block stack. */ .pricing-table { width: auto; } /* Left-align the USD / per-1M-tokens callout. Right-aligning it * (the desktop default) floats it awkwardly far from the content on * tablet-width screens. */ .pricing-header { justify-content: flex-start; } /* Each model is a card separated from the next by whitespace alone — * no table-style rules on mobile. The inter-model gap (2 × padding) * is comfortably larger than the within-card window spacing, so the * grouping reads by proximity. Suppress the desktop touch-hover tint. */ .pricing-table tbody.pricing-model-group { padding: 1.5rem 0; } .pricing-table tbody.pricing-model-group:hover { background: transparent; } /* Strip desktop cell chrome (borders, fixed column widths from the * inline `style` attrs) so cells stack cleanly. `border: none` needs * `!important` to beat the more specific desktop window-divider rule * (`.pricing-model-group .pricing-row-window:not(...) .pricing-cell`); * the width overrides defeat the inline `width` / `minWidth` on the * model cell. */ .pricing-table .pricing-cell { padding: 0; border: none !important; width: auto !important; min-width: 0 !important; max-width: none; } /* Tailwind Typography paints a `border-bottom` on every prose * `tbody tr`; under the block reflow that draws a full-width rule * beneath each window's prices (under each Output). `!important` * strips it regardless of the framework rule's specificity, so the * card reads as whitespace-separated blocks. */ .pricing-table tr.pricing-row { border: none !important; } /* Model header: logo + name + slug at the top of the card. Let the * slug wrap instead of ellipsizing in the narrow column. */ .pricing-table .pricing-cell-model { padding-bottom: 0.25rem; } .pricing-table .pricing-cell-model .cap-slug-text code { white-space: normal; word-break: break-all; } /* Window header: a brand-accent eyebrow that opens each window block. * Coloring it navy / light-blue (rather than the neutral slate it * inherits on desktop) sets it clearly apart from both the model name * above (neutral, strongest) and the axis labels below (neutral, * muted), so the completion-window grouping reads at a glance. * Separated from surrounding content by spacing only — no rules. */ .pricing-table .pricing-cell-window { margin-top: 1.5rem; margin-bottom: 0.5rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; white-space: normal; color: #2c4681; /* brand navy */ } html.dark .pricing-table .pricing-cell-window { color: #8ba2dd; /* brand light blue — reads on dark surfaces */ } /* Each axis price is a label/value row under its window: the axis * name (from `data-axis`) on the left, the amount on the right. The * capped width keeps the pair tight on wider phones/tablets instead * of pushing the price out to the far edge. */ .pricing-table .pricing-cell-price { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; max-width: 18rem; padding: 0.3125rem 0 0; } .pricing-table .pricing-cell-price::before { content: attr(data-axis); font-size: 0.8125rem; font-weight: 500; color: rgb(71, 85, 105); /* slate-600 — secondary tier */ } html.dark .pricing-table .pricing-cell-price::before { color: rgb(203, 213, 225); /* slate-300 */ } } /* * Capabilities table (Models page). * * Editorial-restraint aesthetic: small-caps headers, generous row * rhythm, monochrome currentColor logos, green checks for supported * capabilities, and one signature micro-interaction — the slug * link's external-link icon lifts 1px up-and-right while the * monospace text shifts to navy on hover. * * The boolean columns (Image / LoRA / Reasoning effort) tag every * cell with `is-true` or `is-false` plus a `data-cap` attribute. On * desktop, false cells render empty (no glyph); on mobile (<768px), * false cells hide entirely and true cells become inline green pills * with the capability label injected via `::after { content: * attr(data-cap) }`. Same DOM, two readings — neither requires JS. */ /* Tailwind Typography ships `.prose :where(table) { display: block; * table-layout: auto; overflow: auto; margin: 2em 0; }` (zero * specificity from `:where`, so any equal-specificity rule from us * could lose to it via source order). The properties below all win * via `!important` so the table actually renders as a table — which * is required for `table-layout: fixed` to honor the explicit column * widths we set on the header cells (otherwise the bool columns * auto-size to content width and visually misalign with their * headers). */ table.capabilities-table { display: table !important; width: 100%; border-collapse: collapse; table-layout: fixed !important; overflow: visible !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* Header row: small caps, letter-spaced, near-primary contrast. * * Headers carry the column meaning and need to read clearly even at * the small font-size; we use slate-700 in light mode / slate-200 in * dark mode so they sit one notch below the model-name primary * content but still well above the muted-caption tier. */ .capabilities-table thead { border-bottom: 1px solid rgba(148, 163, 184, 0.35); } .cap-th { padding: 0.75rem 1rem 0.875rem; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgb(51, 65, 85); /* slate-700 */ text-align: left; vertical-align: middle; background: var(--background-primary, Canvas); } html.dark .cap-th { color: rgb(226, 232, 240); /* slate-200 */ } .cap-th-model { position: sticky; left: 0; z-index: 2; /* Small left indent: just enough to keep the MODEL eyebrow off the * page edge while still reading as a nudged-left header (the * remaining bool columns' centered text already gives them their * own breathing room from the right gutter). Was 1.25rem; reduced * because the wrapper's left-padding doesn't render visibly inside * Mintlify's content area, leaving the LEFT gap noticeably wider * than the RIGHT one. */ padding-left: 0.5rem; box-shadow: inset -1px 0 0 rgba(148, 163, 184, 0.2), 6px 0 10px -10px rgba(15, 23, 42, 0.45); } .cap-th-bool { text-align: center; /* `overflow: visible` so the absolutely-positioned `.cap-th-tip` * tooltip below isn't clipped by the cell box. Has no effect when * the column has no tooltip. */ overflow: visible; } /* Linkified column header (e.g. Image -> /images). Inherits the * surrounding small-caps slate-700/200 color and adds a solid * underline so it reads as an honest link — the dotted variant * (now used for the tooltip wrap below) was too ambiguous, since * dotted underlines also convey "hover for more info". A real * `text-decoration: underline` makes Image vs. LoRA's affordance * visually distinct: solid = navigates, dotted = reveals. */ .cap-th-link { color: inherit; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color 150ms ease, text-decoration-color 150ms ease; } .cap-th-link:hover { color: rgb(15, 23, 42); } html.dark .cap-th-link:hover { color: rgb(248, 250, 252); } .cap-th-link:focus-visible { outline: 2px solid #2c4681; outline-offset: 2px; border-radius: 2px; } html.dark .cap-th-link:focus-visible { outline-color: rgb(165, 180, 252); } /* Hover-revealed column-header tooltip (e.g. LoRA "coming soon"). * Same dark-on-light tooltip pattern; positioned * BELOW the th since there's typically no room above (the table sits * near the top of the content area). `text-transform: none` and * `letter-spacing: 0` reset the parent `.cap-th`'s eyebrow styling so * the tooltip body reads as a normal sentence. */ .cap-th-tip-wrap { position: relative; display: inline-flex; align-items: center; cursor: help; /* Dotted underline so the header looks interactive without * borrowing the link affordance — the solid underline on * `.cap-th-link` (Image) means "navigate"; this dotted one means * "hover/focus for more info". */ border-bottom: 1px dotted rgba(148, 163, 184, 0.55); transition: border-bottom-color 150ms ease; } .cap-th-tip-wrap:hover, .cap-th-tip-wrap:focus-within { border-bottom-color: currentColor; } .cap-th-tip { position: absolute; top: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%); z-index: 10; width: max-content; max-width: 16rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; background: rgb(15, 23, 42); /* slate-900 */ color: rgb(248, 250, 252); /* slate-50 */ font-size: 0.8125rem; font-weight: 400; letter-spacing: 0; text-transform: none; text-align: left; line-height: 1.4; white-space: normal; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 120ms ease, visibility 120ms ease; } .cap-th-tip::before { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-bottom-color: rgb(15, 23, 42); } .cap-th-tip-wrap:hover .cap-th-tip, .cap-th-tip-wrap:focus-within .cap-th-tip { opacity: 1; visibility: visible; } html.dark .cap-th-tip { background: rgb(30, 41, 59); /* slate-800 */ } html.dark .cap-th-tip::before { border-bottom-color: rgb(30, 41, 59); } /* Body rows: 3.5rem minimum rhythm, subtle hover state. * * Use `min-height` (not a fixed `height`) so a wrapped model name * (e.g. "Gemma 4 31B IT (NVFP4)") can grow the row instead of * clipping against the single-line budget. * * The hover background uses slate-400 at 8% alpha — that one tone * reads as a faint tint on a white background and a faint highlight * on a dark one, so we don't need a separate dark-mode rule. */ .cap-row { min-height: 3.5rem; transition: background-color 150ms ease; } .cap-row:hover { background: rgba(148, 163, 184, 0.08); } .cap-cell { padding: 0.875rem 1rem; border-bottom: 1px solid rgba(148, 163, 184, 0.18); vertical-align: middle; box-sizing: border-box; } .cap-row-last .cap-cell { border-bottom: none; } /* Sticky model column: logo on the left, two-line meta block on the right. * * The

itself stays a regular table-cell (no `display: flex`!) * so it participates in row-equal-height layout — otherwise its * `border-bottom` collapses to the model content's height and ends * up above the price cells' border-bottom on tall rows, leaving a * stray line under the slug. Flex layout for logo+meta lives on the * inner wrapper. * * `align-items: flex-start` on the inner so the logo aligns with the * top of the model name, even with multi-line meta. */ .pricing-cell-model { padding-left: 1.25rem; vertical-align: top; } .pricing-cell-model-inner { display: flex; align-items: flex-start; gap: 0.625rem; } .pricing-model-meta { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } /* Slug+copy block sits below the creator caption — pad slightly so * it visually separates from the caption above. The shared * `.cap-slug-actions` rule already handles the inner layout. */ .pricing-cell-model .cap-slug-actions { margin-top: 0.125rem; } /* Window column: tier label for the row. A subtle right edge separates * it from the numeric columns so the row reads as one unit. */ .pricing-cell-window { border-right: 1px solid rgba(148, 163, 184, 0.2); font-size: 0.8125rem; font-weight: 600; line-height: 1.4; color: rgb(51, 65, 85); /* slate-700 */ white-space: nowrap; } html.dark .pricing-cell-window { color: rgb(226, 232, 240); /* slate-200 */ } .price-window-label { display: block; } /* Price cells: one amount per axis column, left-aligned. */ .pricing-cell-price { text-align: left; } .price-amount { font-size: 0.9375rem; font-weight: 500; line-height: 1.4; color: rgb(15, 23, 42); /* slate-900 — primary content tier */ font-variant-numeric: tabular-nums; } html.dark .price-amount { color: rgb(248, 250, 252); /* slate-50 */ } /* Currency prefix: muted glyph that sits tight against the digits so * the number reads as the primary content. Same pattern as Stripe/ * AWS pricing tables — the `$` is contextual, the digits are what * the eye lands on. `font-feature-settings: "tnum"` keeps the glyph * inside the same tabular slot so rows still align across cells. */ .price-currency { margin-right: 0.1em; font-weight: 400; color: rgba(100, 116, 139, 0.85); /* slate-500 muted */ } html.dark .price-currency { color: rgba(148, 163, 184, 0.85); /* slate-400 muted */ } .price-row-empty { font-size: 0.875rem; color: rgba(100, 116, 139, 0.5); font-variant-numeric: tabular-nums; } /* * Mobile reflow (≤ 1023px). * * Drop the table layout and render one stacked card per model. The * model cell carries `rowSpan` on desktop, but it lives in the first * `

itself stays a regular table-cell (no `display: flex`!) so it * participates in row-equal-height layout — otherwise its `border-bottom` * lands at the model content height while the bool cells' borders sit at * the full row height, which reads as a double-thick rule in the model * column (especially at non-integer zoom levels). Flex layout for * logo+meta lives on the inner wrapper, matching the pricing table. */ .cap-cell-model { position: sticky; left: 0; z-index: 1; /* Match `.cap-th-model`'s reduced indent (was 1.25rem) so the logo * column-aligns with the MODEL eyebrow above it. */ padding-left: 0.5rem; background: var(--background-primary, Canvas); box-shadow: inset -1px 0 0 rgba(148, 163, 184, 0.2), 6px 0 10px -10px rgba(15, 23, 42, 0.45); } .cap-cell-model-inner { display: flex; align-items: flex-start; gap: 0.625rem; } .cap-row:hover .cap-cell-model { /* Layer the same slate/8% hover tint over the page background so * the sticky col stays opaque AND visually matches the rest of the * hovered row. Single rule covers both light and dark mode. */ background: linear-gradient(rgba(148, 163, 184, 0.08), rgba(148, 163, 184, 0.08)), var(--background-primary, Canvas); } /* * Logos as CSS-masked spans, not elements. * * The lobe-icons SVGs use `fill="currentColor"`, but currentColor only * inherits when the SVG is in the page's DOM context — an tag * renders the SVG in isolation and falls back to the SVG's own paint * (which is no-fill / default black, invisible on dark backgrounds). * * Using `mask-image` + `background-color: currentColor` instead lets * the same SVG color itself with the surrounding text color, themes * correctly in light and dark mode, and stays a single asset per * provider. The `data-org` attribute selects the file. */ .cap-logo { flex: none; display: inline-block; width: 1.375rem; height: 1.375rem; margin-top: 0.0625rem; /* align with the display-name cap height */ background-color: currentColor; mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } .cap-logo[data-org="moonshot"] { mask-image: url("/images/logos/moonshot.svg"); -webkit-mask-image: url("/images/logos/moonshot.svg"); } .cap-logo[data-org="zhipu"] { mask-image: url("/images/logos/zhipu.svg"); -webkit-mask-image: url("/images/logos/zhipu.svg"); } .cap-logo[data-org="deepseek"] { mask-image: url("/images/logos/deepseek.svg"); -webkit-mask-image: url("/images/logos/deepseek.svg"); } .cap-logo[data-org="openai"] { mask-image: url("/images/logos/openai.svg"); -webkit-mask-image: url("/images/logos/openai.svg"); } .cap-logo[data-org="minimax"] { mask-image: url("/images/logos/minimax.svg"); -webkit-mask-image: url("/images/logos/minimax.svg"); } .cap-logo[data-org="gemma"] { mask-image: url("/images/logos/gemma.svg"); -webkit-mask-image: url("/images/logos/gemma.svg"); } .cap-logo[data-org="nvidia"] { mask-image: url("/images/logos/nvidia.svg"); -webkit-mask-image: url("/images/logos/nvidia.svg"); } .cap-model-meta { display: flex; flex-direction: column; gap: 0.0625rem; min-width: 0; } /* Model name is the table's primary content — use the page's strongest * text contrast in each theme. Mintlify toggles dark mode by adding the * `.dark` class to , matching Tailwind's dark mode convention. */ .cap-model-name { font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: rgb(15, 23, 42); /* slate-900 */ } html.dark .cap-model-name { color: rgb(248, 250, 252); /* slate-50 */ } .cap-creator { font-size: 0.75rem; line-height: 1.2; color: rgba(100, 116, 139, 0.85); } /* ── Expand / collapse affordance ────────────────────────────────── * * A small "Details ▸" button sits below the creator caption. Clicking * it toggles `.is-expanded` on the nearest `.cap-cell-model` ancestor; * CSS drives the chevron rotation and the panel's grid-row expansion. * * The animated height trick uses `grid-template-rows: 0fr → 1fr`. * That's the only cross-browser CSS approach that transitions height * without a fixed max-height hack. The inner `.cap-expand-content` div * must have `overflow: hidden` and `min-height: 0` so the 0fr state * actually collapses to zero. */ .cap-expand-btn { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.3125rem; padding: 0; border: none; background: transparent; color: rgba(100, 116, 139, 0.75); /* muted slate — same tier as creator */ font-size: 0.6875rem; font-weight: 500; cursor: pointer; line-height: 1; transition: color 150ms ease; } .cap-expand-btn:hover { color: rgb(71, 85, 105); /* slate-600 */ } html.dark .cap-expand-btn { color: rgba(148, 163, 184, 0.7); } html.dark .cap-expand-btn:hover { color: rgb(203, 213, 225); /* slate-300 */ } .cap-expand-label { letter-spacing: 0.01em; } .cap-expand-icon { transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); flex: none; } .cap-cell-model.is-expanded .cap-expand-icon { transform: rotate(90deg); } /* Animated panel using the grid-row trick. */ .cap-expandable { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 220ms cubic-bezier(0.4, 0, 0.2, 1); } .cap-cell-model.is-expanded .cap-expandable { grid-template-rows: 1fr; } .cap-expand-content { overflow: hidden; min-height: 0; padding-top: 0; transition: padding-top 220ms cubic-bezier(0.4, 0, 0.2, 1); } .cap-cell-model.is-expanded .cap-expand-content { padding-top: 0.5rem; } /* Key–value rows inside the panel. */ .cap-expand-row { display: flex; align-items: baseline; gap: 0.375rem; padding: 0.125rem 0; font-size: 0.75rem; line-height: 1.4; } .cap-expand-key { flex: none; min-width: 5.5rem; /* aligns values across rows */ color: rgba(100, 116, 139, 0.85); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; } .cap-expand-val { color: rgb(30, 41, 59); /* slate-800 */ font-variant-numeric: tabular-nums; } html.dark .cap-expand-val { color: rgb(226, 232, 240); /* slate-200 */ } .cap-expand-row-tags { margin-bottom: 0.125rem; } /* Tags flow freely on the row that follows the "Popular for" label. */ .cap-expand-content > .cap-tags { margin-top: 0; padding-bottom: 0.125rem; } /* Use-case tag chips inside the expandable panel. Deliberately muted * (slate on a faint slate tint) so they read as secondary metadata, * not a primary comparison axis. */ .cap-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; } .cap-tag { padding: 0.0625rem 0.4375rem; background: rgba(148, 163, 184, 0.14); /* slate-400 @ 14% */ color: rgb(71, 85, 105); /* slate-600 */ border-radius: 9999px; font-size: 0.6875rem; font-weight: 500; line-height: 1.5; white-space: nowrap; } html.dark .cap-tag { background: rgba(148, 163, 184, 0.18); color: rgb(203, 213, 225); /* slate-300 */ } /* Slug column: monospace, muted at rest, navy on hover with a * one-pixel lift on the external-link icon. * * Long-slug behavior. The slug column has no explicit width (it * absorbs the remainder after model + 3 bool columns), so at narrow * desktop widths a long slug like `meta-llama/Meta-Llama-3.1-405B- * Instruct-FP8` would otherwise wrap mid-word and push the row taller * than the 3.5rem rhythm. That broke the model column's * `align-items: flex-start` layout — the logo+name stuck to the top * and left a visually "cut off" gap below. * * Fix: keep the slug on a single line (`white-space: nowrap`) and * ellipsize the

 if it can't fit. The external-link and copy
 * controls have `flex: none` so they stay fully visible at the right
 * edge regardless. The full slug is always available via the link's
 * `title` tooltip and via the copy button.
 *
 * For the cell to participate in flex shrink (so ellipsis kicks in
 * instead of overflowing), every ancestor in the chain — `.cap-cell-
 * slug`, `.cap-slug-actions`, `.cap-slug-link` — needs `min-width: 0`.
 */
.cap-cell-slug {
  text-align: left;
  overflow: hidden;
  min-width: 0;
}
.cap-slug-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  max-width: 100%;
  color: rgb(71, 85, 105); /* slate-600 — readable on white, secondary feel */
  text-decoration: none;
  transition: color 150ms ease;
}
html.dark .cap-slug-link {
  color: rgb(203, 213, 225); /* slate-300 — strong on dark, still secondary */
}
.cap-slug-link code {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  background: transparent;
  padding: 0;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cap-slug-link:hover {
  color: #2c4681;
}
html.dark .cap-slug-link:hover {
  /* In dark mode the brand navy is too dark to read on hover; pick the
   * same indigo-300 as the check accent so true/hover states sit on the
   * same color family. */
  color: rgb(165, 180, 252);
}
.cap-slug-link:hover code {
  text-decoration: underline;
  text-decoration-color: rgba(44, 70, 129, 0.4);
  text-underline-offset: 2px;
}
html.dark .cap-slug-link:hover code {
  text-decoration-color: rgba(165, 180, 252, 0.5);
}
.cap-extlink {
  flex: none;
  opacity: 0.5;
  transition:
    opacity 150ms ease,
    transform 150ms ease;
}
.cap-slug-link:hover .cap-extlink {
  opacity: 1;
  transform: translate(1px, -1px);
}

/* Non-link variant of the slug, used inside the pricing table's
 * model cell. Mirrors `.cap-slug-link`'s layout (inline-flex,
 * truncating ) so it shares the same `.cap-slug-actions`
 * wrapper layout and the copy button sits in the right place.
 * Skips the link colour transitions and underline-on-hover — the
 * slug is now just a label next to the copy button, not a
 * navigation target. */
.cap-slug-text {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  color: rgb(71, 85, 105); /* slate-600 */
}
html.dark .cap-slug-text {
  color: rgb(203, 213, 225); /* slate-300 */
}
.cap-slug-text code {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  background: transparent;
  padding: 0;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * Slug actions wrapper + copy button.
 *
 * The slug cell hosts two siblings: the HuggingFace link (.cap-slug-
 * link) and a separate

sail-rs on docs.rs