/* real.css -- docs/site theme skin (Cyanotype palette). * * Two layers: local custom properties (--paper, --ink, --accent, ...) are the * source of truth; pydata-sphinx-theme's semantic variables (--pst-color-*) * point at the same values so the theme chrome follows the palette. Variable * names were extracted from the installed theme CSS, not guessed. * * No webfont CDN: both font stacks are system/local. Both themes are tuned * (no naive inversion): light at :root, dark under html[data-theme="dark"] * (stamped by the theme), with an @media(prefers-color-scheme) fallback for * the pre-hydration paint. * * WHY THE --pst-color-* MAPPING IS REPEATED FOUR TIMES (:root, html:not([data- * theme]), html[data-theme="dark"], html[data-theme="light"]), NOT DECLARED ONCE: * pydata-sphinx-theme's OWN compiled CSS redeclares the semantic hue families * (primary/secondary/accent/info/warning/success/danger, base+text+highlight+ * highlight-text) inside its own html:not([data-theme]) / html[data-theme=light] / * html[data-theme=dark] selectors -- each of specificity (0,1,1) (one type selector * + one attribute/pseudo-class selector). A bare `:root { --pst-color-primary: ... }` * is only (0,1,0) -- LOWER specificity, which loses to pydata's own rule regardless * of stylesheet load order (specificity is compared before source order in the CSS * cascade). Since pydata-sphinx-theme.js always stamps a concrete data-theme="light" * or "dark" on within moments of page load (confirmed in the built JS: the * inline bootstrap script runs first, then the deferred theme-switcher script * resolves "auto" to a concrete value), a :root-only mapping would be invisible in * the steady state -- the exact bug this repetition avoids. Matching pydata's own * selectors (same specificity, real.css loaded after pydata-sphinx-theme.css per * html_css_files, so ties go to real.css) is what actually lets the swap win, * without resorting to !important anywhere in this section. */ :root { /* neutrals -- Cyanotype, light (the paper) */ --paper: #F3F5F7; --surface: #FAFBFC; --surface-2: #FFFFFF; --ink: #0F1720; --ink-2: #43505C; --ink-3: #73808C; --line: #D5DCE2; --line-2: #E4E9EE; /* signal -- Prussian blue = "real / linear / interactive" */ --accent: #14548F; --accent-ink: #0E4173; --accent-2: #114B82; --accent-soft: #E0EAF4; --on-accent: #FFFFFF; /* the cliff -- orange, used sparingly */ --danger: #C14E20; --danger-soft: #F7E6DD; --shadow: 0 1px 2px rgba(15, 23, 32, .04), 0 8px 24px -12px rgba(15, 23, 32, .14); --shadow-lift: 0 2px 4px rgba(15, 23, 32, .05), 0 18px 44px -18px rgba(15, 23, 32, .22); --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; --radius: 9px; --radius-s: 6px; /* -- pydata-sphinx-theme semantic vars, pointed at the tokens above. * --pst-color-accent must be mapped (navbar/search chrome reads it directly; * unmapped it stays the theme's stock magenta). success/attention are mapped * defensively -- the theme's stock success green would clash. warning/danger * -highlight reuse the base danger value: the palette deliberately has no * second danger shade. The neutral swatch family (light/muted/dark/...) stays * at theme stock: unreachable from any directive used in this site. */ --pst-color-primary: var(--accent); --pst-color-primary-bg: var(--accent-soft); --pst-color-primary-text: var(--on-accent); --pst-color-primary-highlight: var(--accent-2); --pst-color-primary-highlight-text: var(--on-accent); --pst-color-secondary: var(--accent-ink); --pst-color-secondary-bg: var(--accent-soft); --pst-color-secondary-text: var(--on-accent); --pst-color-secondary-highlight: var(--accent-2); --pst-color-secondary-highlight-text: var(--on-accent); --pst-color-accent: var(--accent); --pst-color-accent-bg: var(--accent-soft); --pst-color-info: var(--accent); --pst-color-info-bg: var(--accent-soft); --pst-color-info-text: var(--on-accent); --pst-color-info-highlight: var(--accent-2); --pst-color-info-highlight-text: var(--on-accent); --pst-color-success: var(--accent); --pst-color-success-bg: var(--accent-soft); --pst-color-success-text: var(--on-accent); --pst-color-success-highlight: var(--accent-2); --pst-color-success-highlight-text: var(--on-accent); --pst-color-warning: var(--danger); --pst-color-warning-bg: var(--danger-soft); --pst-color-warning-text: var(--on-accent); --pst-color-warning-highlight: var(--danger); --pst-color-warning-highlight-text: var(--on-accent); --pst-color-danger: var(--danger); --pst-color-danger-bg: var(--danger-soft); --pst-color-danger-text: var(--on-accent); --pst-color-danger-highlight: var(--danger); --pst-color-danger-highlight-text: var(--on-accent); --pst-color-text-base: var(--ink); --pst-color-text-muted: var(--ink-2); --pst-color-border: var(--line); --pst-color-border-muted: var(--line-2); --pst-color-blockquote-notch: var(--line); --pst-color-heading: var(--ink); --pst-color-link: var(--accent-ink); --pst-color-link-hover: var(--accent); --pst-color-link-higher-contrast: var(--accent-ink); --pst-color-inline-code: var(--ink); --pst-color-target: var(--accent-soft); --pst-color-background: var(--paper); --pst-color-on-background: var(--surface); --pst-color-surface: var(--surface-2); --pst-color-on-surface: var(--ink); --pst-font-family-base: var(--font-sans); --pst-font-family-heading: var(--font-sans); --pst-font-family-monospace: var(--font-mono); } /* Same --pst-color-* mapping as :root, verbatim: covers the narrow, real window * where carries data-theme="" (empty, not absent) -- the inline bootstrap * script (see landing/base.html's ) sets dataset.theme from localStorage * unconditionally, including to "" when no value is stored yet, which matches * NEITHER html:not([data-theme]) NOR html[data-theme=light|dark] until the * deferred theme-switcher script resolves a concrete value a moment later. This * block, at pydata's own html:not([data-theme]) specificity (0,1,1), keeps that * moment on Cyanotype instead of an unset custom property. */ html:not([data-theme]) { --pst-color-primary: var(--accent); --pst-color-primary-bg: var(--accent-soft); --pst-color-primary-text: var(--on-accent); --pst-color-primary-highlight: var(--accent-2); --pst-color-primary-highlight-text: var(--on-accent); --pst-color-secondary: var(--accent-ink); --pst-color-secondary-bg: var(--accent-soft); --pst-color-secondary-text: var(--on-accent); --pst-color-secondary-highlight: var(--accent-2); --pst-color-secondary-highlight-text: var(--on-accent); --pst-color-accent: var(--accent); --pst-color-accent-bg: var(--accent-soft); --pst-color-info: var(--accent); --pst-color-info-bg: var(--accent-soft); --pst-color-info-text: var(--on-accent); --pst-color-info-highlight: var(--accent-2); --pst-color-info-highlight-text: var(--on-accent); --pst-color-success: var(--accent); --pst-color-success-bg: var(--accent-soft); --pst-color-success-text: var(--on-accent); --pst-color-success-highlight: var(--accent-2); --pst-color-success-highlight-text: var(--on-accent); --pst-color-warning: var(--danger); --pst-color-warning-bg: var(--danger-soft); --pst-color-warning-text: var(--on-accent); --pst-color-warning-highlight: var(--danger); --pst-color-warning-highlight-text: var(--on-accent); --pst-color-danger: var(--danger); --pst-color-danger-bg: var(--danger-soft); --pst-color-danger-text: var(--on-accent); --pst-color-danger-highlight: var(--danger); --pst-color-danger-highlight-text: var(--on-accent); --pst-color-text-base: var(--ink); --pst-color-text-muted: var(--ink-2); --pst-color-border: var(--line); --pst-color-border-muted: var(--line-2); --pst-color-blockquote-notch: var(--line); --pst-color-heading: var(--ink); --pst-color-link: var(--accent-ink); --pst-color-link-hover: var(--accent); --pst-color-link-higher-contrast: var(--accent-ink); --pst-color-inline-code: var(--ink); --pst-color-target: var(--accent-soft); --pst-color-background: var(--paper); --pst-color-on-background: var(--surface); --pst-color-surface: var(--surface-2); --pst-color-on-surface: var(--ink); --pst-font-family-base: var(--font-sans); --pst-font-family-heading: var(--font-sans); --pst-font-family-monospace: var(--font-mono); } @media (prefers-color-scheme: dark) { :root { --paper: #0A1826; --surface: #0F2033; --surface-2: #13273D; --ink: #E4EDF5; --ink-2: #97A9BA; --ink-3: #64788C; --line: #1D3550; --line-2: #16293E; --accent: #5FA8E8; --accent-ink: #8CC3F2; --accent-2: #4E9BE0; --accent-soft: #10304D; --on-accent: #041526; --danger: #F0955C; --danger-soft: #33200F; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -14px rgba(0, 0, 0, .6); --shadow-lift: 0 2px 6px rgba(0, 0, 0, .35), 0 22px 54px -20px rgba(0, 0, 0, .7); } } html[data-theme="dark"] { --paper: #0A1826; --surface: #0F2033; --surface-2: #13273D; --ink: #E4EDF5; --ink-2: #97A9BA; --ink-3: #64788C; --line: #1D3550; --line-2: #16293E; --accent: #5FA8E8; --accent-ink: #8CC3F2; --accent-2: #4E9BE0; --accent-soft: #10304D; --on-accent: #041526; --danger: #F0955C; --danger-soft: #33200F; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -14px rgba(0, 0, 0, .6); --shadow-lift: 0 2px 6px rgba(0, 0, 0, .35), 0 22px 54px -20px rgba(0, 0, 0, .7); /* pst mapping, repeated at this selector's own specificity -- see the header comment on :root for why a bare :root declaration is not enough. */ --pst-color-primary: var(--accent); --pst-color-primary-bg: var(--accent-soft); --pst-color-primary-text: var(--on-accent); --pst-color-primary-highlight: var(--accent-2); --pst-color-primary-highlight-text: var(--on-accent); --pst-color-secondary: var(--accent-ink); --pst-color-secondary-bg: var(--accent-soft); --pst-color-secondary-text: var(--on-accent); --pst-color-secondary-highlight: var(--accent-2); --pst-color-secondary-highlight-text: var(--on-accent); --pst-color-accent: var(--accent); --pst-color-accent-bg: var(--accent-soft); --pst-color-info: var(--accent); --pst-color-info-bg: var(--accent-soft); --pst-color-info-text: var(--on-accent); --pst-color-info-highlight: var(--accent-2); --pst-color-info-highlight-text: var(--on-accent); --pst-color-success: var(--accent); --pst-color-success-bg: var(--accent-soft); --pst-color-success-text: var(--on-accent); --pst-color-success-highlight: var(--accent-2); --pst-color-success-highlight-text: var(--on-accent); --pst-color-warning: var(--danger); --pst-color-warning-bg: var(--danger-soft); --pst-color-warning-text: var(--on-accent); --pst-color-warning-highlight: var(--danger); --pst-color-warning-highlight-text: var(--on-accent); --pst-color-danger: var(--danger); --pst-color-danger-bg: var(--danger-soft); --pst-color-danger-text: var(--on-accent); --pst-color-danger-highlight: var(--danger); --pst-color-danger-highlight-text: var(--on-accent); --pst-color-text-base: var(--ink); --pst-color-text-muted: var(--ink-2); --pst-color-border: var(--line); --pst-color-border-muted: var(--line-2); --pst-color-blockquote-notch: var(--line); --pst-color-heading: var(--ink); --pst-color-link: var(--accent-ink); --pst-color-link-hover: var(--accent); --pst-color-link-higher-contrast: var(--accent-ink); --pst-color-inline-code: var(--ink); --pst-color-target: var(--accent-soft); --pst-color-background: var(--paper); --pst-color-on-background: var(--surface); --pst-color-surface: var(--surface-2); --pst-color-on-surface: var(--ink); --pst-font-family-base: var(--font-sans); --pst-font-family-heading: var(--font-sans); --pst-font-family-monospace: var(--font-mono); } html[data-theme="light"] { --paper: #F3F5F7; --surface: #FAFBFC; --surface-2: #FFFFFF; --ink: #0F1720; --ink-2: #43505C; --ink-3: #73808C; --line: #D5DCE2; --line-2: #E4E9EE; --accent: #14548F; --accent-ink: #0E4173; --accent-2: #114B82; --accent-soft: #E0EAF4; --on-accent: #FFFFFF; --danger: #C14E20; --danger-soft: #F7E6DD; --shadow: 0 1px 2px rgba(15, 23, 32, .04), 0 8px 24px -12px rgba(15, 23, 32, .14); --shadow-lift: 0 2px 4px rgba(15, 23, 32, .05), 0 18px 44px -18px rgba(15, 23, 32, .22); /* pst mapping, repeated at this selector's own specificity -- see the header comment on :root for why a bare :root declaration is not enough. */ --pst-color-primary: var(--accent); --pst-color-primary-bg: var(--accent-soft); --pst-color-primary-text: var(--on-accent); --pst-color-primary-highlight: var(--accent-2); --pst-color-primary-highlight-text: var(--on-accent); --pst-color-secondary: var(--accent-ink); --pst-color-secondary-bg: var(--accent-soft); --pst-color-secondary-text: var(--on-accent); --pst-color-secondary-highlight: var(--accent-2); --pst-color-secondary-highlight-text: var(--on-accent); --pst-color-accent: var(--accent); --pst-color-accent-bg: var(--accent-soft); --pst-color-info: var(--accent); --pst-color-info-bg: var(--accent-soft); --pst-color-info-text: var(--on-accent); --pst-color-info-highlight: var(--accent-2); --pst-color-info-highlight-text: var(--on-accent); --pst-color-success: var(--accent); --pst-color-success-bg: var(--accent-soft); --pst-color-success-text: var(--on-accent); --pst-color-success-highlight: var(--accent-2); --pst-color-success-highlight-text: var(--on-accent); --pst-color-warning: var(--danger); --pst-color-warning-bg: var(--danger-soft); --pst-color-warning-text: var(--on-accent); --pst-color-warning-highlight: var(--danger); --pst-color-warning-highlight-text: var(--on-accent); --pst-color-danger: var(--danger); --pst-color-danger-bg: var(--danger-soft); --pst-color-danger-text: var(--on-accent); --pst-color-danger-highlight: var(--danger); --pst-color-danger-highlight-text: var(--on-accent); --pst-color-text-base: var(--ink); --pst-color-text-muted: var(--ink-2); --pst-color-border: var(--line); --pst-color-border-muted: var(--line-2); --pst-color-blockquote-notch: var(--line); --pst-color-heading: var(--ink); --pst-color-link: var(--accent-ink); --pst-color-link-hover: var(--accent); --pst-color-link-higher-contrast: var(--accent-ink); --pst-color-inline-code: var(--ink); --pst-color-target: var(--accent-soft); --pst-color-background: var(--paper); --pst-color-on-background: var(--surface); --pst-color-surface: var(--surface-2); --pst-color-on-surface: var(--ink); --pst-font-family-base: var(--font-sans); --pst-font-family-heading: var(--font-sans); --pst-font-family-monospace: var(--font-mono); } /* ============================ Pygments (inner pages): tango/monokai override ==== * The named Pygments styles (tango/monokai, conf.py) have a fixed palette and * never read custom properties. The theme compiles them into pygments.css under * `html[data-theme=...] .highlight .KLASS` (0,3,1); every rule below repeats * that exact selector shape, and real.css loads after pygments.css, so the * equal-specificity tie goes here by source order -- no !important. * * Mapping (palette tokens only): keywords = accent-ink light / accent dark; * strings = danger; comments = ink-3; names/numbers/operators = the ink family; * errors and Generic.Deleted/Error/Traceback = danger; Generic.Inserted = * accent. Covers every short class the compiled pygments.css emits * (measured from the built CSS), not just the classes the current cpp-only * quickstart/tour snippets happen to use today. */ html[data-theme="light"] .highlight, html[data-theme="dark"] .highlight { background: var(--surface-2); } html[data-theme="dark"] .highlight { color: var(--ink); } html[data-theme="light"] .highlight .hll, html[data-theme="dark"] .highlight .hll { background-color: var(--accent-soft); } /* comments */ html[data-theme="light"] .highlight .c, html[data-theme="dark"] .highlight .c, html[data-theme="light"] .highlight .ch, html[data-theme="dark"] .highlight .ch, html[data-theme="light"] .highlight .cm, html[data-theme="dark"] .highlight .cm, html[data-theme="light"] .highlight .cp, html[data-theme="dark"] .highlight .cp, html[data-theme="light"] .highlight .cpf, html[data-theme="dark"] .highlight .cpf, html[data-theme="light"] .highlight .c1, html[data-theme="dark"] .highlight .c1, html[data-theme="light"] .highlight .cs, html[data-theme="dark"] .highlight .cs, html[data-theme="light"] .highlight .gu, html[data-theme="dark"] .highlight .gu, html[data-theme="light"] .highlight .go, html[data-theme="dark"] .highlight .go { color: var(--ink-3); font-style: italic; } /* keywords -- light: accent-ink (same convention as the landing's dark-mode-only bump); dark: accent (landing.html l.260 does the identical light->dark bump) */ html[data-theme="light"] .highlight .k, html[data-theme="light"] .highlight .kc, html[data-theme="light"] .highlight .kd, html[data-theme="light"] .highlight .kn, html[data-theme="light"] .highlight .kp, html[data-theme="light"] .highlight .kr, html[data-theme="light"] .highlight .kt, html[data-theme="light"] .highlight .ow, html[data-theme="light"] .highlight .nt { color: var(--accent-ink); font-weight: 600; } html[data-theme="dark"] .highlight .k, html[data-theme="dark"] .highlight .kc, html[data-theme="dark"] .highlight .kd, html[data-theme="dark"] .highlight .kn, html[data-theme="dark"] .highlight .kp, html[data-theme="dark"] .highlight .kr, html[data-theme="dark"] .highlight .kt, html[data-theme="dark"] .highlight .ow, html[data-theme="dark"] .highlight .nt { color: var(--accent); font-weight: 600; } /* strings */ html[data-theme="light"] .highlight .s, html[data-theme="dark"] .highlight .s, html[data-theme="light"] .highlight .sa, html[data-theme="dark"] .highlight .sa, html[data-theme="light"] .highlight .sb, html[data-theme="dark"] .highlight .sb, html[data-theme="light"] .highlight .sc, html[data-theme="dark"] .highlight .sc, html[data-theme="light"] .highlight .dl, html[data-theme="dark"] .highlight .dl, html[data-theme="light"] .highlight .sd, html[data-theme="dark"] .highlight .sd, html[data-theme="light"] .highlight .s2, html[data-theme="dark"] .highlight .s2, html[data-theme="light"] .highlight .se, html[data-theme="dark"] .highlight .se, html[data-theme="light"] .highlight .sh, html[data-theme="dark"] .highlight .sh, html[data-theme="light"] .highlight .si, html[data-theme="dark"] .highlight .si, html[data-theme="light"] .highlight .sx, html[data-theme="dark"] .highlight .sx, html[data-theme="light"] .highlight .sr, html[data-theme="dark"] .highlight .sr, html[data-theme="light"] .highlight .s1, html[data-theme="dark"] .highlight .s1, html[data-theme="light"] .highlight .ss, html[data-theme="dark"] .highlight .ss { color: var(--danger); } /* names, builtins, decorators -- bold ink */ html[data-theme="light"] .highlight .nb, html[data-theme="dark"] .highlight .nb, html[data-theme="light"] .highlight .nc, html[data-theme="dark"] .highlight .nc, html[data-theme="light"] .highlight .nf, html[data-theme="dark"] .highlight .nf, html[data-theme="light"] .highlight .ne, html[data-theme="dark"] .highlight .ne, html[data-theme="light"] .highlight .fm, html[data-theme="dark"] .highlight .fm, html[data-theme="light"] .highlight .bp, html[data-theme="dark"] .highlight .bp { color: var(--ink); font-weight: 600; } /* names, attributes, numbers, literals -- ink-2 */ html[data-theme="light"] .highlight .n, html[data-theme="dark"] .highlight .n, html[data-theme="light"] .highlight .nn, html[data-theme="dark"] .highlight .nn, html[data-theme="light"] .highlight .nx, html[data-theme="dark"] .highlight .nx, html[data-theme="light"] .highlight .na, html[data-theme="dark"] .highlight .na, html[data-theme="light"] .highlight .nd, html[data-theme="dark"] .highlight .nd, html[data-theme="light"] .highlight .ni, html[data-theme="dark"] .highlight .ni, html[data-theme="light"] .highlight .nl, html[data-theme="dark"] .highlight .nl, html[data-theme="light"] .highlight .no, html[data-theme="dark"] .highlight .no, html[data-theme="light"] .highlight .py, html[data-theme="dark"] .highlight .py, html[data-theme="light"] .highlight .nv, html[data-theme="dark"] .highlight .nv, html[data-theme="light"] .highlight .vc, html[data-theme="dark"] .highlight .vc, html[data-theme="light"] .highlight .vg, html[data-theme="dark"] .highlight .vg, html[data-theme="light"] .highlight .vi, html[data-theme="dark"] .highlight .vi, html[data-theme="light"] .highlight .vm, html[data-theme="dark"] .highlight .vm, html[data-theme="light"] .highlight .l, html[data-theme="dark"] .highlight .l, html[data-theme="light"] .highlight .ld, html[data-theme="dark"] .highlight .ld, html[data-theme="light"] .highlight .m, html[data-theme="dark"] .highlight .m, html[data-theme="light"] .highlight .mb, html[data-theme="dark"] .highlight .mb, html[data-theme="light"] .highlight .mf, html[data-theme="dark"] .highlight .mf, html[data-theme="light"] .highlight .mh, html[data-theme="dark"] .highlight .mh, html[data-theme="light"] .highlight .mi, html[data-theme="dark"] .highlight .mi, html[data-theme="light"] .highlight .mo, html[data-theme="dark"] .highlight .mo, html[data-theme="light"] .highlight .il, html[data-theme="dark"] .highlight .il { color: var(--ink-2); } /* operators, punctuation, whitespace, plain generic/other text -- ink */ html[data-theme="light"] .highlight .o, html[data-theme="dark"] .highlight .o, html[data-theme="light"] .highlight .p, html[data-theme="dark"] .highlight .p, html[data-theme="light"] .highlight .pm, html[data-theme="dark"] .highlight .pm, html[data-theme="light"] .highlight .w, html[data-theme="dark"] .highlight .w, html[data-theme="light"] .highlight .g, html[data-theme="dark"] .highlight .g, html[data-theme="light"] .highlight .x, html[data-theme="dark"] .highlight .x, html[data-theme="light"] .highlight .esc, html[data-theme="dark"] .highlight .esc, html[data-theme="light"] .highlight .ge, html[data-theme="dark"] .highlight .ge, html[data-theme="light"] .highlight .ges, html[data-theme="dark"] .highlight .ges, html[data-theme="light"] .highlight .gs, html[data-theme="dark"] .highlight .gs, html[data-theme="light"] .highlight .gh, html[data-theme="dark"] .highlight .gh, html[data-theme="light"] .highlight .gp, html[data-theme="dark"] .highlight .gp { color: var(--ink); } /* errors / deleted / diff-error -- danger; inserted -- accent */ html[data-theme="light"] .highlight .err, html[data-theme="dark"] .highlight .err, html[data-theme="light"] .highlight .gd, html[data-theme="dark"] .highlight .gd, html[data-theme="light"] .highlight .gr, html[data-theme="dark"] .highlight .gr, html[data-theme="light"] .highlight .gt, html[data-theme="dark"] .highlight .gt { color: var(--danger); } html[data-theme="light"] .highlight .gi, html[data-theme="dark"] .highlight .gi { color: var(--accent); } /* line numbers (when :emphasize-lines: / linenos is used) */ html[data-theme="light"] .highlight span.linenos, html[data-theme="dark"] .highlight span.linenos, html[data-theme="light"] .highlight td.linenos .normal, html[data-theme="dark"] .highlight td.linenos .normal { color: var(--ink-3); } /* ============================ Features matrix =================================== * `.feature-status` is the badge span the {features} directive emits. Palette * tokens only: supported -> --accent, extension -> --accent-ink, * excluded-by-design -> --danger (row additionally tinted --danger-soft: the * closed door should read as deliberate, not as a gap), planned -> --ink-3. */ .feature-category__title { color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: .3rem; margin-top: 2rem; } .feature-table .feature-status { display: inline-block; font-family: var(--font-mono); font-size: .78rem; font-weight: 600; line-height: 1.4; padding: .1rem .6rem; border-radius: 100px; border: 1px solid currentColor; white-space: nowrap; } .feature-table .feature-status.supported { color: var(--accent); } .feature-table .feature-status.extension { color: var(--accent-ink); } .feature-table .feature-status.excluded-by-design { color: var(--danger); } .feature-table .feature-status.planned { color: var(--ink-3); } .feature-table .feature-pattern { color: var(--ink-2); } .feature-table tr.feature-row--excluded-by-design, .feature-table tr.feature-row--excluded-by-design > td { background: var(--danger-soft); } /* Dropping the sidebars (conf.py) is not enough: the theme caps the article * column at 60em and flex-centers it, so a sidebar-less page just gets wider * gutters. :has() scopes the un-capping to the one page holding the table; * every other page keeps its 60em prose measure. */ .bd-main .bd-content .bd-article-container:has(.feature-table) { max-width: 100%; } /* Block spacing so full-width category tables don't read as one slab. */ .feature-table { margin-top: .5rem; margin-bottom: 1.5rem; } /* ============================ Breathe / C++ domain ============================ * The curated /reference/ pages dump Breathe signatures. Keep them readable: * wrap long templates, quiet the Doxygen [in] classifiers, and give parameter * lists the same ink as the rest of the page. */ dl.cpp dt, dl.cpp dd, .sig { overflow-wrap: anywhere; } .sig { font-family: var(--font-mono); font-size: .9em; } dl.field-list > dt { color: var(--ink-2); font-weight: 600; } dl.field-list .classifier { color: var(--ink-3); font-weight: 400; } /* ============================ bespoke landing blocks ============================ * Scoped under .real-landing so nothing here leaks onto other pages (api/index.rst * etc.) that use the theme's own prose/typography untouched. */ .real-landing .eyebrow { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .04em; color: var(--accent-ink); display: inline-flex; gap: .5ch; align-items: baseline; } .real-landing .eyebrow::before { content: "//"; color: var(--ink-3); } .real-landing .mono { font-family: var(--font-mono); } .real-landing .hero { padding: clamp(1.6rem, 4vw, 3rem) 0 clamp(1.4rem, 3vw, 2rem); } .real-landing .hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3.4rem); align-items: center; } .real-landing .hero h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.1rem); font-weight: 720; line-height: 1.1; letter-spacing: -0.02em; margin: .7rem 0 0; max-width: 15ch; color: var(--ink); } .real-landing .hero__lead { color: var(--ink-2); font-size: 1.15rem; margin-top: 1.1rem; max-width: 46ch; line-height: 1.55; } .real-landing .hero__lead b { color: var(--ink); font-weight: 600; } .real-landing .hero__cmd { margin-top: 1.5rem; display: flex; gap: .5rem; max-width: 430px; } .real-landing .cmd { flex: 1; font-family: var(--font-mono); font-size: .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: .6rem .85rem; color: var(--ink); } .real-landing .cmd .prompt { color: var(--accent); } .real-landing .hero__alt { margin-top: .7rem; font-size: .85rem; color: var(--ink-3); font-family: var(--font-mono); } .real-landing .hero__cta { margin-top: 1.5rem; display: flex; gap: .7rem; flex-wrap: wrap; } .real-landing .btn { display: inline-flex; align-items: center; gap: .5ch; font-weight: 560; font-size: .98rem; padding: .68rem 1.1rem; border-radius: var(--radius-s); border: 1px solid transparent; text-decoration: none !important; transition: transform .12s ease, box-shadow .2s ease, background .2s ease; } .real-landing .btn--primary { background: var(--accent); color: var(--on-accent) !important; box-shadow: var(--shadow); } .real-landing .btn--primary:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: var(--shadow-lift); } .real-landing .btn--ghost { background: transparent; color: var(--ink) !important; border-color: var(--line); } .real-landing .btn--ghost:hover { border-color: var(--ink-3); transform: translateY(-1px); } .real-landing .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .real-landing .panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line-2); } .real-landing .panel__head .t { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-2); } .real-landing .panel__head .pat { font-family: var(--font-mono); font-size: .78rem; color: var(--danger); background: var(--danger-soft); padding: .12rem .5rem; border-radius: 5px; } .real-landing .chartbox { position: relative; padding: .4rem .4rem 0; } .real-landing canvas#curve { display: block; width: 100%; height: 220px; } .real-landing .legend { display: flex; gap: 1.2rem; padding: .55rem 1rem 1rem; flex-wrap: wrap; } .real-landing .legend .k { display: inline-flex; align-items: center; gap: .5ch; font-size: .8rem; color: var(--ink-2); font-family: var(--font-mono); } .real-landing .legend .dot { width: 9px; height: 9px; border-radius: 50%; } .real-landing .legend .dot.a { background: var(--accent); } .real-landing .legend .dot.d { background: var(--danger); } @media (max-width: 900px) { .real-landing .hero__grid { grid-template-columns: 1fr; } .real-landing .panel { order: -1; } } @media (max-width: 560px) { .real-landing .hero__cmd { flex-direction: column; } } /* the cliff comparison */ .real-landing .cliff { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; margin-top: 1.4rem; } .real-landing .cliff__pat { font-family: var(--font-mono); font-size: 1.02rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: .85rem 1rem; display: inline-block; color: var(--ink); } .real-landing .cliff__pat .hl { color: var(--danger); } .real-landing .cliff__note { color: var(--ink-2); margin-top: 1rem; max-width: 44ch; } .real-landing .versus { display: grid; gap: .8rem; } .real-landing .vrow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.1rem; } .real-landing .vrow .who { font-weight: 580; color: var(--ink); } .real-landing .vrow .who small { display: block; font-weight: 400; color: var(--ink-3); font-family: var(--font-mono); font-size: .78rem; margin-top: 2px; } .real-landing .vrow .bar { height: 8px; border-radius: 100px; background: var(--line-2); position: relative; overflow: hidden; } .real-landing .vrow .bar i { position: absolute; inset: 0 auto 0 0; border-radius: 100px; } .real-landing .vrow.bad .bar i { width: 100%; background: var(--danger); } .real-landing .vrow.good .bar i { width: 7%; background: var(--accent); } .real-landing .vrow .val { font-family: var(--font-mono); font-size: .9rem; white-space: nowrap; } .real-landing .vrow.bad .val { color: var(--danger); } .real-landing .vrow.good .val { color: var(--accent-ink); } @media (max-width: 900px) { .real-landing .cliff { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .real-landing * { animation: none !important; transition: none !important; } }