/* --------------------------------------------------------------------------- AppSignal docs (Mintlify, Luma theme) — header tweaks. Three things live here: 1. Visually hide the "AppSignal Documentation" wrapper tab in the top nav. 2. Style the section separators injected into nav dropdowns by header-separators.js. 3. Brand the header (bar, nav items, buttons, dropdown panels) to match the appsignal.com / old docs.appsignal.com header. --------------------------------------------------------------------------- */ /* 1. Wrapper tab ---------------------------------------------------------- The docs sections render in the left sidebar as `anchors`, which Mintlify only allows nested inside a tab. That wrapper tab ("AppSignal Documentation", linking to /getting-started) is structurally required but visually redundant — the sidebar already lists every section — so we take it out of view. We use a visually-hidden (sr-only) pattern rather than `display: none` on purpose: it keeps the descriptive link in the rendered DOM and the accessibility tree, so its anchor text stays meaningful to crawlers/screen readers instead of being dropped (the SEO intent). /getting-started is also linked from in-content pages and the sidebar anchor, so nothing is orphaned. NOTE: this selector is coupled to Mintlify's navbar markup (a tab `

` inside #navbar whose link href starts with /getting-started). Re-check it on Mintlify version bumps. Scoped to #navbar so the sidebar anchor and other /getting-started links are untouched. */ #navbar li:has(> a[href^="/getting-started"]) { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } /* 2. Dropdown section separators ----------------------------------------- header-separators.js inserts before the first item of each section in a nav dropdown (e.g. Platform's OVERVIEW / INTELLIGENCE / HOSTING). Match the marketing header's section h3 eyebrows: 14px/600, 0.7px tracking, gray-600. */ .docs-menu-separator { padding: 0 8px 12px; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.7px; text-transform: uppercase; color: #67789d; /* gray-600 — same eyebrow tone used elsewhere in the docs */ pointer-events: none; /* it's a label, not a menu item */ user-select: none; } /* Subsequent sections get a full-bleed divider above them, like the marketing header's `border-b border-gray-200 -mx-3` rules between menu groups. The negative margins bleed past the panel's 12px side padding; the left padding compensates (12px bleed + 8px label inset). */ [role="menu"] > .docs-menu-separator:not(:first-child) { margin: 8px -12px 0; padding: 20px 20px 12px; border-top: 1px solid #d9dde7; } /* =========================================================================== AppSignal branding — light mode. Ported from PR #494 (https://github.com/appsignal/appsignal-web/pull/494), with every selector re-verified against the current Mintlify/Luma DOM (the nav was rebuilt since #494, so several selectors were updated). All rules are scoped `html:not(.dark)`. Dark mode is force-disabled via docs.json `appearance.strict`, so these only ever apply to the light theme. When dark-mode branding is built later: drop `strict`, then add `.dark` variants of these rules (see the dropdown panels too — still unstyled). Brand tokens (packages/ui/tailwind.preset.js): gray-900 #0A1530 · gray-800 #203053 · gray-700 #415377 · gray-600 #67789D gray-500 #8896B3 · gray-200 #D9DDE7 · azure-500 (primary) #1B44DA --------------------------------------------------------------------------- */ /* --- Navbar bar ---------------------------------------------------------- The navbar background is painted by an absolute layer (`

`); #494's old `#navbar-transition` / `[data-is-opaque]` layer no longer exists. Recolor that layer navy and the divider layer's bottom border to gray-800. The opened dropdown panels are Radix-portaled to (outside #navbar), so none of these `#navbar …` rules reach them — only the trigger tabs on the bar. Panels are styled in the "Nav dropdown panels" section below. */ html:not(.dark) #navbar div[class*="bg-background-light"] { background-color: #0a1530; backdrop-filter: none; -webkit-backdrop-filter: none; } html:not(.dark) #navbar div.border-b { border-bottom-color: #203053; } /* Nav links, trigger tabs and buttons — light gray on navy, white on hover (matches the apps/com & blog header: text-gray-200 / hover:text-white). */ html:not(.dark) #navbar a, html:not(.dark) #navbar button { color: #d9dde7; } html:not(.dark) #navbar a:hover, html:not(.dark) #navbar button:hover { color: #ffffff; } /* Search + Ask Assistant triggers — keep their icon / label / ⌘-kbd legible on navy (gray-500), overriding the navbar link color inherited above. Both get the identical treatment so the two pills read as a matched pair. */ html:not(.dark) #navbar [class*="group/search"], html:not(.dark) #navbar [class*="group/search"] *, html:not(.dark) #navbar #assistant-entry, html:not(.dark) #navbar #assistant-entry * { color: #8896b3; } /* The assistant label ships font-medium (500) where "Search…" is 400 — flatten it to match. The ⌘I kbd span (text-xs font-semibold) keeps its 600, same as search's ⌘K. */ html:not(.dark) #navbar #assistant-entry span:not([class*="text-xs"]) { font-weight: 400; } /* NOTE: the "Get started" CTA needs no rules now. It already renders as the brand blue (`bg-primary` = #1b44da from docs.json colors) with white text and a hidden chevron — #494's CTA block targeted an older, unstyled button. */ /* --- Sidebar group headings + right-hand "On this page" heading ---------- → the uppercase gray-600 eyebrow style used across docs.appsignal.com. */ html:not(.dark) .sidebar-title, html:not(.dark) .sidebar-title > *, html:not(.dark) h2.m-0.font-normal, html:not(.dark) h2.m-0.font-normal button, html:not(.dark) h2.m-0.font-normal button:hover, html:not(.dark) h2.m-0.font-normal span { color: #67789d; font-size: 14px; font-weight: 600; line-height: 17.5px; letter-spacing: 0.7px; text-transform: uppercase; } /* Hide the leading chevron on "On this page" and close the gap it leaves (Tailwind space-x-2 keeps an 8px left margin even when the svg is hidden). */ html:not(.dark) h2.m-0.font-normal button svg { display: none; } html:not(.dark) h2.m-0.font-normal button > span { margin-left: 0; } /* --- Breadcrumb / eyebrow above the page title -------------------------- Mintlify renders `

