/* ═══════════════════════════════════════════════════════════════════════════ Lobyco Help Center — the V2 prototype's look and feel. Every value is lifted from ux.workspace projects/help-center/prototypes/v2-no-global-nav.html so the two can be compared trait by trait. This file is itself the experiment: GitBook has no custom-CSS surface, so its header colour is derived from the page tint and the flat dark topbar was unreachable. Mintlify ships stable element IDs, so it is reachable here. ═══════════════════════════════════════════════════════════════════════════ */ /* Design tokens live in tokens.css, loaded automatically alongside this file. Add a colour, radius or shadow there — never inline here. See DESIGN.md. */ /* ── The header band ───────────────────────────────────────────────────────── The prototype's defining trait: one full-width sticky bar, no border, no blur. Ivory in light mode, like the page; dark mode paints its own band. Themes differ here: 'mint' and 'almond' both put the navbar full-width; maple and palm keep the logo and search inside the sidebar, where a band cannot span. Measure a candidate rather than assuming — the claim that only 'mint' could do this was made once and turned out to be wrong. The rules below are tuned against mint's DOM, so changing theme means re-checking the band, the active-tab underline, the sidebar scroll-fade and the sidebar rhythm — not a one-line edit. */ #navbar, #navbar-transition, #navbar-transition-mint { /* Ivory, the page ground, so header and page read as one surface. Dark mode paints its own band further down. */ background: var(--page-ground) !important; border-bottom: none !important; backdrop-filter: none !important; box-shadow: none !important; } /* White on the dark band. Light mode turns all of this twilight-5 in the light-mode header block further down. */ #navbar a, #navbar button, #navbar span, #navbar p, #navbar svg { color: var(--pure-white) !important; } /* Below `lg` the navbar swaps the tab row for a hamburger and the current page's title. That title is a `div` (`.text-gray-900`), so the rule above — which enumerates a, button, span, p, svg — missed it, leaving near-black #19181b text on the band: the one genuinely illegible thing in the whole port. Kept as a targeted selector rather than adding `div` to the list above: the mobile menu and the search modal also mount inside #navbar, and a blanket `#navbar div { color: #fff }` would whiten their text on a white panel and just move the problem. */ #navbar div[class*="text-gray-900"] { color: var(--pure-white) !important; } /* Active tab underline. Mintlify draws it as a 1.5px div filled with .bg-primary, our purple, which vanishes on the dark band, so dark mode takes --tab-active-underline. Light mode marks it in twilight-5 (light-mode header block below). */ #navbar div[class*="bg-primary"] { background-color: var(--tab-active-underline) !important; /* Mintlify ships this at h-[1.5px]. Every tab label is forced to one colour by the rule above, so the underline marks the active tab — 1.5px of it was too little to find, which is how selection got lost. 2px reads as a deliberate indicator without becoming a rule. The hover underline keeps 1.5px: it is not a state, just a hint. */ height: 2px !important; } #navbar [aria-selected="true"], #navbar [class*="border-primary"] { border-color: var(--lobyco-pink) !important; } /* The prototype's brand lockup is "Lobyco | Nexus Help Center". Mintlify loads the logo as an image, so the suffix cannot live in the SVG without being converted to outlines — but it can be drawn next to it in CSS, which keeps it as real text. */ #navbar a:has(> img) { display: inline-flex !important; align-items: center; } #navbar a:has(> img)::after { content: "Nexus Help Center"; font-size: 14px; font-weight: 500; color: var(--pure-white); padding-left: 12px; margin-left: 12px; border-left: 1px solid rgba(255, 255, 255, 0.22); letter-spacing: 0.01em; white-space: nowrap; } /* 124px wide, the brand guide's minimum logo size; Mintlify draws it 28px tall (97px wide). Pinned to Mintlify's img.nav-logo: re-check after a CLI upgrade. */ #navbar img.nav-logo { width: 124px; height: auto; } /* From lg up the header's top row is 96px instead of Mintlify's h-16 (64px), so the 54px search field has room around it. The sidebar and the table of contents are pinned under the header by Mintlify's own offsets, so they move down by the same 32px. Below lg the search is an icon and the row keeps 64px. Pinned to Mintlify's .h-16, #sidebar and #content-side-layout: re-check after a CLI upgrade. */ @media (min-width: 1024px) { #navbar .h-16 { height: var(--header-height-desktop); } #sidebar { top: calc(var(--header-height-desktop) + var(--topbar-tabs-height, 0rem)); height: calc(100dvh - var(--header-height-desktop) - var(--topbar-tabs-height, 0rem)); } #content-side-layout { top: calc(9.5rem + var(--header-height-desktop) - 4rem); height: calc(100vh - 9.5rem - var(--header-height-desktop) + 4rem); } } /* ── Home: the prototype's chrome, not Mintlify's ────────────────────────── On the landing page the port ended up with the search twice — once in the header band, once as the hero field — and with the section tabs sitting directly under the header field. The prototype does neither. The header search is hidden here because the prototype hides it too, and only here: html[data-route="home"] .topbar-search { display: none; } Home makes search the page's own focal point, so a second compact field in the band competes with it for the same job a few pixels away. Inner views keep the header field — that is where the prototype puts it as well ("carries search into every inner view"), and it is the only search on those pages. The tabs go because the prototype has no global nav at all — that is the whole premise of the V2 variant, and it was the last trait recorded as unreachable. It is reachable: the row is a real element and CSS can drop it. Everything the tabs pointed at is still reachable from this page — the 7-section grid, the "Which documentation you're in" table and the footer all link out, so nothing is stranded by removing them from *this* page. (Inner pages keep their tabs: the Business sidebar is the only other route, and it cannot reach the Integration or API Reference sections.) Scoped on `:has(.lh-hero)` rather than a URL: the hero exists only on the landing page, so the styling follows the view instead of a path that could change. With both rows gone the navbar collapses to the brand lockup and tools, and — being the same purple as the hero — merges into one band, which is what the prototype means by "search band merged into the header". Below `lg` the tab row is replaced by a hamburger-and-page-title row, which is the same navigation in mobile form — and on this page it is worse than redundant. `mode: "custom"` removes the sidebar, so its drawer opens with no links in it at all: an empty white panel holding a tab selector and the theme toggle. It goes too, on the same grounds. Inner pages keep it, where the drawer is the mobile sidebar and does work. */ body:has(.lh-hero) #search-bar-entry, body:has(.lh-hero) #search-bar-entry-mobile, body:has(.lh-hero) #navbar div:has(> .nav-tabs), body:has(.lh-hero) #navbar button:has(div[class*="text-gray-900"]) { display: none !important; } /* Removing a navbar row leaves its reserved space behind. Below `lg`, Mintlify offsets the content with a hardcoded `pt-[120px]` — the two-row navbar height — so with the second row gone the hero started 56px down the page and a band of cream showed between two purple areas. Re-set to the height the navbar actually has now. The media query is load-bearing: the same element resolves to 0 at `lg` and up, where the offset comes from elsewhere, so an unscoped override would push the desktop hero down instead. */ @media (max-width: 1023px) { body:has(.lh-hero) div[class*="pt-[120px]"] { padding-top: var(--header-height) !important; } } /* ── The header in light mode: ivory, with twilight text ─────────────────── The band above is ivory in light mode, so everything on it that the purple band had turned white turns twilight-5 here: tabs, buttons, the page title below lg and the mobile search button. "Nexus Help Center" is twilight-5 too, after a twilight-1 rule, and the active tab is marked in twilight-5. The search field keeps its own colours: its rules use two ids and win. Dark keeps the white-on-band rules above. */ html:not(.dark) #navbar a, html:not(.dark) #navbar button, html:not(.dark) #navbar span, html:not(.dark) #navbar p, html:not(.dark) #navbar svg, html:not(.dark) #navbar div[class*="text-gray-900"] { color: var(--lobyco-ink) !important; } html:not(.dark) #navbar a:has(> img)::after { color: var(--twilight-5); border-left-color: var(--twilight-1); } /* The tab labels at 14px Regular, the selected one Medium (Mintlify sets them all at 14px Medium). */ #navbar .nav-tabs-item { font-size: 14px; font-weight: 400; } #navbar .nav-tabs-item[data-active="true"] { font-weight: 500; } html:not(.dark) #navbar div[class*="bg-primary"] { background-color: var(--twilight-5) !important; } html:not(.dark) #search-bar-entry-mobile { background: var(--pure-white) !important; border-color: var(--twilight-1) !important; } html:not(.dark) #search-bar-entry-mobile * { color: var(--lobyco-ink) !important; } html:not(.dark) #search-bar-entry-mobile svg[style*="mask-image"] { background-color: var(--lobyco-ink); } /* ── Mobile search: translucent white on the dark band ───────────────────── Below `lg` search collapses to a 32px icon button sitting straight on the band, with no room to be a field — so it keeps the translucent treatment that answered the original "reads as disabled" finding. Light mode gives it a white fill and twilight-5 instead (light-mode header block above). The desktop field no longer uses this: it moved into the shared white field it now forms with the assistant chip, below, the same white field as the home hero's, so search does not change character when you navigate off home. */ #search-bar-entry-mobile { background: rgba(255, 255, 255, 0.14) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; border-radius: var(--radius-sm) !important; transition: background 0.15s, border-color 0.15s; } #search-bar-entry-mobile * { color: rgba(255, 255, 255, 0.85) !important; } /* The magnifier is not text: Mintlify draws it as an svg used as a mask over a `bg-gray-500` fill, so the colour rules above never reached it and it sat grey on the band. It takes the band's white as a background instead. Masked svgs only: on an inline svg a background paints the whole box, which is what turned the accordion caret into a square (2026-09-24). */ #search-bar-entry-mobile svg[style*="mask-image"] { background-color: var(--pure-white); } /* One definition of the sparkle, shared by both chips. Mintlify draws its own in the header as an inline SVG whose outer star is *stroked*, which a mask cannot reproduce — so the header's SVG is hidden and this is used in both places instead. That is the only way the two icons are actually identical rather than merely similar. */ :root { /* ── The search-field / Ask-Assistant contract ────────────────────────── The header pair and the home hero pair cannot be one component: the header's is Mintlify's own rendered DOM, which we can only override, and the hero's has to be our markup because Mintlify ships no in-page search block (that is why custom.js exists at all). So they are two rule sets by necessity — but they read every shared value from here, so the two cannot drift apart. Change a value once and both follow. Everything below aliases a real token. Sizes are the exceptions and are named rather than repeated. */ /* The section cards' colours: a twilight-1 outline, and on hover a --twilight-light-3 fill with a twilight-5 outline. */ --search-field-bg: var(--pure-white); --search-field-bg-hover: var(--twilight-light-3); --search-field-border: var(--twilight-1); --search-field-border-hover: var(--lobyco-ink); --search-field-radius: var(--radius-pill); --search-placeholder: var(--entry-body-text); --search-placeholder-size: 16px; --search-icon-color: var(--lobyco-ink); --search-icon-opacity: 0.6; /* Active-tab underline. The band is --lobyco-ink in *both* themes, so this takes one value rather than a pair: --twilight-1 measures 7.22:1 on it, against 4.78 for the pink it replaces and 4.72 for --twilight-2. The lightest purple is the right pick for a state that was getting missed. */ --tab-active-underline: var(--twilight-1); /* Numbered-step disc. --twilight-1 is the lightest step the light ramp has, so "one lighter" is not a ramp move here; --entry-fill-from is the only lighter lilac already in the system, and it takes the ink to 11.84:1. */ --step-disc-bg: var(--entry-fill-from); --step-disc-ink: var(--twilight-6); /* Accordion expand icon: lobyco.com's FAQ chevron, in the link purple. */ --accordion-chevron-ink: var(--twilight-5); --chevron-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --ask-chip-fill: linear-gradient(135deg, var(--entry-fill-from), var(--entry-fill-to)); /* No outline: the fill alone marks the chip inside the white field. */ --ask-chip-border: transparent; --ask-chip-border-hover: transparent; --ask-chip-radius: var(--radius-pill); --ask-chip-ink: var(--twilight-6); /* 3px + the field's own 1px border = a 4px inset in both places. */ --ask-chip-inset: 3px; --ask-chip-pad-x: 10px; --ask-chip-gap: 8px; --ask-chip-icon-size: 14px; --ask-chip-label-size: 14px; --ask-chip-label-weight: 400; --sparkle-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.658 2.99L4.395 2.569 3.974 1.306C3.837.898 3.162.898 3.025 1.306L2.604 2.569 1.341 2.99C1.137 3.058.999 3.249.999 3.464c0 .215.138.406.342.474l1.263.421.421 1.263c.68.204.26.342.475.342.215 0 .406-.138.475-.342l.421-1.263 1.263-.421c.204-.68.342-.259.342-.474 0-.215-.139-.406-.343-.474z'/%3E%3Cpath d='M9.5 2.75l1.912 4.837L16.25 9.5l-4.838 1.913L9.5 16.25l-1.913-4.837L2.75 9.5l4.837-1.913L9.5 2.75z'/%3E%3C/svg%3E"); } /* Dark mode redefines the same contract, so both the header pair and the hero pair switch together. Values follow what the rest of the dark page already uses: the field takes the card surface, the chip takes the entry cards' gradient and border. The placeholder differs per theme rather than sharing one token, because one value cannot serve both grounds: --band-placeholder (#9a90b5) measures 2.99:1 on the white light field — under the 4.5:1 minimum — but 5.59:1 on the dark surface. So each theme takes its own body-text role: 7.21:1 light, 9.16:1 dark. Both read stronger than a typical placeholder; that is the cost of staying on-palette, since no existing token lands in the 4.5–5.5 band on white. */ .dark { /* In dark the field cannot be told apart from the band by its fill. Every value in the dark ramp sits in the same narrow luminance band as the band itself — one full palette step above the ground is only 1.14:1, because near black WCAG's ratio barely moves however far you push perceived lightness. Light mode sets a white field on the ivory band and lets the twilight-1 outline carry it; dark has no equivalent at any fill. So the border carries the structure here, not the fill. --dark-text-faint reaches 4.63:1 against the band and 5.28:1 against the field's own ground fill, clearing 3:1 on both sides. The fill goes to the ground colour so the field reads as recessed into the band rather than floating on it. */ --search-field-bg: var(--dark-ground); --search-field-bg-hover: var(--dark-ground); --search-field-border: var(--dark-text-faint); --search-field-border-hover: var(--dark-brand); --search-placeholder: var(--dark-text-muted); /* One step lighter than --dark-subtle, which the ramp marks decorative-only at 2.27 against the ground — right for a disc that carries no meaning of its own. The ink moves up a step with it: on --dark-brand the lighter fill gave the numeral only 4.76:1, and this dark mode is built to clear more than the 4.5 floor. --twilight-dark-1 restores it to 6.58:1. */ --step-disc-bg: var(--twilight-dark-6); --step-disc-ink: var(--twilight-dark-1); --accordion-chevron-ink: var(--dark-brand); --search-icon-color: var(--dark-brand); /* --dark-brand is already a soft lavender; it needs no further knocking back. */ --search-icon-opacity: 1; /* Same problem for the chip: its fill is one step lighter than the field, but only 1.3:1 of one, so in dark an outline does the work. Light has none. */ --ask-chip-fill: linear-gradient(135deg, var(--dark-tint), var(--dark-subtle)); --ask-chip-border: var(--dark-brand); --ask-chip-border-hover: var(--dark-brand); --ask-chip-ink: var(--dark-text); } /* ── Search + Ask Assistant as one field ─────────────────────────────────── Two things at once: the assistant button was unreadable, and it should read as part of search rather than a button beside it. Unreadable because Mintlify fills #assistant-entry with `bg-background-light` — which resolves to our cream page ground, --page-ground — so it arrived as a light pill on the purple band, and the blanket `#navbar span/svg { color: #fff }` rule above then painted all three of its children (sparkle icon, "Ask Assistant" label, ⌘I hint) white on that cream: 1.06:1 each, an empty pill. Third time this band has caught the same thing, after the mobile page title (`text-gray-900` on purple) and the active-tab underline (`bg-primary`, our purple on our purple). Anything Mintlify styles for a light surface needs handling explicitly here. The treatment matches how the opened search modal presents the pair: a single field with "Ask Assistant" as a chip inset on the right — not two halves with a seam. Mintlify already renders the two as flush siblings with no gap inside one 432px flex wrapper, so the wrapper can carry the field's own look while the search button goes transparent and the assistant becomes the chip. No divider anywhere: the chip's own fill is what separates the two actions. The field carries the same values as the hero's `.lh-search-group` — white ground, the same hairline border, the same hover — and the chip carries the entry cards' fill and outline, exactly as the hero's does. Search keeps its look and feel when you navigate off home instead of changing character. That does revisit the earlier "translucent, not a white box" call for the header field. Deliberately: the hero's search is a white field too, so the translucent header was the odd one out. */ #navbar div:has(> #search-bar-entry) { background: var(--search-field-bg); border: 1px solid var(--search-field-border); border-radius: var(--search-field-radius); transition: background 0.15s, border-color 0.15s; } #navbar div:has(> #search-bar-entry):hover, #navbar div:has(> #search-bar-entry):focus-within { background: var(--search-field-bg-hover); border-color: var(--search-field-border-hover); } /* 500px, longer than Mintlify's 432px but under the 600px Home search field, which read too big in the header (the author's call, 2026-10-09). Mintlify makes this wrapper `flex-1`, one third of the header. The logo and the icons beside it stay `flex-1`, so the field stays centred; it may shrink where the header is too narrow for 500px beside the logo. */ #navbar div:has(> #search-bar-entry) { flex: 0 1 500px; } /* The search button gives up its own surface to the wrapper above. Clearing box-shadow is the load-bearing part: Mintlify puts `ring-1 ring-gray-400/30` on this button, and Tailwind compiles a ring to a spread box-shadow, not a border. So it drew a 1px outline around the search half *inside* the white field — and its right edge was the line still showing between search and the chip after the borders were already gone. */ #search-bar-entry { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* The same 54px height, 16px inset and 16px text as the Home search field: 52px here plus the wrapper's 1px border top and bottom. Mintlify ships h-9 (36px). */ #navbar #search-bar-entry { height: 52px !important; padding-left: 16px !important; font-size: var(--search-placeholder-size) !important; } /* Two ids throughout this block on purpose: the band's blanket white rule further up is `#navbar span`, which at one id plus one type out-specifies a plain `#search-bar-entry *`. Both carry !important, so specificity decides — and on a white field the losing side is legibility. */ #navbar #search-bar-entry * { color: var(--search-placeholder) !important; } #navbar #search-bar-entry svg { color: var(--search-icon-color) !important; opacity: var(--search-icon-opacity); } /* The chip: the entry cards' fill, same as the hero's. */ #assistant-entry { background: var(--ask-chip-fill) !important; border: 1px solid var(--ask-chip-border) !important; box-shadow: none !important; border-radius: var(--ask-chip-radius) !important; /* 3px + the field's 1px border = the same 4px inset the hero chip sits at. The left margin is the one value that differs from the hero, and it earns its place: with the chip flush against the search half, its own left border landed 12px from the ⌘K hint and read as a seam divider rather than as the chip's outline. The hero gets the same separation for free, from the empty space its wider field leaves. */ margin: var(--ask-chip-inset) var(--ask-chip-inset) var(--ask-chip-inset) 10px !important; height: 30px !important; gap: var(--ask-chip-gap) !important; padding: 0 var(--ask-chip-pad-x) !important; transition: border-color 0.15s; } #assistant-entry:hover { border-color: var(--ask-chip-border-hover) !important; } #navbar #assistant-entry * { color: var(--ask-chip-ink) !important; } /* Mintlify's inline sparkle goes, replaced by the shared mask above, so this chip's icon is the hero's icon and not a lookalike. */ #navbar #assistant-entry svg { display: none !important; } #navbar #assistant-entry::before { content: ""; width: var(--ask-chip-icon-size); height: var(--ask-chip-icon-size); flex: 0 0 auto; background-color: var(--ask-chip-ink); -webkit-mask: var(--sparkle-mask) center / contain no-repeat; mask: var(--sparkle-mask) center / contain no-repeat; } /* Matches the hero label: 13px regular, and a line box tight to the glyphs so "Ask Assistant" — which has no descenders — does not sit high. Mintlify ships it at 14px, which read oversized against the narrower header field. */ #navbar #assistant-entry span { font-size: var(--ask-chip-label-size) !important; font-weight: var(--ask-chip-label-weight) !important; line-height: 1 !important; } /* The ⌘I keycap is the second span. The hero chip has no keycap, and 1:1 with the hero is the point — it also bought back the width the label needed. */ #navbar #assistant-entry span + span { display: none !important; } /* On home the header search is hidden (the hero owns search there — see the hero rules above), so the header cannot show a field with a chip in it. The hero carries the pair instead, and the lone header chip would duplicate it. Same call already made for search, for the same reason. */ body:has(.lh-hero) #navbar div:has(> #search-bar-entry), body:has(.lh-hero) #assistant-entry { display: none !important; } /* #assistant-entry-mobile is left as it is: a bare icon with no surface of its own, sitting straight on the band, where the band's text colour rule is already the right answer. It stays visible on home too — below `lg` there is no room to pair it with anything, and it is the only assistant access once the hero has scrolled away. */ /* ── "Get help" CTA — the prototype's pink on the purple band ──────────────*/ /* Mintlify paints the button with an absolutely-positioned inner span (.bg-primary-dark), not on the anchor itself — colouring the anchor does nothing visible. */ #topbar-cta-button span[class*="bg-primary"] { background: var(--lobyco-pink) !important; border-radius: var(--radius-sm) !important; } #topbar-cta-button a, #topbar-cta-button a *, #topbar-cta-button button, #topbar-cta-button button * { color: var(--color-text-primary) !important; font-weight: 500; } /* The sidebar's scroll-fade is a sticky gradient hardcoded to fade from --background-light (white). It does not follow the override above, so it leaves a white sliver under the navbar and has to be re-pointed at cream. */ .sticky.pointer-events-none[class*="bg-linear-to-b"], [class*="from-background-light"] { background-image: linear-gradient( to bottom, var(--page-ground) 0%, rgba(var(--page-ground-rgb), 0) 100% ) !important; } /* ── Accordions: white on the ivory ground ──────────────────────────────── Mintlify paints each with `bg-background-light`, which is `background.color.light` from docs.json — the page ground itself. The Troubleshooting questions therefore sat flush with the page and did not read as a group you can open. White lifts them off it. Light mode only: in dark mode Mintlify already uses `bg-codeblock`, a step off the ground, so the questions stand out there without help. Every tab since 2026-10-07; Business only before that, when Integration and API Reference were treated as other teams' content. Pinned to Mintlify's `.accordion` class on the

