/* Rakkas - the display face docs/landing.html's and docs/walkthrough.html's h1.wordmark
use - loaded here too so the mkdocs header's site title (below) can be set in the exact
same face, not just a similar color. @import must precede every other rule in the file. */
@import url("https://fonts.googleapis.com/css2?family=Rakkas&display=swap");
/* Material's own slate-scheme base (`--md-default-bg-color: hsla(225,15%,14%,1)`) is
noticeably lighter than docs/landing.html's and docs/walkthrough.html's `--bg:
#090B14` - so the identical pattern opacity below still read visibly *brighter* here,
since the same faint lines sit on a lighter canvas. Overriding the variable itself
(not just `body`'s own background-color) is what actually fixes that: every other
Material component that shows this color through transparency (`.md-nav__list`,
`.md-search__form`, `.md-select__inner`, ...) picks it up too, so the whole site
matches, not just the page body. Loaded last (extra_css always comes after Material's
own stylesheets - see the generated order), so this same-specificity selector
wins by cascade order without needing `!important`. */
[data-md-color-scheme="slate"] {
--md-default-bg-color: #090b14;
}
/* Same ambient Persian girih tilework as docs/landing.html and docs/walkthrough.html
(two squares, one rotated 45deg, into an eight-pointed star, at two nested scales) -
reused here as two tiled background images rather than an inline element, since
extra_css can't inject markup, only styles. Placed on `body` specifically: Material's
own `.md-container`/`.md-content__inner`/desktop `.md-sidebar` set no background-color
of their own (confirmed against the compiled theme CSS) - only `body` itself and the
sticky header do - so this shows straight through the whole content area and the
desktop nav/toc columns without needing to touch Material's own component styles at
all. Colors and opacity (0.13 / 0.07) are the exact same dark-theme values
docs/walkthrough.html uses - this site only ever renders in Material's "slate" scheme
(see mkdocs.yml), so there's no light-mode variant to also account for. */
body {
background-image: url("girih.svg"), url("girih-lg.svg");
background-repeat: repeat, repeat;
background-size: 96px 96px, 288px 288px;
background-attachment: fixed, fixed;
}
/* The header/tabs bar (`primary: black` in mkdocs.yml) render as a flat, slightly
darker version of the same neutral hue everything else uses - correct, but next to
the pattern + gold-accented content below it read as a plain, unbranded band sitting
on top of the page rather than part of it. Two fixes, both non-destructive (no
background-color override - Material's own tone stays, this only adds to it):
1. The exact same two pattern layers, `background-attachment: fixed` here too so the
texture is phase-aligned with body's and reads as one continuous canvas across the
header/content boundary, not a second, misaligned copy.
2. A soft gold line + glow along the bottom edge, echoing the wordmark's own
text-shadow glow (see h1.wordmark below) instead of a plain hard edge. */
.md-header,
.md-tabs {
background-image: url("girih.svg"), url("girih-lg.svg");
background-repeat: repeat, repeat;
background-size: 96px 96px, 288px 288px;
background-attachment: fixed, fixed;
}
.md-header {
box-shadow: 0 1px 0 rgba(232, 182, 98, 0.35), 0 12px 26px -16px rgba(232, 182, 98, 0.3);
}
/* The site title ("raaz", top-left of the header) in the exact same face/color/glow
treatment as the hero wordmark on docs/landing.html and docs/walkthrough.html -
literally the logo, not just a color borrowed from it. Scoped to the *first*
`.md-header__topic` only (the site name) - the second one is Material's own "current
page" indicator that fades in on scroll, and stays in the default sans face since
it's a functional nav aid, not a brand mark. */
.md-header__ellipsis > .md-header__topic:first-child .md-ellipsis {
font-family: "Rakkas", "Fraunces", Georgia, serif;
font-size: 1.2rem;
letter-spacing: 0.01em;
color: #e8b662;
text-shadow: 0 0 10px rgba(232, 182, 98, 0.5), 0 0 22px rgba(86, 199, 178, 0.25);
}
/* The default Material book icon next to it (also the header's only "go home" link -
left alone otherwise, not hidden) inherits its color from `.md-header`'s near-white
text color via `fill: currentcolor` - recolored to match rather than left as a plain
white icon sitting next to a warm gold wordmark. */
.md-header .md-logo {
color: #e8b662;
}
/* Material's default syntax palette only colors a handful of Pygments token
types (string/number/keyword/etc) - real shell strings, sure, but almost
none of raaz's own usage strings tokenize as any of those. `raaz push
[--app] [--dir ]` is mostly the bash lexer's plain, unclassed "Text"
token (no span at all), which inherits a flat, low-saturation gray -
exactly why every code block on this site read as monochrome regardless
of the chosen pygments_style (Material overrides raw Pygments colors with
its own --md-code-hl-*-color variables anyway, which don't touch unclassed
text at all). Fixed by giving the *base* code color a real hue too, not
just the few token classes that happen to match. Colors reused from
elsewhere in this project rather than picked arbitrarily where reasonable:
the mint green is raaz share's own --accent, the red is the walkthrough
demo's contrast-fixed action color. Comments are deliberately muted rather
than reusing an established accent - they're a secondary aside, not the
point of the line, so they should recede rather than compete for
attention. */
.md-typeset .highlight pre code,
.md-typeset .highlight pre code .n,
.md-typeset .highlight pre code .nv,
.md-typeset .highlight pre code .na {
color: #e0785a;
}
/* Deliberately muted, not vibrant - a comment is a secondary aside, not the
point of the line, so it should recede next to the command text (coral)
and read quietly rather than compete for attention. */
.md-typeset .highlight .c,
.md-typeset .highlight .c1,
.md-typeset .highlight .cm {
color: #7a8699;
}
.md-typeset .highlight .s,
.md-typeset .highlight .s1,
.md-typeset .highlight .s2,
.md-typeset .highlight .sb {
color: #6ee7b7;
}
.md-typeset .highlight .p,
.md-typeset .highlight .o {
color: #82aaff;
}
.md-typeset .highlight .m,
.md-typeset .highlight .mi,
.md-typeset .highlight .mf {
color: #ff9d5c;
}
.md-typeset .highlight .k,
.md-typeset .highlight .kc,
.md-typeset .highlight .kd,
.md-typeset .highlight .kn,
.md-typeset .highlight .kp,
.md-typeset .highlight .kr {
color: #ff79c6;
}
/* Inline code spans (the shaded pills for `app`, `.env`, `raaz push`, etc. -
everywhere except inside a fenced code block, which the rules above already
color per-token) had the same flat gray text as regular prose, just with a
background tint - no color of its own at all. This rule is deliberately
lower-specificity than every ".highlight ..." rule above (fewer compound
selectors), so it only ever applies where none of those match.
A warm gold rather than reusing any of the code-block token colors above -
ties to the brand's own amber/gold (the logo, the mkdocs accent color)
instead of introducing a color that also means something else (e.g. mint
is already "string" inside a code block) - first pass used that mint for
inline code too and it read as awkward/harder to read in running prose. */
.md-typeset code {
color: #e8c07d;
}