/* ========================================================================== exp33 . THEME: verified -------------------------------------------------------------------------- FOUNDER RULING THIS THEME EXISTS TO ENFORCE Proof green is not a brand decoration. Proof green MEANS verified knowledge. Nothing else on the page is allowed to be green. THE STATE LADDER (the only hues on the page) verified #91FF65 --pass a check ran and held changed / stale #FFAE3D --stale the ground moved; must be re-proven invalidated #FF4A55 --fail a check ran and failed inactive/unknown #3A403B --unknown structure at rest; nothing claimed THE ACHROMATIC LADDER (everything that is not a state) #060806 --paper ground #0B0E0B --card barely-lifted surface #3A403B --unknown structure at rest / the graph asleep #7E857F --muted labels, captions, fine print #A6A9A5 --ink-60 body prose #F1F3EF --ink headlines, promises, the signature #FFFFFF --signal INTERACTIVE AFFORDANCE ONLY WHY --signal IS WHITE The token contract reserves --signal for affordances (links, focus rings, the selected state, the primary button) and forbids it as a state. In every other theme --signal is a hue, so an affordance and a state can be confused. Here the affordance is colourless: pure white, one step past the warm-white ink, so "you can act on this" reads as extra light rather than extra colour. The consequence is the point: the ONLY hue-bearing marks left on the page are states, and the only green is verified. DECORATION BUDGET No scanlines, no grain, no glow flourishes, no rounded ornament beyond what structure needs, one signature (the colophon). Hairlines, not boxes. HDR #91FF65 at max signal is the ideal PQ candidate. assets/hdr/verified-*.png are BT.2100 PQ rasters used ONLY for verified state, so on an HDR display proven facts literally emit more light than anything else on the page while unproven structure stays flat. Every HDR rule below is guarded by html[data-theme="verified"]. The rasters are CALIBRATED, not literal. Tagging raw #91FF65 as PQ / Rec.2020 does not round-trip -- the SDR decode comes back as pure (0,255,0), a second green clashing with --pass. The rasters carry the pre-compensated triple (238,255,213), measured to decode to (146,255,101) on an SDR display, i.e. --pass to within one unit, while the peak channel still sits at code 255 = maximum PQ signal. So SDR loses nothing and HDR gains everything. Load order: AFTER site.css / themes.css / evidence.css / sections.css / exp33.css. Paired with assets/theme-verified.js (registers the theme and the SVG paint server). Nothing outside html[data-theme="verified"] changes appearance except the two additive token defaults immediately below. ========================================================================== */ /* ========================================================================== 0. ADDITIVE TOKEN DEFAULTS FOR ALL THEMES (:root, lowest specificity) -------------------------------------------------------------------------- The token contract adds --stale (changed / must be re-proven) and --unknown (inactive / nothing claimed) to the palette. themes.css is frozen, so the cross-theme defaults live here. Both values are mid-tone on purpose: they clear 3.7:1 on the paper ground and 4.2:1 on the night ground, so a builder can use them in any theme without a per-theme fork. THESE CHANGE NOTHING TODAY. Neither token is referenced by any shipped rule, so defining them cannot alter paper / riso / terminal / brutal / acid / olo / night. Any theme is free to override them; this theme does. ========================================================================== */ :root{ --stale:#AF7317; /* amber, dual-ground: 3.7:1 on paper, 4.3:1 on night */ --unknown:#7E7E79; /* mid gray, dual-ground: 3.8:1 on paper, 4.2:1 night */ } /* The tube has one hue, so "inactive" cannot be gray there without reading as a dead pixel. A desaturated phosphor keeps the theme's identity and still sits far enough below --pass (#2BFF6F) that structure never reads as verified. 7.6:1 on the #050807 ground. Paired with the --fig-st re-key in themes.css. */ html[data-theme="terminal"]{--unknown:#6FAE86;} /* ========================================================================== 1. TOKENS ========================================================================== */ html[data-theme="verified"]{ --paper:#060806; --card:#0B0E0B; --ink:#F1F3EF; --ink-rgb:241,243,239; /* .67 lands on #A6A9A5 -- the founder's body gray -- so one token carries all prose and every component that already reaches for --ink-60 agrees */ --ink-60:rgba(var(--ink-rgb),.67); --ink-40:rgba(var(--ink-rgb),.40); --muted:#7E857F; --hair:rgba(241,243,239,.10); --hair-strong:rgba(var(--ink-rgb),.24); --wash:rgba(6,8,6,.82); /* affordance: colourless by decree (see the header note) */ --signal:#FFFFFF; --signal-rgb:255,255,255; /* state */ --pass:#91FF65; --stale:#FFAE3D; --fail:#FF4A55; --unknown:#3A403B; } /* ========================================================================== 2. GROUND + TYPE Headlines warm white, everything else soft gray. Two tiers, no third. ========================================================================== */ html[data-theme="verified"] body{color:var(--ink-60);} html[data-theme="verified"] h1, html[data-theme="verified"] h2, html[data-theme="verified"] h3, html[data-theme="verified"] h4{color:var(--ink);} /* a lead is a sentence, not a heading: it belongs to the prose tier */ html[data-theme="verified"] .lead{color:var(--ink-60);} /* the emphasised half of the H1 carries weight, never colour -- greening it would claim the headline is verified, which is exactly the lie this theme is built to prevent */ html[data-theme="verified"] .h1-em{color:var(--ink);} html[data-theme="verified"] .hero33 .hero-copy h1{ font-size:clamp(2.9rem,6.6vw,5.2rem);line-height:1.0;letter-spacing:-.035em; } /* ========================================================================== 2b. GEOMETRY -- an instrument has no rounded corners The shell rounds every surface by 6-14px. On a near-black ground a rounded hairline reads as ornament, because the corner is the only part of it you notice. Square it all and the hairline goes back to being a division. ========================================================================== */ html[data-theme="verified"]{--radius:0;--nav-r:0;} html[data-theme="verified"] .tiles, html[data-theme="verified"] .rows, html[data-theme="verified"] .stage, html[data-theme="verified"] .frame, html[data-theme="verified"] .mount:not(:has(*)), html[data-theme="verified"] .lead-form, html[data-theme="verified"] .ev-miss, html[data-theme="verified"] .nav-menu nav, html[data-theme="verified"] .nav-menu summary{border-radius:0;} /* the nav: a rail with a rule under it, not a floating pill */ html[data-theme="verified"] .site-header .nav{ border:0;border-bottom:1px solid var(--hair); padding:0 0 0 .1rem; box-shadow:none; -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); } html[data-theme="verified"] .site-header.is-stuck .nav{ border-bottom-color:var(--hair-strong);box-shadow:none; } /* ========================================================================== 3. CHROME -- shadows go black; an ink-tinted shadow is a glow on near-black ========================================================================== */ html[data-theme="verified"] .site-header .nav{box-shadow:0 1px 2px rgba(0,0,0,.5);} html[data-theme="verified"] .site-header.is-stuck .nav{box-shadow:0 12px 34px rgba(0,0,0,.62);} html[data-theme="verified"] .nav-menu nav{box-shadow:0 14px 40px rgba(0,0,0,.66);} html[data-theme="verified"] .frame{ border-color:rgba(241,243,239,.18); box-shadow:0 1px 0 rgba(0,0,0,.3),0 14px 40px rgba(0,0,0,.5); } html[data-theme="verified"] .frame img{outline:1px solid rgba(241,243,239,.10);outline-offset:-1px;} html[data-theme="verified"] .tile:hover, html[data-theme="verified"] .persona:hover{box-shadow:none;} /* the select chevron is a baked-ink data URI: repaint it pale */ html[data-theme="verified"] .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='%23F1F3EF' stroke-width='1.5'/%3E%3C/svg%3E"); } /* ========================================================================== 4. AFFORDANCE HYGIENE site.css spends --signal in three places that are NOT interactive. Under the contract those are structure, so they move to the achromatic ladder. ========================================================================== */ /* the kicker square is a typographic mark, not a state chip */ html[data-theme="verified"] .kicker::before{background:var(--ink-40);} /* 01 .. 04 number the steps; they claim nothing */ html[data-theme="verified"] .tile-n{color:var(--ink-40);} /* the primary CTA: warm-white fill, near-black text (site.css default on a dark ground). Hover goes colourless-brighter, never coloured. */ html[data-theme="verified"] .btn{background:var(--ink);border-color:var(--ink);color:var(--paper);} html[data-theme="verified"] .btn:hover{background:var(--signal);border-color:var(--signal);color:var(--paper);} html[data-theme="verified"] .btn:disabled:hover{background:var(--ink);border-color:var(--ink);} html[data-theme="verified"] .btn-ghost{background:transparent;color:var(--ink);border-color:var(--hair-strong);} html[data-theme="verified"] .btn-ghost:hover{background:transparent;color:var(--ink);border-color:var(--ink);} html[data-theme="verified"] .skip{background:var(--ink);color:var(--paper);} html[data-theme="verified"] ::selection{background:var(--signal);color:var(--paper);} /* ========================================================================== 5. STRUCTURE AT REST Line art is the graph asleep: it holds shape and claims nothing, so it is drawn in the at-rest gray rather than in ink. --tv-struct is --unknown lifted one step, because a 1.1px stroke at #3A403B disappears on near-black while a 12px label at the same value stays readable. ========================================================================== */ html[data-theme="verified"]{--tv-struct:#4C534D;} html[data-theme="verified"] .fig .st{stroke:var(--tv-struct);} html[data-theme="verified"] .fig .hair, html[data-theme="verified"] .fig .grid{stroke:var(--unknown);stroke-opacity:1;} html[data-theme="verified"] .fig .ghost{stroke:var(--unknown);stroke-opacity:.5;} html[data-theme="verified"] .fig .plate{fill:var(--paper);} html[data-theme="verified"] .lp-check .plate{fill:var(--paper);} html[data-theme="verified"] .stage .n{fill:var(--card);stroke:var(--tv-struct);} html[data-theme="verified"] .stage .n-soft{stroke:var(--unknown);} html[data-theme="verified"] .stage .edge{stroke:var(--unknown);} /* the corpus brackets field.js paints over the world are structure too */ html[data-theme="verified"] .field .fbr{border-color:rgba(241,243,239,.22);} html[data-theme="verified"] .field .sbr{border-color:rgba(241,243,239,.12);} /* ========================================================================== 6. STATE The whole point. Everything green on the page is listed in this block. ========================================================================== */ /* --- verified: the seven ticks in the receipts table --------------------- */ html[data-theme="verified"] .ev-ck path{stroke:var(--pass);} /* --- verified: "ci green" ticks and labels inside the figures ------------ */ html[data-theme="verified"] .fig .good{stroke:var(--pass);} html[data-theme="verified"] .fig .tgrn{fill:var(--pass);} html[data-theme="verified"] .stage .n-good, html[data-theme="verified"] .stage .edge-good{stroke:var(--pass);} html[data-theme="verified"] .stage .tgrn{fill:var(--pass);} /* --- verified: the hero fact. One green numeral teaches the rule before the reader has scrolled anywhere; the words beside it stay gray. ---- */ html[data-theme="verified"] .hero .facts b{color:var(--pass);} /* --- verified: the two proven counts in the receipt band. 123 requirements approved and 7 defects fixed upstream are both machine-checkable outcomes. The third cell is a published MISS, so it takes --fail. This is the semantic rule doing real work on real content, and it is the clearest demonstration on the page. ---------- */ html[data-theme="verified"] .ev-nums .ev-cell .ev-num{color:var(--pass);} html[data-theme="verified"] .ev-nums .ev-cell:last-child .ev-num{color:var(--fail);} /* --- invalidated ------------------------------------------------------- */ html[data-theme="verified"] .ev-miss-k{color:var(--fail);} html[data-theme="verified"] .ev-miss-k::before{background:var(--fail);} /* the miss is an annotation on the record, not a warning panel: one red edge instead of a red frame */ html[data-theme="verified"] .ev-miss{ border:0;border-left:2px solid var(--fail); background:none;padding-left:1.4rem; } html[data-theme="verified"] .fig .bad{stroke:var(--fail);} html[data-theme="verified"] .fig .tred{fill:var(--fail);} html[data-theme="verified"] .colony-hud.gone{color:var(--fail);} /* --- changed / stale: nothing on index.html carries it yet. These are the hooks the section builders were given, so the state lands the moment a mount ships markup for it. ------------------------------------------ */ html[data-theme="verified"] [data-state="stale"], html[data-theme="verified"] .is-stale{color:var(--stale);} html[data-theme="verified"] .fig .stale, html[data-theme="verified"] .stage .n-stale, html[data-theme="verified"] .stage .edge-stale{stroke:var(--stale);} html[data-theme="verified"] .fig .tstale, html[data-theme="verified"] .stage .tstale{fill:var(--stale);} /* --- unknown / not yet proven ------------------------------------------ */ html[data-theme="verified"] [data-state="unknown"], html[data-theme="verified"] .is-unknown{color:var(--unknown);} /* --- verified, generic hooks ------------------------------------------- */ html[data-theme="verified"] [data-state="verified"], html[data-theme="verified"] .is-verified{color:var(--pass);} html[data-theme="verified"] [data-state="violated"], html[data-theme="verified"] .is-violated{color:var(--fail);} /* ========================================================================== 7. THE FIELD -- inactive structure field.js bakes its own palette into an opaque canvas (paper ground, ink cells, signal-blue player colony), so the theme repaints it with a filter, the same mechanism night / olo / acid use. invert(1) paper ground -> near-black, ink cells -> light saturate(0) ACHROMATIC ON PURPOSE. Hue on this page is reserved for state, so the world at rest may not carry one -- and it also strips the engine's signal-blue out of the colony. contrast(1.04) pins the inverted ground to the page ground brightness(1.64) lands a full-amplitude cell on ~#3A3A3A, i.e. the founder's at-rest gray, achromatic The calm preset's mask then thins that to a whisper through the hero and almost nothing below it: the graph is asleep, and it looks asleep. ========================================================================== */ html[data-theme="verified"][data-field] .field canvas{ filter:invert(1) saturate(0) contrast(1.04) brightness(1.64); } /* --- THE COLONY: warm white, not green ---------------------------------- The one live thing on the page is the colony the visitor paints. Under the ruling it cannot be green: nobody checked it. It was drawn, not proven -- it is the purest instance of "present but unverified" the page contains. So it takes the affordance tier instead: warm white, the colour of the human hand on this page, luminous because it is alive. colony-hdr.js already lifts the player's lineage above the canvas dimming; the tile is repointed at a PQ raster that is NEUTRAL in its raw triple -- hue on this page is state, and a painted cell claims nothing -- decoding to a luminous warm white in SDR and peaking near 1300 nits in PQ, roughly 8x under the verified green's 10000. Alive, and never the brightest. ------- */ html[data-theme="verified"] .colony-hdr{background-image:url("hdr/verified-cell-white.png");} /* ========================================================================== 8. HDR -- TRANSIENT, verified state only, guarded -------------------------------------------------------------------------- CORRECTED. This section used to make verified state PERMANENTLY HDR: the tick, the wordmark period and the receipt rules all emitted for as long as they were on screen. Under the founder's rule -- HDR is not a colour palette, HDR is an event; nothing is HDR at rest -- that is the neon-signage failure applied to a tick, and it also spends the whole semantic channel: if verified emits for ever, luminance stops meaning "this is happening now". SO: verified state now RESTS in ordinary --pass phosphor green (#91FF65) and only flashes past SDR white at the moment it resolves, then decays. The semantic palette is otherwise untouched -- every value, every state, every token in sections 0-7 is exactly as it was. WHAT DRIVES "THE MOMENT IT RESOLVES" The HDR module in assets/herograph.js publishes the loop's verification beat as html.hx-resolve plus a --hx-resolve envelope (150 ms at peak, then a 1 - 2^-9.2u phosphor tail to zero over 600 ms). Every verified mark on the page answers that one clock, so the receipt, the ticks and the card all resolve together, the way they would in the machine. On a page with no hero graph the class is never added and every mark simply rests -- which is the correct resting appearance, not a degraded one. ========================================================================== */ /* -- the wordmark period ------------------------------------------------- The PQ raster is retired from this file: assets/hdr-logo.css rests the period as the live glyph and assets/hdr-event.css flares it from hdr/mark-dot-verified.png for one heartbeat per loop. The GREEN stays, as flat ink. The dot in the mark is the verified stamp -- the one place the product signs its own claim, and therefore the one decoration-shaped green this theme allows. --signal is white here, so without this the period would rest in the affordance colour and the signature would be lost along with the raster. */ html[data-theme="verified"] .wordmark .dot{ color:var(--pass); -webkit-text-fill-color:currentColor; } /* -- the verified rule under the proven counts -------------------------- Two instances, both load-bearing: the proven counts sit on a line of light; the published miss does not. ::after is the RESTING rule -- a solid --pass hairline, present always, load-bearing on its own. ::before is the HDR layer over it, so the flare can decay without the resting rule fading with it. */ html[data-theme="verified"] .ev-nums .ev-cell .ev-num{position:relative;width:fit-content;} html[data-theme="verified"] .ev-nums .ev-cell:not(:last-child) .ev-num::after{ content:"";position:absolute;left:0;right:0;bottom:-.055em;height:3px; background:var(--pass); pointer-events:none; } html[data-theme="verified"] .ev-nums .ev-cell:not(:last-child) .ev-num::before{ content:"";position:absolute;left:0;right:0;bottom:-.055em;height:3px; pointer-events:none; opacity:0; /* nothing at rest */ } html.hx-resolve[data-theme="verified"] .ev-nums .ev-cell:not(:last-child) .ev-num::before{ background:url("hdr/verified-glow.png") center/100% 100% no-repeat; opacity:var(--hx-resolve); } /* -- the ticks ---------------------------------------------------------- #tv-hdr-green is an SVG paint server (assets/theme-verified.js) in userSpaceOnUse units, so it never depends on a path bounding box. It now carries TWO layers: an opaque #91FF65 base rect and the PQ raster over it at zero opacity. The stroke therefore rests as plain phosphor green and the raster fades in and out on the beat -- a real decay on a stroke, which a single-paint swap cannot give. The plain --pass second value stays as the fallback for a blocked script or a rejected two-value paint. */ #tv-hdr-green image{opacity:0;} html.hx-resolve #tv-hdr-green image{opacity:var(--hx-resolve);} html[data-theme="verified"] .ev-ck path{stroke:url(#tv-hdr-green) #91FF65;} html[data-theme="verified"] .fig .good{stroke:url(#tv-hdr-green) #91FF65;} html[data-theme="verified"] .fig .tgrn{fill:url(#tv-hdr-green) #91FF65;} /* the verified tick on the requirement card, and the small verified pips on its facet labels (EVIDENCE, KNOWN ISSUES). These reach into the graph- sections builder's classes on purpose -- it is the one place on the page where a card says VERIFIED, so it is exactly where the light belongs. If those class names change the rules simply stop matching and the marks fall back to the plain --pass they already carry. */ html[data-theme="verified"] .gs-state svg path{stroke:url(#tv-hdr-green) #91FF65;} /* the facet pip rests as flat --pass; the raster is added for the window only */ html[data-theme="verified"] .gs-facet.is-ok .gs-flab::before{background:#91FF65;} html.hx-resolve[data-theme="verified"] .gs-facet.is-ok .gs-flab::before{ background:url("hdr/verified-flat.png") center/100% 100% no-repeat,#91FF65; } /* generic verified pip for the section mounts still being built. The RESTING pip is a rounded --pass dot; during the window the raster takes over and the border-radius has to go with it -- a border-radius on a PQ-backed box makes Chromium's rounded clip drop the colour and paint pure white (measured). The raster carries its own round alpha edge, so the shape is unchanged. */ html[data-theme="verified"] .is-verified-pip::before{ content:"";display:inline-block;width:.5em;height:.5em;margin-right:.5em; vertical-align:.02em;border-radius:50%; background:var(--pass); } html.hx-resolve[data-theme="verified"] .is-verified-pip::before{ border-radius:0; background:url("hdr/verified-dot.png") center/100% 100% no-repeat; } /* NOT CHANGED, ON PURPOSE: .colony-hdr (section 7) keeps its PQ raster. The colony is not verified state -- it is the one live thing on the page, the visitor's own hand, and section 7 argues at length that it claims nothing. The founder's correction names the tick, the wordmark dot and the receipt rules; a cell the visitor is painting right now is the closest thing on the page to "computation happening", so it stays. */ /* ========================================================================== 8b. SIBLING BUILDERS The section builders read the contract tokens with fallbacks, so they follow this theme automatically. Two of them left per-theme tuning hooks that need a value for this theme; they live here rather than in their files. HEROFILM: assets/herofilm.css carries a commented-out "forward tuning for the near-black / luminous-green theme being added in parallel" block. This is that block, live. The comment in herofilm.css can be deleted. ========================================================================== */ html[data-theme="verified"] .hf{ --hf-op:.30;--hf-veil:.30;--hf-climax:1.08; --hf-stale-def:#E8B24A;--hf-unknown-def:#5A6459; } /* --radius is 0 here, so the film's rounded nodes follow the hard geometry, the same way riso / brutal / terminal do */ html[data-theme="verified"] .hf rect{rx:0;} /* ========================================================================== 9. RESTRAINT Anything the shell offers as ornament is switched off here. ========================================================================== */ html[data-theme="verified"] body::after{content:none;} /* grain / scanlines */ html[data-theme="verified"] .hero::before{content:none;} /* accent wash */ html[data-theme="verified"] h1::after{content:none;} /* accent full stop */ html[data-theme="verified"] .facts span + span::before{content:normal;} html[data-theme="verified"] .olo-note{display:none;} /* embers are terminal/olo only, but say it out loud */ html[data-theme="verified"] .field-embers{display:none;}