/* 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); } /* 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; transition: background-color 120ms ease, transform 80ms ease; } .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; transition: transform 150ms ease; } .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

Page	Description
Visual Interfaces	Third-party GUI tools and applications for working with ClickHouse
Proxy Servers	Third-party proxy solutions for ClickHouse
Integration Libraries	Integration libraries from third-party developers