/* ========================================================================== exp28 . REVIEW-ONLY theme overrides — WILD EDITION Applied via data-attrs on set by review.js (head, pre-paint). data-theme: paper (default, no rules) . riso . terminal . brutal . acid . olo . night data-font: grotesk (default, no rules) . bricolage (terminal forces mono everywhere and ignores data-font; riso + brutal force Bricolage display by art direction) data-field: calm (review default) . full (no rules) . off (brutal forces the field off regardless of data-field) Every theme block: token overrides first, then structural art direction. Delete this file + review.js + the two head lines per page to ship. ========================================================================== */ /* ---------- shared display face (available to every theme) ---------- */ @font-face{ font-family:"Bricolage Grotesque"; src:url("../../assets/bricolage-grotesque-var.woff2") format("woff2"); font-weight:300 800;font-style:normal;font-display:swap; } /* ---------- font: bricolage — display faces only, body stays Grotesk ---------- */ html[data-font="bricolage"] h1, html[data-font="bricolage"] h2, html[data-font="bricolage"] h3, html[data-font="bricolage"] .hero-sub{font-family:"Bricolage Grotesque",var(--sans);} html[data-font="bricolage"] h1{letter-spacing:-.038em;} html[data-font="bricolage"] h2{letter-spacing:-.032em;} html[data-font="bricolage"] h3{letter-spacing:-.02em;} /* ---------- field: calm — gentle behind the hero, whisper below, and a top-fade (0 -> .65 over the first 120px) so the field never competes with the sticky header. Targets .field canvas ONLY: the .colony-hdr user-colony overlay and .field-embers sit beside the canvas and must never inherit this dimming. ---------- */ html[data-field="calm"] .field canvas{ opacity:.45; -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0,rgba(0,0,0,.65) 120px,rgba(0,0,0,.6) 720px,rgba(0,0,0,.08) 1300px,rgba(0,0,0,.08) 100%); mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0,rgba(0,0,0,.65) 120px,rgba(0,0,0,.6) 720px,rgba(0,0,0,.08) 1300px,rgba(0,0,0,.08) 100%); } /* ---------- field: off ---------- */ html[data-field="off"] .field{display:none;} /* ---------- field badge + controls (review.js) ---------- field.js builds its .colony-hud lazily and ONLY once a painted colony is alive, so controls hung off it vanish whenever there is no colony — which is most of the time. This badge is ours and is always present instead: it is the single control surface, so ⏸/reset never move and never disappear. When field.js's own HUD is up it takes over the narration (fate messages), and this badge drops its duplicate counters and shows only the controls. */ .field-hud{ position:fixed;left:14px;bottom:calc(var(--rvw-clear,64px) + env(safe-area-inset-bottom,0px)); z-index:6;display:flex;align-items:baseline;gap:.5em;white-space:nowrap; font:500 .62rem/1.4 var(--mono);letter-spacing:.05em;color:var(--ink-60); background:var(--wash);border:1px solid var(--hair-strong);padding:.3rem .55rem; } .field-hud .fh-n{opacity:.75;} /* field.js's HUD is narrating the same numbers — don't say them twice */ .field-hud.has-hud .fh-n{display:none;} .hud-btn{ appearance:none;border:0;background:none;padding:0 .1em;margin:0;cursor:pointer; font:inherit;font-size:.6rem;letter-spacing:.05em;color:inherit;opacity:.55; } .hud-btn:hover,.hud-btn:focus-visible{opacity:1;} .hud-btn:focus-visible{outline:1px solid var(--hair-strong);outline-offset:1px;} /* brutal forces the field off wholesale — pause/resume would do nothing */ html[data-theme="brutal"] .field-hud{display:none;} /* the fate badge fades via opacity only — pull it out of hit-testing and the tab order while it is not shown */ .colony-hud:not(.on){visibility:hidden;transition:opacity .45s ease,visibility 0s .45s;} /* REVIEW-ONLY stacking: site.css parks the fate badge at bottom-left, exactly where the review pill sits. review.js measures the pill into --rvw-clear and our badge into --fh-clear, so pill / field-hud / fate badge stack upward and all three stay reachable. Shipping deletes this file and it drops back. */ .colony-hud{bottom:calc(var(--fh-clear,100px) + env(safe-area-inset-bottom,0px));} /* off: no world to narrate — the .field-hud carries the resume affordance */ html[data-field="off"] .colony-hud{display:none;} /* ---------- the olo easter-egg line (injected by review.js, olo-only) ---------- */ .olo-note{display:none;} /* ========================================================================== THEME: night — full dark stage (the old "dark", renamed) ========================================================================== */ html[data-theme="night"]{ --paper:#0E0F13; --card:#15161C; --ink:#EDEBE3; --ink-rgb:237,235,227; --ink-60:rgba(237,235,227,.66); --ink-40:rgba(237,235,227,.44); --muted:#8B8A94; --hair:rgba(237,235,227,.14); --hair-strong:rgba(237,235,227,.32); --signal:#7D8CFF; --signal-rgb:125,140,255; --fail:#FF6B54; --pass:#3DDC84; --wash:rgba(14,15,19,.8); } /* shadows: ink-tint glows read wrong on dark — go black, slightly deeper */ html[data-theme="night"] .site-header.is-stuck{box-shadow:0 8px 24px rgba(0,0,0,.5);} html[data-theme="night"] .nav-menu nav{box-shadow:0 14px 40px rgba(0,0,0,.6);} html[data-theme="night"] .frame{ border-color:rgba(237,235,227,.22); box-shadow:0 1px 0 rgba(0,0,0,.25),0 14px 40px rgba(0,0,0,.45); } /* light screenshots inside dark frames get a delineating inner hairline */ html[data-theme="night"] .frame img{outline:1px solid rgba(237,235,227,.12);outline-offset:-1px;} /* primary CTA: ink bg turned pale — make it signal with dark text instead */ html[data-theme="night"] .btn-primary{background:var(--signal);border-color:var(--signal);color:#0E0F13;} html[data-theme="night"] .btn-primary:hover{background:var(--ink);border-color:var(--ink);color:#0E0F13;} html[data-theme="night"] .btn:hover{color:#0E0F13;} html[data-theme="night"] .skip{color:#0E0F13;} html[data-theme="night"] ::selection{background:var(--signal);color:#0E0F13;} /* select arrow data-URI is baked ink — repaint pale */ html[data-theme="night"] .lead-form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23EDEBE3' stroke-width='1.5'/%3E%3C/svg%3E");} /* field canvas pixels are baked light — invert to sit on the dark ground */ html[data-theme="night"][data-field] .field canvas{filter:invert(1) hue-rotate(180deg);opacity:.28;} /* ========================================================================== THEME: olo — the impossible color. Warm paper stays; every accent role becomes the closest displayable approximation of olo (pure M-cone, LMS (0,1,0)) — an ultra-saturated blue-green no monitor can prove. ========================================================================== */ html[data-theme="olo"]{ --signal:#00D9A3; --signal-rgb:0,217,163; --pass:#00D9A3; } @media (color-gamut: p3){ html[data-theme="olo"]{ --signal:color(display-p3 0 0.94 0.72); --pass:color(display-p3 0 0.94 0.72); } } /* dosage: kicker, buttons, wordmark dot, facts separators all go olo */ html[data-theme="olo"] .kicker{color:var(--signal);} html[data-theme="olo"] .kicker::before{box-shadow:0 0 10px rgba(0,217,163,.7);} html[data-theme="olo"] .btn{background:var(--signal);border-color:var(--signal);color:var(--ink);} html[data-theme="olo"] .btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);} html[data-theme="olo"] .btn-ghost{background:transparent;color:var(--ink);border-color:rgba(0,217,163,.6);} html[data-theme="olo"] .btn-ghost:hover{border-color:var(--signal);color:var(--ink);background:rgba(0,217,163,.08);} html[data-theme="olo"] .tile-n{color:var(--signal);} html[data-theme="olo"] h2 em,html[data-theme="olo"] .accent{color:var(--signal);font-style:normal;} /* H1 gets an olo full stop after the sentence */ html[data-theme="olo"] h1::after{ content:"";display:inline-block;width:.13em;height:.13em;margin-left:.08em; border-radius:50%;background:var(--signal);box-shadow:0 0 14px rgba(0,217,163,.65); } /* hero facts: olo separators between the facts */ html[data-theme="olo"] .facts span + span::before{content:"◆ ";color:var(--signal);font-size:.8em;} /* a very faint olo wash over the top of the hero */ html[data-theme="olo"] .hero::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(64% 72% at 28% 0%,rgba(0,217,163,.07),transparent 70%); } html[data-theme="olo"] .cta-quiet:hover{color:var(--signal);border-bottom-color:var(--signal);} /* the easter egg line: mono, muted, one line, olo swatch in front */ html[data-theme="olo"] .olo-note{ display:block;margin:1rem 0 0; font-family:var(--mono);font-size:.63rem;line-height:1.7;letter-spacing:.01em;color:var(--muted); } html[data-theme="olo"] .olo-note::before{ content:"";display:inline-block;width:.85em;height:.85em;margin-right:.5em;vertical-align:-.14em; border-radius:50%;background:url("hdr/hdr-olo.png") center/100% 100% no-repeat; box-shadow:0 0 9px rgba(0,217,163,.8); } html[data-theme="olo"] .site-footer .olo-note{margin:.6rem 0 0;} /* field canvas leans faintly olo */ html[data-theme="olo"][data-field] .field canvas{filter:sepia(1) hue-rotate(115deg) saturate(1.9);opacity:.32;} /* ========================================================================== THEME: riso — risograph print. Warm paper, two overprint inks (klein blue + hot pink), misregistered solid offsets, Bricolage 800 caps. ========================================================================== */ html[data-theme="riso"]{ --paper:#FFF7EA; --card:#FFFCF2; --ink:#241E55; --ink-rgb:36,30,85; --ink-60:rgba(36,30,85,.68); --ink-40:rgba(36,30,85,.46); --muted:#625C8F; --hair:#E9DFC8; --hair-strong:rgba(36,30,85,.4); --signal:#1B3BFF; --signal-rgb:27,59,255; --fail:#FF3D9A; --pass:#1B3BFF; --wash:rgba(255,247,234,.85); --radius:0; } /* paper grain: two off-register halftone dot grids over everything */ html[data-theme="riso"] body::after{ content:"";position:fixed;inset:0;z-index:30;pointer-events:none; background-image: radial-gradient(rgba(255,61,154,.05) 1px,transparent 1.4px), radial-gradient(rgba(27,59,255,.045) 1px,transparent 1.4px); background-size:6px 6px,9px 9px; background-position:0 0,3px 5px; } /* display: Bricolage 800 caps, blue ink with a pink misregistered pass */ html[data-theme="riso"] h1,html[data-theme="riso"] h2,html[data-theme="riso"] h3{ font-family:"Bricolage Grotesque",var(--sans);font-weight:800;text-transform:uppercase; } html[data-theme="riso"] h1{ font-size:clamp(2.9rem,6.8vw,5.4rem);line-height:.98;letter-spacing:-.012em; color:var(--signal);text-shadow:.055em .05em 0 rgba(255,61,154,.75); } html[data-theme="riso"] h2{ font-size:clamp(1.9rem,3.4vw,2.7rem);letter-spacing:-.008em; color:var(--signal);text-shadow:.06em .055em 0 rgba(255,61,154,.55); } html[data-theme="riso"] h3{letter-spacing:.01em;} html[data-theme="riso"] .kicker{color:#FF3D9A;font-weight:600;} html[data-theme="riso"] .kicker::before{background:var(--signal);} html[data-theme="riso"] ::selection{background:#FF3D9A;color:#FFF7EA;} /* pink markers on bold facts + pink underlines on links */ html[data-theme="riso"] .facts b,html[data-theme="riso"] .lead b, html[data-theme="riso"] .tile p b,html[data-theme="riso"] .persona .change b, html[data-theme="riso"] .row p b,html[data-theme="riso"] p b{ background-image:linear-gradient(rgba(255,61,154,.38),rgba(255,61,154,.38)); background-size:100% .45em;background-position:0 74%;background-repeat:no-repeat; } html[data-theme="riso"] main a{text-decoration-color:rgba(255,61,154,.65);text-decoration-thickness:2px;} html[data-theme="riso"] a:hover{color:#FF3D9A;} /* nav: hard rule under the header, caps everywhere */ html[data-theme="riso"] .site-header{border-bottom:2px solid var(--ink);} html[data-theme="riso"] .wordmark{font-family:"Bricolage Grotesque",var(--sans);font-weight:800;text-transform:uppercase;} html[data-theme="riso"] .wordmark .dot{color:#FF3D9A;} html[data-theme="riso"] .nav-links a{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;color:var(--ink);} html[data-theme="riso"] .nav-links a:hover{color:#FF3D9A;} html[data-theme="riso"] .nav-links a[aria-current="page"]{border-bottom:2px solid #FF3D9A;color:var(--ink);} /* buttons: klein-blue plates on pink offset, zero radius, caps */ html[data-theme="riso"] .btn{ border-radius:0;border:2px solid var(--ink); background:var(--signal);border-color:var(--signal);color:#FFF7EA; font-family:"Bricolage Grotesque",var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.04em; box-shadow:4px 4px 0 #FF3D9A; } html[data-theme="riso"] .btn:hover{background:#FF3D9A;border-color:#FF3D9A;color:#FFF7EA;box-shadow:4px 4px 0 var(--signal);} html[data-theme="riso"] .btn-ghost{background:transparent;color:var(--signal);border:2px solid var(--signal);box-shadow:4px 4px 0 rgba(255,61,154,.45);} html[data-theme="riso"] .btn-ghost:hover{color:#FF3D9A;border-color:#FF3D9A;background:transparent;} html[data-theme="riso"] .cta-quiet{border-bottom:2px solid rgba(255,61,154,.65);} /* cards: solid offset second layer, alternating tilt (rotate prop survives the reveal mechanism's transform:none) */ html[data-theme="riso"] .tiles{background:transparent;border:0;border-radius:0;overflow:visible;gap:18px;} html[data-theme="riso"] .tile, html[data-theme="riso"] .persona, html[data-theme="riso"] .rows, html[data-theme="riso"] .lp-facts, html[data-theme="riso"] .lp-pe, html[data-theme="riso"] .lead-form{ border:2px solid var(--ink);border-radius:0;background:var(--card); box-shadow:5px 5px 0 rgba(255,61,154,.85); } html[data-theme="riso"] .tile:nth-child(odd){rotate:-.5deg;} html[data-theme="riso"] .tile:nth-child(even){rotate:.5deg;box-shadow:5px 5px 0 rgba(27,59,255,.7);} html[data-theme="riso"] .persona:nth-child(even){rotate:.45deg;box-shadow:5px 5px 0 rgba(27,59,255,.7);} html[data-theme="riso"] .persona:nth-child(odd){rotate:-.45deg;} /* screenshots: duotone pink, blue offset plate */ html[data-theme="riso"] .frame{ border:2px solid var(--ink);border-radius:0; box-shadow:6px 6px 0 rgba(27,59,255,.65); } html[data-theme="riso"] .frame-bar{background:var(--signal);border-bottom:2px solid var(--ink);} html[data-theme="riso"] .frame-url{color:rgba(255,247,234,.92);} html[data-theme="riso"] .frame img{filter:grayscale(1) sepia(.35) hue-rotate(280deg) saturate(2.4) contrast(1.05);} html[data-theme="riso"] .frame-cap{border-top:2px solid var(--ink);} /* stage + form + small parts */ html[data-theme="riso"] .stage{border:2px solid var(--ink);border-radius:0;} html[data-theme="riso"] .nav-menu nav{border:2px solid var(--ink);border-radius:0;box-shadow:5px 5px 0 rgba(255,61,154,.85);} html[data-theme="riso"] .nav-menu summary{border-radius:0;} html[data-theme="riso"] .lead-form input:not(.hp),html[data-theme="riso"] .lead-form select,html[data-theme="riso"] .lead-form textarea{border-radius:0;border:1.5px solid rgba(36,30,85,.5);} html[data-theme="riso"] .lead-form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231B3BFF' stroke-width='2'/%3E%3C/svg%3E");} html[data-theme="riso"] .tile-n{color:#FF3D9A;} html[data-theme="riso"] .stop::before{border-radius:0;} html[data-theme="riso"] .legend i{border-radius:0;} html[data-theme="riso"] .site-footer{border-top:2px solid var(--ink);} /* field: the colony prints in pink, low dose */ html[data-theme="riso"][data-field] .field canvas{filter:sepia(1) hue-rotate(280deg) saturate(2.8);opacity:.26;} /* ========================================================================== THEME: terminal — phosphor CRT. Near-black glass, everything IBM Plex Mono, green light, scanlines, bracketed buttons, amber for failure. ========================================================================== */ html[data-theme="terminal"]{ --paper:#050807; --card:#0A100C; --ink:#2BFF6F; --ink-rgb:43,255,111; --ink-60:rgba(43,255,111,.72); --ink-40:rgba(43,255,111,.48); --muted:rgba(43,255,111,.6); --hair:rgba(43,255,111,.22); --hair-strong:rgba(43,255,111,.45); --signal:#2BFF6F; --signal-rgb:43,255,111; --fail:#FFB000; --pass:#2BFF6F; --wash:rgba(5,8,7,.88); --radius:0; /* the big lever: every "sans" role on the page becomes mono */ --sans:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; } /* scanlines + a faint phosphor bloom at the top of the tube */ html[data-theme="terminal"] body::after{ content:"";position:fixed;inset:0;z-index:40;pointer-events:none; background: repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px), radial-gradient(120% 90% at 50% 0%,rgba(43,255,111,.055),transparent 60%); } html[data-theme="terminal"] body{font-size:1rem;} /* type: all caps headings, prompt prefixes, zero rounded tracking */ html[data-theme="terminal"][data-font] h1, html[data-theme="terminal"][data-font] h2, html[data-theme="terminal"][data-font] h3, html[data-theme="terminal"][data-font] .hero-sub{font-family:var(--mono);} html[data-theme="terminal"] h1,html[data-theme="terminal"] h2,html[data-theme="terminal"] h3, html[data-theme="terminal"] .wordmark,html[data-theme="terminal"] .lead{letter-spacing:0;} html[data-theme="terminal"] h1,html[data-theme="terminal"] h2,html[data-theme="terminal"] h3{ text-transform:uppercase;font-weight:600; } html[data-theme="terminal"] h1{ font-size:clamp(2rem,4.6vw,3.8rem);line-height:1.14; text-shadow:0 0 14px rgba(43,255,111,.4); } html[data-theme="terminal"] h2{font-size:clamp(1.3rem,2.4vw,1.9rem);text-shadow:0 0 12px rgba(43,255,111,.3);} html[data-theme="terminal"] h3{font-size:1rem;} html[data-theme="terminal"] h1::before,html[data-theme="terminal"] h2::before{content:"> ";color:rgba(43,255,111,.62);} /* blinking block cursor after the H1 */ html[data-theme="terminal"] h1::after{ content:"";display:inline-block;width:.5em;height:.85em;margin-left:.18em; background:var(--ink);vertical-align:baseline;transform:translateY(.1em); animation:t-blink 1.1s steps(1) infinite; } @keyframes t-blink{50%{opacity:0;}} @media (prefers-reduced-motion: reduce){ html[data-theme="terminal"] h1::after{animation:none;} } html[data-theme="terminal"] ::selection{background:var(--ink);color:#050807;} html[data-theme="terminal"] a:hover{color:var(--ink);text-shadow:0 0 10px rgba(43,255,111,.6);} /* no rounded corners anywhere on this tube */ html[data-theme="terminal"] .tiles,html[data-theme="terminal"] .tile, html[data-theme="terminal"] .frame,html[data-theme="terminal"] .stage, html[data-theme="terminal"] .rows,html[data-theme="terminal"] .persona, html[data-theme="terminal"] .lead-form,html[data-theme="terminal"] .nav-menu nav, html[data-theme="terminal"] .nav-menu summary,html[data-theme="terminal"] .legend i, html[data-theme="terminal"] .lp-facts,html[data-theme="terminal"] .lp-pe, html[data-theme="terminal"] .stop::before{border-radius:0;} /* nav: thin green rule, caps */ html[data-theme="terminal"] .site-header{border-bottom:1px solid var(--hair-strong);} html[data-theme="terminal"] .site-header.is-stuck{box-shadow:0 0 24px rgba(43,255,111,.12);} html[data-theme="terminal"] .wordmark{text-transform:uppercase;font-weight:600;} html[data-theme="terminal"] .nav-links a{text-transform:uppercase;font-size:.76rem;letter-spacing:.08em;} html[data-theme="terminal"] .nav-links a[aria-current="page"]{border-bottom-color:var(--ink);color:var(--ink);} /* buttons: bracketed commands, transparent, caps */ html[data-theme="terminal"] .btn{ background:transparent;border:1px solid transparent;color:var(--ink); text-transform:uppercase;letter-spacing:.06em;font-weight:600; border-radius:0;padding:0 .6rem; } html[data-theme="terminal"] .btn::before{content:"[";margin-right:.15em;color:rgba(43,255,111,.55);} html[data-theme="terminal"] .btn::after{content:"]";margin-left:.15em;color:rgba(43,255,111,.55);} html[data-theme="terminal"] .btn:hover{background:rgba(43,255,111,.12);border-color:rgba(43,255,111,.4);color:var(--ink);text-shadow:0 0 10px rgba(43,255,111,.7);} html[data-theme="terminal"] .btn:disabled:hover{background:transparent;border-color:transparent;} html[data-theme="terminal"] .cta-quiet{color:var(--ink-60);} /* cards: 1px green line-work, flat, faint inner glow */ html[data-theme="terminal"] .tile,html[data-theme="terminal"] .persona, html[data-theme="terminal"] .rows,html[data-theme="terminal"] .lead-form, html[data-theme="terminal"] .lp-facts,html[data-theme="terminal"] .lp-pe{ border-color:var(--hair);box-shadow:inset 0 0 32px rgba(43,255,111,.04); } html[data-theme="terminal"] .frame{border:1px solid var(--hair-strong);box-shadow:0 0 28px rgba(43,255,111,.1);} html[data-theme="terminal"] .frame-bar{background:#050807;} html[data-theme="terminal"] .frame img{filter:grayscale(1) invert(1) sepia(1) hue-rotate(70deg) saturate(3.4) brightness(.92) contrast(1.08);} html[data-theme="terminal"] .stage{border:1px solid var(--hair-strong);box-shadow:inset 0 0 60px rgba(43,255,111,.05);} html[data-theme="terminal"] .kicker{color:var(--ink);} html[data-theme="terminal"] .kicker::before{box-shadow:0 0 8px rgba(43,255,111,.8);} /* form: dark wells, green carets */ html[data-theme="terminal"] .lead-form input:not(.hp), html[data-theme="terminal"] .lead-form select, html[data-theme="terminal"] .lead-form textarea{border-radius:0;border-color:rgba(43,255,111,.4);background:#050807;} html[data-theme="terminal"] .lead-form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232BFF6F' stroke-width='1.5'/%3E%3C/svg%3E");} html[data-theme="terminal"] .lead-form input[readonly]{background:var(--card);} html[data-theme="terminal"] .skip{color:#050807;} /* field canvas: inverted, green phosphor, clearly alive */ html[data-theme="terminal"][data-field] .field canvas{filter:invert(1) sepia(1) hue-rotate(72deg) saturate(5) brightness(1.3) contrast(1.05);opacity:.5;} /* ---------- terminal: hero uses the full width ---------- */ html[data-theme="terminal"] .hero{padding:clamp(2.4rem,5.6vw,4.5rem) 0 clamp(1.7rem,3.5vw,2.5rem);} html[data-theme="terminal"] .hero-copy{max-width:1100px;} html[data-theme="terminal"] .hero-copy h1{max-width:none;} /* two-column hero only when the status panel is present (index-style heroes) */ html[data-theme="terminal"] .hero .wrap:has(.t-status){ display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr); gap:clamp(1.8rem,4vw,4rem);align-items:center; } html[data-theme="terminal"] .hero .wrap:has(.t-status) .hero-copy{grid-column:1;} html[data-theme="terminal"] .hero .wrap:has(.t-status) .heromap-slot{grid-column:1 / -1;} /* the numeric facts live in the readout now; keep only the provenance link (below 900px the readout is hidden, so the facts come back) */ @media (min-width:900px){ html[data-theme="terminal"] .hero .wrap:has(.t-status) .facts span:has(b){display:none;} } /* ---------- terminal: SYSTEM STATUS readout (injected by review.js) ---------- */ .t-status{display:none;} html[data-theme="terminal"] .t-status{ display:block;grid-column:2;grid-row:1; border:1px solid var(--hair-strong);background:rgba(5,8,7,.55); box-shadow:inset 0 0 44px rgba(43,255,111,.05),0 0 26px rgba(43,255,111,.08); } html[data-theme="terminal"] .t-status-hd{ display:flex;justify-content:space-between;gap:1rem; background:rgba(43,255,111,.13);border-bottom:1px solid var(--hair-strong); padding:.45rem .85rem;font:600 .66rem/1.7 var(--mono); letter-spacing:.24em;text-transform:uppercase;color:var(--ink); } html[data-theme="terminal"] .t-status-hd i{font-style:normal;font-weight:400;opacity:.5;letter-spacing:.12em;} html[data-theme="terminal"] .t-status-bd{padding:.95rem .9rem 1rem;} html[data-theme="terminal"] .t-status-row{ font:500 .82rem/2.15 var(--mono);letter-spacing:0;color:var(--ink); white-space:pre;overflow:hidden;width:30ch;max-width:100%; animation:t-type .55s steps(30,end) both;animation-delay:var(--td,0s); } html[data-theme="terminal"] .t-status-row i{font-style:normal;opacity:.34;} html[data-theme="terminal"] .t-status-row b{font-weight:600;color:#D9FFE6;} @keyframes t-type{from{width:0ch;}to{width:30ch;}} html[data-theme="terminal"] .t-status-cur{ font:500 .82rem/2.1 var(--mono);color:var(--ink); opacity:0;animation:t-fade .3s ease both;animation-delay:var(--td,0s); } html[data-theme="terminal"] .t-status-cur::before{content:"> ";opacity:.6;} html[data-theme="terminal"] .t-status-cur::after{ content:"";display:inline-block;width:.55em;height:.95em;margin-left:.1em; background:var(--ink);vertical-align:-.12em; animation:t-blink 1.1s steps(1) infinite; } @keyframes t-fade{to{opacity:1;}} @media (prefers-reduced-motion: reduce){ html[data-theme="terminal"] .t-status-row{animation:none;width:30ch;} html[data-theme="terminal"] .t-status-cur{animation:none;opacity:1;} html[data-theme="terminal"] .t-status-cur::after{animation:none;} } @media (max-width:899px){ html[data-theme="terminal"] .t-status{display:none;} html[data-theme="terminal"] .hero .wrap:has(.t-status){display:block;} } /* ---------- terminal: multi-hue phosphor for the maps ---------- promises stay green; code + implemented-by = cyan; tests keep green with white-green titles; known issue + affects + failing test = amber; the commit dot burns white (HDR asset when available). */ html[data-theme="terminal"] .stage [data-node^="c-"] .n, html[data-theme="terminal"] .stage [data-node^="c_"] .n{stroke:#3DE8FF;} html[data-theme="terminal"] .stage [data-node^="c-"] .lbl, html[data-theme="terminal"] .stage [data-node^="c_"] .lbl{fill:rgba(61,232,255,.6);} html[data-theme="terminal"] .stage [data-node^="c-"] .ttl, html[data-theme="terminal"] .stage [data-node^="c_"] .ttl{fill:#3DE8FF;} html[data-theme="terminal"] .stage .edge[data-edge*=">c"], html[data-theme="terminal"] .stage [data-edge*=">c"] .edge{stroke:rgba(61,232,255,.5);} html[data-theme="terminal"] .stage [data-node^="t"] .ttl{fill:#D9FFE6;} html[data-theme="terminal"] .stage [data-node^="k"] .ttl{fill:#FFB000;} /* edge labels: dimmer, hue-matched */ html[data-theme="terminal"] .heromap .stage .hm-el{fill:rgba(43,255,111,.4);} html[data-theme="terminal"] .heromap .stage .hm-el[data-of^="c"]{fill:rgba(61,232,255,.42);} html[data-theme="terminal"] .heromap .stage .hm-aff-l{fill:rgba(255,176,0,.55);} /* heromap state + hover mechanics keep their hue */ html[data-theme="terminal"] .heromap .stage .hm-hi-sig{stroke:#3DE8FF;} html[data-theme="terminal"] .heromap .stage .edge[data-edge*=">c"].hm-lit{stroke:rgba(61,232,255,.9);} html[data-theme="terminal"] .heromap .stage .hm-el[data-of^="c"].hm-lit{fill:#3DE8FF;} html[data-theme="terminal"] .heromap .stage .hm-c.act .lbl{fill:#3DE8FF;} html[data-theme="terminal"] .heromap .stage .fail .ttl{fill:#FFB000;} html[data-theme="terminal"] .heromap .stage .hm-lg-ink{stroke:#3DE8FF;} html[data-theme="terminal"] .heromap .stage .hm-ping{stroke:#FFFFFF;} html[data-theme="terminal"] .heromap .stage .hm-dot{fill:url(#hdrdotpat) #FFFFFF;} /* graph plate: its inline styles hardcode dark ink; re-key them to phosphor */ html[data-theme="terminal"] .gp-plate .edge{stroke:rgba(43,255,111,.36);} html[data-theme="terminal"] .gp-plate .elbl{fill:rgba(43,255,111,.4);} html[data-theme="terminal"] .gp-plate .ptitle{fill:rgba(43,255,111,.5);} html[data-theme="terminal"] .gp-plate [data-edge*=">c"] .elbl{fill:rgba(61,232,255,.42);} html[data-theme="terminal"] .gp-plate [data-edge^="k"] .elbl{fill:rgba(255,176,0,.55);} html[data-theme="terminal"] .stage [data-edge*=">c"].lit .edge{stroke:#3DE8FF;} html[data-theme="terminal"] .gp-plate [data-edge*=">c"].lit .elbl{fill:#3DE8FF;} html[data-theme="terminal"] .gp-plate .lit .n{filter:drop-shadow(0 0 10px rgba(43,255,111,.3));} /* ---------- terminal: HDR accents (assets/hdr, BT.2100 PQ tagged) ---------- */ html[data-theme="terminal"] .hero .cta-row .btn-primary{ background-image:url("hdr/hdr-glow.png"); background-repeat:no-repeat;background-position:50% 100%;background-size:86% 5px; } html[data-theme="terminal"] .hero .cta-row .btn-primary:hover{ background:rgba(43,255,111,.12) url("hdr/hdr-glow.png") 50% 100% / 86% 5px no-repeat; } /* ========================================================================== THEME: brutal — neo-brutalist poster. Bone ground, 3px black borders, hard 8px offsets, acid yellow, tilted plates. The field is OFF here. ========================================================================== */ html[data-theme="brutal"]{ --paper:#F2EFE9; --card:#FFFFFF; --ink:#000000; --ink-rgb:0,0,0; --ink-60:rgba(0,0,0,.72); --ink-40:rgba(0,0,0,.5); --muted:#333333; --hair:#000000; --hair-strong:#000000; --signal:#1A0DFF; --signal-rgb:26,13,255; --fail:#FF2E00; --pass:#009442; --wash:#FFFFFF; --radius:0; } html[data-theme="brutal"] .field{display:none !important;} html[data-theme="brutal"] ::selection{background:#E8FF2A;color:#000;} /* display: poster caps with a yellow marker swipe behind the first line */ html[data-theme="brutal"] h1,html[data-theme="brutal"] h2,html[data-theme="brutal"] h3{ font-family:"Bricolage Grotesque",var(--sans);font-weight:800;text-transform:uppercase; } html[data-theme="brutal"] h1{ font-size:clamp(3.4rem,8vw,6.5rem);line-height:.92;letter-spacing:-.015em; position:relative;z-index:0; } html[data-theme="brutal"] h1::before{ content:"";position:absolute;z-index:-1;left:-.08em;top:.06em; width:88%;max-width:9.2em;height:.82em;background:#E8FF2A;transform:rotate(-1.1deg); } html[data-theme="brutal"] h2{font-size:clamp(2rem,3.6vw,2.9rem);letter-spacing:-.01em;} html[data-theme="brutal"] h3{letter-spacing:.01em;} /* yellow marker behind every bold key word */ html[data-theme="brutal"] .facts b,html[data-theme="brutal"] .lead b, html[data-theme="brutal"] p b{background:#E8FF2A;box-shadow:-.12em 0 0 #E8FF2A,.12em 0 0 #E8FF2A;} html[data-theme="brutal"] .kicker{color:#000;font-weight:600;} html[data-theme="brutal"] .kicker::before{background:#E8FF2A;border:2px solid #000;width:11px;height:11px;} /* nav: a black bar */ html[data-theme="brutal"] .site-header{background:#000;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none;} html[data-theme="brutal"] .site-header.is-stuck{box-shadow:0 4px 0 #E8FF2A;} html[data-theme="brutal"] .wordmark{color:#fff;font-family:"Bricolage Grotesque",var(--sans);font-weight:800;text-transform:uppercase;} html[data-theme="brutal"] .wordmark:hover{color:#fff;} html[data-theme="brutal"] .wordmark .dot{color:#E8FF2A;} html[data-theme="brutal"] .nav-links a{color:rgba(255,255,255,.82);text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.04em;} html[data-theme="brutal"] .nav-links a:hover{color:#E8FF2A;} html[data-theme="brutal"] .nav-links a[aria-current="page"]{color:#E8FF2A;border-bottom-color:#E8FF2A;} html[data-theme="brutal"] .nav-menu summary{border:3px solid #fff;border-radius:0;background:#000;color:#fff;} html[data-theme="brutal"] .nav-menu nav{border:3px solid #000;border-radius:0;box-shadow:8px 8px 0 #000;} /* buttons: black-on-yellow slabs that pop */ html[data-theme="brutal"] .btn{ border:3px solid #000;border-radius:0;background:#E8FF2A;color:#000; font-family:"Bricolage Grotesque",var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:.02em; box-shadow:5px 5px 0 #000; transition:transform .12s ease,box-shadow .12s ease,background .12s ease; } html[data-theme="brutal"] .btn:hover{background:#E8FF2A;border-color:#000;color:#000;transform:translate(-2px,-2px);box-shadow:8px 8px 0 #000;} html[data-theme="brutal"] .btn:disabled:hover{transform:none;box-shadow:5px 5px 0 #000;background:#E8FF2A;border-color:#000;} html[data-theme="brutal"] .btn-ghost{background:#fff;color:#000;} html[data-theme="brutal"] .btn-ghost:hover{background:#fff;color:#000;border-color:#000;} html[data-theme="brutal"] .nav .btn{box-shadow:4px 4px 0 #E8FF2A;border-color:#E8FF2A;} html[data-theme="brutal"] .nav .btn:hover{box-shadow:6px 6px 0 #E8FF2A;} html[data-theme="brutal"] .cta-quiet{font-weight:700;text-transform:uppercase;border-bottom:3px solid #E8FF2A;color:#000;} html[data-theme="brutal"] .cta-quiet:hover{color:#000;border-bottom-color:#000;} /* everything is a plate: 3px black, hard 8px offset, no radius */ html[data-theme="brutal"] .tiles{background:transparent;border:0;border-radius:0;overflow:visible;gap:22px;} html[data-theme="brutal"] .tile, html[data-theme="brutal"] .persona, html[data-theme="brutal"] .rows, html[data-theme="brutal"] .lead-form, html[data-theme="brutal"] .lp-facts, html[data-theme="brutal"] .lp-pe, html[data-theme="brutal"] .frame, html[data-theme="brutal"] .stage{ border:3px solid #000;border-radius:0;background:var(--card); box-shadow:8px 8px 0 #000; } html[data-theme="brutal"] .tile:nth-child(odd){rotate:-.6deg;} html[data-theme="brutal"] .tile:nth-child(even){rotate:.6deg;} html[data-theme="brutal"] .persona:nth-child(even){rotate:.5deg;} html[data-theme="brutal"] .persona:nth-child(odd){rotate:-.5deg;} html[data-theme="brutal"] .stage{background-color:#fff;} /* screenshots: hard frames, punchy image */ html[data-theme="brutal"] .frame-bar{background:#E8FF2A;border-bottom:3px solid #000;} html[data-theme="brutal"] .frame-url{color:#000;font-weight:600;} html[data-theme="brutal"] .frame img{filter:contrast(1.08) saturate(1.1);} html[data-theme="brutal"] .frame-cap{border-top:3px solid #000;color:#000;} /* structure lines go heavy */ html[data-theme="brutal"] .section + .section{border-top:3px solid #000;} html[data-theme="brutal"] .timeline::before{height:3px;background:#000;} html[data-theme="brutal"] .stop::before{border-radius:0;border:3px solid #000;width:13px;height:13px;background:#fff;} html[data-theme="brutal"] .stop.is-sig::before{background:#E8FF2A;border-color:#000;} html[data-theme="brutal"] .legend i{border-radius:0;border-width:2.5px;} html[data-theme="brutal"] .row{border-top:2px solid #000;} html[data-theme="brutal"] .row:first-child{border-top:0;} /* figures + map: fatter strokes */ html[data-theme="brutal"] .fig .st{stroke-width:2.3;} html[data-theme="brutal"] .fig .fat{stroke-width:5.4;} html[data-theme="brutal"] .stage .n{stroke-width:2.4;} html[data-theme="brutal"] .heromap .stage .n{stroke-width:2;} html[data-theme="brutal"] .stage .edge{stroke:rgba(0,0,0,.6);} /* form: slab inputs */ html[data-theme="brutal"] .lead-form input:not(.hp), html[data-theme="brutal"] .lead-form select, html[data-theme="brutal"] .lead-form textarea{border:3px solid #000;border-radius:0;background:#fff;} html[data-theme="brutal"] .lead-form input:focus-visible, html[data-theme="brutal"] .lead-form select:focus-visible, html[data-theme="brutal"] .lead-form textarea:focus-visible{outline:3px solid var(--signal);border-color:#000;} html[data-theme="brutal"] .lead-form input[readonly]{background:#F2EFE9;color:#000;} /* footer: the black bar again */ html[data-theme="brutal"] .site-footer{background:#000;border-top:0;} html[data-theme="brutal"] .foot-line{color:rgba(255,255,255,.85);} html[data-theme="brutal"] .foot-line a{color:#E8FF2A;border-bottom-color:rgba(232,255,42,.5);} html[data-theme="brutal"] .foot-line a:hover{color:#fff;border-bottom-color:#fff;} html[data-theme="brutal"] .foot-line .sep{color:rgba(255,255,255,.4);} /* ========================================================================== THEME: acid — vapor/acid dream. Deep violet night, drifting gradient mesh, glass cards, neon cyan/violet/lime, gradient display type. ========================================================================== */ html[data-theme="acid"]{ --paper:#0B0714; --card:#150D28; --ink:#EDE7FF; --ink-rgb:237,231,255; --ink-60:rgba(237,231,255,.7); --ink-40:rgba(237,231,255,.46); --muted:#9A8FC7; --hair:rgba(237,231,255,.14); --hair-strong:rgba(237,231,255,.32); --signal:#00E5FF; --signal-rgb:0,229,255; --fail:#FF3DDA; --pass:#B7FF3C; --wash:rgba(11,7,20,.6); } /* the mesh: two huge soft blobs drifting behind everything */ html[data-theme="acid"] body::before{ content:"";position:fixed;inset:-30%;z-index:0;pointer-events:none; background: radial-gradient(42% 42% at 26% 30%,rgba(139,92,255,.44),transparent 70%), radial-gradient(36% 36% at 76% 64%,rgba(0,229,255,.26),transparent 70%), radial-gradient(30% 30% at 62% 14%,rgba(183,255,60,.11),transparent 70%); animation:acid-drift 30s ease-in-out infinite alternate; } @keyframes acid-drift{ from{transform:translate3d(-3%,-2%,0) rotate(-2deg);} to{transform:translate3d(3%,2.5%,0) rotate(2deg);} } @media (prefers-reduced-motion: reduce){ html[data-theme="acid"] body::before{animation:none;} } html[data-theme="acid"] ::selection{background:#FF3DDA;color:#0B0714;} /* display: gradient-filled headline */ html[data-theme="acid"] h1{ font-family:"Bricolage Grotesque",var(--sans);font-weight:750; font-size:clamp(2.8rem,6.4vw,5.2rem);letter-spacing:-.035em;line-height:1; background:linear-gradient(94deg,#8B5CFF 0%,#00E5FF 52%,#B7FF3C 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } html[data-theme="acid"] h2{color:#FFFFFF;text-shadow:0 0 34px rgba(139,92,255,.5);} html[data-theme="acid"] .kicker{color:var(--signal);text-shadow:0 0 12px rgba(0,229,255,.5);} html[data-theme="acid"] .kicker::before{border-radius:50%;box-shadow:0 0 10px rgba(0,229,255,.9);} html[data-theme="acid"] .tile-n{color:var(--signal);} html[data-theme="acid"] .fine,html[data-theme="acid"] .frame-url{color:rgba(0,229,255,.66);} /* nav: thin glass */ html[data-theme="acid"] .site-header{border-bottom:1px solid rgba(237,231,255,.1);} html[data-theme="acid"] .site-header.is-stuck{box-shadow:0 8px 40px rgba(0,0,0,.5);} html[data-theme="acid"] .wordmark{color:#fff;} html[data-theme="acid"] .wordmark .dot{color:var(--signal);text-shadow:0 0 12px rgba(0,229,255,.9);} /* buttons: neon pills */ html[data-theme="acid"] .btn{ border-radius:999px;border:1px solid transparent; background:linear-gradient(90deg,#8B5CFF,#00E5FF);color:#0B0714;font-weight:700; box-shadow:0 0 22px rgba(139,92,255,.55),0 0 44px rgba(0,229,255,.25); } html[data-theme="acid"] .btn:hover{ background:linear-gradient(90deg,#9F75FF,#3FF0FF);color:#0B0714;border-color:transparent; box-shadow:0 0 30px rgba(139,92,255,.8),0 0 60px rgba(0,229,255,.4); } html[data-theme="acid"] .btn-ghost{ background:rgba(255,255,255,.05);color:var(--ink);border:1px solid rgba(237,231,255,.28); box-shadow:none; } html[data-theme="acid"] .btn-ghost:hover{border-color:var(--signal);color:#fff;background:rgba(0,229,255,.08);box-shadow:0 0 24px rgba(0,229,255,.25);} html[data-theme="acid"] .cta-quiet{color:var(--signal);border-bottom-color:rgba(0,229,255,.4);} html[data-theme="acid"] .cta-quiet:hover{color:#fff;border-bottom-color:#fff;} html[data-theme="acid"] .facts a{color:var(--signal);border-bottom-color:rgba(0,229,255,.4);} /* glass everywhere */ html[data-theme="acid"] .tiles{background:transparent;border:0;overflow:visible;gap:14px;border-radius:0;} html[data-theme="acid"] .tile, html[data-theme="acid"] .persona, html[data-theme="acid"] .rows, html[data-theme="acid"] .lead-form, html[data-theme="acid"] .lp-facts, html[data-theme="acid"] .lp-pe, html[data-theme="acid"] .nav-menu nav{ background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); border-radius:18px;box-shadow:0 10px 40px rgba(0,0,0,.35); } html[data-theme="acid"] .tile{border-radius:18px;} html[data-theme="acid"] .stage{ background-color:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:18px; } /* screenshots: dimmed + violet glow */ html[data-theme="acid"] .frame{ background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.16);border-radius:18px; box-shadow:0 0 24px rgba(139,92,255,.35),0 14px 60px rgba(0,0,0,.5); } html[data-theme="acid"] .frame-bar{background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.12);} html[data-theme="acid"] .frame img{filter:brightness(.94) contrast(1.03);outline:1px solid rgba(237,231,255,.12);outline-offset:-1px;} /* form: glass wells, cyan focus */ html[data-theme="acid"] .lead-form input:not(.hp), html[data-theme="acid"] .lead-form select, html[data-theme="acid"] .lead-form textarea{ background:rgba(255,255,255,.06);border:1px solid rgba(237,231,255,.22);border-radius:10px; } html[data-theme="acid"] .lead-form input[readonly]{background:rgba(255,255,255,.025);} html[data-theme="acid"] .lead-form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23EDE7FF' stroke-width='1.5'/%3E%3C/svg%3E");} html[data-theme="acid"] .btn:hover{color:#0B0714;} html[data-theme="acid"] .skip{color:#0B0714;} /* timeline: neon stops */ html[data-theme="acid"] .stop.is-sig::before{box-shadow:0 0 12px rgba(0,229,255,.8);} html[data-theme="acid"] .site-footer{background:transparent;} /* field canvas: inverted + violet, quiet */ html[data-theme="acid"][data-field] .field canvas{filter:invert(1) sepia(1) hue-rotate(205deg) saturate(3.2);opacity:.2;} /* ========================================================================== HDR ember overlay (embers.js; terminal + olo only). One life-cell each, PQ-tagged assets: on HDR screens an ignited cell burns past SDR white. ========================================================================== */ /* HDR user-colony overlay (colony-hdr.js): the player's lineage tiled with the PQ cell PNG, cut to the owned cells by a JS-drawn mask. Sits above the canvas, so data-field="calm" (which dims only .field canvas) never hides the user's colony. Height/background-size/mask set by JS. */ .colony-hdr{ position:absolute;left:0;top:0;width:100%;display:none; pointer-events:none;z-index:0; background-image:url("hdr/hdr-cell-blue.png"); background-repeat:repeat;image-rendering:pixelated; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; } html[data-theme="terminal"] .colony-hdr{background-image:url("hdr/hdr-cell-green.png");} html[data-theme="olo"] .colony-hdr{background-image:url("hdr/hdr-cell-teal.png");} /* riso + acid recolor the whole canvas with heavy filters — the HDR tile would clash; the player colony falls back to the engine's blue cells */ html[data-theme="riso"] .colony-hdr, html[data-theme="acid"] .colony-hdr{display:none !important;} .field-embers{position:absolute;inset:0;pointer-events:none;z-index:0;} .field-embers .fe{ position:absolute;left:0;top:0;opacity:0; image-rendering:pixelated;background-size:100% 100%;background-repeat:no-repeat; will-change:opacity,transform; } html[data-theme="terminal"] .field-embers .fe{background-image:url("hdr/hdr-cell-green.png");} html[data-theme="olo"] .field-embers .fe{background-image:url("hdr/hdr-cell-teal.png");} .field-embers .fe.ig{animation:fe-ig 1.4s ease-out both;} .field-embers .fe.ig-hold{opacity:.85;} @keyframes fe-ig{0%{opacity:0;}25%{opacity:.9;}100%{opacity:0;}} @media (prefers-reduced-motion: reduce){.field-embers .fe.ig{animation:none;}}