/* No motion anywhere in the documentation. Every state change is instantaneous: opening a panel, expanding a sidebar group, hovering a card, revealing the navbar. Transitions and animations delay the content the reader asked for and make the site feel sluggish, and a transition on a property that is updated while dragging (a panel height, for example) makes the element lag behind the pointer and re-render continuously. This is a global override rather than a set of local fixes because most of the motion comes from Mintlify's own bundle and its Tailwind utility classes (`transition-colors`, `animate-*`), which are not ours to edit. Zeroing the durations and delays - instead of `transition: none` / `animation: none` - keeps every final state intact: an animation still runs and still applies its `animation-fill-mode`, it just completes at once, so nothing that fades in can get stuck invisible. */ *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; } /* Reserve the scrollbar gutter at all times so nothing shifts when a modal locks body scroll and the scrollbar disappears. react-remove-scroll compensates with margin-right on body, but that double-compensates when the gutter is already reserved — zero it out. */ /* Hero cards on the home page */ .dark .ch-hero-card { background-color: #191919 !important; border-color: #2B2B2B !important; } /* Light mode: darken stroke only, no background change */ html:not(.dark) .ch-hero-card:hover { border-color: #9ca3af !important; } .dark .ch-hero-card:hover { background-color: #272727 !important; border-color: #535353 !important; } /* Use case section dividers */ .ch-usecase-divider { border: none !important; border-top: 1px solid #e5e7eb !important; } .dark .ch-usecase-divider { border-top-color: #2B2B2B !important; } /* Use case card arrows */ html:not(.dark) .ch-usecase-arrow { color: #2563eb; } .dark .ch-usecase-arrow { color: #FCFF74; } /* Restore the layout and appearance of the legacy Docusaurus VersionBadge. */ .versionBadge { background-color: #F6F7FA; border-radius: 16px; margin-top: 15px; margin-bottom: 15px; display: flex; align-items: center; padding: 5px 12px; display: inline-flex; } .dark .versionBadge { background-color: #282828; color: white; } /* The view selector uses the same full-width outlined control as the rest of the page chrome. */ .multi-view-dropdown-trigger { width: 100% !important; border: 1px solid #dcdde0 !important; border-radius: 4px !important; } .dark .multi-view-dropdown-trigger { border-color: rgba(255, 255, 255, 0.15) !important; } /* Homepage content hidden until React has mounted and child effects have settled. Double-RAF in PageWrapper ensures FullWidthDivider's own RAF fires first. */ .ch-page-hidden { opacity: 0; pointer-events: none; } .ch-page-visible { opacity: 1; } /* Overlay image drop shadow (hero cards with overlayImg) */ .ch-overlay-shadow { box-shadow: 0 8px 32px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.18); } /* Preserve the sm/md/lg image hierarchy from the previous docs site. Mintlify's content column is narrower, so 480px keeps md visibly distinct from a full-width lg image. */ .ch-image-sm, .ch-image-md, .ch-image-lg { width: 100%; margin-inline: auto; } .ch-image-sm { max-width: 300px; } .ch-image-md { max-width: 480px; } .ch-image-lg { max-width: 100%; } .ch-image-sm img, .ch-image-md img, .ch-image-lg img { width: 100%; height: auto; } /* MCP icon — mask-size/repeat extracted from inline style; URL stays inline */ .ch-mcp-icon { -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* Nav logo injected by tab-nav.js */ #ch-homepage-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; } #ch-hp-logo-light, #ch-hp-logo-dark { height: 2rem; } html { scrollbar-gutter: stable; } /* Override Mintlify prose link color rules for CTA buttons. Light: html:not(.dark) .prose a:not(.card):not(.card *) — specificity (0,4,2) Dark: .dark .prose a:not(.card):not(.card *) — specificity (0,4,1) We beat both by appending .ch-btn-* to the exact same selector → +1 class. */ /* Primary — light: white text on black bg; dark: black text on yellow bg */ html:not(.dark) .prose a.ch-btn-primary:not(.card):not(.card *), html .ch-btn-primary { color: #ffffff !important; } html.dark .prose a.ch-btn-primary:not(.card):not(.card *), html.dark .ch-btn-primary { color: #1c1c1c !important; } /* Secondary — light: black text; dark: white text */ html:not(.dark) .prose a.ch-btn-secondary:not(.card):not(.card *), html .ch-btn-secondary { color: #1c1c1c !important; } html.dark .prose a.ch-btn-secondary:not(.card):not(.card *), html.dark .ch-btn-secondary { color: #ffffff !important; } /* Hover: no underline */ html:not(.dark) .prose a.ch-btn-primary:not(.card):not(.card *):hover, html:not(.dark) .prose a.ch-btn-secondary:not(.card):not(.card *):hover, html .ch-btn-primary:hover, html .ch-btn-secondary:hover { text-decoration: none !important; } html.dark .prose a.ch-btn-primary:not(.card):not(.card *):hover, html.dark .prose a.ch-btn-secondary:not(.card):not(.card *):hover, html.dark .ch-btn-primary:hover, html.dark .ch-btn-secondary:hover { text-decoration: none !important; } /* Hover: preserve text color (beat prose a:hover color !important rules) */ html:not(.dark) .prose a.ch-btn-primary:not(.card):not(.card *):hover, html .ch-btn-primary:hover { color: #ffffff !important; } html:not(.dark) .prose a.ch-btn-secondary:not(.card):not(.card *):hover, html .ch-btn-secondary:hover { color: #1c1c1c !important; } html.dark .prose a.ch-btn-primary:not(.card):not(.card *):hover, html.dark .ch-btn-primary:hover { color: #1c1c1c !important; } html.dark .prose a.ch-btn-secondary:not(.card):not(.card *):hover, html.dark .ch-btn-secondary:hover { color: #ffffff !important; } body[data-scroll-locked] { margin-right: 0 !important; } /* Agent-assisted setup callout, ported from the Docusaurus AgentPrompt component. The `ch-` prefix keeps these rules isolated from Mintlify. */ .ch-agent-prompt-wrapper { --agent-accent: #FBFF46; --agent-accent-bg: #FFFFE8; --agent-text: #161517; --agent-text-muted: #696E79; --agent-prompt-bg: #FFFFFF; --agent-prompt-border: #FCFF74; --agent-button-bg: #FBFF46; --agent-button-bg-hover: #EEF400; --agent-button-text: #161517; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; margin: 1.25rem 0 1.75rem; padding: 14px 16px; border: 1px solid var(--agent-accent); border-radius: 8px; background: var(--agent-accent-bg); } .ch-agent-prompt-main-row { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; } .ch-agent-prompt-left, .ch-agent-prompt-copy-button { flex-shrink: 0; } .ch-agent-prompt-title { color: var(--agent-text); font-size: 0.875rem; font-weight: 600; white-space: nowrap; } .ch-agent-prompt-prompt-area { flex: 1 1 auto; min-width: 0; overflow-x: auto; padding: 6px 10px; border: 1px solid var(--agent-prompt-border); border-radius: 6px; background: var(--agent-prompt-bg); scrollbar-width: thin; } .ch-agent-prompt-prompt-area::-webkit-scrollbar { height: 6px; } .ch-agent-prompt-prompt-area::-webkit-scrollbar-thumb { border-radius: 3px; background: #FCFF74; } .prose .ch-agent-prompt-prompt-text, .ch-agent-prompt-prompt-text { display: block; padding: 0; border: 0; background: transparent; color: var(--agent-text); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.8125rem; white-space: nowrap; } .ch-agent-prompt-copy-button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--agent-accent); border-radius: 6px; background: var(--agent-button-bg); color: var(--agent-button-text); cursor: pointer; font-size: 0.8125rem; font-weight: 600; } .ch-agent-prompt-copy-button:hover { background: var(--agent-button-bg-hover); } .ch-agent-prompt-copy-button:active { transform: translateY(1px); } .ch-agent-prompt-copy-button:focus-visible, .ch-agent-prompt-outline-summary:focus-visible { outline: 2px solid #135BE6; outline-offset: 2px; } .ch-agent-prompt-sub-row { display: flex; align-items: baseline; gap: 8px; padding-left: 2px; font-size: 0.8125rem; line-height: 1.4; } .ch-agent-prompt-description { color: var(--agent-text-muted); } .prose a.ch-agent-prompt-repository-link, .ch-agent-prompt-repository-link { color: #135BE6 !important; font-weight: 600; } .ch-agent-prompt-outline { margin-top: 2px; padding-top: 8px; border-top: 1px dashed var(--agent-prompt-border); } .ch-agent-prompt-outline-summary { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; border-radius: 3px; color: var(--agent-text); cursor: pointer; font-size: 0.8125rem; font-weight: 600; list-style: none; user-select: none; } .ch-agent-prompt-outline-summary::-webkit-details-marker { display: none; } .ch-agent-prompt-outline-summary:hover { opacity: 0.85; } .ch-agent-prompt-outline-chevron { flex-shrink: 0; } .ch-agent-prompt-outline[open] > .ch-agent-prompt-outline-summary > .ch-agent-prompt-outline-chevron { transform: rotate(90deg); } .prose .ch-agent-prompt-outline-list, .ch-agent-prompt-outline-list { margin: 8px 0 2px; padding-left: 1.4rem; color: var(--agent-text-muted); font-size: 0.8125rem; line-height: 1.5; } .prose .ch-agent-prompt-outline-list li, .ch-agent-prompt-outline-list li { margin: 2px 0; padding-left: 2px; } .ch-agent-prompt-outline-list li::marker { color: var(--agent-text); font-weight: 600; } html.dark .ch-agent-prompt-wrapper, :is(.dark) .ch-agent-prompt-wrapper { --agent-accent: #FCFF74; --agent-accent-bg: rgba(251, 255, 70, 0.06); --agent-text: #FFFFFF; --agent-text-muted: #DFDFDF; --agent-prompt-bg: #1D1D1D; --agent-prompt-border: rgba(251, 255, 70, 0.35); --agent-button-bg: #FCFF74; --agent-button-bg-hover: #FBFF46; --agent-button-text: #151515; } html.dark .prose a.ch-agent-prompt-repository-link, :is(.dark) .prose a.ch-agent-prompt-repository-link { color: #FCFF74 !important; } @media (max-width: 768px) { .ch-agent-prompt-main-row { flex-wrap: wrap; } .ch-agent-prompt-prompt-area { order: 3; width: 100%; flex-basis: 100%; } .ch-agent-prompt-copy-button { margin-left: auto; } .ch-agent-prompt-prompt-text { white-space: pre-wrap; word-break: break-all; } .ch-agent-prompt-sub-row { align-items: flex-start; flex-direction: column; gap: 4px; } } /* The secondary navbar (`#navbar-transition-maple`) and the fixed sidebar (`#sidebar`) both reserve 40px above themselves for the announcement banner (Tailwind `lg:mt-10` / `top-10`). The banner is `position: fixed` and renders on top, so the reservation is purely visual. On initial load, before the banner hydrates, that fixed offset shows as an empty 40px gap above each element which visibly "closes" once the banner paints. Pin the offsets to `--banner-height` so they track the banner's actual presence — no banner, no gap. */ #navbar-transition-maple { margin-top: 0 !important; top: var(--banner-height, 0px) !important; } #sidebar { top: var(--banner-height, 0px) !important; } /* Visually distinguish the expand/collapse chevron from the group label in the sidebar. Each collapsible group is a single