element — re-check after a CLI upgrade. The ID in the selector outranks the utility class, so no !important is needed. */ html:not(.dark) #content-area details.accordion { background: var(--pure-white); } /* A hairline grey-2 border at 16px. An draws one border around all its questions, so the group gets it; a lone gets it itself. The box itself does not react to the pointer — only the question row does, below. */ html:not(.dark) #content-area .accordion-group, html:not(.dark) #content-area :not(.accordion-group) > details.accordion { border: 1px solid var(--grey-2); border-radius: var(--radius-md); } /* The question under the pointer takes the site's hover, --twilight-light-3; it replaces Mintlify's `hover:bg-gray-100`. */ html:not(.dark) #content-area details.accordion > summary:hover { background: var(--twilight-light-3); } /* On hover the question also turns twilight-5, the site's link purple. The title carries Mintlify's own `text-gray-900`, so it has to be named. */ html:not(.dark) #content-area details.accordion > summary:hover [data-component-part="accordion-title"] { color: var(--twilight-5); } /* The expand icon is lobyco.com's FAQ chevron, at the end of the question row, pointing down and turning over when the answer opens. That site sets it in a sunflower circle; here it stands alone, at 16px, so the row keeps Mintlify's height. Mintlify puts its caret before the title, as an svg inside [data-component-part="accordion-caret-right"], and draws that svg two ways: an inline svg on the deployed site, a masked empty svg on the local CLI (4.2.791). Styling the svg itself is what put a filled purple square on the live site on 2026-09-24. So the svg is hidden and the chevron is its wrapper's own ::after, the same on both. `order` moves it after the title; the summary is already a centred flex row. Both themes, unlike the white fill above: an icon that changed sides with the theme would read as a fault. */ #content-area details.accordion > summary > [data-component-part="accordion-caret-right"] { order: 1; flex: none; display: flex; margin: 0 0 0 16px; } #content-area details.accordion > summary > [data-component-part="accordion-caret-right"] > svg { display: none; } #content-area details.accordion > summary > [data-component-part="accordion-caret-right"]::after { content: ""; width: 16px; height: 16px; background: var(--accordion-chevron-ink); -webkit-mask: var(--chevron-mask) center / contain no-repeat; mask: var(--chevron-mask) center / contain no-repeat; transition: transform 0.2s ease; } #content-area details.accordion[open] > summary > [data-component-part="accordion-caret-right"]::after { transform: rotate(180deg); } /* Mintlify's caret keeps itself visible in Windows high-contrast mode, which would otherwise repaint the chevron's fill and erase it. Same here. */ @media (forced-colors: active) { #content-area details.accordion > summary > [data-component-part="accordion-caret-right"]::after { forced-color-adjust: none; background: CanvasText; } } /* ── Sidebar: transparent over cream, active item in brand purple ─────────*/ #sidebar, #sidebar-content { background: transparent !important; } /* Sidebar rhythm. Mintlify gives every ul.sidebar-group `mt-8` (32px), which assumes a handful of named groups. This IA has eleven top-level entries and seven of them are single pages, so each one became its own group and the list read as very loosely spaced — 32px between siblings, against 1px between children. Re-set on the desktop spacing scale: space-8 between groups, space-4 between items within a group. Enough to keep the grouping legible without the list falling apart. */ #sidebar-content ul.sidebar-group { margin-top: 8px !important; } #sidebar-content ul.sidebar-group:first-child { margin-top: 0 !important; } #sidebar-content ul.sidebar-group > li + li, #sidebar-content li.space-y-px > ul > li + li { margin-top: 4px !important; } /* The children list sits directly after its parent link inside the same li, so the first child inherits the 1px `space-y-px` step rather than the 4px above. */ #sidebar-content li.space-y-px > ul { margin-top: 4px !important; } /* ── Selected and hover states ───────────────────────────────────────────── Three of Mintlify's defaults don't survive on a near-black ground. 1. The faux bold. The selected sidebar item and the active tab are marked with `[text-shadow:-0.2px_0_0_currentColor,0.2px_0_0_currentColor]` — the glyph smeared sideways to fake a heavier weight, not a real font-weight (both compute 400). It goes, in both themes. 2. The selected background. Mintlify uses `bg-primary/10`, and in dark `dark:bg-primary-light/10` — #8c7cea at 10% alpha, which over our ground resolves to #050410 at 1.00:1. There was no pill at all in dark, which is why the faux bold had been carrying the entire selected state. It gets a real surface, 1.16:1 against the ground — light's own pill sits at 1.25 against its page, so the two themes read at about the same strength. The label colour is untouched, and it is the label that sets the ceiling on how light the pill may be: a deeper pill was tried first and dropped the label to 3.90:1. 3. Hover. The sidebar's `dark:hover:bg-gray-200/5` is 5% white on near-black: present in the cascade, absent to the eye. It takes --dark-hover, a neutral wash at the same depth as the selected surface, with ink text, so the two are told apart by hue and label rather than by depth. The tabs were worse — the band's blanket white rule further up overrides `dark:hover:text-gray-300`, so tab hover did nothing at all. Tabs now sit muted when inactive and go to full ink on hover or when active, the distinction that rule had been flattening. Light's tab hover is killed by the same rule; it is left alone here because light never had one to match, so adding it is a change to light's look rather than a fix. Worth doing separately if wanted. ───────────────────────────────────────────────────────────────────────── */ #sidebar-content *, #navbar .nav-tabs-item, #navbar .nav-tabs-item * { text-shadow: none !important; } /* Background only. The label keeps the colour it already had: #8c7cea, which Mintlify reads as `primary-light` but which is ours — Foundation twilight-3, set in docs.json as colors.light, the same value the light theme uses. An earlier pass repainted it from the dark ramp, which nobody asked for. Keeping it constrains the surface rather than the other way round: #8c7cea only clears 4.5:1 on a pill at or below this lightness, and reads 5.18:1 here. Hover is a *neutral* wash of the same depth, so a hovered row and the selected row are told apart by hue and by the label, not by one sitting deeper than the other. */ .dark #sidebar-content [class*="bg-primary"] { background-color: var(--dark-selected) !important; } /* Light hover: Mintlify's `hover:bg-gray-600/5` grey wash becomes --twilight-light-3, the hover the home rows and cards use, so every hover wash on the site is the same light twilight. The label turns twilight-5, as the accordion questions and home rows do; it replaces Mintlify's `hover:text-gray-900`, and the text inherits it. Matched on Mintlify's class name — if an upgrade renames it, the hover falls back to its grey and nothing breaks. The selected item keeps its bg-primary pill, and the header band is left out. */ html:not(.dark) [class*="hover:bg-gray-600/5"]:hover:not([class*="bg-primary"]):not(#navbar *) { background-color: var(--twilight-light-3); color: var(--twilight-5); } .dark #sidebar-content a:hover:not([class*="bg-primary"]), .dark #sidebar-content button:hover:not([class*="bg-primary"]) { background-color: var(--dark-hover) !important; color: var(--dark-text) !important; } .dark #navbar .nav-tabs-item, .dark #navbar .nav-tabs-item * { color: var(--dark-text-muted) !important; } .dark #navbar .nav-tabs-item:hover, .dark #navbar .nav-tabs-item:hover *, .dark #navbar .nav-tabs-item[data-active="true"], .dark #navbar .nav-tabs-item[data-active="true"] * { color: var(--dark-text) !important; } /* ── The footer ──────────────────────────────────────────────────────────── Mintlify's "Powered by" badge stays: we are on the free plan, and the attribution comes off when we pay for one, not by CSS. So the footer stays visible too. It has no divider above it, on any page, in either theme. Mintlify's `border-t` sits in a layer, so this unlayered rule wins without !important. */ #footer { border-top-width: 0; } /* Mintlify hides the footer on `mode: "custom"` pages, which leaves the home page without one. It does so with `peer-[.is-custom]:hidden!` — an `!important` utility in Tailwind's `utilities` layer, which nothing unlayered can beat. For `!important` the layer order runs backwards, so the same declaration in the earlier `base` layer wins. Pinned to Mintlify's Tailwind layer names and `#footer`: after a CLI upgrade, check the home page still has its footer. */ @layer base { body:has(.lh-hero) #footer { display: flex !important; } } /* Mintlify draws the footer links at `text-gray-950/50` — half opacity, which comes out at 2.6:1 on the cream page, under the 4.5:1 minimum. They take --grey-7 (8.8:1), a step lighter than the column headings' --grey-8, and --twilight-5 on hover like links in the text. Light mode only; dark keeps Mintlify's white at 50%. "Powered by" is left as it is. */ html:not(.dark) #footer a[class*="text-gray-950/50"] { color: var(--grey-7); } html:not(.dark) #footer a[class*="text-gray-950/50"]:hover { color: var(--twilight-5); } /* ── Dark mode ──────────────────────────────────────────────────────────── The prototype notes this explicitly: --lobyco-ink flips to a light lavender for text use in dark, so the band needs its own value rather than the token. */ .dark #navbar, .dark #navbar-transition, .dark #navbar-transition-mint { background: var(--dark-hero) !important; } /* Mintlify's navbar wrapper carries `border-b border-gray-500/5 dark:border-gray-300/[0.06]`, which draws a hairline across the foot of the band on every page. It measures 1.02:1 against the band — invisible to a contrast audit — but the eye reads a thin edge at far lower luminance difference than a fill, so on the near-black dark band it shows as a seam between the header and the content. On the ivory band it showed as a grey line under the header, so it goes in both themes. Colour rather than `border-bottom: none`, so the 1px keeps its place in the layout and nothing below it shifts. Matched on the utility class because the wrapper has no id or stable class of its own. */ #navbar [class*="border-b"] { border-bottom-color: transparent !important; } .dark .sticky.pointer-events-none[class*="bg-linear-to-b"], .dark [class*="from-background-light"] { background-image: linear-gradient( to bottom, var(--dark-ground) 0%, rgba(6, 1, 27, 0) 100% ) !important; } /* ═══════════════════════════════════════════════════════════════════════════ Getting started — the V2 prototype's #home view, reproduced. Values copied from v2-no-global-nav.html's own rules. Classes are prefixed `lh-` so they never collide with Mintlify's own .card / .grid / .search. The page uses frontmatter `mode: "custom"`, which drops the sidebar and TOC — the prototype's home has neither. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Hero: ivory, search as the focal point ──────────────────────────────── In light mode Home is one ivory ground: the hero has no fill of its own, so the page's --page-ground shows through, under the ivory header every page has. Dark keeps its flat --dark-hero band. */ .lh-hero { position: relative; overflow: hidden; padding: 56px 32px 60px; text-align: center; } .lh-hero-inner { position: relative; z-index: 2; max-width: 600px; margin: 0 auto; } .lh-hero h1 { /* Aglet Sans 700, as on lobyco.com; Poppins if the Adobe kit fails. */ font-family: "aglet-sans", "Poppins", sans-serif; /* 48px: Aglet Sans draws smaller than Poppins, and read small at 40px. 110% line-height, the brand guide's value for Aglet from 36pt. */ font-size: 48px; font-weight: 700; line-height: 1.1; color: var(--lobyco-ink); margin: 0 0 16px; } .dark .lh-hero h1 { color: var(--pure-white); } /* The field is the group, not the search half: search sits transparent inside it and "Ask Assistant" is a chip inset on the right — the same arrangement the header carries, and the same one the opened search modal uses. Inline, not an overlay. */ .lh-search-group { max-width: 100%; /* 54px tall, border included; the search half and the chip stretch to it. */ min-height: 54px; margin: 0 auto; background: var(--search-field-bg); border: 1px solid var(--search-field-border); border-radius: var(--search-field-radius); display: flex; align-items: center; transition: background 0.15s, border-color 0.15s; } .lh-search-group:hover, .lh-search-group:focus-within { background: var(--search-field-bg-hover); border-color: var(--search-field-border-hover); outline: none; } .lh-search { flex: 1 1 auto; align-self: stretch; min-width: 0; padding: 10px 16px; display: flex; align-items: center; gap: 10px; cursor: text; } .lh-search:focus { outline: none; } .lh-ask { flex: 0 0 auto; /* Stretch rather than a fixed height, so the chip is inset by the same 4px on all three sides it touches. The search half sets the field's height. */ align-self: stretch; display: flex; align-items: center; gap: var(--ask-chip-gap); margin: var(--ask-chip-inset) var(--ask-chip-inset) var(--ask-chip-inset) 0; padding: 0 var(--ask-chip-pad-x); /* A light lilac fill, so the chip reads as a quiet control inside the white field rather than a one-off purple button. */ background: var(--ask-chip-fill); border: 1px solid var(--ask-chip-border); border-radius: var(--ask-chip-radius); cursor: pointer; transition: border-color 0.15s; } .lh-ask:hover { border-color: var(--ask-chip-border-hover); } /* With no outline at rest, keyboard focus needs a ring of its own. */ .lh-ask:focus { outline: none; } .lh-ask:focus-visible { outline: 2px solid var(--ask-chip-ink); outline-offset: 1px; } .lh-ask-label { font-size: var(--ask-chip-label-size); font-weight: var(--ask-chip-label-weight); color: var(--ask-chip-ink); white-space: nowrap; /* line-height 1 rather than the inherited 1.5: "Ask Assistant" has no descenders, so in a tall line box the glyphs centre high and the chip reads off-centre even though the boxes are symmetric to the pixel. */ line-height: 1; } /* Same sparkle Mintlify draws in the header chip, as a mask so it takes the label's colour. Both paths filled: the outer star is stroked in Mintlify's own SVG, which a mask cannot use. */ .lh-ask-icon { width: var(--ask-chip-icon-size); height: var(--ask-chip-icon-size); flex-shrink: 0; background-color: var(--ask-chip-ink); -webkit-mask: var(--sparkle-mask) center / contain no-repeat; mask: var(--sparkle-mask) center / contain no-repeat; } .lh-search-placeholder { font-size: var(--search-placeholder-size); color: var(--search-placeholder); /* The chip takes real width out of the field, so the placeholder has to give way on one line rather than wrap the field to three. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Below 640px the label costs more than it earns — 129px of a ~340px field, which pushed the placeholder onto three lines. The chip keeps the sparkle and the affordance, and loses the words. */ @media (max-width: 640px) { .lh-ask-label { display: none; } .lh-ask { padding: 0 9px; /* icon-only: 9px + 1px border = the icon's 10px inset */ } } .lh-search-icon { width: 16px; height: 16px; flex-shrink: 0; background-color: var(--search-icon-color); opacity: var(--search-icon-opacity); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") center / contain no-repeat; } .lh-suggestions { margin: 14px 0 0; display: flex; flex-wrap: nowrap; justify-content: center; gap: 10px; font-size: 14px; } /* `color` needs !important here: the content link rule above is an ID selector plus an attribute selector, so it out-specifies a plain class. */ /* Round pills in twilight-5 with lilac-1 text (8.6:1), the fill deepening to twilight-6 on hover. Same pill shape as the search field above them. */ .lh-suggestions a { display: inline-flex; align-items: center; white-space: nowrap; background: var(--twilight-5); border: 1px solid var(--twilight-5); border-radius: var(--radius-pill); /* 40px tall, a step under the 54px search field above. */ min-height: 40px; padding: 0 16px; color: var(--lilac-1) !important; text-decoration: none; transition: background 0.15s, border-color 0.15s, transform 0.15s; } .lh-suggestions a:hover { background: var(--twilight-6); border-color: var(--twilight-6); transform: translateY(-1px); } /* On the dark band, a solid fill from the palette: the border clears 4.36 against the band and 3.34 against its own fill, and the white label keeps 10.6 on --dark-subtle. */ .dark .lh-suggestions a { background: var(--dark-subtle); border-color: var(--dark-border); color: var(--pure-white) !important; } /* ── Page body ─────────────────────────────────────────────────────────── Below the hero: a short list of getting-started articles as rows, then one grid of section cards for both audiences. */ .lh-page { max-width: 1100px; margin: 0 auto; /* 32px from the hero to the first section and after the last one before the footer, 56px between sections. */ padding: 32px; display: flex; flex-direction: column; gap: 56px; } .lh-section-label { margin-bottom: 14px; } .lh-section-label h2 { /* Aglet Sans 700. 28px, the brand guide's minimum for Aglet and 12px over the 16px body; 120% line-height, its value from 28pt. */ font-family: "aglet-sans", "Poppins", sans-serif; font-size: 28px; font-weight: 700; line-height: 1.2; margin: 0; color: var(--lobyco-ink); } /* ── Getting started: two columns of rows ────────────────────────────────── Column flow, so the first three rows — the marketer articles — fill the left column and the developer ones the right. Each row is the title, where it lives, then the arrow at the end, with a hairline between rows. The label takes only its own width and sits right-aligned against the arrow, so the labels line up on their right edge and the 16px title gets the rest. Titles are never cut short: a long one wraps instead. */ .lh-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 48px; } /* The row reaches 12px past the text on both sides, so the hover wash has room around the words while the text stays aligned with the heading. */ .lh-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; grid-template-areas: "title meta arrow"; align-items: center; column-gap: 16px; padding: 12px; margin: 0 -12px; border-radius: var(--radius-sm); text-decoration: none; transition: background 0.15s; } /* The hairline is drawn rather than a border, so it can sit inset to the text and stay straight under the row's rounded corners. */ .lh-row::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 1px; background: var(--grey-2); } /* The last row of each column closes it, so it drops its hairline. */ .lh-row:nth-child(3n)::after { display: none; } /* --twilight-light-3, a step deeper than lobyco.com's menu hover, and the title turns twilight-5. The cards, the sidebar and the accordions share it. The hairlines either side of the hovered row step aside so the wash reads as one shape. */ .lh-row:hover { background: var(--twilight-light-3); } .lh-row:hover::after, .lh-row:has(+ .lh-row:hover)::after { opacity: 0; } .lh-row-title { grid-area: title; font-size: 16px; /* Regular: at 16px the size alone sets the titles apart from the labels. --grey-8, the same as the section cards' body text. */ font-weight: 400; color: var(--grey-8); transition: color 0.15s; } /* Right-aligned, so the audience label sits against the arrow at the row's end. */ .lh-row-meta { grid-area: meta; justify-self: end; text-align: right; font-size: 14px; font-weight: 500; /* --twilight-5, like the section and card titles. */ color: var(--twilight-5); white-space: nowrap; } .lh-row-arrow { grid-area: arrow; display: inline-flex; justify-content: flex-end; } .lh-row:hover .lh-row-title { color: var(--twilight-5); } /* ── Section cards: icon, title, one line, count ──────────────────────────── One grid for both audiences, three across, 12px apart. Each card is white with a twilight-1 outline and 24px corners: a 38px purple disc on the left, an 18px Aglet Sans Regular twilight-5 title, 14px grey-8 body text, and the count in a lilac-1 pill. The icon is Font Awesome Regular at 15px in lilac-1, for lines about 1.4px thick. On hover the card fills --twilight-light-3, the site's hover, its outline turns twilight-5 and it lifts 2px, with no shadow. */ .lh-collections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .lh-collection { display: flex; align-items: stretch; gap: 14px; /* 16px 18px, so 14px body text fits without wrapping onto a third line. */ padding: 16px 18px; background: var(--pure-white); /* A very light outline: twilight-1, the lightest twilight in the Foundation. It turns twilight-5 on hover. */ border: 1px solid var(--twilight-1); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; transition: background 0.15s, transform 0.15s, border-color 0.15s; } .lh-collection:hover { background: var(--twilight-light-3); border-color: var(--twilight-5); transform: translateY(-2px); } .lh-collection-icon { display: flex; align-self: flex-start; flex-shrink: 0; } /* The purple disc with a lilac-1 glyph. Mintlify paints as a masked svg filled by its bg-primary utility, so recolouring the glyph means overriding that fill — pinned to Mintlify's markup: re-check after a CLI upgrade. The utility sits in a cascade layer, so this unlayered rule wins without !important. A `color` prop on would need a hex in the page, which pages never carry. */ .lh-collection-tile { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--lobyco-ink); } .lh-collection-tile svg { background-color: var(--lilac-1); } .lh-collection-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .lh-collection h3 { /* Aglet Sans Regular, 18px. */ font-family: "aglet-sans", "Poppins", sans-serif; font-size: 18px; font-weight: 400; margin: 0 0 4px; color: var(--lobyco-ink); } /* 14px in --twilight-6 at full strength, so the line reads clearly. */ .lh-collection p { font-size: 14px; line-height: 1.55; color: var(--grey-8); margin: 0 0 12px; } /* Pushed to the card's foot, so counts line up across a row whatever the description's length. Article counts are shown on purpose: the IA applies depth only where size demands it, so relative weight is worth seeing. */ .lh-collection-count { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; /* The pills reversed: a lilac-1 tag with twilight-5 text (8.6:1). */ background: var(--lilac-1); border-radius: var(--radius-pill); padding: 4px 12px; font-size: 12px; font-weight: 600; color: var(--twilight-5); white-space: nowrap; } @media (max-width: 980px) { .lh-rows { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; } /* One column, so only the very last row closes the list. */ .lh-row:nth-child(3n)::after { display: block; } .lh-row:last-child::after { display: none; } .lh-collections { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lh-suggestions { flex-wrap: wrap; } } @media (max-width: 640px) { /* 40px wraps "How can we help?" onto two lines at phone width. */ .lh-hero h1 { font-size: 32px; line-height: 1.2; } .lh-page { padding: 32px 16px; } .lh-row { grid-template-columns: minmax(0, 1fr) 14px; grid-template-areas: "title arrow" "meta arrow"; row-gap: 2px; } /* Under the title, the label lines up with it on the left again. */ .lh-row-meta { justify-self: start; text-align: left; } .lh-collections { grid-template-columns: minmax(0, 1fr); } } /* ── Dark mode ───────────────────────────────────────────────────────────*/ /* Mintlify paints the prev/next article links and the breadcrumb with colors.primary from docs.json — #492c9d, the light-mode brand — and ships no dark override, so both landed at ~2.06:1 on the dark ground. 14px body text needs 4.5. The pagination links are the page's forward/back controls, so they take the brand step: 10.82. The breadcrumb is quieter, a position marker rather than a destination, so it takes muted ink at 10.94 and goes to full ink on hover. !important on both because Mintlify's colour sits on the child spans and on the bare anchor inside .breadcrumb-item, not on the element carrying the dark: utility classes. */ .dark #pagination a, .dark #pagination a * { color: var(--dark-brand) !important; } .dark .breadcrumb-item, .dark .breadcrumb-item a { color: var(--dark-text-muted) !important; } .dark .breadcrumb-item a:hover { color: var(--dark-text) !important; } /* Body links, same root cause again. Mintlify colours `.link` and the heading permalink anchors with colors.primary — twilight-5 #492c9d — and never swaps to its dark variant, so every in-article link sat at 2.06:1 on the ground and 1.78 inside a card or callout. At 16px that is a straight fail. Twilight-3 instead, which is what docs.json already declares as colors.light: 5.99 on the ground, and 5.07 at worst on the warning callout, so it clears 4.5 on every surface a link can land on. Hover lifts to twilight-2. Both are Foundation primitives rather than dark-ramp steps — these are brand link colours, not surfaces. Excludes .lh-* because the home page's own cards also carry `link`. */ .dark #content-area a.link:not([class*="lh-"]), .dark #content-area :is(h1, h2, h3, h4, h5, h6) a { color: var(--twilight-3) !important; } .dark #content-area a.link:not([class*="lh-"]):hover { color: var(--twilight-2) !important; } .dark .lh-hero { background: var(--dark-hero); } .dark .lh-section-label h2 { color: var(--dark-brand); } /* Row hairlines are separators, not control edges, so they take the quieter --dark-subtle; the card outlines are boundaries and keep --dark-border. The hover wash is the sidebar's dark hover, as the light one is the sidebar's. */ .dark .lh-row::after { background: var(--dark-subtle); } .dark .lh-row:hover { background: var(--dark-hover); } .dark .lh-row-title { color: var(--dark-text); } .dark .lh-row-meta { color: var(--dark-text-muted); } .dark .lh-row:hover .lh-row-title { color: var(--dark-brand); } .dark .lh-collection { background: linear-gradient(135deg, var(--dark-tint), var(--dark-ground)); border-color: var(--dark-entry-border); } .dark .lh-collection:hover { border-color: var(--dark-brand); } .dark .lh-collection-count { background: var(--dark-subtle); } .dark .lh-collection h3 { color: var(--dark-text); } .dark .lh-collection p, .dark .lh-collection-count { color: var(--dark-text-muted); } /* No `.dark .lh-search` / `.lh-search-icon` overrides here any more: the field surface moved to .lh-search-group and both it and the icon now read the contract, which has its own .dark block. The old rules painted the inner search half --dark-surface while the group stayed white — a dark block inside a white field, which is what "the search bar looks broken" was. */ /* ── Numbered steps: the numeral in a disc ─────────────────────────────────── Slack's help articles carry step numbers in a filled circle rather than as a bare decimal, which is what makes a step sequence readable at a glance. Same treatment here, built from the counter rather than from markup, so an author writes a plain `1.` list and gets the disc for free. Every tab since 2026-10-07; scoped to Business Documentation before that, when Integration and API Reference were treated as other teams' content. Scoped to `.mdx-content`, the article body, not all of #content-area: the deployed site renders the breadcrumb above the title as an `ol` too, which put a "1" disc beside the section name (2026-09-24). The local CLI renders it as divs, so this never showed on localhost. Measured: the numeral is --twilight-6 on a --twilight-1 disc at 10.48:1 light, and --dark-brand on --dark-subtle at 7.05:1 dark. Both AAA. The disc itself sits at 1.29:1 against the ivory page and 1.53:1 against the dark ground — deliberately below 3:1, because the disc is a decorative container and not a UI boundary: the numeral inside it is already the strongest text on the line, so nothing is conveyed by the disc's edge alone. Giving it a 3:1 edge on ivory would need --twilight-5 or darker, which reads as a filled badge rather than a step marker. */ #content-area .mdx-content ol { list-style: none; padding-left: 0; counter-reset: lh-step; /* Both dimensions the disc needs, declared once. --step-line must match the list's own line-height: the disc is centred on the first line box, and `1lh` cannot do that job here because inside the ::before it resolves against the pseudo-element's own line-height (1), not the list item's. */ --step-line: 1.75rem; --step-disc-size: 1.625rem; } #content-area .mdx-content ol > li { counter-increment: lh-step; position: relative; padding-left: 2.5rem; } #content-area .mdx-content ol > li::before { content: counter(lh-step); position: absolute; left: 0; /* Centre the disc on the first line box: half the difference between the line and the disc. Lands within 0.25px of the first line's ink centre. */ top: calc((var(--step-line) - var(--step-disc-size)) / 2); width: var(--step-disc-size); height: var(--step-disc-size); border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; /* 13px in a 26px disc left the numeral looking small and unseated. 14px puts its cap height at roughly 40% of the disc, which is what reads as centred. No font-variant-numeric: Poppins as loaded has no tabular figures — 1 measures 4.71px and 4 measures 8.59px with the property on or off — so declaring it did nothing. Each numeral is centred on its own advance. */ font-size: 0.875rem; font-weight: 600; /* line-height 1 is what centres the numeral: the ::before inherits the list's line-height otherwise, so the text box grows taller than the 26px disc and flex centres the box, not the glyph. */ line-height: 1; background: var(--step-disc-bg); color: var(--step-disc-ink); } /* ── Step numbers: the same disc ───────────────────────────────────────────── A component numbers each step in Mintlify's own grey disc, 28px with a 12px numeral, while a numbered list a paragraph away carries the lilac disc above. One disc for both (2026-10-07): the step indicator takes the list's fill, ink, numeral size and weight, and keeps Mintlify's 28px so the connecting line positioned against it is untouched. Pinned to Mintlify's `step-indicator` group class on the indicator div — re-check after a CLI upgrade. The ID outranks the utility classes, so no !important. */ #content-area .steps .step [class*="step-indicator"] { background: var(--step-disc-bg); color: var(--step-disc-ink); font-size: 0.875rem; font-weight: 600; } /* ── Article subheadings: regular weight, 26px ─────────────────────────────── Every h2 in an article — each step, Troubleshooting, Related, Before you start, Failure and edge cases — is set at 400, one weight for all of them. Size is what separates a heading from the body; at Mintlify's 600 they read as a run of equally loud bars. 26px, up from Mintlify's 24, because Aglet Sans (below) draws smaller than Poppins. The page title stays at Mintlify's 36. Business only until 2026-10-07, when Integration and API Reference joined so that every page shares one heading style. This used to reach step headings only, by the id Mintlify generated from "Step N:", and left Troubleshooting and Related at 600. They now match the rest, so the rule needs no id. Mintlify's own `font-semibold` on the heading is a utility class, which the ID in this selector outranks. `.mdx-content > h2`, not any h2: a title is an h2 too, nested inside the card, and cards keep Mintlify's styling. */ #content-area .mdx-content > h2 { font-weight: 400; font-size: 26px; } /* ── Article headings in Aglet Sans ────────────────────────────────────────── The page title and the article's own h2s and h3s take Aglet Sans, as on lobyco.com, with Poppins behind it for when the Adobe kit in fonts.css does not load. Body text stays Poppins. Weights stay as they are. Aglet comes in 400 and 700 only, so the h2s above stay 400 and the title and h3s, at Mintlify's 600, draw at 700. Same `.mdx-content >` scoping as above for h2, so card titles keep Poppins. h3 is a descendant selector, not a child: an Integration guide puts its h3s inside , four divs down from .mdx-content, and they must match the h2s above them. No component gives an h3 of its own, so nothing else is reached. Every tab, since 2026-10-07; the Home page has rules of its own. */ #page-title, #content-area .mdx-content > h2, #content-area .mdx-content h3 { font-family: "aglet-sans", "Poppins", sans-serif; } /* ── Diagram boxes: 12px corners ───────────────────────────────────────────── Every box in an article's Mermaid diagram gets --radius-diagram corners, so a writer adds nothing to the diagram for it. Decision diamonds are polygons, not rects, and keep their points. The 12 is in the diagram's own units. Mermaid scales a diagram down to fit the column, and the corner shrinks with it: 12px on screen for the six that fit as drawn, about 11px for most, 6.5px for the two widest Offers diagrams. A script could hold every corner at 12 screen pixels; the author judged that not worth one (2026-10-06). `rx`/`ry` as CSS properties override Mermaid, which sets no corner on a plain box. Pinned to its `.node rect` markup — re-check after a Mermaid or CLI upgrade. Edge labels sit outside `.node`, so their boxes stay square. */ #content-area .mermaid .node rect { rx: var(--radius-diagram); ry: var(--radius-diagram); } /* Boxes and decision diamonds wear the Info callout's colours, so a diagram and an Info box read as one family: the --lilac-light-1 fill, a twilight-1 border and twilight-6 labels (13:1). Mermaid's own are #ececff, #9370db and #333. The border is drawn at 1px on screen whatever the diagram's scale, like the callout's, rather than shrinking with the drawing. Light mode only, like the callouts: Mermaid's dark theme draws its own. */ html:not(.dark) #content-area .mermaid .node :is(rect.label-container, polygon) { fill: var(--lilac-light-1); stroke: var(--twilight-1); vector-effect: non-scaling-stroke; } html:not(.dark) #content-area .mermaid .node .nodeLabel, html:not(.dark) #content-area .mermaid .node .nodeLabel p { color: var(--twilight-6); } /* Arrow labels ("Yes", "No") are the boxes inverted: lilac-1 text on a twilight-5 pill (8.6:1), so the answer stands out on its arrow. Mermaid places a label from the arrow's route points, not the curve it draws, so on a curved arrow the pill can sit up to 11px beside the line; the author accepted that rather than add a script to move it (2026-10-06). Mermaid paints its grey on three nested layers, so all three are cleared and the pill is drawn on the

