Google Git
Sign in
apache/datafusion-comet/refs/heads/main/./docs/source/_static/theme_overrides.css
blob: 4a0b5a3bafac722b55c91e35511c449d1930a530 [file]
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
/* ─── Google Fonts ─────────────────────────────────────────────────── */
/* Fonts are loaded via <link> in _templates/layout.html using the
print→all swap pattern so they don't block first paint. The system
font stack in --comet-font / --comet-mono is the fallback while the
web fonts are still loading. */
/* ─── Shared tokens ────────────────────────────────────────────────── */
:root {
/* Brand orange — SINGLE SOURCE OF TRUTH.
--comet-accent-rgb holds the raw channels so every translucent tint
(fills, focus rings, link underlines, glows) is composed with
rgba(var(--comet-accent-rgb), <alpha>) instead of re-typing the hex.
Change the brand color here and every orange on the site follows. */
--comet-accent-rgb: 232, 101, 10;
--comet-accent: rgb(var(--comet-accent-rgb)); /* brand orange — buttons, backgrounds, large headings */
--comet-accent-lite: #f07830; /* hover variant */
--comet-accent-text: #a84808; /* AA-passing variant for small text on light bg (~5.9:1) — default */
--comet-accent-dim: rgba(var(--comet-accent-rgb), 0.10); /* translucent fill */
--comet-accent-underline: rgba(var(--comet-accent-rgb), 0.30); /* link underline rest state */
--comet-accent-ring: rgba(var(--comet-accent-rgb), 0.18); /* focus ring */
--comet-accent-tint: rgba(var(--comet-accent-rgb), 0.05); /* faint hover wash */
--comet-accent-glow: rgba(var(--comet-accent-rgb), 0.08); /* card hover shadow */
/* Surfaces that aren't covered by PST's palette. */
--comet-figure-bg: #ffffff; /* charts/diagrams assume a white canvas */
--comet-radius: 6px;
--comet-font: 'Inter', system-ui, -apple-system, sans-serif;
--comet-mono: 'JetBrains Mono', 'Fira Code', monospace;
--comet-sidebar-w: 280px;
/* ── Code & terminal palette ──────────────────────────────────────
Code blocks and the hero terminal use a DARK background in BOTH the
light and dark site themes, so their syntax colors must read well on
near-black regardless of mode. We define them once here and share
them between the Pygments-rendered blocks (.highlight) and the
hand-built hero terminal (.comet-terminal) so the two never drift.
Every color below clears WCAG AA (≥ 4.5:1) on --comet-code-bg. */
--comet-code-bg: #0e0e0e; /* code block surface */
--comet-code-fg: #e2e8f0; /* default text + any untyped token */
--comet-code-keyword: #c792ea; /* keywords, storage, declarations */
--comet-code-string: #c3e88d; /* string + char literals */
--comet-code-comment: #8a98a5; /* comments — was #546e7a (too dim) */
--comet-code-func: #82aaff; /* function / builtin names */
--comet-code-number: #f78c6c; /* numeric literals */
--comet-code-operator: #89ddff; /* operators, punctuation accents */
--comet-code-class: #ffcb6b; /* class / type names */
--comet-code-meta: #9fb0c3; /* console prompt, output, traceback */
--comet-code-prompt: #f07830; /* terminal "$" / "scala>" prompt */
/* Hero terminal chrome — a faintly blue near-black so the framed
"terminal app" reads as distinct from inline code blocks. */
--comet-terminal-bg: #0d0f12;
--comet-terminal-bar: #15181c;
--comet-terminal-border: #1f242b;
}
/* In dark mode the lighter orange has plenty of contrast on near-black,
so use it as the text variant instead of the darkened light-mode one. */
html[data-theme="dark"] {
--comet-accent-text: #f07830; /* 5.1:1 on #0a0a0a */
--comet-surface-sunken: #0e0e0e; /* alternating-section bg, dark mode only */
/* In dark mode the page background is near-black (#0a0a0a), so the
default code surface (#0e0e0e) sits almost flush with the page and
the terminal "disappears." Lift it to a brighter shade here so the
code block reads as a raised surface — classic dark-mode elevation.
The token also feeds the hero terminal so the lift is consistent. */
--comet-code-bg: #1c1c1c; /* raised code surface */
--comet-terminal-bg: #1c1c1c;
}
/* ─── PST overrides — LIGHT ────────────────────────────────────────── */
html[data-theme="light"] {
--pst-color-primary: #e8650a;
--pst-color-secondary: #e8650a;
--pst-color-background: #ffffff;
--pst-color-on-background: #fafafa;
--pst-color-surface: #f5f5f6;
--pst-color-on-surface: #1a1a1a;
--pst-color-text-base: #333333;
--pst-color-text-muted: #666666;
--pst-color-border: #e2e2e6;
--pst-color-border-muted: #ebebee;
--pst-color-heading: #111111;
--pst-color-inline-code: #a84808;
--pst-color-inline-code-links: #a84808;
--pst-color-link: #a84808;
--pst-color-link-hover: #f07830;
--pst-font-family-base: var(--comet-font);
--pst-font-family-monospace: var(--comet-mono);
--pst-font-size-base: 0.95rem;
--pst-content-max-width: 100%;
}
/* ─── PST overrides — DARK ─────────────────────────────────────────── */
html[data-theme="dark"] {
--pst-color-primary: #e8650a;
--pst-color-secondary: #f07830;
--pst-color-background: #0a0a0a;
--pst-color-on-background: #0f0f0f;
--pst-color-surface: #141414;
--pst-color-on-surface: #f0f0f0;
--pst-color-text-base: #c8c8c8;
--pst-color-text-muted: #888888;
--pst-color-border: #282828;
--pst-color-border-muted: #1e1e1e;
--pst-color-heading: #f0f0f0;
--pst-color-inline-code: #f07830;
--pst-color-inline-code-links: #f07830;
--pst-color-link: #e8650a;
--pst-color-link-hover: #f07830;
--pst-color-shadow: rgba(0, 0, 0, 0.5);
--pst-color-table: #c8c8c8;
--pst-color-table-inner-border: #282828;
--pst-color-table-outer-border: #282828;
--pst-color-table-heading-bg: #141414;
--pst-font-family-base: var(--comet-font);
--pst-font-family-monospace: var(--comet-mono);
--pst-font-size-base: 0.95rem;
--pst-content-max-width: 100%;
}
/* ─── Global base ──────────────────────────────────────────────────── */
body {
font-family: var(--comet-font) !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ─── TOP NAVBAR ───────────────────────────────────────────────────── */
.bd-header.navbar,
header.bd-header {
min-height: 56px !important;
padding: 0 24px !important;
box-shadow: none !important;
border-bottom: 1px solid var(--pst-color-border) !important;
}
html[data-theme="dark"] .bd-header.navbar {
background: rgba(10, 10, 10, 0.96) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
html[data-theme="light"] .bd-header.navbar {
background: rgba(255, 255, 255, 0.96) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.bd-header__inner.bd-page-width {
padding: 0 !important;
max-width: none !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
/* Logo */
.navbar-brand.logo {
padding: 0 !important;
margin-right: 0 !important;
}
.bd-header .navbar-brand img.logo__image {
height: 38px !important;
width: auto !important;
margin-right: 0 !important;
vertical-align: middle;
}
/* ── Navbar center: nav links centered ── */
.col-lg-3.navbar-header-items__start {
flex: 0 0 auto !important;
width: auto !important;
}
.col-lg-9.navbar-header-items {
flex: 1 !important;
display: flex !important;
justify-content: center !important;
}
.navbar-header-items__center {
display: flex !important;
justify-content: center !important;
flex: 1 !important;
}
.navbar-header-items__end {
display: flex !important;
align-items: center !important;
gap: 4px !important;
margin-left: auto !important;
}
/* Top nav links */
.bd-navbar-elements.navbar-nav {
justify-content: center !important;
gap: 4px !important;
}
.bd-navbar-elements.navbar-nav .nav-item .nav-link {
font-size: 14px !important;
font-weight: 500 !important;
padding: 6px 16px !important;
border-radius: 0 !important;
color: var(--pst-color-text-muted) !important;
transition: color 140ms ease !important;
border: none !important;
border-bottom: 2px solid transparent !important;
background: transparent !important;
position: relative !important;
}
.bd-navbar-elements.navbar-nav .nav-item .nav-link:hover {
color: var(--pst-color-on-surface) !important;
background: transparent !important;
}
/* Active tab: orange underline — only .active (single tab), not .current (matches ancestors too) */
.bd-navbar-elements.navbar-nav .nav-item.active > .nav-link,
.bd-navbar-elements.navbar-nav .nav-item .nav-link[aria-current="page"] {
color: var(--pst-color-on-surface) !important;
background: transparent !important;
border-bottom-color: var(--comet-accent) !important;
font-weight: 600 !important;
}
/* ── Hide search from navbar — it lives in the sidebar now ── */
.navbar-persistent--container,
.navbar-item:has(.search-button-field),
.navbar-persistent--mobile {
display: none !important;
}
/* Theme switcher & icon buttons */
.pst-navbar-icon,
.theme-switch-button {
padding: 5px 8px !important;
border-radius: 5px !important;
color: var(--pst-color-text-muted) !important;
transition: color 120ms ease, background 120ms ease !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
.pst-navbar-icon:hover,
.theme-switch-button:hover {
color: var(--pst-color-on-surface) !important;
background: var(--pst-color-surface) !important;
}
/* ─── SIDEBAR ──────────────────────────────────────────────────────── */
.bd-sidebar-primary.bd-sidebar {
width: var(--comet-sidebar-w) !important;
flex: 0 0 var(--comet-sidebar-w) !important;
border-right: 1px solid var(--pst-color-border) !important;
box-shadow: none !important;
padding-top: 0 !important;
}
html[data-theme="dark"] .bd-sidebar-primary.bd-sidebar {
background: #0d0d0d !important;
}
html[data-theme="light"] .bd-sidebar-primary.bd-sidebar {
background: #fafafa !important;
}
/* ── Sidebar search field — pill style matching screenshot ── */
.sidebar-primary-items__start {
padding: 0 !important;
}
.bd-sidebar .bd-search,
.sidebar-primary__section .bd-search {
padding: 14px 14px !important;
border-bottom: 1px solid var(--pst-color-border) !important;
margin: 0 !important;
position: relative !important;
display: flex !important;
align-items: center !important;
}
/* The pill container — make the whole form the pill */
.bd-sidebar form.bd-search {
border-radius: 24px !important;
border: 1px solid var(--pst-color-border) !important;
background: var(--pst-color-surface) !important;
padding: 0 14px !important;
margin: 12px 14px !important;
height: 38px !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
transition: border-color 140ms ease !important;
}
html[data-theme="dark"] .bd-sidebar form.bd-search {
background: #1a1a1a !important;
border-color: #2e2e2e !important;
}
.bd-sidebar form.bd-search:focus-within {
border-color: var(--comet-accent) !important;
outline: none !important;
box-shadow: 0 0 0 3px var(--comet-accent-ring) !important;
}
/* Kill default browser/Bootstrap focus rings on the form + input */
.bd-sidebar form.bd-search,
.bd-sidebar form.bd-search:focus,
.bd-sidebar form.bd-search *:focus,
.bd-sidebar form.bd-search *:focus-visible {
outline: none !important;
}
/* Icon */
.bd-sidebar .bd-search i.fa-magnifying-glass,
.bd-sidebar .bd-search .fa-search {
color: var(--pst-color-text-muted) !important;
font-size: 13px !important;
flex-shrink: 0 !important;
}
/* Input — no border, transparent, fills space */
.bd-sidebar .bd-search .form-control,
.sidebar-primary__section input[type="search"] {
font-family: var(--comet-font) !important;
font-size: 13.5px !important;
border: none !important;
background: transparent !important;
color: var(--pst-color-on-surface) !important;
padding: 0 !important;
box-shadow: none !important;
flex: 1 !important;
min-width: 0 !important;
outline: none !important;
}
.bd-sidebar .bd-search .form-control:focus {
box-shadow: none !important;
outline: none !important;
}
.bd-sidebar .bd-search .form-control::placeholder {
color: var(--pst-color-text-muted) !important;
}
/* ⌘K shortcut badge */
.bd-sidebar .bd-search .search-button__kbd-shortcut {
display: flex !important;
align-items: center !important;
gap: 2px !important;
flex-shrink: 0 !important;
}
.bd-sidebar .bd-search .search-button__kbd-shortcut kbd {
font-family: var(--comet-font) !important;
font-size: 11px !important;
padding: 1px 5px !important;
border-radius: 4px !important;
border: 1px solid var(--pst-color-border) !important;
color: var(--pst-color-text-muted) !important;
background: transparent !important;
line-height: 1.5 !important;
}
/* Show ⌘ on Mac; hide "Ctrl+" text visually — use CSS content swap */
.bd-sidebar .kbd-shortcut__modifier {
font-size: 11px !important;
}
/* ── Sidebar nav section captions (group labels) — hidden since INDEX removed ── */
.bd-links .caption,
.bd-toc-item > p.caption {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--pst-color-text-muted) !important;
padding: 18px 16px 6px !important;
margin: 0 !important;
}
.bd-toc-item:first-child > p.caption {
padding-top: 12px !important;
}
/* Per-version caption groups nested inside a version's own accordion on
every User Guide page (see user_guide_sidebar_html in conf.py). They sit
inside a <details>, which the top-level "User Guide" caption never does,
so this selector reaches only them. Indent to align under that version's
link, de-emphasize relative to the top-level caption, and add the same
hairline-divider treatment already used above for the version groups
under "Older Versions" — makes the IA snap visually instead of relying
on a 1px font-size delta alone. */
.bd-links details > p.caption {
padding-left: 32px !important;
font-size: 10px !important;
font-weight: 600 !important;
margin-top: 14px !important;
padding-top: 14px !important;
border-top: 1px solid var(--pst-color-border-muted) !important;
}
.bd-links details > p.caption:first-child {
margin-top: 4px !important;
padding-top: 4px !important;
border-top: none !important;
}
/* ── Nav items ── */
.bd-links ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.bd-links li a.reference {
display: block !important;
font-size: 14px !important;
font-weight: 400 !important;
padding: 10px 16px 10px 20px !important;
border-left: 2px solid transparent !important;
color: var(--pst-color-text-muted) !important;
text-decoration: none !important;
transition: color 120ms ease, background 120ms ease, border-color 120ms ease !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.5 !important;
}
/* Spacing between sibling nav items — adds vertical rhythm */
.bd-links li + li {
margin-top: 2px !important;
}
/* Bigger gap above each top-level section */
.bd-links .toctree-l1 {
margin-top: 16px !important;
}
.bd-links .toctree-l1:first-child {
margin-top: 8px !important;
}
/* Within a current section, give the version groups (l2 with children)
a hairline divider above + breathing room — makes the IA snap visually */
.bd-links .toctree-l1.current > ul > .toctree-l2:has(> ul) {
margin-top: 14px !important;
padding-top: 14px !important;
border-top: 1px solid var(--pst-color-border-muted) !important;
}
.bd-links .toctree-l1.current > ul > .toctree-l2:has(> ul):first-child {
margin-top: 4px !important;
padding-top: 4px !important;
border-top: none !important;
}
/* Leaf l2 items (no children) just get a small gap, no rule */
.bd-links .toctree-l1.current > ul > .toctree-l2:not(:has(> ul)) {
margin-top: 6px !important;
}
.bd-links .toctree-l1.current > ul > .toctree-l2:not(:has(> ul)):first-child {
margin-top: 4px !important;
}
/* Sub-items (the actual page links) sit closer together for a tight cluster */
.bd-links .toctree-l3 + .toctree-l3 {
margin-top: 0 !important;
}
.bd-links li a.reference:hover {
color: var(--pst-color-on-surface) !important;
background: var(--pst-color-surface) !important;
border-left-color: var(--pst-color-border) !important;
}
/* ── Section-scoped sidebar ─────────────────────────────────────────── */
/* Section scoping is now handled at the template level by docs-sidebar.html
(generate_toctree_html with startdepth=1 picks the section's own toctree
as the root). No CSS hiding needed — the rendered tree already contains
only the current section's contents. The full tree stays stable as the
user clicks around within a section; only the .current highlight moves. */
/* L1 items (the section's direct children — e.g. 0.16.x, Dev Snapshot,
Older Versions inside User Guide) carry slightly stronger weight when
they're containers, to read as group headers. */
.bd-links:not(.comet-filtering) .toctree-l1:has(> ul) > a.reference {
font-weight: 500 !important;
color: var(--pst-color-on-surface) !important;
font-size: 14px !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.bd-links:not(.comet-filtering) .toctree-l1:not(:has(> ul)) > a.reference {
font-weight: 400 !important;
color: var(--pst-color-text-muted) !important;
font-size: 14px !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
}
/* ── Collapse: hide children of sections that are not explicitly expanded ── */
/* Visibility is now controlled by the .comet-expanded class (toggled via JS button) */
.bd-links .toctree-l1:not(.comet-expanded) > ul,
.bd-links .toctree-l2:not(.comet-expanded) > ul,
.bd-links .toctree-l3:not(.comet-expanded) > ul,
.bd-links .toctree-l4:not(.comet-expanded) > ul {
display: none !important;
}
/* ── In-sidebar search filter ───────────────────────────────────────── */
.bd-links.comet-filtering li.comet-filter-hidden {
display: none !important;
}
/* While filtering, force-expand any section that contains a match,
overriding the collapsed-by-default rule above */
.bd-links.comet-filtering .toctree-l1.comet-filter-expanded > ul,
.bd-links.comet-filtering .toctree-l2.comet-filter-expanded > ul {
display: block !important;
}
/* Sync the toggle arrow to the expanded state during filtering */
.bd-links.comet-filtering li.comet-filter-expanded > .comet-toggle::before {
transform: rotate(90deg) !important;
background-color: var(--comet-accent) !important;
}
/* Highlighted matching characters */
.bd-links mark.comet-hl {
background: var(--comet-accent-dim) !important;
color: var(--comet-accent-lite) !important;
padding: 0 1px !important;
border-radius: 2px !important;
font-weight: 700 !important;
}
html[data-theme="light"] .bd-links mark.comet-hl {
color: var(--comet-accent-text) !important;
}
/* ── Toggle button — real <button> injected via JS ── */
.bd-links li {
position: relative !important;
}
.bd-links li > a.reference {
padding-right: 36px !important;
}
.bd-links .comet-toggle {
position: absolute !important;
right: 6px !important;
top: 4px !important;
width: 24px !important;
height: 24px !important;
border: none !important;
background: transparent !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
border-radius: 4px !important;
z-index: 5 !important;
transition: background 120ms ease !important;
}
.bd-links .comet-toggle::before {
content: '' !important;
width: 14px !important;
height: 14px !important;
background-color: var(--pst-color-text-muted) !important;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
-webkit-mask-repeat: no-repeat !important;
mask-repeat: no-repeat !important;
-webkit-mask-size: contain !important;
mask-size: contain !important;
transition: transform 220ms ease, background-color 140ms ease !important;
}
.bd-links .comet-toggle[aria-expanded="true"]::before {
transform: rotate(90deg) !important;
background-color: var(--comet-accent) !important;
}
.bd-links .comet-toggle:hover {
background: var(--pst-color-surface) !important;
}
.bd-links .comet-toggle:hover::before {
background-color: var(--pst-color-on-surface) !important;
}
.bd-links .comet-toggle[aria-expanded="true"]:hover::before {
background-color: var(--comet-accent-lite) !important;
}
/* Adjust button top for l1 items (which have larger padding) */
.bd-links .toctree-l1 > .comet-toggle {
top: 6px !important;
}
/* ── Top-level nav items act as section headers — bold ── */
.bd-links .toctree-l1 > a.reference {
font-size: 13px !important;
font-weight: 700 !important;
color: var(--pst-color-on-surface) !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
letter-spacing: 0.01em !important;
}
/* ── Active state: ONLY the exact current page (innermost li.current) ── */
/* pydata_sphinx_theme sets class="current" on the <a> of BOTH the active page
AND its ancestor sections. :not(:has(li.current)) targets only the deepest
li.current — the one with no nested li.current inside it. */
.bd-links li.current:not(:has(li.current)) > a.current.reference {
color: var(--comet-accent-lite) !important;
background: var(--comet-accent-dim) !important;
border-left-color: var(--comet-accent) !important;
font-weight: 600 !important;
}
html[data-theme="light"] .bd-links li.current:not(:has(li.current)) > a.current.reference {
color: var(--comet-accent-text) !important;
}
/* Ancestor li.current items (parents of the active page) — strip highlight */
.bd-links li.current:has(li.current) > a.current.reference {
background: transparent !important;
border-left-color: transparent !important;
color: var(--pst-color-text-muted) !important;
font-weight: 400 !important;
}
/* Restore bold + on-surface color for l1 section headers that are ancestors */
.bd-links .toctree-l1.current:has(li.current) > a.current.reference {
color: var(--pst-color-on-surface) !important;
font-weight: 700 !important;
}
/* Nested level 2 */
.bd-links .toctree-l2 a.reference {
padding-left: 32px !important;
font-size: 13.5px !important;
font-weight: 400 !important;
}
/* Nested level 3 */
.bd-links .toctree-l3 a.reference {
padding-left: 44px !important;
font-size: 13px !important;
font-weight: 400 !important;
}
/* Mobile sidebar nav header. Extra top padding: the mobile off-canvas
sidebar is a native <dialog> opened via showModal(), which the browser
promotes to the "top layer" above everything else and makes the rest of
the page inert — so the hamburger button behind it is never reachable
while the drawer is open, by design (Escape and tapping the backdrop
both already close it correctly). But this drawer's own first item —
the "Home" link comet-ux.js prepends into its nav copy — sat close
enough to the header's hamburger position that a user instinctively
tapping there to close the menu was likely to hit "Home" and navigate
away instead. Push it down so it doesn't overlap that corner. */
.sidebar-header-items {
border-bottom: 1px solid var(--pst-color-border) !important;
padding: 56px 0 8px !important;
}
/* ─── LAYOUT GRID ──────────────────────────────────────────────────── */
/* Secondary sidebar (right-side in-page TOC) is now enabled.
It auto-hides via JS on pages with fewer than 3 H2s (see layout.html). */
.bd-sidebar-secondary {
border-left: 1px solid var(--pst-color-border) !important;
padding: 28px 24px !important;
width: 240px !important;
flex: 0 0 240px !important;
background: transparent !important;
}
/* Hide the right TOC when there are no anchors to navigate.
We use visibility: hidden (not display: none) so the empty TOC's
column still occupies its 240px of grid space — that keeps the
article's left edge in the SAME horizontal position whether the
TOC is rendered or not. Without this, the grid collapses on
TOC-less pages and the article shifts right to fill the gap. */
.bd-sidebar-secondary.comet-toc-empty {
visibility: hidden !important;
}
.bd-main {
grid-template-columns: minmax(0, 1fr) !important;
}
.bd-container__inner.bd-page-width {
max-width: none !important;
padding: 0 !important;
}
/* ── Right-side TOC styling ───────────────────────────────────────── */
.bd-sidebar-secondary .page-toc,
.bd-sidebar-secondary .toc-h2,
.bd-sidebar-secondary .onthispage,
.bd-sidebar-secondary .page-toc__title {
font-family: var(--comet-font) !important;
}
.bd-sidebar-secondary .page-toc__title,
.bd-sidebar-secondary p.onthispage {
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
color: var(--pst-color-text-muted) !important;
margin: 0 0 12px 0 !important;
padding: 0 !important;
}
.bd-sidebar-secondary nav.bd-toc {
padding: 0 !important;
}
.bd-sidebar-secondary ul.visible {
list-style: none !important;
padding-left: 0 !important;
margin: 0 !important;
border-left: 1px solid var(--pst-color-border) !important;
}
.bd-sidebar-secondary nav.bd-toc ul,
.bd-sidebar-secondary .page-toc ul {
list-style: none !important;
padding-left: 12px !important;
margin: 0 !important;
}
.bd-sidebar-secondary nav.bd-toc > ul,
.bd-sidebar-secondary .page-toc > ul {
padding-left: 0 !important;
border-left: 1px solid var(--pst-color-border) !important;
}
.bd-sidebar-secondary nav.bd-toc a.reference,
.bd-sidebar-secondary .page-toc a.reference {
display: block !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.45 !important;
padding: 6px 12px !important;
margin-left: -1px !important;
color: var(--pst-color-text-muted) !important;
text-decoration: none !important;
border-left: 2px solid transparent !important;
transition: color 120ms ease, border-color 120ms ease !important;
}
.bd-sidebar-secondary nav.bd-toc a.reference:hover,
.bd-sidebar-secondary .page-toc a.reference:hover {
color: var(--pst-color-on-surface) !important;
}
/* Active section in TOC — orange accent */
.bd-sidebar-secondary nav.bd-toc a.reference.active,
.bd-sidebar-secondary .page-toc a.reference.active,
.bd-sidebar-secondary nav.bd-toc li.active > a.reference,
.bd-sidebar-secondary .page-toc li.active > a.reference {
color: var(--comet-accent-text) !important;
border-left-color: var(--comet-accent) !important;
font-weight: 600 !important;
}
/* Nested TOC entries (h3 under h2) — slight indent */
.bd-sidebar-secondary ul ul a.reference {
padding-left: 28px !important;
font-size: 12.5px !important;
}
/* Hide on narrow viewports (sidebar already takes the width) */
@media (max-width: 1200px) {
.bd-sidebar-secondary { display: none !important; }
}
/* ─── CONTENT ──────────────────────────────────────────────────────── */
.bd-content { padding: 0 !important; }
.bd-article-container {
/* Let the article fill the space between the sidebars and grow with the
window, rather than capping at a fixed width and leaving side gaps. */
max-width: none !important;
padding: 44px 60px 88px !important;
margin: 0 !important;
}
article.bd-article {
font-family: var(--comet-font) !important;
}
/* Headings */
article h1 {
font-size: 2.1rem !important;
font-weight: 700 !important;
letter-spacing: -0.025em !important;
line-height: 1.2 !important;
margin-top: 0 !important;
margin-bottom: 0.5rem !important;
color: var(--pst-color-heading) !important;
}
article h2 {
font-size: 1.35rem !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
margin-top: 2.6rem !important;
margin-bottom: 0.75rem !important;
padding-bottom: 0 !important;
border-bottom: none !important;
color: var(--pst-color-heading) !important;
}
article h3 {
font-size: 1.05rem !important;
font-weight: 600 !important;
margin-top: 1.8rem !important;
margin-bottom: 0.5rem !important;
color: var(--pst-color-heading) !important;
}
article h4 {
font-size: 0.95rem !important;
font-weight: 600 !important;
color: var(--pst-color-text-base) !important;
}
/* Anchor links */
a.headerlink {
opacity: 0 !important;
transition: opacity 120ms ease !important;
font-size: 0.75em !important;
margin-left: 4px !important;
color: var(--comet-accent-text) !important;
}
*:hover > a.headerlink { opacity: 0.45 !important; }
a.headerlink:hover { opacity: 1 !important; }
article p, article li {
color: var(--pst-color-text-base) !important;
line-height: 1.75 !important;
}
/* Content links */
article a.reference.external,
article a.reference.internal {
color: var(--comet-accent-text) !important;
text-decoration: none !important;
border-bottom: 1px solid var(--comet-accent-underline) !important;
transition: border-color 120ms ease !important;
}
article a.reference:hover {
border-bottom-color: var(--comet-accent) !important;
}
/* ─── INLINE CODE ──────────────────────────────────────────────────── */
code.literal,
p code, li code, td code, th code {
font-family: var(--comet-mono) !important;
font-size: 13px !important;
padding: 1px 5px !important;
border-radius: 4px !important;
border: 1px solid var(--pst-color-border) !important;
color: var(--pst-color-inline-code) !important;
}
html[data-theme="dark"] code.literal,
html[data-theme="dark"] p code,
html[data-theme="dark"] li code,
html[data-theme="dark"] td code {
background: #111111 !important;
}
html[data-theme="light"] code.literal,
html[data-theme="light"] p code,
html[data-theme="light"] li code,
html[data-theme="light"] td code {
background: #f5f5f6 !important;
}
/* ─── CODE BLOCKS ──────────────────────────────────────────────────── */
/* Pydata wraps every code block in TWO containers — an outer
<div class="highlight-LANG"> and an inner <div class="highlight">. Both
selectors are listed here so a code block gets the rounded dark frame
whether only one wrapper is present (rare) or both are nested (default).
The dark background is set on the wrappers so any sub-pixel gap between
wrapper edge and the <pre> inside it reads as part of the same surface
(no visible light strip above/below the code). */
div.highlight,
div[class*="highlight-"] {
border-radius: var(--comet-radius) !important;
border: 1px solid var(--pst-color-border) !important;
overflow: hidden !important;
background: var(--comet-code-bg) !important;
margin: 18px 0 !important;
padding: 0 !important;
}
/* When the wrappers nest (the common case), the inner div.highlight must
sit flush inside the outer frame — no margin (otherwise its top/bottom
margin pushes the <pre> away from the outer border, creating the
thin light bands users were seeing) and no redundant border. */
div[class*="highlight-"] > div.highlight {
margin: 0 !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
}
div.highlight pre,
div[class*="highlight-"] pre {
font-family: var(--comet-mono) !important;
font-size: 13.5px !important;
line-height: 1.7 !important;
padding: 20px 22px !important;
margin: 0 !important;
border: none !important;
border-radius: 0 !important;
background: var(--comet-code-bg) !important;
color: var(--comet-code-fg) !important;
}
/* Code blocks always use a dark background (both light and dark site
themes), so they need a dark-friendly syntax palette regardless of mode.
Pydata ships theme-scoped Pygments rules — html[data-theme="light"]
.highlight .TOKEN — whose specificity (0-3-1) beats our plain
div.highlight .TOKEN selectors, and in light mode those rules set DARK
text that's invisible on our dark background. We use !important here to
win that battle uniformly.
The base-span rule is the safety net: it paints EVERY token we don't
explicitly theme below (names, punctuation, console output, Rust types,
etc.) in the readable default foreground, so nothing can ever fall back
to an invisible light-theme color. The named rules then layer specific
hues on top of that floor. */
div.highlight pre span,
div[class*="highlight-"] pre span {
color: var(--comet-code-fg) !important;
}
/* Keywords: keyword, k.namespace, k.declaration, k.constant, k.pseudo,
k.reserved, k.type (Rust/Go primitive types). */
div.highlight .k, div.highlight .kn, div.highlight .kd,
div.highlight .kc, div.highlight .kp, div.highlight .kr,
div.highlight .kt { color: var(--comet-code-keyword) !important; }
/* Strings: string + all subtypes (single, double, char, doc, escape …). */
div.highlight .s, div.highlight .s1, div.highlight .s2,
div.highlight .sb, div.highlight .sc, div.highlight .sd,
div.highlight .se, div.highlight .sh, div.highlight .si,
div.highlight .sx, div.highlight .sr, div.highlight .ss,
div.highlight .dl { color: var(--comet-code-string) !important; }
/* Comments: comment + subtypes (line, multiline, preproc, special). */
div.highlight .c, div.highlight .c1, div.highlight .cm,
div.highlight .cp, div.highlight .cs, div.highlight .ch,
div.highlight .cpf { color: var(--comet-code-comment) !important; font-style: italic; }
/* Function + builtin names. */
div.highlight .nf, div.highlight .nb,
div.highlight .fm { color: var(--comet-code-func) !important; }
/* Numbers: int, float, hex, oct, bin, long, imaginary. */
div.highlight .m, div.highlight .mi, div.highlight .mf,
div.highlight .mh, div.highlight .mo, div.highlight .mb,
div.highlight .il { color: var(--comet-code-number) !important; }
/* Operators + punctuation. */
div.highlight .o, div.highlight .ow { color: var(--comet-code-operator) !important; }
/* Class / type / namespace names. */
div.highlight .nc, div.highlight .nn,
div.highlight .no { color: var(--comet-code-class) !important; }
/* Console prompt (scala>, >>>, $) and program output/traceback. */
div.highlight .gp, div.highlight .go,
div.highlight .gt { color: var(--comet-code-meta) !important; }
button.copybtn {
background: rgba(255,255,255,0.07) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
border-radius: 4px !important;
color: #666 !important;
font-family: var(--comet-font) !important;
font-size: 11px !important;
padding: 3px 8px !important;
transition: color 120ms, background 120ms !important;
}
button.copybtn:hover {
color: #e2e8f0 !important;
background: rgba(255,255,255,0.13) !important;
}
/* ─── TABLES ───────────────────────────────────────────────────────── */
table.docutils {
font-size: 14px !important;
border-collapse: collapse !important;
width: 100% !important;
margin: 18px 0 !important;
border-radius: var(--comet-radius) !important;
overflow: hidden !important;
border: 1px solid var(--pst-color-border) !important;
}
table.docutils th {
font-size: 12px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
padding: 11px 15px !important;
border-bottom: 1px solid var(--pst-color-border) !important;
color: var(--pst-color-text-muted) !important;
white-space: normal !important;
}
html[data-theme="dark"] table.docutils th { background: #111111 !important; }
html[data-theme="light"] table.docutils th { background: #f5f5f6 !important; }
table.docutils td {
padding: 11px 15px !important;
border-bottom: 1px solid var(--pst-color-border) !important;
color: var(--pst-color-text-base) !important;
white-space: normal !important;
}
table.docutils tr:last-child td { border-bottom: none !important; }
html[data-theme="dark"] table.docutils tbody tr:nth-of-type(odd) { background: rgba(255,255,255,0.02) !important; }
html[data-theme="light"] table.docutils tbody tr:nth-of-type(odd) { background: rgba(0,0,0,0.02) !important; }
/* ─── ADMONITIONS ──────────────────────────────────────────────────── */
div.admonition {
border-radius: var(--comet-radius) !important;
border: 1px solid !important;
padding: 14px 18px !important;
margin: 22px 0 !important;
font-size: 14px !important;
box-shadow: none !important;
}
div.admonition p.admonition-title {
font-size: 11.5px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
margin-bottom: 6px !important;
/* Reserve room for the icon (which pydata positions absolutely at left:0
via a ::before pseudo-element). Without this padding the icon overlaps
the first letters of the title. */
padding: 0 0 0 26px !important;
background: none !important;
border: none !important;
position: relative !important;
}
div.note { background: rgba(59,130,246,0.06) !important; border-color: rgba(59,130,246,0.25) !important; }
div.note p.admonition-title { color: #3b82f6 !important; }
div.warning { background: rgba(234,179,8,0.06) !important; border-color: rgba(234,179,8,0.25) !important; }
div.warning p.admonition-title { color: #ca8a04 !important; }
div.tip { background: rgba(34,197,94,0.06) !important; border-color: rgba(34,197,94,0.25) !important; }
div.tip p.admonition-title { color: #16a34a !important; }
div.important,
div.caution {
background: rgba(var(--comet-accent-rgb),0.06) !important;
border-color: rgba(var(--comet-accent-rgb),0.28) !important;
}
div.important p.admonition-title,
div.caution p.admonition-title { color: var(--comet-accent-text) !important; }
/* ─── PREV / NEXT NAV ──────────────────────────────────────────────── */
footer.prev-next-footer {
border-top: 1px solid var(--pst-color-border) !important;
margin-top: 52px !important;
padding-top: 26px !important;
box-shadow: none !important;
}
.prev-next-area a {
border: 1px solid var(--pst-color-border) !important;
border-radius: var(--comet-radius) !important;
padding: 13px 18px !important;
box-shadow: none !important;
text-decoration: none !important;
transition: border-color 120ms ease !important;
}
.prev-next-area a:hover {
border-color: var(--comet-accent) !important;
background: rgba(var(--comet-accent-rgb),0.05) !important;
}
.prev-next-subtitle {
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.07em !important;
color: var(--pst-color-text-muted) !important;
}
.prev-next-title {
font-size: 14px !important;
font-weight: 600 !important;
color: var(--pst-color-on-surface) !important;
}
/* ─── FOOTER ───────────────────────────────────────────────────────── */
/* Used across every doc page. Job: be quiet, surface 5-6 useful links,
satisfy ASF legal requirements. Not a place to repeat marketing copy. */
.bd-footer-content { display: none !important; }
footer.comet-footer {
font-family: var(--comet-font) !important;
border-top: 1px solid var(--pst-color-border-muted);
background: transparent;
color: var(--pst-color-text-muted);
}
.comet-footer__inner {
display: grid;
grid-template-columns: auto 1fr;
gap: 80px;
align-items: start;
max-width: 1100px;
margin: 0 auto;
padding: 56px 56px 40px;
}
/* Brand: just the logo, clickable, no tagline */
.comet-footer__brand {
display: inline-block;
text-decoration: none;
flex-shrink: 0;
opacity: 0.85;
transition: opacity 120ms ease;
}
.comet-footer__brand:hover { opacity: 1; }
.comet-footer__logo {
height: 42px;
width: auto;
display: block;
object-fit: contain;
max-width: 180px;
}
/* Link columns: two of them, generous gap, monospaced rhythm */
.comet-footer__links {
display: grid;
grid-template-columns: repeat(2, minmax(180px, 1fr));
gap: 48px;
justify-content: end;
justify-self: end;
}
.comet-footer__col {
display: flex;
flex-direction: column;
gap: 12px;
}
.comet-footer__col-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--pst-color-on-surface);
margin: 0 0 6px 0;
}
.comet-footer__col a {
font-size: 14px;
color: var(--pst-color-text-muted);
text-decoration: none;
transition: color 120ms ease;
padding: 2px 0;
width: max-content;
}
.comet-footer__col a:hover { color: var(--comet-accent-text); }
/* Legal bar: hairline divider, two quiet lines, plenty of breathing room */
.comet-footer__legal {
max-width: 1100px;
margin: 0 auto;
padding: 22px 56px 28px;
border-top: 1px solid var(--pst-color-border-muted);
}
.comet-footer__legal p {
font-size: 12px;
line-height: 1.6;
color: var(--pst-color-text-muted);
margin: 0 0 6px 0;
}
.comet-footer__legal p:last-child {
margin-bottom: 0;
}
.comet-footer__legal a {
color: var(--pst-color-text-muted);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 120ms ease, color 120ms ease;
}
.comet-footer__legal a:hover {
color: var(--comet-accent-text);
border-bottom-color: var(--comet-accent);
}
.comet-footer__trademark {
opacity: 0.7;
}
@media (max-width: 768px) {
.comet-footer__inner {
grid-template-columns: 1fr;
gap: 36px;
padding: 40px 24px 28px;
}
.comet-footer__links {
justify-self: start;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
}
.comet-footer__legal { padding: 18px 24px 24px; }
}
/* ─── BACK TO TOP ──────────────────────────────────────────────────── */
#pst-back-to-top {
border-radius: 20px !important;
font-size: 12.5px !important;
font-family: var(--comet-font) !important;
background: var(--pst-color-surface) !important;
border: 1px solid var(--pst-color-border) !important;
color: var(--pst-color-text-muted) !important;
box-shadow: none !important;
transition: color 120ms, border-color 120ms !important;
}
#pst-back-to-top:hover {
color: var(--pst-color-on-surface) !important;
border-color: var(--comet-accent) !important;
}
/* ─── BREADCRUMB ───────────────────────────────────────────────────── */
.bd-breadcrumbs {
font-size: 13px !important;
color: var(--pst-color-text-muted) !important;
padding: 12px 0 0 !important;
}
.bd-breadcrumbs a {
color: var(--pst-color-text-muted) !important;
text-decoration: none !important;
}
.bd-breadcrumbs a:hover { color: var(--comet-accent-text) !important; }
/* Hide the home icon — the Comet logo in the navbar already does this job */
.bd-breadcrumbs .breadcrumb-home {
display: none !important;
}
/* Hide the first non-home breadcrumb item (the section index page).
The section is already shown as the active orange tab in the top nav,
so repeating it here is just noise. */
.bd-breadcrumbs .breadcrumb-home + .breadcrumb-item {
display: none !important;
}
/* When there's no home icon (some pages), still hide the first item */
.bd-breadcrumbs > .breadcrumb-item:first-child:not(.active):not(.breadcrumb-home) {
display: none !important;
}
/* ─── IMAGES ───────────────────────────────────────────────────────── */
article img {
border-radius: var(--comet-radius) !important;
max-width: 100% !important;
}
html[data-theme="dark"] article img { opacity: 0.92 !important; }
/* ─── SCROLLBAR ────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #303030; border-radius: 3px; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #d0d0d0; border-radius: 3px; }
/* ─── RESPONSIVE ───────────────────────────────────────────────────── */
@media (min-width: 720px) {
@supports (position: -webkit-sticky) or (position: sticky) {
.bd-links { max-height: calc(100vh - 8rem); }
}
}
@media (max-width: 960px) {
.bd-article-container { padding: 28px 32px 64px !important; }
}
/* ─── LANDING PAGE ─────────────────────────────────────────────────── */
/* Sphinx puts a body class of `bd-page-{pagename}` so we can target only
the homepage. The hero/cards/etc. take over the full canvas there;
every other page keeps the article-container constraints. */
body:has(.comet-hero) .bd-article-container {
max-width: 100% !important;
padding: 0 !important;
}
body:has(.comet-hero) article.bd-article {
padding: 0 !important;
}
/* Landing page: hide chrome that doesn't belong on a marketing page.
The H1 stays (now lives inside the hero as the project's brand statement)
so we no longer hide it. myst_heading_anchors auto-adds a "#" permalink
next to every heading so readers can deep-link to a doc subsection —
useful on regular content pages, but meaningless on the hero title of a
landing page, so it's hidden here specifically. */
body:has(.comet-hero) .bd-breadcrumbs,
body:has(.comet-hero) footer.prev-next-footer,
body:has(.comet-hero) .prev-next-area,
body:has(.comet-hero) a.headerlink {
display: none !important;
}
/* Hero H1 — the project brand statement, prominent at the top of the hero */
body:has(.comet-hero) .comet-hero__inner h1 {
font-family: var(--comet-font) !important;
font-size: clamp(2.6rem, 5vw, 4rem) !important;
font-weight: 700 !important;
line-height: 1.05 !important;
letter-spacing: -0.035em !important;
margin: 0 0 18px 0 !important;
padding: 0 !important;
border: none !important;
color: var(--pst-color-heading) !important;
text-align: center;
}
.comet-hero__tagline {
font-family: var(--comet-font) !important;
font-size: clamp(1.25rem, 2.5vw, 1.7rem) !important;
font-weight: 500 !important;
letter-spacing: -0.01em !important;
line-height: 1.3 !important;
color: var(--comet-accent) !important;
margin: 0 0 22px 0 !important;
text-align: center;
}
body:has(.comet-hero) .bd-main {
grid-template-columns: minmax(0, 1fr) !important;
}
/* Each landing section is full-bleed, with its own internal max-width */
.comet-hero,
.comet-install,
.comet-perf,
.comet-cards,
.comet-arch,
.comet-foot-cta {
width: 100%;
display: block;
}
.comet-hero__inner,
.comet-install__inner,
.comet-perf__inner,
.comet-cards__inner,
.comet-arch__inner,
.comet-foot-cta__inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 32px;
}
/* ── Hero ─────────────────────────────────────────────────────────── */
.comet-hero {
padding: 88px 0 72px;
border-bottom: 1px solid var(--pst-color-border-muted);
background:
radial-gradient(circle at 80% -20%, rgba(var(--comet-accent-rgb),0.08), transparent 55%),
radial-gradient(circle at 10% 110%, rgba(var(--comet-accent-rgb),0.05), transparent 50%);
}
/* Terminal-style hero variant — centered layout with terminal block centerpiece */
.comet-hero--terminal {
padding: 80px 0 80px;
text-align: center;
}
.comet-hero--terminal .comet-hero__inner {
text-align: center;
max-width: 1080px;
}
.comet-hero--terminal .comet-hero__title {
max-width: none;
margin-left: auto !important;
margin-right: auto !important;
}
.comet-hero--terminal .comet-hero__lede {
margin-left: auto !important;
margin-right: auto !important;
max-width: 56ch;
}
.comet-hero--terminal .comet-hero__ctas {
justify-content: center;
}
.comet-hero__inner {
text-align: left;
max-width: 980px;
}
.comet-hero__eyebrow {
font-family: var(--comet-font);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--comet-accent-text);
margin: 0 0 18px 0;
}
.comet-hero__title {
font-family: var(--comet-font) !important;
font-size: clamp(2.4rem, 4.5vw, 3.6rem) !important;
font-weight: 700 !important;
line-height: 1.08 !important;
letter-spacing: -0.03em !important;
margin: 0 0 22px 0 !important;
color: var(--pst-color-heading) !important;
border: none !important;
padding: 0 !important;
max-width: 24ch;
}
.comet-hero__title-accent {
color: var(--comet-accent-text);
}
.comet-hero__lede {
font-size: 1.15rem !important;
line-height: 1.6 !important;
color: var(--pst-color-text-base) !important;
max-width: 60ch;
margin: 0 0 32px 0 !important;
}
.comet-hero__ctas {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin: 0 0 24px 0;
}
.comet-cta {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--comet-font) !important;
font-size: 15px !important;
font-weight: 600 !important;
padding: 12px 22px !important;
border-radius: 8px !important;
text-decoration: none !important;
border: 1px solid transparent !important;
transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, color 120ms ease !important;
cursor: pointer;
}
.comet-cta--primary {
background: var(--comet-accent) !important;
color: #ffffff !important;
}
.comet-cta--primary:hover {
background: var(--comet-accent-lite) !important;
transform: translateY(-1px);
}
.comet-cta--secondary {
background: transparent !important;
color: var(--pst-color-on-surface) !important;
border-color: var(--pst-color-border) !important;
}
.comet-cta--secondary:hover {
border-color: var(--comet-accent) !important;
color: var(--comet-accent-text) !important;
}
.comet-hero__meta {
font-size: 12.5px !important;
color: var(--pst-color-text-muted) !important;
margin: 0 !important;
}
/* Small caption under the hero terminal: keeps the full tuning config
discoverable without crowding the drop-in demo. */
.comet-hero__note {
font-size: 13px !important;
color: var(--pst-color-text-muted) !important;
margin: 0 0 22px 0 !important;
text-align: center;
}
.comet-hero__note a {
color: var(--comet-accent-text) !important;
text-decoration: none !important;
border-bottom: 1px solid var(--comet-accent-underline) !important;
}
/* ── Install block ────────────────────────────────────────────────── */
.comet-install {
padding: 56px 0;
background: var(--pst-color-surface);
border-bottom: 1px solid var(--pst-color-border-muted);
}
html[data-theme="dark"] .comet-install {
background: var(--comet-surface-sunken);
}
.comet-install__label {
font-family: var(--comet-font);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--pst-color-text-muted);
margin: 0 0 14px 0;
}
.comet-install__cmd {
font-family: var(--comet-mono) !important;
font-size: 14px !important;
line-height: 1.7 !important;
background: var(--pst-color-background) !important;
color: var(--pst-color-on-surface) !important;
border: 1px solid var(--pst-color-border) !important;
border-radius: 8px !important;
padding: 22px 26px !important;
margin: 0 0 14px 0 !important;
overflow-x: auto !important;
white-space: pre !important;
}
html[data-theme="dark"] .comet-install__cmd {
background: #060606 !important;
color: #d4d4d4 !important;
}
.comet-install__hint {
font-size: 13.5px !important;
color: var(--pst-color-text-muted) !important;
margin: 0 !important;
}
.comet-install__hint a {
color: var(--comet-accent-text) !important;
text-decoration: none !important;
border-bottom: 1px solid var(--comet-accent-underline) !important;
}
.comet-install__hint a:hover {
border-bottom-color: var(--comet-accent) !important;
}
/* ── Performance section ──────────────────────────────────────────── */
.comet-perf {
padding: 80px 0;
border-bottom: 1px solid var(--pst-color-border-muted);
}
.comet-perf__inner {
display: grid;
grid-template-columns: minmax(280px, 1fr) minmax(0, 1.8fr);
gap: 56px;
align-items: center;
}
.comet-perf__eyebrow {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--comet-accent-text);
margin: 0 0 14px 0;
}
.comet-perf__title {
font-family: var(--comet-font) !important;
font-size: 1.7rem !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
line-height: 1.2 !important;
margin: 0 0 18px 0 !important;
color: var(--pst-color-heading) !important;
border: none !important;
padding: 0 !important;
max-width: 18ch;
}
.comet-perf__caption {
font-size: 1.05rem !important;
line-height: 1.6 !important;
color: var(--pst-color-on-surface) !important;
margin: 0 0 18px 0 !important;
font-weight: 400 !important;
}
.comet-perf__detail {
font-size: 14px !important;
line-height: 1.6 !important;
color: var(--pst-color-text-muted) !important;
margin: 0 !important;
}
.comet-perf__detail code {
font-family: var(--comet-mono) !important;
font-size: 12.5px !important;
padding: 1px 5px !important;
border-radius: 4px !important;
background: var(--pst-color-surface) !important;
border: 1px solid var(--pst-color-border) !important;
color: var(--pst-color-on-surface) !important;
}
.comet-perf__detail a {
color: var(--comet-accent-text) !important;
text-decoration: none !important;
border-bottom: 1px solid var(--comet-accent-underline) !important;
}
.comet-perf__chart figure {
margin: 0 !important;
}
.comet-perf__chart img {
width: 100% !important;
height: auto !important;
display: block !important;
border-radius: 10px !important;
border: 1px solid var(--pst-color-border) !important;
background: var(--comet-figure-bg) !important;
padding: 16px !important;
}
.comet-perf__chart figcaption {
font-size: 12.5px !important;
color: var(--pst-color-text-muted) !important;
text-align: center !important;
margin-top: 12px !important;
font-style: italic !important;
}
/* ── Cards grid ───────────────────────────────────────────────────── */
.comet-cards {
padding: 80px 0;
background: var(--pst-color-surface);
border-bottom: 1px solid var(--pst-color-border-muted);
}
html[data-theme="dark"] .comet-cards {
background: var(--comet-surface-sunken);
}
.comet-cards__title {
font-size: 1.6rem !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
margin: 0 0 36px 0 !important;
border: none !important;
padding: 0 !important;
color: var(--pst-color-heading) !important;
}
.comet-cards__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.comet-card {
display: flex !important;
flex-direction: column !important;
padding: 24px !important;
border: 1px solid var(--pst-color-border) !important;
border-radius: 12px !important;
background: var(--pst-color-background) !important;
text-decoration: none !important;
transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease !important;
}
.comet-card:hover {
border-color: var(--comet-accent) !important;
transform: translateY(-2px);
box-shadow: 0 8px 24px var(--comet-accent-glow);
}
.comet-card__icon {
font-size: 28px;
margin-bottom: 16px;
line-height: 1;
}
.comet-card__title {
font-family: var(--comet-font) !important;
font-size: 1.05rem !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
margin: 0 0 10px 0 !important;
color: var(--pst-color-heading) !important;
border: none !important;
padding: 0 !important;
}
.comet-card__body {
font-size: 14px !important;
line-height: 1.55 !important;
color: var(--pst-color-text-muted) !important;
margin: 0 0 18px 0 !important;
flex: 1;
}
.comet-card__cta {
font-size: 13.5px !important;
font-weight: 600 !important;
color: var(--comet-accent-text) !important;
margin: 0 !important;
display: flex;
align-items: center;
gap: 4px;
}
/* ── Architecture section ─────────────────────────────────────────── */
.comet-arch {
padding: 80px 0;
border-bottom: 1px solid var(--pst-color-border-muted);
}
.comet-arch__inner {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 56px;
align-items: center;
}
.comet-arch__eyebrow {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--comet-accent-text);
margin: 0 0 14px 0;
}
.comet-arch__title {
font-size: 1.7rem !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
line-height: 1.25 !important;
margin: 0 0 20px 0 !important;
color: var(--pst-color-heading) !important;
border: none !important;
padding: 0 !important;
max-width: 22ch;
}
.comet-arch__body {
font-size: 1rem !important;
line-height: 1.65 !important;
color: var(--pst-color-text-base) !important;
margin: 0 0 16px 0 !important;
}
.comet-arch__links {
font-size: 14px !important;
margin: 22px 0 0 0 !important;
color: var(--pst-color-text-muted) !important;
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
.comet-arch__links a {
color: var(--comet-accent-text) !important;
text-decoration: none !important;
font-weight: 500 !important;
border-bottom: 1px solid transparent !important;
transition: border-color 120ms ease !important;
}
.comet-arch__links a:hover {
border-bottom-color: var(--comet-accent) !important;
}
.comet-arch__diagram img {
width: 100% !important;
height: auto !important;
border-radius: 8px !important;
border: 1px solid var(--pst-color-border) !important;
background: var(--comet-figure-bg);
padding: 12px;
}
/* ── Foot CTA ─────────────────────────────────────────────────────── */
.comet-foot-cta {
padding: 88px 0;
text-align: center;
background:
radial-gradient(circle at 50% 0%, rgba(var(--comet-accent-rgb),0.06), transparent 60%);
}
.comet-foot-cta__title {
font-size: 1.9rem !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
margin: 0 0 14px 0 !important;
border: none !important;
padding: 0 !important;
color: var(--pst-color-heading) !important;
}
.comet-foot-cta__body {
font-size: 1.05rem !important;
line-height: 1.55 !important;
color: var(--pst-color-text-muted) !important;
margin: 0 auto 28px auto !important;
max-width: 52ch;
}
.comet-foot-cta__inner .comet-hero__ctas {
justify-content: center;
}
/* ── Terminal block (hero centerpiece) ────────────────────────────── */
.comet-terminal {
margin: 36px auto 36px;
max-width: 880px;
border-radius: 12px;
overflow: hidden;
text-align: left;
background: var(--comet-terminal-bg);
border: 1px solid var(--comet-terminal-border);
box-shadow:
0 24px 60px -20px rgba(0, 0, 0, 0.35),
0 8px 24px -8px rgba(var(--comet-accent-rgb),0.10);
}
.comet-terminal__bar {
display: flex;
align-items: center;
padding: 10px 14px;
background: var(--comet-terminal-bar);
border-bottom: 1px solid var(--comet-terminal-border);
position: relative;
}
.comet-terminal__dots {
display: flex;
gap: 7px;
}
.comet-terminal__dots i {
width: 11px;
height: 11px;
border-radius: 50%;
background: #5a5a5a;
}
.comet-terminal__dots i:nth-child(1) { background: #ff5f57; }
.comet-terminal__dots i:nth-child(2) { background: #febc2e; }
.comet-terminal__dots i:nth-child(3) { background: #28c840; }
.comet-terminal__title {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-family: var(--comet-mono);
font-size: 12px;
color: #8a8f95;
letter-spacing: 0.02em;
}
.comet-terminal__body {
font-family: var(--comet-mono) !important;
font-size: 13px !important;
line-height: 1.5 !important;
color: var(--comet-code-fg) !important;
padding: 22px 24px 26px !important;
margin: 0 !important;
background: var(--comet-terminal-bg) !important;
border: none !important;
border-radius: 0 !important;
overflow-x: auto !important;
white-space: pre !important;
text-align: left !important;
}
/* Lines must stay inline — the <pre> already has a literal newline after
each <span>, which provides the line break. Making them display:block
would add a SECOND break per line, double-spacing the whole block. */
.comet-terminal__body .term-line {
display: inline;
}
/* A blank line between sections comes from the spacer span's trailing
newline in the <pre>; no explicit height needed. */
.comet-terminal__body .term-spacer {
display: inline;
}
.comet-terminal__body .term-comment {
color: var(--comet-code-comment);
font-style: italic;
}
/* The terminal sits on a dark surface in BOTH site themes, so the prompt
uses the fixed bright orange (--comet-code-prompt), not --comet-accent-text
— the latter darkens to #a84808 in light mode and would lose contrast here. */
.comet-terminal__body .term-prompt {
color: var(--comet-code-prompt);
margin-right: 6px;
user-select: none;
}
.comet-terminal__body .term-var {
color: var(--comet-code-keyword);
}
.comet-terminal__body .term-str {
color: var(--comet-code-string);
}
.comet-terminal__body .term-indent {
padding-left: 28px;
color: #b9bec5;
}
.comet-terminal__body .term-blink {
display: inline-block;
color: var(--comet-code-prompt);
animation: term-blink 1s steps(2, end) infinite;
}
@keyframes term-blink {
0%, 50% { opacity: 1; }
50.01%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.comet-terminal__body .term-blink { animation: none; }
}
/* ── Prose band (the official two-paragraph pitch) ────────────────── */
.comet-prose {
padding: 64px 0;
border-bottom: 1px solid var(--pst-color-border-muted);
}
.comet-prose__inner {
max-width: 760px;
margin: 0 auto;
padding: 0 32px;
text-align: center;
}
.comet-prose__lede {
font-size: 1.15rem !important;
line-height: 1.65 !important;
color: var(--pst-color-text-base) !important;
margin: 0 0 18px 0 !important;
}
.comet-prose__lede:last-child {
margin-bottom: 0 !important;
}
.comet-prose__lede a {
color: var(--comet-accent-text) !important;
text-decoration: none !important;
border-bottom: 1px solid var(--comet-accent-underline) !important;
}
/* ── Stacked perf section (two charts, full-width) ────────────────── */
.comet-perf__inner--stacked {
display: block;
}
.comet-perf__head {
text-align: center;
max-width: 720px;
margin: 0 auto 36px;
}
.comet-perf__head .comet-perf__eyebrow {
font-family: var(--comet-font);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--comet-accent-text);
margin: 0 0 14px 0;
}
.comet-perf__head .comet-perf__caption {
font-size: 1.5rem !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
line-height: 1.3 !important;
color: var(--pst-color-heading) !important;
margin: 0 0 14px 0 !important;
}
.comet-perf__head .comet-perf__detail {
font-size: 15px !important;
line-height: 1.6 !important;
color: var(--pst-color-text-muted) !important;
margin: 0 !important;
}
.comet-perf__figure {
margin: 0 0 40px 0 !important;
background: var(--comet-figure-bg);
border: 1px solid var(--pst-color-border);
border-radius: 12px;
padding: 24px;
}
.comet-perf__figure:last-child {
margin-bottom: 0 !important;
}
.comet-perf__figure img {
width: 100% !important;
height: auto !important;
display: block !important;
border: none !important;
background: transparent !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 auto !important;
}
.comet-perf__figure figcaption {
font-size: 13px !important;
color: var(--pst-color-text-muted) !important;
text-align: center !important;
margin-top: 14px !important;
font-style: italic !important;
}
/* ── Feature bands (alternating colors) ───────────────────────────── */
.comet-feature {
padding: 80px 0;
border-bottom: 1px solid var(--pst-color-border-muted);
}
.comet-feature--alt {
background: var(--pst-color-surface);
}
html[data-theme="dark"] .comet-feature--alt {
background: var(--comet-surface-sunken);
}
.comet-feature__inner {
max-width: 880px;
margin: 0 auto;
padding: 0 32px;
}
.comet-feature__copy {
text-align: left;
}
.comet-feature__eyebrow {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--comet-accent-text);
margin: 0 0 14px 0;
}
.comet-feature__title {
font-family: var(--comet-font) !important;
font-size: 1.7rem !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
line-height: 1.25 !important;
margin: 0 0 18px 0 !important;
color: var(--pst-color-heading) !important;
border: none !important;
padding: 0 !important;
max-width: 28ch;
}
.comet-feature__body {
font-size: 1.02rem !important;
line-height: 1.65 !important;
color: var(--pst-color-text-base) !important;
margin: 0 0 14px 0 !important;
}
.comet-feature__body:last-child {
margin-bottom: 0 !important;
}
.comet-feature__links {
font-size: 14px !important;
margin: 20px 0 0 0 !important;
}
.comet-feature__links a {
color: var(--comet-accent-text) !important;
text-decoration: none !important;
font-weight: 600 !important;
border-bottom: 1px solid transparent !important;
transition: border-color 120ms ease !important;
}
.comet-feature__links a:hover {
border-bottom-color: var(--comet-accent) !important;
}
.comet-feature__figure {
margin: 28px 0 0 0 !important;
background: var(--comet-figure-bg);
border: 1px solid var(--pst-color-border);
border-radius: 12px;
padding: 24px;
text-align: center;
}
.comet-feature__figure img {
max-width: 100% !important;
height: auto !important;
display: block !important;
margin: 0 auto !important;
border: none !important;
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
}
.comet-feature__figure figcaption {
font-size: 13px !important;
color: var(--pst-color-text-muted) !important;
margin-top: 14px !important;
font-style: italic !important;
}
/* ── Stacked architecture (two diagrams full-width) ───────────────── */
.comet-arch__inner--stacked {
display: block;
}
.comet-arch__head {
text-align: center;
max-width: 720px;
margin: 0 auto 28px;
}
.comet-arch__head:not(:first-child) {
margin-top: 56px;
}
.comet-arch__head .comet-arch__eyebrow {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--comet-accent-text);
margin: 0 0 14px 0;
}
.comet-arch__head .comet-arch__body {
font-size: 1.05rem !important;
line-height: 1.6 !important;
color: var(--pst-color-text-base) !important;
margin: 0 !important;
}
.comet-arch__figure {
margin: 0 !important;
background: var(--comet-figure-bg);
border: 1px solid var(--pst-color-border);
border-radius: 12px;
padding: 24px;
text-align: center;
}
.comet-arch__figure img {
max-width: 100% !important;
height: auto !important;
display: block !important;
margin: 0 auto !important;
border: none !important;
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
}
.comet-arch__figure figcaption {
font-size: 13px !important;
color: var(--pst-color-text-muted) !important;
margin-top: 14px !important;
font-style: italic !important;
}
/* ── Community 3-column band ──────────────────────────────────────── */
.comet-community {
padding: 80px 0;
border-bottom: 1px solid var(--pst-color-border-muted);
background: var(--pst-color-surface);
}
html[data-theme="dark"] .comet-community {
background: var(--comet-surface-sunken);
}
.comet-community__inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 32px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.comet-community__inner--two {
max-width: 880px;
grid-template-columns: repeat(2, 1fr);
gap: 56px;
}
.comet-community__col {
text-align: left;
}
.comet-community__eyebrow {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--comet-accent-text);
margin: 0 0 14px 0;
}
.comet-community__body {
font-size: 15px !important;
line-height: 1.65 !important;
color: var(--pst-color-text-base) !important;
margin: 0 !important;
}
.comet-community__body a {
color: var(--comet-accent-text) !important;
text-decoration: none !important;
border-bottom: 1px solid var(--comet-accent-underline) !important;
}
/* ── Responsive collapses ─────────────────────────────────────────── */
@media (max-width: 960px) {
.comet-hero,
.comet-hero--terminal { padding: 56px 0 40px; }
.comet-perf__inner,
.comet-arch__inner { grid-template-columns: 1fr; gap: 32px; }
.comet-cards__grid,
.comet-community__inner { grid-template-columns: 1fr; gap: 32px; }
.comet-install,
.comet-perf,
.comet-cards,
.comet-arch,
.comet-feature,
.comet-prose,
.comet-community,
.comet-foot-cta { padding: 56px 0; }
.comet-hero__inner,
.comet-install__inner,
.comet-perf__inner,
.comet-cards__inner,
.comet-arch__inner,
.comet-feature__inner,
.comet-prose__inner,
.comet-community__inner,
.comet-foot-cta__inner { padding: 0 22px; }
.comet-terminal { margin: 24px auto; }
.comet-terminal__body { font-size: 11.5px !important; padding: 16px 16px 18px !important; }
.comet-terminal__title { display: none; }
}
/* ─── MOBILE NAVBAR (≤ 991px) ──────────────────────────────────────── */
/* PST uses its own sidebar-toggle (hamburger) button for mobile nav.
Our `display: flex !important` on .col-lg-9 overrides Bootstrap's
responsive hiding, so 5 nav links overflow horizontally on phones.
Fix: hide the entire center+end column on small screens and let the
primary-toggle button open the sidebar. */
@media (max-width: 991.98px) {
.col-lg-9.navbar-header-items {
display: none !important;
}
.bd-header.navbar,
header.bd-header {
padding: 0 12px !important;
}
}
/* ─── TABLET (≤ 768px) ─────────────────────────────────────────────── */
@media (max-width: 768px) {
/* Article: tighter side padding */
.bd-article-container {
padding: 24px 20px 56px !important;
}
/* Tables: wrap in a scrollable container */
.bd-article-container table.docutils {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
width: max-content;
min-width: 100%;
}
/* Prevent wide pre/code blocks from breaking layout */
.bd-article-container div.highlight pre,
.bd-article-container div[class*="highlight-"] pre {
overflow-x: auto;
}
/* Community 2-col: collapse to single column */
.comet-community__inner--two {
grid-template-columns: 1fr !important;
gap: 32px !important;
}
/* Perf figure: smaller padding */
.comet-perf__figure,
.comet-arch__figure,
.comet-feature__figure {
padding: 16px !important;
}
}
/* ─── SMALL MOBILE (≤ 480px) ───────────────────────────────────────── */
@media (max-width: 480px) {
/* Article: minimal side padding */
.bd-article-container {
padding: 18px 14px 44px !important;
}
/* Hero: compact on very small screens */
.comet-hero,
.comet-hero--terminal {
padding: 36px 0 24px;
}
/* Hero CTAs: stack vertically, full-width */
.comet-hero__ctas {
flex-direction: column;
align-items: stretch;
}
.comet-cta {
width: 100%;
justify-content: center;
text-align: center;
}
/* Terminal: smallest readable size */
.comet-terminal__body {
font-size: 10px !important;
padding: 12px 10px 14px !important;
}
/* Install cmd: smaller font, allow wrapping for long lines */
.comet-install__cmd {
font-size: 12px !important;
padding: 14px 14px !important;
white-space: pre-wrap !important;
word-break: break-all !important;
}
/* All inner section wrappers: minimal padding */
.comet-hero__inner,
.comet-install__inner,
.comet-perf__inner,
.comet-cards__inner,
.comet-arch__inner,
.comet-feature__inner,
.comet-prose__inner,
.comet-community__inner,
.comet-foot-cta__inner {
padding: 0 14px;
}
/* Section vertical spacing: very compact */
.comet-install,
.comet-perf,
.comet-cards,
.comet-arch,
.comet-feature,
.comet-prose,
.comet-community,
.comet-foot-cta {
padding: 36px 0;
}
/* Footer: single column, tighter */
.comet-footer__links {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.comet-footer__inner {
padding: 32px 16px 24px !important;
}
.comet-footer__legal {
padding: 14px 16px 20px !important;
}
/* Foot CTA: tighter padding */
.comet-foot-cta {
padding: 56px 0;
}
}