/* ========================================================================== exp33 . HDR AS AN EVENT Driver: the HDR module at the foot of assets/herograph.js Assets: assets/hdr/pq-term-*.png, assets/hdr/mark-dot-*.png Load LAST, after assets/hero-v2.css. THE RULE THIS FILE IMPLEMENTS (founder, binding) HDR is not a colour palette. HDR is an event. Super-luminant phosphor represents active computation, propagation and successful verification. Everything else stays inside the SDR palette. dim green = knowledge . HDR green = computation / verification happening. Luminance itself becomes a state channel. SO EVERY *STATE* IS AN EVENT. Every rule in sections 1-6 is behind an `html.hx-*` class that the driver adds for the length of one event window and removes again, which is also what makes the claim checkable: outside the window the computed background-image of every eligible element is `none`, not a url. (The prefix is hx-, not ev-: `ev-` is assets/evidence.css's component prefix, and `.ev-head span{font-size:.68rem}` matches every span on the page the moment such a class lands on .) THE ONE EXCEPTION, AND IT IS THE FOUNDER'S OWN (section 7, terminal only) "blinking cursor does not have any HDR, same as request demo and the proof logo. I want it to use it by default even when this option is turned off -- in terminal theme." Three CHROME elements emit persistently on the tube: the block cursor, the REQUEST A DEMO brackets, and the wordmark period. They are not states. The cursor is a phosphor artifact -- a real tube's beam is always emitting -- and the mark and the command brackets are the machine's own furniture. The measured reason it matters: on the event-only build each of them emitted for 150-180 ms once per 24 s loop, so a visitor effectively never saw one glow. Section 7 gives those three a RESTING tier at one tenth the absolute luminance of the event tier, so the resolve still peaks above them and the choreography still reads as an event. Nothing else rests emissive. ELIGIBLE ELEMENTS, AND NOTHING ELSE the block cursor after the headline .hero33 h1 .h1-em::after -- persistent, section 7.1, at the resting tier; hx-cursor peaks it the `>` prompt glyph html[data-theme=terminal] h1::before the active node in the graph #hg-hdr .hg-hpip the pulse travelling an edge #hg-hdr .hg-hpulse `✓ VERIFIED` as it resolves #hg-hdr-tick + #hg-hdr-trail the status lamp on WATCH PROOF WORK .pctl-lamp > .pctl-hdr the wordmark period .wordmark .dot (glyph, sect 7.3) -- persistent; .dot::after blooms once per loop on hx-mark the REQUEST A DEMO brackets .btn-primary / .hero-act ::before -- persistent, section 7.2; hx-mark peaks them ::after the headline, ONE 120 ms flash on the state transition .h1-em Forbidden, and absent from this file: a permanently HDR headline, HDR body text, HDR borders or rules, HDR backgrounds, HDR on any STATE at rest. THREE TIERS OF PROOF GREEN (terminal's --pass / --signal #2BFF6F) SDR sRGB #2BFF6F the fallback, and it is the theme's own shipped green, so it already looks like the product P3 color(display-p3 .144 1 .174) same OkLCh lightness (L .8756) and hue (h 147.97 deg, held to within 2 deg), chroma +12% at the Display P3 boundary. The naive "reuse the sRGB coordinates" value would have rotated the hue by 3.55 deg and shipped a second green. HDR emissive assets/hdr/pq-term-*.png 16-bit RGBA, tagged BT.2100 PQ. EVENT tier Source triple (58741, 65535, 55440)/65535 -- peak channel at full scale = maximum PQ signal, 10000 nits nominal. Measured Chromium SDR decode (44,255,111): one unit of red off #2BFF6F. REST tier assets/hdr/pq-term-rest.png Same chromaticity, ONE TENTH the absolute luminance: (42430, 49271, 39184)/65535, 1000 nits nominal. Measured SDR decode (43,255,111) -- EXACTLY #2BFF6F, dE2000 0.000. Why 1000 and not less: see below. WHY 16-BIT, AND WHY THE VALUE IS MEASURED A naive tag of #2BFF6F as PQ decodes to pure (0,255,0) -- a second, clashing green (measured). Solving for the source whose decode lands on #2BFF6F is therefore mandatory. At 8 bits it cannot land: in the red row of Rec.2020 -> sRGB the result is a difference of two large numbers, so ONE 8-bit PQ code step moves the decoded red by ~17 sRGB units (codes 228/229/230 decode to red 28/51/68). The best 8-bit point is (229,255,216) -> (51,255,112), dE2000 0.19 -- imperceptible, but seven units of red. 16 bits makes the lattice 257x finer and the browser probe lands it at one unit. WHY THE RESTING TIER SITS AT 1000 NITS (hdrev/mintrest.py, hdrev/probeRest) Two tiers of PQ media are needed because the event tier has no headroom left above it -- its green channel is already at full scale -- so a persistent emission painted from it could never be peaked. Chromium renormalises PQ for an SDR composite, but not perfectly: the probe over ten luminance levels of the same chromaticity read back 100 nits (15,141,55) 350 (32,226,93) 600 (36,247,103) 1000 nits (39,255,110) 2500 (43,255,111) 10000 (44,255,111) -- so below ~1000 nits the SDR decode genuinely darkens (600 nits is dE2000 1.69 off #2BFF6F, which is visible), and above it the decode is level- independent to within a few units of LUT jitter. 1000 nits is therefore the LOWEST resting level that costs nothing in SDR, and it leaves a 10x luminance step for the event. A fine red-row sweep at that level (one 100- code step moves the decoded red by ~7 units) landed (42430, 49271, 39184) on #2BFF6F exactly. On a panel whose peak is under ~950 nits both tiers roll off to the panel peak and the resolve reads through area, duty and bloom instead; that degradation is deliberate, and it is why every event still carries its own SDR tell. GRACEFUL DEGRADATION IS THE POINT HDR is never load-bearing. With the assets suppressed (html[data-hdr="off"], or an SDR display, or a browser that ignores the profile) every event still fires: the same elements still brighten, bloom, scale and decay, because the SDR tier of each event is a separate declaration in the same rule. Nothing structural is lost -- `✓ VERIFIED` still reads as verified. The same holds for the three persistent carriers of section 7, and it is stronger there: their resting tile's SDR decode IS #2BFF6F, so on a plain monitor the cursor is the theme's own green block it always was, the command frames are the theme's signal green at full strength, and the period is the period. The SDR page loses no colour, no shape and no position -- it loses only luminance it never had. BUDGET, MEASURED Every carrier repainted magenta over a black page and the magenta counted, weighted by coverage (hdrev/budget.js), at 1440x900: t 8.0 REST, cursor lit 0.184% <- the persistent floor, section 7 t 8.0 REST, cursor dark 0.006% <- the frames + the period, 73 px t 16.7 cursor strike 0.213% t 17.8 pulse travelling 0.328% t 18.6 pulses 0.360% t 19.55 RESOLVE 1.284% <- the peak: the 120 ms headline flash t 19.65 mark + frames 0.228% t 19.7 decay 0.209% t 20.0 tail 0.185% The block cursor is 2300 of the 2385 resting pixels and it is lit half the time, so the resting emission averages ~0.095% of the viewport and never exceeds 0.184%. Ceiling is ~3%; the resting floor is a sixteenth of it and the 120 ms peak is well under a half. ========================================================================== */ /* ========================================================================== 0. THE TIERS AS TOKENS --pq-green is the SDR tier and the P3 tier. --pq-src is the HDR EVENT tier and --pq-rest the HDR RESTING tier. All are declared for every theme so a future theme can opt in; only terminal uses them today. ========================================================================== */ html[data-theme="terminal"]{ --pq-green:#2BFF6F; --pq-green-rgb:43,255,111; --pq-src:url("hdr/pq-term-flat.png"); --pq-rest:url("hdr/pq-term-rest.png"); --pq-disc:url("hdr/pq-term-disc.png"); } @media (color-gamut: p3){ html[data-theme="terminal"]{ /* PROOF GREEN / P3. Same L and h as #2BFF6F, chroma out to the P3 boundary. This is the tier that buys saturation; it cannot buy luminance -- no CSS colour can exceed SDR white, which is why the third tier is media. */ --pq-green:color(display-p3 .144 1 .174); } } /* the event channels. Declared at :root so a pseudo-element can read them and so every calc() has a value before the driver ever writes one. */ :root{ --hx-cursor:0; --hx-prompt:0; --hx-head:0; --hx-lamp:0; --hx-mark:0; --hx-resolve:0; } /* Full headroom where the platform lets us ask for it. Feature-detected, never required: without it the compositor's own default applies and the event still emits, just clamped to whatever headroom the page is granted. */ @supports (dynamic-range-limit: no-limit){ html.hx-cursor .hero33 .hero-copy h1 .h1-em::after, html.hx-head .hero33 .hero-copy h1 .h1-em, html.hx-prompt .hero33 .hero-copy h1::before, html.hx-mark .wordmark .dot::after, html.hx-lamp .pctl-lamp .pctl-hdr, .hg-hdr{dynamic-range-limit:no-limit;} /* the three persistent chrome carriers of section 7 ask for the same headroom at rest, or the resting tier would be the one thing on the page a constrained ancestor could clamp */ html[data-theme="terminal"] .hero33 .hero-copy h1 .h1-em::after, html[data-theme="terminal"] h1::after, html[data-theme="terminal"] .wordmark .dot, html[data-theme="terminal"] .site-header .nav > .btn-primary::before, html[data-theme="terminal"] .site-header .nav > .btn-primary::after, html[data-theme="terminal"] .hero33 .cta-row .hero-act::before, html[data-theme="terminal"] .hero33 .cta-row .hero-act::after{dynamic-range-limit:no-limit;} } /* the kill switch. One attribute suppresses every HDR asset on the page, which is how the SDR fallback is verified (hdrev-fallback.png) and how a future "reduce luminance" preference would be honoured. IT MUST ALSO PUT THE TEXT FILL BACK. Caught on the first fallback screenshot: suppressing the raster alone left `-webkit-text-fill-color:transparent` in place on the headline and the prompt, so the second headline line vanished and left only its glow -- HDR load-bearing, which is the one thing this whole exercise forbids. IT ALSO HAS TO REACH THE PERSISTENT CARRIERS of section 7, and it is the only thing that switches them off: they answer no class and no clock, so if the attribute missed one, that one would emit forever. `off` restores exactly what the theme paints -- currentColor inside a pseudo-element resolves to that pseudo-element's own `color`, which is where the brackets' rgba(43,255,111,.55) and the period's --signal live, so the restored appearance is byte-identical to the theme with this file deleted. */ html[data-hdr="off"] .hero33 .hero-copy h1 .h1-em::after, html[data-hdr="off"] .hero33 .hero-copy h1 .h1-em, html[data-hdr="off"] .hero33 .hero-copy h1::before, html[data-hdr="off"] h1::before, html[data-hdr="off"] h1::after, html[data-hdr="off"] .wordmark .dot, html[data-hdr="off"] .wordmark .dot::after, html[data-hdr="off"] .site-header .nav > .btn-primary::before, html[data-hdr="off"] .site-header .nav > .btn-primary::after, html[data-hdr="off"] .hero33 .cta-row .hero-act::before, html[data-hdr="off"] .hero33 .cta-row .hero-act::after, html[data-hdr="off"] .pctl-lamp .pctl-hdr{background-image:none !important;} html[data-hdr="off"] .hero33 .hero-copy h1 .h1-em, html[data-hdr="off"] .hero33 .hero-copy h1::before, html[data-hdr="off"] .wordmark .dot, html[data-hdr="off"] .site-header .nav > .btn-primary::before, html[data-hdr="off"] .site-header .nav > .btn-primary::after, html[data-hdr="off"] .hero33 .cta-row .hero-act::before, html[data-hdr="off"] .hero33 .cta-row .hero-act::after, html[data-hdr="off"] h1::before{-webkit-text-fill-color:currentColor !important;} html[data-hdr="off"] .hg-hdr image{visibility:hidden;} /* ========================================================================== 1. THE BLOCK CURSOR . the beat that starts everything The cursor emits at the RESTING tier through every blink (section 7.1) and goes to the EVENT tier for 180 ms at 16.60. At that instant verification begins. SDR tier: the blink is suspended, the block goes to full opacity, blooms and widens a little. HDR tier: the EVENT raster replaces the resting one, so the same pixels go from 1000 to 10000 nits nominal -- and because the blink stops, the duty cycle goes from a half to one at the same moment. On an SDR display the two rasters are the same green and only the bloom, the width and the steadiness change. ========================================================================== */ html.hx-cursor[data-theme="terminal"] .hero33 .hero-copy h1 .h1-em::after{ animation:none; opacity:1; background-image:var(--pq-src); background-size:100% 100%; /* the SDR tell. Static while the class is on, so no property animates per frame: the event is two class toggles, not a keyframe track. */ box-shadow:0 0 20px 5px rgba(var(--pq-green-rgb),.85),0 0 46px 12px rgba(var(--pq-green-rgb),.4); transform:translateY(.1em) scaleX(1.14); } /* the tube's own H1 cursor (every other page) follows the same rule */ html.hx-cursor[data-theme="terminal"] h1::after{ animation:none;opacity:1; background-image:var(--pq-src);background-size:100% 100%; box-shadow:0 0 20px 5px rgba(var(--pq-green-rgb),.85); } /* ========================================================================== 2. THE `>` PROMPT . lit while the machine is working One rise, one hold, one fall per loop -- not a repeating pulse. The glyph itself is painted from the PQ raster with background-clip:text, so the HDR is exactly the shape of the character and nothing around it emits. ========================================================================== */ html.hx-prompt[data-theme="terminal"] .hero33 .hero-copy h1::before, html.hx-prompt[data-theme="terminal"] h1::before{ background-image:var(--pq-src); background-size:100% 100%; background-repeat:no-repeat; -webkit-background-clip:text;background-clip:text; /* the SDR tier: the glyph goes from .62 alpha to full and blooms. Painted with a colour, so if background-clip:text is unsupported the glyph is still lit. */ color:rgba(var(--pq-green-rgb),calc(.62 + .38 * var(--hx-prompt))); /* NOT `transparent`. A fully transparent fill makes the raster load-bearing: if the image 404s, or the profile is ignored and the layer is dropped, the glyph disappears. A .34 fill of the glyph's own green keeps the character legible on its own and still lets ~two thirds of the raster's headroom through, and because the raster's SDR decode IS this green the composite is visually identical in SDR -- no dip at the start of the flash. */ -webkit-text-fill-color:rgba(var(--pq-green-rgb),.34); text-shadow:0 0 calc(10px * var(--hx-prompt)) rgba(var(--pq-green-rgb),.8); } /* no HDR without the clip: fill stays the lit colour rather than transparent */ @supports not ((-webkit-background-clip:text) or (background-clip:text)){ html.hx-prompt[data-theme="terminal"] .hero33 .hero-copy h1::before, html.hx-prompt[data-theme="terminal"] h1::before{ background-image:none;-webkit-text-fill-color:currentColor; } } /* ========================================================================== 3. THE HEADLINE . one 120 ms flash on the state transition, never continuous This is the only rule in the file that touches the headline, and it is the one the founder called out: a permanently HDR headline becomes neon signage. ========================================================================== */ html.hx-head[data-theme="terminal"] .hero33 .hero-copy h1 .h1-em{ background-image:var(--pq-src); background-size:100% 100%; background-repeat:no-repeat; -webkit-background-clip:text;background-clip:text; /* .34, not transparent -- see the prompt above. The headline must survive a missing raster; it is the one element on the page that absolutely cannot blink out of existence for 120 ms. */ -webkit-text-fill-color:rgba(var(--pq-green-rgb),.34); /* SDR tier: the existing 14px glow opens up for the length of the flash */ text-shadow:0 0 30px rgba(var(--pq-green-rgb),calc(.55 * var(--hx-head))); } @supports not ((-webkit-background-clip:text) or (background-clip:text)){ html.hx-head[data-theme="terminal"] .hero33 .hero-copy h1 .h1-em{ background-image:none;-webkit-text-fill-color:currentColor; } } /* ========================================================================== 4. THE STATUS LAMP on [>] WATCH PROOF WORK One heartbeat per loop, on the beat the graph resolves. The flare is a child element the driver injects (the lamp's own ::before / ::after are the two hairline ticks that wire it into the page), so its opacity can decay freely without touching the lamp itself. ========================================================================== */ .pctl-lamp{position:relative;} .pctl-hdr{ position:absolute;left:50%;top:50%; width:240%;height:240%; transform:translate(-50%,-50%); pointer-events:none; opacity:0; /* NO border-radius. MEASURED CHROMIUM BUG: a border-radius on an element whose background is a PQ-tagged image makes the rounded clip drop the colour and the element paints pure white (255,255,255) instead of the decoded green. Every HDR carrier in this file is therefore square-boxed and gets its shape from the asset's own alpha channel, which the discs already carry. */ } html.hx-lamp .pctl-lamp .pctl-hdr{ background:url("hdr/mark-dot-terminal.png") center/contain no-repeat; opacity:var(--hx-lamp); } /* every theme's lamp flares in its own ink */ html.hx-lamp[data-theme="paper"] .pctl-hdr, html.hx-lamp:not([data-theme]) .pctl-hdr{background-image:url("hdr/mark-dot-paper.png");} html.hx-lamp[data-theme="riso"] .pctl-hdr{background-image:url("hdr/mark-dot-riso.png");} html.hx-lamp[data-theme="brutal"] .pctl-hdr{background-image:url("hdr/mark-dot-brutal.png");} html.hx-lamp[data-theme="acid"] .pctl-hdr{background-image:url("hdr/mark-dot-acid.png");} html.hx-lamp[data-theme="olo"] .pctl-hdr{background-image:url("hdr/mark-dot-olo.png");} html.hx-lamp[data-theme="night"] .pctl-hdr{background-image:url("hdr/mark-dot-night.png");} html.hx-lamp[data-theme="verified"] .pctl-hdr{background-image:url("hdr/mark-dot-verified.png");} /* ========================================================================== 5. THE GRAPH OVERLAY A second svg over .hg-svg with the SAME viewBox and the same preserveAspectRatio, so graph coordinates land on graph geometry with no measurement. It is deliberately OUTSIDE .hg-svg: that element carries the --hg-op envelope (.30 on the tube) and the top-third mask, and an event that means "this is happening right now" must not be dimmed to 30%. Terminal only -- the mechanism is theme-neutral, the licence is not. ========================================================================== */ .hg-hdr{ position:absolute;inset:0;width:100%;height:100%; pointer-events:none; display:none; /* terminal opts in, below */ } html[data-theme="terminal"] .hg.is-in .hg-hdr{display:block;} /* the clip text must resolve to the same metrics as the tick it clips */ .hg-hdr text{ font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em; } /* NO blend mode on these images. A screen or plus-lighter blend pushes Chromium into an SDR blend space and the headroom is lost; on a near-black ground plain source-over already reads as emission. */ /* ========================================================================== 6. THE WORDMARK PERIOD . the mark participates in the machine The period's own GLYPH emits persistently on the tube -- section 7.3. This section is the BLOOM on top of it: a soft disc that opens once per loop, on the beat the graph resolves, and decays. Every other theme's period rests dark and only blooms here. On a page with no hero graph the driver never runs, so the bloom never opens and the mark rests at its own tier. ========================================================================== */ /* the bloom layer -- transparent, no image -- is declared in hdr-logo.css, so the mark rests correctly on the pages this file does not load onto. */ html.hx-mark .wordmark .dot::after{ opacity:var(--hx-mark); transform:translateX(-50%) scale(calc(.72 + .30 * var(--hx-mark))); background-image:url("hdr/mark-dot-paper.png"); } html.hx-mark[data-theme="riso"] .wordmark .dot::after{background-image:url("hdr/mark-dot-riso.png");} html.hx-mark[data-theme="terminal"] .wordmark .dot::after{background-image:url("hdr/mark-dot-terminal.png");} html.hx-mark[data-theme="brutal"] .wordmark .dot::after{background-image:url("hdr/mark-dot-brutal.png");} html.hx-mark[data-theme="acid"] .wordmark .dot::after{background-image:url("hdr/mark-dot-acid.png");} html.hx-mark[data-theme="olo"] .wordmark .dot::after{background-image:url("hdr/mark-dot-olo.png");} html.hx-mark[data-theme="night"] .wordmark .dot::after{background-image:url("hdr/mark-dot-night.png");} html.hx-mark[data-theme="verified"] .wordmark .dot::after{background-image:url("hdr/mark-dot-verified.png");} /* ========================================================================== 7. THE THREE PERSISTENT CHROME CARRIERS . TERMINAL ONLY Founder: "blinking cursor does not have any HDR, same as request demo and the proof logo. I want it to use it by default even when this option is turned off -- in terminal theme." WHY THIS IS NOT A BREACH OF "HDR IS AN EVENT" The rule governs STATES: a requirement that is verified must not sit there emitting, because then luminance stops being a state channel. These three are not states, they are the tube's own furniture. A block cursor is a phosphor artifact -- the beam is always on it -- the wordmark period is where the product signs its name, and `[ ]` is the shell's command frame. Nothing about them is a verdict, so nothing about them is claimed by emitting. What DID breach the spirit of the rule was the previous behaviour: each of the three emitted for 150-180 ms once per 24 s loop, so the effect existed in the stylesheet and never in front of a visitor. HOW THE EVENT STILL PEAKS ABOVE THE REST (four ways, so it survives a panel with no headroom to spare) luminance the resting tier is 1000 nits nominal, the event tier 10000 -- the same pixels, ten times the signal (see the header note) area the cursor widens 14%, the period's bloom disc opens to 1.64x the glyph, the brackets gain a halo duty the cursor's blink stops, so a half-lit block becomes a lit one bloom every event rule carries an SDR box-shadow / text-shadow tell, which is also the whole event on an SDR display NO ELEMENT HERE HAS A border-radius. Measured Chromium bug: a rounded clip over a PQ-tagged background drops the colour and paints the box pure white. The period's bloom is a square box and takes its shape from the disc's own alpha, exactly as the lamp flare does in section 4. THESE RULES ANSWER NO CLASS AND NO CLOCK. That is the point -- they hold with the graph paused, off-screen, never started, on a page with no graph at all, and in either state of the review pill's TYPE row. The single off-switch is html[data-hdr="off"], which is handled at the top of this file. ========================================================================== */ /* ---- 7.1 the block cursor ------------------------------------------------ The raster goes over the block's own background-color, which is the same green, so the SDR rendering is unchanged to the unit and the block simply gains headroom. The blink is untouched: `t-blink` steps opacity 1 -> 0 at 50%, and opacity scales an HDR layer proportionally, so the block emits through the lit half of every blink and goes dark with the dark half. That is what a phosphor block does. The cadence, the size, the position and the reduced-motion behaviour are all exactly as themes.css/hero-v2.css set them. */ html[data-theme="terminal"] .hero33 .hero-copy h1 .h1-em::after, html[data-theme="terminal"] h1::after{ background-image:var(--pq-rest); background-size:100% 100%; background-repeat:no-repeat; } /* ---- 7.2 REQUEST A DEMO . the brackets, not the words -------------------- WHAT CARRIES THE EMISSION, AND WHY IT IS NOT THE LABEL Both actions read `[ REQUEST A DEMO -> ]` on the tube: themes.css draws every .btn as a bracketed command. Only the brackets emit. 1 AREA. The label is 15 caps glyphs at .16em tracking, twice over. The two bracket pseudo-elements are 1 and 3 glyphs. Emitting both labels would roughly quadruple the persistent budget for no gain in meaning. 2 MEANING. dim green = knowledge, HDR green = the machine working. The words are the knowledge -- what the visitor reads -- and the theme already paints them in pale phosphor --ink, not in signal green. The brackets are the machine's own frame, already drawn in signal green. Lighting the frame and leaving the words is the same distinction the `>` prompt makes in section 2. 3 SAFETY. A pseudo-element cannot be selected, cannot be read by a screen reader and is not part of the accessible name, so this treatment cannot touch the label, the destination, the hit area, the focus ring or ::selection. Painting the label itself would have meant -webkit-text-fill-color on real text, and that overrides ::selection's own colour -- the tube's selection is #2BFF6F on #050807 and must stay so. The header's arrow travels with its closing bracket because hero-v2.css fuses them into the one pseudo-element the tube leaves free (`-> ]`); the hero action's arrow is a character inside the label text, so it stays with the label. Both actions therefore show a lit frame around unlit words. The fill is a partial green, NEVER transparent: if the raster 404s or the profile is ignored, the bracket is still a bracket. */ html[data-theme="terminal"] .site-header .nav > .btn-primary::before, html[data-theme="terminal"] .site-header .nav > .btn-primary::after, html[data-theme="terminal"] .hero33 .cta-row .hero-act::before, html[data-theme="terminal"] .hero33 .cta-row .hero-act::after{ background-image:var(--pq-rest); background-size:100% 100%; background-repeat:no-repeat; -webkit-background-clip:text;background-clip:text; /* the SDR tell: the frame goes from .55/.62 alpha to the theme's full signal green, which is what the raster's own SDR decode is, so the composite is one colour in SDR and an emitting one in HDR. No text-shadow at rest -- the brackets inherit .btn:hover's own glow, and adding a resting halo here would have had to be undone by the kill switch, taking the hover glow with it. */ -webkit-text-fill-color:rgba(var(--pq-green-rgb),.62); } /* no clip, no raster: the frame keeps the colour the theme gave it */ @supports not ((-webkit-background-clip:text) or (background-clip:text)){ html[data-theme="terminal"] .site-header .nav > .btn-primary::before, html[data-theme="terminal"] .site-header .nav > .btn-primary::after, html[data-theme="terminal"] .hero33 .cta-row .hero-act::before, html[data-theme="terminal"] .hero33 .cta-row .hero-act::after{ background-image:none;-webkit-text-fill-color:currentColor; } } /* hover still means something: the frame goes to the full signal colour and blooms. Unchanged from the theme's intent, just brighter than a fill of .62. */ html[data-theme="terminal"] .site-header .nav > .btn-primary:hover::before, html[data-theme="terminal"] .site-header .nav > .btn-primary:hover::after, html[data-theme="terminal"] .hero33 .cta-row .hero-act:hover::before, html[data-theme="terminal"] .hero33 .cta-row .hero-act:hover::after{ -webkit-text-fill-color:var(--pq-green); } /* THE EVENT PEAK. The chrome answers the resolve on the wordmark's own beat -- hx-mark, 19.58 -> 20.08, 150 ms at peak then a phosphor tail -- so the mark, the lamp and the two command frames beat together as the graph verifies. The channel is hx-mark and not hx-resolve on purpose: theme-verified.js also fires hx-resolve when a static receipt scrolls into view, and the header CTA must not flash because the reader went past a receipt. */ html.hx-mark[data-theme="terminal"] .site-header .nav > .btn-primary::before, html.hx-mark[data-theme="terminal"] .site-header .nav > .btn-primary::after, html.hx-mark[data-theme="terminal"] .hero33 .cta-row .hero-act::before, html.hx-mark[data-theme="terminal"] .hero33 .cta-row .hero-act::after{ background-image:var(--pq-src); -webkit-text-fill-color:var(--pq-green); text-shadow:0 0 calc(9px * var(--hx-mark)) rgba(var(--pq-green-rgb),calc(.72 * var(--hx-mark))); } /* ---- 7.3 the wordmark period ------------------------------------------- THIS PARTIALLY REVERSES THE RETIREMENT IN assets/hdr-logo.css, AND IT MUST NOT BRING BACK WHAT THE RETIREMENT REMOVED. That fix existed because the resting period was a RASTER OVERLAY sized in em and positioned by hand: a .34em box over a 5.27px glyph, so the mark's ink ran 3-5 px right and low, its box grew, and on the bright themes `color:transparent !important` made one 404 enough to delete the logo. So the resting emission is not an overlay at all. The period's OWN GLYPH is painted from the flat resting tile through background-clip:text: GEOMETRY IS NOT AUTHORED. The emitting pixels ARE the glyph's outline, so size and position are correct at 1440, at 390, at 200% zoom and at any dpr by construction -- there is no box to misplace and nothing can overflow the period's own box, because the clip IS the period. THE TILE IS 8x8 AND FLAT, so background-size cannot introduce a scaling artefact and the raster can never go stale the way wordmark-terminal.png did (it was cut for a 73.75px box that is now 68.23px). NO border-radius anywhere near it, and no `color:transparent !important`: the fill is a partial green, so the period survives a missing raster, CSS off, or a browser that ignores background-clip:text. hdr-logo.css keeps the retirement for the wordmark's LETTERS in all eight themes and for the period in the other seven. */ html[data-theme="terminal"] .wordmark .dot{ background-image:var(--pq-rest); background-size:100% 100%; background-repeat:no-repeat; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:rgba(var(--pq-green-rgb),.62); } @supports not ((-webkit-background-clip:text) or (background-clip:text)){ html[data-theme="terminal"] .wordmark .dot{ background-image:none;-webkit-text-fill-color:currentColor; } } /* the bloom, measured onto the ink rather than guessed at. hdrev/ink33.js screenshots the .dot box at dsf 8 and reports where the green actually is: at any size the period's ink is .1709em wide and its centre sits .3604em above the bottom of a .2871em-wide box. So the bloom is .28em -- the widest square that still fits INSIDE that box -- centred on the ink, and it peaks at scale 1.0, never larger than the box. (The shared rule in section 6 is .34em at up to 1.02, which would spill ~0.6px each side of the tube's own period.) */ html[data-theme="terminal"] .wordmark .dot::after{ width:.28em;height:.28em; margin-left:0; bottom:.2204em; /* .3604em ink centre - .14em radius */ } html.hx-mark[data-theme="terminal"] .wordmark .dot::after{ transform:translateX(-50%) scale(calc(.62 + .38 * var(--hx-mark))); } /* and the glyph itself steps up to the event tier on the same beat, so the period does not just grow a halo -- it gets ten times brighter underneath it */ html.hx-mark[data-theme="terminal"] .wordmark .dot{background-image:var(--pq-src);} /* ========================================================================== 8. REDUCED MOTION The graph driver holds one still frame and never starts the loop, so no channel is ever written and no event asset is ever painted. Said out loud so a future edit cannot introduce one. The three persistent carriers of section 7 stay: none of them moves. The cursor's blink is themes.css's own animation and themes.css already stops it under this query, which leaves a steady lit block -- correct, and quieter than the blink it replaces. ========================================================================== */ @media (prefers-reduced-motion: reduce){ html .hg-hdr{display:none !important;} html .wordmark .dot::after{opacity:0 !important;background-image:none !important;} html .pctl-hdr{opacity:0 !important;background-image:none !important;} }