/* ========================================================================== Sesam theme — emerald, clay, gold (inspired by the Ali Baba logo) ========================================================================== */ /* --- Fonts --- */ @import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;600;700&family=JetBrains+Mono:wght@400;500;700&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap"); /* --- Palette tokens --- Declare both light and dark tokens, then set active tokens to the light variants by default. Selectors target all mdBook theme classes so our tokens always win over the stock stylesheet. */ :root, html.light, html.rust, html.navy, html.coal, html.ayu { /* Light palette */ --l-emerald: #2d6e3f; --l-emerald-hover: #3a7d4e; --l-emerald-muted: #5a9e6e; --l-gold: #b8963e; --l-gold-light: #d4b56a; --l-clay: #c4a265; --l-orange: #d4880c; --l-page-bg: #f8f5ef; --l-sidebar-bg: #f4f0e8; --l-surface: #f4f1eb; --l-surface-alt: #f0ebe0; --l-border-subtle: #ddd5c5; --l-border-faint: #e5dfd2; --l-divider: #e5ddc9; --l-text: #2c2c2c; --l-text-muted: #9a9a9a; --l-pod-lattice: url("../pod-lattice.svg"); --l-arabic: url("../arabic-pattern.svg"); --l-logo-inner: #f8f5ef; --l-term-bg: #fbf9f4; /* day sky: flat page-bg behind the upper content, a barely-there cool dip, then warm sand toward the bottom of the viewport (subtle — readability first). Ported from the landing page. */ --l-sky: linear-gradient(to bottom, var(--l-page-bg) 0%, var(--l-page-bg) 55%, #eef1ee 80%, #f2ebda 100%); /* syntax palette (light): emerald keyword anchor, gold/clay/teal accents */ --l-code-comment: #9c9482; --l-code-keyword: #2d6e3f; --l-code-builtin: #2f8f7d; --l-code-string: #5f7d3a; --l-code-number: #b5683c; --l-code-literal: #b5683c; --l-code-attr: #97701f; --l-code-variable: #9a5a2b; --l-code-meta: #2d6e3f; --l-code-addition: #3a7d4e; --l-code-deletion: #a23a2a; /* Dark palette */ --d-emerald: #6fc088; --d-emerald-hover: #8cd4a3; --d-emerald-muted: #4a9566; --d-gold: #d4b56a; --d-gold-light: #e8cd88; --d-clay: #b8955c; --d-orange: #e8a040; --d-page-bg: #1e1c17; --d-sidebar-bg: #16140f; --d-surface: #272319; --d-surface-alt: #2c2820; --d-border-subtle: #3d3628; --d-border-faint: #332d22; --d-divider: #2e2a20; --d-text: #e8e3d8; --d-text-muted: #8a8476; --d-pod-lattice: url("../pod-lattice-dark.svg"); --d-arabic: url("../arabic-pattern-dark.svg"); --d-logo-inner: #1e1c17; --d-term-bg: #16140f; /* night sky: page-bg up top, deepening into a faint indigo/violet twilight toward the bottom of the viewport */ --d-sky: linear-gradient(to bottom, var(--d-page-bg) 0%, var(--d-page-bg) 50%, #221f33 82%, #2a2236 100%); /* syntax palette (dark): brighter brand hues that read on the dark surface */ --d-code-comment: #837c6b; --d-code-keyword: #6fc088; --d-code-builtin: #5ec9b4; --d-code-string: #b6c987; --d-code-number: #d99a6a; --d-code-literal: #d99a6a; --d-code-attr: #e8cd88; --d-code-variable: #d6a878; --d-code-meta: #6fc088; --d-code-addition: #8cd4a3; --d-code-deletion: #e58a78; /* Active tokens (default = light) */ --sesam-emerald: var(--l-emerald); --sesam-emerald-hover: var(--l-emerald-hover); --sesam-emerald-muted: var(--l-emerald-muted); --sesam-gold: var(--l-gold); --sesam-gold-light: var(--l-gold-light); --sesam-clay: var(--l-clay); --sesam-orange: var(--l-orange); --sesam-page-bg: var(--l-page-bg); --sesam-sidebar-bg: var(--l-sidebar-bg); --sesam-surface: var(--l-surface); --sesam-surface-alt: var(--l-surface-alt); --sesam-border-subtle: var(--l-border-subtle); --sesam-border-faint: var(--l-border-faint); --sesam-divider: var(--l-divider); --sesam-text: var(--l-text); --sesam-text-muted: var(--l-text-muted); --pod-lattice: var(--l-pod-lattice); --arabic-pattern: var(--l-arabic); --logo-inner-bg: var(--l-logo-inner); --term-bg: var(--l-term-bg); --sky: var(--l-sky); --code-comment: var(--l-code-comment); --code-keyword: var(--l-code-keyword); --code-builtin: var(--l-code-builtin); --code-string: var(--l-code-string); --code-number: var(--l-code-number); --code-literal: var(--l-code-literal); --code-attr: var(--l-code-attr); --code-variable: var(--l-code-variable); --code-meta: var(--l-code-meta); --code-addition: var(--l-code-addition); --code-deletion: var(--l-code-deletion); /* mdBook variable mappings */ /* Widen the content column from mdBook's stock 750px — the wide comparison tables in alternatives.md need the room, and the page-TOC (pagetoc.css) positions itself relative to this value. */ --content-max-width: 1100px; --sidebar-bg: var(--sesam-sidebar-bg); --sidebar-fg: var(--sesam-text); --sidebar-non-existant: var(--sesam-text-muted); --sidebar-active: var(--sesam-emerald); --sidebar-spacer: var(--sesam-divider); --search-mark-bg: var(--sesam-gold-light); --bg: var(--sesam-page-bg); --fg: var(--sesam-text); --links: var(--sesam-emerald); --inline-code-color: var(--sesam-text); --table-border-color: var(--sesam-border-subtle); --table-header-bg: var(--sesam-surface-alt); --table-alternate-bg: var(--sesam-page-bg); --quote-bg: var(--sesam-surface); --quote-border: var(--sesam-clay); --scrollbar: var(--sesam-clay); --icons: var(--sesam-emerald); --icons-hover: var(--sesam-gold); --theme-popup-bg: var(--sesam-sidebar-bg); --theme-popup-border: var(--sesam-border-subtle); --theme-hover: var(--sesam-surface-alt); } /* --- Activate dark palette --- Triggered by: - Explicit user choice via html[data-theme="dark"] (set by theme-switch.js) - System preference when no explicit choice has been made The :not([data-theme="light"]) guard prevents the media query from overriding a user who explicitly picked light. */ html[data-theme="dark"], html[data-theme="dark"].light, html[data-theme="dark"].rust, html[data-theme="dark"].navy, html[data-theme="dark"].coal, html[data-theme="dark"].ayu { --sesam-emerald: var(--d-emerald); --sesam-emerald-hover: var(--d-emerald-hover); --sesam-emerald-muted: var(--d-emerald-muted); --sesam-gold: var(--d-gold); --sesam-gold-light: var(--d-gold-light); --sesam-clay: var(--d-clay); --sesam-orange: var(--d-orange); --sesam-page-bg: var(--d-page-bg); --sesam-sidebar-bg: var(--d-sidebar-bg); --sesam-surface: var(--d-surface); --sesam-surface-alt: var(--d-surface-alt); --sesam-border-subtle: var(--d-border-subtle); --sesam-border-faint: var(--d-border-faint); --sesam-divider: var(--d-divider); --sesam-text: var(--d-text); --sesam-text-muted: var(--d-text-muted); --pod-lattice: var(--d-pod-lattice); --arabic-pattern: var(--d-arabic); --logo-inner-bg: var(--d-logo-inner); --term-bg: var(--d-term-bg); --sky: var(--d-sky); --code-comment: var(--d-code-comment); --code-keyword: var(--d-code-keyword); --code-builtin: var(--d-code-builtin); --code-string: var(--d-code-string); --code-number: var(--d-code-number); --code-literal: var(--d-code-literal); --code-attr: var(--d-code-attr); --code-variable: var(--d-code-variable); --code-meta: var(--d-code-meta); --code-addition: var(--d-code-addition); --code-deletion: var(--d-code-deletion); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]):not([data-theme="dark"]), html.light:not([data-theme="light"]):not([data-theme="dark"]), html.rust:not([data-theme="light"]):not([data-theme="dark"]), html.navy:not([data-theme="light"]):not([data-theme="dark"]), html.coal:not([data-theme="light"]):not([data-theme="dark"]), html.ayu:not([data-theme="light"]):not([data-theme="dark"]) { --sesam-emerald: var(--d-emerald); --sesam-emerald-hover: var(--d-emerald-hover); --sesam-emerald-muted: var(--d-emerald-muted); --sesam-gold: var(--d-gold); --sesam-gold-light: var(--d-gold-light); --sesam-clay: var(--d-clay); --sesam-orange: var(--d-orange); --sesam-page-bg: var(--d-page-bg); --sesam-sidebar-bg: var(--d-sidebar-bg); --sesam-surface: var(--d-surface); --sesam-surface-alt: var(--d-surface-alt); --sesam-border-subtle: var(--d-border-subtle); --sesam-border-faint: var(--d-border-faint); --sesam-divider: var(--d-divider); --sesam-text: var(--d-text); --sesam-text-muted: var(--d-text-muted); --pod-lattice: var(--d-pod-lattice); --arabic-pattern: var(--d-arabic); --logo-inner-bg: var(--d-logo-inner); --term-bg: var(--d-term-bg); --sky: var(--d-sky); --code-comment: var(--d-code-comment); --code-keyword: var(--d-code-keyword); --code-builtin: var(--d-code-builtin); --code-string: var(--d-code-string); --code-number: var(--d-code-number); --code-literal: var(--d-code-literal); --code-attr: var(--d-code-attr); --code-variable: var(--d-code-variable); --code-meta: var(--d-code-meta); --code-addition: var(--d-code-addition); --code-deletion: var(--d-code-deletion); } } /* --- Typography --- */ body { font-family: "Rubik", sans-serif; } /* Content reads a touch larger than mdBook's stock 1.6rem. Scoped to the content column so the sidebar (its own explicit 1.6rem) is untouched; the page-TOC is pinned below so it doesn't grow with it. */ .content main { font-size: 1.8rem; } .pagetoc { font-size: 1.5rem; } h1, h2, h3, h4, h5, h6 { font-family: "Josefin Sans", sans-serif; } /* --- Sidebar --- */ .sidebar { background-image: var(--pod-lattice); background-repeat: repeat; background-size: 24px 28px; border-right: 3px solid var(--sesam-emerald); } .sidebar .sidebar-scrollbox { padding-top: 0; font-family: "Josefin Sans", sans-serif; font-size: 1.6rem; font-weight: 600; } .sidebar-logo { display: block; position: relative; width: 148px; height: 148px; margin: 1.2rem auto 0.5rem; /* a crop of the treasure cave from the landing-page artwork */ background: url("../cave-logo.png") center / cover no-repeat, var(--logo-inner-bg); border-radius: 50%; border: 4px solid var(--sesam-emerald); box-shadow: 0 0 0 2px var(--sesam-gold), 0 0 0 8px rgba(45, 110, 63, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15); cursor: pointer; transition: box-shadow 0.15s ease; } .sidebar-logo:hover { box-shadow: 0 0 0 2px var(--sesam-gold), 0 0 0 8px rgba(45, 110, 63, 0.35), 0 2px 12px rgba(0, 0, 0, 0.25); } /* a twinkle over the hoard — only at night (the cave is darker then, so it reads), echoing the treasure sparkles on the landing page */ .sidebar-logo::after { content: ""; display: none; position: absolute; left: 46%; top: 73%; width: 18px; height: 18px; margin: -9px 0 0 -9px; background: radial-gradient(circle, #fff7d6 0%, var(--sesam-gold-light) 50%, transparent 72%); clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%); pointer-events: none; animation: logo-sparkle 1.9s ease-in-out infinite; } @keyframes logo-sparkle { 0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(35deg); } } html[data-theme="dark"] .sidebar-logo::after { display: block; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .sidebar-logo::after { display: block; } } @media (prefers-reduced-motion: reduce) { .sidebar-logo::after { animation: none; } } .sidebar .sidebar-scrollbox a:hover { color: var(--sesam-emerald); } .sidebar .sidebar-scrollbox .chapter li.active > a { color: var(--sesam-emerald); font-weight: 700; } .sidebar .sidebar-scrollbox .chapter li.part-title { font-size: 1.15em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sesam-emerald); margin-top: 1.2em; border-bottom: 1px solid color-mix(in srgb, var(--sesam-emerald) 25%, transparent); padding-bottom: 0.25em; } .sidebar .sidebar-scrollbox .chapter li.chapter-item { border-left: 2px solid transparent; transition: border-color 0.15s ease; } .sidebar .sidebar-scrollbox .chapter li.chapter-item:hover { border-left-color: var(--sesam-gold); } .sidebar .sidebar-scrollbox .chapter li.active { border-left-color: var(--sesam-emerald); } /* --- Navigation arrows --- */ .nav-chapters { color: var(--sesam-emerald); font-size: 2em; transition: color 0.15s ease; } .nav-chapters:hover { color: var(--sesam-gold) !important; background: transparent !important; } /* --- Menu bar (header) icons --- Enlarge the stock mdBook header glyphs (sidebar toggle, theme, search, print and the GitHub repo link). They inherit body's 1.6rem (16px) by default — FontAwesome's `.fa` is `font-size: inherit` — so anything at or below 1.6rem looks unchanged. 2.4rem matches the menu title. */ #menu-bar i.fa { font-size: 2.4rem; } /* --- Sky gradient + arabic geometric background pattern --- The sky gradient is painted on and fixed to the viewport, so it always spans the full viewport and can never be clipped to a short/tall content box (which left an uncovered bar at the page bottom when on .page-wrapper). The page-wrapper is made transparent so the gradient shows through; the sidebar and the sticky menu-bar keep their own opaque backgrounds. The arabic pattern tiles on top on .page. Code blocks/tables carry solid surfaces, so legibility holds. */ html { background-image: var(--sky); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; } .page-wrapper { background-color: transparent; } .page-wrapper .page { background-image: var(--arabic-pattern); background-repeat: repeat; background-size: 80px 80px; } /* --- Headings --- */ .content main h1 { color: var(--sesam-emerald); border-bottom: 2px solid var(--sesam-gold); padding-bottom: 0.3em; } .content main h2 { color: var(--sesam-emerald); border-bottom: 1px solid var(--sesam-border-subtle); padding-bottom: 0.2em; } .content main h3, .content main h4 { color: var(--sesam-emerald-hover); } /* --- Theme-swapped diagrams --- Ship both the light and dark artwork; show whichever matches the active theme. Keyed on the same signal as the palette above (explicit data-theme, else prefers-color-scheme), so it needs no JS and never flashes. */ .arch-diagram { max-width: 100%; height: auto; } .arch-dark { display: none; } html[data-theme="dark"] .arch-light { display: none; } html[data-theme="dark"] .arch-dark { display: inline; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]):not([data-theme="dark"]) .arch-light { display: none; } html:not([data-theme="light"]):not([data-theme="dark"]) .arch-dark { display: inline; } } /* --- Code blocks --- JetBrains Mono everywhere (matches the landing terminal + wordmark). Fenced blocks get a warm terminal-like surface; inline code stays a small chip. */ code, pre, kbd { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* fenced block: terminal panel */ pre > code.hljs { background-color: var(--term-bg) !important; color: var(--sesam-text); border: 1px solid var(--sesam-border-subtle); border-radius: 8px; padding: 0.85em 1em; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07); } /* inline code: small warm chip. !important is required because mdBook tags inline code with .hljs too, and the active highlight stylesheet's base `.hljs { background }` (a dark one) would otherwise win on specificity. */ :not(pre) > code { background-color: var(--sesam-surface-alt) !important; color: var(--sesam-text) !important; border: 1px solid var(--sesam-border-faint); border-radius: 3px; padding: 0.1em 0.3em; font-size: 0.92em; } /* --- Syntax palette --- Brand-tuned highlight.js token colors, driven by the --code-* tokens so they track light/dark. sesam.css loads after mdBook's highlight stylesheets, so these win on source order; !important guards against any active dark sheet. */ .hljs-comment, .hljs-quote { color: var(--code-comment) !important; font-style: italic; } .hljs-keyword, .hljs-selector-tag, .hljs-section, .hljs-name { color: var(--code-keyword) !important; } .hljs-built_in, .hljs-title, .hljs-type { color: var(--code-builtin) !important; } .hljs-string, .hljs-regexp, .hljs-symbol, .hljs-bullet { color: var(--code-string) !important; } .hljs-number { color: var(--code-number) !important; } .hljs-literal { color: var(--code-literal) !important; } .hljs-attr, .hljs-attribute, .hljs-meta .hljs-keyword { color: var(--code-attr) !important; } .hljs-variable, .hljs-template-variable { color: var(--code-variable) !important; } /* shell prompts / preprocessor / diff headers — the emerald prompt accent */ .hljs-meta, .hljs-meta .hljs-string { color: var(--code-meta) !important; } .hljs-addition { color: var(--code-addition) !important; background-color: color-mix(in srgb, var(--code-addition) 13%, transparent); } .hljs-deletion { color: var(--code-deletion) !important; background-color: color-mix(in srgb, var(--code-deletion) 13%, transparent); } .hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: 700; } /* --- sesam CLI accents --- Applied by theme/bash-highlight.js to command examples: the `sesam` command (emerald), its subcommand(s) (gold) and --flags (clay). Tokens track theme. */ pre code .sesam-cmd { color: var(--sesam-emerald); font-weight: 700; } pre code .sesam-subcmd { color: var(--code-attr); font-weight: 600; } pre code .sesam-flag { color: var(--code-number); } /* --- Admonish box accents --- */ :is(.admonition.admonish-tip) { border-color: var(--sesam-gold); } :is(.admonition.admonish-tip) > :is(.admonition-title, summary.admonition-title) { background-color: color-mix(in srgb, var(--sesam-gold) 15%, transparent); } :is(.admonition.admonish-tip) > :is(.admonition-title, summary.admonition-title)::before { background-color: var(--sesam-gold); } :is(.admonition.admonish-info) { border-color: var(--sesam-emerald); } :is(.admonition.admonish-info) > :is(.admonition-title, summary.admonition-title) { background-color: color-mix(in srgb, var(--sesam-emerald) 12%, transparent); } :is(.admonition.admonish-info) > :is(.admonition-title, summary.admonition-title)::before { background-color: var(--sesam-emerald); } :is(.admonition.admonish-warning) { border-color: var(--sesam-orange); } :is(.admonition.admonish-warning) > :is(.admonition-title, summary.admonition-title) { background-color: color-mix(in srgb, var(--sesam-orange) 15%, transparent); } :is(.admonition.admonish-warning) > :is(.admonition-title, summary.admonition-title)::before { background-color: var(--sesam-orange); } :is(.admonition.admonish-note) { border-color: var(--sesam-emerald-muted); } :is(.admonition.admonish-note) > :is(.admonition-title, summary.admonition-title) { background-color: color-mix(in srgb, var(--sesam-emerald-muted) 12%, transparent); } :is(.admonition.admonish-note) > :is(.admonition-title, summary.admonition-title)::before { background-color: var(--sesam-emerald-muted); } /* --- Tables --- mdBook only paints even rows (--table-alternate-bg); odd rows were left transparent, letting the arabic page pattern bleed through. Give them an explicit surface so both stripes stay opaque and the zebra reads cleanly. */ .content main table tbody tr:nth-child(2n+1) { background: var(--sesam-surface); } /* Tables span the full content width rather than shrinking to their content. */ .content main table { width: 100%; } /* ✓/✗ glyphs (wrapped by theme/table-marks.js): supported reads emerald, the absent one a muted red — softened so a column of ✗ doesn't shout. */ .content main table .mark-yes { color: var(--sesam-emerald); font-weight: 700; } .content main table .mark-no { color: color-mix(in srgb, var(--code-deletion) 60%, var(--sesam-text-muted)); } /* --- Pagetoc --- */ .pagetoc a:hover, .pagetoc a.active { background: transparent !important; color: var(--sesam-emerald) !important; border-left-color: var(--sesam-gold) !important; font-weight: 600; } .pagetoc a { border-left: 2px solid var(--sesam-border-subtle) !important; } /* --- Theme toggle --- The theme control is now a single sun/moon button (theme-switch.js); the stock popup list is suppressed. */ #theme-list { display: none !important; } /* the sun glows gold, the moon a cool silver, on hover */ #theme-toggle .fa-sun-o:hover { color: var(--sesam-gold); } #theme-toggle .fa-moon-o:hover { color: var(--sesam-gold-light); } /* --- Search focus --- */ #searchbar:focus { border-color: var(--sesam-emerald); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sesam-emerald) 25%, transparent); } /* --- Git build-info footer --- mdbook-gitinfo renders a centered