/* Theme: clean A modern comparison-site look — generous whitespace, a clear type scale, and one accent colour doing all the emphasis work. No web fonts and no JavaScript. That is a design decision as much as a performance one: a render-blocking font request is the largest thing between a reader and the page, and a third-party font host is a third party in the page source of every site in the network. */ :root { --ink: #14161a; --ink-2: #3d444d; --muted: #6b7280; --rule: #e5e7eb; --rule-2: #f0f2f5; --bg: #ffffff; --surface: #f9fafb; --accent: #1f5fa8; --accent-ink: #ffffff; --accent-soft: #eaf1fa; --warn-bg: #fff9e8; --warn-rule: #f0d27a; --warn-ink: #7a5c07; --star: #e8a020; --bar: #c07a12; --measure: 74ch; --page: 1360px; --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 2px rgb(16 24 40 / .06), 0 4px 16px -6px rgb(16 24 40 / .10); --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.45rem, 1.32rem + .65vw, 1.85rem); --step-3: clamp(1.9rem, 1.6rem + 1.5vw, 2.85rem); } @media (prefers-color-scheme: dark) { :root { --ink: #eef0f3; --ink-2: #c2c8d0; --muted: #949ba6; --bar: #e8a020; --rule: #2b2f36; --rule-2: #22262c; --bg: #0f1114; --surface: #16191d; --accent: #6ea8e8; --accent-ink: #0f1114; --accent-soft: #182533; --warn-bg: #241f10; --warn-rule: #5c4a1c; --warn-ink: #e0c274; --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -8px rgb(0 0 0 / .6); } } *, *::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, "Helvetica Neue", sans-serif; font-size: var(--step-0); line-height: 1.65; color: var(--ink); background: var(--bg); } h1, h2, h3 { line-height: 1.18; letter-spacing: -.018em; margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: var(--step-3); font-weight: 760; } h2 { font-size: var(--step-2); font-weight: 700; margin-top: 2.5rem; } h3 { font-size: var(--step-1); font-weight: 660; } p { margin: 0 0 1.1em; } a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: .07em; } a:hover { text-decoration-thickness: .14em; } .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 ────────────────────────────────────────────────────────── Styled to be noticed. A notice a reader skims past satisfies a checker and fails its purpose, so it gets colour, a border, and its own badge rather than being tucked into the footer. */ .age-18 { display: flex; gap: .85rem; align-items: flex-start; margin: 0 0 1.75rem; padding: .85rem 1.1rem; background: var(--warn-bg); border: 1px solid var(--warn-rule); border-radius: var(--radius-sm); 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.35rem; height: 1.65rem; padding-inline: .4rem; border-radius: 999px; background: var(--warn-ink); color: var(--warn-bg); font-weight: 800; font-size: var(--step--2); letter-spacing: .02em; } /* ── Hero ────────────────────────────────────────────────────────────── */ .hero { margin: 0 0 2.25rem; } .eyebrow { margin: 0 0 .6rem; font-size: var(--step--2); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); } .hero-body { color: var(--ink-2); font-size: 1.06em; } .hero-meta { margin: 1rem 0 0; font-size: var(--step--2); color: var(--muted); } /* ── Trust strip ───────────────────────────────────────────────────────── Where a hero image would go. Three facts a reader can check beat a photograph they cannot, and none of them delays the comparison below. */ .trust-strip { display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 1.5rem 0 0; padding: 0; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--surface); } .trust-item { flex: 1 1 10rem; padding: .8rem 1rem; border-right: 1px solid var(--rule); } .trust-item:last-child { border-right: 0; } .trust-value { display: block; font-size: 1.15rem; font-weight: 750; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--ink); } .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%; border-right: 0; border-bottom: 1px solid var(--rule); } .trust-item:last-child { border-bottom: 0; } } /* ── Affiliate disclosure ──────────────────────────────────────────────── Quiet but present, and always above the listings — a disclosure a reader meets after the decision it was meant to inform is not a disclosure. */ .affiliate-disclosure { margin: 0 0 2rem; padding: .7rem 1rem; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; 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; border: 1px solid var(--rule); border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--shadow); background: var(--bg); } .offer-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: var(--step--1); } .offer-table thead th { background: var(--surface); padding: .8rem 1rem; text-align: left; font-size: var(--step--3); font-weight: 700; letter-spacing: .07em; 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); border-bottom: 1px solid var(--rule-2); vertical-align: top; text-align: left; } .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); } /* The brand cell reads as a unit rather than a line of text: the mark, then the name beneath it, then whatever qualifies the row. Rank becomes a shape you can see at a glance instead of a position you have to count. */ .brand-cell { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); min-width: 200px; font-weight: 400; border-inline-start: 3px solid transparent; } .brand-cell .brand-name { flex-basis: 100%; font-weight: 650; } .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.1rem; height: 2.1rem; margin-right: .6rem; vertical-align: middle; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: var(--step--2); letter-spacing: .02em; } /* 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 , or the light one is shown as supplied. */ .brand-logo { display: inline-block; margin-right: .6rem; vertical-align: middle; } .brand-logo img { display: block; width: auto; height: 2.15rem; max-width: 8.25rem; object-fit: contain; object-position: left center; } .offer-cell { max-width: 22ch; } .num { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .rating-cell { white-space: nowrap; } /* The number is the rating; the bar is a glance. Two filled shapes of similar tone cannot be counted reliably — four stars and five were 1.79:1 apart, which is a rating nobody can read. So the value leads, and the visual is a proportional bar where length carries the meaning rather than a count of near-identical glyphs. The bar is decorative and hidden from assistive technology; the number is the accessible name. */ .rating { display: inline-flex; flex-direction: column; gap: .3rem; } .rating-num { font-size: 1.15rem; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); } .rating-num small { font-size: var(--step--3); font-weight: 600; color: var(--muted); } .rating-bar { position: relative; width: 5.5rem; height: .32rem; background: color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 999px; overflow: hidden; } .rating-bar i { display: block; height: 100%; background: var(--bar); border-radius: 999px; } .cta-cell { text-align: right; } .cta { display: inline-flex; align-items: center; padding: .7rem 1.1rem; min-height: 44px; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-sm); font-size: var(--step--1); font-weight: 650; text-decoration: none; white-space: nowrap; } .cta:hover { filter: brightness(1.08); } /* ── Top pick and per-row badge ────────────────────────────────────────── The first row is first because the published weights put it there, so it is marked rather than merely ordered — a ranking a reader cannot see is a ranking they cannot question. */ .offer-table tr.top-pick { background: var(--accent-soft); } .offer-table tr.top-pick .brand-name { font-weight: 750; } .badge { display: inline-block; margin-left: .55rem; padding: .1rem .5rem; background: var(--accent); color: var(--accent-ink); border-radius: 999px; font-size: var(--step--3); font-weight: 750; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; } .sig-terms-list { list-style: none; margin: .35rem 0 0; padding: 0; } .sig-terms-list li { margin-bottom: .3rem; } .sig-terms-list li:last-child { margin-bottom: 0; } /* ── Significant terms ─────────────────────────────────────────────────── Rendered inside the table, in a row directly under the offer they qualify. Quiet enough not to compete with the comparison, present enough to be read before a reader clicks — which is the whole requirement. */ .terms-row td { border-inline-start: 0; padding: .1rem 1rem .85rem !important; border-bottom: 1px solid var(--rule) !important; } .offer-table tbody tr.terms-row:hover { background: transparent; } .sig-terms { margin: 0; font-size: var(--step--2); line-height: 1.55; color: var(--ink-2); } .sig-terms-label { display: inline-block; margin-right: .4rem; font-size: var(--step--3); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); } .offer-conditions { margin: 0 0 2.25rem; padding: .85rem 1.1rem; background: var(--surface); border: 1px solid var(--rule); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); font-size: var(--step--2); color: var(--muted); } .offer-conditions p { margin: 0; } /* ── Methodology ───────────────────────────────────────────────────────── The weights are shown as bars because a published weighting is the reason two sites in one network may honestly rank the same operators differently. */ .methodology { margin: 3rem 0; } .weights { list-style: none; margin: 1.25rem 0 1rem; padding: 0; max-width: 34rem; } .weight { display: grid; grid-template-columns: 10rem 1fr 3rem; gap: .8rem; align-items: center; margin-bottom: .5rem; } .weight-name { font-size: var(--step--1); text-transform: capitalize; } .weight-bar { height: .5rem; background: var(--rule-2); border-radius: 999px; overflow: hidden; } .weight-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; } .weight-num { font-size: var(--step--2); font-variant-numeric: tabular-nums; color: var(--muted); text-align: right; } .methodology-note { font-size: var(--step--2); color: var(--muted); } /* ── Licence verification ───────────────────────────────────────────────── The one claim on the page a reader can check for themselves, so it is given a card rather than a line of small print. */ .licence-verification { margin: 3rem 0; } .licence-card { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.25rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); } .licence-badge { flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 800; } .licence-card p { margin: 0 0 .35rem; } .licence-card p:last-child { margin: 0; } .licence-number { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; } /* ── Responsible gambling ────────────────────────────────────────────────── */ .rg-help { margin: 4rem 0 0; padding: 1.75rem 0 0; border-top: 2px solid var(--rule); } .rg-help h2 { margin-top: 0; font-size: var(--step-1); } .rg-links { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem .75rem; } .rg-links li { margin: 0; } .rg-links a { display: inline-block; padding: .4rem .8rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); font-size: var(--step--1); text-decoration: none; } .rg-links a:hover { border-color: var(--accent); } /* ── Small screens ─────────────────────────────────────────────────────── The table becomes a stack of labelled rows. A horizontally scrolling price comparison on a phone is a comparison nobody makes. */ /* The card layout starts here rather than at 640px because that was wrong. Measured in a browser, this table's min-content width is about 806px against 40px of page gutter, so every viewport from 641px to roughly 848px put the table in table mode and clipped the CTA off the right edge — the one element the page exists to offer, hidden behind a scrollbar with no affordance. The margin above the measurement is deliberate: a longer real brand name than "Northgate Casino" pushes min-content up again. */ @media (max-width: 900px) { .offer-table { min-width: 0; } .offer-table thead { display: none; } .offer-table tbody tr { display: block; border-bottom: 1px solid var(--rule); padding: .35rem 0; } .offer-table tbody tr:last-child { border-bottom: 0; } .offer-table tbody td, .offer-table tbody th { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 1rem; border: 0; text-align: right; } /* The header row is gone here, so every value needs to carry its own name. The template has emitted data-label on each cell all along and no theme ever rendered it, which meant this layout showed a column of bare figures: "£20", "40x", "8/10", nothing saying which was the deposit and which the wagering. space-between was written for a label that was never there. */ .offer-table tbody td::before { content: attr(data-label); flex: 0 0 auto; text-align: left; font-size: var(--step--3); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); align-self: center; } .offer-table tbody td.cta-cell::before, .terms-row td::before { content: none; } /* 22ch is a sane column width in a table and a cage in a card: the label now takes the left edge, so the value has to be free to use everything left. */ .offer-cell { max-width: none; } /* The brand cell is the card's heading, not a labelled row, so it stays a left-aligned stack instead of being split to opposite edges. */ .offer-table tbody th.brand-cell { display: flex; flex-wrap: wrap; justify-content: flex-start; text-align: left; gap: var(--sp-1) var(--sp-2); padding-top: .8rem; padding-bottom: .1rem; } .brand-note { margin-left: 0; } .terms-row td { display: block; text-align: left; padding: .2rem 1rem .8rem !important; } .cta-cell { padding-top: .7rem !important; } .cta { width: 100%; text-align: center; } .payments-table { min-width: 0; } .payments-table thead { display: none; } .payments-table tbody tr { display: block; padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule); } .payments-table tbody th, .payments-table tbody td { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 1rem; border: 0; text-align: right; } .payments-table tbody th { text-align: left; padding-top: .7rem; } .payments-table tbody td::before { content: attr(data-label); flex: 0 0 auto; text-align: left; font-size: var(--step--3); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); align-self: center; } .weight { grid-template-columns: 8rem 1fr 2.6rem; } } /* ── Key takeaways ─────────────────────────────────────────────────────── Conclusions, above the comparison. A card rather than a rule, matching the theme's cards-on-white structure. */ .takeaways { margin: 0 0 var(--sp-7); } .takeaway-list { margin: 0; padding: var(--sp-5) var(--sp-5) var(--sp-5) calc(var(--sp-5) + 1.1rem); list-style: none; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); display: grid; gap: var(--sp-3); } .takeaway-list li { position: relative; padding-left: .35rem; max-width: var(--measure); color: var(--ink-2); } /* Decorative, and hidden: the list already conveys its structure to a screen reader, and reading out a tick per item is noise. */ .takeaway-list li::before { content: "✓"; position: absolute; left: -1.1rem; top: 0; color: var(--accent); font-weight: 700; } /* ── FAQ ───────────────────────────────────────────────────────────────── A definition list, not accordions. Answers hidden behind JavaScript on a site that ships none would be hidden permanently. */ .faq { margin: var(--sp-7) 0; } .faq-list { margin: 0; display: grid; gap: var(--sp-5); } .faq-list dt { font-weight: 650; color: var(--ink); max-width: var(--measure); margin-bottom: var(--sp-2); } .faq-list dd { margin: 0; padding-left: var(--sp-4); border-left: 2px solid var(--rule); color: var(--ink-2); max-width: var(--measure); } .faq-list dd p { margin: 0 0 .6em; } .faq-list dd p:last-child { margin-bottom: 0; } /* ── Payment methods ─────────────────────────────────────────────────── */ .payments { margin: var(--sp-7) 0; } .payments-intro { max-width: var(--measure); color: var(--ink-2); } .payments-table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: var(--step--1); } .payments-table thead th { background: var(--surface); padding: .8rem 1rem; text-align: left; font-size: var(--step--3); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--rule); white-space: nowrap; } .payments-table tbody th, .payments-table tbody td { padding: var(--sp-4); border-bottom: 1px solid var(--rule-2); text-align: left; vertical-align: top; } .payments-table tbody th { font-weight: 650; } .payments-table tbody tr:last-child th, .payments-table tbody tr:last-child td { border-bottom: 0; } @media print { .cta, .rg-links a { border: 1px solid #000; } .table-scroll { box-shadow: none; } } /* ── Licensee table ─────────────────────────────────────────────────────── Every cell comes from the regulator's register, so this table carries no rating, no badge and no top pick — there is nothing here anyone chose. It collapses to cards at the same width as the offer table and for the same reason: a licence number is long, and five columns of long strings clip the last one off the right edge before a reader notices there was a fifth. */ .licensees { margin: 0 0 var(--sp-7, 2.5rem); } .licensees-intro { max-width: var(--measure); color: var(--ink-2); } .licensee-table { width: 100%; border-collapse: collapse; min-width: 680px; font-size: var(--step--1); } .licensee-table thead th { text-align: left; font-size: var(--step--2); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); font-weight: 650; padding: .7rem .85rem; border-bottom: 1px solid var(--rule); } .licensee-table tbody td, .licensee-table tbody th { padding: .8rem .85rem; vertical-align: top; border-bottom: 1px solid var(--rule); } .licensee-table tbody tr:last-child td, .licensee-table tbody tr:last-child th { border-bottom: 0; } /* A licence reference is 19 characters of digits and hyphens. Left to wrap it breaks mid-number, and half a licence number reads like a different one. */ .licence-cell { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; } .licensee-was { display: block; margin-top: .25rem; font-size: var(--step--2); color: var(--ink-2); } @media (max-width: 980px) { .licensee-table { min-width: 0; } .licensee-table thead { display: none; } .licensee-table tbody tr { display: block; border-bottom: 1px solid var(--rule); padding: .35rem 0; } .licensee-table tbody tr:last-child { border-bottom: 0; } .licensee-table tbody td, .licensee-table tbody th { display: flex; gap: .75rem; align-items: baseline; border: 0; padding: .3rem .1rem; white-space: normal; } .licensee-table tbody td::before { content: attr(data-label); flex: 0 0 auto; min-width: 9.5rem; font-size: var(--step--2); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); } .licensee-table tbody th.brand-cell { font-size: var(--step-0); padding-bottom: .5rem; } .licence-cell { white-space: normal; word-break: break-all; } } /* ── Single-operator review ─────────────────────────────────────────────── Five blocks that only appear on a brand page. Laid out to match what the ranking reviews in the UK results actually do: a summary a reader can skim in five seconds, two columns of strengths and drawbacks, scores that show their own weighting, and a verdict that repeats the rating where a reader looks for it. */ .at-a-glance { margin: 0 0 var(--sp-7, 2.5rem); } .glance-grid { margin: 0; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .glance-row { display: flex; gap: 1rem; padding: .7rem .9rem; background: var(--bg); } .glance-row dt { flex: 0 0 13rem; color: var(--ink-2); font-size: var(--step--1); } .glance-row dd { margin: 0; font-weight: 600; } .pros-cons { margin: 0 0 var(--sp-7, 2.5rem); } .proscons-intro { max-width: var(--measure); color: var(--ink-2); } .proscons-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .pros, .cons { border: 1px solid var(--rule); padding: .9rem 1.1rem; } .pros h3, .cons h3 { margin: 0 0 .5rem; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; } .pros ul, .cons ul { margin: 0; padding-left: 1.1rem; } .pros li, .cons li { margin: 0 0 .4rem; } .pros li::marker { content: "✓ "; color: #12805c; } .cons li::marker { content: "✕ "; color: #a8321f; } .criteria { margin: 0 0 var(--sp-7, 2.5rem); } .criteria-intro, .criteria-note { max-width: var(--measure); color: var(--ink-2); } .criteria-note { font-size: var(--step--2); } .criteria-list { list-style: none; margin: 1rem 0; padding: 0; } .criteria-row { display: grid; align-items: center; gap: .75rem; padding: .4rem 0; grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr) auto auto; } .criteria-name { text-transform: capitalize; } .criteria-bar { display: block; height: .5rem; background: var(--rule-2, var(--rule)); } .criteria-bar i { display: block; height: 100%; background: var(--accent); } .criteria-score { font-weight: 650; } .criteria-weight { font-size: var(--step--2); color: var(--ink-2); white-space: nowrap; } .providers { margin: 0 0 var(--sp-7, 2.5rem); } .providers-intro { max-width: var(--measure); color: var(--ink-2); } .provider-list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .provider-list li { border: 1px solid var(--rule); padding: .3rem .7rem; font-size: var(--step--1); } .verdict { margin: 0 0 var(--sp-7, 2.5rem); border-top: 1px solid var(--rule); padding-top: 1.1rem; } .verdict-score { display: flex; align-items: baseline; gap: .75rem; margin: 0 0 .6rem; } .verdict-basis { font-size: var(--step--2); color: var(--ink-2); } .verdict-body { max-width: var(--measure); } @media (max-width: 640px) { .glance-row { display: block; } .glance-row dt { font-size: var(--step--2); } .proscons-grid { grid-template-columns: minmax(0, 1fr); } /* The bar is the first thing to go: it is decoration, and at this width it squeezes the score and its weight into two characters each. */ .criteria-row { grid-template-columns: minmax(0, 1fr) auto; } .criteria-bar { display: none; } .criteria-weight { grid-column: 1 / -1; } } /* ── The offer, first ───────────────────────────────────────────────────── The only block on the page designed to be clicked rather than read. It gets the accent as a filled surface, the largest type outside the h1, and the button at a size a thumb hits without aiming. The significant terms sit inside the box. Small, but not smaller than the theme's smallest step and not greyed below the contrast floor: terms a reader cannot read are terms that satisfy a checker and nobody else, and that is the exact complaint the ASA upholds. */ .offer-hero { margin: 0 0 var(--sp-7, 2.5rem); border: 2px solid var(--accent); background: var(--accent-soft); box-shadow: var(--shadow); } .offer-hero-body { padding: 1.4rem 1.5rem 1.25rem; } .offer-hero-brand { margin: 0 0 .25rem; font-size: var(--step--2); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--accent); } .offer-hero-headline { margin: 0 0 .4rem; font-size: var(--step-2); line-height: 1.12; font-weight: 780; } .offer-hero-pitch { margin: 0 0 1rem; color: var(--ink-2); max-width: 46ch; } .offer-hero-facts { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: .6rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); } .offer-hero-facts li { display: flex; flex-direction: column; gap: .1rem; } .offer-hero-facts span { font-size: var(--step--2); color: var(--ink-2); } .offer-hero-facts strong { font-size: var(--step-0); font-weight: 700; } .cta-large { display: inline-block; font-size: var(--step-0); font-weight: 700; padding: .8rem 1.6rem; min-height: 2.75rem; } .offer-hero-terms { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--rule); /* Not below the theme's smallest step, and not below --ink-2. */ font-size: var(--step--2); color: var(--ink-2); line-height: 1.5; } @media (max-width: 560px) { .offer-hero-body { padding: 1.1rem 1rem 1rem; } .offer-hero-headline { font-size: var(--step-1); } .cta-large { display: block; text-align: center; } } /* Site navigation — links every page of the site, rendered on every page. */ .site-nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; max-width: var(--measure); margin: 0 auto; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--rule); font-size: var(--step--1); } .site-nav a { color: var(--muted); text-decoration: none; } .site-nav a:hover { color: var(--ink); } .site-nav a[aria-current="page"] { color: var(--accent); font-weight: 600; } /* ── Masthead, footer, CTA (page furniture rendered on every page) ── */ /* Full-bleed header and footer bars with a bold accent rule; content sits in a centred, wide column. Header is three zones — brand left, page nav centred, operator actions right. Footer links spread across the full width, with the disclaimer beneath them. These are baked in for every site the generator makes. */ html, body { width: 100%; } body { max-width: none; margin: 0; padding: 0; overflow-x: clip; } img { max-width: 100%; height: auto; } .offer-hero-art, .offer-cta-art { max-width: none; height: 100%; } .page { max-width: var(--page); margin: 0 auto; padding: clamp(1.5rem, 3vw, 2.75rem) clamp(1rem, 3vw, 2rem) 4rem; } .masthead { background: var(--surface); border-bottom: 4px solid var(--accent); box-shadow: 0 1px 0 var(--rule); margin: 0 0 var(--sp-6); /* Pinned: the nav and the Register button ride the scroll on every screen. */ position: sticky; top: 0; z-index: 60; } /* The phone drawer. A
element, so it opens without JavaScript. */ .nav-drawer { display: none; position: relative; flex: 0 0 auto; } .nav-burger { list-style: none; cursor: pointer; display: block; padding: .5rem; } .nav-burger::-webkit-details-marker { display: none; } .nav-burger span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 1px; } .masthead .site-nav--drawer { position: absolute; top: calc(100% + .5rem); left: 0; z-index: 70; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius, 8px); box-shadow: var(--shadow); padding: var(--sp-4); min-width: 13rem; width: max-content; } .masthead .site-nav--drawer a { padding: .2rem 0; } .masthead-inner { display: flex; flex-wrap: nowrap; gap: var(--sp-4); align-items: center; max-width: var(--page); margin: 0 auto; padding: var(--sp-4) clamp(1rem, 3vw, 2rem); } .brand-home { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: var(--step-1); color: var(--ink); text-decoration: none; letter-spacing: -0.01em; } .brand-home:hover { color: var(--accent); } /* The brand mark, beside the name — the lockup, not a banner above the H1. */ .masthead-logo { display: block; flex: 0 0 auto; } .masthead-logo img { display: block; height: 42px; width: auto; } .brand-home-name { display: inline-block; white-space: nowrap; } .masthead .site-nav--bar { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4) var(--sp-5); border-bottom: 0; padding: 0; margin: 0; max-width: none; width: auto; } .masthead-auth { flex: 0 0 auto; display: flex; gap: var(--sp-3); align-items: center; margin-left: auto; } /* One row on every width. On a phone the page nav folds into the drawer: burger left, brand mark centred, the operator actions on the right. */ @media (max-width: 760px) { .nav-drawer { display: block; } .masthead .site-nav--bar { display: none; } .brand-home { margin: 0 auto; min-width: 0; } .masthead-inner { gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); } .masthead-auth { margin-left: 0; gap: var(--sp-2); } .masthead-auth .btn { padding: .45rem .65rem; font-size: var(--step--2); } .masthead-logo img { height: 30px; } .brand-home-name { font-size: var(--step-0); overflow: hidden; text-overflow: ellipsis; } } @media (max-width: 380px) { .masthead-auth .btn { padding: .4rem .5rem; font-size: var(--step--3); } .masthead-logo img { height: 26px; } } .btn { display: inline-block; padding: .55rem 1.1rem; border-radius: var(--radius-sm, 6px); font-weight: 700; font-size: var(--step--1); text-decoration: none; line-height: 1.1; white-space: nowrap; } .btn-login { color: var(--ink); border: 1px solid var(--rule); background: transparent; } .btn-login:hover { border-color: var(--accent); color: var(--accent); } .btn-register { color: var(--accent-ink); background: var(--accent); border: 1px solid var(--accent); } .btn-register:hover { filter: brightness(1.06); } .hero-cta { margin: var(--sp-5) 0 0; } .hero-cta .cta { display: inline-block; } .offer-cta { margin: var(--sp-7) 0; padding: var(--sp-6); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius, 8px); text-align: center; } .offer-cta h2 { margin: 0 0 var(--sp-2); } .offer-cta-headline { font-size: var(--step-2); font-weight: 800; color: var(--accent); margin: 0 0 var(--sp-2); } .offer-cta-pitch { max-width: var(--measure); margin: 0 auto var(--sp-4); color: var(--ink-2); } .offer-cta .cta-large { display: inline-block; } .offer-cta-terms { margin: var(--sp-4) auto 0; max-width: var(--measure); color: var(--muted); font-size: var(--step--1); } .site-footer { background: var(--surface); border-top: 4px solid var(--accent); margin: var(--sp-8) 0 0; } .footer-inner { max-width: var(--page); margin: 0 auto; padding: var(--sp-6) clamp(1rem, 3vw, 2rem); display: flex; flex-direction: column; gap: var(--sp-4); } .footer-nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); width: 100%; justify-content: space-between; font-size: var(--step--1); } .footer-nav a { color: var(--muted); text-decoration: none; } .footer-nav a:hover { color: var(--ink); } .footer-legal { font-size: var(--step--1); color: var(--ink); margin: var(--sp-3) 0 0; font-weight: 600; } .footer-copy { font-size: var(--step--2); color: var(--muted); margin: 0; max-width: var(--measure); } /* Author byline — the named reviewer behind the assessment (E-E-A-T). */ .author-card { margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5); border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0; max-width: var(--measure); } .author-byline { margin: 0; font-size: var(--step--1); color: var(--ink-2); } .author-name { font-weight: 700; color: var(--ink); } .author-bio { margin: var(--sp-2) 0 0; font-size: var(--step--1); color: var(--muted); } /* ── Operator promo art behind the offer surfaces ────────────────────────── The art is decoration supplied by the operator; the scrim is ours. It fades the theme's own surface over the text side so contrast never depends on what the artwork happens to contain. */ .offer-hero--art, .offer-cta--art { position: relative; overflow: hidden; } .offer-hero-art, .offer-cta-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% center; z-index: 0; } .offer-hero--art::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, var(--surface) 45%, transparent 72%); } .offer-hero--art .offer-hero-body { position: relative; z-index: 2; max-width: 36rem; } /* The subject side comes from the asset record; the text column takes the other. The left variant oversizes the element and shifts it out of frame instead of relying on object-position: art narrower than the box never crops horizontally, so position alone cannot move a centred subject clear of the copy. The file itself is untouched — this is a viewport, not an edit. */ .offer-hero--art-right .offer-hero-art, .offer-cta--art-right .offer-cta-art { object-position: 78% center; } .offer-hero--art-center .offer-hero-art, .offer-cta--art-center .offer-cta-art { object-position: center; } .offer-hero--art-left .offer-hero-art { inset: 0 auto 0 -28%; width: 132%; object-position: center 18%; } .offer-cta--art-left .offer-cta-art { object-position: 20% center; } /* No directional scrim on the left variant: the art carries its own dark side under the copy, and the body gets a translucent panel instead — readable on any art without veiling the subject. */ .offer-hero--art-left::before { background: none; } .offer-hero--art-left .offer-hero-body { background: color-mix(in srgb, var(--surface) 82%, transparent); border-radius: var(--radius, 8px); } .offer-hero--art-left .offer-hero-body { margin-left: auto; } /* A mascot is a placed cutout, not a covered scene: no scrim, and it sits inset on the focus side at contained size rather than bleeding to the edges. */ .offer-hero--mascot::before { display: none; } .offer-hero--mascot { display: flex; align-items: stretch; } .offer-hero--mascot .offer-hero-art { position: absolute; inset: auto 0 0 auto; z-index: 0; height: 94%; width: auto; max-width: 42%; object-fit: contain; object-position: bottom right; } .offer-hero--mascot.offer-hero--art-left .offer-hero-art { inset: auto auto 0 0; object-position: bottom left; } .offer-hero--mascot.offer-hero--art-left .offer-hero-body { margin-left: auto; } .offer-hero--mascot .offer-hero-body { position: relative; z-index: 2; max-width: 60%; } @media (max-width: 700px) { .offer-hero--mascot .offer-hero-art { display: none; } .offer-hero--mascot .offer-hero-body { max-width: none; } } .offer-hero--art-right::before { background: linear-gradient(to right, var(--surface) 45%, transparent 72%); } .offer-cta--art::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--surface); opacity: .72; } .offer-cta--art > :not(.offer-cta-art) { position: relative; z-index: 2; } @media (max-width: 700px) { .offer-hero--art::before { background: var(--surface); opacity: .84; } .offer-hero--art .offer-hero-body { max-width: none; } } /* operator-media — the operator's own imagery as evidence: licensed art and dated quotation screenshots. Added with the screenshot-review feature. */ .operator-media { margin: 0 0 var(--sp-7, 2.5rem); } .operator-media-heading { font-size: var(--step-2, 1.35rem); line-height: 1.2; margin: 0 0 .5rem; } .operator-media-intro { margin: 0 0 1.25rem; color: var(--ink-2); max-width: 62ch; } .operator-media-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 720px) { .operator-media-grid { grid-template-columns: repeat(2, 1fr); } } .operator-media-item { margin: 0; border: 1px solid var(--rule); border-radius: var(--radius, 8px); overflow: hidden; background: var(--surface); } .operator-media-item--banner, .operator-media-item--mascot { border-color: var(--accent); } .operator-media-art { display: block; width: 100%; height: auto; } .operator-media-ack { padding: .5rem .75rem; font-size: var(--step--2, .8rem); color: var(--ink-2); border-top: 1px solid var(--rule); }