/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. SPDX-License-Identifier: Apache-2.0 */ /* ========================================================================== FlashDreams custom CSS -------------------------------------------------------------------------- Layered on top of pydata-sphinx-theme. Components are keyed off a small set of CSS custom properties so the site can be re-themed by editing tokens instead of rewriting rules. Class-name convention: single dashes only (`fd-stat-value`, not `fd-stat__value`). Docutils collapses `__` and `--` in `.. container::` / `:class:` arguments to single dashes in the rendered HTML, so BEM- style names in RST don't match what reaches the browser. Section map: 1. Design tokens (palette, type, spacing, radii, shadow) 2. Theme overrides (apply tokens to the upstream theme variables) 3. Layout helpers 4. Components 4.1 Hero 4.2 Feature card (extends sphinx-design card) 4.3 Video embed (responsive 16:9) 4.4 CTA button row 4.5 Stat block 4.6 Comparison table 4.7 Callout / note 4.8 Placeholder admonition 5. Project-wide header chrome hide 6. Misc upstream tweaks ========================================================================== */ /* ----- 1. Design tokens --------------------------------------------------- */ :root { /* Accent — single source of truth for branded color. Tuned to the green that the FlashDreams logo uses (#76B900). Re-brand by editing these four values. */ --fd-accent: #76b900; --fd-accent-hover: #5e9300; --fd-accent-soft: rgba(118, 185, 0, 0.12); --fd-accent-ink: #ffffff; /* text color on top of --fd-accent */ /* Type scale — collapsed to exactly four sizes. Eyebrows, captions, stat labels, stat notes, small body, table cells, etc. all share --fd-text-base (16px) and differentiate via weight / color / letter-spacing / case rather than size. Stat values and section heads share --fd-text-xl. The legacy alias names (--fd-text-xs, --fd-text-sm, --fd-text-2xl) are kept and mapped onto the canonical four so existing references resolve. */ --fd-text-base: 1rem; /* 16px body, captions, eyebrows, small body, table cells */ --fd-text-lg: 1.25rem; /* 20px lede paragraphs, card titles */ --fd-text-xl: 1.75rem; /* 28px section heads, stat values */ --fd-text-3xl: 3.25rem; /* 52px hero head only */ /* Aliases — preserved so legacy callsites keep resolving. Do not introduce new sizes here; map them onto the canonical four. */ --fd-text-xs: var(--fd-text-base); --fd-text-sm: var(--fd-text-base); --fd-text-2xl: var(--fd-text-xl); /* Spacing scale (4px base, doubling-ish). */ --fd-space-1: 0.25rem; /* 4px */ --fd-space-2: 0.5rem; /* 8px */ --fd-space-3: 1rem; /* 16px */ --fd-space-4: 1.5rem; /* 24px */ --fd-space-5: 2.25rem; /* 36px */ --fd-space-6: 3.5rem; /* 56px */ --fd-space-7: 5rem; /* 80px */ /* Radii */ --fd-radius-sm: 4px; --fd-radius-md: 8px; --fd-radius-lg: 14px; /* Shadow / elevation */ --fd-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03); --fd-shadow-2: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04); --fd-shadow-3: 0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.05); /* Misc */ --fd-border-width: 1px; --fd-transition: 150ms ease-out; --fd-max-content: 72rem; /* max width for hero / wide rows */ } /* Light-mode neutral palette */ html[data-theme="light"] { --fd-bg: #ffffff; --fd-bg-muted: #f7f8fa; --fd-bg-sunken: #eef0f4; --fd-surface: #ffffff; --fd-border: #e4e7ec; --fd-border-strong: #cdd2da; --fd-text: #1a1f2b; --fd-text-muted: #5a6271; --fd-text-subtle: #8a92a3; } /* Dark-mode neutral palette */ html[data-theme="dark"] { --fd-bg: #0f1218; --fd-bg-muted: #161a22; --fd-bg-sunken: #0a0c11; --fd-surface: #1a1f29; --fd-border: #2a313d; --fd-border-strong: #3a4150; --fd-text: #e8eaf0; --fd-text-muted: #a8b0bf; --fd-text-subtle: #6b7385; /* Dark-mode accent: a brighter green so it pops against #0f1218 without losing the NVIDIA-green identity. */ --fd-accent: #8ddc1a; --fd-accent-hover: #a4ea3a; --fd-accent-soft: rgba(141, 220, 26, 0.18); --fd-accent-ink: #0f1218; /* Heavier shadows are noise on a dark background; flatten them. */ --fd-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40); --fd-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45); --fd-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.55); } /* ----- 2. Theme overrides ------------------------------------------------- */ /* sphinx-design and pydata-sphinx-theme both define their own accent palettes. Re-bind the most visible ones to --fd-accent so buttons, links, and focus rings all use the same color. */ html { --pst-color-primary: var(--fd-accent); --pst-color-primary-bg: var(--fd-accent-soft); --pst-color-link: var(--fd-accent); --pst-color-link-hover: var(--fd-accent-hover); --pst-color-accent: var(--fd-accent); --sd-color-primary: var(--fd-accent); --sd-color-primary-text: var(--fd-accent-ink); --sd-color-primary-highlight: var(--fd-accent-hover); } /* ----- 3. Layout helpers -------------------------------------------------- */ /* Hide the "Table of Contents" heading in the primary sidebar (preserved from the prior custom.css). */ .bd-links__title { display: none; } /* Generic container: caps width, centers, gives gutters on small screens. */ .fd-container { max-width: var(--fd-max-content); margin-inline: auto; padding-inline: var(--fd-space-3); } /* Vertical rhythm helper — applies a generous gap between consecutive blocks on landing-style pages. */ .fd-section { margin-block: var(--fd-space-6); } @media (max-width: 640px) { .fd-section { margin-block: var(--fd-space-5); } } /* ----- 4. Components ------------------------------------------------------ */ /* 4.1 Hero ----------------------------------------------------------------- */ .fd-hero { margin-block: var(--fd-space-4) var(--fd-space-6); padding: var(--fd-space-6) var(--fd-space-4); border-radius: var(--fd-radius-lg); background: radial-gradient(120% 140% at 0% 0%, var(--fd-accent-soft) 0%, transparent 55%), linear-gradient(180deg, var(--fd-bg-muted), var(--fd-bg)); border: var(--fd-border-width) solid var(--fd-border); } /* Eyebrow text above the hero title — small, uppercase, accent-tinted. */ .fd-hero-eyebrow, .fd-hero-eyebrow > p { /* RST emits a wrapping

inside a .. container::, zero it so the eyebrow sits flush above the title. */ margin: 0 0 var(--fd-space-2) 0; font-size: var(--fd-text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fd-accent); } /* Hero title. Rendered from .. rubric:: with :class: fd-hero-title, which docutils outputs as a

. We override the rubric default margins. Weight is intentionally medium (500): the size + tight tracking already carry the emphasis. A heavier weight read as "ugly" per project-lead feedback. */ p.fd-hero-title.rubric, .fd-hero-title { font-size: var(--fd-text-3xl); line-height: 1.08; font-weight: 500; color: var(--fd-text); margin: 0 0 var(--fd-space-3) 0; letter-spacing: -0.02em; } .fd-hero-lede, .fd-hero-lede > p { /* Same paragraph-wrapping reset as the eyebrow. */ margin: 0 0 var(--fd-space-4) 0; font-size: var(--fd-text-lg); line-height: 1.5; color: var(--fd-text-muted); max-width: 48rem; } @media (max-width: 768px) { .fd-hero { padding: var(--fd-space-5) var(--fd-space-3); } p.fd-hero-title.rubric, .fd-hero-title { font-size: var(--fd-text-2xl); } .fd-hero-lede, .fd-hero-lede > p { font-size: var(--fd-text-base); } } /* 4.2 Feature card --------------------------------------------------------- */ /* Applied as :class-card: fd-feature on a sphinx-design card. We style the rendered .sd-card element. */ .sd-card.fd-feature { border: var(--fd-border-width) solid var(--fd-border); border-radius: var(--fd-radius-md); background: var(--fd-surface); box-shadow: var(--fd-shadow-1); transition: transform var(--fd-transition), box-shadow var(--fd-transition), border-color var(--fd-transition); height: 100%; } /* Only lift on hover when the card is actually clickable. sphinx_design adds `.sd-card-hover` to a card only when it has `:link:` set, so cards without a link (e.g. Discord / Discussions placeholders) keep their resting state instead of pretending to be interactive. */ .sd-card.fd-feature.sd-card-hover:hover { transform: translateY(-2px); box-shadow: var(--fd-shadow-2); border-color: var(--fd-border-strong); } .sd-card.fd-feature .sd-card-title { font-size: var(--fd-text-lg); font-weight: 600; color: var(--fd-text); margin-bottom: var(--fd-space-2); } .sd-card.fd-feature .sd-card-body { color: var(--fd-text-muted); font-size: var(--fd-text-sm); line-height: 1.55; } /* Optional icon slot — page writers prepend a single character or short inline element with class fd-feature-icon. */ .fd-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--fd-radius-sm); background: var(--fd-accent-soft); color: var(--fd-accent); font-weight: 700; margin-bottom: var(--fd-space-2); } /* 4.3 Video / animated-image embed (responsive 16:9) --------------------- Dynamic-image embeds on this site default to **animated AVIF**. AVIF is rendered through a stock `` (or ``) element, so the component must style image children the same way it styles iframes and `

by docutils. Reset that paragraph chrome so buttons sit flush in the flex row rather than carrying body-paragraph margins. */ .fd-cta-row > p { margin: 0; display: contents; } /* Buttons in a CTA row are usually sphinx-design buttons (.sd-btn). Tighten their look and ensure adequate hit area on touch. */ .fd-cta-row .sd-btn { padding: 0.625rem 1.125rem; border-radius: var(--fd-radius-md); font-weight: 600; font-size: var(--fd-text-sm); transition: transform var(--fd-transition), box-shadow var(--fd-transition); } .fd-cta-row .sd-btn:hover { transform: translateY(-1px); box-shadow: var(--fd-shadow-1); } @media (max-width: 480px) { .fd-cta-row .sd-btn { flex: 1 1 100%; text-align: center; } } /* 4.5 Stat block ----------------------------------------------------------- */ /* A stat block is a small, scannable value + label, typically rendered inside a sphinx-design grid. */ .fd-stat { padding: var(--fd-space-4) var(--fd-space-3); border: var(--fd-border-width) solid var(--fd-border); border-radius: var(--fd-radius-md); background: var(--fd-surface); text-align: left; height: 100%; } /* Each .fd-stat-* subcomponent is a .. container::, so docutils emits a wrapping

with an inner

. Style the wrapper for layout and the

for typography so the inner paragraph margin doesn't fight us. */ .fd-stat-value { margin-bottom: var(--fd-space-1); } .fd-stat-value > p { margin: 0; font-size: var(--fd-text-2xl); line-height: 1.1; font-weight: 700; color: var(--fd-accent); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .fd-stat-label > p { margin: 0; font-size: var(--fd-text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fd-text-muted); font-weight: 600; } .fd-stat-note { margin-top: var(--fd-space-2); } .fd-stat-note > p { margin: 0; font-size: var(--fd-text-xs); color: var(--fd-text-subtle); line-height: 1.4; } /* 4.6 Comparison table ----------------------------------------------------- */ /* Page writers wrap a standard Sphinx list-table / csv-table in a div with class fd-compare for benchmark-style readability. */ .fd-compare table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fd-text-sm); border: var(--fd-border-width) solid var(--fd-border); border-radius: var(--fd-radius-md); overflow: hidden; } .fd-compare thead th { background: var(--fd-bg-muted); color: var(--fd-text); font-weight: 600; text-align: left; padding: var(--fd-space-2) var(--fd-space-3); border-bottom: var(--fd-border-width) solid var(--fd-border); font-size: var(--fd-text-xs); letter-spacing: 0.04em; text-transform: uppercase; } .fd-compare tbody td { padding: var(--fd-space-2) var(--fd-space-3); border-bottom: var(--fd-border-width) solid var(--fd-border); color: var(--fd-text); vertical-align: top; } .fd-compare tbody tr:last-child td { border-bottom: 0; } .fd-compare tbody tr:nth-child(even) td { background: var(--fd-bg-muted); } /* Numeric columns: right-align when the writer adds .fd-compare-numeric to the table or the row. (RST class names ".. fd-compare--numeric" are normalised to single dashes by docutils.) Leading header column stays left-aligned for label readability. */ .fd-compare-numeric td, .fd-compare td.fd-compare-num { text-align: right; font-variant-numeric: tabular-nums; } .fd-compare-numeric td:first-child { text-align: left; } /* Highlight the "winner" row/cell. */ .fd-compare-best { color: var(--fd-accent); font-weight: 700; } @media (max-width: 640px) { .fd-compare { overflow-x: auto; } .fd-compare table { min-width: 32rem; } } /* 4.7 Callout / note ------------------------------------------------------- */ /* Restyle standard admonitions used as callouts so they read as a designed element rather than a default Sphinx box. Page writers can also use a custom .admonition.fd-callout class for tone control. */ .admonition.fd-callout { border: var(--fd-border-width) solid var(--fd-border); border-left: 4px solid var(--fd-accent); border-radius: var(--fd-radius-md); background: var(--fd-bg-muted); padding: var(--fd-space-3) var(--fd-space-4); margin-block: var(--fd-space-3); box-shadow: none; } .admonition.fd-callout > .admonition-title { font-size: var(--fd-text-sm); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fd-accent); background: transparent; padding: 0; margin: 0 0 var(--fd-space-2) 0; } .admonition.fd-callout > .admonition-title::before { display: none; /* drop the default icon — we use the bar instead */ } .admonition.fd-callout p { color: var(--fd-text); margin: 0 0 var(--fd-space-2) 0; } .admonition.fd-callout p:last-child { margin-bottom: 0; } /* 4.8 Placeholder admonition ---------------------------------------------- */ /* DELIBERATELY LOUD. Reviewers must be able to spot un-filled spots at a glance, on either light or dark background. Hatched border + warning color + monospaced "PLACEHOLDER" label. */ .admonition.placeholder { border: 2px dashed var(--fd-accent); border-radius: var(--fd-radius-md); background: repeating-linear-gradient( -45deg, var(--fd-accent-soft) 0, var(--fd-accent-soft) 8px, transparent 8px, transparent 18px ), var(--fd-bg-muted); padding: var(--fd-space-3) var(--fd-space-4); margin-block: var(--fd-space-3); color: var(--fd-text); box-shadow: none; position: relative; } .admonition.placeholder > .admonition-title { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: var(--fd-text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fd-accent); background: transparent; padding: 0; margin: 0 0 var(--fd-space-2) 0; display: flex; align-items: center; gap: var(--fd-space-2); } .admonition.placeholder > .admonition-title::before { content: "[ ]"; color: var(--fd-accent); font-weight: 700; margin: 0; background: none; width: auto; height: auto; } .admonition.placeholder p { margin: 0 0 var(--fd-space-2) 0; font-size: var(--fd-text-sm); } .admonition.placeholder p:last-child { margin-bottom: 0; } .admonition.placeholder code, .admonition.placeholder kbd { background: var(--fd-bg); border: var(--fd-border-width) solid var(--fd-border); border-radius: var(--fd-radius-sm); padding: 0 0.25rem; font-size: 0.85em; } /* ----- 5. Project-wide header chrome hide -------------------------------- */ /* Drop doc-y header chrome on every page. pydata-sphinx-theme renders a version subtitle ("FlashDreams v0.1.0a2") under the logo via `

`, and a docs-search button in the navbar. On a front-of-site page with a hero they read as a docs build tag. Apply unconditionally — the site uses an in-page search via sphinx-design / the navbar search button. */ .navbar-brand .logo__title, .search-button, .search-button-field, .navbar-persistent--container, .navbar-persistent--mobile { display: none !important; } /* ----- 6. Front-of-site marketing layout --------------------------------- */ /* Front-of-site pages (homepage, benchmarks, community) bypass pydata's docs scaffold entirely via the `docs_main` block override in `_templates/layout.html`. The body content is rendered into `

` directly inside `
`, with no `bd-content` / `bd-article-container` / `bd-article` wrapping. `body.fd-page-landing` is set by the same template so these rules can be cleanly scoped to landing pages without `:has()` tricks. The marketing layout makes three structural moves on top of the stripped-down scaffold: - Full-bleed by default. The body container's max-width is reset and `.fd-landing-main` runs edge-to-edge. Content widths come from per-section bands (see `.fd-band` and the auto-band rules below), not from a single global wrapper. - Hero is a full-bleed display band. No card border, no rounded box; the eyebrow / title / lede / CTAs sit free against the page with a soft accent wash behind them so it reads as a marketing hero, not a callout-at-top-of-doc. - Section rhythm is built from alternating muted-vs-default bands keyed off a CSS counter on the outer page section. This works regardless of what mix of admonitions / grids / paragraphs sits between the H1 and the first H2, where `nth-of-type` was unstable. */ /* Full-bleed wrapper for the body content. */ body.fd-page-landing .fd-landing-main { width: 100%; padding: 0; margin: 0; /* Counter for alternating-band styling on top-level sections. */ counter-reset: fd-band; } /* Pydata's body container caps page width; reclaim the full viewport on landing pages so the alternating section bands can stretch edge-to-edge. */ body.fd-page-landing .bd-container, body.fd-page-landing .bd-container__inner { max-width: 100%; padding-inline: 0; } body.fd-page-landing .bd-main { padding-inline: 0; } /* The outer Sphinx-emitted `
` carrying the H1 plus all H2 sub-sections — strip its own padding so nested band styles control the rhythm. */ body.fd-page-landing .fd-landing-main > section { padding: 0; margin: 0; max-width: none; } /* Hide the docs-y H1 that Sphinx emits at the top of every page — the marketing hero IS the page title; the H1 is structural only, present so the toctree caption and browser tab resolve. Hidden ONLY on hero-bearing pages (landing, benchmarks index, community index). The prose-narrow community subpages (contribute / discord / faq / support) keep their H1 visible because they don't have a hero band of their own and the H1 IS their marketing title. */ body.fd-page-landing:not(.fd-prose-narrow) .fd-landing-main > section > h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } /* Style the H1 + intro prose on prose-narrow pages as a tasteful hero-substitute: large display H1, no card chrome, with a thin accent rule beneath. The Sphinx-emitted intro paragraphs (between H1 and the first H2 section) sit in the outer `
` and would otherwise be unstyled — give them prose-narrow treatment. */ body.fd-page-landing.fd-prose-narrow .fd-landing-main > section > h1 { /* Prose-narrow pages have no hero band; the H1 is the page's marketing title. Render at the same step as section heads (--fd-text-xl, 28px) — the four-step ladder caps at the hero size, and prose-narrow pages don't get a hero step. */ font-size: var(--fd-text-xl); letter-spacing: -0.025em; line-height: 1.08; font-weight: 500; color: var(--fd-text); max-width: 50rem; margin: 0 auto var(--fd-space-4); padding-block: var(--fd-space-6) 0; padding-inline: var(--fd-space-4); } body.fd-page-landing.fd-prose-narrow .fd-landing-main > section > p { max-width: 50rem; margin-inline: auto; padding-inline: var(--fd-space-4); font-size: var(--fd-text-lg); line-height: 1.6; color: var(--fd-text-muted); } body.fd-page-landing.fd-prose-narrow .fd-landing-main > section > p:last-of-type { padding-bottom: var(--fd-space-5); margin-bottom: var(--fd-space-5); border-bottom: var(--fd-border-width) solid var(--fd-border); } /* DOCS-Y CHROME REMOVAL --------------------------------------------------- Two artifacts that the docutils HTML emitter adds to every page read distinctly as "documentation" on a marketing page: - The `#` anchor after every heading. - The `
` separators from the `----` transitions RST authors use to break up landing-page sections. Both are useful on reference docs but defeat the marketing layout. Hide them unconditionally on `fd-page-landing`. */ body.fd-page-landing .headerlink { display: none; } body.fd-page-landing hr.docutils { display: none; } /* DEFAULT INNER WIDTH ---------------------------------------------------- Every top-level H2 section is centered in a constrained inner column by default. The band background spans full-bleed; the content within stays readable. Bands explicitly marked `.fd-band-wide` opt for a wider inner column. */ body.fd-page-landing .fd-landing-main > section > section { counter-increment: fd-band; padding-block: var(--fd-space-7); padding-inline: var(--fd-space-4); margin: 0; max-width: none; } /* Inner content column — wraps direct children of the band so the band background can extend full-bleed. Implemented by giving each band an `::before` no-op and using a flow root with auto-margin children. Page-writers don't need to author this — every child of a top-level section is auto-constrained via this rule. Bands use flexbox column layout so that the optional `fd-eyebrow` container — which RST emits AFTER the H2 because docutils anchors the section by its heading — can be visually reordered to sit above the H2 (the marketing-page convention). */ body.fd-page-landing .fd-landing-main > section > section { display: flex; flex-direction: column; } body.fd-page-landing .fd-landing-main > section > section > * { max-width: var(--fd-max-content); margin-inline: auto; width: 100%; box-sizing: border-box; } /* Visual reorder: the H2 itself stays at its source position; the eyebrow (a direct-child fd-eyebrow container) gets pulled above it with negative `order`. The lede sits immediately below the H2 (default DOM order). Everything else flows after. */ body.fd-page-landing .fd-landing-main > section > section > .fd-eyebrow { order: -2; } /* H2 within a band — fixed at --fd-text-xl (28px). Every band's section head reads at the same size; the four-step ladder is base → lg → xl → 3xl with no in-between. `order: -1` pulls it above the lede/grid/etc. but below the eyebrow (`order: -2`); eyebrow → h2 → lede → body is the rhythm. */ body.fd-page-landing .fd-landing-main > section > section > h2 { order: -1; font-size: var(--fd-text-xl); letter-spacing: -0.02em; line-height: 1.15; font-weight: 600; color: var(--fd-text); margin: 0 auto var(--fd-space-4); padding: 0; border: 0; max-width: var(--fd-max-content); } /* H3 within a band — sub-section label. Slightly larger than docs default, still secondary to the section H2. */ body.fd-page-landing .fd-landing-main > section > section h3 { font-size: var(--fd-text-lg); letter-spacing: -0.01em; line-height: 1.3; font-weight: 700; color: var(--fd-text); margin-top: var(--fd-space-5); margin-bottom: var(--fd-space-3); } /* Alternating band backgrounds. Counter-based so the order is stable regardless of any non-section elements sitting between H2s in the Sphinx-emitted markup. Even-numbered bands carry the muted neutral. */ body.fd-page-landing .fd-landing-main > section > section:nth-of-type(even) { background: var(--fd-bg-muted); } body.fd-page-landing .fd-landing-main > section > section:nth-of-type(odd) { background: var(--fd-bg); } /* Smaller padding above the first H2 section when the page leads with a hero — the hero already gives the page its top weight. The hero itself carries `.fd-hero-band` and is a sibling of these top-level sections. Use `:first-of-type` on the inner sections so only the first H2 band tightens its top padding. */ body.fd-page-landing .fd-landing-main > section > .fd-hero-band ~ section:first-of-type { padding-top: var(--fd-space-6); } /* HERO BAND -------------------------------------------------------------- The hero used to be a rounded card with a border, which read as "callout at top of page". On front-of-site we instead render it as a full-bleed band with no border, soft accent wash, large display typography. Page-writers wrap the hero in a `.. container:: fd-hero fd-hero-band` to opt into the band styling. */ body.fd-page-landing .fd-hero-band, body.fd-page-landing .fd-landing-main > section > .fd-hero-band { /* Override the card-style fd-hero rule when in band mode. */ background: radial-gradient(80% 120% at 0% 0%, var(--fd-accent-soft) 0%, transparent 60%), linear-gradient(180deg, var(--fd-bg-muted) 0%, var(--fd-bg) 100%); border: 0; border-radius: 0; margin: 0; padding-block: clamp(var(--fd-space-6), 8vw, var(--fd-space-7)); padding-inline: var(--fd-space-4); border-bottom: var(--fd-border-width) solid var(--fd-border); } body.fd-page-landing .fd-hero-band > * { max-width: var(--fd-max-content); margin-inline: auto; } /* Hero display title — scale much larger than docs H1, tightly tracked, so the page leads with marketing-scale type. Weight is medium (500); the display size and tracking carry the emphasis. */ body.fd-page-landing .fd-hero-band .fd-hero-title, body.fd-page-landing .fd-hero-band p.fd-hero-title.rubric { font-size: clamp(2.5rem, 5.5vw + 1rem, 4.5rem); letter-spacing: -0.03em; line-height: 1.02; font-weight: 500; margin: 0 auto var(--fd-space-3); max-width: var(--fd-max-content); } /* Hero lede — larger leading paragraph, muted color, capped width so it stays scannable on wide viewports. Fixed at --fd-text-lg to match every other lede on the site (no per-band drift). */ body.fd-page-landing .fd-hero-band .fd-hero-lede, body.fd-page-landing .fd-hero-band .fd-hero-lede > p { font-size: var(--fd-text-lg); line-height: 1.5; color: var(--fd-text-muted); max-width: 52rem; margin: 0 auto var(--fd-space-5); } /* Hero CTA row — centered + larger primary button so the call to action is unambiguous. */ body.fd-page-landing .fd-hero-band .fd-cta-row { margin: 0 auto; max-width: var(--fd-max-content); justify-content: flex-start; gap: var(--fd-space-3); } body.fd-page-landing .fd-hero-band .fd-cta-row .sd-btn { padding: 0.75rem 1.5rem; font-size: var(--fd-text-base); } /* HERO with internal split (asymmetric hero) ------------------------------ When the hero contains an `fd-split`, the split's two columns share the hero's content width — let the split lay out without re-capping each child to `--fd-max-content` (which would force the text column to its own centered subwidth). Also let the hero title and lede text-align left so they don't visually drift away from the CTA row. */ body.fd-page-landing .fd-hero-band > .fd-split { max-width: var(--fd-max-content); margin-inline: auto; } body.fd-page-landing .fd-hero-band .fd-split .fd-hero-title, body.fd-page-landing .fd-hero-band .fd-split p.fd-hero-title.rubric, body.fd-page-landing .fd-hero-band .fd-split .fd-hero-lede, body.fd-page-landing .fd-hero-band .fd-split .fd-hero-lede > p, body.fd-page-landing .fd-hero-band .fd-split .fd-cta-row { margin-inline: 0; max-width: none; text-align: left; } body.fd-page-landing .fd-hero-band .fd-split .fd-hero-title, body.fd-page-landing .fd-hero-band .fd-split p.fd-hero-title.rubric { /* Slightly smaller title when sharing horizontal space with a visual companion — keep it readable in the 5/7 narrow column. */ font-size: clamp(2.25rem, 4.5vw + 0.5rem, 3.75rem); } /* EYEBROW + SECTION KICKER ------------------------------------------------ A small uppercase label that sits above a section H2 — gives each band a marketing-style eyebrow / title pairing instead of a bare H2. Page-writers use `.. container:: fd-eyebrow` as the first child of the section. */ .fd-eyebrow, .fd-eyebrow > p { margin: 0 auto var(--fd-space-2); font-size: var(--fd-text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fd-accent); max-width: var(--fd-max-content); } /* Eyebrow / H2 / lede pairing — the flexbox reorder above places the eyebrow directly above the H2 visually, but they are NOT DOM- adjacent (the h2 actually comes before the eyebrow in source). Margin reset is handled directly on the h2 (margin-top: 0 in the h2 rule above) so no adjacent-sibling rule is needed here. */ /* LEDE PARAGRAPH --------------------------------------------------------- A larger leading paragraph used directly under a section H2 — pairs with `.fd-eyebrow` to give marketing-flow sections a defined eyebrow / head / lede stack. Fixed at --fd-text-lg (20px) so every section's lede renders at the same size; no clamp, no per-section drift. */ .fd-lede, .fd-lede > p { font-size: var(--fd-text-lg); line-height: 1.55; color: var(--fd-text-muted); max-width: 56rem; margin: 0 auto var(--fd-space-5); } /* Body paragraphs inside any band-section content block render at the canonical body size. This includes paragraphs inside `.fd-split-text`, directly inside band sections, and anywhere else the marketing flow surfaces prose. Forcing the size here defeats the per-section drift that emerged when some sections had an `.fd-lede` and others started straight in with a body paragraph at a different inherited size. */ body.fd-page-landing .fd-landing-main > section > section p, body.fd-page-landing .fd-landing-main > section > section li { font-size: var(--fd-text-base); } /* Re-assert size for elements that are intentionally NOT body-size: ledes, eyebrows, hero pieces, stat values/labels/notes, card titles, admonition titles, code, and component-specific surfaces. These selectors win because they're more specific OR come later. */ body.fd-page-landing .fd-landing-main > section > section .fd-lede, body.fd-page-landing .fd-landing-main > section > section .fd-lede > p { font-size: var(--fd-text-lg); } body.fd-page-landing .fd-landing-main > section > section .fd-eyebrow, body.fd-page-landing .fd-landing-main > section > section .fd-eyebrow > p { font-size: var(--fd-text-base); } /* BAND TINT VARIANTS ---------------------------------------------------- Page-writers can mark a top-level section with one of: - `.fd-band-accent` — accent-tinted band (use sparingly; one per page) - `.fd-band-sunken` — deeper neutral band, for the footer-zone CTA - `.fd-band-default` — explicit override to force the default bg on a section the counter-rule would otherwise paint muted These take priority over the nth-of-type alternation. */ body.fd-page-landing .fd-landing-main > section > section.fd-band-accent { background: radial-gradient(70% 100% at 100% 0%, var(--fd-accent-soft) 0%, transparent 60%), var(--fd-bg); } body.fd-page-landing .fd-landing-main > section > section.fd-band-sunken { background: var(--fd-bg-sunken); } body.fd-page-landing .fd-landing-main > section > section.fd-band-default { background: var(--fd-bg); } /* CTA BANNER ------------------------------------------------------------- Closing-band component for landing pages — a full-bleed accent band carrying a final headline + CTA row. Page-writers wrap a section in the `.fd-cta-banner` class (compose with `.fd-band-accent`). */ body.fd-page-landing .fd-landing-main > section > section.fd-cta-banner { text-align: center; padding-block: var(--fd-space-7); } body.fd-page-landing .fd-cta-banner > h2 { text-align: center; margin-bottom: var(--fd-space-3); } body.fd-page-landing .fd-cta-banner > .fd-eyebrow { text-align: center; } body.fd-page-landing .fd-cta-banner > .fd-lede { text-align: center; margin-inline: auto; margin-bottom: var(--fd-space-5); } body.fd-page-landing .fd-cta-banner .fd-cta-row { justify-content: center; } /* FEATURE CARD POLISH (marketing context) ------------------------------- On front-of-site, give feature cards a touch more vertical padding and a subtle accent-tinted icon wash so they read as marketing tiles rather than docs cards. */ body.fd-page-landing .sd-card.fd-feature { padding: var(--fd-space-3); } body.fd-page-landing .sd-card.fd-feature .sd-card-body { padding: var(--fd-space-3); } body.fd-page-landing .sd-card.fd-feature .sd-card-title { font-size: 1.0625rem; margin-bottom: var(--fd-space-2); } /* STAT BLOCK POLISH (marketing context) --------------------------------- Stat values sit at --fd-text-xl on the marketing layout — the same step as section heads. Numeric tiles do not need their own size step; their weight comes from the accent color + tabular numerals already on `.fd-stat-value > p`. */ body.fd-page-landing .fd-stat { padding: var(--fd-space-4); } body.fd-page-landing .fd-stat-value > p { font-size: var(--fd-text-xl); line-height: 1.05; } /* LANDING FOOTER -------------------------------------------------------- On front-of-site pages, give the global `bd-footer` (copyright) marketing-page presence — a deeper neutral band that anchors the page bottom instead of a thin border-top docs footer. */ body.fd-page-landing .bd-footer { background: var(--fd-bg-sunken); border-top: var(--fd-border-width) solid var(--fd-border); color: var(--fd-text-muted); font-size: var(--fd-text-sm); } body.fd-page-landing .bd-footer .bd-footer__inner { max-width: var(--fd-max-content); margin-inline: auto; padding-block: var(--fd-space-5); padding-inline: var(--fd-space-4); } /* FOOTER ICON LINKS ------------------------------------------------------ GitHub + Discord channel icons rendered into the FOOTER via the `icon-links` entry in `html_theme_options["footer_end"]`. The component template (`pydata_sphinx_theme/components/icon-links.html`) emits `
    ` with FontAwesome `` glyphs inside `.nav-link.pst-navbar-icon` anchors — same markup regardless of whether it's placed in the navbar or footer. Scope these rules to `.bd-footer` so they don't fight the upstream navbar styling (we have no navbar icon-links on this site, but the selector keeps the rule isolated and lets a future maintainer re-introduce a navbar instance without collision). */ .bd-footer .navbar-icon-links { display: flex; flex-wrap: wrap; gap: var(--fd-space-3); align-items: center; margin: 0; padding: 0; list-style: none; } .bd-footer .navbar-icon-links > .nav-item { margin: 0; padding: 0; } .bd-footer .navbar-icon-links .nav-link.pst-navbar-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--fd-text-muted); border-radius: var(--fd-radius-sm); transition: color var(--fd-transition), background-color var(--fd-transition); } .bd-footer .navbar-icon-links .nav-link.pst-navbar-icon:hover, .bd-footer .navbar-icon-links .nav-link.pst-navbar-icon:focus-visible { color: var(--fd-accent); background: var(--fd-accent-soft); text-decoration: none; } .bd-footer .navbar-icon-links .nav-link.pst-navbar-icon > i { font-size: 1.25rem; /* override FontAwesome `fa-lg` */ line-height: 1; } /* Strip default link underline on the icon anchors (some pydata stylesheets re-apply text-decoration on visited / hover links). */ .bd-footer .navbar-icon-links .nav-link.pst-navbar-icon, .bd-footer .navbar-icon-links .nav-link.pst-navbar-icon:visited { text-decoration: none; } /* The marketing-page footer block reserves an inner container with `.bd-footer__inner`; the footer's start / end items sit on its left and right via flexbox. Make sure the end (icon links) stays right- aligned even when the copyright text wraps onto multiple lines. */ .bd-footer .bd-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fd-space-3); } .bd-footer .footer-items__start { flex: 1 1 auto; } .bd-footer .footer-items__end { flex: 0 0 auto; } /* On narrow viewports stack the copyright above the icon row and center both. */ @media (max-width: 540px) { .bd-footer .bd-footer__inner { flex-direction: column; align-items: center; text-align: center; } .bd-footer .navbar-icon-links { justify-content: center; } } /* COMMUNITY-SUBPAGE PROSE TWEAKS ---------------------------------------- The community subpages (contribute, discord, faq, support) are heavy prose. They use the landing layout (no sidebars) but with a narrower reading column so paragraphs stay legible. Re-cap the inner width and tighten the band padding to feel like a marketing- prose article rather than a docs page. */ body.fd-page-landing.fd-prose-narrow .fd-landing-main > section > section { padding-block: var(--fd-space-6); } body.fd-page-landing.fd-prose-narrow .fd-landing-main > section > section > * { max-width: 50rem; } body.fd-page-landing.fd-prose-narrow .fd-landing-main > section > section > h2 { max-width: 50rem; } body.fd-page-landing.fd-prose-narrow .fd-landing-main > section > section h3 { margin-top: var(--fd-space-4); } body.fd-page-landing.fd-prose-narrow .fd-landing-main p, body.fd-page-landing.fd-prose-narrow .fd-landing-main li { line-height: 1.65; } /* ASYMMETRIC LAYOUT COMPONENTS -------------------------------------------- The marketing flow needs more rhythm than stacked full-bleed bands. The components below turn a section's content into a two-column split: prose on one side, a visual companion (image, video, code block, stat tile cluster) on the other. Composition pattern: a page-writer adds `.fd-split` to a section via the `rst-class` trick, then drops a `.fd-split-text` container and a `.fd-split-visual` container as siblings inside it. The split honors the marketing-band scaffold above — the H2, eyebrow, and lede still render in the band's column flow, then the split's two columns lay out beneath. Alternative: drop a `.. grid:: 1 2 2 2` sphinx-design grid inside the section and use `.fd-split-text` / `.fd-split-visual` on the two grid-items. The CSS below works for both shapes. Variants: - `.fd-split-reverse` — flip visual to the left on viewports ≥ 768px - `.fd-split-asymmetric` — 5fr text / 7fr visual (showcase-leaning) - `.fd-split-asymmetric-reverse` — 7fr text / 5fr visual (prose-leaning) Below 768px every split stacks to a single column with the text first; reverse and asymmetric variants share that mobile stack so small-viewport content order is always: prose-then-visual. */ body.fd-page-landing .fd-split { display: grid; grid-template-columns: 1fr; gap: var(--fd-space-5); align-items: center; width: 100%; max-width: var(--fd-max-content); margin-inline: auto; } @media (min-width: 768px) { body.fd-page-landing .fd-split { grid-template-columns: 1fr 1fr; gap: var(--fd-space-6); } body.fd-page-landing .fd-split.fd-split-reverse > .fd-split-visual { order: -1; } body.fd-page-landing .fd-split.fd-split-asymmetric { grid-template-columns: 5fr 7fr; } body.fd-page-landing .fd-split.fd-split-asymmetric-reverse { grid-template-columns: 7fr 5fr; } } /* When the split lives directly inside a section band the band's flex layout (`flex-direction: column`) would force the split to full width on its own row — that's exactly what we want. The split keeps its own grid for the two-column layout inside. */ body.fd-page-landing .fd-landing-main > section > section > .fd-split { margin-block: var(--fd-space-3); } /* Split visual containers: cap their height and round corners so placeholders + images sit consistently. Children stretch to fill the column. */ body.fd-page-landing .fd-split-visual { display: flex; flex-direction: column; gap: var(--fd-space-3); } body.fd-page-landing .fd-split-visual > * { margin: 0; width: 100%; } /* Split text column: give prose a comfortable line length even inside the half-width column. */ body.fd-page-landing .fd-split-text { display: flex; flex-direction: column; gap: var(--fd-space-3); } body.fd-page-landing .fd-split-text > p { margin: 0; line-height: 1.65; } body.fd-page-landing .fd-split-text > p:not(:last-child) { margin-bottom: var(--fd-space-2); } /* ASYMMETRIC FEATURE GRID ------------------------------------------------- A 4-tile arrangement where the first tile spans the height of the other three — hero feature tile on the left + 3 supporting tiles stacked on the right. Use sphinx-design `grid-item` with a `:columns: 12 12 6 6` on the lead tile and `:columns: 12 12 6 2` on the others, or apply `.fd-feature-hero` to the lead tile (style hook only — the grid layout itself comes from sphinx-design). This rule promotes a sphinx-design card with `.fd-feature-hero` to a visually heavier presentation: larger padding, taller min-height, and an accent-tinted top border. */ body.fd-page-landing .sd-card.fd-feature.fd-feature-hero { padding: var(--fd-space-5); min-height: 100%; border-top: 3px solid var(--fd-accent); background: linear-gradient(180deg, var(--fd-accent-soft) 0%, transparent 40%), var(--fd-surface); } body.fd-page-landing .sd-card.fd-feature.fd-feature-hero .sd-card-title { font-size: var(--fd-text-lg); margin-bottom: var(--fd-space-3); } body.fd-page-landing .sd-card.fd-feature.fd-feature-hero .sd-card-body { padding: var(--fd-space-4); } /* MEDIA RAIL / SHOWCASE STRIP -------------------------------------------- A horizontally-arranged row of 3-4 visual tiles (each an image, video, or placeholder admonition) under a section heading. Used for feature-demo loops, supported-model gallery, chart strip, etc. Page-writers compose this as either: (a) a `.. grid:: 1 2 3 3` sphinx-design grid with the rail class on the outer container, OR (b) a `.. container:: fd-media-rail` wrapping 3-4 `.fd-media-tile` containers. Tiles maintain a consistent aspect ratio so the row reads as a strip rather than as varying-height blocks. */ body.fd-page-landing .fd-media-rail { display: grid; grid-template-columns: 1fr; gap: var(--fd-space-3); width: 100%; max-width: var(--fd-max-content); margin: var(--fd-space-4) auto; } @media (min-width: 600px) { body.fd-page-landing .fd-media-rail { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { body.fd-page-landing .fd-media-rail { grid-template-columns: repeat(3, 1fr); } body.fd-page-landing .fd-media-rail.fd-media-rail-4 { grid-template-columns: repeat(4, 1fr); } } body.fd-page-landing .fd-media-tile { border: var(--fd-border-width) solid var(--fd-border); border-radius: var(--fd-radius-md); background: var(--fd-surface); overflow: hidden; display: flex; flex-direction: column; } body.fd-page-landing .fd-media-tile > * { margin: 0; } /* Animated-image / video media in a tile. AVIF is the default dynamic-image format on this site — render through `` or `` and the tile auto-sizes it to the column. `