/* ───────────────────────────────────────────────────────────────────────── Outcome docs - brand-aligned overrides Light-first, ink-on-paper, square corners, hairline rules. Brand purple is the only chromatic accent. Display headings use PP Neue Corp Narrow; body stays Geist (loaded by Mintlify via fonts.family). ───────────────────────────────────────────────────────────────────────── */ @font-face { font-family: "PP Neue Corp Narrow"; src: url("/fonts/PPNeueCorp-NarrowMedium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "PP Neue Corp Narrow"; src: url("/fonts/PPNeueCorp-NarrowUltrabold.otf") format("opentype"); font-weight: 800; font-style: normal; font-display: swap; } :root { --outcome-ink: #000000; --outcome-paper: #ffffff; --outcome-paper-soft: #f7f7f6; --outcome-paper-tint: #ededed; --outcome-ink-soft: #343330; --outcome-ink-mute: #777777; --outcome-rule-soft: #d4d4d4; /* (background vars set per-mode below — see html:not(.dark) block) */ /* Accent colour. Mode-aware so it stays readable on both paper and near-black backgrounds. Brand purple removed per design call; accents are now neutral off-white in dark mode, near-black in light mode. The variable names stay (kept the same throughout the file for diff minimalism) but the values are off-white shades. */ --outcome-purple: #171717; --outcome-purple-soft: #343330; --outcome-display: "PP Neue Corp Narrow", ui-sans-serif, system-ui, sans-serif; } /* In dark mode, accents flip to off-white shades so they read against the near-black canvas. `--outcome-purple` is the brighter accent (text, icons), `--outcome-purple-soft` is the muted variant (fills, underlines). */ html.dark { --outcome-purple: #f5f5f5; --outcome-purple-soft: #e5e5e5; } /* Light-mode bg-color token: set below the page bg (#f3f3f3 → 243,243,243) so that anything painted with bg-background-light (the navbar/header surface, popovers, etc.) reads a touch darker than the page beneath. Dark mode keeps Mintlify's default — that scheme already gives the header the "slightly darker than page" effect via the page's gridline contrast. */ html:not(.dark) { --background-light: 232 232 232; } /* ─── Display headings - scoped to article body ────────────────────── We only retypeset headings inside

so the nav, sidebar, and chrome keep Mintlify's defaults and don't pick up the condensed display face. Sentence case: brand reserves uppercase for 48px+ posters; docs sit in the "subhead" register. */ main h1, main h2, article h1, article h2 { font-family: var(--outcome-display); font-weight: 800; letter-spacing: -0.012em; line-height: 0.98; } main h3, main h4, article h3, article h4 { font-family: var(--outcome-display); font-weight: 500; letter-spacing: -0.005em; } /* ─── Selection - print-style inversion ───────────────────────────── */ ::selection { background: var(--outcome-ink); color: var(--outcome-paper); } html.dark ::selection { background: var(--outcome-paper); color: var(--outcome-ink); } /* ─── Sidebar selected state ───────────────────────────────────────── Lowered-opacity purple fill on the link container; text stays in the regular nav-item colour (matches inactive items, no purple recolouring, no fake-bold text-shadow). Mintlify marks the active

with data-active="true". */ #navigation-items li[data-active="true"] > a { background-color: rgba(23, 23, 23, 0.13); border-radius: 6px; color: rgb(55, 65, 81) !important; text-shadow: none !important; } html.dark #navigation-items li[data-active="true"] > a { background-color: rgba(245, 245, 245, 0.10); color: rgb(229, 229, 229) !important; } /* ─── Root font-size scaling — desktop 125%, tablet 110%, mobile 100% Bumps the root font-size so every rem-based size (text, padding, spacing, gap, line-height) scales together. Pixel-defined widths (sidebar, content max-width) stay put — that's intentional, since resizing them breaks Mintlify's vw-based centering math. */ @media (min-width: 768px) and (max-width: 1023.98px) { html { font-size: 15.8px; } } @media (min-width: 1024px) { html { font-size: 18px; } } /* ─── Sidebar + TOC: small font-size bump (desktop only) A subtle uptick so the side rails don't feel undersized next to the bumped root font-size. */ @media (min-width: 1024px) { #sidebar-content, #table-of-contents-layout { font-size: 1.0625em; } } /* ─── Align tops of the three columns (mint theme) + extra breathing room Shift all three columns down so there's clear space between the tabs row and the first sidebar label. The 8rem value compensates for the 32px gradient fade we delete elsewhere — that fade used to provide the buffer below the navbar; without it, content sits flush. */ @media (min-width: 1024px) { div:has(> #content-side-layout) { padding-top: 1.5rem !important; } #sidebar { top: calc(8rem + var(--banner-height, 2.5rem)) !important; } #content-side-layout { top: calc(8rem + var(--banner-height, 2.5rem)) !important; } } /* ─── Shrink the navbar top row (logo + search + CTA) ─────────────── Mintlify ships `h-12` (3rem). Drop to 2.5rem so the chrome takes less vertical space. */ @media (min-width: 1024px) { #navbar .h-12 { height: 2.5rem !important; } } /* ─── Page header: move copy button onto the eyebrow (breadcrumb) row, shrink it, drop the word "page" so it just reads "Copy". */ @media (min-width: 640px) { #header { position: relative; } /* Strip position:relative from the flex div around

so the absolute-positioned context-menu anchors to #header instead. */ #header > div > div:has(> #page-title) { position: static !important; } #page-context-menu { position: absolute !important; top: 0 !important; right: 0 !important; margin: 0 !important; min-width: 0 !important; } #page-context-menu-button { padding: 0.2rem 0.45rem !important; } /* Tighten the inner row's gap and force a small text size */ #page-context-menu-button > div { gap: 0.3rem !important; font-size: 0.7rem !important; } /* Override Tailwind's `size-4` (1rem) and the SVG width/height attributes — selectors with [width] / .size-4 raise specificity past the utility class, !important wins over the HTML attrs. */ #page-context-menu-button svg, #page-context-menu-button svg.size-4, #page-context-menu-button svg[width], #page-context-menu-button svg[height] { width: 0.7rem !important; height: 0.7rem !important; min-width: 0 !important; min-height: 0 !important; } /* Hide the "Copy page" text node and substitute "Copy" via ::before */ #page-context-menu-button span { font-size: 0 !important; line-height: 0 !important; } #page-context-menu-button span::before { content: "Copy"; font-size: 0.7rem !important; line-height: 1 !important; display: inline-block !important; } /* Shrink the chevron (second button) — kill aspect-square, match the left button's vertical padding so heights line up. */ #page-context-menu > button:nth-of-type(2) { padding: 0.2rem 0.45rem !important; aspect-ratio: auto !important; align-self: stretch !important; min-width: 0 !important; } #page-context-menu > button:nth-of-type(2) svg, #page-context-menu > button:nth-of-type(2) svg[width], #page-context-menu > button:nth-of-type(2) svg[height] { width: 0.5rem !important; height: 0.75rem !important; } } /* ─── Dark-mode page background: single image asset. Replaces the previous procedural recipe (charcoal + gridlines + brush turbulence + center fade) with a baked image (`/images/bg.webp`). The image is pinned to the viewport (fixed attachment) and sized to cover the page, so it stays anchored as content scrolls. The base #0a0a0a backstop colour matches the image edge so any letterboxing on very wide viewports stays seamless. */ html.dark #background-color { background-color: #0a0a0a !important; background-image: url("/images/bg.webp") !important; background-size: cover !important; background-repeat: no-repeat !important; background-position: center !important; background-attachment: fixed !important; } /* ─── Light-mode page background: off-white canvas + recessed gridlines. Mirrors the dark-mode recipe — same composition, inverted palette. 1. Off-white base (#f3f3f3 — slightly more gray than pure paper). 2. 64-px square grid (dark hairlines at 6% alpha). 3. Centerward fade hiding the grid in the middle. 4. Asymmetric lower-left blob, same as dark mode. */ html:not(.dark) #background-color { background-color: #f3f3f3 !important; background-image: radial-gradient(ellipse 70% 80% at 50% 50%, #f3f3f3 12%, transparent 92%), radial-gradient(ellipse 45% 38% at 28% 68%, rgba(243, 243, 243, 0.72) 0%, transparent 78%), linear-gradient(to right, rgba(23, 23, 23, 0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(23, 23, 23, 0.06) 1px, transparent 1px) !important; background-size: 100% 100%, 100% 100%, 64px 64px, 64px 64px !important; background-repeat: no-repeat, no-repeat, repeat, repeat !important; background-position: center, center, 0 0, 0 0 !important; background-attachment: fixed, fixed, fixed, fixed !important; } /* ─── Primary button: same scheme as the banner. Dark fill (#171717) + light text (#f5f5f5) in both modes. */ #topbar-cta-button a { background-color: #171717 !important; } #topbar-cta-button a, #topbar-cta-button a span, #topbar-cta-button a * { color: #f5f5f5 !important; } /* Banner — charcoal fill + light-grey text (both modes). */ #banner { background-color: #1a1a1a !important; } #banner, #banner *, #banner a { color: #d4d4d4 !important; } /* ─── Brand purple accents ────────────────────────────────────────── Applied to: the breadcrumb/eyebrow above the page title, the theme-toggle icon in the navbar right side, sidebar group icons, and the TOC heading icon. The H1 page title stays in default text colour. */ /* Breadcrumb eyebrow ("Guides", "Adapters", etc.) above page title: light purple text with a dark-purple underline sitting a touch below the baseline. */ .breadcrumb-item, .breadcrumb-item a, .breadcrumb-item a:hover { color: var(--outcome-purple-soft) !important; text-decoration: underline !important; text-decoration-color: var(--outcome-purple) !important; text-decoration-thickness: 1px !important; text-underline-offset: 4px !important; } /* Theme toggle (sun/moon) icon in the top-right of the navbar */ [data-component-name="theme-toggle"] svg { color: var(--outcome-purple) !important; stroke: var(--outcome-purple) !important; } /* Sidebar group icons use a CSS-mask trick with `bg-current` — override the background colour to brand purple. */ .sidebar-group-icon { background-color: var(--outcome-purple) !important; } /* TOC heading icon (the small list icon next to "On this page") */ #table-of-contents-layout > button svg, #table-of-contents-layout button svg[class*="h-3"] { color: var(--outcome-purple) !important; stroke: var(--outcome-purple) !important; } /* Active tab underline (mint theme uses bg-primary on a child div). Forces brand purple regardless of theme primary mapping. */ .nav-tabs-item[data-active="true"] > div { background-color: var(--outcome-purple) !important; } /* Link underlines in body content */ article a, main a, .prose a { text-decoration-color: var(--outcome-purple) !important; } /* ─── Remove the gradient fade overlay beneath the navbar tabs. Mintlify renders a 32px-tall sticky

right under the header with a `from-background-(light|dark)` gradient + backdrop blur. It creates a soft "fog" band the user wants gone. ──────────── */ header#header + div > div.sticky.top-0.h-8.bg-gradient-to-b, div.sticky.top-0.h-8.pointer-events-none.bg-gradient-to-b { display: none !important; } /* ─── Hero diagram frame. Wraps the SDK-architecture animation in a self-contained "panel" whose bg matches the SVG's own canvas color (#fafafa light / #0a0a0a dark — same values used inside the SVG file). The page bg sits a notch darker (#050505 in dark mode, #ffffff in light), so the panel reads as a distinct surface without needing a heavy border. Subtle 1px hairline at low opacity locks the edges. ──── */ .hero-frame { display: block; /* Light panel: off-white base with a dot pattern that mirrors the same dot motif the SVG draws inside its viewBox — so the panel extends the diagram's own texture rather than competing with it. */ background-color: #ededed; background-image: radial-gradient(ellipse 70% 80% at 50% 50%, #ededed 12%, transparent 92%), radial-gradient(ellipse 45% 38% at 28% 68%, rgba(237, 237, 237, 0.72) 0%, transparent 78%), radial-gradient(rgba(23, 23, 23, 0.13) 1.2px, transparent 1.7px); background-size: 100% 100%, 100% 100%, 22px 22px; background-repeat: no-repeat, no-repeat, repeat; background-position: center, center, 0 0; border: 1px solid rgba(23, 23, 23, 0.08); border-radius: 8px; padding: 0; margin: 1.5rem auto 2rem; max-width: 1200px; width: 100%; overflow: hidden; line-height: 0; font-size: 0; } html.dark .hero-frame { background-color: #0a0a0a; background-image: none; border-color: rgba(245, 245, 245, 0.06); } /* Mintlify wraps every in two inline elements (react-medium-image-zoom). Inline wrappers introduce a line-box gap above and below the image. Force them block so .hero-frame's height collapses to the image's natural height — aspect ratio matches. */ .hero-frame span, .hero-frame [data-rmiz], .hero-frame [data-rmiz-content] { display: block !important; line-height: 0 !important; } .hero-frame img { display: block; width: 100%; height: auto; margin: 0; vertical-align: top; } /* ─── Light-mode elevated surfaces — match the animation-panel tone. Mintlify code blocks have 4 nested layers in light mode, all painted white or near-white. Cards use a single bg-white. Bumping everything that should read as "raised surface" to the same #ededed used on the hero-frame so every elevated panel — animation, Cards, CodeBlock, CodeGroup — shares one tone, distinct from page + header. Dark mode is untouched; --shiki-dark-bg stays at the existing #0B0C0E. */ /* Cards (Mintlify = ) */ html:not(.dark) [class*="rounded-2xl"][class*="bg-white"] { background-color: #ededed !important; } /* Shiki

 — inline style="background-color:#ffffff" needs !important */
html:not(.dark) pre.shiki {
  background-color: #ededed !important;
}
/* Mintlify code-block parts: header bar, tab strip, root content surface */
html:not(.dark) [data-component-part="code-block-root"],
html:not(.dark) [data-component-part="code-block-header"],
html:not(.dark) [data-component-part="code-group-tab-bar"] {
  background-color: #ededed !important;
}
/* CodeGroup outer frame (rounded-2xl + bg-gray-50) */
html:not(.dark) div[class*="rounded-2xl"][class*="bg-gray-50"] {
  background-color: #ededed !important;
}
/* Single CodeBlock inner frame inside a CodeGroup (rounded-md + bg-white) */
html:not(.dark) div[class*="rounded-md"][class*="bg-white"] {
  background-color: #ededed !important;
}

/* ─── SDK install CTA panel (top of SDK Reference pages).
   Row of: package name (mono) + outline links (npm, GitHub), then the
   install command code block beneath. The  inside picks up its
   surface color from the existing code-block rules; this wrapper just
   provides a polished container around it with the package name and
   external links surfaced as proper buttons. */
.sdk-install-cta {
  margin: 0.5rem auto 1.5rem;
  max-width: 1200px;
}
.sdk-install-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
  padding: 0 0.125rem;
}
.sdk-install-cta-pkg {
  font-family: ui-monospace, 'SF Mono', 'Geist Mono', Menlo, monospace;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--outcome-purple);
  letter-spacing: -0.005em;
}
.sdk-install-cta-links {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
}
.sdk-install-cta-links a {
  color: var(--outcome-purple);
  text-decoration: none;
  font-weight: 500;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  border: 1px solid rgba(23, 23, 23, 0.12);
  transition: border-color 120ms ease, background-color 120ms ease;
}
html.dark .sdk-install-cta-links a {
  border-color: rgba(245, 245, 245, 0.14);
}
.sdk-install-cta-links a:hover {
  border-color: rgba(23, 23, 23, 0.32);
  background-color: rgba(23, 23, 23, 0.04);
}
html.dark .sdk-install-cta-links a:hover {
  border-color: rgba(245, 245, 245, 0.32);
  background-color: rgba(245, 245, 245, 0.04);
}
.sdk-install-cta-sep {
  color: rgba(23, 23, 23, 0.32);
  user-select: none;
}
html.dark .sdk-install-cta-sep {
  color: rgba(245, 245, 245, 0.32);
}
/* Tighten the code block inside the CTA — kills its default top margin
   so it sits flush under the meta row. */
.sdk-install-cta > div:has(> pre),
.sdk-install-cta > pre {
  margin-top: 0 !important;
}

/* ─── Navbar GitHub link → render as icon (images/github.png) instead
   of the text "GitHub". Target the navbar link whose href points at
   the GitHub repo; hide its text via font-size 0, paint the PNG via
   ::before. Dark-mode inverts the icon's luminance since the source
   PNG is a dark-on-transparent logo. The  wrapper is flexed so
   the icon vertically centers within the navbar row. */
.navbar-link:has(> a[href*="github.com/Outcome-xyz"]) {
  display: flex;
  align-items: center;
  align-self: stretch;
}
.navbar-link a[href*="github.com/Outcome-xyz"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  font-size: 0;
  line-height: 0;
  color: transparent !important;
  opacity: 0.75;
  transition: opacity 120ms ease;
  vertical-align: middle;
}
.navbar-link a[href*="github.com/Outcome-xyz"]:hover {
  opacity: 1;
}
.navbar-link a[href*="github.com/Outcome-xyz"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/images/github.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
html.dark .navbar-link a[href*="github.com/Outcome-xyz"]::before {
  filter: invert(1);
}