` already in primary blue at 14px/600; just add uppercase + tracking to match the docs eyebrow. */ html:not(.dark) .eyebrow { letter-spacing: 0.7px; text-transform: uppercase; } /* --- Sidebar links -------------------------------------------------------- Inactive items → gray-800 (Mintlify defaults to gray-700). The right-hand "On this page" links are styled in their own section near the end. */ html:not(.dark) nav[aria-label="Pages"] a:not([aria-current]) { color: #203053; } /* Strip Mintlify's blue tint on the active item. The desktop sidebar then re-adds a neutral pill (see "Gray sidebar column" section); this keeps the mobile drawer's active item flat. */ html:not(.dark) nav a[aria-current="page"], html:not(.dark) aside a[aria-current="page"] { background-color: transparent; } /* --- Body text ---------------------------------------------------------- The rendered MDX body is `.mdx-content` (carries `prose prose-gray`). Set the Tailwind Typography tokens AND target the body elements directly so paragraphs/lists use AppSignal gray-700 instead of Mintlify's near-black. */ html:not(.dark) .prose { --tw-prose-body: #415377; --tw-prose-lead: #415377; --tw-prose-links: #336abc; } /* `:not(.callout *)` keeps this rule out of callouts — otherwise its (0,2,2) specificity beats the callout's single `text-{hue}-800` class and grays out the variant-colored text. */ html:not(.dark) .mdx-content p:not(.callout *), html:not(.dark) .mdx-content li:not(.callout *), html:not(.dark) #content-area header p { color: #415377; } /* --- Rounded corners → 8px ---------------------------------------------- Callouts (rounded-2xl / 16px), code groups (16px outer, 14px inner) and the "Copy page" pill — all brought to the docs' 8px convention. The prev/next pager is restyled wholesale in its own section near the end. */ html:not(.dark) .callout { border-radius: 8px; } html:not(.dark) .code-group { border-radius: 8px; } /* Inner code surface carries `rounded-xt` (14px, !important) so we need !important to win. A standalone fence's surface → 8px; inside a code group it nests at 6px (the group's 8px outer minus its 2px padding). The more specific group rule wins over the standalone one for grouped blocks. */ html:not(.dark) .code-block-background { border-radius: 8px !important; } html:not(.dark) .code-group .code-block-background { border-radius: 6px !important; } html:not(.dark) [class*="min-w-[156px]"] > button:first-child { border-radius: 8px 0 0 8px; } html:not(.dark) [class*="min-w-[156px]"] > button:last-child { border-radius: 0 8px 8px 0; } /* Light-mode page background — explicit white. */ html:not(.dark) body { background-color: #ffffff; } /* =========================================================================== Header parity with the appsignal.com / old docs header. All target values below are computed styles read off the live docs.appsignal.com header (navy bar, plain-text nav items, 4px-radius buttons, white 288px dropdown panels with bordered icon boxes). --------------------------------------------------------------------------- */ /* --- Centering the menu --------------------------------------------------- Mintlify's navbar row is [logo flex-1][nav][buttons flex-1]: the leftover space is split equally, so the menu's center sits left of the bar's center by half the width difference between the two sides — and the right side (search + assistant + Support + CTA) is far wider than the logo. Pin the nav to the true center instead. Only when the bar is wide enough that the centered menu can't collide with the right-side buttons (measured: menu ≈565px, compact right group ≈295px → safe from ≈1255px; 1320 leaves a ≥33px gap); below that, Mintlify's flex flow (and its overflow handling) takes over again. The containing block is the `div.relative` wrapping the row — same height as the row and symmetric within the bar, so 50% here is the bar's center. */ @container navbar (min-width: 1320px) { html:not(.dark) #navbar nav[aria-label="Main"] { position: absolute; /* True center, optically nudged left: the busier right-side group makes a dead-centered menu read right-heavy. */ left: calc(50% - 80px); top: 50%; transform: translate(-50%, -50%); } } /* At ≥1500px container width Mintlify expands the search pill ("Search… ⌘K") and assistant button ("Ask Assistant") to their labeled forms, growing the right group to 608px measured from the bar's right edge — which would run into the menu while it's pinned at calc(50% - 80px). Keep the labels (they fit — the bar has slack on the logo side) and instead let the menu slide left just far enough to clear them: its center may not pass 100% - 608px (right group) - 20px (gap) - 282px (half the menu) = 100% - 910px. The min() recenters the menu automatically once the bar is wide enough (≥1660px) and slides it left continuously below that. */ @container navbar (min-width: 1500px) { html:not(.dark) #navbar nav[aria-label="Main"] { left: min(calc(50% - 80px), calc(100% - 910px)); } } /* --- Top bar nav items --------------------------------------------------- Old header items are plain text: 16px/400 gray-200 → white, no icons, no hover pill. The Mintlify triggers render a leading mask-icon svg, the label, then a caret svg — hide both. */ html:not(.dark) #navbar nav[aria-label="Main"] li > button > svg:first-of-type, html:not(.dark) #navbar nav[aria-label="Main"] li > a > svg:first-of-type, html:not(.dark) #navbar nav[aria-label="Main"] li > button > svg:last-of-type { display: none; } /* Caret: the old header uses Font Awesome's solid angle-down — a chunky filled chevron whose glyph fills its viewBox. Mintlify's Lucide chevron is a thin 2px stroke that only covers ~half of its box, so it reads tiny even when enlarged. Draw the real FA glyph instead, as a mask-painted ::after (a flex item in the trigger, so the existing gap applies), loaded from the same FontAwesome CDN Mintlify already pulls its nav icons from. Sized to the old caret's measured box (≈9.4×12.8 at font-size 10.8px). */ html:not(.dark) #navbar nav[aria-label="Main"] li > button::after { content: ""; flex-shrink: 0; width: 10px; height: 13px; background-color: #a2adc4; /* gray-400 — measured off the old header */ -webkit-mask: url(https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/solid/angle-down.svg) center / contain no-repeat; mask: url(https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/solid/angle-down.svg) center / contain no-repeat; } /* Radix returns focus to the trigger when its menu closes, tripping :focus-visible and leaving a blue pill ring after hover-out. The old header has no ring. */ html:not(.dark) #navbar nav[aria-label="Main"] li > button:focus-visible, html:not(.dark) #navbar nav[aria-label="Main"] li > a:focus-visible { outline: none; } html:not(.dark) #navbar nav[aria-label="Main"] li > button, html:not(.dark) #navbar nav[aria-label="Main"] li > a { font-size: 16px; font-weight: 400; letter-spacing: normal; padding-left: 12px; /* old: px-3 */ padding-right: 12px; } html:not(.dark) #navbar nav[aria-label="Main"] li > button:hover, html:not(.dark) #navbar nav[aria-label="Main"] li > a:hover { background-color: transparent; } /* --- Top bar buttons ------------------------------------------------------ Old `c-button c-button--sm`: 34px tall, 4px radius, 16px/400, 4px/12px padding. Support link → the white variant (`c-button--white`, like the old header's "Request demo": white bg, gray-800 text, gray-200 border). The hover color must re-override the navbar-wide white-on-hover link rule. Get started CTA → primary, just squared off from Mintlify's pill. auth-button.js keys off the CTA's users/sign_up href — these rules don't touch the markup. */ html:not(.dark) #navbar .navbar-link a { border: 1px solid #d9dde7; background: #ffffff; color: #203053; border-radius: 4px; height: 34px; padding: 4px 12px; font-size: 16px; font-weight: 400; } html:not(.dark) #navbar .navbar-link a:hover { background: #f4f6fa; color: #203053; } html:not(.dark) #topbar-cta-button a { border-radius: 4px; height: 34px; padding: 4px 12px; font-size: 16px; font-weight: 400; } /* Mobile (; scope to ours via the .nav-dropdown-item children so the contextual "Copy page" menu and other Radix menus stay untouched. Old panel: white, 288px (w-72), 16px/12px padding, 8px radius, soft navy-tinted shadow, no scroll cap. */ html:not(.dark) [data-radix-menu-content]:has(> a.nav-dropdown-item) { width: 288px; max-height: min(80vh, 44rem); padding: 16px 12px; border: none; border-radius: 8px; background-color: #ffffff; box-shadow: 0 1px 3px 0 rgba(10, 21, 48, 0.1), 0 1px 2px -1px rgba(10, 21, 48, 0.1); } /* Items: icon box + label, no hover background (old header items only shift text color and lift the icon box shadow). Mintlify's icons are mask-image svgs painted via background-color, so the bordered white "icon box" can't live on the svg itself (the mask would clip it). Instead the box is the anchor's ::before (a real flex item, since pseudo-elements of a flex container participate in layout) and the icon is overlaid on top of it. */ html:not(.dark) [data-radix-menu-content] a.nav-dropdown-item { position: relative; gap: 12px; /* old: space-x-3 */ padding: 4px 8px; border-radius: 4px; color: #415377; /* gray-700 */ } html:not(.dark) [data-radix-menu-content] a.nav-dropdown-item:hover { background-color: transparent; color: #203053; /* gray-800 */ } html:not(.dark) [data-radix-menu-content] a.nav-dropdown-item span { font-size: 16px; font-weight: 400; } /* The 28×28 bordered icon box (old: h-7 w-7 border-gray-200 shadow-sm rounded-md, shadow lifts on row hover). */ html:not(.dark) [data-radix-menu-content] a.nav-dropdown-item::before { content: ""; display: block; flex-shrink: 0; width: 28px; height: 28px; border: 1px solid #d9dde7; border-radius: 6px; background-color: #ffffff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); transition: box-shadow 0.15s; } html:not(.dark) [data-radix-menu-content] a.nav-dropdown-item:hover::before { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); } /* The icon: pulled out of the flex flow and centered over the ::before box (box spans x 8→36px, y centered — a 12px icon centers at left 16px). */ html:not(.dark) [data-radix-menu-content] a.nav-dropdown-item > svg:first-of-type { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; min-width: 12px; min-height: 12px; } /* Radix focuses menu items on pointer hover, which trips :focus-visible and paints the browser's blue focus ring on plain mouse hover. The old header has no ring; keyboard users still get the same affordance as hover via Radix's data-highlighted attribute. */ html:not(.dark) [data-radix-menu-content] a.nav-dropdown-item:focus-visible { outline: none; } html:not(.dark) [data-radix-menu-content] a.nav-dropdown-item[data-highlighted] { color: #203053; } /* Old header items have no trailing external-link arrow. */ html:not(.dark) [data-radix-menu-content] a.nav-dropdown-item > svg:last-of-type:not(:first-of-type) { display: none; } /* Per-item icon colors, as on appsignal.com (mask icons are painted via background-color). Default azure, with the marketing palette overrides. */ html:not(.dark) [data-radix-menu-content] a.nav-dropdown-item > svg:first-of-type { background-color: #1b44da; /* azure-500 default */ } html:not(.dark) [data-radix-menu-content] a[href*="tour/errors"] > svg:first-of-type { background-color: #e05729; /* orange-500 */ } html:not(.dark) [data-radix-menu-content] a[href*="tour/performance"] > svg:first-of-type, html:not(.dark) [data-radix-menu-content] a[href*="appsignal.com/nodejs"] > svg:first-of-type { background-color: #29a575; /* green-500 */ } html:not(.dark) [data-radix-menu-content] a[href*="tour/hosts"] > svg:first-of-type { background-color: #1e9393; /* teal-500 */ } html:not(.dark) [data-radix-menu-content] a[href*="tour/anomaly-detection"] > svg:first-of-type, html:not(.dark) [data-radix-menu-content] a[href*="appsignal.com/ruby"] > svg:first-of-type { background-color: #c8223d; /* red-500 */ } html:not(.dark) [data-radix-menu-content] a[href*="tour/uptime-monitoring"] > svg:first-of-type, html:not(.dark) [data-radix-menu-content] a[href*="appsignal.com/javascript"] > svg:first-of-type { background-color: #ec9c24; /* yellow-500 */ } html:not(.dark) [data-radix-menu-content] a[href*="tour/metrics"] > svg:first-of-type, html:not(.dark) [data-radix-menu-content] a[href*="tour/automated-dashboards"] > svg:first-of-type, html:not(.dark) [data-radix-menu-content] a[href*="appsignal.com/elixir"] > svg:first-of-type { background-color: #8537ad; /* purple-500 */ } html:not(.dark) [data-radix-menu-content] a[href*="tour/log-management"] > svg:first-of-type { background-color: #ef51c0; /* hot-pink-500 */ } html:not(.dark) [data-radix-menu-content] a[href*="tour/check-ins"] > svg:first-of-type, html:not(.dark) [data-radix-menu-content] a[href*="tour/workflow"] > svg:first-of-type, html:not(.dark) [data-radix-menu-content] a[href*="appsignal.com/python"] > svg:first-of-type { background-color: #336abc; /* blue-500 */ } html:not(.dark) [data-radix-menu-content] a[href*="go-monitoring"] > svg:first-of-type { background-color: #3aa2bc; /* cyan-500 */ } html:not(.dark) [data-radix-menu-content] a[href*="java-monitoring"] > svg:first-of-type { background-color: #c37b1f; /* coffee-500 */ } html:not(.dark) [data-radix-menu-content] a[href*="php-monitoring"] > svg:first-of-type { background-color: #5b62c4; /* indigo-500 */ } /* --- Header height -------------------------------------------------------- Old header: 72px content + 1px border (16px vertical padding around a 40px row). Mintlify's desktop navbar row is h-12 (48px) and three things hang off that number: the fixed sidebar (#sidebar-content, top: 48px, bottom-anchored), the sticky TOC (#content-side-layout, top: 48px, height: 100vh - 48px) and the heading anchor offset (--scroll-mt: 6rem = navbar + 48px breathing room). Bump all four together, desktop only — the div.relative wrapper), so Mintlify's `left-0` and the `top` rule in the header-height section above still apply. Below lg none of this runs: the same element is the mobile drawer and needs its fixed/overflow styling. */ @media (min-width: 1024px) { html:not(.dark) #sidebar-content { position: absolute !important; bottom: auto !important; /* `bottom-0` would stretch it to the page end */ height: auto !important; overflow: visible !important; } /* The internal scroll container — lay out at full content height. */ html:not(.dark) #sidebar-content #navigation-items { overflow-y: visible !important; } /* Footer never cuts the nav: keep the content column at least as tall as the sidebar (--as-sidebar-clearance, published by sidebar-flow.js). #content-container is flex-1 in the column that ends with #footer, so the extra height pushes the footer down, not into empty space. The +3rem puts breathing room between the last nav item and the footer — the old docs had the same 48px there (the layout container's lg:my-12). */ html:not(.dark) .peer.is-not-custom ~ #body-content #content-container { min-height: calc(var(--as-sidebar-clearance, 0px) + 3rem); } /* The right "On this page" rail is sticky with a viewport height and overflow-y: auto, and its column ends where the footer begins — so a TOC line that straddles that edge is sliced mid-glyph against the navy band. Fade the last 2rem out instead. Mid-page the rail's bottom edge sits below the viewport, so the fade only ever shows at the footer seam (and as a scroll affordance on TOCs long enough to scroll). */ html:not(.dark) #content-side-layout { -webkit-mask-image: linear-gradient( to bottom, #000 calc(100% - 2rem), transparent 100% ); mask-image: linear-gradient( to bottom, #000 calc(100% - 2rem), transparent 100% ); } } /* Dark restyle (all widths). Bonus fix: the wordmark Mintlify puts in the footer is the white-fill /logo/dark.svg — invisible on the old white footer, correct on navy. */ html:not(.dark) #footer { background-color: #0a1530; /* old gray-900 */ } /* Column headers — old: white, uppercase, tracked, medium, hairline below (h2.text-white.uppercase.tracking-wider.font-medium.border-b.border-gray-700) */ html:not(.dark) #footer p.font-semibold { color: #fff; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; border-bottom: 1px solid #415377; /* old gray-700 */ padding-bottom: 0.75rem; } /* Column links — old: white, hover underline (no color shift). */ html:not(.dark) #footer a[class*="text-gray-950/50"] { color: #fff; } html:not(.dark) #footer a[class*="text-gray-950/50"]:hover { color: #fff; text-decoration: underline; } /* Social icons — CSS-mask svgs painted via background-color (same gotcha as the navbar icons). Light gray, white on hover. */ html:not(.dark) #footer a > svg[style*="mask-image"] { background-color: #a2adc4; /* old gray-400 */ } html:not(.dark) #footer a:hover > svg[style*="mask-image"] { background-color: #fff; } /* Hairline divider above the "Powered by" row. */ html:not(.dark) #footer div[class*="bg-gray-100"] { background-color: #203053; /* old gray-800 */ } /* "Powered by mintlify" — muted light gray so it stays legible on navy. */ html:not(.dark) #footer a[href*="mintlify.com"] { color: #8896b3; /* old gray-500 */ } html:not(.dark) #footer a[href*="mintlify.com"]:hover { color: #bfc6d6; /* old gray-300 */ } /* The branding above is light-mode only — dark mode is forced off via docs.json `appearance.strict`. Deferred follow-up: add `.dark`-scoped brand rules (re-enabling the toggle). */ /* =========================================================================== Callouts — old Notice palette. Ported from appsignal-web packages/ui message.css: brand-100 background, brand-200 border, brand-700 text. Colors only; Mintlify's SVG icons are kept and pick up the variant color via `currentColor`. Selector evidence (Mintlify dev client bundle, ~/.mintlify/mint .../ssr/ _78e36d46._.js): each callout renders as .callout[data-callout-type="note|info|tip|check|warning|danger"] with children [data-component-part="callout-icon"] (inline currentColor SVG) and [data-component-part="callout-content"] (carries text-{hue}-800, [&_strong]:!text-current and [&_a]:border-current). Mapping: old bare defaulted to the blue `info` variant and was migrated to (130 uses), so Note = old blue; Info takes the old neutral gray. Tip/Check share the old success green. The six types are enumerated explicitly so the generic (inline style driven) is untouched. No !important — it would fight Mintlify's [&_strong]:!text-current inside the content div. --------------------------------------------------------------------------- */ html:not(.dark) .callout[data-callout-type="note"] { --as-co-bg: #eff3fa; --as-co-bd: #becfea; --as-co-tx: #1d3b69; } /* old info (blue) */ html:not(.dark) .callout[data-callout-type="info"] { --as-co-bg: #f5f7f9; --as-co-bd: #d9dde7; --as-co-tx: #203053; } /* old neutral gray */ html:not(.dark) .callout[data-callout-type="tip"] { --as-co-bg: #eef8f4; --as-co-bd: #bbe2d3; --as-co-tx: #175c41; } /* old success green */ html:not(.dark) .callout[data-callout-type="check"] { --as-co-bg: #eef8f4; --as-co-bd: #bbe2d3; --as-co-tx: #175c41; } /* old success green */ html:not(.dark) .callout[data-callout-type="warning"] { --as-co-bg: #fdf7ed; --as-co-bd: #f9dfb9; --as-co-tx: #845714; } /* old warning yellow */ html:not(.dark) .callout[data-callout-type="danger"] { --as-co-bg: #fbedef; --as-co-bd: #edb8c1; --as-co-tx: #701322; } /* old danger red */ html:not(.dark) .callout:is( [data-callout-type="note"], [data-callout-type="info"], [data-callout-type="tip"], [data-callout-type="check"], [data-callout-type="warning"], [data-callout-type="danger"] ) { background-color: var(--as-co-bg); border-color: var(--as-co-bd); color: var(--as-co-tx); } /* The content div and icon SVG each carry their own single-class color (text-{hue}-800); these higher-specificity rules hand them the variant color owned by the root above. */ html:not(.dark) .callout[data-callout-type] [data-component-part="callout-content"], html:not(.dark) .callout[data-callout-type] [data-component-part="callout-icon"] svg { color: inherit; } /* =========================================================================== Prose strong/links — old docs values (appsignal-web typography config). Links are excluded from callouts so they inherit the variant color there (the old Notice was `not-prose`: links inside notices matched the text). --------------------------------------------------------------------------- */ html:not(.dark) .mdx-content strong { color: #203053; /* old gray-800 */ font-weight: 500; } html:not(.dark) .mdx-content a:not(.callout *) { color: #336abc; /* old blue-500 */ } html:not(.dark) .mdx-content a:not(.callout *):hover { color: #1d3b69; /* old blue-700 */ } /* Inline code — the blog/old-docs chip: solid gray-100, gray-800 text, 8px radius (Mintlify: translucent gray, 6px). Scoped outside

 so fenced
   code blocks keep their dark theme. */
html:not(.dark) .mdx-content :not(pre) > code {
  background-color: #f5f7f9; /* old gray-100 */
  color: #203053; /* old gray-800 */
  border-radius: 8px;
}

/* ===========================================================================
   Tables — old docs look (appsignal-web typography config): full 1px
   gray-200 grid, gray-100 header row with weight-400 gray-700 text,
   0.5rem/1.25rem cell padding, 14px text. Tailwind Typography's defaults
   are :where()-wrapped (zero specificity) so plain selectors win.
   --------------------------------------------------------------------------- */
html:not(.dark) .mdx-content table {
  border-collapse: collapse;
  font-size: 0.875rem;
}

html:not(.dark) .mdx-content table th,
html:not(.dark) .mdx-content table td {
  border: 1px solid #d9dde7; /* old gray-200 */
  padding: 0.5rem 1.25rem;
}

html:not(.dark) .mdx-content table th {
  background-color: #f5f7f9; /* old gray-100 */
  font-weight: 400;
  color: #415377; /* old gray-700 */
}

html:not(.dark) .mdx-content table td {
  color: #203053; /* old gray-800 */
}

/* ===========================================================================
   Gray sidebar column — Claude-docs-style separation (desktop).

   A light gray-100 column under the left nav with a gray-200 hairline at the
   seam; article + "On this page" stay on white (platform.claude.com look,
   AppSignal palette).

   The sidebar element itself flows with the page at auto height (see the
   Footer section), so painting IT would leave white below the end of the nav
   list. Instead the column is a background gradient on the page wrapper —
   the div holding #navbar + #sidebar-content + #body-content — which spans
   the full page height. The opaque navy navbar covers it on top; the z-10
   full-width #footer covers it at the bottom.

   NOTE: `div:has(> #navbar.is-not-custom)` is coupled to Mintlify's layout
   markup (like the wrapper-tab hack above) — re-check on version bumps. The
   .is-not-custom gate keeps custom/landing layouts untouched; below lg the
   wrapper is `max-lg:contents` (paints nothing), the media query is belt and
   braces for the mobile drawer. */
@media (min-width: 1024px) {
  html:not(.dark) div:has(> #navbar.is-not-custom) {
    background: linear-gradient(
      to right,
      #f5f7f9 0,
      #f5f7f9 calc(var(--as-sidebar-width) - 1px),
      #d9dde7 calc(var(--as-sidebar-width) - 1px),
      #d9dde7 var(--as-sidebar-width),
      transparent var(--as-sidebar-width)
    );
  }

  /* Nav rows read as inset pills on the tint (the Claude-docs treatment):
     8px radius, a one-tone-darker hover wash. */
  html:not(.dark) #sidebar-content a {
    border-radius: 8px;
  }

  html:not(.dark) #sidebar-content a:hover {
    background-color: #edf0f5;
  }

  /* Active item: neutral pill + gray-900 text instead of Mintlify's primary
     blue (overrides the global active-bg strip near the top of this file and
     the `text-primary` utility). The faux-bold text-shadow Mintlify uses is
     currentColor, so it carries over. */
  html:not(.dark) #sidebar-content a[aria-current="page"] {
    background-color: #e8ecf3;
    color: #0a1530; /* gray-900 */
  }
}

