.ui-bevel-t { border-top-left-radius: 16px; border-top-right-radius: 16px; corner-shape: bevel; } .ui-winhead h1, .ui-winhead h2, .ui-winhead h3 { font-size: 16px; text-transform: uppercase; font-weight: 800; position: relative; top: -6px; right: 1px; } /* The stone surface: one declaration shared by the box fill and the text fill */ .stone-background, .stone-text { background-image: url("/static/text-background-base-2f62b603.jpg"); background-size: auto; /* Natural 800x400 pixels, never stretched */ background-position: center top; /* Image top aligns with the top of the box */ background-repeat: repeat; } /* Text fill: clips the stone surface to the glyphs */ .stone-text { color: var(--color-grey); /* Fallback: plain text if the image fails or clip is unsupported */ position: relative; /* A clipped background paints beneath earlier inline content (e.g. an overlapping image) unless positioned */ } @supports (background-clip: text) or (-webkit-background-clip: text) { .stone-text { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } } .ui-winhead-text-4xl h1 { font-size: 24px; text-transform: uppercase; font-weight: 800; position: relative; top: -16px; right: 1px; } .ui-bevel { border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; corner-shape: bevel; } .ui-bevel-t { border-top-left-radius: 16px; border-top-right-radius: 16px; corner-shape: bevel; } .ui-bevel-tl { border-top-left-radius: 16px; corner-shape: bevel; } .ui-bevel-tr { border-top-right-radius: 16px; corner-shape: bevel; } .ui-bevel-b { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; corner-shape: bevel; } .ui-bevel-bl { border-bottom-left-radius: 16px; corner-shape: bevel; } .ui-bevel-br { border-bottom-right-radius: 16px; corner-shape: bevel; } /* Buttons. .ui-btn is the site's one button: it closes a multi-input form or guards something grave (locking a timeline). Typography, background and shape are pinned explicitly (not inherited) so it looks the same wherever it lands. */ .ui-btn { cursor: pointer; color: var(--color-link); background-color: transparent; font-size: 1rem; font-weight: 400; line-height: 1.5; border-width: 2px; border-style: solid; border-color: var(--color-link); border-top-left-radius: 0; border-top-right-radius: 16px; border-bottom-right-radius: 0; border-bottom-left-radius: 16px; corner-shape: bevel; padding: 8px 16px; margin: 0; transition-duration: 150ms; position: relative; } .ui-btn:hover { color: var(--color-link-hover); border-color: var(--color-link-hover); } .ui-btn:active { transform: translate(2px, 2px); } /* Scalar API reference: every button — Show More, Test Request, Send, Copy as Markdown, Download, the sidebar Search / Ask AI, Open API Client, the ghost menus, tabs and disclosure rows — is a plain text link in the site's terms: white, grey on hover, no border, no fill, no wash, regular weight (@origin, 2026-09-24: the bevel button is reserved for the end of a form or a grave action; nothing in the explorer is either). Selectors are Scalar's own class names under `body.dark-mode .scalar-app` (the page forces dark mode; the class lands on ), which out-ranks Scalar's scoped .x[data-v-…] rules and its `.scalar-app .utility` classes regardless of load order; re-verify them on a Scalar upgrade. Everything inside a button takes the button's color: Scalar paints icons and label spans with their own tokens, and the site's base rule would otherwise paint a

inside a disclosure row body-grey. */ body.dark-mode .scalar-app button, body.dark-mode .scalar-app a.open-api-client-button, body.dark-mode .scalar-app form.agent-button-container { color: var(--color-link); background-color: transparent; border-color: transparent; box-shadow: none; font-weight: 400; } body.dark-mode .scalar-app button:hover, body.dark-mode .scalar-app a.open-api-client-button:hover, body.dark-mode .scalar-app form.agent-button-container:hover { color: var(--color-link-hover); background-color: transparent; border-color: transparent; } body.dark-mode .scalar-app button *, body.dark-mode .scalar-app a.open-api-client-button *, body.dark-mode .scalar-app form.agent-button-container * { color: inherit; } /* The Ask AI Agent send arrow is a blue square in Scalar's theme. */ body.dark-mode .scalar-app button.ask-agent-scalar-send { background: transparent; } /* A collapsed tag section (the ones ending in "Show More") gets a half-strength wash of Scalar's second surface color — a not-quite-black band between the black sidebar and footer. The page is black. */ body.dark-mode .scalar-app .section-container.tag-section-collapsed { background-color: transparent; } /* Two absolutes for the explorer (@origin, 2026-09-24): nothing is rounded, and no line is a fraction of a pixel. Scalar's radius tokens are zeroed in the page's customCss; this squares the Tailwind rounded-* utilities and pseudo-elements it also uses, plus the rounded rects in its SVG icons. !important is deliberate here and only here: the rule is unconditional and the stylesheet it overrides is a third party's, whose selectors reach specificities we would otherwise have to chase one by one. */ body.dark-mode .scalar-app, body.dark-mode .scalar-app *, body.dark-mode .scalar-app *::before, body.dark-mode .scalar-app *::after { border-radius: 0 !important; } body.dark-mode .scalar-app svg rect { rx: 0; ry: 0; } /* Fractional line weights, rounded up to whole pixels: the play icon's ring (1.5px / 1.75px), the checkmark strokes on task-list and card checkboxes (1.5px), the failed-request ring and the send-checkbox halo (1.5px), and the icon rects drawn with fractional SVG strokes. */ body.dark-mode .scalar-app .playIcon::before { border-width: 2px; } body.dark-mode .scalar-app .markdown li.task-list-item > input[type=checkbox]::before, body.dark-mode .scalar-app .scalar-card-checkbox .scalar-card-checkbox-checkmark::after { border-width: 0 2px 2px 0; } body.dark-mode .scalar-app .requestFailedIcon { box-shadow: inset 0 0 0 2px; } body.dark-mode .scalar-app .sendCheckboxContinue:has(input) { box-shadow: 0 0 0 2px var(--scalar-background-3); } body.dark-mode .scalar-app svg [stroke-width="1.5"], body.dark-mode .scalar-app svg [stroke-width="1.75"] { stroke-width: 2; } body.dark-mode .scalar-app svg [stroke-width=".7"] { stroke-width: 1; } /* Section headings. Scalar sets h1, h2 and h3 alike to 24px/600; the site's headings are weight 800 and step down in size (the docs: 32/24/20). The document title (the one h1, "BaseCradle API") is the page heading size. */ body.dark-mode .scalar-app .section-header-label { font-weight: 800; } body.dark-mode .scalar-app h1.section-header-label { font-size: 36px; } body.dark-mode .scalar-app h3.section-header-label { font-size: 20px; } /* The sidebar's Search link carries a boxed "⌘ K" hint. With Search rendered as a text link the box is the only chip left in the sidebar; hide it — the shortcut still works, this only drops the advertisement. */ body.dark-mode .scalar-app .t-doc__sidebar button span:has(> kbd) { display: none; } /* The API client's address bar mixes Scalar's first two surfaces into a third shade. Two surfaces on this site: it sits on Dark Grey like every card. */ body.dark-mode .scalar-app .address-bar-bg-states { background: var(--color-dark-grey); } /* The API client's backdrop: Scalar dims the page behind its modal by 45% and lets it show through. Nothing shows through here — the backdrop is solid black (@origin, 2026-09-24). */ body.dark-mode .scalar.scalar-app .scalar-app-exit { background: var(--color-black); } /* A disabled button is not clickable (Scalar renders some card headers, e.g. "Authentication", as disabled disclosure buttons): body text, no hover. */ body.dark-mode .scalar-app button:disabled, body.dark-mode .scalar-app button:disabled:hover { color: var(--color-body); cursor: default; } /* Card checkbox toggles ("Show Schema") are clickable: link colors. */ body.dark-mode .scalar-app label.scalar-card-checkbox { color: var(--color-link); } body.dark-mode .scalar-app label.scalar-card-checkbox:hover { color: var(--color-link-hover); } /* Schema property rows that expand (Scalar marks the clickable heading with cursor-pointer; a leaf property's heading has no cursor) are links: the property name is white, grey while the row is hovered. Type, "required" and the collapsed preview stay descriptive text. */ body.dark-mode .scalar-app .property-heading.cursor-pointer .property-name { color: var(--color-link); } body.dark-mode .scalar-app .property-heading.cursor-pointer:hover .property-name { color: var(--color-link-hover); } /* Operations-card endpoint rows (DELETE /session …) are links: the path is white, grey on hover, no underline — the method label keeps Scalar's per-method color. */ body.dark-mode .scalar-app a.endpoint .endpoint-path { color: var(--color-link); text-decoration: none; } body.dark-mode .scalar-app a.endpoint:hover .endpoint-path, body.dark-mode .scalar-app a.endpoint:focus-visible .endpoint-path { color: var(--color-link-hover); text-decoration: none; } /* Client-library tabs: the selected tab is marked by its underline alone — Scalar also paints it in the body-text color and semibold, and washes the others with a ::before panel on hover. */ body.dark-mode .scalar-app button.client-libraries__active .client-libraries-text { color: inherit; font-weight: 400; } body.dark-mode .scalar-app button.client-libraries:not(.client-libraries__active):hover::before { content: none; } /* Every tree glyph (the plus/minus on response rows, parameters and nested schema properties) is a Phosphor "light" icon — a 12-unit stroke on a 256-unit grid, 0.75px at 16px, which reads as a grey hairline even in white. Stroking the filled path in its own color adds 6 units per side, matching the "bold" weight Scalar uses for its chevrons. */ body.dark-mode .scalar-app .schema-glyph svg path { stroke: currentColor; stroke-width: 12; stroke-linejoin: round; } .ui-btn-red { cursor: pointer; color: var(--color-alert); border-width: 2px; border-color: var(--color-alert); border-top-right-radius: 16px; border-bottom-left-radius: 16px; corner-shape: bevel; padding: 8px 16px; margin: 0; transition-duration: 150ms; position: relative; } .ui-btn-red:hover { color: var(--color-black); border-color: var(--color-alert); background-color: var(--color-alert); } .ui-btn-red:active { transform: translate(2px, 2px); } .link-red { color: var(--color-alert); } .link-red:hover { color: var(--color-grey); } /* Code blocks — override Rouge's github.dark panel with the palette: panel token for the background, code token (yellow) for the base text. Rouge's base text is #c9d1d9, a near-white that reads as a link on this site; the override paints everything Rouge leaves untokenized (a plain-text payload, the webhook headers block, punctuation and bare names inside a highlighted block) the same yellow as a ``` fence, while tokens Rouge does color keep their github.dark colors. Mirrors Rouge's compound selector so whitespace spans (.w) inherit the same bg — without this, tab characters render with the original navy. */ .highlight, .highlight .w { background-color: var(--color-panel); color: var(--color-code); } /* The five github.dark token classes Rouge paints near-white (#c9d1d9 or #f0f6fc): string interpolation (.si), HTML entities (.ni), markdown emphasis (.ge) and strong (.gs), and error output lines (.gr). White is the control color and nothing in a code block is clickable, so they take the code color like the untokenized text around them; .ge and .gs keep Rouge's italic and bold. */ .highlight .si, .highlight .ni, .highlight .ge, .highlight .gs, .highlight .gr { color: var(--color-code); } /* Inline code — any NOT inside a

 (a backtick span in prose):
   ONE rule for the docs, message bodies and the Scalar API reference. Yellow
   on the code panel, 2px above and below and 6px either side, no border, square. The Scalar
   consumer selector out-ranks its own `.scalar-app .markdown code` chip
   (which adds a box-shadow border and rounded corners — reset here); it is
   not scoped to .markdown because a tooltip's  is the .markdown
   element's own child, which `.markdown :not(pre) > code` cannot match. */
