/* Layout width — matching claude.com/docs. * * Two separate things were making this site look sparse on a wide monitor: * * 1. Mintlify caps the content column at Tailwind's `max-w-xl` (36rem / 576px) however much * room there is, so at a 2000px viewport the text sat in 576px with ~700px of dead gutter * either side. * 2. Nothing caps the layout itself, so the sidebar, navbar and side panel stretch to the * window edges while the text stays pinned in the middle. * * claude.com/docs — also Mintlify — does the opposite of both: the navbar and the page shell * are capped and centred, and the content column has no cap of its own, filling whatever the * side panel leaves. That structure is copied below. * * The one value deliberately *not* copied is the cap itself. claude.com/docs uses * `max-w-8xl` = 92rem, but this theme spends ~220px more on horizontal padding than theirs, so * 92rem here yields a 519px column on endpoint pages — narrower than the 576px default it was * meant to fix. 104rem reproduces their proportions instead: ~711px on endpoint pages and * ~855px on prose pages, against the ~760px their own prose column gets. Adjust this one number * to taste; 128rem lets the shell fill the window entirely. * * There is no docs.json setting for any of this — the schema has no width option — so it has * to be CSS. The selectors lean on Mintlify's theme internals (`.almond-layout`, the * `max-w-xl` wrapper), so re-check this file after a major CLI upgrade. */ @media (min-width: 1024px) { /* Navbar contents: align with the shell instead of the window edges. */ header > div.mx-auto { max-width: 104rem; } /* The page shell — sidebar, content and side panel. */ .almond-layout > div.flex.rounded-2xl { max-width: 104rem; margin-inline: auto; } /* The sidebar is fixed to the viewport, so it needs the same centring by hand. 52rem is half the cap; max() keeps it flush left until the window exceeds it. */ .almond-layout > nav.fixed { left: max(0px, calc(50vw - 52rem)) !important; } /* Drop the 36rem cap on the content column; it now fills the shell beside the side panel. `:has(.mdx-content)` pins this to the one wrapper holding page content — prose pages put `.mdx-content` directly inside it, endpoint pages nest it a level deeper. */ main .max-w-xl:has(.mdx-content) { max-width: none; } } /* Shell cap, retuned for `mint`. * * The block above was tuned against `almond`, and two of its rules * (`.almond-layout > div.flex.rounded-2xl`, `.almond-layout > nav.fixed`) have no * target on `mint` — the theme caps and centres its own shell instead. That cap is * 1472px, which yields an 816px content column on a wide monitor, where almond gave * 870px. * * 1526px restores it: the relationship is linear, +1px of cap for +1px of column, * so 1472 + 54 = 1526 reproduces almond's 870px at both 2000px and 2560px. Below the * cap nothing changes, so 1440px keeps mint's own 784px — which is wider than * almond's 630px there, and the point of the block above was to widen this column. * * Measured, not derived: 1440px → 784px, 2000px → 870px, 2560px → 870px. * * The `:not(:has(.lh-hero))` guard matters. The wrapper carries * `peer-[.is-custom]:max-w-none`, which is how Mintlify releases the cap on a * `mode: "custom"` page — capping it unconditionally would box in the home page's * full-width hero band. */ @media (min-width: 1024px) { body:not(:has(.lh-hero)) div:has(> main#content-container) { max-width: 1526px; } } /* ═══════════════════════════════════════════════════════════════════════════ 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 flat purple band ─────────────────────────────────────────────────── The prototype's defining trait: one full-width sticky bar, no border, no blur. 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 { background: var(--lobyco-ink) !important; border-bottom: none !important; backdrop-filter: none !important; box-shadow: none !important; } #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 purple 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 — which is our purple, so on the purple band it vanishes. Pink is the prototype's accent and the only value that reads here. */ #navbar div[class*="bg-primary"] { background-color: var(--lobyco-pink) !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: 13px; font-weight: 400; 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; } /* The logo, and the cost of a dark band in a light theme. Mintlify takes two logo assets, one per appearance mode, and uses the same pair in the navbar and the footer. That works while the navbar matches the page, but light mode now has a *purple* navbar over a *cream* page, and this repo's light.svg wordmark is ink (#492C9D) — it disappears on the band. dark.svg is already the white-wordmark variant, so light mode borrows it for the navbar rather than needing a third asset. Scoped to the navbar: the footer sits on cream, where the ink wordmark is the correct one. */ html:not(.dark) #navbar img.nav-logo { content: url("/logo/dark.svg"); } /* ── 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; } } /* ── Search: translucent white on the band ───────────────────────────────── Answers the finding that the field "reads as disabled" — on the purple band it has real contrast without being a white box. */ #search-bar-entry, #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:hover, #search-bar-entry:focus-within { background: rgba(255, 255, 255, 0.22) !important; border-color: rgba(255, 255, 255, 0.45) !important; } #search-bar-entry *, #search-bar-entry-mobile * { color: rgba(255, 255, 255, 0.85) !important; } /* ── "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(--ivory-5) 0%, rgba(var(--ivory-5-rgb), 0) 100% ) !important; } /* Content sits on cream; cards and code blocks are the white surfaces. */ #content-area a[href]:not([class*="card"]) { color: var(--twilight-5); } /* ── Cards: 16px corners, hairline border, the prototype's lift on hover ── Scoped away from `lh-` (the landing page's own cards), which carry the prototype's 24px radius and gradient entry-card fill. `[class*="card"]` would otherwise match `lh-card` and win on ID specificity + !important. */ /* `card-group` has to be excluded explicitly. A wrapper carries that class, so a substring match on "card" also caught the *grid container* and gave it the white fill — putting a white slab behind the cards, which flattened them against their own background and turned the gutters white instead of cream. */ #content-area a[class*="card"]:not([class*="lh-"]):not([class*="card-group"]), #content-area div[class*="card"]:not([class*="lh-"]):not([class*="card-group"]), #content-area [class*="Card"]:not([class*="lh-"]):not([class*="card-group"]) { background: var(--pure-white) !important; border: 1px solid var(--grey-2) !important; border-radius: var(--radius-md) !important; box-shadow: none !important; transition: box-shadow 0.15s, border-color 0.15s; } /* Mintlify renders a as a `div` unless it has an href, so a hover rule written only for `a` never fired on most of them. */ #content-area a[class*="card"]:not([class*="lh-"]):not([class*="card-group"]):hover, #content-area div[class*="card"]:not([class*="lh-"]):not([class*="card-group"]):hover { border-color: var(--twilight-2) !important; box-shadow: var(--shadow-base) !important; } /* ── Callouts ────────────────────────────────────────────────────────────── The port produced 39 of these — 27 , 11 , 1 — from GitBook's `{% hint %}`, making them the most common styled element in the content. Stock, they were the last thing on the site still wearing Tailwind's default palette: neutral grey, yellow-50, red-50. Two things worth recording from doing this: 1. `` is NEUTRAL GREY in Mintlify, not blue. GitBook's info hint is blue, so the most common hint type arrived with its semantic colour dropped — 27 grey boxes indistinguishable from a plain quote. It's Mintlify's `` that is blue. Restyling here is deliberate: it keeps the ported markup as-is rather than rewriting 27 files to say , and it puts *Lobyco* blue on them instead of Tailwind's. 2. `` and `` render byte-identical classes, so CSS cannot tell them apart. They share one treatment below, which is fine — both are positive. Mintlify offers no callout variables, so each type is reached through the Tailwind utility it ships with. `rounded-2xl` is already 16px, so the radius needs nothing. */ #content-area .callout { border-width: 1px !important; } /* Body text stays neutral on every type — `tag/*` sets the label to grey-8 throughout and lets the icon alone carry the semantic, so a Warning does not arrive as a wall of amber prose. The colour has to be set on the `.prose` wrapper, not on `p`/`li`. Mintlify puts the type's text colour there (`text-yellow-800`, `text-red-800`), and 's body turned out to be a bare inline span with no

at all — so rules aimed at p/li missed it and it inherited the amber. */ #content-area .callout, #content-area .callout .prose, #content-area .callout p, #content-area .callout li { color: var(--grey-8); } /* Info + Note → blue */ #content-area .callout.bg-neutral-50, #content-area .callout.bg-blue-50 { background-color: var(--blue-1) !important; border-color: var(--blue-2) !important; } #content-area .callout.bg-neutral-50 svg, #content-area .callout.bg-blue-50 svg { color: var(--blue-5) !important; } /* Tip + Check → tag/success */ #content-area .callout.bg-green-50 { background-color: var(--mint-2) !important; border-color: var(--mint-3) !important; } #content-area .callout.bg-green-50 svg { color: var(--green-5) !important; } /* Warning → tag/warning */ #content-area .callout.bg-yellow-50 { background-color: var(--orange-1) !important; border-color: var(--orange-2) !important; } #content-area .callout.bg-yellow-50 svg { color: var(--orange-5) !important; } /* Danger → tag/error */ #content-area .callout.bg-red-50 { background-color: var(--red-1) !important; border-color: var(--red-2) !important; } #content-area .callout.bg-red-50 svg { color: var(--red-bright-6) !important; } /* Dark mode. The `tag/*` tokens are light-mode values, and dropping a #f3f7fc panel onto a #07040e page would glare, so each type keeps its hue as a low-alpha wash of the *icon* primitive over the dark surface, with the icon itself moved up the ramp to stay legible. Mintlify's own dark callouts work the same way (`dark:bg-blue-600/20`) — these just re-point it at our ramps. */ .dark #content-area .callout, .dark #content-area .callout .prose, .dark #content-area .callout p, .dark #content-area .callout li { color: var(--dark-text-muted); } .dark #content-area .callout.bg-neutral-50, .dark #content-area .callout.bg-blue-50 { background-color: rgba(40, 121, 199, 0.14) !important; border-color: rgba(40, 121, 199, 0.34) !important; } .dark #content-area .callout.bg-neutral-50 svg, .dark #content-area .callout.bg-blue-50 svg { color: var(--blue-3) !important; } .dark #content-area .callout.bg-green-50 { background-color: rgba(18, 135, 42, 0.16) !important; border-color: rgba(81, 202, 162, 0.34) !important; } .dark #content-area .callout.bg-green-50 svg { color: var(--mint-4) !important; } .dark #content-area .callout.bg-yellow-50 { background-color: rgba(209, 129, 0, 0.16) !important; border-color: rgba(255, 198, 106, 0.34) !important; } .dark #content-area .callout.bg-yellow-50 svg { color: var(--orange-3) !important; } .dark #content-area .callout.bg-red-50 { background-color: rgba(195, 20, 20, 0.16) !important; border-color: rgba(242, 161, 161, 0.32) !important; } .dark #content-area .callout.bg-red-50 svg { color: var(--red-bright-3) !important; } /* ── 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; } /* ── 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; } .dark .sticky.pointer-events-none[class*="bg-linear-to-b"], .dark [class*="from-background-light"] { background-image: linear-gradient( to bottom, var(--twilight-9) 0%, rgba(7, 4, 14, 0) 100% ) !important; } .dark #content-area a[class*="card"]:not([class*="lh-"]):not([class*="card-group"]), .dark #content-area div[class*="card"]:not([class*="lh-"]):not([class*="card-group"]) { background: var(--dark-surface) !important; border-color: var(--dark-border) !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: flat purple band, search as the focal point ────────────────────*/ .lh-hero { position: relative; overflow: hidden; padding: 56px 32px 60px; text-align: center; background: var(--lobyco-ink); } .lh-hero-inner { position: relative; z-index: 2; max-width: 600px; margin: 0 auto; } .lh-hero h1 { font-size: 32px; font-weight: 500; line-height: 1.3; color: var(--pure-white); margin: 0 0 16px; } .lh-search { max-width: 100%; margin: 0 auto; background: var(--pure-white); border: 1px solid rgba(var(--twilight-6-rgb), 0.14); border-radius: var(--radius-sm); padding: 10px 16px; display: flex; align-items: center; gap: 10px; cursor: text; transition: border-color 0.15s; } .lh-search:hover, .lh-search:focus { border-color: var(--lobyco-ink); outline: none; } .lh-search-placeholder { font-size: 14px; color: var(--band-placeholder); } .lh-search-icon { width: 16px; height: 16px; flex-shrink: 0; background-color: var(--lobyco-ink); opacity: 0.6; -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: 13px; } /* `color` needs !important here: the content link rule above is an ID selector plus an attribute selector, so it out-specifies a plain class. */ .lh-suggestions a { display: inline-flex; align-items: center; white-space: nowrap; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius-sm); padding: 8px 16px; color: var(--pure-white) !important; text-decoration: none; transition: background 0.15s, border-color 0.15s, transform 0.15s; } .lh-suggestions a:hover { background: rgba(255, 255, 255, 0.26); border-color: rgba(255, 255, 255, 0.4); transform: translateY(-1px); } /* ── Page body ───────────────────────────────────────────────────────────*/ .lh-page { max-width: 1100px; margin: 0 auto; padding: 40px 32px 72px; } .lh-section-label { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; } .lh-section-label h2 { font-size: 18px; font-weight: 700; margin: 0; color: var(--lobyco-ink); } .lh-section-label span { font-size: 13px; color: var(--grey-4); } /* ── Cards ───────────────────────────────────────────────────────────────*/ .lh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .lh-entry-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 36px; } .lh-utility-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 32px; } .lh-card { background: var(--pure-white); border: 1px solid rgba(var(--twilight-6-rgb), 0.08); border-radius: var(--radius-lg); padding: 24px 22px; position: relative; overflow: hidden; cursor: pointer; text-decoration: none; transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s; } .lh-card:hover { box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2); transform: translateY(-2px); border-color: var(--lobyco-pink); } .lh-card h3 { font-size: 15px; font-weight: 600; margin: 0 0 6px; color: var(--color-text-primary); } .lh-card p { font-size: 13px; color: var(--grey-8); opacity: 0.8; margin: 0; line-height: 1.55; } /* Entry cards — the two raised entry points, not content domains. */ .lh-card.lh-entry { background: linear-gradient(135deg, var(--entry-fill-from), var(--entry-fill-to)); color: var(--lobyco-ink); display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px; border: 1px solid var(--twilight-2); } .lh-card.lh-entry:hover { border-color: var(--twilight-5); } .lh-entry .lh-play { width: 38px; height: 38px; border-radius: 50%; background: var(--lobyco-ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--pure-white); } .lh-entry .lh-eyebrow { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pumpkin-5); margin-bottom: 3px; } .lh-entry h3 { font-size: 15px; margin: 0 0 3px; color: var(--lobyco-ink); } .lh-entry p { color: var(--entry-body-text); font-size: 13px; margin: 0; } /* Article counts are shown on purpose: the IA applies depth only where size demands it, so relative weight is the thing under review. */ .lh-count { display: inline-flex; align-items: center; margin-top: 12px; background: var(--grey-1); border: 1px solid var(--grey-2); border-radius: var(--radius-pill); padding: 4px 12px; font-size: 11.5px; font-weight: 600; color: var(--grey-4); white-space: nowrap; } .lh-entry .lh-count { background: var(--pure-white); border-color: var(--twilight-2); color: var(--lobyco-ink); } /* Utility sections — not content domains, so visually demoted. */ .lh-card.lh-utility { background: transparent; border: 1px dashed var(--grey-2); padding: 18px 22px; } .lh-card.lh-utility:hover { border-style: solid; box-shadow: none; transform: none; } .lh-card.lh-utility h3 { font-size: 14px; } /* The two-surface routing table, kept from the page this view replaced. */ .lh-orientation { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--grey-2); } .lh-orientation h2 { font-size: 18px; font-weight: 700; color: var(--lobyco-ink); margin: 0 0 12px; } .lh-orientation p { font-size: 14px; color: var(--grey-8); margin: 0 0 10px; } /* mode:"custom" drops Mintlify's prose styles, so a raw table renders bare — it needs its own rules rather than inheriting the ones article pages get. */ .lh-orientation table { margin-top: 16px; font-size: 14px; width: 100%; border-collapse: collapse; background: var(--pure-white); border: 1px solid var(--grey-2); border-radius: var(--radius-md); overflow: hidden; } .lh-orientation th, .lh-orientation td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--grey-2); vertical-align: top; } .lh-orientation th { font-weight: 600; color: var(--lobyco-ink); background: var(--grey-1); } .lh-orientation tr:last-child td { border-bottom: none; } .dark .lh-orientation table { background: var(--dark-surface); border-color: var(--dark-border); } .dark .lh-orientation th { background: var(--dark-subtle); color: var(--twilight-2); } .dark .lh-orientation th, .dark .lh-orientation td { border-bottom-color: var(--dark-border); color: var(--dark-text-muted); } @media (max-width: 980px) { .lh-grid { grid-template-columns: repeat(2, 1fr); } .lh-entry-grid, .lh-utility-grid { grid-template-columns: 1fr; } .lh-suggestions { flex-wrap: wrap; } } /* ── Dark mode ───────────────────────────────────────────────────────────*/ .dark .lh-hero { background: var(--dark-hero); } .dark .lh-card { background: var(--dark-surface); border-color: var(--dark-border); } .dark .lh-card h3 { color: var(--dark-text); } .dark .lh-card p { color: var(--dark-text-muted); } .dark .lh-section-label h2 { color: var(--twilight-2); } .dark .lh-card.lh-entry { background: linear-gradient(135deg, var(--dark-tint), var(--dark-hero)); border-color: var(--dark-entry-border); } .dark .lh-entry h3, .dark .lh-entry .lh-count { color: var(--dark-text); } .dark .lh-entry p { color: var(--dark-text-muted); } .dark .lh-entry .lh-count { background: var(--twilight-9); border-color: var(--dark-entry-border); } .dark .lh-count { background: var(--dark-subtle); border-color: var(--dark-border); color: var(--dark-text-faint); } .dark .lh-search { background: var(--dark-surface); border-color: var(--dark-border); } .dark .lh-search-icon { background-color: var(--dark-brand); } .dark .lh-orientation { border-top-color: var(--dark-border); } .dark .lh-orientation h2 { color: var(--twilight-2); } .dark .lh-orientation p { color: var(--dark-text-muted); }

Bonus Calculation

Bonus Accounting