/* * Rentgpu.org subsite stylesheet. * * Loaded ONLY by app/views/layouts/rentgpu.html.erb. Miningboard's * bundle never sees this file. * * Strategy: every selector is scoped under `body.rentgpu` so the * component class names (.panel, .field, .chip, .btn, .row-hover, * .muted) parallel MiningBoard's vocabulary 1:1 — same names, same * markup contract, different palette + fonts. This is the single * trick that lets `` render with the warm-ivory * tokens here while staying out of MB's stylesheet. * * The two sites diverge only in: * 1. Color palette (cream canvas + coral accent here, ported from * tokenshare.app, vs MB's cool gray + teal). * 2. Typography (Source Serif 4 h1 + Inter body here vs MB's * Manrope body). * Density, spacing, and component shapes are intentionally identical * to MB so the two products feel consistent to anyone who's seen both. */ /* ─── Tokens ─────────────────────────────────────────────────────── */ /* Light palette — cream + ink + coral (tokenshare-inspired). */ body.rentgpu { --bg: #F5F1E8; /* cream canvas */ --bg-elev: #EFE9D7; /* line2 — well */ --text: #1F1E1C; /* ink */ --muted: #6E6A62; /* warm gray meta */ --subtle: #3D3A35; /* ink2 — strong secondary text */ --panel: #FAF7EF; /* cream2 — slightly raised surface */ --panel-elev: #EFE9D7; /* deeper surface for nested panels */ --border: #E6DFCC; /* line — hairline */ --line: var(--border); --green: #5C7A52; --red: lab(49.4776 -41.7249 21.5535); --accent: #D97757; --accent-deep: lab(49.4776 -41.7249 21.5535); --accent-soft: #EFE6CF; /* Extended tier palette — five sympathetic muted tones used for category color-coding (modality, license, capability tier, size bucket, benchmark grade). All hand-picked to harmonize with the cream + coral base; no rainbow / Material colors. Each tier has a border colour, a text colour for that tier (legible on cream), and a soft fill that sits on the cream panel without shouting. */ --t-coral-border: #D97757; /* shared with --accent — frontier / closed */ --t-coral-text: #A24A2D; --t-coral-soft: #EFE6CF; --t-sage-border: #5C7A52; /* open weights / efficient open models */ --t-sage-text: #3F5436; --t-sage-soft: #E3EBD8; --t-slate-border: #6E7A96; /* code / embedding / research / specialty */ --t-slate-text: #4A546B; --t-slate-soft: #E0E3EB; --t-amber-border: #B08A4D; /* multimodal / vision / video / restricted */ --t-amber-text: #856528; --t-amber-soft: #EBDFC8; --t-lavender-border: #7B6D8C; /* distilled / efficient / variants */ --t-lavender-text: #5F5670; --t-lavender-soft: #EBE5EF; --grain-color: rgba(31, 30, 28, 0.035); /* CTA tokens — drive both light and dark via one selector. */ --btn-primary-bg: var(--text); /* ink on light → cream on dark */ --btn-primary-fg: #FFFFFF; --btn-primary-bg-hover: #000000; --shadow-card: 0 1px 0 rgba(31,30,28,0.04), 0 12px 28px -16px rgba(31,30,28,0.18); --font-serif: "Source Serif 4", "Tiempos Headline", Georgia, serif; --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; } /* Dark palette — warm-dark coffee canvas, cream text, coral kept. Activated by `` set by the layout's FOUC script from localStorage. Mirrors the miningboard mechanism. */ html.dark body.rentgpu { --bg: #1A1714; /* warm coffee ink */ --bg-elev: #231F1B; --text: #FAF7EF; /* cream */ --muted: #A39E94; /* warm light gray */ --subtle: #E6DFCC; /* light cream — strong secondary */ --panel: #231F1B; --panel-elev: #2C2722; --border: #3D3A35; --green: #7FA070; /* lifted for dark bg contrast */ --red: #E08A6F; --accent: #D97757; /* coral stays — works on dark */ --accent-deep: #E08A6A; /* slightly LIGHTER on hover for dark */ --accent-soft: #3D2A22; /* Dark-mode tier palette — same hues, but soft-fills become deep warm-toned panels that contrast against the warm coffee canvas instead of bright cream patches. Borders + text lift to keep AA contrast against the dark canvas. */ --t-coral-border: #E08A6A; --t-coral-text: #F2B099; --t-coral-soft: #3D2A22; --t-sage-border: #7FA070; --t-sage-text: #B5D0A8; --t-sage-soft: #25302B; --t-slate-border: #8E9AB6; --t-slate-text: #BCC4D6; --t-slate-soft: #292D38; --t-amber-border: #D0AF6E; --t-amber-text: #EAD4A0; --t-amber-soft: #322B1F; --t-lavender-border: #9B8DAE; --t-lavender-text: #C5BCD2; --t-lavender-soft: #2C2731; --grain-color: rgba(245, 241, 232, 0.045); --btn-primary-bg: var(--text); /* cream pill */ --btn-primary-fg: #1F1E1C; /* ink text */ --btn-primary-bg-hover: #FFFFFF; --shadow-card: 0 1px 0 rgba(0,0,0,0.30), 0 12px 28px -16px rgba(0,0,0,0.50); } body.rentgpu { background: var(--bg); /* Paper-grain texture — dot color comes from `--grain-color` so it auto-inverts on dark mode (ink-on-cream → cream-on-ink). */ background-image: radial-gradient(circle, var(--grain-color) 0.5px, transparent 0.5px); background-size: 5px 5px; color: var(--text); font-family: var(--font-sans); font-size: 14.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Standalone .grain utility — inherits --grain-color so it auto-themes with the body. */ body.rentgpu .grain { background-image: radial-gradient(circle, var(--grain-color) 0.5px, transparent 0.5px); background-size: 5px 5px; } /* Forced-dark grain — always light dots on ink. Use on always-dark surfaces (e.g. .panel--dark) regardless of the page's theme. */ body.rentgpu .grain--dark { background-image: radial-gradient(circle, rgba(245,241,232,0.06) 0.5px, transparent 0.5px); background-size: 5px 5px; } /* ─── Typography ────────────────────────────────────────────────── */ body.rentgpu h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.875rem, 3vw, 2.5rem); letter-spacing: -0.015em; line-height: 1.1; margin: 0; } body.rentgpu h2 { font-family: var(--font-sans); font-weight: 600; font-size: 1.25rem; line-height: 1.25; margin: 0; } body.rentgpu h3 { font-family: var(--font-sans); font-weight: 600; font-size: 1rem; line-height: 1.3; margin: 0; } body.rentgpu .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } body.rentgpu .text-muted, body.rentgpu .muted { color: var(--muted); } body.rentgpu .eyebrow { font-size: 0.6875rem; /* 11px */ letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--muted); } /* ─── Container + sections ──────────────────────────────────────── */ body.rentgpu .container { max-width: 80rem; margin-inline: auto; padding-inline: 1.25rem; } body.rentgpu .section { padding-block: 2.5rem; } /* .section--inset previously painted a darker cream over the body which created visible bands and ate the grain pattern. Per the tokenshare.app reference, sections share one canvas — the only visual division is a hairline border. Background stays transparent so the body's grain shows through uniformly. */ body.rentgpu .section--inset { background: transparent; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } /* ─── Surfaces (panels) ─────────────────────────────────────────── */ body.rentgpu .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-card); /* Defensive against long unbreakable strings (model names, URLs) blowing out narrow grid cells on tablet/mobile. Without this, a card title like "qwen2-vl-72b-instruct" pushes the card past its grid track. */ overflow-wrap: anywhere; min-width: 0; } body.rentgpu .panel-elev { background: var(--panel-elev); border: 1px solid var(--border); border-radius: 12px; } /* Dark panel — ink fill with cream text. Pair with `.grain--dark` to get the cream-on-ink dot texture (TokenShare's FOR BUYERS card). */ body.rentgpu .panel--dark { background: var(--text); color: #FAF7EF; border: 1px solid var(--text); border-radius: 12px; box-shadow: var(--shadow-card); } body.rentgpu .panel--dark .muted, body.rentgpu .panel--dark .text-muted, body.rentgpu .panel--dark .eyebrow { color: rgba(245,241,232,0.65); } body.rentgpu .panel--dark a { color: #FAF7EF; } body.rentgpu .panel-pad { padding: 0.875rem; } @media (min-width: 768px) { body.rentgpu .panel-pad { padding: 1.25rem; } } /* ─── Article (long-form editorial) ───────────────────────────── Article pages used to set `style="max-width: 760px"` on a `.container`, override headings with inline `style="margin-top: 2.5rem"` per call site, and ship inline `font-size:1.5rem` on stat numbers. That fragmented the type scale (body 14.5px, h3 16px, h2 20px — h3 barely bigger than body) and made vertical rhythm per-page rather than per-design. This block centralises the editorial shell so all articles read identically. Reach for `.article-wrap` to apply the editorial container width, and `.article-body` to opt the surrounding heading + paragraph tree into the editorial type scale + rhythm. */ body.rentgpu .article-wrap { max-width: 920px; /* up from 760px — more breathing room for tables + paragraphs */ margin-inline: auto; padding-inline: 1.25rem; } body.rentgpu .article-body { font-size: 1rem; /* 16px — bumped from inherited 14.5px so long-form reads at standard editorial size */ line-height: 1.7; } body.rentgpu .article-body h1 { font-size: clamp(2rem, 3.5vw, 2.75rem); line-height: 1.1; margin-top: 0.5rem; } body.rentgpu .article-body h2 { font-family: var(--font-sans); font-weight: 600; font-size: 1.5rem; /* 24px — clear step up from body */ line-height: 1.3; letter-spacing: -0.005em; margin-top: 2.5rem; margin-bottom: 0.5rem; } body.rentgpu .article-body h3 { font-family: var(--font-sans); font-weight: 600; font-size: 1.125rem; /* 18px — between body and h2 */ line-height: 1.35; margin-top: 1.75rem; margin-bottom: 0.375rem; } body.rentgpu .article-body > p, body.rentgpu .article-body > ul, body.rentgpu .article-body > ol, body.rentgpu .article-body > blockquote { margin-top: 1rem; } body.rentgpu .article-body ul, body.rentgpu .article-body ol { padding-left: 1.25rem; } body.rentgpu .article-body ul { list-style: disc; } body.rentgpu .article-body ol { list-style: decimal; } body.rentgpu .article-body li + li { margin-top: 0.375rem; } body.rentgpu .article-body .article-summary { font-size: 1.0625rem; /* 17px — lead paragraph, slightly larger than body */ color: var(--muted); margin-top: 0.75rem; line-height: 1.6; } /* Live "stat strip" cards above the body — replace the inline font-size:1.5rem on the number readout that each article used to roll by hand. */ body.rentgpu .article-stat-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-top: 1.75rem; } @media (min-width: 768px) { body.rentgpu .article-stat-grid { grid-template-columns: 1fr 1fr; } } body.rentgpu .article-stat-label { font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.375rem; } body.rentgpu .article-stat-num { font-size: 1.5rem; font-weight: 600; line-height: 1.1; } body.rentgpu .article-stat-sub { font-size: 0.75rem; color: var(--muted); margin-top: 0.25rem; } body.rentgpu .article-related { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); } body.rentgpu .article-related .eyebrow { display: block; } body.rentgpu .article-related ul { list-style: none; padding-left: 0; margin-top: 0.5rem; } body.rentgpu .article-related li + li { margin-top: 0.375rem; } /* ─── Providers (index + show) ────────────────────────────────── Refactored from a 80rem-wide `.container` + per-element inline `style="margin-top:..."` to a single 1040px scope with built-in rhythm. Reuses the editorial `.article-stat-*` typography for live-KPI numbers so providers and articles never diverge. */ body.rentgpu .providers-page { /* Match the global .container (80rem / 1280px) — previously capped at 1040px which made the page narrower than the top nav and squeezed the right sidebar over the main column on the IP show page. Keep horizontal padding identical to .container so breadcrumbs / hero / tables stay flush with the navbar edges. */ max-width: 80rem; margin-inline: auto; padding-inline: 1.25rem; } body.rentgpu .providers-page h1 { margin-top: 0.5rem; } body.rentgpu .providers-page h2 { font-size: 1.5rem; line-height: 1.3; margin-top: 2rem; margin-bottom: 0.5rem; } body.rentgpu .providers-page h3 { font-size: 1.0625rem; line-height: 1.35; margin: 0; } body.rentgpu .providers-page .lead { color: var(--muted); margin-top: 0.625rem; max-width: 64ch; font-size: 1rem; line-height: 1.6; } /* Live KPI strip — 1 column on mobile, up to 4 across on desktop. */ body.rentgpu .kpi-strip { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-top: 1.5rem; } @media (min-width: 640px) { body.rentgpu .kpi-strip { grid-template-columns: 1fr 1fr; } } @media (min-width: 960px) { body.rentgpu .kpi-strip { grid-template-columns: repeat(4, 1fr); } } body.rentgpu .kpi-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 0.875rem 1rem; box-shadow: var(--shadow-card); display: block; } body.rentgpu a.kpi-card { color: inherit; text-decoration: none; } body.rentgpu a.kpi-card:hover { border-color: var(--text); } body.rentgpu .kpi-card .kpi-label { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; } body.rentgpu .kpi-card .kpi-value { font-size: 1.5rem; font-weight: 600; line-height: 1.1; margin-top: 0.25rem; } body.rentgpu .kpi-card .kpi-sub { font-size: 0.75rem; color: var(--muted); margin-top: 0.25rem; } /* Provider cards — the index grid + the peer comparison strip both use the same shape. Card is the link; the live-signal row sits between the header and description. */ body.rentgpu .provider-card { display: block; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.125rem; box-shadow: var(--shadow-card); color: inherit; text-decoration: none; transition: border-color 120ms ease; } body.rentgpu .provider-card:hover { border-color: var(--text); } body.rentgpu .provider-card .pc-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; } body.rentgpu .provider-card .pc-title { display: flex; align-items: center; gap: 0.625rem; min-width: 0; } body.rentgpu .provider-card .pc-name { font-size: 1.0625rem; font-weight: 600; line-height: 1.2; } body.rentgpu .provider-card .pc-signal { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.8125rem; color: var(--muted); margin-bottom: 0.5rem; } body.rentgpu .provider-card .pc-signal strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } body.rentgpu .provider-card .pc-desc { font-size: 0.875rem; color: var(--muted); line-height: 1.5; margin: 0; } /* Auto-fit dense grid — replaced the 1fr → 1fr 1fr breakpoint cascade with a single rule that sizes itself by available container width. minmax(300px, 1fr) → 1 column on phones, 2 columns above ~620px (300px × 2 + gap fits in the container), 3 columns at ~960px, etc. No JS, no media queries. */ body.rentgpu .provider-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.75rem; } /* Sticky filter-chip row above the grid. Uses the existing .chip styling — no new colors / fonts / sizes. Only layout: horizontal flow, sticky-to-top with a backdrop-blur that lets the cream page colour show through. */ body.rentgpu .filter-chips { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 1.5rem 0 1rem; padding: 0.625rem 0; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); /* Hairline bottom edge so the row separates cleanly from the scrolling cards below when stuck. */ border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); } body.rentgpu .filter-chips .filter-chips-label { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-right: 0.25rem; } body.rentgpu .filter-chips .chip-count { margin-left: 0.375rem; font-variant-numeric: tabular-nums; opacity: 0.6; } body.rentgpu .provider-card[hidden] { display: none; } /* Grid ↔ list view toggle, sits on the right edge of the .filter-chips row. Two segmented buttons with active-state inversion. */ body.rentgpu .view-toggle { display: inline-flex; margin-left: auto; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--panel); } body.rentgpu .view-toggle button { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.625rem; background: transparent; border: 0; color: var(--muted); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; cursor: pointer; transition: background 120ms ease, color 120ms ease; } body.rentgpu .view-toggle button + button { border-left: 1px solid var(--border); } body.rentgpu .view-toggle button:hover { color: var(--text); } body.rentgpu .view-toggle button.is-active { background: var(--text); color: var(--bg); } body.rentgpu .view-toggle button.is-active svg { color: var(--bg); } body.rentgpu .view-toggle svg { display: block; } /* Provider table — the list view. Same border / panel feel as the card grid, but denser. Designed for desktop scanning. overflow-x:auto so the table can scroll horizontally on tablets that don't quite have enough width for all 7 columns; the .hide-sm columns drop out on phones via the media query below. */ body.rentgpu .provider-table-wrap { border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--panel); box-shadow: var(--shadow-card); } body.rentgpu .provider-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } body.rentgpu .provider-table thead th { text-align: left; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 0.625rem 0.875rem; background: color-mix(in srgb, var(--bg) 50%, var(--panel)); border-bottom: 1px solid var(--border); white-space: nowrap; } body.rentgpu .provider-table tbody td { padding: 0.625rem 0.875rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); vertical-align: middle; } body.rentgpu .provider-table tbody tr:last-child td { border-bottom: 0; } body.rentgpu .provider-table tbody tr:hover { background: color-mix(in srgb, var(--bg) 50%, transparent); } body.rentgpu .provider-table tbody tr[hidden] { display: none; } body.rentgpu .provider-table .num { text-align: right; font-variant-numeric: tabular-nums; } body.rentgpu .provider-table .mono { font-family: var(--font-mono); } body.rentgpu .provider-table .muted { color: var(--muted); } body.rentgpu .provider-table .pt-cell-link { display: inline-flex; align-items: center; gap: 0.5rem; color: inherit; text-decoration: none; font-weight: 500; } body.rentgpu .provider-table .pt-cell-link:hover .pt-name { text-decoration: underline; } body.rentgpu .provider-table .pt-name { font-weight: 600; } body.rentgpu .provider-table .badge { font-size: 0.6875rem; white-space: nowrap; } /* Hide secondary columns on small screens — Provider, Type, and Cheapest /hr stay; the rest fold away. */ @media (max-width: 767px) { body.rentgpu .provider-table .hide-sm { display: none; } } /* ─── Tools dropdown (top nav) ────────────────────────────────── Container + button + popover panel + group label + items. Reuses `.link` styling for the trigger so it visually sits next to the other nav items. Panel is absolutely-positioned beneath the trigger, anchored by `position: relative` on the container. */ body.rentgpu .rg-tools-menu { position: relative; } body.rentgpu .rg-tools-trigger { background: transparent; border: 0; cursor: pointer; font: inherit; padding: 0; color: inherit; display: inline-flex; align-items: center; } body.rentgpu .rg-tools-panel { position: absolute; top: calc(100% + 0.625rem); right: 0; min-width: 240px; padding: 0.5rem 0; z-index: 100; border-radius: 10px; box-shadow: 0 8px 24px -4px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06); } body.rentgpu .rg-tools-group-label { font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--muted); padding: 0.5rem 1rem 0.25rem; } body.rentgpu .rg-tools-item { display: block; padding: 0.5rem 1rem; font-size: 0.875rem; color: var(--text); text-decoration: none; white-space: nowrap; } body.rentgpu .rg-tools-item:hover { background: var(--panel-elev); } body.rentgpu .rg-tools-divider { height: 1px; background: var(--border); margin: 0.375rem 0; } /* ─── Tool inputs (slider + picker) ───────────────────────────── Used by every /tools/* form. Layout-only — no new colours beyond the existing accent var. */ body.rentgpu .tool-grid { display: grid; grid-template-columns: 1fr; gap: 1rem 1.25rem; } @media (min-width: 720px) { body.rentgpu .tool-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 960px) { body.rentgpu .tool-grid-4 { grid-template-columns: repeat(4, 1fr); } } body.rentgpu .slider-input { display: flex; flex-direction: column; gap: 0.375rem; } body.rentgpu .slider-input-label { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--muted); } body.rentgpu .slider-input-sublabel { color: var(--subtle); font-weight: 500; } body.rentgpu .slider-input-row { display: flex; align-items: center; gap: 0.625rem; } body.rentgpu .slider-input-number { width: 110px; padding: 0.375rem 0.625rem; font-size: 0.9375rem; font-weight: 500; font-variant-numeric: tabular-nums; flex-shrink: 0; } body.rentgpu .slider-input-range { flex: 1; appearance: none; -webkit-appearance: none; height: 4px; border-radius: 2px; background: var(--border); accent-color: var(--accent); } body.rentgpu .slider-input-range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 2px solid var(--bg); box-shadow: 0 1px 3px rgba(0,0,0,0.2); } body.rentgpu .slider-input-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 2px solid var(--bg); } body.rentgpu .slider-input-bounds { display: flex; justify-content: space-between; font-size: 0.6875rem; color: var(--subtle); font-variant-numeric: tabular-nums; padding: 0 130px 0 0; /* align with the slider region only */ } body.rentgpu .picker { display: flex; flex-direction: column; gap: 0.375rem; } body.rentgpu .picker-current { padding: 0.375rem 0.625rem; background: var(--panel-elev); border: 1px solid var(--border); border-radius: 6px; font-size: 0.875rem; font-weight: 500; } body.rentgpu .picker-current-label { font-variant-numeric: tabular-nums; } body.rentgpu .picker-search-wrap { position: relative; } /* Radio-style precision chips — visual style matches `.chip` but the underlying `` keeps form-submit semantics. */ body.rentgpu .radio-chips { display: inline-flex; flex-wrap: wrap; gap: 0.375rem; } body.rentgpu .radio-chips input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } body.rentgpu .radio-chips label { display: inline-flex; align-items: center; padding: 0.3125rem 0.75rem; border: 1px solid var(--border); border-radius: 999px; font-size: 0.75rem; font-weight: 500; font-family: var(--font-mono); letter-spacing: 0.02em; cursor: pointer; background: var(--panel); transition: border-color 120ms, background 120ms; } body.rentgpu .radio-chips label:hover { border-color: var(--text); } body.rentgpu .radio-chips input[type="radio"]:checked + label { background: var(--text); color: var(--bg); border-color: var(--text); } /* Two-column show hero: left col owns the editorial header, right col owns the live-KPI sidebar. Collapses to single column on tablet and below. */ body.rentgpu .provider-show-hero { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; margin-top: 1.5rem; } @media (min-width: 880px) { body.rentgpu .provider-show-hero { grid-template-columns: minmax(0, 1fr) 320px; } } body.rentgpu .provider-show-hero .hero-main h1 { display: flex; align-items: center; gap: 0.75rem; margin: 0; } body.rentgpu .provider-show-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } body.rentgpu .provider-show-hero .hero-sidebar { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 1.125rem; box-shadow: var(--shadow-card); } body.rentgpu .provider-show-hero .hero-sidebar dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 0.875rem; margin: 0.875rem 0 0; font-size: 0.875rem; } body.rentgpu .provider-show-hero .hero-sidebar dt { color: var(--muted); font-weight: 500; } body.rentgpu .provider-show-hero .hero-sidebar dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; } /* Facts grid — the show page's structured spec list. */ body.rentgpu .facts-grid { display: grid; grid-template-columns: 1fr; gap: 0.5rem 1.5rem; margin: 0; font-size: 0.875rem; } @media (min-width: 640px) { body.rentgpu .facts-grid { grid-template-columns: auto 1fr auto 1fr; } } body.rentgpu .facts-grid dt { color: var(--muted); font-weight: 500; } body.rentgpu .facts-grid dd { margin: 0; font-weight: 500; } /* Editorial "Best for / Avoid for" callouts. Left-bordered to distinguish from generic panels without going noisy. */ body.rentgpu .editorial-block { border-left: 3px solid var(--border); padding: 0.875rem 1rem; background: var(--panel-elev); border-radius: 0 8px 8px 0; } body.rentgpu .editorial-block.is-best { border-left-color: #16a34a; } body.rentgpu .editorial-block.is-avoid { border-left-color: #dc2626; } body.rentgpu .editorial-block h3 { font-size: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; margin: 0 0 0.5rem; color: var(--muted); } body.rentgpu .editorial-block ul { list-style: disc; padding-left: 1.125rem; margin: 0; font-size: 0.9375rem; line-height: 1.55; } body.rentgpu .editorial-block li + li { margin-top: 0.375rem; } body.rentgpu .editorial-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-top: 1rem; } @media (min-width: 720px) { body.rentgpu .editorial-grid { grid-template-columns: 1fr 1fr; } } /* Hairline divider — faded gradient line, TokenShare signature. */ body.rentgpu .hairline { height: 1px; background: linear-gradient(to right, transparent, var(--border) 16%, var(--border) 84%, transparent); border: 0; } /* ─── Buttons ───────────────────────────────────────────────────── */ body.rentgpu .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 9999px; font-weight: 500; font-size: 0.875rem; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease; } /* Primary CTA — high-contrast pill. On light, ink fill with white text (the tokenshare-style "Download" button). On dark, cream fill with ink text. Driven by --btn-primary-* tokens so one selector serves both modes. */ body.rentgpu .btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border-color: var(--btn-primary-bg); box-shadow: 0 1px 0 rgba(0,0,0,0.10), 0 6px 14px -8px rgba(0,0,0,0.35); } body.rentgpu .btn-primary:hover { background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-bg-hover); } body.rentgpu .btn-secondary { background: var(--panel); color: var(--text); border-color: var(--border); } body.rentgpu .btn-secondary:hover { background: var(--panel-elev); } /* Accent CTA — coral fill. Use sparingly for marketing/upsell surfaces where coral *is* the message. Not the default. */ body.rentgpu .btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 1px 0 rgba(31,30,28,0.08), 0 6px 14px -8px rgba(217,119,87,0.55); } body.rentgpu .btn-accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); } /* ─── Field (input wrapper) ─────────────────────────────────────── */ body.rentgpu .field { background: var(--panel); border: 1px solid var(--border); border-radius: 9999px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; } body.rentgpu .field input { flex: 1; background: transparent; border: 0; outline: none; font-size: 0.875rem; color: var(--text); font-family: inherit; } body.rentgpu .field input::placeholder { color: var(--subtle); } /* ─── Tab navigation (e.g. GPU detail Overview / Cloud instances) ─ */ body.rentgpu .rg-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; } body.rentgpu .rg-tab { padding: 0.625rem 1rem; background: transparent; border: 0; color: var(--muted); font-weight: 500; font-size: 0.875rem; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-family: inherit; transition: color 120ms ease, border-color 120ms ease; } body.rentgpu .rg-tab:hover { color: var(--text); } body.rentgpu .rg-tab.is-active { color: var(--text); border-bottom-color: var(--text); } /* ─── Chips (filter pills) ──────────────────────────────────────── */ body.rentgpu .chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.75rem 0.25rem 0.625rem; border: 1px solid var(--border); border-radius: 9999px; font-size: 0.75rem; /* 12px */ font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); background: transparent; text-decoration: none; white-space: nowrap; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; } body.rentgpu .chip:hover { border-color: var(--text); color: var(--text); } /* Active filter chip — ink fill, matches .btn-primary so coral can stay reserved for accent moments (badges, price callouts, brand). */ body.rentgpu .chip.is-active { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border-color: var(--btn-primary-bg); } body.rentgpu .chip.is-active:hover { background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-bg-hover); } /* ─── Badge (tier / status) ─────────────────────────────────────── */ body.rentgpu .badge { display: inline-flex; align-items: center; padding: 0.0625rem 0.375rem; font-size: 0.625rem; /* 10px */ font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 4px; border: 1px solid var(--border); color: var(--muted); background: var(--bg); white-space: nowrap; } body.rentgpu .badge--accent { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); } /* ─── Tier badges — color-coded category chips ────────────────────── Five sympathetic tones (coral, sage, slate, amber, lavender) used to color-code AI model metadata: modality, license, capability tier, size bucket, benchmark grade. Each variant pulls from the --t-*-* token trio defined in :root so light/dark themes auto-adapt. Modality / category mapping (canonical): coral → frontier capability, closed-source, top-tier rank sage → open weights, vision (sage = green), edge-runnable slate → code, embedding, research-focus, specialty amber → multimodal, audio, image-gen, video-gen, restricted license lavender → distilled variants, efficient mid-tier */ body.rentgpu .badge--coral { border-color: var(--t-coral-border); color: var(--t-coral-text); background: var(--t-coral-soft); } body.rentgpu .badge--sage { border-color: var(--t-sage-border); color: var(--t-sage-text); background: var(--t-sage-soft); } body.rentgpu .badge--slate { border-color: var(--t-slate-border); color: var(--t-slate-text); background: var(--t-slate-soft); } body.rentgpu .badge--amber { border-color: var(--t-amber-border); color: var(--t-amber-text); background: var(--t-amber-soft); } body.rentgpu .badge--lavender { border-color: var(--t-lavender-border); color: var(--t-lavender-text); background: var(--t-lavender-soft); } /* ─── Capability strength bar ─────────────────────────────────────── Used in the AI model detail page to render benchmark scores as horizontal bars (reasoning, coding, math, multilingual). The fill uses the relevant tier color so a glance at the page conveys which tier the model sits in. Track: hairline border + soft fill (theme-neutral, on cream/coffee). Fill: colored, percentage-width inline style supplied by view. */ body.rentgpu .strength-bar { display: block; width: 100%; height: 6px; background: var(--panel-elev); border-radius: 999px; overflow: hidden; position: relative; } body.rentgpu .strength-bar > .fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width 220ms ease; } body.rentgpu .strength-bar.tier-coral > .fill { background: var(--t-coral-border); } body.rentgpu .strength-bar.tier-sage > .fill { background: var(--t-sage-border); } body.rentgpu .strength-bar.tier-slate > .fill { background: var(--t-slate-border); } body.rentgpu .strength-bar.tier-amber > .fill { background: var(--t-amber-border); } body.rentgpu .strength-bar.tier-lavender > .fill { background: var(--t-lavender-border); } /* ─── Context window visualisation ────────────────────────────────── A horizontal strip showing this model's context window as a proportion of common ceilings (4K, 32K, 128K, 1M, 2M). Visual reference makes "128K tokens" land — "this is 64× the old 2K limit" rather than just a number. */ body.rentgpu .ctx-scale { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; } body.rentgpu .ctx-scale .track { position: relative; flex: 1; height: 8px; background: var(--panel-elev); border-radius: 999px; overflow: hidden; } body.rentgpu .ctx-scale .track > .fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 999px; } body.rentgpu .ctx-scale .tick { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--border); } /* ─── Hero gradient stripe ────────────────────────────────────────── A coloured top stripe on the hero card, with the colour driven by the model's primary modality. Without this every model's hero reads identical; with it, scanning across the catalogue gives an immediate sense of "what kind of model is this?" */ body.rentgpu .hero-stripe { height: 4px; margin: -0.875rem -0.875rem 0.875rem; border-top-left-radius: inherit; border-top-right-radius: inherit; background: var(--accent); } @media (min-width: 768px) { body.rentgpu .hero-stripe { margin: -1.25rem -1.25rem 1.25rem; } } body.rentgpu .hero-stripe.tier-coral { background: linear-gradient(90deg, var(--t-coral-border) 0%, var(--t-coral-soft) 100%); } body.rentgpu .hero-stripe.tier-sage { background: linear-gradient(90deg, var(--t-sage-border) 0%, var(--t-sage-soft) 100%); } body.rentgpu .hero-stripe.tier-slate { background: linear-gradient(90deg, var(--t-slate-border) 0%, var(--t-slate-soft) 100%); } body.rentgpu .hero-stripe.tier-amber { background: linear-gradient(90deg, var(--t-amber-border) 0%, var(--t-amber-soft) 100%); } body.rentgpu .hero-stripe.tier-lavender { background: linear-gradient(90deg, var(--t-lavender-border) 0%, var(--t-lavender-soft) 100%); } /* Standalone variant — same gradient stripe, but with no negative margin. Drop it above headings in layouts that aren't wrapped in a panel (e.g. provider-show-hero, inference-provider-show-hero, use-case detail). Slightly narrower (48px) so it reads as an accent line above the H1, not as a full-bleed banner. */ body.rentgpu .tier-strip { display: block; height: 3px; width: 56px; border-radius: 999px; background: var(--accent); margin-bottom: 0.625rem; } body.rentgpu .tier-strip.tier-coral { background: linear-gradient(90deg, var(--t-coral-border) 0%, var(--t-coral-soft) 100%); } body.rentgpu .tier-strip.tier-sage { background: linear-gradient(90deg, var(--t-sage-border) 0%, var(--t-sage-soft) 100%); } body.rentgpu .tier-strip.tier-slate { background: linear-gradient(90deg, var(--t-slate-border) 0%, var(--t-slate-soft) 100%); } body.rentgpu .tier-strip.tier-amber { background: linear-gradient(90deg, var(--t-amber-border) 0%, var(--t-amber-soft) 100%); } body.rentgpu .tier-strip.tier-lavender { background: linear-gradient(90deg, var(--t-lavender-border) 0%, var(--t-lavender-soft) 100%); } /* ─── Tables ────────────────────────────────────────────────────── */ body.rentgpu table.t { width: 100%; border-collapse: collapse; } body.rentgpu .t th, body.rentgpu .t td { padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.875rem; vertical-align: middle; } body.rentgpu .t th { font-weight: 600; color: var(--muted); font-size: 0.625rem; /* 10px */ letter-spacing: 0.08em; text-transform: uppercase; background: transparent; border-bottom-width: 1px; } body.rentgpu .t td.num, body.rentgpu .t th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } body.rentgpu .t tr.row-hover:hover td { background: color-mix(in srgb, var(--accent) 6%, var(--panel)); } body.rentgpu .t tr:last-child td { border-bottom: none; } /* sortable header link */ body.rentgpu .t th a.sort-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.25rem; } body.rentgpu .t th a.sort-link:hover { color: var(--accent-deep); } body.rentgpu .t th a.sort-link.is-active { color: var(--text); } body.rentgpu .sort-arrow { display: inline-block; width: 0.75rem; height: 0.75rem; color: var(--accent-deep); } /* horizontal-scroll wrapper for wide tables on narrow viewports */ body.rentgpu .t-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-inline: -1.25rem; padding-inline: 1.25rem; } body.rentgpu .t-wrap > table.t { min-width: 100%; } /* ─── Trend indicators ──────────────────────────────────────────── */ body.rentgpu .trend { display: inline-flex; align-items: center; gap: 0.125rem; font-size: 0.75rem; font-weight: 500; font-variant-numeric: tabular-nums; font-family: var(--font-mono); } body.rentgpu .trend--down { color: var(--green); } body.rentgpu .trend--up { color: var(--red); } body.rentgpu .trend--flat { color: var(--subtle); } /* ─── Sparkline ─────────────────────────────────────────────────── */ body.rentgpu .spark { display: inline-block; width: 64px; height: 20px; vertical-align: middle; } body.rentgpu .spark path, body.rentgpu .spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.5; } body.rentgpu .spark--down path, body.rentgpu .spark--down polyline { stroke: var(--green); } body.rentgpu .spark--up path, body.rentgpu .spark--up polyline { stroke: var(--red); } /* ─── Spec list (key/value) ─────────────────────────────────────── */ body.rentgpu .spec { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--border); } @media (min-width: 768px) { body.rentgpu .spec { grid-template-columns: 1fr 1fr; column-gap: 2rem; } } body.rentgpu .spec-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.875rem; } body.rentgpu .spec-row dt { color: var(--muted); margin: 0; } body.rentgpu .spec-row dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; } /* ─── Breadcrumbs ───────────────────────────────────────────────── */ body.rentgpu .crumbs { font-size: 0.75rem; color: var(--muted); margin-bottom: 0.875rem; } body.rentgpu .crumbs a { color: var(--muted); text-decoration: none; } body.rentgpu .crumbs a:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; } body.rentgpu .crumbs .sep { margin: 0 0.375rem; color: var(--subtle); } /* ─── Leaderboard ───────────────────────────────────────────────── */ body.rentgpu .board { display: flex; flex-direction: column; } body.rentgpu .board-row { display: grid; grid-template-columns: 1.25rem 1fr auto; gap: 0.625rem; align-items: baseline; padding: 0.5rem 0; border-bottom: 1px solid var(--border); } body.rentgpu .board-row:last-child { border-bottom: none; } body.rentgpu .board-rank { color: var(--subtle); font-family: var(--font-mono); font-size: 0.75rem; } body.rentgpu .board-name { font-weight: 500; font-size: 0.875rem; } body.rentgpu .board-name a { color: var(--text); text-decoration: none; } body.rentgpu .board-name a:hover { color: var(--accent-deep); } body.rentgpu .board-meta { display: block; color: var(--muted); font-size: 0.75rem; font-weight: 400; margin-top: 0.0625rem; } body.rentgpu .board-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; font-size: 0.875rem; } /* ─── Cost strip ────────────────────────────────────────────────── */ body.rentgpu .cost-strip { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border); border-radius: 8px; background: var(--panel-elev); overflow: hidden; } @media (max-width: 540px) { body.rentgpu .cost-strip { grid-template-columns: repeat(2, 1fr); } } body.rentgpu .cost-cell { padding: 0.625rem 0.875rem; border-right: 1px solid var(--border); } body.rentgpu .cost-cell:last-child { border-right: none; } @media (max-width: 540px) { body.rentgpu .cost-cell:nth-child(2n) { border-right: none; } body.rentgpu .cost-cell:nth-child(-n+2) { border-bottom: 1px solid var(--border); } } body.rentgpu .cost-cell .label { font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.125rem; } body.rentgpu .cost-cell .value { font-family: var(--font-mono); font-size: 0.9375rem; font-weight: 500; } /* ─── Stats strip (large numbers) ───────────────────────────────── */ body.rentgpu .stat-value { font-family: var(--font-serif); font-weight: 400; font-size: 1.875rem; line-height: 1; letter-spacing: -0.015em; color: var(--text); font-variant-numeric: tabular-nums; } body.rentgpu .stat-label { margin-top: 0.25rem; font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--muted); } /* ─── Chart frame ───────────────────────────────────────────────── */ body.rentgpu .chart-frame { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 0.875rem; } body.rentgpu .chart-frame > * { font-family: var(--font-sans) !important; } /* period toggle (chart range buttons) */ body.rentgpu .period-toggle { display: inline-flex; gap: 0.25rem; padding: 0.125rem; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); } body.rentgpu .period-toggle button { padding: 0.25rem 0.625rem; background: transparent; border: 0; cursor: pointer; font-size: 0.75rem; font-weight: 500; color: var(--muted); border-radius: 4px; font-family: var(--font-mono); } body.rentgpu .period-toggle button.is-active { background: var(--btn-primary-bg); color: var(--btn-primary-fg); } /* ─── FAQ accordion ─────────────────────────────────────────────── */ body.rentgpu .faq details { border-bottom: 1px solid var(--border); padding: 0.75rem 0; } body.rentgpu .faq details:last-child { border-bottom: none; } body.rentgpu .faq summary { cursor: pointer; font-weight: 500; font-size: 0.9375rem; list-style: none; display: flex; justify-content: space-between; align-items: center; } body.rentgpu .faq summary::-webkit-details-marker { display: none; } body.rentgpu .faq summary::after { content: "+"; color: var(--subtle); font-family: var(--font-mono); font-size: 1.125rem; transition: transform 200ms ease; } body.rentgpu .faq details[open] summary::after { transform: rotate(45deg); } body.rentgpu .faq details > div { margin-top: 0.5rem; color: var(--muted); font-size: 0.875rem; line-height: 1.55; } /* ─── Theme toggle + logo swap ──────────────────────────────────── */ /* Light + dark logo SVGs both render; CSS hides the off-theme one. */ body.rentgpu .rg-logo-light { display: block; } body.rentgpu .rg-logo-dark { display: none; } html.dark body.rentgpu .rg-logo-light { display: none; } html.dark body.rentgpu .rg-logo-dark { display: block; } /* Theme-toggle button — same chrome as the locale-btn. */ body.rentgpu .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; cursor: pointer; border: 1px solid var(--border); border-radius: 6px; color: var(--text); flex-shrink: 0; } body.rentgpu .theme-toggle:hover { background: var(--panel-elev); } /* Sun/moon icons inside the toggle — show moon on light, sun on dark. */ body.rentgpu .theme-toggle .rg-icon-sun { display: none; } body.rentgpu .theme-toggle .rg-icon-moon { display: block; } html.dark body.rentgpu .theme-toggle .rg-icon-moon { display: none; } html.dark body.rentgpu .theme-toggle .rg-icon-sun { display: block; } /* ─── Nav (sticky top) ──────────────────────────────────────────── */ body.rentgpu .nav { position: sticky; top: 0; z-index: 30; /* 85%-opaque bg via color-mix so the nav blur tone follows the active theme automatically (cream on light, ink on dark). */ background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid transparent; transition: border-color 120ms ease; } body.rentgpu .nav.is-scrolled { border-bottom-color: var(--border); } body.rentgpu .nav a.link { color: var(--text); text-decoration: none; font-weight: 500; } body.rentgpu .nav a.link:hover { color: var(--accent-deep); } /* Locale switcher dropdown (desktop top nav). Hidden on mobile (covered by the drawer pill row). */ body.rentgpu .locale-switcher { position: relative; display: none; } @media (min-width: 768px) { body.rentgpu .locale-switcher { display: inline-block; } } body.rentgpu .locale-btn { display: inline-flex; align-items: center; gap: 0.25rem; height: 36px; padding: 0 0.625rem; background: transparent; cursor: pointer; border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; } body.rentgpu .locale-btn:hover { background: var(--panel-elev); } body.rentgpu .locale-menu { position: absolute; right: 0; top: calc(100% + 0.25rem); min-width: 80px; padding: 0.25rem; z-index: 40; display: flex; flex-direction: column; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); } body.rentgpu .locale-menu[hidden] { display: none; } body.rentgpu .locale-menu a { padding: 0.375rem 0.625rem; text-decoration: none; color: var(--text); font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 4px; } body.rentgpu .locale-menu a:hover { background: var(--panel-elev); } body.rentgpu .locale-menu a.is-active { color: var(--accent-deep); font-weight: 600; } /* mobile menu */ body.rentgpu .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--text); cursor: pointer; } body.rentgpu .nav-toggle:hover { background: var(--panel-elev); } body.rentgpu .nav-mobile { display: none; border-top: 1px solid var(--border); background: var(--bg); } body.rentgpu .nav-mobile.is-open { display: block; } body.rentgpu .nav-mobile a { display: block; padding: 0.625rem 1.25rem; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: 0.875rem; font-weight: 500; } body.rentgpu .nav-mobile a:last-child { border-bottom: none; } body.rentgpu .nav-mobile a:hover { background: var(--panel-elev); } /* ─── Generic link ──────────────────────────────────────────────── */ body.rentgpu a.link { color: var(--text); text-decoration: none; } body.rentgpu a.link:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; } body.rentgpu a.link-accent { color: var(--accent-deep); font-weight: 500; } body.rentgpu a.link-accent:hover { text-decoration: underline; text-underline-offset: 3px; } /* ─── Mobile-only adjustments ───────────────────────────────────── */ @media (max-width: 768px) { body.rentgpu { font-size: 14px; } body.rentgpu .section { padding-block: 1.75rem; } body.rentgpu .container { padding-inline: 1rem; } body.rentgpu .panel-pad { padding: 0.75rem; } body.rentgpu .t-wrap { margin-inline: -1rem; padding-inline: 1rem; } /* Long-text chips (e.g. "Image generation (…) ≥8GB") would otherwise stay on one line and overflow the viewport. */ body.rentgpu .chip { white-space: normal; max-width: 100%; } } /* show toggle on mobile, hide it + drawer on desktop */ @media (min-width: 768px) { body.rentgpu .nav-toggle { display: none; } body.rentgpu .nav-mobile { display: none !important; } } /* ─── Homepage editorial almanac ────────────────────────────────── Bespoke styling for the homepage redesign. Self-contained — these selectors aren't used anywhere else. Editorial / magazine feel: oversized serif headline, monospace live-ticker, numbered section rules. */ body.rentgpu .almanac-headline { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.5rem, 6.5vw, 5.5rem); line-height: 0.95; letter-spacing: -0.025em; margin: 0; } body.rentgpu .almanac-headline .accent { color: var(--accent-deep); font-style: italic; } body.rentgpu .almanac-lede { font-family: var(--font-serif); font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.45; color: var(--subtle); max-width: 38ch; } body.rentgpu .almanac-ticker { display: inline-flex; align-items: center; flex-wrap: wrap; /* allow ticker pills to break onto a 2nd row on narrow viewports instead of overflowing */ gap: 0.5rem 0.625rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--muted); padding: 0.375rem 0.75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); max-width: 100%; /* never exceed the parent container's width */ box-sizing: border-box; } @media (max-width: 480px) { /* On phones the ticker often has 4-5 stats; the inline pill shape gets ugly when it wraps onto 3+ rows. Drop the border-radius down so the wrapped pill reads more like a paragraph block. */ body.rentgpu .almanac-ticker { border-radius: 12px; padding: 0.5rem 0.75rem; line-height: 1.5; } } body.rentgpu .almanac-ticker strong { color: var(--text); font-weight: 600; } body.rentgpu .almanac-ticker .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: rg-pulse 2.4s ease-in-out infinite; flex-shrink: 0; } @keyframes rg-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(1.25); } } /* Numbered section rule — `01 ────────────── At a glance` */ body.rentgpu .almanac-rule { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; margin: 3.5rem 0 1.5rem; } body.rentgpu .almanac-rule .num { font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; font-weight: 400; color: var(--muted); letter-spacing: 0.02em; } body.rentgpu .almanac-rule .line { height: 1px; background: linear-gradient(to right, var(--border), transparent); } body.rentgpu .almanac-rule .title { font-family: var(--font-serif); font-style: italic; font-size: 1.0625rem; color: var(--subtle); } /* Tier band — small colored strip across the top of a card. Same five-tone palette as the rest of the site so accents read consistently. */ body.rentgpu .tier-band { height: 3px; margin: -0.875rem -0.875rem 0.75rem; border-top-left-radius: inherit; border-top-right-radius: inherit; background: var(--accent); } @media (min-width: 768px) { body.rentgpu .tier-band { margin: -1.25rem -1.25rem 1rem; } } body.rentgpu .tier-band.tier-coral { background: linear-gradient(90deg, var(--t-coral-border) 0%, var(--t-coral-soft) 100%); } body.rentgpu .tier-band.tier-sage { background: linear-gradient(90deg, var(--t-sage-border) 0%, var(--t-sage-soft) 100%); } body.rentgpu .tier-band.tier-slate { background: linear-gradient(90deg, var(--t-slate-border) 0%, var(--t-slate-soft) 100%); } body.rentgpu .tier-band.tier-amber { background: linear-gradient(90deg, var(--t-amber-border) 0%, var(--t-amber-soft) 100%); } body.rentgpu .tier-band.tier-lavender { background: linear-gradient(90deg, var(--t-lavender-border) 0%, var(--t-lavender-soft) 100%); } /* Ranked column — magazine-style #01 #02 #03 listing. Used for the three tier columns. */ body.rentgpu .ranked-list { display: flex; flex-direction: column; } body.rentgpu .ranked-list .rank-row { display: grid; grid-template-columns: 1.75rem 1fr auto; align-items: center; gap: 0.625rem; padding: 0.625rem 0; border-top: 1px solid var(--border); } body.rentgpu .ranked-list .rank-row:first-child { border-top: none; } body.rentgpu .ranked-list .rank-numeral { font-family: var(--font-serif); font-size: 1.125rem; font-weight: 400; color: var(--muted); letter-spacing: 0.05em; font-variant-numeric: tabular-nums; /* Defensive: .panel inherits overflow-wrap:anywhere as a defensive default for long model slugs in card titles; that bites this numeral, splitting "#01" onto two lines ("#0" + "1"). Pin to one line. */ white-space: nowrap; overflow-wrap: normal; word-break: normal; } body.rentgpu .ranked-list .rank-row.is-first .rank-numeral { color: var(--accent-deep); } body.rentgpu .ranked-list .rank-price { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; } /* Horizontal shelf row — used for VRAM buckets + provider lists. Eyebrow label · GPU info · price/value, all in one row. */ body.rentgpu .shelf-row { display: grid; grid-template-columns: 6.5rem 1fr auto; align-items: center; gap: 0.875rem; padding: 0.875rem 0; border-top: 1px solid var(--border); } body.rentgpu .shelf-row:first-child { border-top: none; } body.rentgpu .shelf-row .shelf-label { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } body.rentgpu .shelf-row .shelf-value { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; } /* Coordinated entrance — staggered fade-rise on first paint. */ @keyframes almanac-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } body.rentgpu .almanac-rise { animation: almanac-rise 600ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards; } body.rentgpu .almanac-rise[data-delay="100"] { animation-delay: 100ms; } body.rentgpu .almanac-rise[data-delay="200"] { animation-delay: 200ms; } body.rentgpu .almanac-rise[data-delay="300"] { animation-delay: 300ms; } body.rentgpu .almanac-rise[data-delay="400"] { animation-delay: 400ms; }