@font-face { font-family: SpaceGrotesk; src: url(spacegrotesk.ttf); } @media print{ /* Chromium ignores @page backgrounds and strips element backgrounds when printing, leaving the /print_page white. Force the themed background and keep colours in the output. --ecsc-surface-1 is defined on :root, so it also resolves on (--md-default-bg-color is only set on ). */ html, body, #print-site-page { background-color: var(--ecsc-surface-1) !important; color: var(--md-default-fg-color) !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } @page { background-color: var(--ecsc-surface-1) !important; } } /* Colours come from the event theme tokens (assets/theme.css). This block only maps those tokens onto Material's --md-* variables — no raw hexes. */ :root [data-md-color-scheme=slate] { --md-primary-fg-color: var(--ecsc-text-strong); --md-primary-fg-color--light: var(--brand-white); --md-primary-fg-color--dark: var(--ecsc-text); --md-primary-bg-color: var(--ecsc-surface-1); --md-primary-bg-color--light: var(--ecsc-surface-2); --md-primary-bg-color--dark: var(--ecsc-surface-0); --md-default-fg-color: var(--ecsc-text); --md-default-fg-color--light: var(--ecsc-text-dim); --md-default-fg-color--lighter: var(--ecsc-text-dimmer); --md-default-fg-color--lightest: var(--ecsc-text-faint); --md-default-bg-color: var(--ecsc-surface-1); --md-default-bg-color--light: var(--ecsc-surface-2); --md-default-bg-color--lighter: var(--ecsc-surface-3); --md-default-bg-color--lightest: var(--ecsc-surface-4); --md-code-bg-color: var(--ecsc-surface-2); --md-code-fg-color: var(--ecsc-text); --md-accent-fg-color: var(--ecsc-accent); --md-accent-fg-color--transparent: var(--ecsc-accent-wash); --md-accent-fg-color--dark: var(--ecsc-accent-deep); --md-accent-bg-color: var(--ecsc-surface-1); --md-accent-bg-color--light: var(--ecsc-surface-2); --md-hue: 226deg; --md-text-font: var(--ecsc-font-body); --md-code-font: ui-monospace, "Cascadia Code", "Fira Code", "Consolas", monospace; --md-typeset-color: var(--md-default-fg-color); --md-typeset-a-color: var(--ecsc-accent); --md-typeset-del-color: #f5503d26; --md-typeset-ins-color: #0bd57026; --md-typeset-kbd-color: var(--ecsc-surface-4); --md-typeset-kbd-accent-color: var(--brand-white); --md-typeset-kbd-border-color: var(--ecsc-border-strong); --md-typeset-mark-color: var(--ecsc-detail-wash); --md-typeset-table-color: var(--ecsc-border); --md-typeset-table-color--light: var(--ecsc-accent-wash); --md-admonition-fg-color: var(--md-default-fg-color); --md-admonition-bg-color: var(--md-default-bg-color); --md-admonition-fg-color--info: var(--md-accent-fg-color); --md-admonition-bg-color--info: var(--md-default-bg-color); --md-admonition-fg-color--question: var(--md-accent-fg-color); --md-admonition-bg-color--question: var(--md-default-bg-color); --md-warning-fg-color: #000000de; --md-warning-bg-color: #ff9; --md-footer-fg-color: var(--brand-white); --md-footer-fg-color--light: var(--ecsc-text-dim); --md-footer-fg-color--lighter: var(--ecsc-text-dimmer); --md-footer-bg-color: #00000000; --md-footer-bg-color--dark: var(--ecsc-surface-0); --md-shadow-z1: 0 0.2rem 0.5rem #0000000d, 0 0 0.05rem #0000001a; --md-shadow-z2: 0 0.2rem 0.5rem #0000001a, 0 0 0.05rem #00000040; --md-shadow-z3: 0 0.2rem 0.5rem #0003, 0 0 0.05rem #00000059; } /* --- Scrollbars — themed to match the palette (navy track, cyan thumb) - */ :root [data-md-color-scheme=slate] * { scrollbar-width: thin; scrollbar-color: var(--ecsc-scrollbar-thumb) var(--ecsc-scrollbar-track); } :root [data-md-color-scheme=slate] ::-webkit-scrollbar { width: 12px; height: 12px; } :root [data-md-color-scheme=slate] ::-webkit-scrollbar-track { background: var(--ecsc-scrollbar-track); } :root [data-md-color-scheme=slate] ::-webkit-scrollbar-thumb { background: var(--ecsc-scrollbar-thumb); border-radius: 8px; border: 3px solid var(--ecsc-scrollbar-track); } :root [data-md-color-scheme=slate] ::-webkit-scrollbar-thumb:hover { background: var(--ecsc-scrollbar-thumb-hover); } :root [data-md-color-scheme=slate] ::-webkit-scrollbar-corner { background: var(--ecsc-scrollbar-track); } /* --- Text selection — sparing magenta detail ------------------------- */ :root [data-md-color-scheme=slate] ::selection { background: var(--ecsc-detail); color: var(--brand-white); } /* --- Typography — Saira (display/nav/UI, uppercase) + Adwaita (body) -- */ :root [data-md-color-scheme=slate] .md-typeset h1, :root [data-md-color-scheme=slate] .md-typeset h2, :root [data-md-color-scheme=slate] .md-typeset h3, :root [data-md-color-scheme=slate] .md-typeset h4, :root [data-md-color-scheme=slate] .md-header__title, :root [data-md-color-scheme=slate] .md-nav__title, :root [data-md-color-scheme=slate] .md-nav__link, :root [data-md-color-scheme=slate] .md-tabs__link { font-family: var(--ecsc-font-display); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; } :root [data-md-color-scheme=slate] .md-content h1 { color: var(--md-accent-fg-color--dark); } :root [data-md-color-scheme=slate] .md-content h2, :root [data-md-color-scheme=slate] .md-content h3, :root [data-md-color-scheme=slate] .md-content h4 { color: var(--md-accent-fg-color); } :root .md-content a { border-bottom: 1px dotted; } :root [data-md-color-scheme=slate] .md-content a { border-bottom-color: var(--ecsc-accent-line); } :root a[title="Site PDF"] { border-bottom: none; padding: 0px; margin: 0px; > svg { width: 40px; } } :root [data-md-color-scheme=slate] .md-search__input::placeholder { color: var(--md-primary-fg-color) !important; } :root [data-md-color-scheme=slate] .md-search__icon { color: var(--ecsc-text-strong) !important; } :root [data-md-color-scheme=slate] .md-search__form { color: var(--md-primary-fg-color) !important; background-color: var(--md-primary-bg-color--light) !important; } :root [data-md-color-scheme=slate] .md-search-result__meta { color: var(--md-primary-fg-color); background-color: var(--md-primary-bg-color); } :root [data-md-color-scheme=slate] .md-header { background-color: var(--ecsc-surface-1); border-bottom: 1px solid var(--ecsc-border-strong); /* single crisp border — override Material's built-in header shadow so it doesn't read as a second line */ box-shadow: none; } /* Search bar reads as an inset panel against the layered header */ :root [data-md-color-scheme=slate] .md-search__form { border: 1px solid var(--ecsc-border); } :root [data-md-color-scheme=slate] .md-search__form:hover { border-color: var(--ecsc-border-strong); } :root [data-md-color-scheme=slate] .md-header__title { color: var(--ecsc-text); font-family: var(--ecsc-font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: 0.06em; margin-left: -0.2rem; text-decoration: none; transition: color 0.12s; } /* Logo + title are separate elements (the drawer-toggle button sits between them in the header layout) but both link home, so pair their hover/focus state with :has() to read as one clickable unit. */ :root [data-md-color-scheme=slate] .md-header__title:hover, :root [data-md-color-scheme=slate] .md-header__title:focus-visible, :root [data-md-color-scheme=slate] .md-header__inner:has(.md-logo:hover) .md-header__title, :root [data-md-color-scheme=slate] .md-header__inner:has(.md-logo:focus-visible) .md-header__title { color: var(--ecsc-text-strong); } :root [data-md-color-scheme=slate] .md-header .md-logo { margin-left: 0.2em; } :root [data-md-color-scheme=slate] .md-header .md-logo img { height: 1.6rem; width: 1.6rem; padding: 0.15rem; box-sizing: content-box; opacity: 0.84; } /* Material dims every .md-header__button to opacity .7 on hover; the logo is artwork, not an icon, so keep it at its resting appearance instead. */ :root [data-md-color-scheme=slate] .md-header .md-logo:hover, :root [data-md-color-scheme=slate] .md-header .md-logo:focus-visible { opacity: 1; } /* Material's built-in black palette hardcodes this label's colour via html[data-md-color-primary=black] .md-nav--primary .md-nav__title[for="__drawer"] (specificity 0,4,1), bypassing the --ecsc-* tokens the rest of this theme is built from. Match its ancestor classes so this rule wins the cascade instead of just tying on selector count. */ :root [data-md-color-scheme=slate] .md-nav--primary .md-nav__title[for=__drawer] { background-color: var(--ecsc-surface-1); color: var(--ecsc-text-strong); } :root [data-md-color-scheme=slate] .md-nav--primary .md-nav__title:not([for=__drawer]):not([for=__toc]) { background-color: var(--ecsc-surface-0); color: var(--ecsc-text-dim); } :root [data-md-color-scheme=slate] .md-nav__link { /* color: #9cdcfe; */ } :root [data-md-color-scheme=slate] .md-nav__item--active > .md-nav__link, :root [data-md-color-scheme=slate] .md-nav__link--active, :root [data-md-color-scheme=slate] .md-nav__link[aria-current] { color: var(--ecsc-accent); font-weight: bold; } :root [data-md-color-scheme=slate] .md-nav__link:hover, :root [data-md-color-scheme=slate] .md-nav__link:focus { color: var(--ecsc-accent-bright); background-color: var(--ecsc-accent-wash); border-radius: 0.1rem; } :root [data-md-color-scheme=slate] .md-header__title span { padding: 0px 5px; } /*:root [data-md-color-scheme=slate] .md-sidebar--primary .md-nav__title:nth-child(1)::after { content: "A/D"; }*/ :root [data-md-color-scheme=slate] .hltext { color: var(--md-primary-fg-color); font-weight: 600; } :root [data-md-color-scheme=slate] .notice { text-shadow: 0 0 3px var(--brand-white); } :root .md-typeset details { font-size: 0.7rem; } :root details[open] > summary:first-of-type { margin-bottom: 0.5em; } :root details[open] { padding-bottom: 0.5em; } :root details.simple { border-color: var(--ecsc-accent); background-color: var(--md-admonition-bg-color); } :root details.simple summary { background-color: var(--ecsc-accent-wash); padding: 0.5em 1em; font-size: 1em; } :root details.simple summary::before { display: none; } :root [data-md-color-scheme=slate] { div.md-typeset__table { width: 100%; } table:not([class]) { border: none; line-height: 1; font-size: 0.75rem; width:100%; display:table; } table:not([class]) td { border-top: solid var(--ecsc-border-strong) 1px; } table:not([class]) td:nth-child(1), table:not([class]) th:nth-child(1) { border-right: solid var(--ecsc-border-strong) 1px; } td, th { min-width: unset; } td, th, tr { border-color: var(--ecsc-border-strong); } } :root pre { margin: 0.6em 0; } :root div.admonition { font-size: 0.87em; } :root [data-md-color-scheme=slate] .md-search-result__link:hover { background-color: var(--ecsc-accent-wash); code { background-color: unset; } } :root [data-md-color-scheme=slate] { .md-nav ul li:nth-child(1) { font-weight: 700; } nav > label.md-nav__title[for=__drawer] { padding: 8px; color: var(--ecsc-text-strong); font-family: var(--ecsc-font-display); font-weight: 600; font-size: 2rem; text-align: center; a.md-logo { padding: 0px; } } header > nav .md-header__button { color: var(--ecsc-accent); } } /* The drawer title (nav > label.md-nav__title[for=__drawer]) is only a full mobile drawer panel below Material's own header-hamburger breakpoint (screen and (max-width: 76.234375em), same one main.css uses for .md-header__button[for=__drawer] / .md-nav__title itself). Above it the sidebar is a slim permanent panel with no room for logo artwork, so the logo+text row is scoped to that range; outside it, a.md-logo falls back to the rule above and Material's own display:none hides the button again, same as before the logo was added. The .md-nav__title class qualifier matters: header.html's hamburger toggle is also a bare `nav > label[for=__drawer]` (different element, same tag/attr), so without it this rule's height/padding leaked onto the real page header and inflated .md-header's height. */ @media screen and (max-width: 76.234375em) { :root [data-md-color-scheme=slate] nav > label.md-nav__title[for=__drawer] { padding: 1em 8px; height: 6.5rem; display: flex; align-items: center; justify-content: center; a.md-logo { /* Material's .md-nav__title .md-logo default is position:absolute, which our flex/gap rules never overrode; that took the logo out of flow so the label's own height never centered it. */ position: static; display: flex; align-items: center; justify-content: center; gap: 0.5rem; line-height: 1em; img { height: 2.8rem; width: 2.8rem; margin-right: 0.2rem; } } } } .md-source { color: var(--ecsc-text-strong); } /* Checker-status colours are semantic (traffic-light) and intentionally kept outside the brand palette so meaning stays legible. */ .hl-success > code { color: #18d018; } .hl-recovering > code { color: var(--brand-cyan); } .hl-mumble > code { color: #e1912a; } .hl-offline > code { color: #c40c0c; } .hl-error > code { color: #dddddd; } details.question { border-color: var(--md-accent-fg-color) !important; background-color: var(--md-admonition-bg-color) !important; } .question > summary { background-color: var(--ecsc-accent-wash) !important; } .question > summary::before { background-color: var(--md-accent-fg-color) !important; } .question > summary::after { background-color: var(--md-accent-fg-color) !important; } .score-icon { height: 1em !important; width: auto; vertical-align: -0.125em; fill: #ffffff80; } .scoring-chart { display: block; max-width: 640px; width: 100%; margin: 1.2em auto; } /* Runtime scoring chart: SVG plot with a slider panel on the right. */ /* Full-width, no side margin, so the reveal icon can pin to the parent edge. */ .scoring-live { position: relative; width: 100%; margin: 1.2em 0; } /* Centered content row that actually carries the max-width. */ .scoring-live__row { display: flex; align-items: flex-start; gap: 1rem; max-width: 780px; margin: 0 auto; } .scoring-live__chart { position: relative; flex: 1 1 auto; min-width: 0; } .scoring-live__title { font-family: var(--md-code-font-family, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 0.85em; color: #ffffffb0; text-align: center; margin: 0 0 -0.7em; position: relative; z-index: 1; pointer-events: none; } .scoring-live__sum { display: inline-block; vertical-align: middle; position: relative; top: calc(-0.08em - 2px); } /* Collapsed: hide the panel, let the chart fill the width, reveal the floating "show parameters" button. */ .scoring-live.collapsed .scoring-ctrl { display: none; } /* Subtle icon-only reveal button, matching the code-link source icon. */ .scoring-ctrl__show { display: none; position: absolute; /* Slight inset from the parent's top-right edge, like the code-link icon. */ top: 0.5em; right: 0.3em; z-index: 3; align-items: center; justify-content: center; padding: 0; color: var(--md-default-fg-color); background: transparent; border: 0; opacity: 0.5; cursor: pointer; transition: opacity 0.15s, color 0.15s; } .scoring-ctrl__show svg { width: 0.95rem; height: 0.95rem; } .scoring-live.collapsed .scoring-ctrl__show { display: inline-flex; } .scoring-ctrl__show:hover { opacity: 1; color: var(--md-accent-fg-color); } .scoring-live .scoring-chart { display: block; margin: 0; max-width: none; width: 100%; /* Must equal the JS viewBox height (H=340) so the 1:1 mapping holds and the content scales uniformly. */ height: 340px; } @media (max-width: 600px) { .scoring-live__row { flex-direction: column; align-items: stretch; } } /* Hover behaviour mirrors the original static SVG's inline