/* Theme: auto-casi-room.uk Generated from style tokens for casiroom@GB (A warm, low-lit room: bone-paper light scheme and an ember-dark counterpart, both anchored by a deep claret accent and brass detailing — plush and hospitable, but plainly editorial rather than promotional.). Structure inherited from the editorial skeleton; the token block at the end of this file replaces its palette. */ /* Theme: editorial A print-comparison look: warm paper, serif headlines, hairline rules, no rounded corners. Chosen to be structurally different from `clean`, not a recolour of it — two sites in one network that differ only in hue share a CSS fingerprint, and a fingerprint is the cheapest thing to cluster on. Local serif stacks only. Georgia and Iowan ship on the platforms that matter and cost nothing to load. */ :root { --ink: #1e1b17; --ink-2: #4a443c; /* --muted carries dates and editorial notes, so it clears AA on */ /* both the page and the panel rather than only the lighter one. */ --muted: #6e6459; --rule: #ddd5c8; --rule-2: #ebe5da; --bg: #faf7f1; --surface: #f3eee4; --accent: #9c4221; --accent-ink: #faf7f1; --accent-soft: #f0e3da; --warn-bg: #f6ecd8; --warn-rule: #cbb387; --warn-ink: #6b5522; --star: #a86a1f; --bar: #8a5a19; --serif: Iowan Old Style, Palatino, "Palatino Linotype", Georgia, "Times New Roman", serif; --sans: "Helvetica Neue", Helvetica, system-ui, -apple-system, sans-serif; --measure: 74ch; --page: 1000px; --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.22rem, 1.14rem + .38vw, 1.45rem); --step-2: clamp(1.5rem, 1.34rem + .8vw, 2rem); --step-3: clamp(2rem, 1.55rem + 2.2vw, 3.3rem); } @media (prefers-color-scheme: dark) { :root { --ink: #ece5db; --ink-2: #c8bfb2; --muted: #948a7c; --rule: #3a342c; --rule-2: #2c2721; --bg: #16130f; --surface: #1f1b16; --accent: #d98452; --accent-ink: #16130f; --accent-soft: #2a211a; --warn-bg: #241d0f; --warn-rule: #55461f; --warn-ink: #d7bd82; --star: #cf9445; --bar: #cf9445; --star-empty: None; } } *, *::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.5rem, 4vw, 3rem) 1.25rem 4rem; font-family: var(--serif); font-size: var(--step-0); line-height: 1.7; color: var(--ink); background: var(--bg); } h1, h2, h3 { font-family: var(--serif); line-height: 1.14; margin: 0 0 .45em; text-wrap: balance; } h1 { font-size: var(--step-3); font-weight: 700; letter-spacing: -.015em; } h2 { font-size: var(--step-2); font-weight: 700; margin-top: 2.75rem; } h3 { font-size: var(--step-1); font-weight: 650; } p { margin: 0 0 1.15em; } a { color: var(--accent); text-underline-offset: .16em; } .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: .9rem; align-items: baseline; margin: 0 0 2rem; padding: .7rem 0; border-top: 2px solid var(--warn-rule); border-bottom: 1px solid var(--warn-rule); color: var(--warn-ink); font-family: var(--sans); font-size: var(--step--1); } .age-18 p { margin: 0; } .age-mark { flex: none; padding: .15rem .5rem; border: 1.5px solid var(--warn-ink); font-weight: 700; font-size: var(--step--3); letter-spacing: .06em; } /* ── Hero ──────────────────────────────────────────────────────────────── The eyebrow is a letterspaced sans line above a serif headline — the masthead convention, and the strongest signal that this is not the same template as its siblings. */ .hero { margin: 0 0 2.5rem; padding-bottom: 1.75rem; border-bottom: 3px double var(--rule); } .eyebrow { margin: 0 0 .9rem; font-family: var(--sans); font-size: var(--step--3); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .hero-body { font-size: 1.08em; color: var(--ink-2); } .hero-body > p:first-child::first-letter { float: left; font-size: 3.1em; line-height: .82; padding: .06em .1em 0 0; font-weight: 700; color: var(--accent); } .hero-meta { margin: 1.25rem 0 0; font-family: var(--sans); font-size: var(--step--2); letter-spacing: .04em; color: var(--muted); } /* ── Trust strip ─────────────────────────────────────────────────────────── */ .trust-strip { display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 1.5rem 0 0; padding: .9rem 0 0; border-top: 1px solid var(--rule); } .trust-item { flex: 1 1 10rem; padding-right: 1.5rem; } .trust-value { display: block; font-size: 1.3rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums lining-nums; color: var(--ink); } .trust-label { display: block; margin-top: .2rem; font-family: var(--sans); font-size: var(--step--3); letter-spacing: .04em; color: var(--muted); } @media (max-width: 560px) { .trust-item { flex: 1 1 100%; padding: .35rem 0; } } /* ── Affiliate disclosure ────────────────────────────────────────────────── */ .affiliate-disclosure { margin: 0 0 2rem; padding: 0 0 0 1rem; border-left: 2px solid var(--rule); font-family: var(--sans); font-size: var(--step--2); font-style: italic; color: var(--muted); } /* ── Comparison table ──────────────────────────────────────────────────── Hairline rules and no fill — a printed comparison rather than a card. */ .offer-listing { margin: 0 0 .5rem; } .offer-intro { max-width: var(--measure); } .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-top: 2px solid var(--ink); } .offer-table { width: 100%; border-collapse: collapse; min-width: 640px; } .offer-table thead th { padding: .7rem .85rem; font-family: var(--sans); font-size: var(--step--3); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: left; border-bottom: 1px solid var(--rule); white-space: nowrap; } .offer-table tbody td, .offer-table tbody th { padding: var(--sp-4) .85rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule-2); } .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: 200px; font-weight: 400; border-inline-start: 2px solid transparent; } .brand-cell .brand-name { flex-basis: 100%; font-weight: 650; font-size: 1.05em; } .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.2rem; height: 2.2rem; margin-right: .65rem; vertical-align: middle; border: 1.5px solid var(--accent); border-radius: 50%; color: var(--accent); font-family: var(--sans); font-weight: 700; font-size: var(--step--3); letter-spacing: .04em; } /* 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