/* ═══════════════════════════════════════════════════ THEMES Each theme re-declares the design tokens from style.css `:root`. The default theme ("sage") is style.css itself and has no block here. A theme is selected by , set by theme.js. To add a theme: copy a block, rename it, add the name to THEMES in theme.js. To make a theme the live default: change DEFAULT in theme.js. ═══════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────── SYNTH — the hardware photo, measured rather than remembered. Sampled from the reference: the panel is a mid-tone, dusty green (#A7BE9A where the light hits, #788D6F in the far corner); the knobs and keys are pale grey-green, not white; the controls are small dark slate pads; and the only bright things are the lit LEDs. So: a dim, soft-lit panel with a light falloff and fine grain, matte parts casting one shadow away from the light, slate pads, glowing dots. No black blocks. ─────────────────────────────────────────────────── */ :root[data-theme="synth"] { --bg: #A9BD9E; --panel-lit: #B3C6A8; --panel-shade: #97AB8D; --surface: #9BB091; --surface-light: #B4C6AA; --surface-dark: #7E9375; --card: linear-gradient(145deg, #D2DBD2 0%, #C4CFC5 55%, #B9C5BB 100%); --card-highlight: #DDE5DC; --card-shadow: #74886C; --text-primary: #121813; --text-secondary: #263228; --text-muted: #303D33; --accent: #184229; --accent-dark: #12351F; /* Sections are transparent so the lit panel shows through everywhere. */ --bg-hero: transparent; --bg-about: transparent; --bg-projects: color-mix(in srgb, var(--shadow-ink) 7%, transparent); --bg-publications: transparent; --bg-contact: transparent; --led-cyan: #F4F7F0; /* the white lit pad */ --led-yellow: #FFEE7A; --led-pink: #FF9FCB; --led-green: #F4F7F0; --led-blue: #859395; --led-coral: #FF9FCB; --led-cyan-off: #657473; /* unlit: dark slate rubber */ --led-yellow-off: #657473; --led-pink-off: #657473; --led-green-off: #657473; --shadow-ink: #24331F; /* shadows on the panel are green-dark, not black */ --line: #6F8566; --nav-solid: #A9BD9E; --menu-bg: #B4C6AA; --hover-tint: rgba(255, 255, 255, 0.18); --hover-lighten: rgba(255, 255, 255, 0.25); --accent-bright: #FFEE7A; --status-pub-text: #2F3F4C; --amber-text: #5C3F0E; --amber-strong: #8A6212; --amber-star: #8A6212; /* One light, top-left: a hairline highlight on the lit edge, a tight contact shadow and a long soft one falling to the bottom-right. */ --neu-raised: inset 1px 1px 0 color-mix(in srgb, #FFFFFF 45%, transparent), 2px 3px 4px color-mix(in srgb, var(--shadow-ink) 26%, transparent), 8px 14px 24px color-mix(in srgb, var(--shadow-ink) 18%, transparent); --neu-pressed: inset 2px 3px 5px color-mix(in srgb, var(--shadow-ink) 32%, transparent), inset -1px -1px 0 color-mix(in srgb, #FFFFFF 25%, transparent); --neu-hover: inset 1px 1px 0 color-mix(in srgb, #FFFFFF 50%, transparent), 1px 2px 3px color-mix(in srgb, var(--shadow-ink) 28%, transparent), 4px 7px 12px color-mix(in srgb, var(--shadow-ink) 16%, transparent); --neu-surface: inset 1px 1px 0 color-mix(in srgb, #FFFFFF 40%, transparent), 3px 5px 6px color-mix(in srgb, var(--shadow-ink) 22%, transparent), 12px 20px 34px color-mix(in srgb, var(--shadow-ink) 18%, transparent); --pad: #5F6F6C; --pad-text: #EEF2EC; --figure-paper: #E9ECE7; } /* The panel itself: light falling off from the top-left, plus fine grain. Fixed to the viewport, so content scrolls over a surface that stays lit the same way — as if the screen were the panel. */ :root[data-theme="synth"] body { background: var(--panel-shade); } :root[data-theme="synth"] body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0.12 0.12 0.12 0 0.32 0.12 0.12 0.12 0 0.32 0.12 0.12 0.12 0 0.32 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(130% 120% at 16% 10%, var(--panel-lit) 0%, var(--bg) 42%, var(--panel-shade) 100%); background-blend-mode: soft-light, normal; } /* Parts cast their shadow away from the light; no light halo on hover. */ :root[data-theme="synth"] .project-card { border-color: transparent; box-shadow: var(--neu-raised); } :root[data-theme="synth"] :is(.project-card, .btn-primary, .contact-card):hover { box-shadow: inset 1px 1px 0 color-mix(in srgb, #FFFFFF 50%, transparent), 4px 6px 6px color-mix(in srgb, var(--shadow-ink) 24%, transparent), 14px 22px 34px color-mix(in srgb, var(--shadow-ink) 18%, transparent); } /* Depth has a meaning: only things you can press are raised (buttons, project cards, contact links). Things you only read sit flat on the panel or in a shallow recess, and don't lift on hover. */ :root[data-theme="synth"] .milestone-card, :root[data-theme="synth"] .milestone-card:hover { background: color-mix(in srgb, #FFFFFF 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--shadow-ink) 10%, transparent); transform: none; } :root[data-theme="synth"] .project-key-card { background: color-mix(in srgb, #FFFFFF 14%, transparent); box-shadow: inset 2px 3px 6px color-mix(in srgb, var(--shadow-ink) 20%, transparent), inset -1px -1px 0 color-mix(in srgb, #FFFFFF 30%, transparent); } :root[data-theme="synth"] .project-body :is(img, video) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--shadow-ink) 10%, transparent); } /* Figures sit on flat pale paper, not on the faded card: their own colours need an even, light ground to stay readable. */ :root[data-theme="synth"] .project-body img { background: var(--figure-paper); } /* The hero pills are the slate rubber pads. Each has an LED socket — a dark hole when unlit — and one lights at a time, stepping along the row like a sequencer. One light on at any moment keeps it scarce. */ :root[data-theme="synth"] .hero-pill { background: var(--pad); color: var(--pad-text); box-shadow: 1px 2px 3px color-mix(in srgb, var(--shadow-ink) 34%, transparent); } :root[data-theme="synth"] .hero-pill .pill-dot { background: #29322F; box-shadow: inset 0 1px 2px color-mix(in srgb, #000000 65%, transparent), 0 1px 0 color-mix(in srgb, #FFFFFF 16%, transparent); animation: synth-step 8s linear infinite; } :root[data-theme="synth"] .hero-pill:nth-child(2) .pill-dot { animation-delay: 2s; } :root[data-theme="synth"] .hero-pill:nth-child(3) .pill-dot { animation-delay: 4s; } :root[data-theme="synth"] .hero-pill:nth-child(4) .pill-dot { animation-delay: 6s; } @keyframes synth-step { 0%, 21% { background: var(--led-yellow); box-shadow: 0 0 7px 2px color-mix(in srgb, var(--led-yellow) 75%, transparent); } 25%, 100% { background: #29322F; box-shadow: inset 0 1px 2px color-mix(in srgb, #000000 65%, transparent), 0 1px 0 color-mix(in srgb, #FFFFFF 16%, transparent); } } @media (prefers-reduced-motion: reduce) { :root[data-theme="synth"] .hero-pill .pill-dot { animation: none; } :root[data-theme="synth"] .hero-pill:first-child .pill-dot { background: var(--led-yellow); box-shadow: 0 0 7px 2px color-mix(in srgb, var(--led-yellow) 75%, transparent); } } /* One lit LED marks the key result instead of a dark block. */ :root[data-theme="synth"] .project-key-label::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; vertical-align: baseline; background: var(--led-yellow); box-shadow: 0 0 8px 2px color-mix(in srgb, var(--led-yellow) 70%, transparent); } /* ─────────────────────────────────────────────────── Theme picker — only rendered by theme.js on localhost, or in a browser where a theme has been chosen with ?theme=… ─────────────────────────────────────────────────── */ .theme-picker { position: fixed; left: 16px; bottom: 16px; z-index: 2000; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 999px; background: color-mix(in srgb, #111111 82%, transparent); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.04em; } .theme-picker button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 5px; border: 0; border-radius: 999px; background: transparent; color: #C9C9C9; font: inherit; cursor: pointer; } .theme-picker button:hover { color: #FFFFFF; } .theme-picker button[aria-pressed="true"] { background: color-mix(in srgb, #FFFFFF 16%, transparent); color: #FFFFFF; } .theme-picker .swatch { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1px color-mix(in srgb, #FFFFFF 35%, transparent); } @media (max-width: 640px) { .theme-picker button { padding: 4px; } .theme-picker .name { display: none; } }