/* Theme: auto-cqbet.uk Generated from style tokens for cqbet@GB (editorial; hue 174, vivid, dark-first; compact). Structure inherited from the neon skeleton; the token block at the end of this file replaces its palette. */ /* Theme: neon ────────────────────────────────────────────────────────────────────────── The one theme built to be clicked rather than read. The other three are editorial: quiet surfaces, one accent, type doing the work. That is right for a comparison somebody arrived at from a query, and wrong for a page whose job is to send a reader to an operator — next to the pages that actually rank for a brand term, they read as a whitepaper. What changed and what did not. No JavaScript, no web fonts, no external host: the CSS fingerprint is the network's cheapest tell and a font request is a third party on every page. Everything here is a gradient, a shadow, a radius or a colour, which cost nothing and are what "modern casino site" is actually made of. The offer box gets the loudest thing on the page and nothing else competes with it. Significant terms inside it stay at the theme's smallest step and the secondary ink colour — never smaller, never dimmer. Terms a reader cannot read satisfy a checker and nobody else. */ :root { --ink: #f2f4ff; --ink-2: #a7adcc; --muted: #8b867c; --rule: #262c47; --rule-2: #1a1f36; --bg: #080a12; --surface: #121627; --raised: #1c1a14; --accent: #ffc23d; --accent-ink: #14120c; --accent-soft: #1d1a12; --warn-bg: #241a0c; --warn-rule: #5a4318; --warn-ink: #e8bf6c; --star: #e0a63c; --bar: #e0a63c; --star-empty: None; --measure: 74ch; --page: 1060px; --radius: 4px; --shadow: 0 1px 0 rgb(255 255 255 / .04) inset, 0 12px 32px -16px rgb(0 0 0 / .9); --step-0: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); --step--1: clamp(.9375rem, .92rem + .07vw, .96875rem); --step--2: .8125rem; --step--3: .6875rem; --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-8: 3rem; --sp-12: 4.5rem; --step-1: clamp(1.2rem, 1.13rem + .35vw, 1.4rem); --step-2: clamp(1.5rem, 1.35rem + .75vw, 1.95rem); --step-3: clamp(2rem, 1.6rem + 2vw, 3.1rem); } @media (prefers-color-scheme: light) { :root { /* Dark-first theme, so this is the deliberate light counterpart rather than the original palette: same amber, darkened wherever it carries text, because amber on white is a contrast failure at every text size. */ --ink: #14172a; --ink-2: #4a5070; --muted: #5b6180; --rule: #d9dcec; --rule-2: #eceef7; --bg: #f7f8fc; --surface: #ffffff; --raised: #ffffff; --accent: #8a5a00; --accent-ink: #ffffff; --accent-soft: #fdf3dd; --warn-bg: #fdf3dd; --warn-rule: #d8bf82; --warn-ink: #5a4310; --star: #8a5a00; --bar: #8a5a00; --shadow: 0 1px 2px rgb(20 23 42 / .06), 0 10px 28px -14px rgb(20 23 42 / .22); } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* The page is centred on , not on its children. It used to be centred by `body > * { margin-inline: auto }`, and every block that set a `margin: 0 0 1.75rem` shorthand — the age notice, the hero, the takeaways, nearly all of them — silently reset that auto back to zero. A shorthand writes all four sides, so each of those rules undid the centring without mentioning margins horizontally at all. The whole page sat against the left edge with the rest of a wide screen empty beside it. Centring the container instead puts the declaration somewhere no block rule can reach: a child cannot override a property it does not inherit. Blocks are free to use margin shorthands, which is what a block author will write. */ body { max-width: calc(var(--page) + 2.5rem); /* the page, plus both gutters */ margin: 0 auto; padding: clamp(1.25rem, 4vw, 2.5rem) 1.25rem 4rem; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: var(--step-0); line-height: 1.68; color: var(--ink); background: var(--bg); } h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: var(--step-3); font-weight: 800; } h2 { font-size: var(--step-2); font-weight: 750; margin-top: 2.75rem; } h3 { font-size: var(--step-1); font-weight: 700; } p { margin: 0 0 1.1em; } a { color: var(--accent); text-underline-offset: .18em; } .prose, .hero-body, .methodology-body, .legal-body { max-width: var(--measure); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ── Age notice ─────────────────────────────────────────────────────────── */ .age-18 { display: flex; gap: .85rem; align-items: center; margin: 0 0 1.75rem; padding: .8rem 1rem; background: var(--warn-bg); border-left: 3px solid var(--warn-ink); border-radius: 0 var(--radius) var(--radius) 0; color: var(--warn-ink); font-size: var(--step--1); } .age-18 p { margin: 0; } .age-mark { flex: none; display: grid; place-items: center; min-width: 2.4rem; height: 1.6rem; background: var(--warn-ink); color: var(--warn-bg); border-radius: var(--radius); font-weight: 800; font-size: var(--step--2); } /* ── Hero ────────────────────────────────────────────────────────────────── */ .hero { margin: 0 0 2.5rem; } .eyebrow { display: inline-block; margin: 0 0 .8rem; padding: .2rem .6rem; background: var(--accent-soft); color: var(--accent); border-radius: var(--radius); font-size: var(--step--3); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .hero-body { color: var(--ink-2); font-size: 1.05em; } .hero-meta { margin: 1.1rem 0 0; font-size: var(--step--2); color: var(--muted); } /* ── Trust strip ─────────────────────────────────────────────────────────── */ .trust-strip { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 1.5rem 0 0; padding: 0; } .trust-item { flex: 1 1 10rem; padding: .75rem .9rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); } .trust-value { display: block; font-size: 1.15rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--accent); } .trust-label { display: block; margin-top: .15rem; font-size: var(--step--2); color: var(--muted); } @media (max-width: 560px) { .trust-item { flex: 1 1 100%; } } /* ── Affiliate disclosure ────────────────────────────────────────────────── */ .affiliate-disclosure { margin: 0 0 2rem; padding: .75rem 1rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); color: var(--muted); font-size: var(--step--1); } /* ── Comparison table ────────────────────────────────────────────────────── */ .offer-listing { margin: 0 0 .5rem; } .offer-intro { max-width: var(--measure); color: var(--ink-2); } .table-scroll { overflow-x: auto; /* Explicit: a non-visible overflow-x makes overflow-y compute to auto, which turns this into a vertical scroll container that eats the page's wheel events whenever the pointer happens to be over the table. */ overflow-y: hidden; background: var(--raised); border: 1px solid var(--rule); border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--shadow); } .offer-table { width: 100%; border-collapse: collapse; min-width: 660px; font-size: var(--step--1); } .offer-table thead th { padding: .75rem 1rem; background: var(--surface); text-align: left; font-size: var(--step--3); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--rule); white-space: nowrap; } .offer-table tbody td, .offer-table tbody th { padding: var(--sp-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule-2); } .offer-table tbody tr:last-child td, .offer-table tbody tr:last-child th { border-bottom: 0; } .offer-table tbody tr:hover { background: var(--accent-soft); } .brand-cell { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); min-width: 205px; font-weight: 400; border-inline-start: 3px solid transparent; } .brand-cell .brand-name { flex-basis: 100%; font-weight: 700; } .offer-table tr.top-pick > .brand-cell { border-inline-start-color: var(--accent); } .brand-mark { margin-right: 0; } .brand-note { margin-left: 0; flex-basis: 100%; } .brand-mark { display: inline-grid; place-items: center; width: 2.15rem; height: 2.15rem; margin-right: .65rem; vertical-align: middle; background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #000)); color: var(--accent-ink); border-radius: var(--radius); font-weight: 800; font-size: var(--step--2); } /* A supplied mark, in exactly the box .brand-mark occupies, so a row is the same height whether or not anyone has signed for a logo yet. object-fit is `contain` and the file is already padded to the box, which means the mark is never stretched — a squashed wordmark is an altered wordmark. No filter, no mix-blend-mode, no opacity: each is a recolour by another name, and recolouring is a contract breach, not a style choice. The dark variant comes from the operator via