html { scroll-behavior: smooth; } /* Top bar layout: the logo occupies the sidebar-width slot on the left, the tab strip aligns to the left edge of the main content area, and the CTA/login/signup buttons stay pinned to the right. (Almond right-aligns the tab container by default, and its logo wrapper is flex-1 which pushes the tabs rightward.) */ /* Logo wrapper takes a fixed slot so the tab strip clears the sidebar and gets an extra left margin. 256px = 228px (aligns the first tab to the content edge) + 28px (px-7, matching the navbar's own horizontal padding). */ #navbar div:has(> a img.nav-logo) { flex: 0 0 256px !important; } /* The block holding the tab strip + nav links grows to fill the rest of the row. */ #navbar div:has(> div > div > .nav-tabs) { flex: 1 1 auto !important; } /* The tab container holds exactly two children: the tab strip and the nav-links

(Request demo / Login / Sign Up). Space them apart so the tabs sit against the content's left edge and the buttons group is pinned to the right. */ #navbar div:has(> div > .nav-tabs) { margin-left: 0 !important; /* undo Tailwind ml-auto */ justify-content: space-between !important; /* tabs left, buttons right */ } /* Cap the content column at a readable width and center it in the page layout. Wide mode sets #content-area to max-w-full (fills the whole region); this pulls it back to a comfortable, fixed measure centered in the space to the right of the sidebar. */ #content-area { max-width: 50rem !important; margin-left: auto !important; margin-right: auto !important; } /* === Brand-tinted pixel-dither glow on the main content panel === Replaces Mintlify's full-page `background.decoration`. #content-container is almond's main content layout — the rounded-corner panel that holds the article and TOC, and it is also the scroll container for the content. A violet wash holds solid across the top of the panel, then dissolves downward through a pixel screen into the flat page surface — the whole thing gone by 420px, with the dissolve reading through the middle third. Deliberately faint. It was twice this strength and ran 520px, which put a visible tint behind the first two paragraphs of every page; at half the alpha and a fade that ends above the first `##`, the texture still reads as a surface without competing with body copy. Turning it back up is a regression, not a fix. The mask does the work: three layers composited with `intersect`. Two crossed line-grids leave opaque 3px squares on a 4px pitch wherever they overlap — the pixel screen — and a vertical alpha ramp fades that grid out. Masking beats an eraser pattern painted in the panel colour here; nothing has to know what that colour is. The violet is #8B5CF6 (Tailwind violet-500), deliberately one step lighter than the `colors.primary` #7C3AED in docs.json — this is decoration behind body text, not a UI accent, and the lighter tone carries the dither better. Don't "fix" it back to the primary. The layer is absolutely positioned inside the scroll container, so it scrolls up and away with the content the way `background-attachment: local` did. `isolation: isolate` gives the panel its own stacking context so `z-index: -1` lands above the panel's background but behind the article. The panel's border-radius plus its scroll overflow clip the layer, so the top corners stay rounded. */ #content-container { position: relative; isolation: isolate; } #content-container::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 420px; z-index: -1; pointer-events: none; background-image: radial-gradient( 140% 100% at 50% 20%, rgba(139, 92, 246, 0.06), rgba(139, 92, 246, 0.015) ); -webkit-mask-image: repeating-linear-gradient(to right, #000 0 3px, transparent 3px 4px), repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 4px), linear-gradient( to bottom, #000 0, #000 112px, rgba(0, 0, 0, 0.70) 176px, rgba(0, 0, 0, 0.45) 240px, rgba(0, 0, 0, 0.26) 300px, rgba(0, 0, 0, 0.12) 352px, rgba(0, 0, 0, 0.05) 392px, transparent 420px ); -webkit-mask-composite: source-in, source-in; mask-image: repeating-linear-gradient(to right, #000 0 3px, transparent 3px 4px), repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 4px), linear-gradient( to bottom, #000 0, #000 112px, rgba(0, 0, 0, 0.70) 176px, rgba(0, 0, 0, 0.45) 240px, rgba(0, 0, 0, 0.26) 300px, rgba(0, 0, 0, 0.12) 352px, rgba(0, 0, 0, 0.05) 392px, transparent 420px ); mask-composite: intersect, intersect, intersect; } /* Stronger in dark mode so the tint reads against the dark surface. */ .dark #content-container::before { background-image: radial-gradient( 140% 100% at 50% 20%, rgba(139, 92, 246, 0.12), rgba(139, 92, 246, 0.03) ); } /* Reveal the chevron on the primary Sign Up button (Mintlify ships it hidden) and keep it white to match the button label. */ #topbar-cta-button svg { display: inline-block !important; color: #fff !important; } /* Tighten the gap between the "Sign Up" label and the chevron (default gap-2/8px). */ #topbar-cta-button a > div { gap: 0.25rem !important; } /* === AI assistant panel: sit below the navbar, aligned to the content === Mintlify's assistant sheet only offsets by --banner-height and ignores the navbar, so its header renders on top of the top nav. Offset it by the live navbar height (published as --cx-navbar-height by scripts.js; falls back to 56px = h-14 if the script hasn't run yet). padding-top:0 removes the sheet's default pt-2 so its top edge lines up with the main content panel (#content-container), which starts flush under the navbar. */ @media (min-width: 1024px) { .sticky:has(> #chat-assistant-sheet) { top: calc(var(--banner-height, 0px) + var(--cx-navbar-height, 56px)) !important; margin-top: calc(var(--banner-height, 0px) + var(--cx-navbar-height, 56px)) !important; height: calc(100vh - var(--banner-height, 0px) - var(--cx-navbar-height, 56px)) !important; padding-top: 0 !important; } } /* === Hide the floating "Ask a question" input === Mintlify drops a floating composer into #content-area that hovers over the article and covers body text as you scroll. It is a third way into the same assistant, alongside the navbar sparkle button (#assistant-entry) and the search bar, whose prompt is set to "Search or ask AI" in docs.json. This class is only on the floating instance: the panel's own composer lives at #chat-assistant-sheet .chat-assistant-input and does not carry it, so the assistant itself is untouched and still opens from the navbar or search. Verified reachable at every breakpoint with this hidden: 1024px+ uses #assistant-entry (36x36) and #search-bar-entry; below that, the mobile pair #assistant-entry-mobile (18x18) and #search-bar-entry-mobile (32x32). If Mintlify renames this class the rule fails open, i.e. the box comes back. `visibility`, not `display`. The composer sits in flow between #pagination and #footer, and the theme relies on the 86px it occupies to separate the two. `display: none` collapsed that to zero, which put #footer's `border-t` flush against the bottom edge of the Previous/Next cards — two borders touching. `visibility: hidden` keeps the box, so the theme's spacing survives. It also drops the composer from the tab order and from hit-testing, so nothing invisible is left clickable. Mintlify's own wrapper already uses the same mechanism (an `invisible` class) when it wants the composer out of sight. */ .chat-assistant-floating-input { visibility: hidden !important; } /* === Keep the navbar full width when the assistant panel opens === Mintlify sets the navbar to width:calc(100% - var(--assistant-sheet-width)) so it docks beside the open panel, which shifts the right-aligned CTAs left every time the panel opens/closes. Pin it full width so the nav stays put and the panel tucks underneath it instead. */ @media (min-width: 1024px) { #navbar { width: 100% !important; } } /* === Navbar: degrade gracefully as width shrinks === Keep tab labels on one line (no two-line "API Reference" wrap) and drop the lowest-priority CTAs as space tightens, so the nav stays a clean single row down to lg (1024px), where Mintlify's hamburger takes over. Scoped >=1024px so the mobile nav is untouched. Request demo is the priority CTA and is never hidden (scripts.js also clones it into the mobile bar below lg). When space runs out we drop the others: Sign Up below 1130px, then Login below 1200px. */ #navbar a.nav-tabs-item { white-space: nowrap; } @media (min-width: 1024px) and (max-width: 1129px) { #navbar li:has(> a[href*="courier.com/signup"]) { display: none !important; } } @media (min-width: 1024px) and (max-width: 1199px) { #navbar li:has(> a[href*="courier.com/login"]) { display: none !important; } } /* === Mobile nav (below lg): fix the collapsed header layout === The desktop logo slot (flex:0 0 256px, set unscoped for tab alignment) also applies on mobile, where it reserves 256px of a ~375px screen and pushes the action icons (search / assistant / menu) off the right edge. Below lg, let the logo take its natural width and pin the action icons to the right. */ @media (max-width: 1023px) { #navbar div:has(> a img.nav-logo) { flex: 0 1 auto !important; } #navbar .lg\:hidden.items-center.gap-3 { margin-left: auto !important; } } /* Request demo button cloned into the mobile action bar by scripts.js (the theme hides all CTAs below lg). Theme-agnostic outline button; only rendered inside the lg:hidden mobile row, so it never shows on desktop. */ .cx-mobile-demo { display: inline-flex; align-items: center; white-space: nowrap; font-size: 13px; font-weight: 500; line-height: 1; text-decoration: none; padding: 7px 11px; border-radius: 8px; border: 1px solid rgba(130, 130, 140, 0.35); color: inherit; } /* No #footer overrides. The theme's own utility classes — `border-t border-gray-100 dark:border-gray-800/50` for the rule above the socials row, and `pb-28` (7rem) for the space below it — are left as almond ships them. Two earlier trims lived here and were reverted: `border-top: 0` (ed0cb57a) and `padding-bottom: 2.5rem` (73ef8c7c). The second one is the tempting one to redo, because `pb-28` exists to keep the floating assistant composer off the end of the page and we hide that composer (see .chat-assistant-floating-input above) — so the reserved space reads as dead. It is still the theme's spacing for the end of an article, and cutting it made the footer crowd the Previous/Next cards. Leave it alone. */ /* === Sidebar: a hairline between navigation groups === Mintlify separates sidebar groups with margin alone (`mt-6 lg:mt-8` on every group after the first), which reads as one long list once a tab carries five or six groups. A rule at the top of each subsequent group makes the sections scannable. Each group renders as a

