/* --- Monochrome palette -------------------------------------------------------------------- Material's link/accent color (hover, active nav item, focus rings) defaults to indigo/blue from its built-in primary/accent palette and doesn't have a clean "just make it black" named option — the closest built-in choice (primary: black) still hardcodes indigo back in for --md-typeset-a-color as a special case, and accent has no black/white entry at all. Overriding the resulting variables directly instead, site-wide, per SITEMAP's plain black/gray/white look. Targets `body` specifically, not :root: Material's palette JS sets data-md-color-primary="indigo" (the default, since we don't configure one) directly on , and a rule's OWN declaration on an element always wins over an inherited value from an ancestor regardless of the ancestor rule's specificity or !important — so overriding at :root never reached body's subtree. !important here beats that (non-important) indigo rule since both now target body directly, where importance is what decides the winner. */ body { --md-accent-fg-color: var(--md-default-fg-color) !important; --md-accent-fg-color--transparent: var(--md-default-fg-color--lightest) !important; --md-typeset-a-color: var(--md-default-fg-color) !important; } /* --- Dark mode: aurora background ----------------------------------------------------------- iMessage's "Aurora" dark theme: a night-sky base, individually-twinkling stars, and slow drifting colorful glows behind everything. Scoped entirely to body[data-md-color-scheme="slate"] — .dkh-aurora-bg is display:none by default, so light mode is completely untouched no matter what's inside it. Material's own `body{background-color: var(--md-default-bg-color)}` is opaque and would otherwise paint over this, hence the transparent override below (dark mode only, same selector). Everything opaque on top (header once scrolled, .dkh-box cards) still uses --md-default-bg-color as normal, so legibility is unaffected — this only shows through genuinely transparent/blurred areas. (Tried keeping this always-present at opacity:0 instead of display:none, on the theory that it'd let iOS pre-build its expensive blurred layers ahead of time and avoid a first-toggle stutter — measured no improvement on an actual iPhone, so reverted. Also tried masking the stutter with a brief loading spinner instead of eliminating it — also reverted, no improvement measured. The iPhone-only first-toggle stutter/black-screen issue is still open.) */ /* Material's own slate defaults (hsla(...,90%,0.82) / 0.56) read as a muted mid-gray, not dark-mode-appropriate near-white — brightened here the same way the monochrome accent override at the top of this file replaces Material's palette variables, scoped to slate only so light mode's near-black text is untouched. Everything using these variables (headings, body text, nav) picks this up automatically. */ body[data-md-color-scheme="slate"] { background-color: transparent; --md-default-fg-color: rgba(255, 255, 255, 0.94); --md-default-fg-color--light: rgba(255, 255, 255, 0.75); } .dkh-aurora-bg { display: none; } body[data-md-color-scheme="slate"] .dkh-aurora-bg { display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(to bottom, #030105 0%, #110226 50%, #1f1533 90%, #4c3932 100%); pointer-events: none; } .dkh-aurora-bg__stars, .dkh-aurora-bg__rays { position: absolute; inset: 0; } .dkh-aurora-bg__star { position: absolute; width: var(--dkh-star-size); height: var(--dkh-star-size); border-radius: 50%; background: #fff; opacity: 0; animation: dkh-twinkle var(--dkh-twinkle-duration) ease-in-out var(--dkh-twinkle-delay) infinite; } @keyframes dkh-twinkle { 0%, 100% { opacity: 0; } 50% { opacity: var(--dkh-twinkle-peak); } } /* Orion's Belt (extra.js) uses this instead of the twinkle animation — it's meant to read as a fixed, recognizable asterism, not blend into the ambient scatter's flicker. */ .dkh-aurora-bg__star--static { animation: none; opacity: var(--dkh-twinkle-peak); } /* Aurora blobs: 5 full-viewport-sized, heavily-blurred circles (extra.js creates and animates them), each doing a slow independent random walk plus a gentle scale pulse, cross-fading through a few saturated color palettes over time. Ported closely from a reference the user found and pointed me at directly (colors, blur radius, sizing, walk/parallax logic) rather than designed from scratch — earlier attempts (blurred ribbon shapes, then a flow-field particle system) were both built from first principles and neither actually read as "aurora." */ .dkh-aurora-bg__blob { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; filter: blur(60px); opacity: 0; transition: opacity 4s ease-in-out; will-change: transform, opacity; } /* Diagonal light rays: thin, soft-edged streaks layered on top of the blobs, angled from the top-left down toward bottom-center. CSS rotate() is clockwise for positive angles, and clockwise from "straight down" swings the bottom end LEFT (6 o'clock -> 7 -> 8), not right — counter to how it reads at first glance. A NEGATIVE angle (extra.js) is what swings the bottom end toward the right/center, which combined with each ray starting in the left portion of the viewport is what actually produces the top-left-to-bottom-center direction. Opacity (fade in/out) and margin-left (sideways drift) are both driven directly by extra.js on every animation frame rather than CSS @keyframes — see the comment at the top of that ray IIFE for why (a mobile-only bug where CSS animations could get stuck after the light/dark toggle). Rotation stays a static, per-ray CSS variable rather than something JS touches every frame, since it never needs to change. */ .dkh-aurora-bg__ray { position: absolute; top: 0; width: 8vw; height: 140vh; background: linear-gradient( to bottom, transparent 0%, rgba(178, 24, 43, 0.5) 15%, rgba(140, 20, 55, 0.5) 35%, rgba(150, 40, 200, 0.42) 55%, rgba(178, 24, 43, 0.46) 78%, transparent 100% ); filter: blur(14px); transform: rotate(var(--dkh-ray-angle)); transform-origin: top center; mix-blend-mode: screen; opacity: 0; will-change: opacity, margin-left; } /* Secondary ray set (extra.js): same shape/motion, positioned further right, much lower peak opacity, and a paler gradient — more white, less saturated red/purple — than the primary set. */ .dkh-aurora-bg__ray--pale { background: linear-gradient( to bottom, transparent 0%, rgba(255, 210, 215, 0.42) 15%, rgba(220, 90, 120, 0.4) 40%, rgba(255, 200, 205, 0.36) 65%, transparent 100% ); } @media (prefers-reduced-motion: reduce) { .dkh-aurora-bg__star { animation: none; opacity: var(--dkh-twinkle-peak); } .dkh-aurora-bg__blob { transition: none; } } /* Mobile only: no blurred blobs, AND no position:fixed on the aurora background itself. Two separate bugs were happening together on iPhone here, confirmed separately: 1. The first light-to-dark switch visibly froze the page for a few seconds — traced to the cost of building several heavily-blurred, full-viewport GPU layers all at once (5 blobs at 60px blur, up to 20 rays at 14px blur). Fixed by dropping the blobs on mobile — the biggest single cost (60px blur on 5 full-viewport circles) — while keeping the (much cheaper, 14px blur) rays and the plain unblurred stars/Orion's Belt. If rays alone turn out to still cause a freeze, drop `.dkh-aurora-bg__ray` back into the display:none rule below too. 2. Separately, the top and bottom of the screen would black out after switching to dark and stay that way even after switching back to light, until a full reload. This persisted even with every blurred layer removed, ruling out blur/GPU cost as ITS cause. The actual suspect was .dkh-aurora-bg's own position:fixed — this project already hit and fixed the exact same category of bug for the header earlier (fixed/sticky elements misbehaving around Safari's dynamic collapsing toolbar); this applies that same fix here: position:absolute instead of fixed on mobile, so it's laid out relative to body (which already has position:relative, and naturally spans the full page height) rather than pinned to the viewport. body's own background-color is set to match as a fallback so there's no gap if the absolutely-positioned layer doesn't extend as far as body does. Desktop is completely unaffected either way — every rule here only exists below the breakpoint. */ @media screen and (max-width: 960px) { .dkh-aurora-bg__blob { display: none; } body[data-md-color-scheme="slate"] { background: linear-gradient(to bottom, #030105 0%, #110226 50%, #1f1533 90%, #4c3932 100%); } body[data-md-color-scheme="slate"] .dkh-aurora-bg { position: absolute; top: -150px; left: 0; right: 0; bottom: 0; } .dkh-aurora-bg__ray { width: 32vw; } .dkh-aurora-bg__ray--pale { display: none; } } /* --- Mobile nav drawer ------------------------------------------------------------------------ Only reachable below the 960px breakpoint where the header nav switches to the hamburger (see .dkh-nav below) — otherwise unstyled, so it still looked like stock Material (indigo title band, blue hover/active links) next to this site's plain monochrome header nav. */ /* No "drawer panel" look at all anymore: Material's off-canvas sidebar is a narrow (12.1rem), solid-background strip that slides in from the left — stretched here to the full viewport width with a transparent background instead, so only the dimmed page (the existing .md-overlay scrim) shows behind the glass pill, which now centers on the whole screen rather than within a strip. Fades in place instead of Material's own slide-in-from-the-left: no transform at all now, just opacity — a directional wipe didn't make sense once the "drawer" isn't a strip anymore. Once it doesn't move, .md-sidebar--primary doesn't need the off-screen-left positioning trick either, so `left` just sits at 0 permanently (opacity handles show/hide). !important throughout: Material's own `[dir=ltr] .md-sidebar--primary{left:-12.1rem}` is an attribute+class selector (0,2,0), out-specificities a plain class (0,1,0) — same pattern hit several times elsewhere in this file; without it here the same properties silently keep Material's stale values instead of the ones set below. */ @media screen and (max-width: 960px) { .md-sidebar--primary { left: 0 !important; width: 100vw !important; background-color: transparent !important; /* The panel is a real full-viewport DOM element now (not just a visual illusion), sitting at Material's own z-index:5 — above the header (z-index:4) and its hamburger button. Left clickable, it silently eats every click on the screen, including on the hamburger itself — pointer-events:none here lets clicks fall through to whatever's actually underneath (the header's hamburger, or the .md-overlay scrim that closes the drawer on an outside click) at all times, since only the pill + its close button (the .dkh-drawer-pill-wrap rule below) are meant to be clickable, not the full-screen transparent area around them. No opacity/transition here — see .dkh-drawer-pill-wrap below for where the fade actually lives and why. `opacity` animating on any ancestor of a backdrop-filter element creates a new "backdrop root" per spec, constraining the filter to sample only what's painted within that same isolated layer — tried the fade here first specifically to keep backdrop-filter able to reach the real page behind it, but between that and smooth animation, smooth animation is what was asked for. So: no backdrop-filter on the pill at all anymore either (see .md-nav__list below) — pointless to keep an "always-broken-here" filter around paying for nothing. */ pointer-events: none; } [data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary { /* Material's own checked-state rule also sets transform:translateX(12.1rem) — that was the slide distance for its old off-canvas mechanic, which no longer applies now that the panel fades in place, but removing my OWN transform override didn't remove Material's; it was still shifting everything inside 12.1rem (242px at this root font-size) to the right. */ transform: translateX(0) !important; } /* Material's scrim defaults to a fairly heavy 54%-black dim (#0000008a) — moderate dimming is fine (confirmed), but the pill's own glass treatment had to fight that darkness with a strong brightness() boost to read as "white" rather than "muddy". Lightening the scrim itself here means less darkness to compensate for in the first place. */ .md-overlay { background-color: rgba(0, 0, 0, 0.32); } } /* No logo/title row anymore (see overrides/partials/nav.html) — the header icon is always on screen already, so center the list itself both vertically and horizontally within the full viewport (now that the panel spans it) instead of anchoring it under a title row. flex:none keeps it sized to its own content rather than stretching to fill the column the way Material's default flex:1 list would. background-color:transparent: Material's `.md-nav--primary,.md-nav--primary .md-nav` carries its OWN solid background (separate from .md-sidebar--primary's, already overridden above) — missed the first time, so once the nav element grew to fill the full viewport along with the sidebar, THIS is what was actually painting the whole screen white/dark behind the pill. */ .md-nav--primary, .md-nav--primary .md-nav { justify-content: center; align-items: center; background-color: transparent !important; } /* position:relative anchor for the close button (absolutely positioned at its corner); shrink- wraps to the pill's own size for free, since it's a flex child of a column container with align-items:center (default content-sized cross-axis, no extra width:fit-content trick needed). */ .dkh-drawer-pill-wrap { position: relative; /* This IS where the fade lives — smooth animation was the priority once it was clear backdrop-filter couldn't work here anyway (see .md-nav__list below), so there's no more reason to keep the opacity transition on the distant .md-sidebar--primary ancestor; animating it directly on this (small, simple) element is cheap. Also handles the pointer-events split: only the pill + its close button (not the full-screen transparent area around them) should be clickable, and only while the drawer is actually open. */ opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } [data-md-toggle="drawer"]:checked ~ .md-container .dkh-drawer-pill-wrap { opacity: 1; pointer-events: auto; } /* No backdrop-filter here (unlike the desktop condensed nav pill, .dkh-nav): it needs an ancestor between it and .md-sidebar--primary to NOT animate opacity in order to see past that ancestor and blur the real page (see .md-sidebar--primary's comment) — but the fade needing to live right on .dkh-drawer-pill-wrap for smooth animation puts that ancestor's opacity transition exactly where backdrop-filter can't tolerate it. So: plain translucent tint instead of true glass — much higher opacity than the desktop pill's 55% so it still reads as a clean, bright surface rather than something that looks like it's TRYING to be glassy and failing. Taller capsule instead of a wide one, to hold a vertically stacked list instead of a horizontal row. No divider lines between items (Material's default .md-nav__item border-top) — consistent internal spacing reads as one glass object instead of a sectioned list. */ .md-nav--primary .md-nav__list { flex: none; /* vw, not % — .dkh-drawer-pill-wrap (this element's direct parent since the close-button change) shrink-wraps to ITS content, i.e. this list, so a % width here has no well-defined parent size to resolve against (circular: wrapper waits on list, list wants a % of wrapper). That resolved to some arbitrary/too-narrow value in practice, wrapping "OFF-SYLLABUS" — vw sizes against the true viewport instead, sidestepping the circularity entirely. */ width: min(80vw, 300px); max-height: 80vh; overflow-y: auto; margin: 0; padding: 0.6rem; border-radius: 26px; background: color-mix(in srgb, var(--md-default-bg-color) 90%, transparent); border: 1px solid color-mix(in srgb, var(--md-default-fg-color) 10%, transparent); box-shadow: inset 0 1px 1px color-mix(in srgb, white 55%, transparent), 0 8px 30px color-mix(in srgb, black 12%, transparent); } [data-md-color-scheme="slate"] .md-nav--primary .md-nav__list { box-shadow: inset 0 1px 1px color-mix(in srgb, white 12%, transparent), 0 8px 30px color-mix(in srgb, black 40%, transparent); } /* Close (X) button: an explicit, always-visible way to close the drawer — tapping the dimmed background to close isn't an obvious affordance on its own. Sits as a small solid badge at the pill's corner (slightly overlapping its border, the usual modal-close convention) rather than inset within it, so it reads as clearly separate from the nav items. Same