/* ============================================================================
NC TYPE SYSTEM — 10 Aug 2026
----------------------------------------------------------------------------
Measured before writing this. The site had no type scale:
h1 27.2px / 700 <- only 2.4px larger than an h2
h2 24.8px / 800 <- BOLDER than the h1
h3 20px / 700
body 18px / 400
An H1 nine pixels above body text, with the H2 heavier than the H1, is why
nothing read as hierarchy and why the pages felt flat and unfinished however
the layout was arranged. No amount of spacing fixes an inverted scale.
Two families, each doing one job:
Newsreader display — headings only. Editorial, credible, and it reads as
journalism, which is the site's actual positioning: we check
licences and publish the correction when we get it wrong. It
also puts distance between us and every other affiliate site,
which are near-universally Inter-only.
Inter body, UI, tables, chips, buttons. Already loaded, excellent for
dense data and small sizes.
Scale is a 1.32 ratio off a 17px base, rounded to whole pixels and clamped so
it holds from 360px to 1920px without a media query per step.
========================================================================== */
:root {
--nc-font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
--nc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* fluid scale: min at 360px, max at 1280px */
--nc-step-h1: clamp(2.05rem, 1.30rem + 3.3vw, 2.95rem); /* 33 -> 47px */
--nc-step-h2: clamp(1.50rem, 1.18rem + 1.4vw, 1.95rem); /* 24 -> 31px */
--nc-step-h3: clamp(1.18rem, 1.05rem + 0.6vw, 1.38rem); /* 19 -> 22px */
--nc-step-h4: 1.05rem;
--nc-step-body: 1.0625rem; /* 17px */
--nc-step-small: 0.875rem; /* 14px */
--nc-ink: #1a2320;
--nc-ink-soft: #4e5f59;
--nc-ink-faint: #71827c;
--nc-rule: #e3e8e6;
}
/* --- Display headings ----------------------------------------------------- */
h1, h2, h3,
.page-header h1,
.entry-content h1,
.entry-content h2,
.entry-content h3 {
font-family: var(--nc-font-display);
color: var(--nc-ink);
text-wrap: balance;
}
h1, .page-header h1, .entry-content h1 {
font-size: var(--nc-step-h1);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.018em;
margin: 0 0 0.5rem;
}
h2, .entry-content h2 {
font-size: var(--nc-step-h2);
font-weight: 600; /* was 800 - heavier than the h1 it sat under */
line-height: 1.2;
letter-spacing: -0.012em;
}
h3, .entry-content h3 {
font-size: var(--nc-step-h3);
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.008em;
}
h4, .entry-content h4 {
font-family: var(--nc-font-body);
font-size: var(--nc-step-h4);
font-weight: 700;
letter-spacing: 0;
}
/* --- Body ----------------------------------------------------------------- */
body,
.entry-content p,
.entry-content li {
font-family: var(--nc-font-body);
font-size: var(--nc-step-body);
line-height: 1.65;
color: var(--nc-ink);
}
/* Everything structural stays on the sans face - a serif in a data table is
harder to scan, and these are scanned, not read. */
table, th, td,
.nc-chip-row, .nc-chip, .nc-btn, button, input, select,
.nc-rail, .nc-sticky-cta, .nc-facts, nav, .breadcrumbs, .nc-breadcrumbs,
.casino-hero__bonus, .nc-score {
font-family: var(--nc-font-body);
}
/* Figures line up in columns. */
td, th, .nc-score, .nc-facts dd {
font-variant-numeric: tabular-nums;
}
/* --- Page hero ------------------------------------------------------------
Page templates opened with a bare H1 and dropped straight into small text,
while the review template opens with a proper hero. That gap - not the
layout - was the main reason these pages read as documents rather than as a
product. The standfirst, meta line and chips are HOISTED from the content by
page-hero.js, so nothing is hand-maintained and nothing can drift. */
.nc-hero {
border-bottom: 1px solid var(--nc-rule);
padding-bottom: 1.4rem;
margin-bottom: 1.75rem;
}
.nc-hero > .nc-breadcrumbs {
font-family: var(--nc-font-body);
font-size: var(--nc-step-small);
color: var(--nc-ink-faint);
margin: 0 0 0.75rem;
}
.nc-hero > .nc-breadcrumbs a { color: var(--nc-ink-soft); }
.nc-hero__standfirst {
font-family: var(--nc-font-body);
font-size: 1.15rem;
line-height: 1.55;
color: var(--nc-ink-soft);
max-width: 58ch;
margin: 0.55rem 0 0;
}
.nc-hero__meta {
font-family: var(--nc-font-body);
font-size: var(--nc-step-small);
color: var(--nc-ink-faint);
margin: 1rem 0 0;
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1rem;
align-items: center;
}
.nc-hero__meta strong { color: var(--nc-ink-soft); font-weight: 600; }
.nc-hero__meta a { color: inherit; }
.nc-hero .nc-chip-row { margin: 0.9rem 0 0; }
/* --- Rhythm --------------------------------------------------------------- */
.entry-content > h2 { margin-top: 2.6rem; margin-bottom: 0.7rem; }
.entry-content > h3 { margin-top: 1.9rem; margin-bottom: 0.5rem; }
.entry-content > h2:first-child,
.entry-content > h3:first-child { margin-top: 0; }
.entry-content > p { margin: 0 0 1.05rem; }
/* Links in running text: underlined so they are visible without colour alone.
MUST skip anything button-shaped: this selector (0,2,2) outweighs
a.casino-card__cta (0,1,1), and on 11 Aug it painted the /bonuses/ money
CTAs' white text dark green on the green button fill — 1.27:1, unreadable
(caught by the external Manus audit). Class-substring guards cover every
button family (nc-btn, btn, casino-card__cta, td-cta) present and future. */
.entry-content > p a:not(.nc-btn):not([class*="btn"]):not([class*="cta"]),
.entry-content > li a:not(.nc-btn):not([class*="btn"]):not([class*="cta"]) {
color: #0b5d47;
text-underline-offset: 0.16em;
text-decoration-thickness: 1px;
}
/* --- Mobile: keep the display face but tighten the leading ---------------- */
@media (max-width: 767px) {
h1, .page-header h1 { line-height: 1.12; letter-spacing: -0.015em; }
.nc-hero { padding-bottom: 1.1rem; margin-bottom: 1.35rem; }
.nc-hero__standfirst { font-size: 1.06rem; }
}
/* --- Page wrapper ---------------------------------------------------------
page.php carried style="padding:2rem 0 4rem" inline, which overrode the
container's own `padding: 0 1.25rem` and left ZERO horizontal gutter - the
H1 sat flush against the viewport edge. Only became obvious once the display
size went up. Vertical rhythm belongs here, not in a style attribute. */
.nc-page-wrap {
padding-top: 2rem;
padding-bottom: 4rem;
}
/* --- Offer cards ----------------------------------------------------------
The markup is a paragraph with a button dropped mid-sentence and the legal
line trailing after it:
Top pick right now: ...copy...
Visit X 18+ | T&Cs apply
This lived in the desktop layer, which meant a phone still got a button
wedged into the middle of a sentence — the same fault, just unseen. It
belongs here, at every width.
NOT flex: the paragraph contains inline markup, and flex makes every
its own flex item — it split "...falling from 30x to 20x by the third."
across four lines. Normal block flow with a block-level button gives the
right reading order: sentence, button on its own line, legal beneath. */
.entry-content > p:has(> a.nc-btn--claim),
.entry-content > p:has(> a.nc-btn) {
max-width: none;
background: #fff;
border: 1px solid var(--nc-rule);
border-left: 3px solid #f59e0b;
border-radius: 12px;
padding: 1.05rem 1.15rem;
margin: 1.25rem 0;
line-height: 1.55;
}
.entry-content > p:has(> a.nc-btn--claim) > a.nc-btn--claim,
.entry-content > p:has(> a.nc-btn) > a.nc-btn {
display: block;
width: fit-content;
margin: 0.85rem 0 0.4rem;
padding: 0.72rem 1.5rem;
font-size: 0.95rem;
}
/* On a phone a fit-content button next to a full-width card looks stranded;
let it fill the card instead, which is also a better tap target. */
@media (max-width: 600px) {
.entry-content > p:has(> a.nc-btn--claim) > a.nc-btn--claim,
.entry-content > p:has(> a.nc-btn) > a.nc-btn {
width: 100%;
text-align: center;
min-height: 44px;
}
}