wrapping a `.sidebar-group-header` and its ``, and the groups are consecutive siblings — so `+` targets every group except the first, which needs no rule above it. Unscoped by container on purpose: the same markup backs the desktop rail and the mobile drawer, and both want the divider. The theme's own hairlines are gray-100 / gray-800/50; these match at the opacity Mintlify uses for sidebar chrome. The margin override matters. Those groups ship `mt-6 lg:mt-8`, sized for separating by whitespace alone; with a rule drawn in that gap it leaves the divider floating well below the previous group. One value on both sides centers it: 1rem from the last link of the group above down to the rule, and a touch more below so the next group's title is not crowded against it. The rule is a pseudo-element, not a border, so it can match the width of the search entry above it. The two live in different boxes: the search button fills `div.text-sm.flex.flex-col.px-2`, while the nav list is an absolutely positioned `#navigation-items` that resolves `inset-x-0` against the outer `div.p-2.relative` and pads itself back by only `px-2` — leaving every group 0.5rem wider on each side. A border on the group would overhang the search box by that much; insetting the pseudo-element lines the two edges up without moving the group's own contents. */ div:has(> .sidebar-group-header) + div:has(> .sidebar-group-header) { position: relative; margin-top: 1rem !important; padding-top: 1.375rem; } div:has(> .sidebar-group-header) + div:has(> .sidebar-group-header)::before { content: ""; position: absolute; top: 0; left: 0.5rem; right: 0.5rem; border-top: 1px solid rgba(17, 24, 39, 0.08); } .dark div:has(> .sidebar-group-header) + div:has(> .sidebar-group-header)::before { border-top-color: rgba(255, 255, 255, 0.1); } /* === Provider card icons: size and aspect === Mintlify renders a `` file as `` — 24px, and no `object-fit`, so the default `fill` would stretch any non-square source to the box. Every file in `assets/provider-*` is square today, so `contain` changes nothing now, but it means a rectangular icon added later letterboxes instead of smearing. 32px, not 24px. These sit beside a 16px card title in a ~56px row, where 24px reads undersized — and several of these marks are genuinely narrow glyphs (Postmark's P, Vonage's V, Expo's chevron, SparkPost's flame, Mailjet's arrow), which at 24px look thin rather than small. Both the wrapper and the image, not just the image. Mintlify nests the icon as `

`, and the card row centres that *wrapper* with `flex items-center`. Growing only the leaves it overflowing a box still measured at 24px, so the row centres the wrong thing and the logo sits low. Both boxes carry the same value, so the row keeps centring the real bounds. Safe to scope to #content-area: cards only ever render in the article body. */ #content-area [data-component-part="card-icon"]:has(> img[src*="/assets/provider-"]), #content-area [data-component-part="card-icon"] > img[src*="/assets/provider-"] { width: 2rem; height: 2rem; object-fit: contain; } /* === The provider's logo above the page

.code-scroll [data-component-part="scroll-area-viewport"] { max-height: 30rem; }

Datadog

New Relic

OpenTelemetry