/* ===========================================================================
   "On this page" — the blog.appsignal.com rail.

   Links: 14px/400 gray-700, blue-500 on hover (the blog's hover:text-blue);
   the active heading goes blue-500 + medium like the old docs' scroll-spy,
   replacing Mintlify's primary-blue + sliding dot. The uppercase eyebrow
   heading is styled with the sidebar group headings near the top.

   Mintlify marks the active link with `aria-current="location"` (plus a
   text-primary utility) and nests via inline padding-left (1rem/2rem),
   which is kept. */
html:not(.dark) #content-side-layout nav a {
  font-size: 14px;
  font-weight: 400;
  color: #415377; /* gray-700 */
  text-shadow: none; /* Mintlify's faux-bold on the active link */
}

html:not(.dark) #content-side-layout nav a:hover {
  color: #336abc; /* blue-500 */
}

html:not(.dark) #content-side-layout nav a[aria-current="location"] {
  color: #336abc; /* blue-500 */
  font-weight: 500;
}

/* The sliding active-position dot. */
html:not(.dark) #content-side-layout nav span[class*="rounded-full"] {
  display: none;
}

/* Mintlify indents every row by `pl-4` (room for the dot, hidden above) —
   remove it so the list left-aligns with the "ON THIS PAGE" eyebrow; the
   nested rail then sits at the top-level text edge, like the old docs.
   Nested runs are sub- elements whose negative margin
   cancelled that pl-4 — neutralize it too or sub-items land 16px left of
   the eyebrow. */
