/* ===================================================================== SWEEP × Direction D · MkDocs override stylesheet Drop into docs/stylesheets/extra.css, referenced from mkdocs.yml. Scoped via [data-sweep-d] on (set in overrides/main.html). ===================================================================== */ /* ─── 1. PALETTE ─────────────────────────────────────────────────────── */ :root, [data-md-color-scheme="default"] { /* Material's primary tokens — keep these in sync */ --md-primary-fg-color: #FBFBFD; --md-primary-fg-color--light: #FBFBFD; --md-primary-fg-color--dark: #1D1D1F; --md-primary-bg-color: #1D1D1F; --md-primary-bg-color--light: rgba(29,29,31,0.7); --md-accent-fg-color: #0066CC; --md-accent-fg-color--transparent: rgba(0,102,204,0.10); --md-default-bg-color: #FBFBFD; --md-default-fg-color: #1D1D1F; --md-default-fg-color--light: #494949; --md-default-fg-color--lighter: #86868B; --md-default-fg-color--lightest: #D2D2D7; --md-typeset-color: #1D1D1F; --md-typeset-a-color: #0066CC; /* SWEEP × Direction D · tokens */ --sw-lime: #BCC83C; --sw-teal: #1AA690; --sw-orange: #ED8B2E; --sw-amber: #F0A830; --sw-paper: #FBFBFD; --sw-ink: #1D1D1F; --sw-ink2: #494949; --sw-ink3: #86868B; --sw-rule: #D2D2D7; --sw-card: #F5F5F7; --sw-deep: #000000; --sw-deep-text: #F5F5F7; --sw-deep-sub: #A1A1A6; --sw-accent: #0066CC; /* Apple/system gradient — the canonical chirp gradient. */ --sw-grad: linear-gradient(95deg, #BCC83C 0%, #1AA690 33%, #ED8B2E 67%, #F0A830 100%); } [data-md-color-scheme="slate"] { --md-primary-fg-color: #000; --md-default-bg-color: #0A0A0A; --md-default-fg-color: #F5F5F7; --md-default-fg-color--light: #C7C7CB; --md-default-fg-color--lighter: #86868B; --md-default-fg-color--lightest: #3A3A3D; --md-typeset-color: #F5F5F7; --md-typeset-a-color: #2997FF; --md-accent-fg-color: #2997FF; --md-accent-fg-color--transparent: rgba(41,151,255,0.14); --sw-paper: #0A0A0A; --sw-ink: #F5F5F7; --sw-ink2: #C7C7CB; --sw-ink3: #86868B; --sw-rule: #2D2D2F; --sw-card: #1C1C1E; --sw-deep: #1C1C1E; --sw-accent: #2997FF; } /* ─── 2. GLOBAL TYPOGRAPHY ───────────────────────────────────────────── */ [data-sweep-d] body, [data-sweep-d] .md-typeset { font-family: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "kern", "liga", "calt", "ss01"; } [data-sweep-d] .md-typeset h1 { font-family: 'Inter Tight', 'Inter', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.035em; font-size: 2.1rem; line-height: 1.1; margin: 0.4rem 0 1rem; color: var(--md-default-fg-color); } /* Restore Material's compact typography inside the search results dropdown. Our generic `.md-typeset h1/h2/h3` rules above have the same specificity as Material's `.md-search-result .md-typeset h1` defaults but load after them, so they were inflating result-list previews to full page heading sizes. Re-scope to the search dropdown to keep results scannable. */ [data-sweep-d] .md-search-result .md-typeset { font-size: 0.64rem; line-height: 1.6; } [data-sweep-d] .md-search-result .md-typeset h1 { font-size: 0.8rem; font-weight: 600; line-height: 1.4; margin: 0.55rem 0; letter-spacing: -0.01em; } [data-sweep-d] .md-search-result .md-typeset h2 { font-size: 0.72rem; font-weight: 600; line-height: 1.4; margin: 0.5rem 0 0.3rem; letter-spacing: -0.005em; } [data-sweep-d] .md-search-result .md-typeset h3, [data-sweep-d] .md-search-result .md-typeset h4, [data-sweep-d] .md-search-result .md-typeset h5, [data-sweep-d] .md-search-result .md-typeset h6 { font-size: 0.68rem; font-weight: 600; line-height: 1.4; margin: 0.4rem 0 0.25rem; letter-spacing: 0; } [data-sweep-d] .md-search-result .md-typeset p { font-size: 0.64rem; line-height: 1.6; margin: 0.3rem 0; } [data-sweep-d] .md-search-result .md-typeset code { font-size: 0.6rem; } [data-sweep-d] .md-search-result .md-typeset ol, [data-sweep-d] .md-search-result .md-typeset ul { font-size: 0.64rem; margin: 0.3rem 0 0.3rem 1rem; } /* Cap individual search-result snippets so notebook code cells (full imports + parameter blocks) do not dump dozens of lines into the dropdown. Fade the bottom edge with mask-image so the cut-off looks intentional instead of a hard slice. */ [data-sweep-d] .md-search-result__article { max-height: 11em; overflow: hidden; mask-image: linear-gradient(to bottom, black 70%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%); } /* Bump up code-block typography across the docs. Material's default ``.md-typeset pre > code`` size combined with our Inter Tight body font reads too small on API pages and in notebook cells; this restores parity with surrounding prose without affecting inline ```` spans. */ [data-sweep-d] .md-typeset pre > code, [data-sweep-d] .md-typeset .highlight pre code, [data-sweep-d] .md-typeset .doc-signature, [data-sweep-d] .md-typeset .doc-signature pre, [data-sweep-d] .md-typeset .doc-signature code { font-size: 0.78rem; } [data-sweep-d] .md-typeset h2 { font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.025em; font-size: 1.45rem; line-height: 1.15; margin: 2rem 0 0.8rem; border: none; color: var(--md-default-fg-color); } [data-sweep-d] .md-typeset h3 { font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 600; letter-spacing: -0.015em; font-size: 1.1rem; margin: 1.6rem 0 0.6rem; } [data-sweep-d] .md-typeset h4, [data-sweep-d] .md-typeset h5 { font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 600; font-size: 0.95rem; } [data-sweep-d] .md-typeset p, [data-sweep-d] .md-typeset li { font-size: 0.85rem; line-height: 1.65; color: var(--md-default-fg-color--light); } [data-sweep-d] .md-typeset a { color: var(--sw-accent); text-decoration: none; border-bottom: none; } [data-sweep-d] .md-typeset a:hover { text-decoration: underline; } [data-sweep-d] .md-typeset code, [data-sweep-d] code { font-family: 'JetBrains Mono', monospace; font-size: 0.85em; padding: 0.15em 0.45em; background: rgba(127,127,127,0.10); border-radius: 5px; color: var(--md-default-fg-color); } /* ─── 3. HEADER ──────────────────────────────────────────────────────── */ /* Solid (not translucent) so sidebar/page content under the sticky header doesn't bleed through when the user scrolls. The earlier Direction-D blur-glass look caused sidebar nav items to be visible through the bar. */ [data-sweep-d] .md-header { background: var(--sw-paper); color: var(--md-default-fg-color); box-shadow: 0 1px 0 var(--sw-rule); height: 52px; } [data-sweep-d] .md-header__inner { padding: 0 1.4rem; height: 52px; } [data-sweep-d] .md-header__title { font-weight: 600; font-size: 0.85rem; } [data-sweep-d] .md-header__topic { padding: 0; } [data-sweep-d] .md-header__topic:first-child { font-weight: 600; opacity: 1; } /* Hide the page-title topic that Material stacks on top of the site name — the active page is already shown in the tabs row + breadcrumbs below. */ [data-sweep-d] .md-header__topic:not(:first-child) { display: none; } [data-sweep-d] .md-header__button.md-logo { padding: 0.2rem 0.3rem 0.2rem 0; } [data-sweep-d] .md-header__button.md-logo img, [data-sweep-d] .md-header__button.md-logo svg { width: 32px; height: 32px; } /* Tabs row — also solid (no transparency) so it doesn't reveal page content underneath when the user scrolls. */ [data-sweep-d] .md-tabs { background: var(--sw-paper); color: var(--md-default-fg-color--light); box-shadow: 0 1px 0 var(--sw-rule); } [data-sweep-d] .md-tabs__link { font-size: 0.78rem; opacity: 1; color: var(--md-default-fg-color--light); letter-spacing: -0.005em; margin-top: 0; padding: 0.7rem 0; } [data-sweep-d] .md-tabs__link:hover { color: var(--md-default-fg-color); } [data-sweep-d] .md-tabs__link--active { color: var(--md-default-fg-color); font-weight: 500; } /* Search input */ [data-sweep-d] .md-search__input { background: rgba(127,127,127,0.10); border-radius: 999px; color: var(--md-default-fg-color); height: 32px; font-size: 13px; padding-left: 36px; } [data-sweep-d] .md-search__icon { color: var(--sw-ink3); } /* ─── 4. ANNOUNCEMENT STRIP ──────────────────────────────────────────── */ .sweep-announce { background: var(--sw-ink); color: var(--sw-paper); height: 30px; display: flex; align-items: center; justify-content: center; font-size: 11.5px; gap: 8px; letter-spacing: 0.01em; } .sweep-announce__chip { font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 1px 8px; background: rgba(255,255,255,0.14); border-radius: 999px; text-transform: uppercase; letter-spacing: 0.08em; } .sweep-announce__msg { opacity: 0.85; } .sweep-announce__cta { color: #2997FF !important; } .sweep-announce__cta:hover { text-decoration: underline; } /* ─── 5. HOMEPAGE HERO ───────────────────────────────────────────────── */ .sweep-hero { text-align: center; padding: 5rem 2rem 1.4rem; max-width: 980px; margin: 0 auto; } .sweep-hero__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--md-default-fg-color--lighter); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 1.4rem; } .sweep-hero__cap { font-weight: 700; } .sweep-hero__title { font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.04em; font-size: clamp(3rem, 8vw, 6.5rem); line-height: 0.98; text-wrap: balance; margin: 0 0 1.4rem; color: var(--sw-ink); } .sweep-hero__gradient, .md-typeset .sweep-hero__gradient { background: var(--sw-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-style: italic; font-weight: 800; } .sweep-hero__lede { font-size: 1.3rem; line-height: 1.4; color: var(--md-default-fg-color--light); max-width: 720px; margin: 0 auto 2rem; } .sweep-hero__ctas { display: inline-flex; gap: 14px; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; justify-content: center; } .sweep-hero__install { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 6px 0 14px; background: var(--sw-card); border: 1px solid var(--sw-rule); border-radius: 999px; font-size: 11.5px; color: var(--sw-ink); max-width: 100%; overflow: hidden; } .sweep-hero__install code { background: transparent; padding: 0; font-size: inherit; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Allow the long `pip install git+https://…` string to shrink below its intrinsic width inside the flex pill. Without `min-width: 0`, flexbox keeps the code at its max-content width and the whole pill overflows the viewport on mobile despite the ellipsis. */ min-width: 0; flex: 1 1 auto; } .sweep-hero__copy { width: 30px; height: 30px; border: none; background: transparent; border-radius: 8px; cursor: pointer; color: var(--sw-ink3); display: grid; place-items: center; } .sweep-hero__copy:hover { background: rgba(127,127,127,0.10); color: var(--sw-ink); } .sweep-hero__copy-icon { display: inline; } .sweep-hero__copy-icon--done { display: none; color: var(--sw-teal); } .sweep-hero__copy.is-copied .sweep-hero__copy-icon { display: none; } .sweep-hero__copy.is-copied .sweep-hero__copy-icon--done { display: inline; } .sweep-hero__meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--md-default-fg-color--lighter); letter-spacing: 0.04em; margin-top: 0.5rem; } .sweep-home-body { max-width: 980px; margin: 3rem auto 6rem; padding: 0 2rem; } /* ─── 6. CTA BUTTONS ─────────────────────────────────────────────────── */ .sweep-cta { display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border-radius: 999px; font-size: 15px; font-weight: 500; cursor: pointer; border: none; text-decoration: none !important; gap: 6px; transition: background 120ms ease, color 120ms ease; } .sweep-cta--fill { background: var(--sw-ink); color: var(--sw-paper) !important; } .sweep-cta--fill:hover { background: color-mix(in srgb, var(--sw-ink) 90%, black 10%); } .sweep-cta--ghost { background: transparent; color: var(--sw-accent) !important; } .sweep-cta--ghost:hover { text-decoration: underline !important; } /* ─── 7. SIDEBAR & TOC ───────────────────────────────────────────────── */ [data-sweep-d] .md-main__inner { margin-top: 1.6rem; } [data-sweep-d] .md-content__inner:not(.sweep-home-body) { padding-top: 1.6rem; max-width: 820px; } [data-sweep-d] .md-content__inner > :first-child { margin-top: 0; } [data-sweep-d] .md-content__inner:before { display: none; } /* Notebook pages need more horizontal room — code cells + matplotlib figures suffocate at 820 px. Widen specifically when the page is a Jupyter render (mkdocs-jupyter wraps everything in .jupyter-wrapper / .jp-Notebook). */ [data-sweep-d] .md-content__inner:has(.jupyter-wrapper), [data-sweep-d] .md-content__inner:has(.jp-Notebook) { max-width: 1100px !important; } [data-sweep-d] .md-sidebar { padding-top: 1.6rem; } [data-sweep-d] .md-sidebar__inner { padding-right: 1rem; } [data-sweep-d] .md-nav__title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--md-default-fg-color--lighter); padding: 0.8rem 0 0.5rem; background: transparent; } /* Restore Material's defaults for the mobile drawer header (the `