/* ====================================================
restapi.wtf — shared base styles.
Owns: color/font tokens, body atmosphere, brand mark,
header chrome (brand + mode-toggle + theme-toggle),
footer with wordmark, SSR intro, copy buttons, utilities.
Loaded BEFORE components.css and before per-site styles.css.
Aesthetic: editorial trade press. Warm-dark / cream-light
palette, rescue orange accent, Instrument Serif italic display,
Instrument Sans body, JetBrains Mono for the remains supported but is restyled. */
.sibling-sites {
display: flex;
flex-wrap: wrap;
gap: 12px 18px;
margin: 0;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.sibling-sites a {
color: var(--fg-muted);
border-bottom: 1px solid transparent;
padding-bottom: 1px;
transition: color 180ms, border-color 180ms;
}
.sibling-sites a:hover { color: var(--accent); border-bottom-color: var(--accent); text-decoration: none; }
.sibling-sites a[aria-current="page"] {
color: var(--fg);
border-bottom-color: var(--accent);
}
.foot-tagline { color: var(--fg-muted); font-size: 12px; letter-spacing: 0.04em; text-transform: none; }
.foot-tagline strong { color: var(--fg); }
/* ---------- SSR intro (visible to crawlers + JS-off users; matches editorial) ---------- */
.ssr-intro { max-width: 70ch; padding: 16px 0 8px; }
.ssr-intro h1 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(40px, 6vw, 72px);
line-height: 1.0;
letter-spacing: -0.022em;
margin: 0 0 28px;
color: var(--fg);
}
.ssr-intro h1 em { font-style: italic; color: var(--accent); }
.ssr-intro h2 {
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--fg-muted);
margin: 40px 0 14px;
display: flex;
align-items: center;
gap: 14px;
}
.ssr-intro h2::before {
content: "";
display: inline-block;
width: 28px;
height: 1px;
background: var(--accent);
}
.ssr-intro p {
font-size: 17px;
line-height: 1.6;
margin: 0 0 16px;
color: var(--fg-soft);
max-width: 65ch;
}
.ssr-intro p strong { color: var(--fg); font-weight: 600; }
.ssr-intro ul {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--border);
}
.ssr-intro li {
padding: 14px 0;
border-bottom: 1px solid var(--border);
line-height: 1.55;
color: var(--fg-soft);
}
.ssr-intro li strong { color: var(--fg); font-weight: 600; }
.ssr-intro code {
background: var(--bg-elev);
border: 1px solid var(--border);
padding: 1px 6px;
border-radius: var(--r-sm);
font-size: 13px;
font-family: var(--mono);
color: var(--fg);
}
.ssr-intro noscript p {
margin-top: 20px;
padding: 14px 18px;
border-left: 3px solid var(--accent);
background: var(--accent-soft);
color: var(--fg);
}
.ssr-intro pre {
background: var(--bg-elev);
border: 1px solid var(--border);
padding: 20px;
margin: 12px 0;
overflow-x: auto;
font-family: var(--mono);
font-size: 13.5px;
line-height: 1.7;
color: var(--fg-soft);
}
.ssr-intro pre code {
background: transparent;
border: 0;
padding: 0;
font-size: inherit;
color: inherit;
}
/* ---------- Section heading pattern (used by detail pages) ---------- */
.detail-section { margin: 28px 0; }
.detail-section h2 {
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--fg-muted);
margin: 0 0 14px;
display: flex;
align-items: center;
gap: 14px;
}
.detail-section h2::before {
content: "";
display: inline-block;
width: 28px;
height: 1px;
background: var(--accent);
}
.detail-summary {
font-family: var(--serif);
font-size: clamp(22px, 2.6vw, 30px);
font-style: italic;
line-height: 1.25;
letter-spacing: -0.012em;
margin: 0 0 28px;
color: var(--fg);
max-width: 60ch;
}
/* ---------- Syntax-highlight tokens (used by
blocks) ----------
Bash and JSON code blocks wrap segments in to get
color. Used by the SSR intros and by the dynamic code-block renderer in
mock-docs/src/highlight.js.
Generic / styling lives in per-site CSS (mock-docs/styles.css
for the .codeblock wrapper, shared styles-base for .ssr-intro pre). The
token classes themselves are scoped here so any page that uses them
inherits the palette.
--------------------------------------------------------------------- */
.tok-cmt { color: var(--fg-muted); font-style: italic; } /* comments */
.tok-str { color: var(--warn); } /* strings */
.tok-key { color: var(--accent); } /* JSON keys, CLI flags */
.tok-fn { color: var(--fg); } /* function / command names */
.tok-num { color: var(--warn); } /* numbers, booleans, null */
.tok-tpl { color: var(--accent); font-weight: 500; } /* ${expr} templates */
/* ---------- Copy button ---------- */
.copy-btn {
appearance: none;
background: transparent;
border: 1px solid var(--border-hi);
color: var(--fg-soft);
padding: 5px 11px;
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
transition: color 180ms, border-color 180ms;
line-height: 1.2;
}
.copy-btn:hover { color: var(--accent); border-color: var(--accent); }
.copy-btn.copied { color: var(--accent); border-color: var(--accent); }
/* ---------- Skeleton state ---------- */
.skeleton {
color: var(--fg-subtle);
font-family: var(--mono);
font-size: 14px;
}
/* ---------- Responsive: header + footer collapse on small screens ---------- */
@media (max-width: 920px) {
.header-inner { padding: 18px 24px; }
main { padding: 32px 24px 64px; }
footer.app-footer {
grid-template-columns: 1fr;
gap: 32px;
padding: 56px 24px 64px;
}
}
@media (max-width: 540px) {
.header-inner { padding: 14px 20px; gap: 12px; }
main { padding: 24px 20px 56px; }
footer.app-footer { padding: 48px 20px 56px; }
.brand { font-size: 13px; }
.mode-toggle button { padding: 9px 12px; font-size: 10.5px; }
.theme-toggle button { padding: 7px 10px; font-size: 10px; }
}