/* Wide-mode landing: cap + center the content column (Omni-tight ~1150px) with side padding, rather than sprawling edge-to-edge. Omni caps its docs column at 1152px; matching it keeps the landing focused at 100% zoom. */ html[data-page-mode="wide"] #content-container { max-width: 1150px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; } /* Anchored headings (from a TOC click or a #hash) must land below the sticky header (~132px), not behind it. */ #content-container :is(h1, h2, h3, h4, h5) { scroll-margin-top: 9rem; } /* Eyebrow / section label shown above the page title → lime green. Headings keep the default heading font. */ .eyebrow { color: #A1D884 !important; } /* ============================================================ Sidebar hierarchy — two levels only, matching docs.omni.co exactly. Measured on Omni: group headers 12px/600/bright; every collapsible toggle 14px/400/muted, i.e. identical to a page link. Only the header is visually distinct, so the tree reads as sections + items. This replaces an earlier "group-heading parity" rule that lifted collapsible toggles to 12px/600/bright so they matched plain headers. That made sense when most groups were flat page lists. After the no-standalone-links work (#221/#227) nearly every group carries sub-groups, so the rule flattened the hierarchy instead — "Thread Inbox" and "Tour Inbox" rendered identically. Worse, Mintlify gives rooted top-level groups and nested sub-groups the SAME DOM (`ul.sidebar-group > li > button`), so the old selector caught Guides' sub-groups but not By role's, leaving those at the browser default 16px — larger than every other item in the sidebar. Hence: style every toggle the same and let the header carry the distinction. ============================================================ */ #sidebar-content button.group, #sidebar-content button.group * { font-size: 14px !important; font-weight: 400 !important; } /* Toggle icons are masked elements colored via `background-color`, so `color` never reaches them; match them to the muted toggle text. Group-header icons are recolored separately below. Never target the chevron. */ #sidebar-content button.group svg[class*="bg-gray"] { background-color: rgb(107, 114, 112) !important; } .dark #sidebar-content button.group svg[class*="bg-gray"] { background-color: rgb(158, 163, 163) !important; } /* Group headers stay bright, and their icon matches the label. */ .sidebar-group-header svg[class*="bg-gray"] { background-color: rgb(22, 28, 27) !important; } .dark .sidebar-group-header svg[class*="bg-gray"] { background-color: rgb(222, 227, 227) !important; } /* ============================================================ Compact sidebar + group dividers — match docs.omni.co density. Omni's docs are also Mintlify; their sidebar runs smaller nav text (14px) and group labels (12px) with a hairline between top-level section groups. Content/prose is left at the default size — only the sidebar is tightened. (Our Mintlify build doesn't emit Mintlify's native `.sidebar-nav-group-divider`, so the divider is drawn here.) ============================================================ */ #sidebar-content a { font-size: 14px !important; } /* 12px is the GROUP HEADER size only. Collapsible toggles are deliberately excluded — they take 14px above, matching page links, per Omni. Adding `ul.sidebar-group > li > button` back here would out-specify that rule and silently reintroduce the flattened hierarchy. */ #sidebar-content .sidebar-group-header { font-size: 12px !important; } /* Hairline above each non-first top-level section group. Two selectors cover Mintlify's differing dev vs production DOM without ever doubling up: - PRODUCTION wraps every group in its own `div.mt-6` (so the header is always its wrapper's :first-child — a `.sidebar-group-header:first-child` rule hid ALL dividers). The divider goes on the non-first wrappers, which carry `mt-6`. - DEV renders the headers as siblings, where `:not(:first-child)` correctly skips the first. In production every header IS a first-child, so that rule matches nothing there and can't collide with the wrapper rule. */ #sidebar-content div.mt-6:has(> .sidebar-group-header), #sidebar-content .sidebar-group-header:not(:first-child) { border-top: 1px solid rgba(22, 28, 27, 0.1); /* Balanced hairline: the link above ends with 6px of its own padding + ~3.5px of line-height leading, the group label below carries none — so the margin runs 6px shorter than the padding to land 17.5px of visible space on both sides. Overrides the wrapper's native `mt-6 lg:mt-8` (24/32px), which put ~41px above the line and ~25px below it. */ margin-top: 0.5rem !important; padding-top: 0.75rem !important; } .dark #sidebar-content div.mt-6:has(> .sidebar-group-header), .dark #sidebar-content .sidebar-group-header:not(:first-child) { border-top-color: rgba(222, 227, 227, 0.14); } /* One divider between a group's overview/landing link and its collapsible sub-groups when they share a single list — e.g. the "By role" tab, where "Guides by Role" (a plain link) is followed by the collapsible role guides. `:has()` places it only at that boundary (the first collapsible item right after a plain link), not between every sub-group. */ #sidebar-content ul.sidebar-group > li:has(> a) + li:has(> button) { border-top: 1px solid rgba(22, 28, 27, 0.1); /* Same 17.5px-each-side balance as the top-level hairline; here the button below has 6px of its own padding, so margin and padding differ by 2px. */ margin-top: 0.5rem !important; padding-top: 0.375rem !important; } .dark #sidebar-content ul.sidebar-group > li:has(> a) + li:has(> button) { border-top-color: rgba(222, 227, 227, 0.14); } /* Magic Library: one divider between the overview link ("Magic Library") and the first facet dropdown ("Verified"). There each facet is its own `mt-6` list, so `:not()` keeps the hairline on the first such list only — every later facet has an `mt-6` list before it and is skipped, and it leaves the later facets' native spacing untouched. Expanding a facet is safe: its nested lists live in a different parent, and don't carry `sidebar-group mt-6`. Spacing matches the other two hairlines — 17.5px of visible space above and below. */ #sidebar-content ul.sidebar-group.mt-6:not(ul.sidebar-group.mt-6 ~ ul.sidebar-group.mt-6) { border-top: 1px solid rgba(22, 28, 27, 0.1); margin-top: 0.5rem !important; padding-top: 0.375rem !important; } .dark #sidebar-content ul.sidebar-group.mt-6:not(ul.sidebar-group.mt-6 ~ ul.sidebar-group.mt-6) { border-top-color: rgba(222, 227, 227, 0.14); } /* ============================================================ Top-right navbar — Omni-style: plain secondary link + one fully-rounded filled primary pill. ============================================================ */ /* "Community" navbar link — plain text, no pill. */ #navbar a[href="https://www.getthread.com/aisu-community"], a[href="https://www.getthread.com/aisu-community"] { font-weight: 500 !important; } /* Primary "Thread Inbox" CTA — solid mint, 4px button (Merlin: no pills). The first-child is Mintlify's own absolutely-positioned background-fill overlay (inset:0, no content) — only fill-related properties belong on it. padding/font-size/line-height used to target that empty overlay too, which had zero visible effect: the real content box is the itself. That mattered in practice, not just in theory — Mintlify's own default classes on the turned out to be pl-3 pr-2 (12px/8px, asymmetric) on the live site, so the button's padding was never actually equal on both sides until this targeted the right element. */ #topbar-cta-button a { border-radius: 4px !important; padding: 0.45rem 0.9rem !important; font-size: 0.82rem !important; line-height: 1 !important; } #topbar-cta-button a > span:first-child { background-color: #008E78 !important; /* darker teal so white label passes AA */ background-image: none !important; border: 1px solid #008E78 !important; border-radius: 4px !important; transition: filter 0.15s ease; } #topbar-cta-button a:hover > span:first-child { filter: brightness(0.94); opacity: 1 !important; } /* Dark-green label on the mint fill (the label span is .text-white by default, so target the content wrapper + its children, not span.z-10). */ #topbar-cta-button a .z-10, #topbar-cta-button a .z-10 * { color: #ffffff !important; } /* No arrow in the CTA — hide the chevron AND clear the spacing that was reserved for it (Tailwind space-x / mr-0.5) so the label sits centered. */ #topbar-cta-button a svg { display: none !important; } #topbar-cta-button a > div { margin: 0 !important; } #topbar-cta-button a > div > span { margin: 0 !important; } /* ============================================================ Magic spark on the active table-of-contents item. Mintlify sets aria-current="location" on the current heading and updates it on scroll, so the spark follows the reader down the page. ============================================================ */ [id*="table-of-contents"] a[href^="#"] { position: relative; padding-left: 1.4em; } /* Active-TOC marker: three filled stars of different sizes that twinkle (fade in and out) IN PLACE. Only opacity animates — no rotation, no translation, so the marker never swirls or bobs. Painted via CSS mask so the stars take the theme teal. The stars are split across ::before (big + small) and ::after (medium) so the two groups fade out of phase for a livelier twinkle. */ [id*="table-of-contents"] a[aria-current="location"]::before, [id*="table-of-contents"] a[aria-current="location"]::after { content: ""; position: absolute; left: 0.02em; top: 50%; width: 1.05em; height: 1.05em; margin-top: -0.525em; background-color: #008E78; } [id*="table-of-contents"] a[aria-current="location"]::before { -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M8%202.5%20L10.1%206.9%20L14.5%209%20L10.1%2011.1%20L8%2015.5%20L5.9%2011.1%20L1.5%209%20L5.9%206.9%20Z'/%3E%3Cpath%20d='M16.5%202.2%20L17.4%204.1%20L19.3%205%20L17.4%205.9%20L16.5%207.8%20L15.6%205.9%20L13.7%205%20L15.6%204.1%20Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M8%202.5%20L10.1%206.9%20L14.5%209%20L10.1%2011.1%20L8%2015.5%20L5.9%2011.1%20L1.5%209%20L5.9%206.9%20Z'/%3E%3Cpath%20d='M16.5%202.2%20L17.4%204.1%20L19.3%205%20L17.4%205.9%20L16.5%207.8%20L15.6%205.9%20L13.7%205%20L15.6%204.1%20Z'/%3E%3C/svg%3E") center / contain no-repeat; animation: toc-star-in 0.4s ease both, toc-star-twinkle-a 2.6s ease-in-out 0.4s infinite; } [id*="table-of-contents"] a[aria-current="location"]::after { -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M17%2012%20L18.3%2014.7%20L21%2016%20L18.3%2017.3%20L17%2020%20L15.7%2017.3%20L13%2016%20L15.7%2014.7%20Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M17%2012%20L18.3%2014.7%20L21%2016%20L18.3%2017.3%20L17%2020%20L15.7%2017.3%20L13%2016%20L15.7%2014.7%20Z'/%3E%3C/svg%3E") center / contain no-repeat; animation: toc-star-in 0.4s ease both, toc-star-twinkle-b 2.15s ease-in-out 0.55s infinite; } .dark [id*="table-of-contents"] a[aria-current="location"]::before, .dark [id*="table-of-contents"] a[aria-current="location"]::after { background-color: #19D3AB; } /* Pure fade-in on activation (replays as the active heading changes). */ @keyframes toc-star-in { from { opacity: 0; } to { opacity: 1; } } /* Twinkle = opacity only, so the stars never move. Two phases, out of sync. */ @keyframes toc-star-twinkle-a { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } @keyframes toc-star-twinkle-b { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.5; } } /* Respect reduced-motion — hold the stars still and fully visible. */ @media (prefers-reduced-motion: reduce) { [id*="table-of-contents"] a[aria-current="location"]::before, [id*="table-of-contents"] a[aria-current="location"]::after { animation: none !important; } } /* ============================================================ Standardize interactive controls to Merlin's 4px (radius-xs) — buttons, inputs, and the search field. Cards/code blocks keep 8px. The CTA is already 4px; bring the search bar and the Copy-page / more-actions button group in line so radii match everywhere. ============================================================ */ #search-bar-entry { border-radius: 4px !important; } #page-context-menu .rounded-l-xl { border-radius: 4px 0 0 4px !important; } #page-context-menu .rounded-r-xl { border-radius: 0 4px 4px 0 !important; } /* Hide the "Powered by Mintlify" footer badge. */ a[href*="utm_campaign=poweredBy"] { display: none !important; } /* ============================================================ Landing page — standard Mintlify layout + native components. Only the integration chips carry light custom styling. ============================================================ */ /* Connector tags on skill pages — static labels, styled to match the Changelog filter chips: square 4px, 12px Inter, 20px min-height, inset hairline border. No hover state — these are labels, not controls. */ .thread-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.5rem 0; } .thread-chip { display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px; border-radius: 4px; font-size: 12px; font-weight: 500; line-height: 1.66; text-decoration: none !important; color: #008E78 !important; background: rgba(0, 179, 152, 0.06); box-shadow: inset 0 0 0 0.5px rgba(0, 179, 152, 0.35); } .dark .thread-chip { color: #19D3AB !important; background: rgba(25, 211, 171, 0.08); box-shadow: inset 0 0 0 0.5px rgba(25, 211, 171, 0.3); } /* Native "Thread" chip renders identically to connector chips (the `.thread-chip` base above) — no filled variant, so every connector tag reads the same. */ /* Magic Library tier chips ("Runs as: Agent / Agent + Skill / Skill"), emitted by scripts/sync_skills.py. Two tones, following BRAND.md §9's tag mapping: the Flow-triggerable tiers are the notable capability, so they keep the brand tint at weight 600; a person-run Skill is the ordinary case and takes the neutral chip (tan fill, neutral text, hairline, weight 500). Tint-only — no colored borders. rgba families match the hairlines already used in this file. */ /* The tier chip sits mid-sentence ("Runs as: [Agent] — a Flow can run it…"), so unlike the Connectors row it flows inline instead of taking its own line. The base `.thread-chips` is a block-level flex row with vertical margin; scope the override to the tier wrapper so the connector chips keep their own layout. */ .thread-chips[data-skill-tier] { display: inline-flex; vertical-align: baseline; margin: 0; } .thread-chip-tier-agent { font-weight: 600; } .thread-chip-tier-skill { color: rgba(22, 28, 27, 0.72) !important; background: #faf9f6; box-shadow: inset 0 0 0 0.5px rgba(22, 28, 27, 0.14); } .dark .thread-chip-tier-skill { color: rgba(222, 227, 227, 0.8) !important; background: rgba(222, 227, 227, 0.06); box-shadow: inset 0 0 0 0.5px rgba(222, 227, 227, 0.16); } /* Beta pill, emitted next to the Agent / Agent + Skill tier chips (see scripts/sync_skills.py). What makes an entry an Agent rather than a Skill is the New Super Magic Agent Flow action, which is still per-workspace beta — so the marker rides the tier, not the whole library. A person-run Skill is GA and gets none. Deliberately NOT brand teal: teal is the tier chip's own tone here, and two teal pills side by side read as one thing. This takes an amber tint — the conventional "not GA yet" signal — kept tint-only with a hairline, per BRAND.md §9 (no colored borders, 20px min-height, 4px radius, 12px Inter). Uppercase + tracking so it reads as a status marker rather than a label. */ .thread-chip-beta { color: #8A5D14 !important; background: rgba(138, 93, 20, 0.08); box-shadow: inset 0 0 0 0.5px rgba(138, 93, 20, 0.28); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .dark .thread-chip-beta { color: #D9AE5E !important; background: rgba(217, 174, 94, 0.1); box-shadow: inset 0 0 0 0.5px rgba(217, 174, 94, 0.3); } /* The tier wrapper is an inline-flex row; give the two pills a real gap so the Beta marker never touches the tier chip. */ .thread-chips[data-skill-tier] { gap: 0.3rem; } /* ============================================================ Changelog highlight-on-filter chips. Mintlify's native tag filter has no documented hook to detect its active state from custom code, so this is an independent, self-contained layer (see scripts/CHANGELOG-AUTOMATION.md). Background-tint only, no colored border — BRAND.md §19 explicitly rules out colored left-border accent cards as "not a Merlin pattern". Chip spec follows BRAND.md §9 (badges and chips): 20px min-height, 4px radius, 12px Inter. ============================================================ */ .changelog-filter-bar { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.5rem; margin: 1rem 0 1.75rem; } /* Rail placement (≥1280px, Mintlify's "xl" breakpoint): changelog-filter.js clones the bar into ".changelog-filter-rail-panel", inserted into the same sticky column the table-of-contents occupies on every other page. Both the heading and the cloned bar sit inside that ONE panel so they share a single padding-left/width source — giving each its own copy of those values invited them drifting out of alignment with each other. w-19rem + pl-10 mirror #table-of-contents-layout's own sizing exactly, since the panel is a sibling of that column's wrapper, not a descendant of it — nothing else supplies that width/indent for it. */ .changelog-filter-rail-panel { width: 19rem; padding-left: 2.5rem; margin: 0 0 1.5rem; } .changelog-filter-bar.changelog-filter-bar--rail { /* display:flex + flex-wrap:wrap + justify-content:flex-start are all inherited from .changelog-filter-bar above — chips still wrap left-to-right as a tag cloud, just narrower. */ margin: 0; } .changelog-filter-rail-heading { /* Matches #table-of-contents-layout's "On this page" button exactly: text-gray-700/dark:text-gray-300, font-medium, text-sm. */ color: rgb(55, 65, 81); font-weight: 500; font-size: 0.875rem; line-height: 1.5rem; margin-bottom: 0.5rem; } .dark .changelog-filter-rail-heading { color: rgb(209, 213, 219); } /* Only one bar is ever meant to be visible at a time — the rail clone above 1280px (matched by Mintlify's own "xl" breakpoint, which is also what makes the rail column itself exist at all), the inline one below it. changelog-filter.js keeps both in sync regardless of which is shown, so a resize across this line never loses filter state. */ @media (min-width: 1280px) { .changelog-filter-bar:not(.changelog-filter-bar--rail) { display: none; } } .changelog-filter-chip { display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px; border-radius: 4px; border: none; font-family: inherit; font-size: 12px; font-weight: 500; line-height: 1.66; cursor: pointer; color: #008E78; background: rgba(0, 179, 152, 0.06); box-shadow: inset 0 0 0 0.5px rgba(0, 179, 152, 0.35); transition: background 0.15s ease, box-shadow 0.15s ease; } .changelog-filter-chip:hover { background: rgba(0, 179, 152, 0.12); } .changelog-filter-chip.is-active { font-weight: 600; background: rgba(0, 179, 152, 0.16); box-shadow: inset 0 0 0 0.5px rgba(0, 179, 152, 0.6); } .dark .changelog-filter-chip { color: #19D3AB; background: rgba(25, 211, 171, 0.08); box-shadow: inset 0 0 0 0.5px rgba(25, 211, 171, 0.3); } .dark .changelog-filter-chip:hover { background: rgba(25, 211, 171, 0.14); } .dark .changelog-filter-chip.is-active { background: rgba(25, 211, 171, 0.2); box-shadow: inset 0 0 0 0.5px rgba(25, 211, 171, 0.6); } /* Highlighted matching subsection when a chip is active. A boxed background tint read as heavy chrome, not a Merlin pattern — so instead this colors the subsection's own heading text and bullet markers, the same teal used everywhere else on this page. Nothing about layout changes, only color, so there's no shift to guard against. */ [data-changelog-tag] { scroll-margin-top: 11rem; /* the sticky banner + navbar together measure ~9.5rem (152px) tall, so the 9rem used for anchored headings elsewhere on this site left a heading's top sliver clipped behind them — confirmed by clicking a filter chip and finding the target heading partially hidden. 11rem clears that with comfortable room to spare, even with the banner showing. */ } [data-changelog-tag].changelog-highlight > span[data-as="p"]:first-child strong { color: #00B398; transition: color 0.18s ease; } [data-changelog-tag].changelog-highlight ul li::marker { color: #00B398; transition: color 0.18s ease; } .dark [data-changelog-tag].changelog-highlight > span[data-as="p"]:first-child strong { color: #19D3AB; } .dark [data-changelog-tag].changelog-highlight ul li::marker { color: #19D3AB; } /* Same twinkling magic-spark used for the active table-of-contents item (see the [id*="table-of-contents"] rules above) — reused here rather than invented fresh, so "this section matched your filter" reads as the same visual language as "you're here" elsewhere on the site. */ [data-changelog-tag].changelog-highlight > span[data-as="p"]:first-child { position: relative; padding-left: 1.4em; } [data-changelog-tag].changelog-highlight > span[data-as="p"]:first-child::before, [data-changelog-tag].changelog-highlight > span[data-as="p"]:first-child::after { content: ""; position: absolute; left: 0.02em; top: 50%; width: 1.05em; height: 1.05em; margin-top: -0.525em; background-color: #008E78; } [data-changelog-tag].changelog-highlight > span[data-as="p"]:first-child::before { -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M8%202.5%20L10.1%206.9%20L14.5%209%20L10.1%2011.1%20L8%2015.5%20L5.9%2011.1%20L1.5%209%20L5.9%206.9%20Z'/%3E%3Cpath%20d='M16.5%202.2%20L17.4%204.1%20L19.3%205%20L17.4%205.9%20L16.5%207.8%20L15.6%205.9%20L13.7%205%20L15.6%204.1%20Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M8%202.5%20L10.1%206.9%20L14.5%209%20L10.1%2011.1%20L8%2015.5%20L5.9%2011.1%20L1.5%209%20L5.9%206.9%20Z'/%3E%3Cpath%20d='M16.5%202.2%20L17.4%204.1%20L19.3%205%20L17.4%205.9%20L16.5%207.8%20L15.6%205.9%20L13.7%205%20L15.6%204.1%20Z'/%3E%3C/svg%3E") center / contain no-repeat; animation: toc-star-in 0.4s ease both, toc-star-twinkle-a 2.6s ease-in-out 0.4s infinite; } [data-changelog-tag].changelog-highlight > span[data-as="p"]:first-child::after { -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M17%2012%20L18.3%2014.7%20L21%2016%20L18.3%2017.3%20L17%2020%20L15.7%2017.3%20L13%2016%20L15.7%2014.7%20Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M17%2012%20L18.3%2014.7%20L21%2016%20L18.3%2017.3%20L17%2020%20L15.7%2017.3%20L13%2016%20L15.7%2014.7%20Z'/%3E%3C/svg%3E") center / contain no-repeat; animation: toc-star-in 0.4s ease both, toc-star-twinkle-b 2.15s ease-in-out 0.55s infinite; } .dark [data-changelog-tag].changelog-highlight > span[data-as="p"]:first-child::before, .dark [data-changelog-tag].changelog-highlight > span[data-as="p"]:first-child::after { background-color: #19D3AB; } @media (prefers-reduced-motion: reduce) { [data-changelog-tag].changelog-highlight > span[data-as="p"]:first-child::before, [data-changelog-tag].changelog-highlight > span[data-as="p"]:first-child::after { animation: none !important; } } /* Real filtering, not just highlighting: a week with no subsection matching any active tag is hidden entirely rather than left fully visible next to the ones that do match. */ .update-container.changelog-week-hidden { display: none !important; } /* Mintlify's native tag-filter panel (right sidebar) and its plain-text inline tag list under each entry's date label both duplicate our own filter-chip bar above — hide both, keep only the one interactive control. The tags={[...]} prop stays in the MDX (still feeds RSS/search), only the visual rendering of these two is hidden. #changelog-filters must be hidden with visibility, not display: none. Its parent is the same sticky xl:flex rail every other page uses for the table of contents; that rail has no width of its own, only a max-width, so it sizes to its content. display: none on the only child collapsed the rail to 0 and let the article column stretch to ~833px instead of the ~529px every other page uses — the changelog read "full width" compared to the rest of the site. visibility: hidden keeps the child's box (and so the rail's reserved width) intact while still hiding it and removing it from the click/tab order. */ #changelog-filters { visibility: hidden !important; pointer-events: none !important; /* Collapse the height of the space this panel would otherwise still take (visibility:hidden preserves height, not just width) — its rendered width is still what reserves the rail column, so only height/overflow are touched here. Left as a sibling rather than removed so that width contribution keeps working even if its own content (Mintlify's native chip list) changes length later. */ height: 0 !important; min-height: 0 !important; overflow: hidden !important; } .flex.flex-wrap.gap-2.text-secondary.mt-3.text-sm { display: none !important; } /* Line up each week's sticky date pill with the sidebar's active "Changelog" nav item, so the two read as one aligned system as you scroll — matching *vertical centers*, not top edges: the sidebar link (36px tall) and the date pill (28px tall) differ in height, so a top-edge match alone left the pill sitting visibly above the sidebar item's midpoint. --changelog-label-top is set by changelog-filter.js from the navbar's real, live height — see that file for why: the sidebar's own positioning variable is scoped to its subtree and unreadable from here, and its documented fallback doesn't track the dismissible top banner either. The 182px fallback below only covers the instant before that JS runs. .update-container is Mintlify's wrapper for one whole block; its first child is the sticky label column — is only ever used on the quarterly changelog pages (changelog/*.mdx), so scoping by that wrapper alone is enough, no page-level selector needed. */ .update-container > *:first-child { top: var(--changelog-label-top, 182px) !important; } /* Magic Library tab icon — theme the custom stars SVG like the other (Font Awesome) tab icons. Mintlify renders a custom SVG icon (`icon: /logo/stars.svg`) as a plain with a fixed fill, so it can't follow the nav's gray→teal color the way FA icons (a masked to the same masked treatment: drop its bitmap (content:""), paint a background in currentColor (which the nav sets to gray when inactive, teal when active/hover), and mask it with the three-star shape. Result: the stars inherit the theme exactly like every other tab. */ /* Hide the raw (an shows its own SVG pixels — which rendered as a solid black sparkle — and `content:""` to drop that bitmap isn't reliable across browsers), then paint a themed sparkle with a MASKED pseudo-element: the exact technique the Font Awesome tab icons use (a masked box whose background-color = currentColor, so it is gray when the tab is inactive and teal when it's active/hovered). MUST stay scoped to `.nav-tabs-item`. An unscoped `a[href$="/skill-library/overview"]` also matches the ~20 prose links and Cards that point at the library, injecting a stray sparkle into body copy — and because the box is `1lh` tall, on 16px/28px prose it renders 8px above the text instead of on it. The tab bar is the only place this icon belongs. */ .nav-tabs-item[href$="/skill-library/overview"] img { display: none !important; } .nav-tabs-item[href$="/skill-library/overview"]::before { content: ""; display: inline-block; flex: 0 0 auto; width: 1rem; /* Match Mintlify's own icon metric: it wraps every nav icon in a `h-[1lh] flex items-center shrink-0` box, so a 1rem glyph ends up centred on the first line of the label. A 1lh box with a centred mask reproduces that wrapper on the `items-center` tab row. */ height: 1lh; background-color: currentColor; -webkit-mask: url("/logo/stars.svg") center / 1rem 1rem no-repeat; mask: url("/logo/stars.svg") center / 1rem 1rem no-repeat; } /* ============================================================ Calendly booking modal — a custom overlay + inline embed we fully control (see snippets/calendly-popup.jsx), instead of Calendly's own popup widget. The embed keeps Calendly's event header (logo/title/duration/details) above the calendar. We size the modal compact (580px) — far tighter than Calendly's ~1000px popup; the booking area scrolls within the modal if it needs to. Docs-dark blurred backdrop, 8px corners (matching cards), card-like depth with a subtle teal ring. The booking iframe is themed via the URL color params. Kept light (warm-tan) in both themes to match those params. ============================================================ */ .thread-cal-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(10, 10, 11, 0.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .thread-cal-modal { position: relative; width: 580px; max-width: 100%; height: 620px; max-height: 88vh; background: #faf9f6; border-radius: 8px; overflow: hidden; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 179, 152, 0.28); } .thread-cal-embed, .thread-cal-embed iframe { width: 100% !important; height: 100% !important; border: 0; } .thread-cal-close { position: absolute; top: 10px; right: 12px; z-index: 3; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; color: rgba(10, 10, 11, 0.5); transition: color 0.15s ease; } .thread-cal-close:hover { color: #0a0a0b; } /* Loading state shown while Calendly's booking page loads — a single calm brand spinner in place of Calendly's default loader. */ .thread-cal-embed .calendly-spinner { display: none !important; } .thread-cal-skeleton { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; background: #faf9f6; transition: opacity 0.35s ease; } .thread-cal-skeleton.is-hidden { opacity: 0; } .thread-cal-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(10, 10, 11, 0.13); border-top-color: #008e78; animation: thread-cal-spin 0.8s linear infinite; } @keyframes thread-cal-spin { 100% { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .thread-cal-spinner { animation: none; } } /* ============================================================ Divider between top-level sidebar groups — matches docs.omni.co. Omni's Mintlify build emits its own `div.sidebar-nav-group-divider.h-px.w-full` (`bg-gray-100` / `dark:bg-white/10`) between top-level groups; our build emits none, so the groups run together. Recreated here on the group wrapper — the one div with a `.sidebar-group-header` as a direct child, which avoids keying on Tailwind classes. The `:not(:has(.sidebar-nav-group-divider))` guard is deliberate and load-bearing: the moment our Mintlify build starts emitting the native divider, this fallback switches itself off, so we can never paint two hairlines. Light uses a warm `rgba(0,0,0,.07)` rather than Omni's cool `#f3f4f6`, which is almost invisible against our tan `#FAF9F6`; dark matches Omni's `white/10` exactly. No line above a group that starts the list — this separates groups, it doesn't cap them. ============================================================ */ #sidebar-content:not(:has(.sidebar-nav-group-divider)) div:has(> .sidebar-group-header) { border-top: 1px solid rgba(0, 0, 0, 0.07); padding-top: 12px; } .dark #sidebar-content:not(:has(.sidebar-nav-group-divider)) div:has(> .sidebar-group-header) { border-top-color: rgba(255, 255, 255, 0.1); } #sidebar-content:not(:has(.sidebar-nav-group-divider)) div:has(> .sidebar-group-header):first-child { border-top: 0; padding-top: 0; }

Open the full guide — Magic Analytics