:not(pre) > code,
body.dark-mode .scalar-app :not(pre) > code {
	background-color: var(--color-code-inline-background);
	color: var(--color-code-inline);
	margin: 0 2px;
	padding: 2px 6px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-size: 14px;
}

/* HTTP methods inside  — marked up by HttpMethodsHelper — take the
   Scalar color family, so `GET /users` reads the same in the docs, a message
   or a webhook payload as it does in the API reference. `code .x[data]` so it
   also wins inside a Rouge token span (`.highlight .no`). */
code .http-method[data-method="get"] { color: var(--color-method-get); }
code .http-method[data-method="post"] { color: var(--color-method-post); }
code .http-method[data-method="put"] { color: var(--color-method-put); }
code .http-method[data-method="patch"] { color: var(--color-method-patch); }
code .http-method[data-method="delete"] { color: var(--color-method-delete); }
code .http-method[data-method="options"] { color: var(--color-method-options); }
code .http-method[data-method="head"] { color: var(--color-method-head); }
code .http-method[data-method="trace"] { color: var(--color-method-trace); }

/* Rendered markdown tables scroll in place, like a  block. A 
   cannot scroll itself, so a wide one would overflow its card or column and
   push the whole page wide; ScrollableTablesHelper wraps every rendered table
   in this div (the docs, message bodies and .md asset previews alike). The
   block margin sits on the wrapper, not the table, so the scrollbar hugs the
   table's bottom edge. */
