/* ========================================================================== */ /* 1. BASE & RESET */ /* ========================================================================== */ /* * --base-bg / overlay system * -------------------------- * The site uses a layered background: * * body::before - the optional collection/article hero image (z=-2) * only present when and the * --bg-image custom property is set. * body::after - a translucent tint (white in light mode, near-black * in dark mode) sitting on top of that image (z=-1). * body - paints --base-bg as the base colour for pages with * no background image. * * Because the dark-mode tint is rgba(17,17,17,0.65) and is composited * over the base, the base itself stays light (#fafafa) in both themes. * Changing it to a darker colour would double-darken when an image is * present. */ :root { --base-bg: #fafafa; --header-offset: 0px; --icon-unit: 24px; --icon-svg-scale: 1; --icon-spacing-factor: 0.9; --icon-spacing: calc(var(--icon-unit) * var(--icon-spacing-factor)); --list-spacing: calc(var(--icon-unit) * var(--icon-spacing-factor)); --group-spacing: calc(var(--icon-unit) * var(--icon-spacing-factor)); --glass-overhang-factor: 0.4; --glass-inset-y: calc(var(--icon-unit) * -0.4); --glass-inset-x: calc(var(--icon-unit) * var(--glass-overhang-factor) * -1); --glass-radius: calc(var(--icon-unit) * 0.9); /* Animation durations -- single source of truth so JS and CSS agree. */ --anim-page-fade: 0.6s; --anim-glow: 0.7s; --anim-icon-pop: 0.7s; --anim-filmstrip-slide: 1s; } body[data-theme="dark"] { /* Stays light — the body::before overlay (rgba(17,17,17,0.65)) composites over this to produce a dark-grey appearance. */ --base-bg: #fafafa; } html { background: var(--load-bg, var(--base-bg)); overflow-y: scroll; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Set by inline