above the H1. text-primary
resolves to bright #cdfa50 which is unreadable on light bg. Route
through the darker primary-600 lime per v3 spec.
═══════════════════════════════════════════════════════════════════════ */
.eyebrow,
.eyebrow.text-primary,
[class*="eyebrow"][class*="text-primary"] {
color: var(--primary-600) !important;
}
.dark .eyebrow,
.dark .eyebrow.text-primary,
[data-theme="dark"] .eyebrow {
color: var(--primary-300) !important; /* bright lime stays on dark bg */
}
/* ═══════════════════════════════════════════════════════════════════════
API parameter contrast — Mintlify renders parameter names and metadata
such as "model", "string", and "required" with primary lime classes.
Brand lime is too pale on light backgrounds, so route generated content
accents through darker lime while preserving bright lime in dark mode.
═══════════════════════════════════════════════════════════════════════ */
article .text-primary,
article [class~="text-primary"],
article [class*="text-primary"]:not([class*="dark:"]),
main .text-primary,
main [class~="text-primary"] {
color: var(--primary-700) !important;
}
html:not(.dark) body:not(.dark) :is(main, article) [class*="cdfa50"],
html:not(.dark) body:not(.dark) :is(main, article) [style*="cdfa50" i] {
color: var(--primary-700) !important;
}
article .bg-primary,
article [class~="bg-primary"],
article [class*="bg-primary"]:not([class*="dark:"]),
main .bg-primary,
main [class~="bg-primary"] {
background-color: var(--primary-700) !important;
}
.dark article .text-primary,
.dark article [class~="text-primary"],
[data-theme="dark"] article .text-primary,
[data-theme="dark"] article [class~="text-primary"],
.dark main .text-primary,
[data-theme="dark"] main .text-primary {
color: var(--primary-300) !important;
}
.dark article .bg-primary,
.dark article [class~="bg-primary"],
[data-theme="dark"] article .bg-primary,
[data-theme="dark"] article [class~="bg-primary"],
.dark main .bg-primary,
[data-theme="dark"] main .bg-primary {
background-color: var(--primary-300) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
Layout
═══════════════════════════════════════════════════════════════════════ */
main,
article,
[class*="content"],
[class*="Content"] {
max-width: 100%;
}
/* ═══════════════════════════════════════════════════════════════════════
Type rhythm — display weight 400 large, generous body line-height
═══════════════════════════════════════════════════════════════════════ */
h1 {
font-size: clamp(38px, 5vw, 68px);
line-height: 0.98;
font-weight: 400;
letter-spacing: 0;
margin-bottom: 1rem;
}
h2 {
font-size: clamp(30px, 2.8vw, 46px);
line-height: 1.08;
font-weight: 400;
letter-spacing: 0;
margin-top: 2.5rem;
margin-bottom: 1rem;
}
h3 {
font-size: 24px;
line-height: 1.15;
font-weight: 600;
letter-spacing: 0;
margin-top: 2rem;
margin-bottom: 0.75rem;
}
h4,
h5,
h6 {
font-weight: 600;
letter-spacing: 0;
}
p,
li {
font-size: 15px;
line-height: 1.65;
}
/* Inline code — hairline border, mono, slightly tinted */
:not(pre) > code {
font-family: var(--v3-mono, "SuisseIntlMono", monospace);
font-size: 0.92em;
border: 1px solid var(--base-200);
border-radius: 2px;
padding: 1px 5px;
}
/* ═══════════════════════════════════════════════════════════════════════
Code blocks — single sharp frame, blue-tinted surface
Mintlify nests two boxes (.code-block + .code-block-background); we
collapse them visually by overriding both radii to 0 + overflow hidden.
═══════════════════════════════════════════════════════════════════════ */
pre {
border-radius: 0 !important;
font-family: var(--v3-mono, "SuisseIntlMono", monospace);
font-size: 13px;
line-height: 1.6;
}
.code-block,
div[class~="code-block"],
.code-group,
div[class~="code-group"] {
border-radius: 0 !important;
box-shadow: none !important;
overflow: hidden !important;
}
.code-block-background,
[class*="code-block-background"],
.code-group {
border-radius: 0 !important;
box-shadow: none !important;
background-color: var(--phala-blue-50) !important;
}
.code-block-background,
[class*="code-block-background"] {
border: 0 !important;
}
.dark .code-block-background,
.dark .code-group,
[data-theme="dark"] .code-block-background,
[data-theme="dark"] .code-group {
background-color: var(--surface-trust-card) !important;
}
/* CodeGroup language tab — active state uses --primary-600 (darker lime)
for both label color + underline so it's readable on phala-blue-50 surface */
.code-group [role="tab"][data-state="active"],
.code-group [role="tab"][aria-selected="true"] {
color: var(--primary-600) !important;
}
.code-group [role="tab"][data-state="active"] > div:first-child {
color: var(--primary-600) !important;
}
/* The lime underline beneath the active tab */
.code-group [role="tab"][data-state="active"] > div.absolute,
.code-group [role="tab"][data-state="active"] > div[class*="absolute"][class*="bottom"] {
background-color: var(--primary-600) !important;
border-radius: 0 !important;
}
/* Dark mode keeps brighter lime — primary-300 reads fine on dark surface */
.dark .code-group [role="tab"][data-state="active"],
[data-theme="dark"] .code-group [role="tab"][data-state="active"] {
color: var(--primary-300) !important;
}
.dark .code-group [role="tab"][data-state="active"] > div.absolute,
[data-theme="dark"] .code-group [role="tab"][data-state="active"] > div.absolute {
background-color: var(--primary-300) !important;
}
/* Hide Mintlify's empty fade-overlay sliver — we don't use collapse-fade */
[data-fade-overlay] {
display: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════
Cards — sharp, hairline, NO ring shadow halos
═══════════════════════════════════════════════════════════════════════ */
.card {
border-radius: 0 !important;
box-shadow: none !important;
--tw-ring-shadow: 0 0 #0000 !important;
--tw-ring-offset-shadow: 0 0 #0000 !important;
}
.card:hover {
box-shadow: none !important;
border-color: var(--primary-600) !important; /* darker lime hover border, readable on light bg */
}
/* Card icons — Mintlify uses bg-primary on masked SVGs (mask-image trick).
On light bg, primary-300 lime is too pale. Route icons through primary-600. */
.card svg.bg-primary,
.card svg[class*="bg-primary"]:not([class*="primary-light"]),
.card .text-primary {
background-color: var(--primary-600) !important;
color: var(--primary-600) !important;
}
/* Dark mode keeps the brighter lime — readable on dark surface */
.dark .card svg.bg-primary,
.dark .card svg[class*="bg-primary"],
[data-theme="dark"] .card svg.bg-primary {
background-color: var(--primary-300) !important;
color: var(--primary-300) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
Callouts (Note / Warning / Info / Tip)
Schematic look: sharp corners, single colored left bar, no full border,
foreground body text. Tip uses phala-blue-300 highlight surface.
═══════════════════════════════════════════════════════════════════════ */
.callout {
border-radius: 0 !important;
background-color: var(--card, #ffffff) !important;
border-width: 0 !important;
border-left: 4px solid var(--phala-blue-500) !important;
padding: 1rem 1.25rem !important;
box-shadow: none !important;
}
.callout[data-callout-type="warning"] {
border-left-color: var(--phala-orange-300) !important;
}
.callout[data-callout-type="info"] {
border-left-color: var(--phala-blue-500) !important;
}
.callout[data-callout-type="tip"] {
background-color: var(--phala-blue-300) !important;
border-left-color: var(--phala-blue-500) !important;
}
/* All callouts: foreground body text on tint */
.callout [data-component-part="callout-content"],
.callout [data-component-part="callout-content"] * {
color: var(--base-800) !important;
}
/* Leading
(single-word label) → mono uppercase eyebrow */
.callout [data-component-part="callout-content"] > span:first-child > strong:only-child {
font-family: var(--v3-mono, "SuisseIntlMono", monospace);
font-size: 11px;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
display: block;
margin-bottom: 0.25rem;
color: var(--base-600) !important;
}
/* Mintlify wraps warning body in — undo that */
.callout[data-callout-type="warning"] [data-component-part="callout-content"] strong {
font-weight: 400;
}
/* Tone down callout icons — small, muted */
.callout [data-component-part="callout-icon"] svg {
color: var(--base-600) !important;
opacity: 0.7;
}
/* ═══════════════════════════════════════════════════════════════════════
Navbar primary CTA — v3 token (lime fill + black text)
The CTA lives in 
