/* ========================================================================== Skins — RAW, CHAOS, VOID, GRID, AURA. SIGNAL is the original design and lives in each page's own stylesheet. NEO is in themes/theme.css. These five share one architecture, flagged with `data-skin` on by the pre-paint script and theme.js: 1. BASE every colour the SIGNAL pages hard-code (#000 text, #fff fills, rgba(255,0,0,…) panels) is re-pointed at a token, once, for all five skins. 2. TOKENS each skin sets the tokens. 3. SIGNATURE each skin's own material — what makes it a different language rather than a palette swap. Surfaces re-declare the text tokens inside themselves. A CHAOS card is cream paper on a near-black ground, so inside `.card` --ink, --muted and --faint are re-pointed at the card's own ink; every existing rule that reads var(--muted) then resolves correctly without being restyled. The moving background is not styled here. theme.js recolours the shared PixelBlast field per skin (themes/theme-config.js → field). ========================================================================== */ /* ================================================================ BASE */ [data-skin] body { background: var(--bg); color: var(--ink); font-family: var(--font); } [data-skin] ::selection { background: var(--accent); color: var(--on-accent); } [data-skin] a:focus-visible, [data-skin] button:focus-visible, [data-skin] .skip:focus-visible, [data-skin] .cs-btn:focus-visible, [data-skin] .cs-evid__open:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } [data-skin] .skip { background: var(--accent); color: var(--on-accent); } /* Surfaces carry their own ink. */ [data-skin] .card, [data-skin] .exp__go, [data-skin] .cs-btn, [data-skin] .cs-callout, [data-skin] .cs-stat, [data-skin] .cs-items > li, [data-skin] .steps > li { --ink: var(--s-ink); --muted: var(--s-muted); --faint: var(--s-faint); --line: var(--s-line); color: var(--s-ink); } /* ---- type */ [data-skin] :is(h1, .hero h1, .section__head h2, .card__title, .exp__title, .worklist h3, .steps h3, .cs-hero h1, .cs-section__head h2, .cs-cta h2, .cs-items h3) { font-family: var(--display); font-weight: var(--display-w); letter-spacing: var(--display-track); text-transform: var(--display-case, none); color: var(--ink); } [data-skin] :is(.lead, .about__lead, .cs-lede, .cs-prose h3, .cs-prose strong, .cs-quote blockquote, .cs-flow q, .cs-meta dd, .cs-stat b, .cs-callout b, .cs-figure figcaption b, .steps em b, .exp__note b, .tally b, .grid li, .about__grid li, .stack__group li, .inline) { color: var(--ink); } [data-skin] :is(.hero h1 i, .section__head h2 i, .nav__mark i, .cs-hero h1 i, .cs-section__head h2 i, .cs-cta h2 i, .cs-lede i, h1 i, .rot__stop) { color: var(--dot); } [data-skin] :is(.eyebrow, .tally, .card__label, .card__no, .card__status, .card__type, .card__role b, .scrollcue, .cs-section__num, .cs-meta dt, .cs-back, .exp__status, .exp__type, .about__more, .cs-note, .cs-stat span, .cs-items__num, .steps__num) { font-family: var(--label); letter-spacing: var(--label-track); } [data-skin] :is(.lead b, .about__lead b) { color: var(--hl-ink); background: var(--hl-bg); box-shadow: 0 0 0 3px var(--hl-bg); } [data-skin] .sub { color: var(--muted); } /* The 404 sets its copy straight on the water; a halo in the ground colour keeps it readable where the dots are densest, in every skin. */ [data-skin] :is(.sub, .links) { text-shadow: 0 0 3px var(--bg), 0 0 12px var(--bg), 0 0 22px var(--bg); } /* ---- nav */ [data-skin] :is(.nav__mark, .nav__links a) { color: var(--ink); } [data-skin] .nav__links a:hover { color: var(--ink); } [data-skin] .nav__links a::after { background: var(--accent-line); } [data-skin] .nav__links a[aria-current="page"] { color: var(--ink); } [data-skin] :is(.nav.is-stuck, .nav--solid) { background: var(--nav-bg); border-bottom-color: var(--line); -webkit-backdrop-filter: var(--nav-blur, none); backdrop-filter: var(--nav-blur, none); } /* ---- hero: the legibility scrim, in the skin's ground */ [data-skin] .hero::after { background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 84%, transparent) 34%, transparent 74%), linear-gradient(0deg, var(--bg) 0%, transparent 26%); } @media (max-width: 768px) { [data-skin] .hero::after { background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 88%, transparent) 40%, color-mix(in srgb, var(--bg) 20%, transparent) 100%), linear-gradient(0deg, var(--bg) 0%, transparent 22%); } } [data-skin] .scrollcue { color: var(--ink); } [data-skin] .scrollcue b { background: linear-gradient(var(--ink), transparent); } [data-skin] .strip { border-top-color: var(--line); } [data-skin] .strip__track span { color: var(--faint); } [data-skin] .strip__track span::after { color: var(--dot); } /* ---- sections and panels: translucent, so the water reads through */ [data-skin] :is(.section, .cs-hero, .cs-section) { background: var(--panel); } [data-skin] :is(.cs-section--tint, .cs-cta, .foot) { background: var(--panel-strong); } [data-skin] .section + .section { border-top-color: var(--line); } [data-skin] :is(.section__head, .cs-section__head, .cs-meta, .cs-index, .exps, .exp) { border-color: var(--line); } [data-skin] :is(.cs-cta, .foot) { border-top-color: var(--line); color: var(--muted); } [data-skin] .tally s { background: var(--line); } [data-skin] :is(.grid li, .about__grid li, .stack__group li, .worklist li, .cs-flow > li) { border-color: var(--line); } /* ---- cards */ [data-skin] .card--live { background: var(--surface); border: var(--card-border, 0); border-radius: var(--radius) !important; box-shadow: var(--card-shadow, none); } [data-skin] .card__fill { background: var(--fill); } [data-skin] .card--feature { overflow: hidden; } [data-skin] .card--feature .card__media { background: var(--media-bg, rgba(0,0,0,0.08)); } [data-skin] .card--feature .card__media::after { box-shadow: inset 0 -1px 0 var(--line); } [data-skin] .card__no { color: var(--accent-text); } [data-skin] .card__title { color: var(--ink); } [data-skin] .card__status { color: var(--ink); border-color: var(--line); border-radius: var(--chip-radius); } [data-skin] .card__status i { background: var(--status); } [data-skin] :is(.card__tags em, .card__systems em, .exp__systems em) { color: var(--muted); border-color: var(--line); border-radius: var(--chip-radius); } [data-skin] .card__disc { background: var(--disc-bg); color: var(--disc-ink); border-radius: var(--disc-radius, 50%); } [data-skin] :is(.card--live:hover, .card--live:active, .card--live:focus-visible) :is(.card__no, .card__label, .card__role b) { color: var(--ink); } [data-skin] :is(.card--live:hover, .card--live:active, .card--live:focus-visible) :is(.card__type, .card__role) { color: var(--muted); } [data-skin] :is(.card--live:hover, .card--live:active, .card--live:focus-visible) :is(.card__status, .card__tags em, .card__systems em) { border-color: var(--ink); } [data-skin] :is(.card--live:hover, .card--live:active, .card--live:focus-visible) .card__status i { background: var(--status); } [data-skin] :is(.card--live:hover, .card--live:active, .card--live:focus-visible) .card__disc { background: var(--disc-hover-bg); color: var(--disc-hover-ink); } [data-skin] .card--soon { border-color: var(--line); border-radius: var(--radius); } [data-skin] .card--soon .card__status i { border-color: var(--ink); } /* Glass is SIGNAL's; theme.js destroys it, this clears anything left over. */ [data-skin] :is(.glass-surface--svg, .glass-surface--fallback) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--surface) !important; } /* ---- experiments */ [data-skin] .exp__status { color: var(--ink); border-color: var(--line); border-radius: var(--chip-radius); } [data-skin] .exp__status i { border-color: var(--ink); background: transparent; } [data-skin] .exp__media--none { border-color: var(--line); color: var(--faint); } [data-skin] .exp__go { background: var(--btn-bg); border: var(--btn-border); border-radius: var(--btn-radius); box-shadow: var(--btn-shadow, none); } [data-skin] :is(.exp__go:hover, .exp__go:focus-visible) { background: var(--btn-hover-bg); color: var(--btn-hover-ink); border-color: var(--btn-hover-bg); } /* ---- about, 404 */ [data-skin] .steps { background: var(--line); border-color: var(--line); } [data-skin] .steps > li { background: var(--steps-bg); } [data-skin] .steps__num { color: var(--accent-text); } [data-skin] .worklist .go, [data-skin] .about__more, [data-skin] .foot__mail, [data-skin] .foot__nav a { color: var(--ink); } [data-skin] :is(.about__more, .foot__mail, .foot__nav a)::after { background: var(--accent-line); } [data-skin] .inline { border-bottom-color: var(--accent-line); } [data-skin] .inline:hover { color: var(--ink); background: var(--hl-bg); } [data-skin] .links a { color: var(--ink); border-bottom-color: var(--accent-line); } [data-skin] .links a:hover { color: var(--hl-ink); background: var(--hl-bg); } /* ---- case studies */ [data-skin] .cs-section__num { color: var(--accent-text); } [data-skin] :is(.cs-meta dd a, .cs-prose a) { color: var(--ink); border-bottom-color: var(--accent-line); } [data-skin] :is(.cs-meta dd a, .cs-prose a):hover { color: var(--hl-ink); background: var(--hl-bg); } [data-skin] .cs-prose li::marker { color: var(--dot); } [data-skin] .cs-figure img { background: var(--media-bg, rgba(0,0,0,0.08)); border-radius: var(--media-radius, 0); } [data-skin] :is(.cs-stats, .cs-items) { background: var(--line); border-color: var(--line); } [data-skin] :is(.cs-stat, .cs-items > li) { background: var(--steps-bg); } [data-skin] :is(.cs-stat b s, .cs-items__num) { color: var(--accent-text); } [data-skin] .cs-callout { background: var(--surface); border-color: var(--line); border-radius: var(--radius); } [data-skin] .cs-btn { background: var(--btn-bg); border: var(--btn-border); border-radius: var(--btn-radius); box-shadow: var(--btn-shadow, none); } [data-skin] .cs-btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); --ink: var(--on-accent); } [data-skin] .cs-btn:hover { background: var(--btn-hover-bg); color: var(--btn-hover-ink); border-color: var(--btn-hover-bg); } [data-skin] .cs-back:hover, [data-skin] .cs-index a:hover { color: var(--ink); } [data-skin] .cs-index b { color: var(--accent-text); } [data-skin] :is(.cs-kbd, .cs-prose code, .cs-figure figcaption code, .cs-flow code) { color: var(--ink); border-color: var(--line); background: var(--code-bg, transparent); } [data-skin] .cs-evid__shot { background: var(--media-bg, rgba(0,0,0,0.08)); } [data-skin] .cs-evid__ver { background: var(--accent); color: var(--on-accent); } [data-skin] .cs-evid__open:hover .cs-evid__ver { background: var(--ink); color: var(--bg); } [data-skin] .cs-evid__label { color: var(--ink); } /* ============================================================== TOKENS */ :root[data-theme="raw"] { --bg: #efece3; --ink: #0b0b0b; --muted: #222; --faint: #383838; --line: #0b0b0b; --accent: #2f45ff; --on-accent: #fff; --accent-text: #0b0b0b; --accent-line: #0b0b0b; --dot: #ff6a13; --hl-bg: #ffe03a; --hl-ink: #0b0b0b; --focus: #2f45ff; --status: #ff6a13; --panel: color-mix(in srgb, #efece3 80%, transparent); --panel-strong: color-mix(in srgb, #efece3 94%, transparent); --nav-bg: #fff; --surface: #fff; --s-ink: #0b0b0b; --s-muted: #222; --s-faint: #383838; --s-line: #0b0b0b; --fill: #ffe03a; --steps-bg: #fff; --code-bg: #fff; --radius: 0px; --chip-radius: 0px; --disc-radius: 0px; --card-border: 3px solid #0b0b0b; --card-shadow: 8px 8px 0 #0b0b0b; --disc-bg: #ffe03a; --disc-ink: #0b0b0b; --disc-hover-bg: #0b0b0b; --disc-hover-ink: #ffe03a; --btn-bg: #fff; --btn-border: 3px solid #0b0b0b; --btn-radius: 0px; --btn-shadow: 5px 5px 0 #0b0b0b; --btn-hover-bg: #2f45ff; --btn-hover-ink: #fff; --font: "Space Grotesk", "Space Grotesk Fallback", Arial, sans-serif; --display: var(--font); --display-w: 700; --display-track: -0.045em; --display-case: uppercase; --label: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --label-track: 0.08em; color-scheme: light; } :root[data-theme="chaos"] { --bg: #1b0a20; --ink: #fff3dc; --muted: rgba(255,243,220,0.86); --faint: rgba(255,243,220,0.74); --line: rgba(255,243,220,0.3); --pink: #ff2e93; --lime: #d4ff3d; --blue: #2a48ff; --tang: #ff7a1c; --accent: #ff2e93; --on-accent: #140b16; --accent-text: #d4ff3d; --accent-line: #d4ff3d; --dot: #d4ff3d; --hl-bg: #ff2e93; --hl-ink: #140b16; --focus: #d4ff3d; --status: #ff2e93; --panel: color-mix(in srgb, #1b0a20 58%, transparent); --panel-strong: color-mix(in srgb, #1b0a20 82%, transparent); --nav-bg: rgba(27,10,32,0.9); --surface: #fff3dc; --s-ink: #140b16; --s-muted: #2c1f2e; --s-faint: #4a3a4c; --s-line: #140b16; --fill: #d4ff3d; --steps-bg: #fff3dc; --code-bg: rgba(255,243,220,0.1); --radius: 6px; --chip-radius: 999px; --disc-radius: 50%; --card-border: 2px solid #140b16; --card-shadow: 12px 12px 0 var(--blue); --disc-bg: #ff2e93; --disc-ink: #140b16; --disc-hover-bg: #140b16; --disc-hover-ink: #d4ff3d; --btn-bg: #fff3dc; --btn-border: 2px solid #140b16; --btn-radius: 999px; --btn-shadow: 5px 5px 0 #d4ff3d; --btn-hover-bg: #ff2e93; --btn-hover-ink: #140b16; --font: "Bricolage Grotesque", Arial, sans-serif; --serif: "Instrument Serif", Georgia, "Times New Roman", serif; --display: var(--font); --display-w: 800; --display-track: -0.05em; --label: var(--font); --label-track: 0.06em; color-scheme: dark; } :root[data-theme="void"] { --bg: #f5f4f0; --ink: #141414; --muted: #4a4a46; --faint: #66665f; --line: rgba(20,20,20,0.13); --accent: #141414; --on-accent: #f5f4f0; --accent-text: #66665f; --accent-line: #141414; --dot: #ff0000; --hl-bg: transparent; --hl-ink: #141414; --focus: #141414; --status: #ff0000; --panel: color-mix(in srgb, #f5f4f0 90%, transparent); --panel-strong: color-mix(in srgb, #f5f4f0 96%, transparent); --nav-bg: rgba(245,244,240,0.94); --surface: transparent; --s-ink: #141414; --s-muted: #4a4a46; --s-faint: #66665f; --s-line: rgba(20,20,20,0.13); --fill: transparent; --steps-bg: #f5f4f0; --radius: 0px; --chip-radius: 0px; --disc-radius: 50%; --disc-bg: transparent; --disc-ink: #141414; --disc-hover-bg: #141414; --disc-hover-ink: #f5f4f0; --btn-bg: transparent; --btn-border: 1px solid rgba(20,20,20,0.3); --btn-radius: 0px; --btn-hover-bg: #141414; --btn-hover-ink: #f5f4f0; --font: "Bricolage Grotesque", Arial, sans-serif; --display: "Instrument Serif", Georgia, "Times New Roman", serif; --display-w: 400; --display-track: -0.01em; --label: var(--font); --label-track: 0.2em; color-scheme: light; } :root[data-theme="grid"] { --bg: #f2f2ee; --ink: #0a0a0a; --muted: #2b2b2b; --faint: #4d4d4d; --line: #0a0a0a; --red: #e3120b; --accent: #e3120b; --on-accent: #fff; --accent-text: #d10f08; --accent-line: #e3120b; --dot: #e3120b; --hl-bg: transparent; --hl-ink: #d10f08; --focus: #e3120b; --status: #e3120b; --panel: color-mix(in srgb, #f2f2ee 90%, transparent); --panel-strong: color-mix(in srgb, #f2f2ee 96%, transparent); --nav-bg: #f2f2ee; --surface: transparent; --s-ink: #0a0a0a; --s-muted: #2b2b2b; --s-faint: #4d4d4d; --s-line: #0a0a0a; --fill: transparent; --steps-bg: #f2f2ee; --radius: 0px; --chip-radius: 0px; --disc-radius: 0px; --disc-bg: #0a0a0a; --disc-ink: #fff; --disc-hover-bg: #e3120b; --disc-hover-ink: #fff; --btn-bg: transparent; --btn-border: 2px solid #0a0a0a; --btn-radius: 0px; --btn-hover-bg: #e3120b; --btn-hover-ink: #fff; --font: "Helvetica Neue", Helvetica, Arial, sans-serif; --display: var(--font); --display-w: 700; --display-track: -0.045em; --label: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --label-track: 0.06em; color-scheme: light; } :root[data-theme="aura"] { --bg: #05060b; --ink: #eef1f7; --muted: #b3bbcc; --faint: #9aa3b6; --line: rgba(255,255,255,0.13); --accent: #8fe8ff; --on-accent: #04121a; --accent-text: #8fe8ff; --accent-line: #8fe8ff; --warm: #ffba6e; --dot: #8fe8ff; --hl-bg: rgba(143,232,255,0.14); --hl-ink: #8fe8ff; --focus: #8fe8ff; --status: #ffba6e; --panel: color-mix(in srgb, #05060b 58%, transparent); --panel-strong: color-mix(in srgb, #05060b 80%, transparent); --nav-bg: rgba(12,14,22,0.62); --nav-blur: blur(18px) saturate(1.4); --surface: rgba(255,255,255,0.06); --s-ink: #eef1f7; --s-muted: #b3bbcc; --s-faint: #9aa3b6; --s-line: rgba(255,255,255,0.14); --fill: rgba(143,232,255,0.07); --steps-bg: rgba(20,23,33,0.82); --code-bg: rgba(255,255,255,0.06); --media-bg: rgba(255,255,255,0.04); --media-radius: 16px; --radius: 22px; --chip-radius: 999px; --disc-radius: 50%; --card-border: 1px solid rgba(255,255,255,0.13); --card-shadow: 0 30px 80px -30px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.1); --disc-bg: rgba(143,232,255,0.12); --disc-ink: #8fe8ff; --disc-hover-bg: #8fe8ff; --disc-hover-ink: #04121a; --btn-bg: rgba(255,255,255,0.05); --btn-border: 1px solid rgba(255,255,255,0.2); --btn-radius: 999px; --btn-hover-bg: #8fe8ff; --btn-hover-ink: #04121a; --font: "Space Grotesk", "Space Grotesk Fallback", Arial, sans-serif; --display: var(--font); --display-w: 300; --display-track: -0.035em; --label: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --label-track: 0.08em; color-scheme: dark; } /* ========================================================== SIGNATURE: RAW Neo-brutalism. Everything shows its construction: hard edges, hard shadows, flat blocks, and nothing eases — things move all at once. */ [data-theme="raw"] .hero h1 { line-height: 0.88; } [data-theme="raw"] :is(.eyebrow, .tally, .scrollcue, .card__label, .card__status, .card__type, .about__more, .cs-back, .cs-meta dt) { text-transform: uppercase; font-weight: 700; color: var(--ink); } [data-theme="raw"] .nav__links a { font-family: var(--label); text-transform: uppercase; font-weight: 700; letter-spacing: 0.06em; font-size: 0.74rem; } [data-theme="raw"] .nav__links a[aria-current="page"] { background: var(--ink); color: #fff; box-shadow: 0 0 0 5px var(--ink); } [data-theme="raw"] .nav__links a::after { height: 3px; } [data-theme="raw"] :is(.nav.is-stuck, .nav--solid) { border-bottom: 3px solid var(--ink); } [data-theme="raw"] :is(.section__head, .cs-section__head) { border-bottom-width: 3px; } [data-theme="raw"] .section + .section { border-top: 3px solid var(--ink); } :root[data-theme="raw"] .eyebrow { display: inline-block; background: var(--ink); color: #fff; padding: 0.3rem 0.55rem; } [data-theme="raw"] .strip { background: var(--ink); border-top: 3px solid var(--ink); } [data-theme="raw"] .strip__track span { color: #fff; font-family: var(--label); text-transform: uppercase; font-weight: 700; } [data-theme="raw"] .card__no { background: var(--ink); color: #fff; padding: 0.1rem 0.4rem; } [data-theme="raw"] .card__status { border-width: 2px; background: var(--dot); } [data-theme="raw"] .card__status i { background: var(--ink); } [data-theme="raw"] :is(.card__tags em, .card__systems em, .exp__systems em) { border-width: 2px; color: var(--ink); font-weight: 700; font-family: var(--label); } [data-theme="raw"] .card__disc { box-shadow: inset 0 0 0 3px var(--ink); } [data-theme="raw"] .card__fill { border-top: 3px solid var(--ink); } [data-theme="raw"] .card--feature .card__media::after { box-shadow: inset 0 -3px 0 var(--ink); } [data-theme="raw"] .card--live, [data-theme="raw"] :is(.exp__go, .cs-btn) { transition: transform 60ms steps(2, end), box-shadow 60ms steps(2, end); } @media (hover: hover) { [data-theme="raw"] .card--live:hover { transform: translate(-3px, -3px) !important; box-shadow: 11px 11px 0 var(--ink); } [data-theme="raw"] :is(.exp__go, .cs-btn):hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); } } [data-theme="raw"] .card--live:active { transform: translate(6px, 6px) !important; box-shadow: 2px 2px 0 var(--ink); } [data-theme="raw"] :is(.exp__go, .cs-btn):active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); } [data-theme="raw"] :is(.exp__go, .cs-btn) { text-transform: uppercase; font-weight: 700; } [data-theme="raw"] .exp { border-bottom-width: 3px; } [data-theme="raw"] .exps { border-top-width: 3px; } [data-theme="raw"] .exp__status { border-width: 2px; background: #fff; font-weight: 700; } [data-theme="raw"] :is(.lead, .about__lead) { font-weight: 700; text-transform: uppercase; letter-spacing: -0.03em; } [data-theme="raw"] :is(.grid li, .about__grid li, .stack__group li, .worklist li) { border-bottom-width: 2px; font-weight: 600; } [data-theme="raw"] :is(.cs-stats, .cs-items, .steps) { border: 3px solid var(--ink); gap: 3px; } [data-theme="raw"] .cs-callout { border: 3px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); } [data-theme="raw"] .cs-figure img { border: 3px solid var(--ink); } [data-theme="raw"] .foot { background: var(--ink); color: #fff; border-top: 3px solid var(--ink); font-family: var(--label); text-transform: uppercase; } [data-theme="raw"] .foot :is(.foot__mail, .foot__nav a) { color: #fff; } [data-theme="raw"] .foot :is(.foot__mail, .foot__nav a)::after { background: var(--hl-bg); } /* ======================================================== SIGNATURE: CHAOS Maximalism, arranged. Every tilt alternates, every colour comes from a set of five, and the reading line — titles, copy, links — is never rotated. The water is left strong: here it is one more layer of motion. */ [data-theme="chaos"] :is(.eyebrow, .tally, .card__label, .about__more, .cs-back) { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1.15rem; color: var(--lime); } /* Copy straight on the moving field gets a dark halo: the dots pass behind it. */ [data-theme="chaos"] :is(.eyebrow, .hero__sub, .tally, .strip__track span, .cs-lede, .cs-meta, .cs-prose p, .sub, .foot, .cs-back, .section > p, .grid p, .about__grid p) { text-shadow: 0 1px 2px rgba(20,11,22,0.9), 0 0 14px rgba(20,11,22,0.8); } [data-theme="chaos"] .hero h1 .line:first-child span { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--lime); letter-spacing: -0.02em; } [data-theme="chaos"] .nav__links a { background: var(--ink); color: #140b16; padding: 0.3rem 0.75rem; border-radius: 999px; font-weight: 700; } [data-theme="chaos"] .nav__links a:nth-child(2) { background: var(--lime); transform: rotate(-3deg); } [data-theme="chaos"] .nav__links a:nth-child(3) { background: var(--pink); transform: rotate(2deg); } [data-theme="chaos"] .nav__links a::after { display: none; } [data-theme="chaos"] .nav__links a:hover { color: #140b16; transform: rotate(0) scale(1.07); } [data-theme="chaos"] .strip { background: var(--pink); border: 0; transform: rotate(-1.2deg); margin: 0 -2%; } [data-theme="chaos"] .strip__track span { color: #140b16; font-weight: 800; text-shadow: none; } [data-theme="chaos"] .strip__track span::after { color: #140b16; } /* A giant outlined number behind every section, counted in CSS. */ [data-theme="chaos"] main { counter-reset: chaos; } [data-theme="chaos"] :is(.section, .cs-section) { counter-increment: chaos; overflow-x: clip; isolation: isolate; } [data-theme="chaos"] :is(.section, .cs-section)::before { content: counter(chaos, decimal-leading-zero); position: absolute; z-index: -1; right: -0.04em; top: -0.1em; pointer-events: none; font: 800 clamp(8rem, 26vw, 22rem)/1 var(--font); letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 2px rgba(255,243,220,0.3); transform: rotate(-7deg); } [data-theme="chaos"] .section__head h2 { font-size: clamp(2.4rem, 7vw, 5.2rem); } /* Cards: a collage — different papers, tilted, a coloured block behind. */ [data-theme="chaos"] .card--live { transform: rotate(-1.4deg) !important; transition: transform 0.35s cubic-bezier(.3,1.5,.5,1), box-shadow 0.35s ease; } [data-theme="chaos"] .card--live:nth-child(2) { background: var(--lime); --card-shadow: 12px 12px 0 var(--pink); transform: rotate(1.4deg) !important; } [data-theme="chaos"] .card--live:nth-child(3) { background: #ffd0e6; --card-shadow: 12px 12px 0 var(--tang); transform: rotate(-0.8deg) !important; } @media (hover: hover) { [data-theme="chaos"] .card--live:hover { transform: rotate(0) scale(1.03) !important; z-index: 5; } } [data-theme="chaos"] .card__status { background: #140b16; color: var(--lime); border-color: #140b16; transform: rotate(-4deg); } [data-theme="chaos"] .card__status i { background: var(--lime); } [data-theme="chaos"] :is(.card__tags em, .card__systems em) { background: #140b16; color: #fff3dc; border-color: #140b16; font-weight: 600; } [data-theme="chaos"] :is(.card__tags em, .card__systems em):nth-child(3n+2) { background: var(--blue); border-color: var(--blue); color: #fff; } [data-theme="chaos"] :is(.card__tags em, .card__systems em):nth-child(3n) { background: var(--tang); border-color: var(--tang); color: #140b16; } [data-theme="chaos"] .card__desc { font-family: var(--serif); font-size: 1.12rem; line-height: 1.4; } :root[data-theme="chaos"] .card__label { color: #140b16; text-shadow: none; } [data-theme="chaos"] .card__no { color: #140b16; } [data-theme="chaos"] :is(.exp__go, .cs-btn) { transform: rotate(-1.5deg); font-weight: 800; } [data-theme="chaos"] :is(.exp__go, .cs-btn):hover { transform: rotate(1deg) scale(1.05); } [data-theme="chaos"] .exp__title { font-size: clamp(1.6rem, 3vw, 2.4rem); } [data-theme="chaos"] :is(.exp__status, .exp__systems em) { border-color: var(--lime); color: var(--lime); } [data-theme="chaos"] :is(.lead, .about__lead) { font-family: var(--serif); font-style: italic; font-weight: 400; } [data-theme="chaos"] :is(.lead b, .about__lead b) { font-family: var(--font); font-style: normal; font-weight: 800; display: inline-block; transform: rotate(-2deg); } [data-theme="chaos"] .steps > li:nth-child(even) { background: var(--lime); } [data-theme="chaos"] .cs-stat:nth-child(3n+2), [data-theme="chaos"] .cs-items > li:nth-child(3n+2) { background: var(--lime); } [data-theme="chaos"] .cs-stat:nth-child(3n), [data-theme="chaos"] .cs-items > li:nth-child(3n) { background: #ffd0e6; } [data-theme="chaos"] .cs-callout { transform: rotate(-0.6deg); box-shadow: 10px 10px 0 var(--pink); } [data-theme="chaos"] .cs-figure img { border: 2px solid #fff3dc; transform: rotate(-0.6deg); box-shadow: 10px 10px 0 var(--blue); } [data-theme="chaos"] .cs-section__num { background: var(--pink); color: #140b16; padding: 0 0.4rem; border-radius: 999px; } [data-theme="chaos"] .cs-hero h1 { font-size: clamp(3rem, 11vw, 9rem); } @media (max-width: 759px) { [data-theme="chaos"] .card--live:nth-child(n) { transform: none !important; --card-shadow: 7px 7px 0 var(--blue); } [data-theme="chaos"] :is(.cs-callout, .cs-figure img, .strip) { transform: none; } } /* ========================================================= SIGNATURE: VOID Minimalism. Almost everything is taken away except typography, alignment and space. One red survives, on the full stops. The water is a pale, slow shimmer — calmed by its colour, never stopped. */ [data-theme="void"] body { font-weight: 300; } [data-theme="void"] :is(.eyebrow, .tally, .card__label, .card__status, .card__type, .scrollcue, .about__more, .cs-back, .cs-meta dt, .exp__status) { font-size: 0.7rem; text-transform: uppercase; font-weight: 400; color: var(--faint); } [data-theme="void"] .hero h1 { line-height: 1; } [data-theme="void"] .nav__links a { color: var(--muted); } [data-theme="void"] .nav__links a[aria-current="page"] { color: var(--ink); } [data-theme="void"] .nav__links a::after { height: 1px; } [data-theme="void"] :is(.nav.is-stuck, .nav--solid) { box-shadow: none; } [data-theme="void"] .strip__track span { font-weight: 300; } [data-theme="void"] .card__fill { display: none; } [data-theme="void"] .card--live { padding-inline: 0; } [data-theme="void"] .card--feature .card__body { padding-inline: 0; } [data-theme="void"] .card--split .card__body { padding-left: clamp(1.5rem, 3vw, 2.6rem); } [data-theme="void"] .card--feature .card__media img { filter: saturate(0.82); transition: filter 0.9s ease, transform 1.2s cubic-bezier(.2,.8,.2,1); } @media (hover: hover) { [data-theme="void"] .card--live:hover { transform: none !important; } [data-theme="void"] .card--feature:hover .card__media img { filter: saturate(1); } } [data-theme="void"] .card__title { font-family: var(--display); } [data-theme="void"] .card__status { border: 0; padding-inline: 0; } [data-theme="void"] :is(.card__tags em, .card__systems em, .exp__systems em) { border: 0; padding: 0; color: var(--faint); letter-spacing: 0.06em; text-transform: none; font-size: 0.78rem; } [data-theme="void"] :is(.card__tags, .card__systems) { gap: 0.2rem 0.9rem; } [data-theme="void"] .card__disc { box-shadow: inset 0 0 0 1px var(--line); } [data-theme="void"] .card__no { font-weight: 400; } [data-theme="void"] :is(.lead b, .about__lead b) { font-style: italic; font-weight: 400; box-shadow: none; } [data-theme="void"] :is(.lead, .about__lead) { font-family: var(--display); font-weight: 400; } [data-theme="void"] :is(.exp__go, .cs-btn) { font-weight: 400; transition: background 0.5s ease, color 0.5s ease; } [data-theme="void"] .cs-figure img { filter: saturate(0.9); } [data-theme="void"] .foot { font-weight: 300; } /* ========================================================= SIGNATURE: GRID Swiss / International Style. A twelve-column grid is drawn on every section and everything is set flush left on it. Hierarchy comes from size, weight and position, not colour — which is black, paper, one red. The water moves under the columns: organic motion under a strict system. */ [data-theme="grid"] :is(.section, .cs-section, .cs-hero)::before { content: ""; position: absolute; inset: 0 var(--edge); z-index: -1; pointer-events: none; background-image: repeating-linear-gradient(90deg, rgba(227,18,11,0.14) 0 1px, transparent 1px calc(100% / 12)); border-right: 1px solid rgba(227,18,11,0.14); } [data-theme="grid"] :is(.section, .cs-section, .cs-hero) { isolation: isolate; } @media (max-width: 759px) { [data-theme="grid"] :is(.section, .cs-section, .cs-hero)::before { background-image: repeating-linear-gradient(90deg, rgba(227,18,11,0.14) 0 1px, transparent 1px calc(100% / 4)); } } [data-theme="grid"] :is(.eyebrow, .tally, .card__label, .card__status, .card__type, .scrollcue, .about__more, .cs-back, .cs-meta dt, .exp__status, .exp__type) { text-transform: uppercase; font-weight: 700; color: var(--ink); } :root[data-theme="grid"] .eyebrow { color: var(--accent-text); } [data-theme="grid"] .nav__links { gap: 0; } [data-theme="grid"] .nav__links a { font-family: var(--label); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.06em; padding: 0.3rem 0.8rem; border-left: 1px solid var(--ink); } [data-theme="grid"] .nav__links a::after { display: none; } [data-theme="grid"] .nav__links a[aria-current="page"], [data-theme="grid"] .nav__links a:hover { color: var(--accent-text); } [data-theme="grid"] :is(.nav.is-stuck, .nav--solid) { border-bottom: 2px solid var(--ink); } [data-theme="grid"] :is(.section__head, .cs-section__head) { border-bottom: 0; border-top: 6px solid var(--ink); padding-top: 1rem; } [data-theme="grid"] .section + .section { border-top: 0; } [data-theme="grid"] .strip { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); } [data-theme="grid"] .strip__track span { color: var(--ink); font-weight: 700; } [data-theme="grid"] .card--live { border-top: 2px solid var(--ink); padding-inline: 0; } [data-theme="grid"] .card--feature .card__body { padding-inline: 0; } [data-theme="grid"] .card--split .card__body { padding-left: clamp(1.5rem, 3vw, 2.6rem); } [data-theme="grid"] .card__fill { display: none; } @media (hover: hover) { [data-theme="grid"] .card--live:hover { transform: none !important; } [data-theme="grid"] .card--live:hover .card__title { color: var(--accent-text); } } [data-theme="grid"] .card__no { font-family: var(--display); font-size: 1.6rem; letter-spacing: -0.04em; font-weight: 700; } [data-theme="grid"] .card__status { border: 0; padding-inline: 0; } [data-theme="grid"] :is(.card__tags em, .card__systems em, .exp__systems em) { border: 0; padding: 0; color: var(--ink); font-family: var(--label); } [data-theme="grid"] :is(.card__tags, .card__systems) { gap: 0.2rem 1rem; } [data-theme="grid"] :is(.card__tags em, .card__systems em)::before { content: "— "; color: var(--accent-text); } [data-theme="grid"] .card--feature .card__media::after { box-shadow: none; } [data-theme="grid"] :is(.lead, .about__lead) { font-weight: 700; letter-spacing: -0.03em; } [data-theme="grid"] :is(.lead b, .about__lead b) { box-shadow: none; } [data-theme="grid"] :is(.exp__go, .cs-btn) { text-transform: uppercase; font-weight: 700; } [data-theme="grid"] .cs-section__num, [data-theme="grid"] .steps__num { font-family: var(--display); font-size: 1.8rem; letter-spacing: -0.05em; } [data-theme="grid"] :is(.cs-stats, .cs-items, .steps) { border-top: 2px solid var(--ink); } [data-theme="grid"] .foot { border-top: 2px solid var(--ink); font-family: var(--label); text-transform: uppercase; color: var(--ink); } /* ========================================================= SIGNATURE: AURA Digital futurism — lit surfaces floating over an environment. The environment is the water, recoloured to a cool night; AURA brings no gradient of its own. One cool accent, one warm status light, a mono voice for the machine and a light face for the human. */ /* Glass re-samples the moving field every frame, so it is kept to the cards and nav, and dropped while scrolling, on reduced-effects tiers, on phones. */ [data-theme="aura"] .card--live { -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); transition: transform 0.5s cubic-bezier(.2,.8,.2,1), border-color 0.4s ease, box-shadow 0.5s ease; } :root[data-theme="aura"]:is([data-scrolling], [data-effects="light"], [data-effects="static"]) :is(.card--live, .nav.is-stuck, .nav--solid) { -webkit-backdrop-filter: none; backdrop-filter: none; } :root[data-theme="aura"]:is([data-scrolling], [data-effects="light"], [data-effects="static"]) .card--live { background: rgba(20,23,33,0.8); } @media (max-width: 759px) { [data-theme="aura"] :is(.card--live, .nav.is-stuck, .nav--solid) { -webkit-backdrop-filter: none; backdrop-filter: none; } [data-theme="aura"] .card--live { background: rgba(20,23,33,0.8); } } @media (hover: hover) { [data-theme="aura"] .card--live:hover { transform: translateY(-6px) !important; border-color: rgba(143,232,255,0.4); box-shadow: 0 40px 90px -30px rgba(0,0,0,0.9), 0 0 50px -10px rgba(143,232,255,0.28), inset 0 1px 0 rgba(255,255,255,0.16); } } [data-theme="aura"] :is(.eyebrow, .tally, .card__label, .card__type, .scrollcue, .about__more, .cs-back, .cs-meta dt) { text-transform: uppercase; font-size: 0.72rem; } :root[data-theme="aura"] .eyebrow { color: var(--accent); } [data-theme="aura"] .eyebrow::before { content: "// "; color: var(--faint); } [data-theme="aura"] :is(.hero h1 i, .section__head h2 i, .cs-hero h1 i, .rot__stop) { text-shadow: 0 0 22px rgba(143,232,255,0.8); } [data-theme="aura"] .nav__links a { font-family: var(--label); font-size: 0.76rem; color: var(--muted); } [data-theme="aura"] .nav__links a[aria-current="page"] { color: var(--accent); text-shadow: 0 0 14px rgba(143,232,255,0.55); } [data-theme="aura"] .card__status { color: var(--warm); border-color: rgba(255,186,110,0.35); } [data-theme="aura"] .card__status i { background: var(--warm); box-shadow: 0 0 10px var(--warm); } [data-theme="aura"] .card--feature .card__media { margin: 0.55rem 0.55rem 0; border-radius: 16px; } [data-theme="aura"] .card__title { font-weight: 400; } [data-theme="aura"] .card__disc { box-shadow: inset 0 0 0 1px rgba(143,232,255,0.4); } [data-theme="aura"] :is(.card--live:hover) .card__disc { box-shadow: 0 0 24px -2px rgba(143,232,255,0.7); } [data-theme="aura"] :is(.exp__go, .cs-btn):hover { box-shadow: 0 0 26px -4px rgba(143,232,255,0.6); } [data-theme="aura"] :is(.lead b, .about__lead b) { box-shadow: 0 0 0 4px var(--hl-bg); border-radius: 4px; } [data-theme="aura"] :is(.cs-stats, .cs-items, .steps) { border-radius: 20px; overflow: hidden; } [data-theme="aura"] .cs-callout { border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } [data-theme="aura"] .cs-figure img { border: 1px solid var(--line); } [data-theme="aura"] .foot { font-family: var(--label); } /* ====================================================== reduced motion */ @media (prefers-reduced-motion: reduce) { [data-skin] .card--live, [data-skin] .card--live:hover, [data-skin] .card--live:active, [data-skin] :is(.exp__go, .cs-btn):is(:hover, :active) { transition: none !important; } [data-theme="raw"] .card--live:is(:hover, :active), [data-theme="aura"] .card--live:hover, [data-theme="chaos"] .card--live:hover { transform: none !important; } }