/* JetBrains Mono — the code font. docs.json `fonts` has no code slot, so it is loaded here. Inter (headings + body) and the cobalt/flame accents are set in docs.json; this file carries only what Mintlify config cannot express. */ @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap"); /* Brand-Atlas custom properties — single source of truth for measurements that travel across components. • --ba-sidebar-width: the LEFT page rail (Mintlify reserves this much for the sidebar via `#content-area lg:pl-[23.7rem]`). Mirrored by the navbar's logo column so the navbar's middle column lines up with the content body. • --ba-rail-width: the RIGHT page rail — TOC bento width AND the navbar's button-cluster column. */ :root { --ba-sidebar-width: 23.7rem; --ba-rail-width: 16.5rem; } /* No horizontal scrolling anywhere on the site. `clip` (not `hidden`) stops the sideways scroll without breaking Mintlify's sticky sidebar / TOC. */ html, body { overflow-x: clip; } /* Headings: Inter medium. Never bold, never thin, never serif. */ h1, h2, h3, h4, h5, h6 { font-weight: 500 !important; } /* Code / inline-code: JetBrains Mono. */ code, pre, kbd, samp, tt, pre code, [class*="code"] code { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important; } /* Text selection: cobalt in dark (the default), warm flame in light. */ ::selection { background: rgba(65, 100, 254, 0.35); } html:not(.dark):not([data-theme="dark"]) ::selection { background: rgba(254, 177, 97, 0.40); } /* Dividers: a subtle 1px hairline — #1A1C20 in dark, #E7E6E3 in light. */ hr { border-top-width: 1px !important; border-color: #1A1C20 !important; } html:not(.dark):not([data-theme="dark"]) hr { border-color: #E7E6E3 !important; } /* Hide the page footer bar: website/globe icon, divider line, and the "Powered by Mintlify" badge. */ footer { display: none !important; } /* Open App button (top navbar, #topbar-cta-button). Brand ink instead of the accent, no colour/opacity shift on hover, and a gentle press-down nudge. Mintlify paints the fill on a child layer: . */ #topbar-cta-button a > span.absolute { background-color: #0A0B0D !important; /* brand ink */ opacity: 1 !important; /* cancel the group-hover lightening */ border-radius: 10px !important; /* shared radius with the theme toggle */ } /* Hairline outline so the ink button reads against each canvas. */ .dark #topbar-cta-button a > span.absolute { border: 1px solid rgba(247, 246, 245, 0.14) !important; /* faint paper line on dark */ } html:not(.dark):not([data-theme="dark"]) #topbar-cta-button a > span.absolute { border: 1px solid rgba(10, 11, 13, 0.10) !important; /* faint ink line on light */ } /* The press: nudge ~2.5px down on hover, ease back on leave. Colour unchanged. Also lock to the trio height (32px) so Open App / Product / theme toggle share an outer height pixel-for-pixel. */ #topbar-cta-button a { height: 32px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; padding: 0 1rem !important; /* horizontal-only; height owns Y */ transition: transform 0.16s ease !important; } #topbar-cta-button a:hover { transform: translateY(2.5px) !important; } /* Respect reduced-motion preferences: no movement. */ @media (prefers-reduced-motion: reduce) { #topbar-cta-button a { transition: none !important; } #topbar-cta-button a:hover { transform: none !important; } } /* Theme toggle (top navbar, data-component-name="theme-toggle"). The same hairline outline as the Open App button, in BOTH modes — but never a fill: it stays transparent (no black background in light mode). Shares the 10px radius so the two navbar controls match. */ button[data-component-name="theme-toggle"] { /* Lock to the trio height so it lines up with Product and Open App. The 16px sun/moon icon centres via the button's existing flex layout. */ height: 32px !important; width: 32px !important; box-sizing: border-box !important; padding: 0 !important; /* drop p-2 — height owns the size */ border-radius: 10px !important; background: transparent !important; /* no fill in either mode */ } .dark button[data-component-name="theme-toggle"] { border: 1px solid rgba(247, 246, 245, 0.14) !important; /* faint paper line on dark */ color: #9C9C9D !important; /* brand muted paper */ } .dark button[data-component-name="theme-toggle"]:hover { color: #F7F6F5 !important; /* brand paper on hover */ } html:not(.dark):not([data-theme="dark"]) button[data-component-name="theme-toggle"] { border: 1px solid rgba(10, 11, 13, 0.10) !important; /* faint ink line on light */ color: #8C8884 !important; /* brand muted ink */ } html:not(.dark):not([data-theme="dark"]) button[data-component-name="theme-toggle"]:hover { color: #0A0B0D !important; /* brand ink on hover */ } /* The sun/moon SVGs carry Mintlify's text-gray-* classes (which set the inline `color` on the SVG itself, beating the inherited button colour). Pin them to currentColor so they pick up our brand-grey button color. */ button[data-component-name="theme-toggle"] svg { color: inherit !important; } /* Navbar blur (light theme) — keep the frosted-glass effect visible at every scroll position. Mintlify ships `#navbar-transition` with two states it toggles via `data-is-opaque`: at top it's `bg-background-light/60` (60% translucent, blur reads through cleanly); once scrolled it flips to `bg-background-light/95` (95% opaque, effectively wiping the blur in light mode). Override the scrolled state to match the unscrolled 60% so the backdrop-blur stays visible all the way down the page. Dark mode is left alone — its scrolled state sits at 75% and the blur reads fine there. */ html:not(.dark):not([data-theme="dark"]) #navbar-transition[data-is-opaque="true"] { background-color: rgb(var(--background-light) / 0.6) !important; } /* Navbar gutter — Mintlify ships the two header rows inside

(the top row that holds the logo + search + CTAs, and the tab row beneath) at px-12 / lg:px-12 (3rem / 48px). Pull both back to 2rem to tighten the gutter. `[class*="px-12"]` catches both the prefixed and unprefixed variants without needing to escape Tailwind's `lg:` colon in the selector. */ header#navbar [class*="px-12"] { padding-left: 2rem !important; padding-right: 2rem !important; } /* Vertically align the navbar button cluster (Product + Open App + theme toggle) with the TOC bento sitting in the right rail below it. Mintlify ships the cluster as `flex-1` (absorbs all leftover navbar space). Force the container to the same width as the TOC (`--ba-rail-width`) so the two share a right-aligned column footprint. Justify stays at flex-end so the buttons cluster tightly at the column's right edge. Hook: the cluster div carries `ml-auto.justify-end.space-x-4` — a unique class combination in the navbar. */ header#navbar div.ml-auto.justify-end.space-x-4 { flex: 0 0 var(--ba-rail-width) !important; /* override Mintlify's flex-1 */ width: var(--ba-rail-width) !important; justify-content: flex-end !important; } /* Trio gap — uniform 0.5rem between Product / Open App / theme toggle. Mintlify ships two `space-x-*` rules that govern the visual gaps: • space-x-4 on the cluster → between the