/* 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 group-heading parity (Merlin §14 "all groups consistent"). Mintlify renders collapsible group toggles muted (gray-400/weight-400) while plain group headers are bright (gray-900/200, weight-600). Lift the collapsible ones to match so every group heading reads the same. ============================================================ */ ul.sidebar-group > li > button, ul.sidebar-group > li > button * { color: rgb(22, 28, 27) !important; font-weight: 600 !important; } .dark ul.sidebar-group > li > button, .dark ul.sidebar-group > li > button * { color: rgb(222, 227, 227) !important; } /* Group-heading icons are masked elements colored via `background-color` (bg-gray-400/500), so `color` doesn't touch them. Recolor the mask to match the header text — for both plain and collapsible group headers. */ .sidebar-group-header svg[class*="bg-gray"], ul.sidebar-group > li > button svg[class*="bg-gray"] { background-color: rgb(22, 28, 27) !important; } .dark .sidebar-group-header svg[class*="bg-gray"], .dark ul.sidebar-group > li > button 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; } #sidebar-content .sidebar-group-header, #sidebar-content ul.sidebar-group > li > button { 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); } /* Skill Library: one divider between the overview link ("Skill 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, .thread-chip-tier-agent-skill { 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; } /* Skill 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). */ a[href$="/skill-library/overview"] img { display: none !important; } a[href$="/skill-library/overview"]::before { content: ""; display: inline-block; flex: 0 0 auto; width: 1rem; /* Match Mintlify's own icon metric. It wraps every sidebar page 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. Our pseudo-element is a direct flex child of the row instead, and the sidebar row is `items-start` — so a plain 1rem box sat 4px above where every neighbouring icon sits. Giving the box a 1lh height and centring the mask inside it reproduces their wrapper exactly, and still centres 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; } }

Open the full guide — Magic Analytics