/* 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 */ .ch-hero-card { transition: border-color 0.12s ease !important; } .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; } /* 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; transition: opacity 0.1s ease-out; } /* 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); } /* 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; } /* 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