/* ===================================================================
Dreamteam CRM API v2 — Protocol-style docs
Layout: fixed left sidebar + main column. Section pages get a
two-col content grid with a sticky code column on the right.
=================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Anchor links (sidebar sub-nav, in-page jumps) ease to their target instead
of snapping. The landing offset is already handled: h2/h3 and .endpoint carry
scroll-margin-top: 96px, which clears the 64px sticky topbar. */
html { scroll-behavior: smooth; }
/* A long, unrequested scroll animation is a vestibular trigger — honour the OS
setting and snap instantly for anyone who has asked for reduced motion. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* ---------- Theme variables ---------- */
/* Light is the default: the bare `:root` carries it, so a page renders light
before app.js runs. `data-theme="dark"` is the opt-in override. */
:root, :root[data-theme="light"] {
--bg: #FFFFFF;
--bg-panel: #FAFAF980;
--bg-panel-solid: #FAFAF9;
--bg-hover: #F1F1EF;
--border: #E5E5E5;
/* Code on a light page: a warm cream slab, NOT a dark terminal. The dark
block was too heavy a shape on an otherwise light page — the surrounding
chrome and syntax colours below are tuned for this cream surface. */
--bg-code: #F4F0EA;
--code-surface: #EFEAE0; /* raised chrome: panel head + foot */
--code-border: #E5E1D9; /* hairlines within/around a block */
--code-text: #1D1C1A; /* default code text */
--border-hover: #C7C5C0;
/* Lighter rule for the page chrome (topbar underline, sidebar edge). These
frame the whole app, so they read heavier than a divider inside content
and want a softer line than the general --border. */
--border-chrome: #F0F0F0;
--text: #1D1C1A;
--text-muted: #6B6B6B;
--text-dim: #A8A5A0;
--accent: #B70C02;
--accent-glow: rgba(183, 12, 2, 0.08);
--accent-hover: #960A02;
--topbar-bg: rgba(255, 255, 255, 0.85);
--btn-solid-bg: #1C1C1C;
--btn-solid-text: #FFFFFF;
/* Secondary (outlined pill) — the CTA and the feedback Yes/No share it. */
--btn-secondary-bg: #F0F0F0;
--btn-secondary-bg-hover: #E6E6E6;
/* Success / danger. Not new colours: these are the exact greens and reds the
docs already use for POST vs DELETE badges and OK vs error statuses, lifted
into tokens so the thumbs-up/down carries the same signal. Text-weight
values (dark enough for 4.5:1 on the panel), not the vivid --brand-red. */
--positive: #226E3F;
--negative: #8B2211;
/* Keycap fill — deliberately one step LIGHTER than the search pill it rests
on (--bg-panel-solid), so the key reads as raised. Aliased, not a new
colour: white here, the hover grey on dark, where white would invert the
relationship and make the key look sunken. */
--kbd-bg: var(--bg);
/* Resource cards — borderless, so the fill alone carries the shape. */
--card-bg: #F5F1EB;
--card-bg-hover: #EBE7E1;
/* Table rules — a darker step of the beige fill, not the neutral grey
--border. Grey against a warm beige reads as a colour clash; keeping the
rule in the same warm family lets the fill and its edge belong together.
Sits between the header fill (#F5F1EB) and the old #E3DCCF: softer than
before, but still darker than the fill so the header never appears to
bleed past the table's edge. */
--table-border: #EAE4D9;
/* The separators BETWEEN body rows, deliberately lighter than the frame above.
A row rule is an internal grouping hint and doesn't need the weight of the
table's outer edge or its header underline — at full strength the rows read
as a stack of boxes rather than one table. Same warm family, ~35% lifted
toward white, so it still registers as a line on a white row. */
--table-rule: #F1EDE6;
/* Guide cards — white, hairline border, layered shadow.
Four layers instead of one: a tight contact shadow that anchors the card
to the page, then progressively wider and fainter ambient layers. Real
light falls off this way; a single blur reads flat and synthetic. */
--card-guide-bg: #FFFFFF;
/* Aliased, not copied: the border deliberately tracks the secondary button's
fill, so changing one moves both. */
--card-guide-border: var(--btn-secondary-bg);
--card-guide-shadow:
0 1px 1px rgba(28, 25, 23, 0.04),
0 2px 4px rgba(28, 25, 23, 0.04),
0 6px 12px rgba(28, 25, 23, 0.035),
0 12px 24px rgba(28, 25, 23, 0.03);
--card-guide-shadow-hover:
0 1px 2px rgba(28, 25, 23, 0.05),
0 3px 6px rgba(28, 25, 23, 0.05),
0 10px 20px rgba(28, 25, 23, 0.05),
0 20px 36px rgba(28, 25, 23, 0.04);
}
:root[data-theme="dark"] {
--bg: #0F0E0E;
--bg-panel: #17161485;
--bg-panel-solid: #171614;
--bg-hover: #1F1E1B;
--border: #2A2724;
/* Code slab on the near-black page (--bg #0F0E0E): a step LIGHTER, not
darker, so the block reads as raised off the page rather than punched
into it. Its chrome steps up once more again. */
--bg-code: #171614;
--code-surface: #1F1E1B;
--code-border: #2A2724;
--code-text: #E5E4E0;
--border-hover: #3D3934;
/* On dark, "lighter" means closer to the page background — a chrome line that
recedes rather than one that brightens. */
--border-chrome: #201E1C;
--text: #F5F0E8;
--text-muted: #8B857D;
--text-dim: #6B655D;
--accent: #F92810;
--accent-glow: rgba(249, 40, 16, 0.15);
--accent-hover: #FE9A8C;
--topbar-bg: rgba(15, 14, 14, 0.7);
/* Pill inverts on dark so it stays high-contrast; the ring below does not. */
--btn-solid-bg: #F5F0E8;
--btn-solid-text: #0F0E0E;
/* Dark keeps the existing panel fill; hover darkens the same way light does. */
--btn-secondary-bg: var(--bg-panel);
--btn-secondary-bg-hover: var(--bg-hover);
/* The lighter cuts of the same pair — the values already used on dark. */
--positive: #7ACFA1;
--negative: #F17A65;
/* Still a step lighter than the search pill — here that means the hover grey,
not white. See the light-theme note. */
--kbd-bg: var(--bg-hover);
/* Cards keep their dark panel fill. Hover LIGHTENS here rather than darkens:
against a near-black page, a darker card would recede into the background
instead of reading as a response. */
--card-bg: var(--bg-panel);
--card-bg-hover: var(--bg-hover);
/* --border is already warm on dark (#2A2724), so it needs no beige variant. */
--table-border: var(--border);
/* On dark, a "lighter" rule means one that sits CLOSER to the page background
rather than a brighter line — the same inversion --border-chrome already
encodes, so it's aliased here instead of duplicating the value. */
--table-rule: var(--border-chrome);
/* Guide cards on dark: a solid raised panel, not white. Shadows go much
deeper in opacity — a 4%-black layer is invisible on a near-black page.
The border falls back to --border here: dark's secondary-button fill is a
semi-transparent panel colour, which is invisible as a hairline. */
--card-guide-bg: var(--bg-panel-solid);
--card-guide-border: var(--border);
--card-guide-shadow:
0 1px 1px rgba(0, 0, 0, 0.3),
0 2px 4px rgba(0, 0, 0, 0.25),
0 6px 12px rgba(0, 0, 0, 0.2),
0 12px 24px rgba(0, 0, 0, 0.15);
--card-guide-shadow-hover:
0 1px 2px rgba(0, 0, 0, 0.35),
0 3px 6px rgba(0, 0, 0, 0.3),
0 10px 20px rgba(0, 0, 0, 0.28),
0 20px 36px rgba(0, 0, 0, 0.22);
}
/* Peach ring for the solid CTA, lifted from the marketing site's primary
button. Theme-independent — only the pill it wraps inverts. */
:root {
--btn-ring-1: #F2835F;
--btn-ring-2: #EA9F94;
--btn-ring-3: #F9D4A0;
--btn-ring: linear-gradient(217deg, var(--btn-ring-1), var(--btn-ring-2) 51%, var(--btn-ring-3) 73%);
/* Code surface tokens (--bg-code, --code-surface, --code-border, --code-text)
are per-theme — see the two theme blocks above. Light gets a warm cream
slab, dark a raised panel. The panel chrome and syntax tokens are authored
for the DARK surface, with light-mode overrides further down re-colouring
them for the cream one.
NOTE: inline `code` chips in prose are separate — they use --bg-panel. */
/* Bright brand red. Deliberately NOT --accent: light mode darkens that to
#B70C02 for text contrast, and these marks want the vivid red in both
themes. Only ever used for non-text marks (icons, rules, tints), so the
3:1 non-text minimum applies rather than 4.5:1 — it clears that. */
--brand-red: #F92810;
--card-icon: var(--brand-red);
/* One banner treatment, shared by blockquotes and callouts. Neutral, NOT red:
a red tint on a red rule reads as an error/danger state, and these banners
are ordinary asides ("Assigning stages to deals"), not warnings. Red is now
reserved for things that actually are exceptional.
All four alias existing tokens, so the banner follows the theme for free:
bg → white in light, the raised dark panel on dark (--card-guide-bg)
rule → near-black in light, near-white on dark (--text)
chips → a cut-out of the page, hairlined in grey */
--banner-bg: var(--card-guide-bg);
--banner-border: var(--border);
--banner-rule: var(--text);
--banner-chip-bg: var(--bg);
--banner-chip-border: var(--border);
}
/* ---------- Fonts ---------- */
/* PP Telegraf — display face. Self-hosted (not on Google Fonts); licensed
webfont, so the files ship publicly with the docs.
Three cuts, one per weight actually used: 400 (feedback buttons), 500
(secondary CTA), 600 (h1). Each real weight must be declared — if a
requested weight has no face, the browser substitutes the nearest one and
the text silently renders at the wrong weight. */
@font-face {
font-family: 'PP Telegraf';
src: url('fonts/PPTelegraf-Regular.woff2') format('woff2'),
url('fonts/PPTelegraf-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'PP Telegraf';
src: url('fonts/PPTelegraf-Medium.woff2') format('woff2'),
url('fonts/PPTelegraf-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'PP Telegraf';
src: url('fonts/PPTelegraf-Semibold.woff2') format('woff2'),
url('fonts/PPTelegraf-Semibold.woff') format('woff');
font-weight: 600;
font-style: normal;
font-display: swap;
}
/* Geist Mono — code face. SIL OFL (see fonts/GeistMono-OFL.txt).
Replaces the old 'SF Mono', Monaco stack: those are macOS-only system fonts
that can't be embedded, so every non-Mac reader of the public docs was
falling through to whatever monospace their OS shipped. Self-hosting means
code renders identically everywhere.
ONE variable font covers the whole 100–900 range, so the three weights the
stylesheet asks for (400 body code, 600, 700 method badges) are all real
interpolated instances — nothing is synthesised. 70KB total, vs ~280KB for
the equivalent static cuts.
Upstream ships this as `GeistMono[wght].woff2`; renamed because square
brackets in a URL path are trouble on S3/CloudFront. */
@font-face {
font-family: 'Geist Mono';
src: url('fonts/GeistMono-Variable.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
:root {
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-display: 'PP Telegraf', var(--font-sans);
--font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
/* Type scale — seven steps, and nothing off-scale. Every font-size in this
file references one of these; a literal px value is a bug. Previously there
were thirteen sizes, six of them inside a 3px band (10/11/11.5/12/12.5/13)
where the steps aren't perceptible, so they read as drift rather than
hierarchy. Each step below has a distinct job:
h1/h2/h3 document structure
body running prose
ui interactive chrome — nav, buttons, tables, card copy
sm code, labels, tabs, captions
xs badges, keycaps, type hints
--text-h3 is deliberately 3px above --text-body (it was 1px, which is why
card and section headings read as weak). --text-h3 is shared with .lede;
weight and colour separate them, not size. */
--text-h1: 36px;
--text-h2: 22px;
--text-h3: 18px;
--text-body: 15px;
--text-ui: 14px;
--text-sm: 13px;
--text-xs: 11px;
}
/* Ligatures OFF everywhere the mono face is used. In API docs a reader may be
transcribing a header value or an operator by eye, and a fused `->` or `!=`
glyph misrepresents how many characters are actually there. Ligatures ride on
`calt` as well as `liga`, so both properties are needed to fully suppress
them — belt and braces, and it survives a future font swap. */
code, pre, kbd, samp,
.kbd, .method-badge, .endpoint-path, .code-panel-endpoint-path,
.url-preview, .body-editor, .kv-row input, .response-body {
font-variant-ligatures: none;
font-feature-settings: "liga" 0, "calt" 0;
}
body {
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: var(--bg);
color: var(--text);
font-size: var(--text-body);
line-height: 1.6;
min-height: 100vh;
}
.shell, .topbar, .sidebar, .main, .content { position: relative; z-index: 1; }
a { color: var(--accent); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--accent-hover); }
/* ---------- Shell ---------- */
.shell {
display: grid;
grid-template-columns: 288px 1fr;
min-height: 100vh;
}
/* ---------- Sidebar ---------- */
.sidebar {
border-right: 1px solid var(--border-chrome);
padding: 20px 0 40px;
position: sticky;
top: 0;
align-self: start;
height: 100vh;
overflow-y: auto;
background: var(--bg);
}
.sidebar-brand {
display: flex;
align-items: center;
gap: 12px;
padding: 6px 24px 32px;
color: var(--text);
font-weight: 600;
font-size: var(--text-body);
text-decoration: none;
letter-spacing: -0.01em;
}
.sidebar-brand:hover { color: var(--text); }
.sidebar-brand img { height: 25px; width: auto; }
/* Theme-aware logo swap: dark-fill wordmark in light mode, white wordmark in
dark mode. Both tags render; CSS toggles which is visible. */
/* Unscoped from .sidebar-brand so the footer wordmark swaps too. Sizing stays
per-container; only the light/dark choice is shared. */
/* These own `display` outright. Previously the container rules
(.topbar-brand img { display: block }, specificity 0,1,1) outranked
`.brand-logo-light { display: none }` (0,1,0), so in LIGHT mode the white
wordmark was never hidden — invisible on white, but still occupying its full
width. The brand box was therefore ~2x wider in light than in dark, and the
header re-flowed on every theme switch. Containers now set size only. */
.brand-logo-dark { display: block; }
.brand-logo-light { display: none; }
[data-theme="dark"] .brand-logo-dark { display: none; }
[data-theme="dark"] .brand-logo-light { display: block; }
.sidebar-brand .brand-divider { width: 1px; height: 18px; background: var(--border); }
.sidebar-brand .brand-name { font-weight: 600; font-size: var(--text-body); }
.nav-group { margin-bottom: 24px; }
.nav-group-title {
padding: 4px 24px 8px;
font-size: var(--text-sm);
font-weight: 600;
color: var(--text);
}
.nav-list {
border-left: 1px solid var(--border);
margin-left: 24px;
padding-left: 0;
list-style: none;
}
.nav-list li { margin: 0; }
.nav-list a {
display: block;
padding: 6px 16px;
color: var(--text-muted);
font-size: var(--text-ui);
text-decoration: none;
border-left: 1px solid transparent;
margin-left: -1px;
transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-list a:hover { color: var(--text); }
/* --brand-red (#F92810), not --accent — light mode darkens --accent to #B70C02
for text contrast, so the bar was a visibly different red from the resource
card icons. This is the same token those icons use.
1px -> 3px: the border is part of the box, so the extra 2px would push the
label right. padding-left drops 16px -> 14px to absorb it, keeping the active
label on the same baseline column as its siblings while the bar itself grows
rightward from the rail. */
.nav-list a.active {
color: var(--text);
border-left-color: var(--brand-red);
border-left-width: 3px;
padding-left: 14px;
font-weight: 500;
}
.nav-sublist { list-style: none; padding-left: 16px; margin: 2px 0 4px; }
.nav-sublist a {
padding: 4px 12px;
font-size: var(--text-sm);
}
/* ---------- Main column ---------- */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
display: flex;
align-items: center;
gap: 24px;
padding: 12px 32px;
border-bottom: 1px solid var(--border-chrome);
position: sticky;
top: 0;
background: var(--topbar-bg);
backdrop-filter: saturate(1.4) blur(10px);
-webkit-backdrop-filter: saturate(1.4) blur(10px);
z-index: 20;
height: 64px;
}
.searchbar {
flex: 1;
max-width: 520px;
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 999px;
padding: 7px 14px 7px 14px;
display: flex;
align-items: center;
gap: 10px;
color: var(--text-muted);
font-size: var(--text-ui);
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
}
.searchbar:hover { border-color: var(--border-hover); }
.searchbar svg { width: 15px; height: 15px; flex-shrink: 0; }
.searchbar .kbd {
margin-left: auto;
padding: 1px 6px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 4px;
font-size: var(--text-xs);
font-family: var(--font-mono);
color: var(--text-dim);
}
/* The .topbar-links nav (a permanent "Support" link) was removed — support is
now offered in the feedback row, at the point a reader says a page didn't
help. It carried the margin-left:auto that held the right edge of the topbar,
so the theme toggle inherits that job. */
.topbar .icon-btn { margin-left: auto; }
.icon-btn {
background: transparent;
border: none;
color: var(--text-muted);
padding: 7px;
cursor: pointer;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.15s ease, background 0.15s ease;
}
.icon-btn:hover { color: var(--text); background: var(--bg-hover); }
.icon-btn svg { width: 16px; height: 16px; }
:root[data-theme="dark"] .icon-btn .sun { display: block; }
:root[data-theme="dark"] .icon-btn .moon { display: none; }
:root[data-theme="light"] .icon-btn .sun { display: none; }
:root[data-theme="light"] .icon-btn .moon { display: block; }
/* ---------- Content ---------- */
.content {
padding: 56px 64px 96px;
max-width: 1360px;
width: 100%;
/* Center content inside .main so ultra-wide monitors get symmetric
whitespace rather than piling all the leftover space on the right.
No effect when content fills main. */
margin-left: auto;
margin-right: auto;
}
.content.narrow { max-width: 900px; }
.content.section { max-width: 1800px; }
/* Anchor targets on endpoint sections need to clear the sticky topbar
so the h2 lands below it, not behind it. */
.endpoint { scroll-margin-top: 96px; }
/* Endpoint grid — each endpoint block is its own 2-col so prose and
code panels stay aligned per section. Code panel sticks while its
section's prose scrolls. */
.endpoint-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 460px;
gap: 56px;
align-items: start;
}
@media (min-width: 1600px) {
.endpoint-grid { grid-template-columns: minmax(0, 1fr) 560px; }
}
@media (min-width: 2100px) {
/* On genuinely wide monitors, give the code column more room and
let the section deck stretch further before centering kicks in. */
.content.section { max-width: 2000px; }
.endpoint-grid { grid-template-columns: minmax(0, 1fr) 680px; }
}
.endpoint-grid > .prose-col { min-width: 0; }
.endpoint-grid > .code-col { min-width: 0; }
.endpoint-grid > .code-col .code-panel { margin: 0; }
.endpoint-grid > .code-col .code-panel + .code-panel { margin-top: 16px; }
/* Sticky-scroll the entire code column together, so both Request and
Response panels stay visible as the prose scrolls. When the panels
overflow the viewport, the column scrolls internally first — and
once it hits its own top/bottom, the page keeps scrolling (default
`overscroll-behavior: auto`, no `contain`). */
.endpoint-grid > .code-col {
position: sticky;
top: 88px;
align-self: start;
max-height: calc(100vh - 104px);
overflow-y: auto;
padding-right: 4px;
}
/* Hide scrollbar unless hovering — cleaner look */
.endpoint-grid > .code-col::-webkit-scrollbar { width: 4px; }
.endpoint-grid > .code-col::-webkit-scrollbar-thumb { background: transparent; }
.endpoint-grid > .code-col:hover::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
/* Request panel — method+path inline in the header */
.code-panel-request .code-panel-head { padding: 8px 12px; }
.code-panel-endpoint {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: var(--text-sm);
color: #E5E4E0;
overflow: hidden;
}
.code-panel-endpoint .method-badge { font-size: var(--text-xs); }
.code-panel-endpoint-path {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Response panel — status tab row (200 / 400 / 404 ...) */
.response-status-tabs {
display: inline-flex;
align-items: center;
gap: 2px;
min-width: 0;
overflow-x: auto;
}
.response-status-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: transparent;
border: none;
color: #8B857D;
font-family: var(--font-mono);
font-size: var(--text-sm);
font-weight: 600;
cursor: pointer;
border-radius: 6px;
white-space: nowrap;
transition: color 0.15s ease, background 0.15s ease;
}
.response-status-tab:hover { color: #F5F0E8; }
.response-status-tab.active {
color: #F5F0E8;
background: #2A2724;
}
.response-status-tab .dot {
width: 8px; height: 8px; border-radius: 50%;
}
.response-status-tab .dot-ok { background: #57BB8A; box-shadow: 0 0 8px rgba(87, 187, 138, 0.5); }
.response-status-tab .dot-warn { background: #F1D06B; box-shadow: 0 0 8px rgba(241, 208, 107, 0.5); }
.response-status-tab .dot-err { background: #E45D4A; box-shadow: 0 0 8px rgba(228, 93, 74, 0.5); }
.response-status-tab .dot-gray { background: #8B857D; }
.response-actions {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: auto;
}
.show-schema-toggle {
padding: 4px 10px;
background: transparent;
border: none;
color: #8B857D;
font-family: inherit;
font-size: var(--text-sm);
cursor: pointer;
border-radius: 6px;
transition: color 0.15s ease, background 0.15s ease;
}
.show-schema-toggle:hover { color: #F5F0E8; }
.show-schema-toggle.active {
color: #F5F0E8;
background: #2A2724;
}
/* Variant sub-tab row (With / Without associations, etc) */
.response-variant-bar,
.request-variant-bar {
display: flex;
align-items: center;
gap: 2px;
padding: 6px 10px;
background: #14130F;
border-bottom: 1px solid #2A2724;
overflow-x: auto;
}
/* Explicit display:flex above overrides the browser's default [hidden]
rule, so we need to restore it. Without this, all status' variant bars
render at once. */
.response-variant-bar[hidden],
.request-variant-bar[hidden] { display: none; }
.response-variant-tab,
.request-variant-tab {
padding: 3px 10px;
background: transparent;
border: 1px solid transparent;
color: #8B857D;
font-family: inherit;
font-size: var(--text-xs);
cursor: pointer;
border-radius: 999px;
white-space: nowrap;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.response-variant-tab:hover,
.request-variant-tab:hover { color: #F5F0E8; }
.response-variant-tab.active,
.request-variant-tab.active {
color: #F5F0E8;
border-color: #3D3934;
background: #2A2724;
}
/* Caption under a response body */
.response-caption {
padding: 10px 14px 14px;
background: #14130F;
border-top: 1px solid #2A2724;
color: #8B857D;
font-size: var(--text-sm);
line-height: 1.55;
}
@media (max-width: 1200px) {
.content { padding: 40px 40px 80px; }
.endpoint-grid { grid-template-columns: 1fr; gap: 24px; }
.endpoint-grid > .code-col .code-panel { position: static; }
}
@media (max-width: 720px) {
.content { padding: 24px 20px 60px; }
/* Retune the scale step itself rather than overriding h1 — h1 keeps exactly
one font-size declaration, and the !important goes away. */
:root { --text-h1: 28px; }
}
/* ---------- Typography ---------- */
h1 {
font-family: var(--font-display);
font-size: var(--text-h1);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.02em;
margin: 0 0 16px;
color: var(--text);
}
.eyebrow {
font-size: var(--text-sm);
font-weight: 600;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 12px;
}
.lede {
font-size: var(--text-h3);
color: var(--text-muted);
margin: 0 0 32px;
line-height: 1.55;
max-width: 720px;
}
h2 {
font-size: var(--text-h2);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--text);
margin: 56px 0 20px;
scroll-margin-top: 96px;
}
/* Endpoint-page prose-col h2s override this with an inline margin-top:0
(they sit at the top of their grid cell). Everywhere else, keep the
full 56px so first and subsequent H2s space out evenly. */
h3 {
font-size: var(--text-h3);
font-weight: 600;
color: var(--text);
margin: 28px 0 12px;
scroll-margin-top: 96px;
}
p { margin: 0 0 16px; color: var(--text); }
p.muted, .muted { color: var(--text-muted); }
ul, ol { margin: 0 0 20px; padding-left: 24px; color: var(--text); }
li { margin: 4px 0; }
/* Inline code */
p code, li code, td code, h3 code, h2 code, blockquote code {
background: var(--bg-panel);
border: 1px solid var(--border);
color: var(--text);
padding: 1px 6px;
border-radius: 4px;
font-size: var(--text-sm);
font-family: var(--font-mono);
}
/* Standalone code blocks (from ``` fences in guide pages) — only match
the direct children of .content so we don't touch the request/response
panels, which style themselves. Black in both themes, same as the panels. */
.content > pre {
background: var(--bg-code);
border: 1px solid var(--code-border);
border-radius: 10px;
padding: 14px 16px;
overflow-x: auto;
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: 1.7;
color: var(--code-text);
margin: 20px 0;
}
.content > pre code {
background: transparent;
border: 0;
padding: 0;
color: inherit;
font-size: inherit;
}
/* Blockquote — the banner treatment (see .callout, which shares it). Reset
inner p margins so the text aligns cleanly with the box padding. */
blockquote {
background: var(--banner-bg);
border: 1px solid var(--banner-border);
border-left: 3px solid var(--banner-rule);
padding: 12px 16px;
border-radius: 0 10px 10px 0;
margin: 20px 0;
color: var(--text);
font-size: var(--text-body);
line-height: 1.6;
}
blockquote p { margin: 0; }
blockquote p + p { margin-top: 8px; }
/* Images in guide content — cap size so the token screenshot stays
readable but doesn't dominate the page. */
.content img {
display: block;
max-width: 100%;
width: auto;
height: auto;
max-height: 320px;
border-radius: 10px;
border: 1px solid var(--border);
margin: 24px 0;
box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.4);
}
:root[data-theme="light"] .content img {
box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.15);
}
/* ---------- CTAs ---------- */
.cta-row { display: flex; gap: 10px; margin: 24px 0 8px; flex-wrap: wrap; }
.cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 18px;
border-radius: 999px;
font-size: var(--text-ui);
font-weight: 500;
cursor: pointer;
text-decoration: none;
border: 1px solid transparent;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cta::after { content: '→'; margin-left: 2px; }
/* Same reason as .cta-primary::after — an empty ::after still takes a `gap`,
which made the right padding 8px wider than the left. */
.cta.cta-plain::after { display: none; }
/* Solid pill inside a peach gradient ring — the marketing site's primary
button. The ring is a 2px transparent border filled via background-clip
(padding-box pill over border-box gradient), so it needs no wrapper element.
The label sits in the display face at 600, as it does on marketing. */
/* Metrics are the marketing button's, verbatim: a 36px badge in a 44px pill
with 4px of padding on top, right and bottom, so the space around the badge
is uniform on those three sides (4 + 36 + 4 = 44). Marketing hangs the ring
on a sibling element and sets height:2.75rem; here the ring is the border, so
the height is 44 + 2px of border per side = 48px to keep the pill itself 44. */
.cta-primary {
height: 48px;
gap: 24px;
padding: 4px 4px 4px 24px;
border: 2px solid transparent;
font-family: var(--font-display);
font-size: var(--text-ui);
font-weight: 600;
line-height: 1.14;
letter-spacing: -0.003em;
color: var(--btn-solid-text);
background:
linear-gradient(var(--btn-solid-bg), var(--btn-solid-bg)) padding-box,
var(--btn-ring) border-box;
}
/* The badge replaces the shared '→' affordance. `display: none` rather than
`content: ''` — an empty ::after is still a flex item, so it would collect a
full `gap` (24px) before it and push the badge off the right padding. */
.cta-primary::after { display: none; }
/* Needed because the global `a:hover` rule outranks `.cta-primary` on colour. */
.cta-primary:hover { color: var(--btn-solid-text); }
/* Marketing's hover, verbatim: the badge rotates 45° clockwise, swinging the
↗ arrow round to point →. Their easing is `all .3s ease-in-out`. */
.cta-primary:hover .cta-badge { transform: rotate(45deg); }
.cta-badge {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 36px;
height: 36px;
border-radius: 999px;
background: var(--btn-solid-text);
color: var(--btn-solid-bg);
transition: transform 0.3s ease-in-out;
}
.cta-badge svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) {
.cta-badge { transition: none; }
.cta-primary:hover .cta-badge { transform: none; }
}
/* Borderless — the fill alone carries the shape. The transparent 1px border
inherited from .cta is kept so the box matches .cta-primary's geometry. */
.cta-secondary {
font-family: var(--font-display);
background: var(--btn-secondary-bg);
color: var(--text);
}
.cta-secondary:hover { background: var(--btn-secondary-bg-hover); color: var(--text); }
/* Arrow-link (Read more →) */
.arrow-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--accent);
font-size: var(--text-ui);
font-weight: 500;
text-decoration: none;
}
.arrow-link:hover { color: var(--accent-hover); }
.arrow-link::after { content: '→'; transition: transform 0.15s ease; }
.arrow-link:hover::after { transform: translateX(2px); }
/* ---------- Cards ---------- */
.card-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 16px;
margin: 24px 0 32px;
}
/* Guide cards. Same radius and padding as .card above so the two rows on the
landing page read as one family — these just carry a border and shadow
instead of a tinted fill. */
.card-plain {
/* Column flex so the arrow-link can be pushed to the bottom edge with an
auto top margin. Without it the link sits directly under the copy, and
cards with shorter descriptions float their link higher than their
neighbours. */
display: flex;
flex-direction: column;
background: var(--card-guide-bg);
border: 1px solid var(--card-guide-border);
border-radius: 14px;
padding: 24px 20px 20px;
box-shadow: var(--card-guide-shadow);
text-decoration: none;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card-plain:hover {
box-shadow: var(--card-guide-shadow-hover);
transform: translateY(-2px);
}
/* The lift is decorative; honour a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
.card-plain { transition: box-shadow 0.2s ease; }
.card-plain:hover { transform: none; }
}
.card-plain h3 { margin: 0 0 6px; font-size: var(--text-body); color: var(--text); }
/* The bottom margin is the *minimum* gap above the arrow-link — on the tallest
card the link's `margin-top: auto` has no slack to absorb, so this is what
sets the spacing there. Shorter cards get more, from the auto margin. */
.card-plain p { color: var(--text-muted); font-size: var(--text-ui); margin: 0 0 20px; line-height: 1.5; }
/* margin-top: auto eats the leftover vertical space, pinning the link to the
bottom. align-self keeps the link box hugging its text rather than
stretching the full card width. */
.card-plain .arrow-link {
font-size: var(--text-sm);
margin-top: auto;
align-self: flex-start;
}
/* Resource cards with icons */
/* Borderless — the transparent 1px border is kept so the card keeps its exact
size and the grid columns don't reflow. */
.card {
position: relative;
overflow: hidden;
background: var(--card-bg);
border: 1px solid transparent;
border-radius: 14px;
padding: 24px 20px 20px;
transition: background 0.15s ease;
text-decoration: none;
color: inherit;
display: block;
}
.card:hover { background: var(--card-bg-hover); color: inherit; }
/* Bare icon — no chip. The 32px box is kept so the icon stays optically
aligned with the card padding and the spacing below it doesn't shift. */
.card-icon {
position: relative;
width: 32px;
height: 32px;
color: var(--card-icon);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.card-icon svg { width: 24px; height: 24px; }
.card h3 { margin: 0 0 6px; font-size: var(--text-body); color: var(--text); position: relative; }
.card p { color: var(--text-muted); font-size: var(--text-ui); margin: 0; line-height: 1.5; position: relative; }
/* ---------- Icon motion ----------
Hover animation for the resource-card icons, the feedback thumbs and the
theme toggle — hand-rolled on the inline SVGs already in the markup. The
React animated-icon packages cost ~118 kB gzip (React runtime + motion) to
do this and ship no database or funnel glyph; this costs 0 kB of JS.
Each animation says something about what the card does, rather than being
decoration: the schema sheets separate, the records lid lifts, the funnel
passes something through, the user nods, the pipeline stages fire in order.
Two things every SVG animation here depends on:
- `transform-box: fill-box`, or transform-origin resolves against the whole
24×24 viewBox instead of the shape, and every rotate/scale drifts off-axis.
- `overflow: visible`, because an SVG clips to its viewBox by default and
these shapes already sit flush against it — a 2px lift would be sheared. */
.card-icon svg *,
.icon-btn svg * {
transform-box: fill-box;
transform-origin: center;
}
.card-icon svg,
.feedback-btn svg,
.icon-btn svg { overflow: visible; }
/* Shared beats. Only the midpoint is declared: the implicit 0%/100% is the
element's resting transform, so each shape returns exactly where it started
and these compose with the static transforms already on some icons. */
@keyframes ic-lift { 50% { transform: translateY(-2.5px); } }
@keyframes ic-drop { 50% { transform: translateY(2px); } }
@keyframes ic-nudge { 50% { transform: translateY(-0.5px); } }
/* Schema — the three sheets pull apart and settle. */
.card:hover [data-icon="schema"] .ic-top { animation: ic-lift 0.5s ease-out; }
.card:hover [data-icon="schema"] .ic-mid { animation: ic-nudge 0.5s ease-out; }
.card:hover [data-icon="schema"] .ic-bot { animation: ic-drop 0.5s ease-out; }
/* Records — the lid lifts off the cylinder; the band follows a beat later. */
.card:hover [data-icon="records"] .ic-lid { animation: ic-lift 0.5s ease-out; }
.card:hover [data-icon="records"] .ic-band { animation: ic-nudge 0.5s ease-out 0.05s; }
/* Find Records — the funnel squeezes and rebounds, as if something passed
through it. Anchored at the rim so it drains downward rather than pinching
about its middle. */
@keyframes ic-filter {
35% { transform: scaleY(0.86); }
70% { transform: scaleY(1.06); }
100% { transform: scaleY(1); }
}
.card:hover [data-icon="find"] .ic-funnel {
transform-origin: top center;
animation: ic-filter 0.5s ease-out;
}
/* Users — the head nods and the shoulders give under it. */
@keyframes ic-bob { 45% { transform: translateY(-2px); } }
.card:hover [data-icon="users"] .ic-head { animation: ic-bob 0.5s ease-out; }
.card:hover [data-icon="users"] .ic-shoulders { animation: ic-nudge 0.5s ease-out 0.06s; }
/* Pipelines — the four stages fire in sequence. The rects are authored
clockwise from top-left, so the stagger reads as a circuit of the grid. */
@keyframes ic-pop { 40% { transform: scale(0.62); } }
.card:hover [data-icon="pipelines"] rect { animation: ic-pop 0.45s ease-out; }
.card:hover [data-icon="pipelines"] rect:nth-of-type(2) { animation-delay: 0.06s; }
.card:hover [data-icon="pipelines"] rect:nth-of-type(3) { animation-delay: 0.12s; }
.card:hover [data-icon="pipelines"] rect:nth-of-type(4) { animation-delay: 0.18s; }
/* Recipes — the route's two endpoints fire in sequence, tracing the flow
from the start node to the end the way a recipe chains one call to the next. */
.card:hover [data-icon="recipes"] .ic-start { animation: ic-pop 0.45s ease-out; }
.card:hover [data-icon="recipes"] .ic-end { animation: ic-pop 0.45s ease-out 0.12s; }
/* Feedback thumbs — the gesture itself. Rotating the whole