/* User Provided Stylesheet */
/* ==========================================================================
x4c homepage design system (Jupyter Book 2 / MyST book-theme)
Loaded via `site.options.style` in myst.yml. Scoped to .x4c-* classes so it
only affects the homepage blocks and never fights the theme's own layout.
book-theme toggles dark mode with a `dark` class on , so every token
below has a `.dark` counterpart.
========================================================================== */
:root {
--x4c-blue-900: #070c13;
--x4c-blue-800: #0f1d33;
--x4c-blue-700: #10559e;
--x4c-blue-500: #2f80d2;
--x4c-blue-300: #7dc3ff;
--x4c-blue-200: #b5ddff;
--x4c-accent: var(--x4c-blue-700);
--x4c-accent-soft: rgba(16, 85, 158, 0.10);
--x4c-surface: #ffffff;
--x4c-border: #dde5ef;
--x4c-text: #1a1f27;
--x4c-muted: #64707f;
--x4c-shadow: 0 1px 2px rgba(10, 18, 30, .06), 0 8px 24px rgba(10, 18, 30, .06);
--x4c-shadow-lift: 0 2px 4px rgba(10, 18, 30, .08), 0 16px 40px rgba(10, 18, 30, .14);
}
html.dark {
--x4c-accent: var(--x4c-blue-300);
--x4c-accent-soft: rgba(125, 195, 255, 0.14);
--x4c-surface: #101b2b;
--x4c-border: #22334a;
--x4c-text: #e8eef6;
--x4c-muted: #8ea3bc;
--x4c-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
--x4c-shadow-lift: 0 2px 4px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.5);
}
/* --------------------------------------------------------------------------
Header: the site title as text.
`logo`/`logo_dark` are unset in myst.yml so no image is rendered here; the
logo lives in the sidebar instead. Only the wordmark is styled.
-------------------------------------------------------------------------- */
.myst-home-link > span {
font-weight: 600;
letter-spacing: -.01em;
}
/* --------------------------------------------------------------------------
Sidebar header: the logo replaces the site-title link.
The first item in the sidebar table of contents is the root-page link, which
the theme labels with the project title. Its text is pushed out of view and
the logo drawn behind it at 80% of the sidebar width.
Two deliberate choices:
- `:first-child`, not `a[href="/"]`: on a Pages deploy BASE_URL rewrites that
href to "/x4c/", so an href selector would silently stop matching.
- a RELATIVE background url: the stylesheet lives at /build/style-*.css, so
../assets/ resolves correctly both locally and under BASE_URL.
The logo is 2420x2416 (square), so at 100% width its height equals the
container width -- hence padding-bottom: 100%.
-------------------------------------------------------------------------- */
.myst-primary-sidebar-toc .myst-toc > a:first-child {
display: block;
height: 0;
padding: 0 0 100% 0;
margin: .25rem 0 1.25rem;
overflow: hidden;
white-space: nowrap;
text-indent: -9999px; /* hides the label, keeps it for screen readers */
/* 600px, 256-colour copy of x4c-logo.png: 21K vs 625K, and still 2x the
~300px the sidebar renders it at. Regenerate with scripts/make_web_logo.py. */
background-image: url(assets/x4c-logo-web.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
border-radius: 0;
}
.myst-primary-sidebar-toc .myst-toc > a:first-child:hover {
background-color: transparent;
}
/* --------------------------------------------------------------------------
Site footer (site.parts.footer -> footer.md)
-------------------------------------------------------------------------- */
.myst-site-footer,
footer .myst-content {
font-size: .85rem;
line-height: 1.55;
color: var(--x4c-muted);
}
/* --------------------------------------------------------------------------
MyST integration.
MyST rewrites the raw HTML on its way out: it appends its own `link` class to
anchors and injects `style="margin-left:auto;margin-right:auto"` plus an id on
every ![]()
. Neutralise those here so the card layouts do not depend on the
theme's link and image defaults.
NOTE for editing index.md: keep raw HTML indented by at most 2 spaces. A blank
line ends an HTML block, and any following line indented 4+ spaces becomes an
indented CODE block -- which silently rendered the whole gallery as escaped
source inside until it was fixed.
-------------------------------------------------------------------------- */
.x4c-shot.link,
.x4c-navcard.link {
text-decoration: none;
color: inherit;
}
.x4c-shot img,
.x4c-navcard img,
.x4c-hero-shot img {
margin-top: 0;
margin-bottom: 0;
}
/* --------------------------------------------------------------------------
Figure plates.
Every figure in this corpus is an opaque-white matplotlib PNG. On a dark page
they glare as bright rectangles, so pin them to white in BOTH themes and give
the dark variant a soft edge so it doesn't read as a harsh cutout.
-------------------------------------------------------------------------- */
.x4c-hero-shot img,
.x4c-shot img {
background: #fff;
}
html.dark .x4c-hero-shot img,
html.dark .x4c-shot img {
box-shadow: 0 0 0 1px rgba(255, 255, 255, .10);
}
/* ==========================================================================
HERO
========================================================================== */
.x4c-hero {
position: relative;
border-radius: 16px;
overflow: hidden;
padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3rem) clamp(2.5rem, 5vw, 3.5rem);
margin: 0 0 3rem;
text-align: center;
color: #e8eef6;
background:
radial-gradient(900px 420px at 50% -10%, rgba(125, 195, 255, .20), transparent 62%),
linear-gradient(168deg, var(--x4c-blue-800) 0%, var(--x4c-blue-900) 62%);
}
/* faint grid, so the gradient reads as a surface rather than a flat wash */
.x4c-hero::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
background-size: 56px 56px;
-webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
pointer-events: none;
}
.x4c-hero > * { position: relative; }
.x4c-hero h1 {
font-size: clamp(2.5rem, 7vw, 4rem);
font-weight: 800;
letter-spacing: -.035em;
line-height: 1.02;
margin: 0 0 .6rem;
color: #fff;
border: none;
}
.x4c-tagline {
font-size: clamp(1rem, 2.2vw, 1.25rem);
color: #b3c2d4;
max-width: 40rem;
margin: 0 auto 1.75rem;
line-height: 1.55;
}
.x4c-tagline strong { color: #fff; font-weight: 600; }
/* --- install pill --------------------------------------------------------- */
.x4c-install {
display: inline-flex;
align-items: center;
gap: .85rem;
background: rgba(255,255,255,.055);
border: 1px solid rgba(255,255,255,.14);
border-radius: 10px;
padding: .55rem .65rem .55rem 1rem;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
font-size: .95rem;
color: #dfe9f5;
}
.x4c-install .x4c-prompt { color: var(--x4c-blue-300); user-select: none; }
.x4c-install button {
all: unset;
cursor: pointer;
padding: .28rem .5rem;
border-radius: 6px;
font-size: .78rem;
color: #a7b8cc;
transition: background .15s ease, color .15s ease;
}
.x4c-install button:hover { background: rgba(255,255,255,.10); color: #fff; }
.x4c-install button.copied { color: var(--x4c-blue-300); }
/* --- CTAs ----------------------------------------------------------------- */
.x4c-cta {
display: flex;
gap: .7rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 1.5rem;
}
.x4c-cta a {
display: inline-flex;
align-items: center;
padding: .65rem 1.3rem;
border-radius: 8px;
font-weight: 600;
font-size: .95rem;
text-decoration: none;
transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.x4c-cta a:hover { transform: translateY(-1px); text-decoration: none; }
.x4c-cta .x4c-btn-primary { background: var(--x4c-blue-300); color: var(--x4c-blue-900); }
.x4c-cta .x4c-btn-primary:hover { background: var(--x4c-blue-200); }
.x4c-cta .x4c-btn-ghost {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.16);
color: #dde7f2;
}
.x4c-cta .x4c-btn-ghost:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.28); }
/* --- hero figure ---------------------------------------------------------- */
.x4c-hero-shot {
margin: clamp(2rem, 5vw, 3rem) auto 0;
/* Source is 592px wide. Cap close to native so it is not upscaled into blur. */
max-width: 700px;
}
.x4c-hero-shot img {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 24px 60px rgba(0,0,0,.55);
}
.x4c-hero-code {
margin-top: 1rem;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
font-size: .84rem;
color: #8fa3ba;
}
.x4c-hero-code code {
color: var(--x4c-blue-200);
background: none;
padding: 0;
border: none;
}
/* ==========================================================================
Section headings
========================================================================== */
.x4c-section { margin: 5.5rem 0 0; }
.x4c-section h2 {
font-size: clamp(1.35rem, 2.6vw, 1.75rem);
font-weight: 700;
letter-spacing: -.02em;
margin: 1.5rem 0 .4rem;
}
.x4c-section p.x4c-lede {
color: var(--x4c-muted);
margin: 0 0 1.75rem;
}
/* ==========================================================================
Gallery
========================================================================== */
.x4c-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 1.1rem;
}
.x4c-shot {
display: block;
text-decoration: none;
background: var(--x4c-surface);
border: 1px solid var(--x4c-border);
border-radius: 12px;
overflow: hidden;
box-shadow: var(--x4c-shadow);
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.x4c-shot:hover {
transform: translateY(-4px);
box-shadow: var(--x4c-shadow-lift);
border-color: var(--x4c-accent);
text-decoration: none;
}
.x4c-shot img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: contain;
display: block;
/* deeper bottom pad so the figure is not crowded against the dividing rule */
padding: .6rem .6rem .9rem;
margin: 0;
}
.x4c-shot-meta {
padding: .9rem 1rem 1rem;
border-top: 1px solid var(--x4c-border);
}
.x4c-shot-title {
font-weight: 600;
font-size: .94rem;
color: var(--x4c-text);
margin-bottom: .35rem;
}
.x4c-shot-code {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
font-size: .75rem;
color: var(--x4c-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ==========================================================================
User-guide nav cards -- recovers the docsrc_bak (sphinx-design) homepage look.
The original geometry, from docsrc_bak/_static/{style,theme_overrides}.css:
.sd-card-img-top width 15%, absolutely positioned, vertically centred,
padding-left 10px, min-width 50px
.custom-title bold, left aligned
.custom-body left aligned, margin-left max(45px, 15%)
i.e. a small icon floating at the left with the text indented past it.
Reproduced here 1:1, except the title colour: the original #283618 olive is
replaced by the blue accent.
========================================================================== */
.x4c-navgrid {
display: grid;
/* the original was `{grid} 1 1 2 2` with `:gutter: 2` */
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: .75rem;
margin: 1.5rem 0 0;
}
.x4c-navcard {
/* The icon is absolutely positioned, so the text offset must be derived from
the icon's own width -- not an independently-written percentage. The original
used `width: 15%` against `margin-left: max(45px, 15%)`, which overlapped by
~3px at every card width because the two percentages resolve against
different boxes (padding box vs content box). */
--x4c-icon-w: max(52px, 15%);
--x4c-icon-left: 10px;
--x4c-icon-gap: 1rem;
position: relative;
display: block;
padding: 1.15rem 1.15rem 1.15rem 0;
min-height: 96px;
background: var(--x4c-surface);
border: 1px solid var(--x4c-border);
border-radius: 10px;
text-decoration: none;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.x4c-navcard:hover {
transform: translateY(-3px);
box-shadow: var(--x4c-shadow-lift);
border-color: var(--x4c-accent);
text-decoration: none;
}
.x4c-navcard img {
width: var(--x4c-icon-w);
height: auto;
position: absolute;
left: var(--x4c-icon-left);
top: 50%;
transform: translateY(-50%);
margin: 0;
}
/* Both text rows clear the icon by exactly --x4c-icon-gap. */
.x4c-navcard-title,
.x4c-navcard-body {
text-align: left;
margin-left: calc(var(--x4c-icon-left) + var(--x4c-icon-w) + var(--x4c-icon-gap));
}
.x4c-navcard-title {
font-weight: bold;
color: var(--x4c-accent);
margin-bottom: .3rem;
}
.x4c-navcard-body {
color: var(--x4c-muted);
font-size: .92rem;
line-height: 1.5;
}
/* ==========================================================================
Feature / nav cards
========================================================================== */
.x4c-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.1rem;
}
.x4c-card {
display: block;
text-decoration: none;
color: inherit;
padding: 1.4rem;
background: var(--x4c-surface);
border: 1px solid var(--x4c-border);
border-radius: 12px;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.x4c-card:hover {
transform: translateY(-3px);
box-shadow: var(--x4c-shadow-lift);
border-color: var(--x4c-accent);
text-decoration: none;
}
.x4c-card-icon {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 8px;
background: var(--x4c-accent-soft);
color: var(--x4c-accent);
margin-bottom: .85rem;
font-size: 1.05rem;
}
.x4c-card h3 {
font-size: 1rem;
font-weight: 600;
margin: 0 0 .3rem;
color: var(--x4c-text);
border: none;
}
.x4c-card p {
margin: 0;
color: var(--x4c-muted);
font-size: .9rem;
line-height: 1.55;
}