/* Boom docs — light polish on the standard Mintlify (mint) theme. Goal: clean & minimal like the Mintlify docs — standard top navbar + tabs, a subtle gray background, Boom branding. No floating card. Mintlify auto-loads any .css file in the docs root. */ /* ---- Slightly denser type than Mintlify's 16px root (12px read too small at 100% zoom). Everything rem-based scales with this. ---- */ html { font-size: 14px; } /* ---- Type: match the marketing landing as it renders — the system UI face at regular weight with tight tracking. Overrides the vars Mintlify sets from docs.json `fonts` (doubled :root to win over its own :root rule). ---- */ :root:root { --font-family-headings-custom: ui-sans-serif, system-ui, sans-serif; --font-family-body-custom: ui-sans-serif, system-ui, sans-serif; } #page-title { font-weight: 400 !important; letter-spacing: -0.025em !important; } #content-area .prose h2 { font-weight: 400; letter-spacing: -0.015em; } #content-area .prose h3 { font-weight: 500; letter-spacing: -0.008em; } /* ---- Subtle gray page background (content sits on it cleanly) ---- */ body { background-color: oklch(0.97 0 0); } .dark body { background-color: oklch(0.18 0 0); } /* ---- API reference: response keys bold near-black; purple stays for icons and the eyebrow/title only. ---- */ #content-area .text-primary.font-semibold:not(.eyebrow) { color: #18181b !important; } .dark #content-area .text-primary.font-semibold:not(.eyebrow) { color: #f4f4f5 !important; } /* ---- Minimal previous / next pager — just "Previous" / "Next". ---- */ #pagination { background-color: transparent !important; border: 0 !important; border-top: 1px solid rgba(17, 17, 26, 0.08) !important; border-radius: 0 !important; padding: 1.25rem 0 0 !important; } .dark #pagination { border-top-color: rgba(255, 255, 255, 0.08) !important; } #pagination a .flex-col.items-end, #pagination a .w-px { display: none !important; } #pagination a.w-full > div { justify-content: flex-end !important; } /* ---- Remove the "Powered by Mintlify" footer badge. ---- */ #footer a[href*="mintlify"] { display: none !important; } /* ---- Wider left sidebar (desktop only). luma's sidebar is w-56 (14rem) and the content clears it via #body-content's left padding — widen both together so they stay aligned. Mobile keeps the native drawer. ---- */ @media (min-width: 1024px) { #sidebar-content { width: 18rem !important; } #body-content { padding-left: 18rem !important; } } /* ---- Selected sidebar item: neutral ink (docs.json `colors` are the landing's grays, not violet) on the landing hero's warm-gray surface, so it reads as selected without color — like the selected navbar tab. ---- Navbar "Dashboard" is a plain navbar link (same outlined pill as Support), not a filled CTA — handled in docs.json. */ #sidebar-content a[aria-current="page"] { background-color: oklch(0.955 0.004 80); border-radius: 0.5rem; } .dark #sidebar-content a[aria-current="page"] { background-color: rgba(255, 255, 255, 0.06); } /* ---- Sidebar group headings (e.g. "People", "Custom objects", "Types") ---- luma renders these as a small, muted, letter-spaced label in the body font, which reads as tiny next to the endpoint links. Make them a touch larger and heavier, so each group reads as a real section title. Scoped to non-link sidebar text so the endpoint links themselves are left alone. */ #sidebar-content [class*="group" i]:not(a):not(:has(a)), #sidebar-content h5, #sidebar-content li > div:first-child > p:first-child:not(:has(a)) { font-size: 0.9rem !important; font-weight: 600 !important; letter-spacing: normal !important; text-transform: none !important; } /* ============================================================ Home (introduction.mdx) — built from the marketing landing's own pieces (src/features/marketing/components/landing): the warm-gray hero card, the use-case tiles with static hairline drawings (use-case-art.tsx, line-art.ts) that flood with a painted, grained ground on hover (use-cases.tsx, grain.tsx). Scoped under .boom-home; dark mode rides Mintlify's `.dark` on . ============================================================ */ .boom-home { --bh-ink: oklch(0.145 0 0); --bh-muted: oklch(0.556 0 0); --bh-hero: oklch(0.984 0.003 85); --bh-card: oklch(0.984 0.003 85); --bh-line: rgba(0, 0, 0, 0.07); --bh-grain: url("data:image/svg+xml;utf8,"); padding: 0.5rem 0 1rem; /* Own the container the grid's @container queries resolve against, rather than leaning on Mintlify's #content happening to be one. */ container-type: inline-size; } .dark .boom-home { --bh-ink: oklch(0.978 0.001 286); --bh-muted: oklch(0.78 0.016 286); --bh-hero: rgba(255, 255, 255, 0.03); --bh-card: rgba(255, 255, 255, 0.03); --bh-line: rgba(255, 255, 255, 0.08); } /* Mintlify's prose styles every /; the home is built from spans (MDX-safe), so reset what prose adds. */ .boom-home a, .boom-home a:hover, .boom-home a:focus { text-decoration: none; border: 0; } .boom-home span { display: block; } /* ---- Hero: the landing's warm-gray card, left-aligned, arcs at the right ---- */ .boom-home .bh-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: 24px; border: 1px solid var(--bh-line); background: var(--bh-hero); padding: clamp(2.5rem, 7vw, 4.5rem) clamp(1.5rem, 5vw, 3.5rem); margin-bottom: 1rem; } .boom-home .bh-eyebrow { display: inline-block; font-size: 0.93rem; color: var(--bh-muted); border: 1px solid var(--bh-line); border-radius: 999px; padding: 0.3rem 0.8rem; background: rgba(255, 255, 255, 0.8); } .dark .boom-home .bh-eyebrow { background: rgba(255, 255, 255, 0.04); } .boom-home .bh-title { margin: 1.4rem 0 0; max-width: 14ch; font-weight: 400; font-size: clamp(2.6rem, 6.5vw, 4.2rem); line-height: 1.04; letter-spacing: -0.025em; color: var(--bh-ink); opacity: 0.85; text-wrap: balance; } .boom-home .bh-sub { margin: 1.25rem 0 0; max-width: 34rem; color: var(--bh-muted); font-size: 1.15rem; line-height: 1.6; text-wrap: pretty; } .boom-home .bh-arcs { /* Centred on the card's right edge, so only the left half of the circles shows. */ position: absolute; z-index: -1; right: -17rem; top: 50%; width: 34rem; height: 34rem; transform: translateY(-50%); color: var(--bh-ink); opacity: 0.16; pointer-events: none; } .boom-home .bh-arcs svg { width: 100%; height: 100%; } /* On a phone the arcs would run under the copy. */ @media (max-width: 640px) { .boom-home .bh-arcs { display: none; } } /* ---- Tiles: warm-gray card, hairline drawing, painted flood on hover ---- */ .boom-home .bh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } @container (max-width: 820px) { .boom-home .bh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container (max-width: 520px) { .boom-home .bh-grid { grid-template-columns: 1fr; } } .boom-home .bh-tile { position: relative; overflow: hidden; isolation: isolate; height: 17rem; border-radius: 24px; border: 1px solid var(--bh-line); background: var(--bh-card); } .boom-home .bh-tile:focus-visible { outline: 2px solid var(--bh-ink); outline-offset: 3px; } /* The painted ground, faded in on hover. Top-lit and deepening downwards so the white copy low in the card always sits on the dark end. */ .boom-home .bh-paint { position: absolute; inset: 0; z-index: -1; opacity: 0; background: var(--bh-paint); transition: opacity 0.5s ease-out; } .boom-home .bh-paint::after { content: ""; position: absolute; inset: 0; mix-blend-mode: overlay; opacity: 0.7; background-image: var(--bh-grain); } .boom-home .bh-tile:hover .bh-paint, .boom-home .bh-tile:focus-visible .bh-paint { opacity: 1; } .boom-home .bh-tile:nth-child(1) { --bh-paint: radial-gradient(85% 60% at 90% 0%, oklch(0.84 0.07 315) 0%, transparent 60%), linear-gradient(180deg, oklch(0.62 0.13 305), oklch(0.42 0.12 295)); } .boom-home .bh-tile:nth-child(2) { --bh-paint: radial-gradient(85% 60% at 90% 0%, oklch(0.9 0.09 85) 0%, transparent 60%), linear-gradient(180deg, oklch(0.72 0.13 55), oklch(0.5 0.14 22)); } .boom-home .bh-tile:nth-child(3) { --bh-paint: radial-gradient(85% 60% at 10% 0%, oklch(0.88 0.06 30) 0%, transparent 60%), linear-gradient(180deg, oklch(0.66 0.13 18), oklch(0.46 0.13 0)); } .boom-home .bh-tile:nth-child(4) { --bh-paint: radial-gradient(85% 60% at 90% 0%, oklch(0.88 0.06 220) 0%, transparent 60%), linear-gradient(180deg, oklch(0.66 0.11 240), oklch(0.4 0.1 258)); } .boom-home .bh-tile:nth-child(5) { --bh-paint: radial-gradient(85% 60% at 10% 0%, oklch(0.88 0.08 150) 0%, transparent 60%), linear-gradient(180deg, oklch(0.6 0.09 180), oklch(0.4 0.07 215)); } .boom-home .bh-tile:nth-child(6) { --bh-paint: radial-gradient(85% 60% at 90% 0%, oklch(0.8 0.09 295) 0%, transparent 60%), linear-gradient(180deg, oklch(0.55 0.15 280), oklch(0.33 0.11 268)); } /* The drawing sits centred above the copy; card height is fixed. */ .boom-home .bh-art { position: absolute; inset: 0 0 5.25rem; display: grid; place-items: center; padding: 1.25rem 2rem 0; color: var(--bh-ink); opacity: 0.85; transition: color 0.5s ease, opacity 0.5s ease; } .boom-home .bh-art svg { width: 100%; max-width: 230px; height: 140px; overflow: visible; } /* Fixed-height copy block: titles line up across a row however the sentence wraps. */ .boom-home .bh-text { position: absolute; inset: auto 0 0; height: 5.25rem; padding: 0 1.5rem; text-align: center; } .boom-home .bh-h { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.008em; color: var(--bh-ink); transition: color 0.5s ease; } .boom-home .bh-p { margin: 0.3rem auto 0; font-size: 0.95rem; font-weight: 400; line-height: 1.5; color: var(--bh-muted); text-wrap: pretty; transition: color 0.5s ease; } .boom-home .bh-tile:hover .bh-art, .boom-home .bh-tile:focus-visible .bh-art { color: #fff; opacity: 1; } .boom-home .bh-tile:hover .bh-h, .boom-home .bh-tile:focus-visible .bh-h { color: #fff; } .boom-home .bh-tile:hover .bh-p, .boom-home .bh-tile:focus-visible .bh-p { color: rgba(255, 255, 255, 0.85); } /* Hairline ink (line-art.ts): 0.75px however the SVG scales, currentColor so it follows the theme and turns white on the painted ground. */ .boom-home svg .h { fill: none; stroke: currentColor; stroke-width: 0.75; vector-effect: non-scaling-stroke; } .boom-home svg .d { fill: none; stroke: currentColor; stroke-width: 0.75; vector-effect: non-scaling-stroke; stroke-dasharray: 0.5 3; stroke-linecap: round; } .boom-home svg .f { fill: currentColor; stroke: none; } /* Landing page (introduction) is chrome-light: hide the "Copy page" / contextual AI menu and the prev/next pager — on the home page only. Scoped via :has so every other page keeps them. Selectors taken from Mintlify's rendered DOM (#page-context-menu, #pagination). */ body:has(.boom-home) #header, body:has(.boom-home) #page-context-menu, body:has(.boom-home) #page-context-menu-button, body:has(.boom-home) #pagination { display: none !important; } /* The home's three-column grid needs more than the 43.5rem text column. */ body:has(.boom-home) #content-area { max-width: 72rem !important; } /* "Copy page" split button: Mintlify sizes the chevron half in px (34px) but the label half in rem, so the 14px root above sizes only the label. Match the label's height (py-1.5 + text-sm line + 1px borders). */ #page-context-menu button[aria-haspopup="menu"] { height: calc(2rem + 2px); }

​Related

Analytics and attribution

Initiatives

Related