/* ------------------------------------------------------------------------ Reveals exactly one verified tick. A new file rather than an edit to verify-badge.css, which is carried over from the Node build byte for byte. The problem this solves: the shape is drawn from a shuffled cycle kept in the visitor's own localStorage, so the server has no way to know which one this load should show. The old build had no trouble with that because the badge was built in the browser anyway — but it also meant the badge could not appear until the config fetch had returned. Server rendering swaps the problem around. So the page renders all six shapes, this file hides them, and theme-boot.js — which is blocking and runs before the first paint — sets data-tick on to reveal one. No flash, no JS-built SVG, no second request. Only the shuffled case renders six. A fixed style comes out of the server as a single badge with no data-shuffled attribute, and nothing here touches it. ------------------------------------------------------------------------ */ .verify-badge[data-shuffled] { display: none; } /* inline-flex, not flex or block: it has to match the display value .verify-badge carries in verify-badge.css, or the badge sits on its own line instead of beside the footer text. */ html[data-tick="burst"] .verify-badge[data-shuffled].style-burst, html[data-tick="hex"] .verify-badge[data-shuffled].style-hex, html[data-tick="circle"] .verify-badge[data-shuffled].style-circle, html[data-tick="scallop"] .verify-badge[data-shuffled].style-scallop, html[data-tick="hexRed"] .verify-badge[data-shuffled].style-hexRed, html[data-tick="hexViolet"] .verify-badge[data-shuffled].style-hexViolet { display: inline-flex; } /* Storage blocked, or JavaScript off entirely: data-tick is never set and the rule above never matches, which would leave the footer with no badge at all. The first shape stands in — the owner asked for a tick, and which one is the part that does not matter. */ html:not([data-tick]) .verify-badge[data-shuffled].style-burst { display: inline-flex; }