/* =============================================================
api-portal.css
Global styles for the BQ API Documentation portal.
Renamed from api-docs.css — sidebar-specific rules have been
extracted to api-sidebar.css.
============================================================= */
:root {
--api-header-height: 56px;
--api-sidebar-width: 260px;
--api-bg: #ffffff;
--api-surface: #ffffff;
--api-surface-alt: #f9fafb;
--api-border: #e2e8f0;
--api-border-dark: #cbd5e1;
--api-text-main: #0f172a;
--api-text-muted: #475569;
--api-text-light: #94a3b8;
/* Code Syntax Colors */
--api-code-bg: #111b27;
--api-code-text: #e3eaf2;
--api-code-key: #6cb8e6;
--api-code-string: #91d076;
--api-code-number: #e6d37a;
--api-code-null: #e9ae7e;
--api-code-method: #e6d37a;
--api-font-sans: 'Inter', 'Inter Fallback', 'Inter Fallback R', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--api-font-mono: 'Fira Code', 'Fira Code Fallback', ui-monospace, SFMono-Regular, Consolas, monospace;
/* ---- Type scale ------------------------------------------------------
Every font-size in this stylesheet and in the 24 page templates now
resolves through these ten tokens, so the whole portal is retuned
from this one block. The templates reference them from their inline
style attributes (`font-size: var(--fs-sm)`), which is the only way an
inline declaration can answer a breakpoint: the media query further
down redefines the token and every inline style follows it.
Before this, nothing set a font-size on , so any paragraph or
list the templates had not styled inline fell through to the browser
default of 16px while the card and table copy beside it was hardcoded
at 13px. The same role also drifted between pages — h3 appeared at
13/14/15/16/17 and 18px, h4 at 14 and 16, h2 at 18/20/22 and 24.
The values: these are dense reference pages, so body copy sits at 15px
rather than the 16px long-form reading standard, 14px covers text
inside cards and param tables, and 13px the dense response grids. The
hero paragraph under the h1 runs at that same 15px — it is set apart by
its width and its muted colour, and does not need a size of its own.
Nothing carrying a sentence goes below 13px — 12px and under are for
labels, badges and uppercase column heads only. */
--fs-h1: 32px;
--fs-h2: 22px;
--fs-h3: 17px;
--fs-h4: 15px;
--fs-body: 15px; /* prose: p, li, the hero paragraph, the main column */
--fs-sm: 14px; /* card copy, param tables, secondary prose */
--fs-xs: 13px; /* dense response tables, inline code */
--fs-label: 12px; /* meta lines, captions, column heads */
--fs-badge: 11px; /* pills and small uppercase labels */
--fs-micro: 10px; /* method badges only */
--fs-mono: 13px; /* code blocks */
}
/* Tablet / large phone. 991px is where layout.php already flips the portal to
its mobile shell, so the h1 steps down here rather than waiting for 640px.
This block must stay above the 640px one: both match at phone widths and
the later declaration is the one that wins. */
@media (max-width: 991px) {
:root { --fs-h1: 28px; }
}
/* Only the headings and the mono blocks shrink on a phone. Body copy holds at
15px: a narrow screen is a reason to keep text legible, not to shrink it,
and the 13/16px collision this scale replaces is what actually made these
pages read badly at 375px. */
@media (max-width: 640px) {
:root {
--fs-h1: 26px;
--fs-h2: 20px;
--fs-h3: 16px;
--fs-mono: 12px;
}
}
* { box-sizing: border-box; }
body.bq-api-body {
margin: 0;
padding: 0;
font-family: var(--api-font-sans);
/* Without this the page inherited the browser's 16px default, which is why
an unstyled paragraph rendered a full 3px larger than the card copy next
to it. Everything now starts from the scale. */
font-size: var(--fs-body);
line-height: 1.65;
background: var(--api-bg);
color: var(--api-text-main);
-webkit-font-smoothing: antialiased;
}
/* Base type layer for content the templates leave unstyled. Wrapped in :where()
so the whole selector carries zero specificity from the class — every
component rule below and every inline style in the templates still wins, and
this only catches what would otherwise fall through to a browser default
(16px copy, 24px h2, 18px h3). */
:where(.api-content-inner) h2 { font-size: var(--fs-h2); line-height: 1.3; }
:where(.api-content-inner) h3 { font-size: var(--fs-h3); line-height: 1.35; }
:where(.api-content-inner) h4 { font-size: var(--fs-h4); line-height: 1.4; }
:where(.api-content-inner) p,
:where(.api-content-inner) li { font-size: var(--fs-body); line-height: 1.7; }
:where(.api-content-inner) code { font-size: var(--fs-xs); }
/* =========================================
1. GLOBAL HEADER
========================================= */
.api-global-header {
position: fixed; top: 0; left: 0; right: 0;
height: var(--api-header-height); background: var(--api-surface);
border-bottom: 1px solid var(--api-border); z-index: 1000;
display: flex; align-items: center;
}
.api-header-container { width: 100%; padding: 0 32px; display: flex; justify-content: space-between; align-items: center; }
.api-header-left { display: flex; align-items: center; }
.api-logo { height: 24px; display: block; }
.api-logo-text { font-family: var(--api-font-sans); font-weight: 600; font-size: 18px; color: #478bff; letter-spacing: -0.02em; margin-top: 1px; }
/* Hidden by default on desktop — acts as mobile menu overlay */
.api-header-nav { display: none; }
.api-link-bq {
display: flex; align-items: center; gap: 4px; color: var(--api-text-muted);
text-decoration: none; font-size: var(--fs-sm); font-weight: 500; transition: color 0.2s;
}
.api-link-bq svg { transition: transform 0.2s; }
.api-link-bq:hover { color: #478bff; }
.api-link-bq:hover svg { transform: translateX(3px); }
.api-header-actions { display: flex; align-items: center; gap: 16px; }
.api-btn-secondary { background: #fff; border: 1px solid var(--api-border-dark); color: var(--api-text-main); padding: 8px 16px; border-radius: 4px; font-weight: 600; font-size: var(--fs-sm); text-decoration: none; transition: border-color 0.2s; display: inline-flex; justify-content: center; align-items: center; }
.api-btn-secondary:hover { border-color: var(--api-text-main); }
.api-btn-primary { background: var(--api-text-main); border: 1px solid var(--api-text-main); color: #fff; padding: 8px 16px; border-radius: 4px; font-weight: 600; font-size: var(--fs-sm); text-decoration: none; transition: opacity 0.2s; display: inline-flex; justify-content: center; align-items: center; }
.api-btn-primary:hover { opacity: 0.9; }
.api-mobile-menu-btn { display: none; }
.api-mobile-only-nav { display: none; }
/* =========================================
2. SHARED SIDEBAR / MOBILE SEARCH TRIGGER
Note: sidebar container + nav group rules live in api-sidebar.css
========================================= */
.api-search-btn {
display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px 14px;
background: #ffffff; border: 1px solid var(--api-border); border-radius: 6px; color: var(--api-text-muted);
cursor: pointer; margin-bottom: 32px; box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.api-search-btn:hover { border-color: var(--api-border-dark); }
.api-search-placeholder { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 500; }
.api-search-shortcut {
background: var(--api-surface-alt); border: 1px solid var(--api-border);
border-radius: 4px; padding: 2px 8px; font-size: var(--fs-label); font-family: var(--api-font-mono); color: var(--api-text-muted);
}
/* Method badges — used in both sidebar and mobile header nav */
/* Method badges -- ONE definition, used by the sidebar, the mobile nav and the
endpoint box in the article body alike. Three separate hue families, so the
verb is readable from colour alone:
GET indigo read
POST amber write
WS green not an HTTP verb at all -- a streaming protocol
GET kept its indigo, but it used to vanish on the active nav row, whose
background is slate-200 (#e2e8f0): a pale indigo fill and a pale blue-grey
fill sit at almost the same value, so the pill lost its edge exactly where
the reader was looking. The fix is the BORDER, not the hue -- a defined
edge holds the pill's shape on any background, where fill contrast alone
could not.
Every badge sits on the same rungs of its own hue -- 50 fill, 300 border,
600/700 text -- so all three carry equal weight and none outshouts another.
These are a deliberate step lighter than the first attempt (indigo-800 text
on an indigo-400 border), which read as heavy and pulled the eye away from
the page titles the nav is actually there to list. A method badge is a
label, not a call to action.
GET's #7c8dd1 is Piyush's pick and is intentionally softer than the rung
would give: it measures 2.85:1 against its own fill and 2.59:1 on the
active nav row, below the 4.5:1 WCAG AA asks for at this size. It stays
legible because the pill's border, not its text contrast, is what carries
the shape -- but do not treat these values as an accessible-text baseline
to copy elsewhere. */
.api-badge { font-size: var(--fs-micro); font-weight: 700; padding: 2px 6px; border-radius: 4px; font-family: var(--api-font-mono); border: 1px solid transparent; }
.api-badge-get { background: #eef2ff; color: #7c8dd1; border-color: #c7d2fe; }
.api-badge-post { background: #fffbeb; color: #d97706; border-color: #fde68a; }
.api-badge-ws { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.03em; }
/* Coming-soon nav items (mobile header) */
.api-nav-list a.nav-coming-soon {
opacity: 0.55;
cursor: default;
pointer-events: none;
}
/* =========================================
3. MAIN CONTENT
========================================= */
.api-content {
margin-left: var(--api-sidebar-width);
margin-top: var(--api-header-height);
width: calc(100% - var(--api-sidebar-width));
padding: 64px 80px 0 80px;
min-height: calc(100vh - var(--api-header-height));
display: flex; flex-direction: column;
}
.api-content-inner {
width: 100%;
max-width: 1400px;
margin: 0 auto;
flex: 1;
}
.api-page-header { margin-bottom: 48px; }
.api-page-header h1 { font-size: var(--fs-h1); font-weight: 700; margin: 0 0 16px; color: var(--api-text-main); letter-spacing: -0.01em; }
.api-description { font-size: var(--fs-body); color: var(--api-text-muted); margin: 0; line-height: 1.6; }
/* Header meta block — maintainer byline stacked over the last updated date, sits
between the h1 and the description. Keep the spacing here rather than inline in
the page templates so it stays tunable in one place. */
.api-page-meta { margin: 0 0 18px; }
.api-page-meta p { margin: 0; line-height: 1.5; color: var(--api-text-muted); }
.api-page-meta p:first-child { font-size: var(--fs-xs); margin-bottom: 8px; }
.api-page-meta p:last-child { font-size: var(--fs-label); }
.api-page-meta a { color: var(--api-text-main); font-weight: 600; }
/* =========================================
4. GRID, PARAMS & CODE BLOCKS
========================================= */
.api-grid {
display: flex;
justify-content: space-between;
gap: 80px;
align-items: flex-start;
}
.api-grid-left { flex: 1; max-width: 650px; }
.api-grid-right { flex: 1; max-width: 550px; margin-left: auto; }
.api-grid h2 {
font-size: var(--fs-h2); margin: 0 0 8px 0; color: var(--api-text-main);
font-weight: 700; border-bottom: 1px solid var(--api-border); padding-bottom: 12px;
}
/* Restored Overview Page Cards */
.api-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: 20px;
margin-bottom: 48px;
}
.api-card {
display: block;
background: var(--api-surface);
border: 1px solid var(--api-border);
border-radius: 8px;
padding: 24px;
text-decoration: none;
transition: all 0.2s ease;
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.api-card:hover {
border-color: #478bff;
box-shadow: 0 8px 16px -4px rgba(0,0,0,0.05);
transform: translateY(-2px);
}
.api-card h3 {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 12px 0;
font-size: var(--fs-h3);
font-weight: 600;
color: var(--api-text-main);
}
.api-card p {
margin: 0;
font-size: var(--fs-sm);
color: var(--api-text-muted);
line-height: 1.6;
}
.api-param-description { font-size: var(--fs-sm); color: var(--api-text-muted); margin: 0 0 24px 0; line-height: 1.5; }
.api-endpoint-box {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 12px;
background: #ffffff;
border: 1px solid var(--api-border);
padding: 10px 16px;
border-radius: 4px;
margin-bottom: 48px;
font-family: var(--api-font-mono);
font-size: var(--fs-sm);
color: var(--api-text-main);
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
max-width: 100%;
word-break: break-word;
overflow-wrap: anywhere;
line-height: 1.6;
}
.api-param-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.api-param-table th,
.api-param-table td { padding: 12px 0; border-bottom: 1px solid var(--api-border); text-align: left; vertical-align: top; line-height: 1.5; }
.api-param-table th { color: var(--api-text-muted); font-weight: 600; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.05em; padding-bottom: 12px; }
.api-param-table td:nth-child(1) { font-weight: 600; color: var(--api-text-main); padding-right: 24px; }
.api-param-table td:nth-child(2) { color: var(--api-text-muted); font-family: var(--api-font-sans); font-size: var(--fs-sm); }
.api-param-table code {
font-family: var(--api-font-mono); font-size: var(--fs-label); background: var(--api-surface-alt);
padding: 2px 8px; border-radius: 4px; border: 1px solid var(--api-border); color: var(--api-text-main);
}
/* A long unbreakable slug in a code pill (market-capitalization,
free-cash-flow-annual) sets a min-content floor the table cannot shrink past,
which pushed the whole document into horizontal scroll below ~480px. Let the
pills break on narrow screens so the table stays inside the viewport. */
@media (max-width: 991px) {
.api-param-table th,
.api-param-table td { word-break: break-word; overflow-wrap: anywhere; }
.api-param-table code { overflow-wrap: anywhere; word-break: break-word; }
}
/* --- Parameter tables as stacked cards on phones ---------------------------
A two column parameter table on a 375px screen splits into roughly a 90px
name column and a 235px description column, so every description wraps every
few words and the table reads as a cramped ladder. Below 640px each row
becomes a self contained card: the first cell (the parameter or field name)
is promoted to a card heading, and every other cell is labelled with its
column header. api-portal.js copies those headers onto the cells as
data-label, since CSS cannot reach a
from a
.
Applies to every page automatically — no per page markup. */
@media (max-width: 640px) {
.api-param-table,
.api-param-table tbody,
.api-param-table tr,
.api-param-table td { display: block; width: 100%; }
.api-param-table thead { display: none; } /* headers move into data-label */
.api-param-table tr {
border: 1px solid var(--api-border);
border-radius: 8px;
padding: 14px 16px;
margin-bottom: 12px;
background: var(--api-surface);
}
.api-param-table tr:last-child { margin-bottom: 0; }
.api-param-table td {
border-bottom: 0;
padding: 0 0 12px;
}
.api-param-table td:last-child { padding-bottom: 0; }
/* Card heading: the parameter / field name. */
.api-param-table td:first-child {
font-size: var(--fs-h4);
font-weight: 700;
color: var(--api-text-main);
padding-right: 0;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid var(--api-border);
}
/* Column header rendered above each remaining cell. */
.api-param-table td[data-label]::before {
content: attr(data-label);
display: block;
font-size: var(--fs-micro);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--api-text-light);
margin-bottom: 5px;
}
/* The description column carries the muted body colour on desktop via
nth-child(2); restate it here since the cells are now blocks. */
.api-param-table td { color: var(--api-text-muted); font-size: var(--fs-sm); line-height: 1.6; }
}
.api-code-container {
background: var(--api-code-bg); border-radius: 6px;
margin-bottom: 32px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
/* A
holding a long unbreakable cURL URL has a large min-content width.
overflow-x:auto on the
only contains it if the ancestors are allowed
to be narrower than that content — flex and grid children default to
min-width:auto, so without this the floor propagates up and scrolls the
whole page sideways instead of just the code block. */
max-width: 100%;
min-width: 0;
}
/* Same reason: these are flex children of .api-grid. Applied to EVERY child,
classed or not, and at every width -- not just under 991px, where this floor
used to live. The sidebar takes 260px out of the viewport, so the content
column is narrow long before the viewport is: at a 1280px window the column
is 845px, and a flex child left at the default min-width:auto cannot shrink
below the min-content width of a long unbreakable cURL URL. It then pushed
the whole page sideways instead of letting the