html:not(.dark) #content-side-layout li.toc-item {
  padding-left: 0;
}
html:not(.dark) #content-side-layout ul.toc ul {
  margin-left: 0;
}

/* Eyebrow → list gap: 12px, same as the old docs' mb-3 and the left
   sidebar's group headings. */
html:not(.dark) #content-side-layout nav > h2.m-0.font-normal {
  margin-bottom: 12px;
}

/* Nested headings (h3/h4) — the old docs' bordered sub-list
   (TableOfContents.js: `pl-5 my-2 border-l border-gray-200`). Mintlify
   renders the TOC flat: every  is a
   sibling, with the depth drawn as inline padding-left on the link. So the
   old nested- border is drawn per-item on the links instead — the boxes
   of consecutive nested items stack seamlessly into one continuous rail,
   aligned with the top-level text (every li carries the same pl-4). */
html:not(.dark) #content-side-layout li.toc-item:not([data-depth="0"]) > a {
  border-left: 1px solid #d9dde7; /* gray-200 */
}

/* Sub-items one tone lighter than the top level (gray-600 vs gray-700), so
   deep TOCs keep a readable hierarchy. The :not()s let the blue hover and
   blue active rules above keep winning. */
html:not(.dark)
  #content-side-layout
  li.toc-item:not([data-depth="0"])
  > a:not([aria-current="location"]):not(:hover) {
  color: #67789d; /* gray-600 */
}

