/* =============================================================================
Display headline typography — Permanent Marker
-----------------------------------------------------------------------------
Swaps the editorial display serif (Playfair Display) for Google's
"Permanent Marker" marker face on HEADLINES & decorative display labels only.
Deliberately NOT touched (kept on --f-serif / Playfair for legibility):
• body copy, standfirsts, leads, pull-quotes, captions, addresses
• prices, totals, countdown digits, stats and any numeric "value" text
• form inputs and the provably-fair hash / seed fields
This file is loaded LAST on every public page (after site-vibe.css), so its
rules win on source order at equal specificity over the per-page sheets —
no per-file edits were needed.
Permanent Marker ships a single 400 weight with no italic. We therefore:
• force font-weight:400 / font-style:normal and disable synthesis, so the
browser never fakes a smeared bold or a slanted oblique;
• zero out the tight negative letter-spacing that suited the serif;
• give headlines a hair more line-height so the marker's tall ascenders
and long descenders don't clip on multi-line titles.
To revert: delete this file, remove the two tags that load it, and
drop "Permanent+Marker" from the Google Fonts s in the layouts.
============================================================================= */
:root {
--f-display: "Permanent Marker", "Comic Sans MS", "Bradley Hand", cursive;
}
/* ---- Global components (styles.css) ---- */
.display, .display em,
.brush,
.masthead .establish,
.hero h1, .hero h1 em,
.section-head h2, .section-head h2 em,
.step h3,
.instant-head h2, .instant-head h2 em,
.winners-head h2, .winners-head h2 em,
.trust h4,
.app h2, .app h2 em,
.faq-row .head-side h2, .faq-row .head-side h2 em,
.news h2, .news h2 em,
/* ---- About ---- */
.story .story-copy h2,
/* ---- Account ---- */
.ab-head h1,
.acc-card h3,
/* ---- App showcase ---- */
.showcase-title h1,
.screen-cell .caption .ttl,
.screens-section-head .ttl,
/* ---- Auth ---- */
.auth-card h1,
/* ---- Basket ---- */
.basket-head h1,
/* ---- Coming soon ---- */
.cs-live-card h3,
.cs-notify-copy h2,
/* ---- Competition (lot) ----
Competition NAMES are no longer marker — they're Lilita One now (client
request; see the "Competition names" block at the end of this file). What
stays on the marker here is the surrounding lot furniture, never the name:
the trust-strip headings, the destination story heading and the activity
feed heading. Instant-win names, prize items, membership tier names and
people's names were never marker and still aren't. */
.lot-trust .cell .ttl,
.destination .story h2,
.activity-head h2,
.postal .left-pane h2,
.postal .right-pane h3,
/* ---- Contact ---- */
.contact-grid .cf-head h2,
.cf-success h3,
/* ---- Content / legal / FAQ ---- */
.content-head h1,
.prose h2,
.faq-group h2,
/* ---- Membership ---- */
.member-hero h1,
.benefits-grid .benefit h3,
.join-cta h2,
/* ---- Postal entry ---- */
.include h3,
.rules-list .r-copy h4,
.proof .proof-copy h2,
/* ---- Responsible play ---- */
.tools .tool-label,
.check .check-intro h2,
.check .verdict h4,
/* ---- Generic site pages (terms, etc.) ---- */
.page-hero h1,
.feature-grid .feat h3,
.closer h2,
/* ---- Verify a win ---- */
.vt-head h2,
.vr-main h3,
.vr-plain h3,
/* ---- Winners ---- */
.broadcast .bc-copy h2 {
font-family: var(--f-display);
font-weight: 400;
font-style: normal;
font-synthesis: none;
letter-spacing: 0;
line-height: 1.05;
}
/* Decorative oversized watermarks: marker sets wider & taller than the serif,
so trim the size, kill the negative tracking, and keep them out of the way. */
.instant::before,
.member-hero::before,
.page-hero .watermark {
font-family: var(--f-display);
font-weight: 400;
font-style: normal;
font-synthesis: none;
letter-spacing: 0;
}
.instant::before { font-size: 15vw; }
.member-hero::before { font-size: 13.5vw; }
.page-hero .watermark { font-size: 13.5vw; }
/* =============================================================================
Competition & instant-win names — Lilita One
-----------------------------------------------------------------------------
Competition names and instant-win names render in Google's "Lilita One"
display face everywhere they appear (client request). This is the one source
of truth for that. It loads last, so with matching selectors it wins on
source order over the serif/DM-Sans headings on the cards, lot page, basket /
checkout line items and the smaller mentions (breadcrumb, gallery title,
draw log, account rows) — every name lands on the same font.
Lilita One is added to the Google Fonts in the layout. It has one 400
weight; font-synthesis:none stops the browser faking a heavier cut.
Scope is competition names ONLY. Prize titles, winners, wallet-transaction
descriptions and people's names are not competition names and stay as they
are — which is why the account list keys off a `.comp` hook on just the
competition rows rather than bolding every `.acc-row .title`. */
.comp:not(.win) .body h4, /* competition + instant-win listing cards */
.iw-game, /* instant-win scratch-reveal modal name */
.buy-panel h1, /* lot detail heading */
.sticky-buy .title, /* lot sticky buy bar */
.bi-body h3, /* basket & checkout line items */
.lot-meta-bar .crumbs .current, /* lot breadcrumb (current page) */
.lot-lightbox .lb-title, /* full-screen gallery title */
.log-table .lt-row .lot, /* provably-fair draw log */
.entry-group .eg-title, /* account: my entries (grouped by competition) */
.draw-row .dr-title { /* account: "draws you're in" */
font-family: "Lilita One", var(--f-sans), sans-serif;
font-weight: 400; /* Lilita One ships a single 400 weight */
font-synthesis: none;
letter-spacing: .01em;
line-height: 1.1; /* room for the tall, chunky letterforms */
}
/* Winner-wall cards show the PRIZE title, not a competition name — keep those
on bold DM Sans so they're unaffected by the Lilita name treatment above. */
.comp.win .body h4 {
font-family: var(--f-sans);
font-weight: 700;
font-synthesis: none;
}