/* WISER branding for Material for MkDocs. Shared by every space; copied into each site's docs/brand/ by convert.py. Three goals: 1. Brand red (#EF3C42) as the primary/accent color. 2. A clean, bannerless header + tabs that blend into the page background instead of showing a colored top bar. 3. Dark (slate) surfaces ramped off the brand dark #242944. Loaded via `extra_css` (after the theme bundle), so these definitions win. */ /* --- brand palette ------------------------------------------------------- */ /* Scoped to the scheme attribute (on ) so it overrides the theme's generated [data-md-color-primary] values, which live on the same element. */ [data-md-color-scheme="default"] { --md-primary-fg-color: #EF3C42; /* brand red */ --md-primary-fg-color--light: #f26d72; /* lighter tint (header gradient) */ --md-primary-fg-color--dark: #c9282e; /* darker shade (hover/active) */ --md-accent-fg-color: #EF3C42; --md-typeset-a-color: #EF3C42; /* links: brand red per request. NOTE: ~3.9:1 on white — just under WCAG AA (4.5:1) for body text. For AA-compliant links swap in #c9282e (~5.5:1). */ } [data-md-color-scheme="slate"] { --md-primary-fg-color: #EF3C42; /* brand red */ --md-primary-fg-color--light: #f26d72; --md-primary-fg-color--dark: #c9282e; --md-accent-fg-color: #EF3C42; --md-typeset-a-color: #EF3C42; /* links: brand red per request. NOTE: ~3.7:1 on the dark bg — just under AA. For AA swap in #f26d72. */ /* Dark surfaces ramped off the brand dark #242944 (hsl 231° 31%). The page sits one shade below the brand dark for a deeper background; #242944 itself becomes the first raised-surface tint. Lighter steps are borders and row hovers; code and footer recede darker still. Material's slate text colors are white-opacity based, so they read on all of these. */ --md-default-bg-color: #1c2035; /* base: page + header/tabs */ --md-default-bg-color--light: #242944; /* brand dark; raised surface */ --md-default-bg-color--lighter: #292f52; /* borders, dividers */ --md-default-bg-color--lightest: #32395f; /* strongest tint */ --md-code-bg-color: #16192a; /* code blocks: recessed panel */ --md-footer-bg-color: #16192a; --md-footer-bg-color--dark: #10121e; } /* --- clean header: match the page background ----------------------------- */ .md-header, .md-tabs { background-color: var(--md-default-bg-color); color: var(--md-default-fg-color); } /* Subtle divider so the header is still delineated at the top of the page; Material swaps in a drop shadow once the user scrolls. */ .md-header { border-bottom: 1px solid var(--md-default-fg-color--lightest); box-shadow: none; transition: color 250ms, background-color 250ms, box-shadow 250ms, border-color 250ms; } .md-header--shadow { border-bottom-color: transparent; box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.4rem rgba(0, 0, 0, 0.1); } /* Search box: legible on a light header (it defaults to a tint of the old colored bar). */ .md-search__input { background-color: var(--md-default-fg-color--lightest); color: var(--md-default-fg-color); } .md-search__input::placeholder { color: var(--md-default-fg-color--light); } .md-search__input + .md-search__icon { color: var(--md-default-fg-color--light); } /* --- steppers ------------------------------------------------------------ */ /* convert.py wraps each GitBook {% stepper %} in

around a plain numbered list. Here we hide the native numbering and draw a brand badge + a vertical connector line per step, restoring the GitBook look. Everything is scoped with `>` so nested lists and ordinary numbered lists elsewhere on the page are untouched. Uses Material CSS variables, so it is correct in both light and dark schemes. */ .md-typeset .steps > ol { counter-reset: step; list-style: none; margin-left: 0; padding-left: 0; } .md-typeset .steps > ol > li { counter-increment: step; position: relative; margin-left: 0; padding-left: 2.2rem; padding-bottom: 0.9rem; } /* the numbered badge */ .md-typeset .steps > ol > li::before { content: counter(step); position: absolute; left: 0; top: 0.05em; width: 1.6rem; height: 1.6rem; border-radius: 50%; background-color: var(--md-primary-fg-color); color: var(--md-primary-bg-color, #fff); font-size: 0.8rem; font-weight: 700; line-height: 1.6rem; text-align: center; z-index: 1; } /* the vertical connector line joining consecutive badges */ .md-typeset .steps > ol > li:not(:last-child)::after { content: ""; position: absolute; left: calc(0.8rem - 1px); top: 1.6rem; bottom: -0.6rem; width: 2px; background-color: var(--md-default-fg-color--lightest); } /* align the step's first block with the badge, and drop the last step's trailing space so the box closes cleanly */ .md-typeset .steps > ol > li > :first-child { margin-top: 0; } .md-typeset .steps > ol > li:last-child { padding-bottom: 0; } /* --- video embeds -------------------------------------------------------- */ /* convert.py turns {% embed %} YouTube URLs into