/* …and the old `my-2` block margins around each nested run: breathing room
   where the depth changes, which is what keeps long TOCs (FAQ) from reading
   as a wall of text. */
html:not(.dark)
  #content-side-layout
  li.toc-item[data-depth="0"]
  + li.toc-item:not([data-depth="0"])
  > a {
  margin-top: 6px;
}
html:not(.dark)
  #content-side-layout
  li.toc-item:not([data-depth="0"]):has(+ li.toc-item[data-depth="0"])
  > a {
  margin-bottom: 6px;
}

/* ===========================================================================
   Prev/next pagination — the old docs' Stepper, in today's layout language.

   Inner anatomy follows the old Stepper (appsignal-web
   apps/docs/components/Stepper.js): each link shows an uppercase gray-500
   label over an 18px gray-700 title (blue on hover), with FA solid arrows
   pinned at the bar's outer edges. The container deviates from the old
   gray-100 strip on purpose: one white bar with the layout's gray-200
   border and 8px corners (the docs' corner convention), at every width.
   The bottom margin keeps it clear of the sticky "Ask a question" input
   that Mintlify renders directly below.

   Mintlify (Luma) renders #pagination as a 2-col grid of bordered cards and
   leaves an empty  in the slot of a missing link; that placeholder is
   hidden so a lone link spans the full bar like the old docs (this is also
   what keeps next-only pages from looking orphaned).

   No class hooks here: Luma is the theme switch's default branch, which
   renders the pager WITHOUT the .pagination-prev/-next/-title classes other
   themes get. But the slot order is fixed — child 1 is prev, child 2 is
   next, each an  or an empty placeholder  — so a:first-child is
   always prev and a:last-child always next. Label copy ("Next Page" /
   "Next Guide") is rewritten by pagination-labels.js. */