. Its frame, a foreignObject, is sized exactly to the text, so the frame is allowed to overflow and the pill's side padding is cancelled by an equal negative margin, which keeps the word where Mermaid centred it. `:not(:empty)` keeps unlabelled arrows, which carry an empty label, free of a stray dot. */ html:not(.dark) #content-area .mermaid g.edgeLabel foreignObject { overflow: visible; } html:not(.dark) #content-area .mermaid g.edgeLabel :is(.labelBkg, span.edgeLabel) { background-color: transparent; } html:not(.dark) #content-area .mermaid g.edgeLabel p:not(:empty) { display: inline-block; padding: 0 8px; margin: 0 -8px; border-radius: var(--radius-pill); background-color: var(--twilight-5); color: var(--lilac-1); } /* Arrows: 1.5px lines, up from Mermaid's 1px, ending in a chevron like the home page's arrow-right icon rather than a filled triangle. */ #content-area .mermaid path.flowchart-link { stroke-width: 1.5px; } /* The head is redrawn as a 90° chevron whose point sits on the line's end, so the line runs into it. That leaves 4px between the point and the box. The marker scales 10 units to 8px, so 1.875 units is the line's 1.5px. Its arms reach past the marker's 10-unit box, hence `overflow: visible`. `d` as a CSS property is Chrome and Firefox only. Safari keeps Mermaid's triangle, M 0 0 L 10 5 L 0 10 z, and the dash below opens it there: the dash spans the two slanted sides (2 × 11.18), the gap its back (10). The new chevron is shorter than the dash, so it draws whole. Mermaid writes `stroke-width` and `stroke-dasharray` inline, hence the !important. */ #content-area .mermaid marker[id$="-pointEnd"] { overflow: visible; } #content-area .mermaid marker[id$="-pointEnd"] path { d: path("M 0 0 L 5 5 L 0 10"); fill: none !important; stroke-width: 1.875 !important; stroke-dasharray: 22.36 10 !important; stroke-linecap: round; stroke-linejoin: round; } /* Both in --grey-4, over Mermaid's #333: well softer than the text, so the lines carry the flow without competing with the boxes. 3.1:1 on the ivory ground, just over the 3:1 a graphic needs. Light mode only: Mermaid's dark theme draws its arrows light, and grey-4 would sink into the dark ground. */ html:not(.dark) #content-area .mermaid path.flowchart-link, html:not(.dark) #content-area .mermaid marker[id$="-pointEnd"] path { stroke: var(--grey-4); } /* ── Callouts: Info, Note and Tip in brand colours ─────────────────────────── Mintlify paints these in Tailwind's grey, blue and green. Here they take the brand's primaries instead: a very light tint of a hue for the fill, a dark step of the same hue for the text. Info and Note both only inform, so they share Twilight: a --lilac-light-1 fill (lilac is the accent the brand guide pairs with Twilight; the tint is site-local, see tokens.css) under a twilight-1 border, with a twilight-5 icon and twilight-6 text. Tip takes Flamingo: a --flamingo-light-1 fill under a flamingo-2 border, a flamingo-7 icon and flamingo-8 text. Icons clear 6.5:1 and text 12:1 on the fills. Warning keeps Mintlify's amber: it has to read as a warning, and the guide keeps the warm secondaries for details. Links, bold and code in a callout follow its text colour, because Mintlify sets those to `text-current`. Matched on Mintlify's `data-callout-type`, not its colour classes. Every tab since 2026-10-07. Light mode only for now: dark keeps Mintlify's washes. */ html:not(.dark) #content-area .callout:is([data-callout-type="info"], [data-callout-type="note"]) { background-color: var(--lilac-light-1); border-color: var(--twilight-1); } html:not(.dark) #content-area .callout:is([data-callout-type="info"], [data-callout-type="note"]) [data-component-part="callout-icon"] svg { color: var(--twilight-5); } html:not(.dark) #content-area .callout[data-callout-type="tip"] { background-color: var(--flamingo-light-1); border-color: var(--flamingo-2); } html:not(.dark) #content-area .callout[data-callout-type="tip"] [data-component-part="callout-icon"] svg { color: var(--flamingo-7); } html:not(.dark) #content-area .callout:is([data-callout-type="info"], [data-callout-type="note"]) [data-component-part="callout-content"] { color: var(--twilight-6); } html:not(.dark) #content-area .callout[data-callout-type="tip"] [data-component-part="callout-content"] { color: var(--flamingo-8); } /* ── Screenshot descriptions: tight under the image, at 14px ───────────────── business-documentation/CLAUDE.md puts a one-line italic description directly under every screenshot, written by hand because — Mintlify's only caption — brings the frame that was turned down. As plain prose it sat 32px below the image (the image's own margin) at body size, so it read as the next sentence rather than as belonging to the picture above it. 4px ties it to the image; the 32px below the image moves under the description instead, so the space before the next block is unchanged. The hook is Mintlify's image-zoom wrapper and the paragraph right after it, which the Screenshots rule says is always the description. The wrapper comes in two shapes. The deployed site wraps the image in `span[data-ramka-trigger]`, usually followed by an "Expand image" `button[data-ramka-trigger]`, so the description follows the span or the button. The local CLI (4.2.791) wraps it in `span[data-rmiz]`. A rule that named only `data-rmiz` looked right on localhost and matched nothing on the live site (2026-09-24). Every tab since 2026-10-07. The paragraph counts only when it is nothing but one italic run (`em:only-child`), which is the shape the Screenshots rule and the Integration template both prescribe for a description, so a prose paragraph after an image on a page not yet swept keeps its body size. `div.mdx-content` is there for specificity: Mintlify injects `#content-area div.mdx-content.prose > span[data-as="p"]` with a 1.25em top margin, unlayered, and a shorter selector loses to it. Re-check after a CLI upgrade, and on the deployed site, not only on localhost. */ #content-area div.mdx-content :is(span[data-rmiz], span[data-ramka-trigger]):has(+ span[data-as="p"] > em:only-child, + button[data-ramka-trigger] + span[data-as="p"] > em:only-child) img { margin-bottom: 4px; } #content-area div.mdx-content :is(span[data-rmiz], [data-ramka-trigger]) + span[data-as="p"]:has(> em:only-child) { margin-top: 0; margin-bottom: 32px; font-size: 14px; line-height: 1.5; } /* ── Links in article text: the site's purple, at body weight ──────────────── How links looked before article content went back to stock Mintlify, kept by request: twilight-5 text at the body weight, over Mintlify's own underline. Stock Mintlify paints them near-black at 600, which put a link at the same weight as bold UI labels — the two stopped being told apart. Scoped to `a.link`, Mintlify's class for a Markdown link, so breadcrumbs, pagination, the footer badge and cards keep Mintlify's styling. Dark mode is handled by the `.dark #content-area a.link` rule above. */ #content-area .mdx-content a.link { color: var(--twilight-5); font-weight: 400; } /* ── Text: soft charcoal titles, grey-9 body, everywhere ───────────────────── Mintlify draws its darkest text — page titles, headings, accordion and card titles, table headers, the API playground title — from two places: its gray scale variables, read as rgb(var(--gray-950)) through rgb(var(--gray-800)), and the typography plugin's --tw-prose-headings. Pointing those at grey-8 (#3c3c3c) changes all of them at once, with no selector per element. Syntax-highlighted code keeps its colours. Body text, with the bold and inline code inside it, is grey-9 and is set separately below. Light mode only: dark mode reads its text from the light end of the scale. Callouts keep Mintlify's own colours, as DESIGN.md asks. In light mode the only non-text use of these two steps is the fill of a card's icon, which turning charcoal with the title suits. Re-check after a CLI upgrade: these are Mintlify's internal variable names, not a public API. */ html:not(.dark) { --gray-950: var(--grey-8-channels); --gray-900: var(--grey-8-channels); --gray-800: var(--grey-8-channels); } html:not(.dark) .prose { --tw-prose-headings: var(--grey-8); --tw-prose-code: var(--grey-9); } /* Body text is grey-9 (#0c0c0c), darker than the grey-8 headings — the hierarchy rides on size and weight, not on colour. Mintlify colours body text on .prose as rgb(var(--gray-700)); the sidebar and the contents list read the same step through their own classes, so this targets .prose rather than the variable, and they keep Mintlify's colour. Bold and inline code follow the text, or they would read lighter than the sentence around them. Callouts are excluded: each callout's content is a .prose of its own, coloured blue, neutral or amber by its type, and an unlayered .prose rule would turn every one of them grey-9. */ html:not(.dark) .prose:not(.callout *) { color: var(--grey-9); } html:not(.dark) .prose strong:not(.callout *) { color: var(--grey-9); }