Skip to main content
Restyle "Example:" as a small uppercase EXAMPLE tag and give the
whole row a discrete bg + radius so it reads as a compact example
panel (instead of inline floating text). */
.primitive-param-field .flex.prose.prose-sm[class*="mt-6"] {
display: flex !important;
align-items: baseline !important;
flex-wrap: wrap;
gap: 8px !important;
margin-top: 0.5rem !important;
padding: 6px 10px !important;
border-radius: 6px;
font-size: 12px !important;
}
html:not(.dark) .primitive-param-field .flex.prose.prose-sm[class*="mt-6"] {
background-color: rgba(15, 23, 42, 0.04);
}
html.dark .primitive-param-field .flex.prose.prose-sm[class*="mt-6"] {
background-color: rgba(255, 255, 255, 0.04);
}
/* The "Example:" label — small uppercase tag */
.primitive-param-field .flex.prose.prose-sm[class*="mt-6"] > span:first-child {
font-size: 10px !important;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
flex-shrink: 0;
position: relative;
top: -1px;
}
html:not(.dark) .primitive-param-field .flex.prose.prose-sm[class*="mt-6"] > span:first-child {
color: rgb(100, 116, 139); /* slate-500 */
}
html.dark .primitive-param-field .flex.prose.prose-sm[class*="mt-6"] > span:first-child {
color: rgb(148, 163, 184); /* slate-400 */
}
/* Hide the literal ":" after "Example" — replace with uppercase styling.
The span text is "Example:" so we can't easily remove the colon, just
leave it — readers will tolerate "EXAMPLE:". */
/* Inline example value (the prose-sm wrapper that holds either a code chip
or a pre/code Shiki block). Tighten padding, allow it to grow on its own
line when content is multi-line. */
.primitive-param-field .flex.prose.prose-sm[class*="mt-6"] > div[class*="prose-sm"] {
margin: 0 !important;
flex: 1 1 0 !important;
min-width: 0;
}
/* Single-value example code chip (e.g. "2026-05-15T00:35:15Z"). */
.primitive-param-field .flex.prose.prose-sm[class*="mt-6"] code {
font-size: 11.5px !important;
background-color: rgba(15, 23, 42, 0.06);
color: rgb(15, 23, 42);
padding: 1px 6px;
border-radius: 4px;
font-weight: 500;
}
html.dark .primitive-param-field .flex.prose.prose-sm[class*="mt-6"] code {
background-color: rgba(255, 255, 255, 0.10);
color: rgb(241, 245, 249);
}
/* Multi-line Shiki example block (e.g. JSON object example) — make the
code block sit on a transparent bg (parent already has tinted bg) and
tighten its padding so the box doesn't dominate the row. */
.primitive-param-field .flex.prose.prose-sm[class*="mt-6"] pre.shiki {
margin: 4px 0 0 !important;
padding: 8px 10px !important;
font-size: 11.5px !important;
line-height: 1.55 !important;
border-radius: 6px !important;
box-shadow: none !important;
border: 0 !important;
}
/* ── AVAILABLE OPTIONS — render each enum value as a teal chip. */
.primitive-param-field .whitespace-pre-wrap.prose-sm.mt-6 {
margin-top: 0.5rem !important;
font-size: 12px !important;
opacity: 1;
}
.primitive-param-field .whitespace-pre-wrap.prose-sm.mt-6 code {
background-color: rgba(13, 148, 136, 0.10) !important;
color: rgb(13, 148, 136) !important;
padding: 2px 7px !important;
border-radius: 4px !important;
font-size: 11px !important;
font-weight: 500;
margin: 0 2px;
border: 0;
}
html.dark .primitive-param-field .whitespace-pre-wrap.prose-sm.mt-6 code {
background-color: rgba(94, 234, 212, 0.13) !important;
color: rgb(94, 234, 212) !important;
}
/* Required-range / constraint lines — same metadata treatment, no code chip. */
.primitive-param-field [class*="prose-sm"][class*="mt-6"]:not(.whitespace-pre-wrap) {
font-size: 12px !important;
opacity: 0.85;
}
/* ── EXPANDABLE "Show child attributes" — open state nests an
indented container with deeper bg opacity (TMDB-style).
No left rail; the deeper bg + indentation carry the depth cue. */
details.expandable {
margin: 8px 8px !important;
border-radius: 8px !important;
overflow: hidden;
}
details.expandable > summary {
font-weight: 500 !important;
font-size: 12.5px !important;
letter-spacing: -0.005em;
border-radius: 8px;
padding: 7px 12px !important;
transition: background-color 0.12s ease, color 0.12s ease;
}
html:not(.dark) details.expandable > summary {
background-color: rgba(15, 23, 42, 0.045);
color: rgb(71, 85, 105) !important;
}
html:not(.dark) details.expandable > summary:hover {
background-color: rgba(59, 130, 246, 0.10);
color: rgb(37, 99, 235) !important;
}
html.dark details.expandable > summary {
background-color: rgba(255, 255, 255, 0.05);
color: rgb(214, 211, 209) !important;
}
html.dark details.expandable > summary:hover {
background-color: rgba(125, 174, 255, 0.13);
color: rgb(147, 197, 253) !important;
}
/* Open state: summary becomes the header of the nested well. */
details.expandable[open] > summary {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
html:not(.dark) details.expandable[open] > summary {
background-color: rgba(15, 23, 42, 0.08);
color: rgb(30, 41, 59) !important;
}
html.dark details.expandable[open] > summary {
background-color: rgba(0, 0, 0, 0.30);
color: rgb(241, 245, 249) !important;
}
/* ── NESTED WELL — same uniform white@5% / slate@5% as every other
block. Because it sits inside .object-param-field which sits inside
.api-section, the opacity STACKS automatically:
section @ 5% + schema @ 5% + well @ 5% = ~14% effective
Deeper nesting compounds further. One opacity rule paints every depth. */
html:not(.dark) details.expandable[open] > .expandable-content {
background-color: rgba(15, 23, 42, 0.05) !important;
padding: 4px 12px 10px !important; /* horizontal indent for nested */
margin: 0 !important;
border: 0 !important;
border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
html.dark details.expandable[open] > .expandable-content {
background-color: rgba(255, 255, 255, 0.05) !important;
padding: 4px 12px 10px !important; /* horizontal indent for nested */
margin: 0 !important;
border: 0 !important;
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
/* Nested .primitive-param-field rows inside the well — flat rows (no card),
hairline separators between them, same row hover style. */
details.expandable[open] > .expandable-content .primitive-param-field {
background: transparent !important;
border-radius: 0 !important;
padding: 0 !important;
}
html:not(.dark) details.expandable[open] > .expandable-content .primitive-param-field {
box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.08);
}
html.dark details.expandable[open] > .expandable-content .primitive-param-field {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* First nested row inside a well — no top hairline (the summary header
already provides the visual separation). */
details.expandable[open] > .expandable-content > .primitive-param-field:first-child,
details.expandable[open] > .expandable-content > div:first-child > .primitive-param-field:first-child {
box-shadow: none !important;
}
/* Nested expandable INSIDE another expandable — keep the indentation but
the bg stacking already creates the depth cue automatically. */
details.expandable[open] > .expandable-content details.expandable {
margin: 6px 14px !important;
}
/* ─────────────────────────────────────────────────────────────────────────
15. API Reference — right-column cURL / response panel (readability)
Right panel stacks 3 cards (cURL, params-warning banner, response). Each
card has a header strip (.rounded-t-2xl) that hosts the example-slot
dropdown. Defaults that hurt readability:
• header strip blends into the card body — no separator
• dropdown trigger button uses text-xs / font-normal — easy to miss
• the active slot (the example a user selected from the dropdown) has
no visual distinction from the inactive section title above it
• response code panel uses leading-6 / py-3.5 — JSON dense and cramped
Scoped to #content-side-layout so we don't touch other code blocks.
───────────────────────────────────────────────────────────────────────── */
/* Card header — add a hairline bottom separator so it reads as a discrete
bar above the code body. */
#content-side-layout .rounded-2xl > .rounded-t-2xl {
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
html.dark #content-side-layout .rounded-2xl > .rounded-t-2xl {
border-bottom-color: rgba(255, 255, 255, 0.06);
}
/* Dropdown trigger buttons (the slot picker — "cURL" / "JavaScript" / the
response example title). Bump weight + nudge color so they read as
interactive controls. */
#content-side-layout .rounded-t-2xl button > div {
font-weight: 500;
}
#content-side-layout .rounded-t-2xl button:hover > div {
color: rgb(17, 24, 39);
}
html.dark #content-side-layout .rounded-t-2xl button:hover > div {
color: rgb(244, 246, 250);
}
/* Response / cURL code body — give JSON some breathing room.
Mintlify's default py-3.5 (14px) leaves the first line glued to the
header separator; bump to 16px and improve leading. */
#content-side-layout .rounded-2xl > .flex.flex-1.overflow-hidden
.w-0.min-w-full.py-3\.5 {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
/* Shiki line-height inside the right panel — 24px on 14px text is loose;
22px reads tighter and shows more JSON without scrolling. */
#content-side-layout .shiki,
#content-side-layout .shiki code {
line-height: 1.55 !important;
}
/* Soft right-panel surface in light mode — was nearly white-on-white against
the gradient page background. */
html:not(.dark) #content-side-layout > div > .rounded-2xl {
background-color: rgb(249, 250, 251) !important;
border-color: rgba(15, 23, 42, 0.08) !important;
}
/* Make the focused-example title (after a user picks from the dropdown) feel
anchored. Mintlify keeps the trigger button text the same color whether
it's the only option or the currently-selected one — give it a brand tint
so the user knows what they're looking at. */
#content-side-layout .rounded-t-2xl button[aria-haspopup] > div > span {
color: rgb(59, 130, 246);
}
html.dark #content-side-layout .rounded-t-2xl button[aria-haspopup] > div > span {
color: rgb(125, 174, 255);
}
/* ─────────────────────────────────────────────────────────────────────────
/search/id deprecation banner (injected by scripts.js)
─────────────────────────────────────────────────────────────────────────
Visual styling for `#simkl-search-id-deprecation-banner`. Lives here
(not as Tailwind utility classes in the JS string) because Mintlify's
build-time Tailwind purge strips utility classes that don't appear in
source files — runtime-injected `dark:bg-zinc-900` etc. get dropped.
Design intent:
- One visual unit (single rounded card, NO 1px lines anywhere).
- Header strip identifies it as a deprecation notice + CTA.
- Body uses two scannable steps with monospace endpoints instead of
a wall of prose.
- Color hierarchy: amber for the warning frame, neutral surface for
the body so the eye lands on the migration steps.
───────────────────────────────────────────────────────────────────── */
#simkl-search-id-deprecation-banner.simkl-banner-card {
border-radius: 12px;
overflow: hidden;
font-size: 13px;
line-height: 1.55;
background-color: rgb(255 251 235);
border: 2px solid rgb(217 119 6); /* amber-600 */
}
html.dark #simkl-search-id-deprecation-banner.simkl-banner-card {
background-color: rgb(24 24 27);
border-color: rgb(251 191 36); /* amber-400 */
}
/* Top strip: "Deprecated endpoint" badge on the left + CTA on the right.
No bottom border — spacing alone separates it from the body. */
#simkl-search-id-deprecation-banner .simkl-banner-top {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 16px 4px;
}
#simkl-search-id-deprecation-banner .simkl-banner-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgb(180 83 9);
}
html.dark #simkl-search-id-deprecation-banner .simkl-banner-badge {
color: rgb(252 211 77);
}
#simkl-search-id-deprecation-banner .simkl-banner-badge svg {
color: rgb(217 119 6);
flex-shrink: 0;
}
html.dark #simkl-search-id-deprecation-banner .simkl-banner-badge svg {
color: rgb(251 191 36);
}
#simkl-search-id-deprecation-banner .simkl-banner-cta {
font-size: 12px;
font-weight: 500;
color: rgb(180 83 9);
text-decoration: none;
white-space: nowrap;
}
#simkl-search-id-deprecation-banner .simkl-banner-cta:hover {
text-decoration: underline;
}
html.dark #simkl-search-id-deprecation-banner .simkl-banner-cta {
color: rgb(252 211 77);
}
/* Lede sentence — one short paragraph. */
#simkl-search-id-deprecation-banner .simkl-banner-lede {
margin: 0;
padding: 0 16px 12px;
color: rgb(68 64 60);
}
html.dark #simkl-search-id-deprecation-banner .simkl-banner-lede {
color: rgb(212 212 216);
}
/* Numbered steps — flexbox row each, generous vertical rhythm. */
#simkl-search-id-deprecation-banner .simkl-banner-steps {
list-style: none;
margin: 0;
padding: 0 16px 14px;
display: flex;
flex-direction: column;
gap: 12px;
}
#simkl-search-id-deprecation-banner .simkl-banner-steps li {
display: flex;
gap: 12px;
align-items: flex-start;
}
#simkl-search-id-deprecation-banner .simkl-banner-step-num {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
background-color: rgba(245, 158, 11, 0.15);
color: rgb(146 64 14);
margin-top: 1px;
}
html.dark #simkl-search-id-deprecation-banner .simkl-banner-step-num {
background-color: rgba(251, 191, 36, 0.18);
color: rgb(254 243 199);
}
#simkl-search-id-deprecation-banner .simkl-banner-step-body {
flex: 1;
min-width: 0;
}
#simkl-search-id-deprecation-banner .simkl-banner-step-title {
font-size: 12.5px;
font-weight: 600;
color: rgb(41 37 36);
margin-bottom: 4px;
}
html.dark #simkl-search-id-deprecation-banner .simkl-banner-step-title {
color: rgb(244 244 245);
}
/* Inline code block for the step's URL/endpoints — monospace, dark surface */
#simkl-search-id-deprecation-banner .simkl-banner-step-code {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 6px;
background-color: rgba(0, 0, 0, 0.04);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 12px;
}
html.dark #simkl-search-id-deprecation-banner .simkl-banner-step-code {
background-color: rgba(0, 0, 0, 0.4);
}
#simkl-search-id-deprecation-banner .simkl-banner-step-code span {
color: rgb(87 83 78);
}
html.dark #simkl-search-id-deprecation-banner .simkl-banner-step-code span {
color: rgb(168 162 158);
}
#simkl-search-id-deprecation-banner .simkl-banner-step-sep {
color: rgb(168 162 158) !important;
user-select: none;
}
html.dark #simkl-search-id-deprecation-banner .simkl-banner-step-sep {
color: rgb(82 82 91) !important;
}
#simkl-search-id-deprecation-banner .simkl-banner-step-hint {
font-size: 11.5px;
color: rgb(120 113 108);
margin-top: 4px;
}
html.dark #simkl-search-id-deprecation-banner .simkl-banner-step-hint {
color: rgb(161 161 170);
}
/* Endpoint links — amber, underlined on hover only (cleaner than always-on). */
#simkl-search-id-deprecation-banner .simkl-banner-link {
color: rgb(180 83 9);
text-decoration: none;
font-weight: 500;
}
#simkl-search-id-deprecation-banner .simkl-banner-link:hover {
text-decoration: underline;
text-decoration-color: rgba(217, 119, 6, 0.6);
}
html.dark #simkl-search-id-deprecation-banner .simkl-banner-link {
color: rgb(252 211 77);
}
html.dark #simkl-search-id-deprecation-banner .simkl-banner-link:hover {
text-decoration-color: rgba(252, 211, 77, 0.6);
}
/* Inline
tags (e.g. Location, /search/id) — neutral surface */
#simkl-search-id-deprecation-banner .simkl-banner-code {
padding: 1px 5px;
border-radius: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 11.5px;
background-color: rgba(0, 0, 0, 0.06);
color: rgb(41 37 36);
}
html.dark #simkl-search-id-deprecation-banner .simkl-banner-code {
background-color: rgba(255, 255, 255, 0.08);
color: rgb(228 228 231);
}
/* ============================================================
Warning callout overrides — soften the dark-mode yellow tint
============================================================
Mintlify's uses Tailwind's bg-yellow-600/20 +
border-yellow-900 in dark mode, which renders as a hot
yellow wash that reads "danger" more than "heads up". Tone
it down with a muted olive-tint background and a neutral
semi-transparent white border.
*/
.dark\:bg-yellow-600\/20:is(.dark *) {
background-color: rgb(171 182 63 / 13%);
}
.dark\:border-yellow-900:is(.dark *) {
border-color: rgb(255 255 255 / 20%);
border-width: 2px;
}
/* =========================================================================
16. Mobile (<= 767px) — tighter inner content padding
Section 7 above sets the .flex-1.lg:px-16 content panel to a 2rem (32px)
horizontal padding at every viewport. On phones that burns ~16% of a
390px viewport on each side of the prose column, making lines wrap much
more aggressively than they need to. This media query trims the inner
padding to 1rem on phone-sized viewports only.
Also trims the top padding from the base px-8 (32px) to 1rem so the
first heading sits closer to the breadcrumb above it.
Source-order tiebreak: this rule lives at the very end of the file, so
when the media query matches it wins against section 7's unscoped rule
for the same selector. Desktop and tablet keep section 7's 2rem padding
exactly as before.
Live-verified via in-browser injection at 430px viewport (2026-05-22).
========================================================================= */
@media (max-width: 767px) {
.flex-1.lg\:px-16 {
padding-left: 1rem !important;
padding-right: 1rem !important;
padding-top: 1rem !important;
}
/* Mintlify wraps every prose table in two nested containers:
outer: `[--page-padding:32px] overflow-x-auto flex
w-[calc(100%+(var(--page-padding)*2))]`
inner: `px-[var(--page-padding)] grow max-w-none table`
The outer wrap *intentionally* extends 64px wider than its parent so the
table can bleed into the page padding gutter and use the full width.
That assumption holds on desktop with 64px gutter, but on phones where
section 16 trims the panel padding to 16px, the wrap pushes 32px past
the panel's right edge and causes a horizontal scrollbar on the page
(plus a white scrollbar corner where it meets the vertical scrollbar).
Zero --page-padding on phones so the wrap stays inside the prose width,
and make the inner wrap a block-with-horizontal-scroll so tables wider
than the viewport scroll inside instead of overflowing. */
.prose [class*="page-padding"] {
--page-padding: 0px !important;
}
.prose .grow.max-w-none.table {
display: block !important;
max-width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
}
/* ─────────────────────────────────────────────────────────────────────────
16. Embedded iframes — CodePen demos etc.
Mintlify's MDX renderer strips JSX `style={{}}` props on raw HTML elements
like