html:not(.dark) #pagination {
  display: flex;
  gap: 0;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid #d9dde7; /* gray-200 */
  border-radius: 8px;
  overflow: hidden;
}

/* Mintlify's placeholder for a missing prev/next link. */
html:not(.dark) #pagination > div:empty {
  display: none;
}

/* The cards become halves of the bar (old: block w-full p-4, no borders of
   their own). 2.5rem inner padding (old pl-10/pr-10) clears the edge arrow. */
html:not(.dark) #pagination > a {
  flex: 1 1 0;
  position: relative;
  padding: 1rem;
  border: 0;
  border-radius: 0;
}

html:not(.dark) #pagination > a:first-child {
  padding-left: 2.5rem;
}

html:not(.dark) #pagination > a:last-child {
  justify-content: flex-end;
  padding-right: 2.5rem;
}

/* Center divider — `a + a` only matches when both links exist (a hidden
   placeholder  still breaks the adjacency), like the old conditional
   border-r on prev. */
html:not(.dark) #pagination > a + a {
  border-left: 1px solid #d9dde7; /* gray-200 */
}

/* Mintlify renders title-first; the old docs put the label on top. The
   space-y-1 margin would land on the wrong edge after the flip, so it's
   zeroed in favor of gap (old: mb-1 on the label). */
