/* ── deep fry ─────────────────────────────────────────────────────────────── The easter egg. html.fx-fried puts the artwork through a 2016 re-encode: CSS contrast/saturate/brightness does the colour, then the SVG chain that sits just inside (#fx-deepfry) does the damage — six-level posterise, a one-pixel sharpen, a red bloom, grain. fx-deepfry.js flips the class, remembers it, and twitches the plate. Everything here is static: with the script gone the page is simply not fried. */ /* Small art surfaces bound the filter's cost. Text, controls and contract addresses stay outside it, including the image viewer's controls. */ html.fx-fried .hero__stack, html.fx-fried .spec__art > img, html.fx-fried .field-media, html.fx-fried .sludge, html.fx-fried .meme img, html.fx-fried .lightbox__image, html.fx-fried .footer-signoff > img { filter: contrast(1.55) saturate(2.4) brightness(1.05) url(#fx-deepfry); } /* Composite registered layers together so their colour remains identical. */ html.fx-fried .hero__stack { background-color: var(--bg); } html.fx-fried .meme { transition: none; } /* The twitch. fx-deepfry.js sets --fx-jitter to "Xpx Ypx" for two short beats every couple of seconds. The individual translate property composes with any transform another module puts on the plate rather than clobbering it. Nothing is promoted: an unpromoted 2px nudge re-rasters the few tiles under the plate and that's all. Inside the media query so a reduced-motion user never moves even if the script misfires. */ @media (prefers-reduced-motion: no-preference) { html.fx-fried .hero__plate { translate: var(--fx-jitter, none); } } /* ── the switch ──────────────────────────────────────────────────────────── */ /* Same small-button voice as the copy buttons; it lives in the footer link row, so it can't be the full-size CTA. Arrives with [hidden] and the script reveals it: a button that can't do anything is worse than no button. .btn sets display, so the UA's [hidden] rule needs backing up. */ .btn.fx-deepfry { padding: .42em .8em; font-size: .72rem; border-radius: 8px 5px 9px 6px / 5px 9px 6px 8px; } .fx-deepfry[hidden] { display: none; } html.fx-fried .fx-deepfry { --btn-bg: var(--brain); --btn-fg: var(--ink); } /* Links in that row are baseline text; a button among them needs the row centred or the links stretch to its height and their underlines drop. */ .site-foot__links { align-items: center; }