/* ============================================================
DE WITTE LIJST — site layer on top of the chassis.
WHY A SECOND FILE: the chassis contract is "recolour :root, touch nothing
below it", and its gate fails on any hex below :root. But stage 07 mandates
things the chassis does not ship — gold/silver/bronze glowing rank borders
(it has only a single gold `is-top`) and a hero backdrop image. Forking
casino.css would have broken the chassis gate; layering keeps casino.css
byte-identical to the frozen asset and puts every site-specific rule here.
Load order: casino.css then brand.css
============================================================ */
:root{
/* rank medals — each border gets a soft glow in its OWN colour (stage 07
rule 5). A glow is a box-shadow, never a blur over text. */
--dwl-gold:#C9962B;
--dwl-gold-glow:rgba(201,150,43,.38);
--dwl-silver:#8E9AA6;
--dwl-silver-glow:rgba(142,154,166,.36);
--dwl-bronze:#A9713C;
--dwl-bronze-glow:rgba(169,113,60,.34);
--dwl-rest:#2f6bb0;
--dwl-rest-glow:rgba(47,107,176,.22);
/* NL availability signal — researched per brand, never a guess */
--dwl-ok-bg:#eaf7ee; --dwl-ok-bd:#b6ddc2; --dwl-ok-ink:#1c5c31;
--dwl-warn-bg:#fdf4e3; --dwl-warn-bd:#e8cf9a; --dwl-warn-ink:#7a5410;
--dwl-stop-bg:#fdedec; --dwl-stop-bd:#eec4c0; --dwl-stop-ink:#8a2b21;
}
/* ---- hero backdrop behind ALL hero text (stage 07 rule 2) ----------------
The illustration's subject band (canal houses, windmill, bridge) sits low in
the source file, so the focal point is pulled to 58% — at `center top` the
hero window would show only empty sky, which is the documented trap. */
.ch-hero.dwl-hero{
background:
linear-gradient(180deg,rgba(248,251,253,.93) 0%,rgba(248,251,253,.72) 46%,rgba(248,251,253,.90) 100%),
url("/assets/images/hero-home.webp") center 58%/cover no-repeat;
border-bottom:1px solid var(--ch-line-soft);
}
@media (max-width:860px){
/* Narrower viewport crops the illustration harder; nudge the band up so the
gables stay visible instead of drifting out of frame. */
.ch-hero.dwl-hero{background-position:center 52%,center 52%;background-size:auto,180% auto}
}
/* ---- rank medals ---- */
.ch-card.dwl-r1{border-color:var(--dwl-gold);
box-shadow:0 0 0 1px var(--dwl-gold),0 6px 22px var(--dwl-gold-glow)}
.ch-card.dwl-r2{border-color:var(--dwl-silver);
box-shadow:0 0 0 1px var(--dwl-silver),0 6px 22px var(--dwl-silver-glow)}
.ch-card.dwl-r3{border-color:var(--dwl-bronze);
box-shadow:0 0 0 1px var(--dwl-bronze),0 6px 22px var(--dwl-bronze-glow)}
.ch-card.dwl-rest{border-color:var(--dwl-rest);
box-shadow:0 0 0 1px var(--dwl-rest),0 5px 18px var(--dwl-rest-glow)}
.ch-card.dwl-r1:hover,.ch-card.dwl-r2:hover,.ch-card.dwl-r3:hover,.ch-card.dwl-rest:hover{
transform:translateY(-2px)}
/* The chassis paints the gold badge + cream fill off `.is-top`; our medals key
off dwl-r1..r3, so rank 1 kept the default grey badge and a white fill until
these two lines existed (caught on the 1440px reference screenshot, not by
reading the CSS). */
.ch-card.dwl-r1{background:var(--ch-cream)}
.ch-card.dwl-r1 .ch-rank{background:var(--dwl-gold);border-color:var(--dwl-gold);
color:var(--ch-accent-ink)}
.ch-card.dwl-r2 .ch-rank{background:var(--dwl-silver);border-color:var(--dwl-silver);color:#fff}
.ch-card.dwl-r3 .ch-rank{background:var(--dwl-bronze);border-color:var(--dwl-bronze);color:#fff}
.ch-card.dwl-rest .ch-rank{background:var(--dwl-rest);border-color:var(--dwl-rest);color:#fff}
/* ---- inzetvereiste chip: this build's user-first element (fingerprint L7).
The bonus headline is the loudest number on every competitor card and almost
never the decisive one; the wagering requirement spans 5x-45x on this very
lineup, and competitors bury it in prose. NOTE: an earlier draft used this
slot for a per-card country-availability verdict built from review-aggregator
restricted-country lists. That second-guessed the ClickUp lineup, which is
the source of truth for which brands are NL offers, so it was removed. */
.dwl-wager{display:inline-flex;align-items:center;gap:.35rem;margin-top:.3rem;
font-size:.74rem;font-weight:700;line-height:1.25;padding:.2rem .55rem;
border-radius:999px;border:1px solid}
.dwl-wager::before{content:"";width:.5rem;height:.5rem;border-radius:50%;
background:currentColor;flex:none}
.dwl-wager.is-ok{background:var(--dwl-ok-bg);border-color:var(--dwl-ok-bd);color:var(--dwl-ok-ink)}
.dwl-wager.is-warn{background:var(--dwl-warn-bg);border-color:var(--dwl-warn-bd);color:var(--dwl-warn-ink)}
.dwl-wager.is-stop{background:var(--dwl-stop-bg);border-color:var(--dwl-stop-bd);color:var(--dwl-stop-ink)}
/* ---- bonus pill: identical width in every card --------------------------
The chassis makes .ch-bonus an inline-block, so the pill shrink-wraps its
text: measured 244 / 172 / 244 px across three cards at 1440px. The x
positions matched, but three different pill widths is exactly the ragged
edge stage 07's alignment rule is about. Filling the CTA cell makes the
bonus block, the CTA and the note one clean column. (Mobile already does
this in the chassis.) */
.ch-cell-cta .ch-bonus{display:block;width:100%;text-align:center;box-sizing:border-box}
/* ---- dark-footer hover repaint ------------------------------------------
The chassis ships a LIGHT footer, so `.ch-foot a:hover{color:--ch-primary}`
is fine there. We chose a deep Delft-blue footer (allowed: dark footer yes,
dark page no), and on #0B2E57 a #12457E hover is all but invisible — the
same state-dependent contrast trap the chassis documents for its mobile nav
panel, where both halves are individually legal. Hover goes to the footer's
own gold heading colour instead. */
.ch-foot a:hover{color:var(--ch-foot-head)}
/* ---- fact row under each card's brand name ---- */
.dwl-facts{display:flex;flex-wrap:wrap;gap:.3rem .9rem;margin:.35rem 0 0;padding:0;
list-style:none;font-size:.8rem;color:var(--ch-muted)}
.dwl-facts li{display:flex;gap:.3rem}
.dwl-facts b{color:var(--ch-ink);font-weight:700}
@media (max-width:860px){
/* All three fixes below came from the 390x844 screenshot, not from reading
CSS. Our card carries more than the chassis card expects (availability
chip + fact row + copy), and at 390px that extra content misbehaved. */
/* The chip was vertically centred against a tall text column, so it landed
in the middle of the card instead of beside the brand name. */
.ch-cell-mid{align-items:flex-start}
/* Keep the chip to ONE line at 390px — measured wrapping to two lines at the
default size inside the narrowed copy column. */
.dwl-wager{display:inline-flex;max-width:100%;box-sizing:border-box;
white-space:nowrap;font-size:.7rem;padding:.18rem .48rem}
/* Each fact was a flex row whose could shrink, so "0-24 uur" broke
across lines mid-value. One plain block per line lets the text flow. */
.dwl-facts{display:block;gap:0}
.dwl-facts li{display:block;margin:.1rem 0}
/* Reclaim ~16px for the text column: with the availability chip + fact rows
alongside it, the chassis's 120px mobile chip left the copy too narrow. */
.ch-chip{width:104px;height:56px}
}
/* ============================================================
DATA VISUALS + LISTS introduced by the money page.
Every one traces to a number that also appears in the prose
(fingerprint Layer 11: a visual is prose upgraded, not decoration).
============================================================ */
/* ---- payout-speed bars: the SLOWEST rail per casino, in days ---- */
.dwl-bars{list-style:none;margin:1.1rem 0;padding:0;display:grid;gap:.55rem}
.dwl-bar{display:grid;grid-template-columns:9.5rem 1fr 11rem;align-items:center;gap:.8rem;
font-size:.9rem}
.dwl-bar-label{font-weight:700;color:var(--ch-ink)}
.dwl-bar-track{background:var(--ch-surface);border:1px solid var(--ch-line);
border-radius:999px;height:1.15rem;overflow:hidden}
.dwl-bar-fill{display:block;height:100%;border-radius:999px;
background:linear-gradient(90deg,var(--ch-primary-tint) 0,var(--ch-primary) 100%)}
.dwl-bar-val{color:var(--ch-muted);white-space:nowrap}
.dwl-bar-val em{font-style:normal;opacity:.8}
/* ---- availability stat strip ---- */
.dwl-statstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:1.1rem 0;
background:var(--ch-card);border:1px solid var(--ch-line);border-radius:var(--ch-radius-lg);
padding:1rem .8rem;box-shadow:var(--ch-shadow)}
.dwl-stat{text-align:center;padding:.2rem .4rem;border-inline-end:1px solid var(--ch-line-faint)}
.dwl-stat:last-child{border-inline-end:0}
.dwl-stat-num{display:block;font-family:var(--ch-display);font-size:2rem;font-weight:800;
line-height:1.1}
.dwl-stat-num.is-ok{color:var(--dwl-ok-ink)}
.dwl-stat-num.is-warn{color:var(--dwl-warn-ink)}
.dwl-stat-num.is-stop{color:var(--dwl-stop-ink)}
.dwl-stat-lab{display:block;font-size:.78rem;color:var(--ch-muted);line-height:1.3}
/* ---- arc gauge ---- */
.dwl-gauge{margin:1.2rem 0;padding:0;display:grid;gap:.5rem;justify-items:center;
max-width:34rem}
.dwl-gauge svg{width:100%;max-width:15rem;height:auto}
.dwl-gauge-num{font-family:var(--ch-display);font-size:1.6rem;font-weight:800;
fill:var(--ch-primary)}
.dwl-gauge-lab{font-size:.62rem;fill:var(--ch-muted)}
.dwl-gauge figcaption{font-size:.85rem;color:var(--ch-muted);text-align:center}
/* ---- payment-rail chips (the parity ROLE, without shipping trademarks) ---- */
.dwl-rails{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:.9rem 0;padding:0}
.dwl-rails li{background:var(--ch-primary-bg);border:1px solid var(--ch-primary-bd);
color:var(--ch-primary-dark);border-radius:8px;padding:.3rem .6rem;font-size:.82rem;
font-weight:600}
/* ---- source list ---- */
.dwl-sources{margin:.8rem 0;padding-inline-start:1.1rem;display:grid;gap:.35rem}
.dwl-sources a{font-weight:600}
@media (max-width:860px){
.dwl-bar{grid-template-columns:1fr;gap:.2rem}
.dwl-bar-track{height:.9rem}
.dwl-bar-val{font-size:.82rem}
.dwl-statstrip{grid-template-columns:1fr;gap:0;padding:.4rem .8rem}
.dwl-stat{border-inline-end:0;border-bottom:1px solid var(--ch-line-faint);
display:flex;align-items:baseline;gap:.6rem;text-align:start;padding:.6rem .2rem}
.dwl-stat:last-child{border-bottom:0}
.dwl-stat-num{font-size:1.5rem}
}
/* ============================================================
TRUST + AUTHOR PAGES
============================================================ */
.dwl-prose{max-width:76ch}
.dwl-prose h2{font-size:clamp(1.25rem,2.2vw,1.6rem);margin:2rem 0 .6rem}
.dwl-prose h2:first-child{margin-top:0}
.dwl-prose ul{padding-inline-start:1.15rem;display:grid;gap:.35rem;margin:.7rem 0}
.dwl-prose ul.dwl-rails{padding-inline-start:0}
/* author profile hero */
.dwl-authorhero{display:flex;gap:1.4rem;align-items:flex-start;margin:0 0 1.6rem;
padding-bottom:1.4rem;border-bottom:1px solid var(--ch-line)}
.dwl-authorhero img{width:150px;height:150px;border-radius:16px;object-fit:cover;flex:none;
border:1px solid var(--ch-line);box-shadow:var(--ch-shadow)}
.dwl-authorrole{font-family:var(--ch-display);font-weight:700;font-size:1.1rem;
color:var(--ch-primary);margin:0}
.dwl-authormeta{font-size:.86rem;color:var(--ch-muted);margin:.15rem 0 .6rem}
/* author index cards */
.dwl-authorcards{display:grid;gap:1rem;margin:1.4rem 0}
.dwl-authorcard{display:flex;gap:1.1rem;align-items:flex-start;background:var(--ch-card);
border:1px solid var(--ch-line);border-radius:var(--ch-radius-lg);padding:1.1rem;
box-shadow:var(--ch-shadow)}
.dwl-authorcard img{width:104px;height:104px;border-radius:12px;object-fit:cover;flex:none}
.dwl-authorcard h3{margin:0 0 .1rem;font-size:1.15rem}
.dwl-authorcard h3 a{color:var(--ch-primary);text-decoration:none}
.dwl-authorcard h3 a:hover{text-decoration:underline}
.dwl-authorcard p{margin:.2rem 0}
@media (max-width:860px){
.dwl-authorhero,.dwl-authorcard{flex-direction:column}
.dwl-authorhero img{width:120px;height:120px}
.dwl-authorcard img{width:88px;height:88px}
}
/* ---- hero byline + date MUST stack, never sit side by side -----------------
The chassis makes .ch-byline an inline-flex pill and .ch-upd an inline-block
pill. Inside the centred .ch-hero-copy both are inline-level, so whenever
there is horizontal room they flow onto the SAME line and the "Laatst
bijgewerkt" pill lands beside the author instead of under them — which reads
as a layout bug (operator, 2026-08-20). Forcing .ch-upd to its own block row
makes the stacking viewport-independent instead of a happy accident of
available width. */
.ch-hero-copy .ch-upd{display:block;width:fit-content;margin-inline:auto}
/* ---- bonus = the loudest TEXT, never a second button ----------------------
Operator rule 2026-08-20: the chassis's `.ch-bonus` PILL (gold gradient,
border, inset shadow) reads as a CTA stacked above the real CTA, so the card
appears to have two buttons. The reference treatment is
phototheque-peuriot-ploquin.com's `.bonus-chip`: plain, large, heavy,
brand-coloured TEXT with no background, no border and no shadow. The CTA
stays the only button in the card. The chassis ships both forms — the pill
and the `.ch-bonus-val` text form — and the text form is the correct one. */
/* `.ch p{color:var(--ch-ink-soft)}` in the chassis outranks a bare class on a ,
so the bonus silently rendered in the BODY-TEXT colour — failing stage-07 rule 6
("a different colour from body text") while looking deliberate. Measured, not read.
Scoped as `.ch p.dwl-bonus` to win on specificity. */
.ch p.dwl-bonus{display:block;margin:0 0 .55rem;font-family:var(--ch-display);
font-size:1.42rem;font-weight:800;line-height:1.22;letter-spacing:-.01em;
color:#8a5a00;text-align:center}
/* ---- per-brand mini-reviews (the detail the toplist card no longer carries) */
.dwl-mini{border-top:1px solid var(--ch-line);padding:1.1rem 0 .3rem}
.dwl-mini:first-of-type{border-top:0}
.ch .dwl-mini h3{margin:0 0 .2rem;font-size:1.15rem}
.dwl-mini p{margin:0 0 .6rem;max-width:74ch}
.dwl-mini .ch-cta{display:inline-block;width:auto}
@media (max-width:860px){
.dwl-bonus{font-size:1.24rem}
.dwl-mini .ch-cta{display:block;width:100%}
}
/* ---- in-body section illustrations -------------------------------------------
Fingerprint Layer 10: 2 of 4 competitors attach an image to their major H2
sections (playsense 8 at ~711px, ginsider 10 at 1024x683). Our page shipped
none until this was caught — see the fingerprint report's open-gap note. */
.dwl-secimg{display:block;width:100%;max-width:34rem;height:auto;margin:.2rem 0 1.1rem;
border:1px solid var(--ch-line);border-radius:var(--ch-radius-lg);background:var(--ch-card)}
@media (max-width:860px){ .dwl-secimg{max-width:100%;margin-bottom:.9rem} }