html:not(.dark) #pagination > a > div {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.25rem;
}

html:not(.dark) #pagination > a > div > * {
  margin: 0;
}

html:not(.dark) #pagination > a > div > div:first-child {
  font-size: 1.125rem; /* old: text-lg */
  line-height: 1.75rem;
  font-weight: 400;
  color: #415377; /* gray-700 */
  transition: color 300ms;
}

html:not(.dark) #pagination > a:hover > div > div:first-child {
  color: #336abc; /* blue-500 */
}

/* The label — old c-heading--caps + font-medium + text-gray-500. The
   explicit color also blocks Mintlify's group-hover gray shift (the old
   label doesn't react to hover). */
html:not(.dark) #pagination > a span {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: #8896b3; /* gray-500 */
}

/* Drop the inline Lucide chevrons; the arrows below replace them. */
html:not(.dark) #pagination > a svg {
  display: none;
}

/* FA solid arrows at the bar's edges (old: absolute left-4/right-4,
   size="sm" ≈ 14px), mask-painted from the same FA CDN as the nav carets. */
html:not(.dark) #pagination > a::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 13px;
  height: 14px;
  transform: translateY(-50%);
  background-color: #415377; /* gray-700 */
}

html:not(.dark) #pagination > a:first-child::before {
  left: 1rem;
  -webkit-mask: url(https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/solid/arrow-left.svg)
    center / contain no-repeat;
  mask: url(https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/solid/arrow-left.svg)
    center / contain no-repeat;
}

html:not(.dark) #pagination > a:last-child::before {
  right: 1rem;
  -webkit-mask: url(https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/solid/arrow-right.svg)
    center / contain no-repeat;
  mask: url(https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/solid/arrow-right.svg)
    center / contain no-repeat;
}

/* Below the old `sm` breakpoint the bar stacks and everything left-aligns,
   arrow included (old: text-left + left-4 arrow on both links). */
@media (max-width: 639px) {
  html:not(.dark) #pagination {
    flex-direction: column;
  }

  html:not(.dark) #pagination > a + a {
    border-left: 0;
    border-top: 1px solid #d9dde7; /* gray-200 */
  }

  html:not(.dark) #pagination > a:last-child {
    justify-content: flex-start;
    padding-left: 2.5rem;
    padding-right: 1rem;
  }

  html:not(.dark) #pagination > a:last-child > div > div:first-child {
    text-align: left;
  }

  html:not(.dark) #pagination > a:last-child > div > div:last-child {
    flex-direction: row;
  }

  html:not(.dark) #pagination > a:last-child::before {
    right: auto;
    left: 1rem;
  }
}

​Installation

Installation