/* --------------------------------------------------------------------------- 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. --------------------------------------------------------------------------- */ /* =========================================================================== Design tokens — theme-aware color variables. Every branded color below is a token. Structure/typography rules in this file are theme-agnostic (they apply in both light and dark); only these token VALUES differ per theme, so one set of rules serves both modes. Light values are the exact AppSignal light palette this file already used. Dark values are the WCAG-AA "dark v2" set from the AppSignal color-tokens tool (neutral near-black surfaces, brightened text/links/semantics). --------------------------------------------------------------------------- */ :root { --text-heading: #111827; /* page headings */ --text-default: #203053; /* gray-800 — strong body text, links on surfaces */ --text-secondary: #415377; /* gray-700 — body copy, nav, TOC */ --text-muted: #67789d; /* gray-600 — eyebrows, sub-items */ --text-subtle: #8896b3; /* gray-500 — labels, captions */ --text-strong: #0a1530; /* gray-900 — active sidebar item */ --link: #336abc; /* inline links, hover/active accents */ --link-hover: #1d3b69; --edge-default: #d9dde7; /* gray-200 — table/TOC/pager/sidebar borders */ --page-bg: #ffffff; --surface-subtle: #f5f7f9; /* gray-100 — sidebar column, code/table fills */ --surface-hover: #edf0f5; /* sidebar row hover */ --surface-active: #e8ecf3; /* sidebar active pill */ --panel-bg: #ffffff; /* nav dropdown panel */ --iconbox-bg: #ffffff; /* dropdown icon box */ /* The navy bar (navbar + footer) and the elements painted on it. */ --bar-bg: #0a1530; /* gray-900 navy band */ --bar-border: #203053; /* gray-800 dividers on the band */ --bar-text: #d9dde7; /* nav links on the band */ --bar-icon: #a2adc4; /* carets, social/footer icons on the band */ /* The bar is dark in both themes, so the white Support button keeps one fixed color across themes. The CTA is azure-500 in light and gets the recommended azure-400 in .dark (see below). */ --bar-btn-bg: #ffffff; /* the white Support button */ --bar-btn-text: #203053; /* gray-800 — Support button label */ --bar-btn-hover: #f4f6fa; /* Support button hover wash */ --cta-bg: #1b44da; /* azure-500 — the "Get started" CTA */ /* Elevation shadows. Light uses AppSignal's soft navy tint; .dark swaps to a deeper black since the navy tint is invisible on dark surfaces. */ --shadow-iconbox: 0 1px 2px rgb(0 0 0 / 0.05); --shadow-iconbox-hover: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-panel: 0 1px 3px 0 rgba(10, 21, 48, 0.1), 0 1px 2px -1px rgba(10, 21, 48, 0.1); } .dark { --text-heading: #f5f5f5; --text-default: #e5e5e5; /* neutral-200 */ --text-secondary: #a3a3a3; /* neutral-400 */ --text-muted: #8b8b8b; /* neutral-500 */ --text-subtle: #787878; --text-strong: #f5f5f5; --link: #60a5fa; /* azure-350D */ --link-hover: #4a6ae8; /* azure-400 */ --edge-default: #383838; /* neutral-750 */ --page-bg: #141414; /* neutral-950 canvas */ --surface-subtle: #1c1c1c; --surface-hover: #242424; --surface-active: #2e2e2e; --panel-bg: #1e1e1e; /* neutral-850 */ --iconbox-bg: #2a2a2a; /* neutral-800 */ /* In dark the bar follows the token surfaces (neutral), not navy. The white Support button (--bar-btn-*) stays fixed across themes; the CTA brightens to the recommended dark azure (azure-400). */ --bar-bg: #1a1a1a; --bar-border: #2e2e2e; --bar-text: #c8c8c8; --bar-icon: #8b8b8b; --cta-bg: #4a6ae8; /* azure-400 — recommended dark-mode azure */ /* Deeper black elevation for dark surfaces. */ --shadow-iconbox: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-iconbox-hover: 0 2px 6px -1px rgb(0 0 0 / 0.55), 0 1px 3px -1px rgb(0 0 0 / 0.45); --shadow-panel: 0 4px 12px -2px rgb(0 0 0 / 0.6), 0 2px 6px -2px rgb(0 0 0 / 0.5); } /* 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 ends with /getting-started). We match the END of the href, not the start, so the tab is hidden on every locale: the English tab links to /getting-started and each translated locale links to //getting-started (/nl/…, /pt-BR/…, /fr/…, /de/…). A start-anchored match only caught English, leaving the tab visible and overlapping the language selector on the translated pages. 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: var(--text-muted); /* 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 var(--edge-default); } /* =========================================================================== AppSignal branding. 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). These rules apply in BOTH themes: the structure/typography is theme-agnostic and every color is a token (see "Design tokens" above) that resolves to the light value under `:root` and the dark value under `.dark`. Dark mode is enabled via docs.json `appearance.default: "system"`. The few selectors that target Mintlify's light utility classes (e.g. `bg-background-light`) still match in dark because Tailwind keeps both light and `dark:` class names in the attribute — only the token value swaps. 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 #navbar div[class*="bg-background-light"] { background-color: var(--bar-bg); backdrop-filter: none; -webkit-backdrop-filter: none; } html #navbar div.border-b { border-bottom-color: var(--bar-border); } /* 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 #navbar a, html #navbar button { color: var(--bar-text); } html #navbar a:hover, html #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 #navbar [class*="group/search"], html #navbar [class*="group/search"] *, html #navbar #assistant-entry, html #navbar #assistant-entry * { color: var(--text-subtle); } /* 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 #navbar #assistant-entry span:not([class*="text-xs"]) { font-weight: 400; } /* The ⌘K / ⌘I shortcut badges carry `bg-white` + a gray text tone in light, and `dark:bg-background-dark` + dimmer text in dark. Both pills sit on the dark bar in either theme, so the badge shouldn't change when the UI goes dark — pin both its background and text to the light values so ⌘K and ⌘I read identically across themes. */ html.dark #navbar [class*="group/search"] [class*="text-xs"][class*="rounded-full"], html.dark #navbar #assistant-entry [class*="text-xs"][class*="rounded-full"] { background-color: #ffffff; color: #8896b3; } /* NOTE: the "Get started" CTA renders with white text and a hidden chevron. Its background is pinned to --cta-bg (see the bar tokens) — azure-500 in light, the recommended azure-400 in dark — instead of Mintlify's per-theme `primary`. The squared-off rules live further down with the other top-bar buttons. */ /* --- Sidebar group headings + right-hand "On this page" heading ---------- → the uppercase gray-600 eyebrow style used across docs.appsignal.com. */ html .sidebar-title, html .sidebar-title > *, html h2.m-0.font-normal, html h2.m-0.font-normal button, html h2.m-0.font-normal button:hover, html h2.m-0.font-normal span { color: var(--text-muted); 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's space-x-2 is `> :not([hidden]) ~ :not([hidden])`, which still matches the span because the svg is hidden via `display:none`, not the `hidden` attribute — and at (0,3,0) it outranks a plain `button > span`. `!important` reclaims the 8px so the eyebrow left-aligns with the TOC items and the nested rail below it. */ html h2.m-0.font-normal button svg { display: none; } html h2.m-0.font-normal button > span { margin-left: 0 !important; } /* --- 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 .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. Toggleable groups render as

AppSignal API

MCP server

AppSignal CLI