/* datameta.info — two-theme design system (iteration 8). See design/colors.md. Semantics are theme-independent: four domain accents (IoT / Embedded / Edge ML / Physical AI), one action hue meaning "interactive," neutrals for all structure. Tokens are named by MEANING (--iot, --embedded, --action) never by hue — hue changes with the theme, domain doesn't. night (default) — sky & water after dark: cerulean / euphoric blue / teal / purple on deep indigo-black, with a lavender action hue. day — sunset & daylight: burnt orange / pink / salmon / burgundy on warm paper, with a warm yellow action hue. MATTE, EVERYWHERE. "Pastel matte" is a rule about how HUES ARE PICKED — pigment, not light — not a claim that anything glows. No halos in either theme. The only shadows on the site are hard-offset solid "sticker" drops (0 blur), which are pigment too. ACTION IS TWO TOKENS. --action is the interactive hue as a SHAPE (pill fills, borders, focus rings, sticker shadows). --action-ink is the same signal as TEXT (links, hovers), darkened where the theme's background demands it: day's paper is bright, so a yellow bright enough to feel sunny is unreadable as text (a pastel yellow sits near 1.9:1). Night needs no split — lavender is 9.3:1 on the near-black, so both tokens match. --on-action is the foreground that survives ON an --action fill (both themes' action hues are light, so it resolves to that theme's dark). SOLID vs OUTLINE = the affordance rule, read off a Eurorack front panel. Solid means you can act on it (nav, tabs, the resume button); outline means it's a label (.tag). Shape backs it up: buttons are square blocks, labels are rounded pills. Nothing that does nothing may respond to hover. See the BUTTON VOCABULARY block below. Theme switching: ; main.js flips it (toggle button, localStorage, prefers-color-scheme on first visit, ?theme= override). No JS = night. */ :root, [data-theme="night"] { color-scheme: dark; --bg: #080a18; /* domain accents — identity only */ --iot: #46c8f5; --iot-rgb: 70 200 245; /* soaring cerulean */ --embedded: #4f7df8; --embedded-rgb: 79 125 248; /* euphoric medium blue */ --edgeml: #3ad6b0; --edgeml-rgb: 58 214 176; /* turquoise, green-leaning */ --physai: #9d5cf5; --physai-rgb: 157 92 245; /* medium purple */ /* action — interactive only. Lavender: the hue edgeml vacated, so nothing new was invented. 9.3:1 on --bg, so --action-ink is the same value; no split needed here. */ --action: #b7a4fa; --action-rgb: 183 164 250; --action-ink: #b7a4fa; --on-action: var(--bg); /* readable ON an --action fill: lavender is light, so text goes dark */ /* neutrals */ --ink: #e9ecff; --ink-rgb: 233 236 255; --body: #c6cbe8; --muted: #8489ad; --gray-1: #959bbd; --gray-2: #575d7d; --rule: rgba(255, 255, 255, 0.08); /* prose call-out tints (S~33% of embedded / edgeml) */ --tint-embedded: #b9c2ea; --tint-edgeml: #b8ded2; /* glow: none, in BOTH themes. Kept as tokens (not deleted) so the consuming selectors stay unchanged and a halo can't creep back in one-off. Matte is a system property. */ --name-glow: none; --title-glow: none; --label-glow: none; --tag-glow: none; --cursor-glow: none; /* surfaces */ --card-fill-alpha: 0.04; --btn-bg: #ffffff; --btn-fg: var(--bg); --btn-bg-2: rgb(var(--ink-rgb) / 0.14); /* secondary button — still SOLID (still clickable), just quieter */ --btn-fg-2: var(--ink); --grid-line: rgba(255, 255, 255, 0.05); --scanline-opacity: 0.4; --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --measure: 68ch; --gutter: clamp(1.25rem, 5vw, 2rem); } [data-theme="day"] { color-scheme: light; --bg: #f7f1e4; --iot: #d97e2f; --iot-rgb: 217 126 47; /* burnt orange */ --embedded: #d0487f; --embedded-rgb: 208 72 127; /* pink */ --edgeml: #dd7a5e; --edgeml-rgb: 221 122 94; /* salmon/peach */ --physai: #963f5c; --physai-rgb: 150 63 92; /* burgundy */ /* action, split. The paper is bright (#f7f1e4), so brightness and legibility pull against each other: a sunny pastel yellow reads ~1.9:1 as text — unreadable. So the SHAPE gets the pastel yellow (pill fills, borders, focus rings, sticker shadows) and TEXT gets a deep gold that clears WCAG AA at 4.8:1. The old single #b8860f was 2.9:1 and failed AA for every link on the site. */ --action: #e9c34a; --action-rgb: 233 195 74; /* pastel yellow — shapes */ --action-ink: #8a6208; /* deep gold — text, 4.8:1 on paper */ --on-action: var(--ink); /* readable ON an --action fill: pastel yellow is light, so text goes dark */ --ink: #2b2320; --ink-rgb: 43 35 32; --body: #4d4340; --muted: #93857c; --gray-1: #8a7d72; --gray-2: #b5a99c; --rule: rgba(43, 35, 32, 0.12); --tint-embedded: #a5687f; --tint-edgeml: #a8705f; --name-glow: none; --title-glow: none; --label-glow: none; --tag-glow: none; --cursor-glow: none; --card-fill-alpha: 0.07; --btn-bg: var(--ink); --btn-fg: var(--bg); --btn-bg-2: rgb(var(--ink-rgb) / 0.10); /* secondary button — still SOLID (still clickable), just quieter */ --btn-fg-2: var(--ink); --grid-line: rgba(43, 35, 32, 0.07); --scanline-opacity: 0; } *, *::before, *::after { box-sizing: border-box; } /* Reserve the scrollbar gutter on every page, so navigating between a long page (gallery, has a scrollbar) and a short one (MV teaser, doesn't) can't shift the layout sideways. */ html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; } body { margin: 0; color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background-color: var(--bg); background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 44px 44px, 44px 44px; background-attachment: fixed; transition: background-color 0.35s ease, color 0.35s ease; } /* ambient breathing blobs removed — read as stock/lens-flare. A cursor-reactive version (blobs that gently avoid the pointer, stronger up close) is parked for the main page. */ /* CRT scanlines — a night thing; day fades them out entirely */ .scanlines { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: var(--scanline-opacity); background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.10) 3px, transparent 4px); transition: opacity 0.35s ease; } /* interactive = the action hue, in its TEXT form. The underline fades in cleanly. (It used to strobe on a "tube-flicker" keyframe. Two reasons that's gone: on a 0.82rem link with a 1.5px hairline it read as a render glitch, not a tube light; and the underline sits BELOW the inline box, where it still hit-tests — so pointer jitter across that detached strip dropped :hover and re-fired the strobe from zero, over and over. pointer-events:none below is what actually kills that loop.) */ a { position: relative; color: var(--action-ink); text-decoration: none; transition: color 0.15s ease; } a:hover, a:focus-visible { color: var(--ink); } a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.15em; height: 1.5px; background: var(--action-ink); opacity: 0; pointer-events: none; /* must not extend the link's hover region */ transition: opacity 0.15s ease; } a:hover::after, a:focus-visible::after { opacity: 1; } /* --action-ink, not --action: a focus ring is a thin stroke, and a pastel one on day's paper is ~1.9:1 — an indicator you can't see is worse than none. */ :focus-visible { outline: 2px solid var(--action-ink); outline-offset: 3px; border-radius: 2px; } /* ---- Theme toggle ---- */ /* gooey connected-pill day/night toggle — SVG-native so the goo renders on iOS Safari (a CSS `filter: url()` on an HTML element is the pattern WebKit drops). The active pill lights in --action; the ring's hollow is carved by a --bg-colored knock-out layer, so it tracks the theme. The visual is driven purely off :root[data-theme] — main.js only flips that attribute, no per-node JS. */ .theme-toggle { position: fixed; top: 0.85rem; right: 0.9rem; z-index: 10000; background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; -webkit-tap-highlight-color: transparent; } .tt-goo { display: block; } .tt-blob { fill: var(--gray-2); transition: fill 0.18s ease; } /* inactive ring color */ .tt-knock { fill: var(--bg); } /* carves the ring hollow = page bg */ :root[data-theme="day"] .tt-blob.is-day { fill: var(--action); } /* active pill = action color */ :root[data-theme="night"] .tt-blob.is-night { fill: var(--action); } /* same rule, no exceptions: the lit pill is ALWAYS --action. The ☀/☾ glyph carries day-vs-night; the pill carries active-vs-not. A cool "moon-colored" pill would be the one element in the night theme not following the universal active=--action rule. */ .tt-ico { font-family: var(--mono); font-size: 20px; fill: var(--gray-1); } :root[data-theme="day"] .tt-ico.is-day { fill: var(--ink); } /* active icon = bright ink */ :root[data-theme="night"] .tt-ico.is-night { fill: var(--ink); } /* ---- BUTTON VOCABULARY ---------------------------------------------------- The site's affordance rule, borrowed from a Eurorack front panel: the marking tells you whether the thing takes an action. SOLID = you can act on it — .site-nav, .pf-tabs OUTLINE = it is a label — .tag (a domain descriptor, not a control) One definition, three consumers. The pill/outline treatment these nav links used to wear was the same recipe as .tag (mono, uppercase, 1.5px border, 999px radius), which made a non-clickable descriptor and a clickable link read identically. Solid vs outline is now the whole signal, so shape carries it too: buttons are square blocks, labels are rounded pills. */ .site-nav, .pf-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; } .site-nav { padding: 1.5rem 0 1.9rem; } .pf-tabs { padding: 1.6rem 0 2.6rem; } .site-nav a, .pf-tabs a { display: inline-block; padding: 0.7em 1.1em; font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--btn-fg); background: var(--btn-bg); box-shadow: 4px 4px 0 rgb(var(--action-rgb) / 0.6); transition: transform 0.15s ease, box-shadow 0.15s ease; } /* filled button, not an underline link */ .site-nav a::after, .pf-tabs a::after { content: none; } /* the sticker lifts toward you. :focus-visible must re-assert the fill's own foreground — the global `a:focus-visible { color: var(--ink) }` would otherwise paint day's near-black ink onto day's near-black button. */ .site-nav a:hover, .site-nav a:focus-visible, .pf-tabs a:hover, .pf-tabs a:focus-visible { color: var(--btn-fg); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgb(var(--action-rgb) / 0.85); } /* SECONDARY button — still solid (still clickable, rule intact), just a quieter fill. Two identical buttons side by side dilute each other, and a recruiter's sequence puts the WORK before "who you are" — so Portfolio stays the primary and the resume rides beside it as the second option, not a twin. (It is still the full primary button down in Contact, where it IS that section's action.) */ .btn-2 { background: var(--btn-bg-2); color: var(--btn-fg-2); box-shadow: 3px 3px 0 rgb(var(--action-rgb) / 0.35); } .btn-2:hover, .btn-2:focus-visible { color: var(--btn-fg-2); box-shadow: 5px 5px 0 rgb(var(--action-rgb) / 0.6); } /* You-are-here. Follows the universal active = --action rule with no exception (same rule that lights the theme toggle's pill), and sits flat on the page — its shadow is gone because the button is already pressed in. */ .pf-tabs a[aria-current="page"], .pf-tabs a[aria-current="page"]:hover, .pf-tabs a[aria-current="page"]:focus-visible { background: var(--action); color: var(--on-action); box-shadow: none; transform: none; } /* ---- Hero ---- */ .hero { text-align: center; max-width: 54rem; margin: 0 auto; padding: clamp(4rem, 12vw, 7rem) var(--gutter) clamp(2.5rem, 7vw, 3.5rem); } /* nameplate — neutral; the glitch (all four domain accents) is its only color */ .name { position: relative; margin: 0; font-family: var(--mono); font-weight: 700; font-size: clamp(2.2rem, 8vw, 4rem); line-height: 1.05; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); filter: var(--name-glow); } /* glitch fringes — hidden until JS adds .is-glitching, then one short burst */ .glitch::before, .glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; background: none; z-index: -1; opacity: 0; pointer-events: none; } .glitch.is-glitching::before { color: var(--embedded); -webkit-text-fill-color: var(--embedded); text-shadow: 2px 0 var(--edgeml); animation: glitchA 0.42s steps(2) 1; } .glitch.is-glitching::after { color: var(--iot); -webkit-text-fill-color: var(--iot); text-shadow: -2px 0 var(--physai); animation: glitchB 0.42s steps(2) 1; } @keyframes glitchA { 0% { opacity: 0.9; transform: translate(-3px, 1px); clip-path: inset(14% 0 56% 0); } 25% { transform: translate(3px, -1px); clip-path: inset(62% 0 12% 0); } 50% { transform: translate(-2px, 0); clip-path: inset(36% 0 40% 0); } 75% { transform: translate(2px, 1px); clip-path: inset(8% 0 72% 0); } 100% { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 0 0); } } @keyframes glitchB { 0% { opacity: 0.9; transform: translate(3px, -1px); clip-path: inset(50% 0 30% 0); } 25% { transform: translate(-3px, 1px); clip-path: inset(20% 0 55% 0); } 50% { transform: translate(2px, 0); clip-path: inset(70% 0 8% 0); } 75% { transform: translate(-2px, -1px); clip-path: inset(40% 0 38% 0); } 100% { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 0 0); } } .role { margin: 1.2rem 0 0; font-family: var(--mono); font-weight: 500; font-size: clamp(1rem, 2.4vw, 1.2rem); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); } .cursor { display: inline-block; width: 0.55ch; height: 1.05em; margin-left: 0.35ch; vertical-align: -0.12em; background: var(--ink); box-shadow: var(--cursor-glow); animation: blink 1.05s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* tags — OUTLINE, because they are labels, not controls. Each wears its domain accent via --tag/--tag-rgb. No hover response: a that lifts under the pointer is the strongest "click me" signal a pill can send, and these do nothing. */ .tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 1.1rem 0 0; padding: 0; } .tag:nth-child(1) { --tag: var(--iot); --tag-rgb: var(--iot-rgb); } .tag:nth-child(2) { --tag: var(--embedded); --tag-rgb: var(--embedded-rgb); } .tag:nth-child(3) { --tag: var(--edgeml); --tag-rgb: var(--edgeml-rgb); } .tag:nth-child(4) { --tag: var(--physai); --tag-rgb: var(--physai-rgb); } .tag { font-family: var(--mono); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.4em 0.8em; border: 1.5px solid var(--tag); border-radius: 999px; color: var(--tag); box-shadow: var(--tag-glow); } .tagline { max-width: 44ch; margin: 1.9rem auto 0; font-size: clamp(1.05rem, 2.3vw, 1.25rem); line-height: 1.55; color: var(--ink); opacity: 0.92; } /* ---- Sections (neutral labels) ---- */ main { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); } .block { padding: clamp(3rem, 8vw, 5rem) 0; border-top: 1px solid var(--rule); } /* NO rule above the FIRST block. The dividers separate one section from the next, and there is no section above the first one — what sat above it was the hero's nav buttons, so the line read as a Hero/Rest divider that was hung too close to be one, and it implied a matching line was missing above the buttons. There isn't one missing; this one was extra. Without it the buttons breathe on both sides, which is all they ever needed. */ .block:first-of-type { border-top: none; } .section-title { margin: 0 0 2.2rem; font-family: var(--mono); font-weight: 700; font-size: 1rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray-1); text-shadow: var(--label-glow); } .section-title::before { content: "// "; color: var(--gray-2); } /* ---- What I Work On (2x2; each card = its domain via --card) ---- */ .work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 3vw, 1.75rem); } .work-item:nth-child(1) { --card: var(--embedded); --card-rgb: var(--embedded-rgb); } /* Firmware -> Embedded */ .work-item:nth-child(2) { --card: var(--edgeml); --card-rgb: var(--edgeml-rgb); } /* Embedded ML -> Edge ML */ .work-item:nth-child(3) { --card: var(--iot); --card-rgb: var(--iot-rgb); } /* IoT */ .work-item:nth-child(4) { --card: var(--physai); --card-rgb: var(--physai-rgb); } /* Physical AI */ .work-item { position: relative; padding: 1.5rem 1.3rem; border: 1.5px solid var(--card); background: rgb(var(--card-rgb) / var(--card-fill-alpha)); box-shadow: 6px 6px 0 rgb(var(--card-rgb) / 0.25); transition: transform 0.18s ease, box-shadow 0.18s ease; } .work-item:hover { transform: translate(-2px, -2px); box-shadow: 8px 10px 0 rgb(var(--card-rgb) / 0.4); } .work-title { margin: 0 0 0.6rem; font-family: var(--mono); font-weight: 700; font-size: 0.98rem; color: var(--card); text-shadow: var(--title-glow); } .work-item p { margin: 0; font-size: 0.95rem; color: var(--body); } /* ---- Projects (neutral; synth earns the 4-domain gradient) ---- */ .project { position: relative; margin: 0 0 2.5rem; padding-left: 1.1rem; border-left: 3px solid var(--gray-2); } .project:last-of-type { margin-bottom: 0; } .project-title { margin: 0 0 0.7rem; font-family: var(--mono); font-weight: 700; font-size: 1.15rem; color: var(--ink); } .project p { margin: 0; color: var(--body); } .project-link { margin-top: 0.9rem !important; font-family: var(--mono); font-size: 0.9rem; } /* the synth project touches all four domains; Demoscene stays gray (pure JS, genuinely outside the four) */ .project--all-domains { border-left: none; } .project--all-domains::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(to bottom, var(--iot) 0%, var(--embedded) 33%, var(--edgeml) 66%, var(--physai) 100%); } /* inline domain call-outs in prose — quiet, like syntax highlighting on a bio */ .tint--embedded { color: var(--tint-embedded); } .tint--edgeml { color: var(--tint-edgeml); } /* ---- About / Contact ---- */ .prose { margin: 0; color: var(--body); } .email { text-align: center; margin: 1.6rem 0 0; } .email a { font-size: 1.15rem; } /* ---- Portfolio section pages — shared chrome ---- */ /* Code Golf and Movement Voltage share a nav strip, so they must share the header that sits above it. Defined ONCE here and used by both: duplicating these into each page is how the back-link, title, and subtitle drifted out of alignment and made the strip jump between pages. */ .pf-wrap { max-width: min(1280px, 96vw); margin: 0 auto; padding: 0 var(--gutter); } .pf-hero { text-align: center; padding: clamp(3.5rem, 10vw, 6rem) 0 clamp(2rem, 5vw, 3rem); } .pf-back { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.06em; } .pf-title { margin: 1.4rem 0 0; font-family: var(--mono); font-weight: 700; font-size: clamp(2rem, 7vw, 3.4rem); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); filter: var(--name-glow); } .pf-sub { margin: 0.6rem 0 0; font-family: var(--mono); font-weight: 500; font-size: clamp(0.95rem, 2.2vw, 1.15rem); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-1); } /* On a phone the fixed controls sit over the hero; it only needs to clear one line of them. */ @media (max-width: 640px) { .pf-hero { padding-top: 4.25rem; } } /* ---- Portfolio section nav ---- */ /* Reads as tabs, IS navigation. Code Golf and Movement Voltage are separate destinations with their own URLs, not two views of one object — so these are real links in a