.table-scroll {
	overflow-x: auto;
}

/* Docs tables — Tailwind preflight strips all default table styling. Scoped to
   .doc-content so app-internal tables (timeline lists, etc.) aren't affected. */
.doc-content .table-scroll {
	margin-bottom: 32px;
}

.doc-content table {
	border-collapse: collapse;
}

.doc-content th,
.doc-content td {
	padding: 8px 16px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--color-grey);
}

.doc-content th {
	color: var(--color-grey);
}

div.highlight {
	font-size: 14px; /* code is 14px everywhere, block or inline */
	margin-bottom: 16px;
	padding: 16px;
	overflow-x: auto;
}

/* Plain-text code blocks (```text fences, or any fence Rouge has no lexer for) —
   Kramdown emits these as bare  with NO div.highlight wrapper, so
   none of the panel styling above applies and the text renders invisible
   (default black on the black page). Give them the same panel treatment as
   highlighted blocks: panel grey, Rouge github.dark default text color, same
   spacing. Scoped to :not(.highlight) so Rouge-wrapped    blocks don't get double padding. */
.doc-content pre:not(.highlight) {
	background-color: var(--color-panel);
	color: var(--color-code);
	font-size: 14px;
	margin-bottom: 16px;
	padding: 16px;
	overflow-x: auto;
}

