/* Variables, reset, and global typography. Change colors/fonts here — affects the whole site. */ :root{ --paper:#EDEBE3; --ink:#111111; --red:#FF3B1F; --caution:#F5C400; } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{ background:var(--paper); color:var(--ink); font-family:'IBM Plex Mono', monospace; font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; } ::selection{background:var(--ink);color:var(--paper);} .display{ font-family:'Archivo Black', sans-serif; text-transform:uppercase; letter-spacing:-0.02em; } a{color:inherit;} a:focus-visible, button:focus-visible{ outline:3px solid var(--red); outline-offset:2px; } @media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} } /* ============================================ THEME SWITCHER — dark mode via variable invert, with a circle-wipe transition originating from the cursor (View Transitions API), plus a plain color-fade fallback for browsers that don't support it. Replace the theme block you previously appended to css/base.css with this version. ============================================ */ [data-theme="dark"]{ --paper:#3E3E3E; --ink:#EDEBE3; } /* "system" follows the OS preference */ @media (prefers-color-scheme: dark){ [data-theme="system"]{ --paper:#3E3E3E; --ink:#EDEBE3; } } /* ----- Fallback: plain color fade for browsers without the View Transitions API. theme.js adds .no-vt to when document.startViewTransition is unavailable. ----- */ .no-vt *, .no-vt *::before, .no-vt *::after{ transition:background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease; } /* ----- Circle-wipe reveal, driven by --theme-x / --theme-y / --theme-radius, set from the click position in theme.js. ----- */ ::view-transition-old(root), ::view-transition-new(root){ animation:none; mix-blend-mode:normal; } ::view-transition-old(root){ z-index:1; } ::view-transition-new(root){ z-index:2; } @keyframes theme-circle-reveal{ from{ clip-path:circle(0px at var(--theme-x, 50%) var(--theme-y, 50%)); } to{ clip-path:circle(var(--theme-radius, 150%) at var(--theme-x, 50%) var(--theme-y, 50%)); } } ::view-transition-new(root){ animation:theme-circle-reveal .6s ease-in-out; }