Cornhole-Set mit deinem eigenen Design

is een leeg element en de ster komt uit content:"\e000" in de font 'JudgemeStar'. Die font staat als base64 data-URI in het jdgm-miracle-styles-blok van Judge.me's app-embed, en dat base64-blok is stuk: er zit om de ~117 tekens een spatie in, waardoor de string 1581 datatekens telt -- geen veelvoud van vier. Gemeten 8-8-2026 in de browser: atob() weigert hem ("not correctly encoded") en FontFace.load() geeft "A network error occurred". De font laadt dus nooit en de browser tekent het vervangingsblokje: □□□□□ in plaats van ★★★★★. Het is Judge.me's eigen blok -- wij renderen het niet en kunnen het niet repareren. Het staat trouwens op elke pagina, ook op de homepage-carrousel. Daarom tekenen we de sterren hier zelf, met hetzelfde ★-teken dat de kop hierboven al gebruikt en dat wél gewoon rendert. Drie losse selectoren en niet één `.jdgm-star:before`: dat laatste heeft exact dezelfde specificiteit als Judge.me's eigen regel en zou puur op volgorde winnen. Met de statusclass erbij is het geen discussie meer. */ .ww-reviews .jdgm-star{ font-family:inherit !important; display:inline-block !important; position:relative; padding:0 2px 0 0 !important; color:#FBBF24; } .ww-reviews .jdgm-star.jdgm--on:before, .ww-reviews .jdgm-star.jdgm--off:before, .ww-reviews .jdgm-star.jdgm--half:before{ content:'★'; } /* Judge.me onderscheidt vol en leeg alleen via het glyph, niet via kleur -- zonder deze regel zou een 3-van-5 als vijf gouden sterren lezen. */ .ww-reviews .jdgm-star.jdgm--off, .ww-reviews .jdgm-star.jdgm--half{ color:rgba(var(--text-color), .25); } /* Halve ster: een tweede ★ eroverheen, afgeknipt op de helft. */ .ww-reviews .jdgm-star.jdgm--half:after{ content:'★'; position:absolute; inset:0 auto 0 0; width:50%; overflow:hidden; color:#FBBF24; } /* De datum achter de sterren van elke review. Judge.me zet de datum niet in het element maar in data-content, en laat zijn script hem invullen; tot dat moment staat er een laadspinner. Dat script draait hier nooit, dus draaide die spinner eeuwig -- als een smal wit streepje van 4x25px pal achter de sterrenrij van élke review. Gemeten 8-8-2026. De spinner is bovendien zelf kapot: zijn regel luidt `animation: jdgm-spin, unendlich`, waarin het CSS-sleutelwoord `infinite` vertaald is naar het Duits. Zelfde oorzaak als de kapotte sterrenfont hierboven. Weg dus. De datum zelf tonen kan later: hij staat in data-content, maar in het ruwe formaat "2026-07-24 00:00:00 UTC" -- dat vraagt om opmaak, en dat kan CSS niet. */ .ww-reviews .jdgm-rev__timestamp{ display:none !important; } /* Judge.me's eigen gemiddelde-sterrenrij. Die stond als losse rij blokjes bóven het staafdiagram, terwijl de kop hierboven het cijfer én de sterren al toont. Dubbelop, dus weg -- het cijfer in de kop komt uit de Shopify-aggregaten en staat in de bron. */ .ww-reviews .jdgm-rev-widg__summary-stars{ display:none !important; } /* Zonder deze marge staan de gemiddelde score en de sterren van de eerste review pal op elkaar en lezen ze als één rommelige rij. */ .ww-reviews .jdgm-rev-widg__header{ margin-bottom:24px; } /* "Write a review" wil Tjarco hier niet (besluit 7-8-2026). Judge.me levert de link nu al met een inline display:none en zonder zijn script blijft dat zo -- maar het formulier erachter werkt zonder dat script evenmin, dus zetten we het expliciet uit in plaats van erop te vertrouwen. Reviews verzamelen loopt via de Judge.me-mails na aankoop. */ .ww-reviews .jdgm-write-rev-link, .ww-reviews .jdgm-form-wrapper{ display:none !important; } /* Zou "1 2 3" tonen zonder dat klikken iets doet -- het script dat de volgende pagina ophaalt ontbreekt. Een dode knop is erger dan geen knop. De vijf nieuwste reviews staan er; wie meer wil, ziet de score erboven. */ .ww-reviews .jdgm-paginate, .ww-reviews .jdgm-rev-widg__paginate-spinner-wrapper{ display:none !important; } /* Kop met score. Groot cijfer eerst, want dat is waar het oog naartoe gaat; de rest is toelichting. */ .ww-reviews__kop{ max-width:68ch; margin-bottom:28px; } .ww-reviews__titel{ margin:0 0 10px; text-align:inherit; } .ww-reviews__score{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 10px; } .ww-reviews__cijfer{ font-size:2.4rem; font-weight:700; line-height:1; } .ww-reviews__van{ opacity:.6; } /* Twee lagen sterren over elkaar: de bovenste wordt afgeknipt op het percentage, zodat een 4,35 ook echt als vier-en-een-beetje leest in plaats van naar boven of beneden afgerond. */ .ww-reviews__sterren{ position:relative; display:inline-block; line-height:1; letter-spacing:2px; } .ww-reviews__sterren-leeg{ color:rgba(var(--text-color), .25); } .ww-reviews__sterren-vol{ position:absolute; inset:0 auto 0 0; overflow:hidden; white-space:nowrap; color:#FBBF24; } .ww-reviews__aantal{ opacity:.75; } /* Sterrenverdeling. Judge.me rendert die compleet mee -- met balkbreedte, percentage en aantal per niveau -- maar zet er jdgm-temp-hidden op omdat zijn script hem normaal zelf onthult. Dat script laadt hier niet (zie hierboven), dus doen we het zelf. Niets nagerekend: de getallen komen rechtstreeks uit de widget. */ .ww-reviews .jdgm-histogram{ display:block !important; max-width:420px; margin:0 0 28px; } .ww-reviews .jdgm-histogram__row{ display:flex; align-items:center; gap:10px; padding:2px 0; } .ww-reviews .jdgm-histogram__star{ flex:0 0 auto; white-space:nowrap; } .ww-reviews .jdgm-histogram__bar{ flex:1 1 auto; height:8px; border-radius:4px; background:rgba(var(--text-color), .12); overflow:hidden; } .ww-reviews .jdgm-histogram__bar-content{ height:100%; background:#FBBF24; } .ww-reviews .jdgm-histogram__percentage{ display:none; } /* Drie schrijfwijzen voor hetzelfde element. Judge.me's meertalige widget vertaalt niet alleen de teksten maar ook woorden ín zijn classnamen: in de Duitse render heet het aantal per niveau `jdgm-histogram__frequenz`, in dezelfde HTML komt óók `jdgm-histogram__frequent` voor, en Engels is `__frequency`. Gemeten 8-8-2026 op de Red Zone-set. Wij weten niet welke we krijgen -- de widget-HTML komt uit een metafield dat Judge.me in één taal voorrendert -- dus haken we op alle drie aan. Zonder dit bleven de aantallen ongestyled staan. */ .ww-reviews .jdgm-histogram__frequency, .ww-reviews .jdgm-histogram__frequenz, .ww-reviews .jdgm-histogram__frequent{ flex:0 0 2.5em; text-align:right; font-variant-numeric:tabular-nums; opacity:.7; } /* Het filter-wisser-rijtje. Heette hier `jdgm-histogram__clear`, maar zo noemt Judge.me het niet: de echte class is `jdgm-histogram__clear-filter`. Die regel raakte dus niets. Het is een lege div, dus zichtbaar was het niet -- wel goed voor 2px padding en een gap onder het diagram. Filteren werkt hier sowieso niet, want dat doet het ontbrekende script. */ .ww-reviews .jdgm-histogram__clear, .ww-reviews .jdgm-histogram__clear-filter, .ww-reviews .jdgm-rev-widg__sort-wrapper{ display:none !important; } /* "Reviews in Other Languages" -- de kop boven de reviews die niet in de taal van de pagina staan. Judge.me schrijft die hardcoded in het Engels mee in de voorgerenderde widget-HTML, ook op de Nederlandse, Duitse en Franse site. We kunnen die HTML niet aanpassen, dus vervangen we de tekst hier door onze eigen vertaling. Dubbele aanhalingstekens in de content-string, zodat een apostrof in bijvoorbeeld het Frans ("d'autres langues") niets breekt. */ .ww-reviews .jdgm-rev-widg__other-lang .jdgm-rev-widg__section-title{ font-size:0; margin:32px 0 16px; } .ww-reviews .jdgm-rev-widg__other-lang .jdgm-rev-widg__section-title:before{ content:"Bewertungen in anderen Sprachen"; font-size:1.125rem; font-weight:600; }