.doc-content h1,
.doc-content h2,
.doc-content h3,
.doc-content h4,
.doc-content h5,
.doc-content h6 {
	font-weight: 800;
	margin-bottom: 16px;
	margin-top: 48px;
}

.doc-content h1 {
	font-size: 32px;
	margin-top: 16px;
}

.doc-content h2 {
	font-size: 24px;
	border-bottom: 2px solid var(--color-grey);
}

.doc-content h3 {
	font-size: 20px;
}

.doc-content h4,
.doc-content h5,
.doc-content h6 {
	font-size: 16px;
}

/* Blockquotes — Tailwind preflight zeroes the default left margin, leaving the
   element visually indistinguishable from a paragraph. Left bar + interior
   padding gives the standard "quoted block" treatment. */
.doc-content blockquote {
	border-left: 4px solid var(--color-grey);
	padding: 8px 16px;
	margin-bottom: 32px;
}

/* Horizontal rule — Tailwind preflight sets border-top-width: 1px but with
   color: inherit, which resolves to ~black on this page and is invisible.
   Pin an explicit visible border-top in palette Grey. */
.doc-content hr {
	border: 0;
	border-top: 1px solid var(--color-grey);
	margin: 32px 0;
}

/* Message bodies — chat-flavored markdown, rendered TIGHT (not document-sized
   like .doc-content). Tailwind preflight zeroes list/heading/quote margins, so
   we set them explicitly. Text color is inherited from the container, so a
   plain-text message looks exactly as before; only real markdown formats. */
.message-body > :first-child { margin-top: 0; }
.message-body > :last-child { margin-bottom: 0; }

.message-body p { margin-bottom: 8px; }

.message-body ul,
.message-body ol { margin-bottom: 8px; padding-left: 24px; }
.message-body ul { list-style: disc; }
.message-body ol { list-style: decimal; }
.message-body li { margin-bottom: 2px; }
.message-body li > ul,
.message-body li > ol { margin-bottom: 0; margin-top: 2px; }

.message-body h1,
.message-body h2,
.message-body h3,
.message-body h4,
.message-body h5,
.message-body h6 { font-weight: 800; margin: 12px 0 6px; line-height: 1.2; }
.message-body h1 { font-size: 20px; }
.message-body h2 { font-size: 18px; }
.message-body h3 { font-size: 16px; }
.message-body h4,
.message-body h5,
.message-body h6 { font-size: 15px; }

.message-body strong,
.message-body b { font-weight: 800; }

.message-body a { text-decoration: underline; }

.message-body pre {
	background-color: var(--color-panel);
	color: var(--color-code);
	font-size: 14px;
	margin-bottom: 8px;
	padding: 12px;
	overflow-x: auto;
}
.message-body pre code { background: none; padding: 0; }

.message-body blockquote {
	border-left: 4px solid var(--color-grey);
	padding: 4px 12px;
	margin-bottom: 8px;
}

.message-body hr {
	border: 0;
	border-top: 1px solid var(--color-grey);
	margin: 12px 0;
}

.message-body .table-scroll { margin-bottom: 8px; }
.message-body table { border-collapse: collapse; }
.message-body th,
.message-body td {
	padding: 4px 10px;
	text-align: left;
	vertical-align: top;
	border: 1px solid var(--color-grey);
}
.message-body th { font-weight: 700; }