/* ===== Global readability (no color overrides) ===== */ html { -webkit-text-size-adjust: 100%; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ===== Theme variables (light by default) ===== */ :root{ /* Background image path */ --bg-image: url('/static/mathimagebg.png'); --bg-pos-x: 50%; --bg-pos-y: 50%; /* Image opacity (0..1) and scale */ --bg-opacity: 0.51; --bg-scale: 0.90; --bg-bleed: 6vmax; /* extends image beyond edges when scaled */ /* Overlay tint over the photo */ --page-bg-overlay: rgba(255,255,255,0.16); /* Optional frosted-card surface used by .photo-surface */ --card-bg: rgba(255,255,255,0.92); --card-border: rgba(17,24,39,0.10); --card-blur: 4px; } /* Dark mode overrides driven by the .dark class on */ .dark { --page-bg-overlay: rgba(0,0,0,0.45); --card-bg: rgba(17,24,39,0.85); --card-border: rgba(255,255,255,0.08); } /* ===== Page photo background (opt-in via body.has-photo-bg) ===== */ body.has-photo-bg { background: transparent; /* let the pseudo-layers show */ position: relative; } /* two fixed layers: photo (below) + overlay (above) */ body.has-photo-bg::before, body.has-photo-bg::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -2; } /* Photo layer */ body.has-photo-bg::before { background: var(--bg-image) center/cover no-repeat fixed; opacity: var(--bg-opacity); /* keep full coverage after scaling */ inset: calc(-1 * var(--bg-bleed)); transform: scale(var(--bg-scale)); transform-origin: center; will-change: transform; } /* Overlay tint improves contrast without changing your Tailwind colors */ body.has-photo-bg::after { z-index: -1; background: var(--page-bg-overlay); } /* Replace the shorthand with explicit props for clarity */ body.has-photo-bg::before { background-image: var(--bg-image); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: var(--bg-pos-x) var(--bg-pos-y); /* <— centered */ opacity: var(--bg-opacity); inset: calc(-1 * var(--bg-bleed)); transform: scale(var(--bg-scale)); transform-origin: center; will-change: transform; } /* ===== Optional: frosted surfaces (opt-in) ===== Add `photo-surface` to any section/article/aside/card that sits atop the photo. We do NOT override Tailwind's light/dark backgrounds globally. */ .photo-surface { background-color: var(--card-bg); border-color: var(--card-border); backdrop-filter: saturate(1.05) blur(var(--card-blur)); } @media (max-width: 1080px) { :root { --bg-pos-y: 40%; /* nudge up on mobile */ } } /* Slight headline legibility on busy images */ .hero-contrast { text-shadow: 0 1px 1px rgba(0,0,0,.12); } .dark .hero-contrast { text-shadow: 0 1px 1px rgba(0,0,0,.35); }