/* ======================================================================
site.css — SHARED across every niche. Identical file for all divisions.
All niche variation comes from tokens.css. If a niche needs a rule that
isn't here, that's a reviewed change to this file for ALL niches — never a
per-niche override.
Token contract consumed (defined in tokens.css):
surfaces --color-bg --color-surface --color-surface-2 --color-ink-panel
ink --color-fg --color-muted --color-faint --color-border
--color-border-ink
brand --color-accent --color-accent-deep --color-accent-fg
--color-accent-soft
highlight --color-highlight --color-highlight-deep --color-highlight-soft
type --font-display --font-body --font-mono
shape --space --radius --radius-sm --measure
depth --shadow-card --shadow-float
Design system: warm editorial sales page. JS-free — every section reads and
converts with scripts disabled. Motion is scroll-driven CSS only
(animation-timeline), so unsupported browsers and reduced-motion show all
content immediately.
====================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
:root {
/* Fluid type scale (shared; niches shift it via font choice, not numbers) */
--step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.92rem);
--step-0: clamp(1.02rem, 0.97rem + 0.24vw, 1.15rem);
--step-1: clamp(1.22rem, 1.12rem + 0.5vw, 1.5rem);
--step-2: clamp(1.5rem, 1.32rem + 0.9vw, 2.1rem);
--step-3: clamp(1.95rem, 1.6rem + 1.7vw, 3rem);
--step-4: clamp(2.5rem, 1.9rem + 3vw, 4.25rem);
--pad: clamp(20px, 5vw, 40px);
}
body {
margin: 0;
background: var(--color-bg);
color: var(--color-fg);
font-family: var(--font-body);
font-size: var(--step-0);
line-height: 1.62;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
/* Subtle paper grain + a warm top glow — ambient, cheap, not a "gradient hero" */
body::before {
content: "";
position: fixed; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--color-highlight-soft) 55%, transparent), transparent 60%),
radial-gradient(90% 50% at 100% 0%, color-mix(in srgb, var(--color-accent-soft) 45%, transparent), transparent 55%);
}
/* ── Type ─────────────────────────────────────────────────────────────── */
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.06;
letter-spacing: -0.02em;
text-wrap: balance;
margin: 0 0 calc(var(--space) * 2.5);
color: var(--color-fg);
}
h1 { font-size: var(--step-4); font-weight: 600; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.01em; margin-bottom: var(--space); }
p { margin: 0 0 calc(var(--space) * 2.5); color: var(--color-muted); max-width: var(--measure); }
.lead { font-size: var(--step-1); line-height: 1.5; color: var(--color-fg); font-weight: 400; }
strong { color: var(--color-fg); font-weight: 700; }
img { max-width: 100%; display: block; }
a { color: var(--color-accent); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--color-highlight); color: var(--color-fg); }
/* ── Layout scaffold ──────────────────────────────────────────────────── */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--pad); }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--pad); }
.center { text-align: center; }
section { padding: clamp(56px, 9vw, 104px) 0; position: relative; }
.alt { background: var(--color-surface); }
.alt2 { background: var(--color-surface-2); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; background: var(--color-fg); color: var(--color-bg); padding: 10px 14px; border-radius: var(--radius-sm); z-index: 100; }
/* ── Eyebrow / section kicker ─────────────────────────────────────────── */
.eyebrow {
display: inline-flex; align-items: center; gap: 0.55em;
font-family: var(--font-mono);
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--color-accent-deep);
margin: 0 0 calc(var(--space) * 2.5);
}
.eyebrow::before {
content: ""; width: 22px; height: 2px; background: var(--color-highlight);
display: inline-block; border-radius: 2px;
}
.center .eyebrow { justify-content: center; }
/* ── Header ───────────────────────────────────────────────────────────── */
.site-head {
max-width: 1120px; margin: 0 auto;
padding: calc(var(--space) * 3) var(--pad);
display: flex; align-items: center; gap: calc(var(--space) * 2.5); flex-wrap: wrap;
}
.brand {
font-family: var(--font-display); font-weight: 700; font-size: 1.28rem;
letter-spacing: -0.02em; text-decoration: none; color: var(--color-fg);
display: inline-flex; align-items: center; gap: 0.5em;
}
/* The mark used to be drawn here in CSS - an accent square with an inset ring -
because there was no logo file. There is one now, so it is an ![]()
in the
.brand link instead. Two marks is the failure this replacement avoids. */
.brand-mark {
width: 1.35em; height: 1.35em; flex: none; display: block; border-radius: 6px;
}
.site-foot .brand-mark { width: 1.2em; height: 1.2em; }
.tagline {
color: var(--color-muted); font-size: 0.9rem; padding-left: calc(var(--space) * 2.5);
border-left: 1px solid var(--color-border);
}
/* The one nav link in the chrome, on every page: the route into the free
reading. It replaced a .btn CTA, which competed with the page's own buy
button and made the header a second sales pitch. */
.head-nav { margin-left: auto; font-size: 0.92rem; }
.head-nav a {
color: var(--color-muted); text-decoration: none;
border-bottom: 1px solid var(--color-border); padding-bottom: 0.15em;
}
.head-nav a:hover { color: var(--color-accent-deep); border-bottom-color: currentColor; }
/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
--btn-fg: var(--color-accent-fg);
display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
background: var(--color-accent);
background-image: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 88%, #fff), var(--color-accent-deep));
color: var(--btn-fg);
font-family: var(--font-body); font-weight: 700; font-size: 1.16rem;
line-height: 1.1; text-decoration: none; text-align: center;
padding: 1em 1.9em;
border: 0; border-radius: 999px; cursor: pointer;
box-shadow: 0 1px 0 color-mix(in srgb, #fff 25%, transparent) inset,
0 10px 22px -10px color-mix(in srgb, var(--color-accent) 75%, transparent);
transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn:hover { transform: translateY(-2px); filter: saturate(1.05); box-shadow: 0 1px 0 color-mix(in srgb,#fff 30%,transparent) inset, 0 18px 34px -12px color-mix(in srgb, var(--color-accent) 80%, transparent); }
.btn:active { transform: translateY(0); }
.btn-ghost {
background: transparent; color: var(--color-accent-deep);
box-shadow: inset 0 0 0 1.5px var(--color-border);
background-image: none; font-weight: 600;
}
.btn-ghost:hover { background: var(--color-accent-soft); box-shadow: inset 0 0 0 1.5px var(--color-accent); transform: translateY(-1px); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--space) * 2); margin-top: calc(var(--space) * 3.5); }
.cta-row.center { justify-content: center; }
/* Reassurance chips under a CTA */
.trust-line { display: flex; flex-wrap: wrap; gap: calc(var(--space) * 1) calc(var(--space) * 2.25); margin-top: calc(var(--space) * 3); font-size: 0.9rem; color: var(--color-muted); }
.trust-line span { display: inline-flex; align-items: center; gap: 0.45em; }
.trust-line span::before { content: "✓"; color: var(--color-accent); font-weight: 800; }
.center .trust-line { justify-content: center; }
/* Price anchored beside the CTA — the low price is itself the pitch */
.price-flag { display: inline-flex; flex-direction: column; line-height: 1.02; }
.price-flag b {
font-family: var(--font-mono); font-weight: 700; font-size: 2.1rem;
color: var(--color-highlight-deep); letter-spacing: -0.01em;
}
.price-flag span { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 400; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-muted); margin-top: 3px; }
.cta-row.center .price-flag { align-items: center; }
/* ── HERO ─────────────────────────────────────────────────────────────── */
.hero {
max-width: 1120px; margin: 0 auto;
padding: clamp(28px, 5vw, 64px) var(--pad) clamp(40px, 6vw, 80px);
display: grid; grid-template-columns: 1.02fr 0.98fr;
gap: clamp(28px, 5vw, 72px); align-items: stretch;
}
.hero-copy { max-width: 34rem; }
.hero h1 { margin-bottom: calc(var(--space) * 2.5); }
.hero h1 em { font-style: normal; color: var(--color-accent); position: relative; white-space: nowrap; }
.hero .lead { margin-bottom: 0; }
/* Right column is a stack: image fills the space above, receipt pinned beneath.
Together they match the copy column height exactly — image top-aligned with
the headline, receipt aligned to the copy's baseline, nothing stranded. */
.hero-visual { position: relative; display: flex; flex-direction: column; gap: calc(var(--space) * 2); }
.cover {
position: relative; margin: 0; width: 100%;
flex: 1 1 auto; min-height: 340px; height: 100%;
border-radius: var(--radius);
overflow: hidden; background: var(--color-surface);
box-shadow: var(--shadow-float), inset 0 0 0 1px color-mix(in srgb, #fff 40%, transparent);
}
.cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
/* aligned meta band across the foot of the cover */
.cover-band {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
display: flex; align-items: center; justify-content: space-between; gap: var(--space);
padding: calc(var(--space) * 1.5) calc(var(--space) * 2.25);
font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--color-accent-fg);
background: linear-gradient(to top, rgba(14,26,18,.82), rgba(14,26,18,0));
}
.cover-band .cb-tag { color: var(--color-highlight); font-weight: 700; }
/* Typographic cover fallback (used when a product has no image yet) */
.cover-type {
display: flex; flex-direction: column; justify-content: space-between;
padding: calc(var(--space) * 4); background: var(--color-ink-panel); color: var(--color-accent-fg);
}
.cover-type .ct-kicker { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-highlight); }
.cover-type .ct-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.cover-type .ct-meta { font-family: var(--font-mono); font-size: 0.7rem; color: color-mix(in srgb, var(--color-accent-fg) 70%, transparent); letter-spacing: 0.08em; }
/* ── The VALUE RECEIPT — signature element ────────────────────────────── */
/* Reframes "budget" as competence: honest value math, set like a till slip.
No invented savings figures; only true, checkable facts about the offer. */
.receipt {
--edge: 12px;
position: relative; margin: 0;
width: 100%; background: #fffef9;
padding: calc(var(--space) * 2) calc(var(--space) * 2.75) calc(var(--space) * 2.25);
font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-fg);
box-shadow: var(--shadow-card);
/* torn bottom edge via zig-zag mask */
-webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--edge)) no-repeat,
conic-gradient(from -45deg at bottom, #0000 90deg, #000 0) bottom / 22px var(--edge);
mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--edge)) no-repeat,
conic-gradient(from -45deg at bottom, #0000 90deg, #000 0) bottom / 22px var(--edge);
}
.center .receipt { margin-left: auto; margin-right: auto; }
.receipt .r-head {
text-align: center; text-transform: uppercase; letter-spacing: 0.14em;
font-size: 0.64rem; color: var(--color-faint);
padding-bottom: var(--space); margin-bottom: var(--space);
border-bottom: 1px dashed var(--color-border);
}
.receipt dl { display: grid; grid-template-columns: 1fr auto; gap: calc(var(--space) * 0.9) var(--space); margin: 0; }
.receipt dt { color: var(--color-muted); text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.05em; align-self: center; }
.receipt dd { margin: 0; text-align: right; font-weight: 700; }
.receipt dd.pos { color: var(--color-accent-deep); }
.receipt .r-total {
grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline;
margin-top: var(--space); padding-top: var(--space);
border-top: 1px dashed var(--color-border);
text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.68rem; color: var(--color-muted);
}
.receipt .r-total b { font-size: 1.25rem; color: var(--color-highlight-deep); letter-spacing: 0; }
.receipt .r-foot { margin-top: calc(var(--space) * 1.25); text-align: center; font-size: 0.6rem; letter-spacing: 0.08em; color: var(--color-faint); text-transform: uppercase; }
/* ── PROBLEM ──────────────────────────────────────────────────────────── */
.problem .wrap-narrow { text-align: center; }
.problem .lead { margin-left: auto; margin-right: auto; }
.problem-list { list-style: none; margin: calc(var(--space) * 4) auto 0; padding: 0; max-width: 640px; display: grid; gap: calc(var(--space) * 1.5); text-align: left; }
.problem-list li {
display: flex; gap: calc(var(--space) * 1.75); align-items: flex-start;
padding: calc(var(--space) * 2) calc(var(--space) * 2.5);
background: var(--color-bg); border-radius: var(--radius-sm);
box-shadow: var(--shadow-card); color: var(--color-fg); font-size: 0.98rem;
}
.alt .problem-list li { background: var(--color-bg); }
.problem-list li::before { content: "✕"; color: var(--color-highlight-deep); font-family: var(--font-mono); font-weight: 700; flex: none; margin-top: 1px; }
/* ── Section head helper ──────────────────────────────────────────────── */
.sec-head { max-width: 720px; margin-bottom: calc(var(--space) * 5); }
.sec-head.center { margin-left: auto; margin-right: auto; }
.sec-head p { color: var(--color-muted); }
/* ── CARDS (what's inside / outcomes) ─────────────────────────────────── */
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--space) * 2.5); }
.cards-grid.duo { grid-template-columns: repeat(2, 1fr); }
.card {
position: relative; background: var(--color-bg);
border-radius: var(--radius); padding: calc(var(--space) * 3.5) calc(var(--space) * 3);
box-shadow: var(--shadow-card);
transition: transform .18s ease, box-shadow .18s ease;
overflow: hidden;
}
.alt .card { background: var(--color-bg); }
.card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-accent); opacity: 0; transition: opacity .18s ease; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }
.card:hover::after { opacity: 1; }
.card .kicker { font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-deep); display: block; margin-bottom: calc(var(--space) * 1.5); }
.card h3 { margin: 0 0 calc(var(--space)); font-size: 1.16rem; }
.card p { margin: 0; font-size: 0.94rem; color: var(--color-muted); }
/* outcome cards get a check glyph instead of a mono kicker */
.card.win { padding-left: calc(var(--space) * 6.5); }
.card.win::before {
content: "✓"; position: absolute; left: calc(var(--space) * 3); top: calc(var(--space) * 3.5);
width: 1.7em; height: 1.7em; display: grid; place-items: center;
background: var(--color-accent-soft); color: var(--color-accent-deep);
border-radius: 8px; font-weight: 800; font-size: 0.95rem;
}
/* Full-contents accordion */
.toc-details { margin-top: calc(var(--space) * 4); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); overflow: hidden; }
.toc-details > summary { padding: calc(var(--space) * 2.25) calc(var(--space) * 3); font-family: var(--font-body); }
.toc { counter-reset: toc; color: var(--color-muted); margin: 0; padding: 0 calc(var(--space) * 3) calc(var(--space) * 3); list-style: none; display: grid; gap: calc(var(--space)); }
.toc li { counter-increment: toc; display: flex; gap: calc(var(--space) * 1.5); align-items: baseline; padding: calc(var(--space)) 0; border-top: 1px solid var(--color-border); }
.toc li::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-highlight-deep); font-weight: 700; flex: none; }
/* ── FREE CHAPTERS (read before you buy) ──────────────────────────────── */
.chapters { display: grid; gap: calc(var(--space) * 2); margin-top: calc(var(--space) * 5); }
.chapter {
border: 0; border-radius: var(--radius); margin: 0; overflow: hidden;
background: var(--color-bg); box-shadow: var(--shadow-card);
}
.chapter > summary {
cursor: pointer; list-style: none; display: flex; align-items: center; gap: calc(var(--space) * 2);
padding: calc(var(--space) * 2.5) calc(var(--space) * 3);
font-weight: 600;
}
.chapter > summary::-webkit-details-marker { display: none; }
.chapter .ch-num { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 700; color: var(--color-highlight-deep); flex: none; }
.chapter .ch-title { font-family: var(--font-display); font-size: 1.24rem; font-weight: 600; color: var(--color-fg); line-height: 1.15; flex: 1; margin: 0; }
.chapter .ch-toggle {
flex: none; width: 1.6em; height: 1.6em; border-radius: 50%;
display: grid; place-items: center; background: var(--color-accent-soft);
color: var(--color-accent-deep); font-size: 1.3rem; line-height: 1;
transition: transform .2s ease;
}
.chapter[open] .ch-toggle { transform: rotate(45deg); }
.chapter[open] > summary { border-bottom: 1px solid var(--color-border); }
.chapter .prose { padding: calc(var(--space) * 3); }
.chapter .free-tag {
display: inline-block; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-fg);
background: var(--color-accent); padding: 0.3em 0.6em; border-radius: 999px; margin-left: auto; flex: none;
}
/* Chapters render open by default (see extract-chapters.js), so the Free tag
is no longer gated on the closed state - it would never appear. */
.chapters-more { margin: calc(var(--space) * 4) auto 0; text-align: center; color: var(--color-muted); font-size: 0.96rem; max-width: 60ch; }
.free-read .cta-row { margin-top: calc(var(--space) * 4); }
/* ── PROSE (free chapters now; SEO article pages later) ───────────────── */
.prose { color: var(--color-muted); }
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }
.prose p { margin: 0 0 1.1em; max-width: none; }
.prose h3 { font-family: var(--font-display); font-size: 1.1rem; color: var(--color-fg); margin: 1.5em 0 0.6em; letter-spacing: -0.01em; }
.prose ol, .prose ul { margin: 0 0 1.2em; padding-left: 1.35em; }
.prose li { margin-bottom: 0.5em; }
.prose li strong { color: var(--color-fg); }
.prose img { border-radius: var(--radius-sm); margin: 1.3em 0; box-shadow: var(--shadow-card); }
/* Labelled blocks and checklists in free chapters (extract-chapters.js v4). A guide format's
"> **The rule:**" block is the loudest; the others are quieter. */
.prose blockquote { margin: 0 0 1.2em; padding: 0.2em 0 0.2em 1.1em; border-left: 3px solid var(--color-border); }
.prose .callout { margin: 0 0 1.2em; padding: 1em 1.2em; border-radius: var(--radius-sm); background: var(--color-surface-2); }
.prose .callout > :last-child { margin-bottom: 0; }
.prose .callout-label { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-deep); margin: 0 0 0.45em; }
.prose .callout-the-rule { background: var(--color-accent-soft); border-left: 4px solid var(--color-accent); }
.prose .callout-the-rule p:not(.callout-label) { color: var(--color-fg); font-size: 1.08rem; font-weight: 600; }
.prose .callout-watch-for { background: transparent; border: 1px solid var(--color-border); }
.prose .checklist { list-style: none; padding-left: 0; }
.prose .checklist li { display: flex; gap: 0.7em; align-items: flex-start; }
.prose .checklist .box { flex: none; width: 1em; height: 1em; margin-top: 0.22em; border: 2px solid var(--color-accent); border-radius: 3px; }
.prose .p-intro { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-faint); margin-bottom: 0.9em; }
.table-wrap { overflow-x: auto; margin: 1.2em 0; -webkit-overflow-scrolling: touch; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.86rem; min-width: 460px; }
.prose thead th { text-align: left; font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-accent-deep); padding: 0 0.9em 0.6em; border-bottom: 2px solid var(--color-border); }
.prose tbody td { padding: 0.7em 0.9em; border-bottom: 1px solid var(--color-border); vertical-align: top; color: var(--color-muted); }
.prose tbody td:first-child { color: var(--color-fg); font-weight: 600; }
.prose tbody tr:last-child td { border-bottom: 0; }
/* ── OFFER (dark evergreen panel — the conversion moment) ─────────────── */
.offer { background: var(--color-ink-panel); }
.offer .wrap-narrow { text-align: center; }
.offer .eyebrow { color: var(--color-highlight); }
.offer h2, .offer .lead { color: var(--color-accent-fg); }
.offer .lead { color: color-mix(in srgb, var(--color-accent-fg) 82%, transparent); margin-left: auto; margin-right: auto; }
.offer .btn { font-size: 1.15rem; padding: 1.05em 2em; margin-top: calc(var(--space) * 3); }
.offer-price {
font-family: var(--font-mono); font-weight: 700; font-size: clamp(2.4rem, 6vw, 3.4rem);
color: var(--color-highlight); margin: calc(var(--space) * 3) 0 0; line-height: 1;
}
.offer-price .was { font-size: 0.9rem; color: color-mix(in srgb, var(--color-accent-fg) 55%, transparent); text-decoration: line-through; margin-right: 0.5em; vertical-align: middle; }
.offer-price .cents { font-size: 0.5em; vertical-align: super; }
.offer-reassure { margin-top: calc(var(--space) * 2.5); font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.05em; color: color-mix(in srgb, var(--color-accent-fg) 65%, transparent); text-transform: uppercase; }
.offer .receipt { background: #fffef9; }
/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq .wrap-narrow > h2 { text-align: center; margin-bottom: calc(var(--space) * 5); }
.faq details { border: 0; border-top: 1px solid var(--color-border); border-radius: 0; margin: 0; background: transparent; }
.faq details:last-of-type { border-bottom: 1px solid var(--color-border); }
.faq summary {
cursor: pointer; list-style: none; padding: calc(var(--space) * 2.75) 0;
font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: var(--color-fg);
display: flex; justify-content: space-between; align-items: center; gap: var(--space);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "+"; font-family: var(--font-body); color: var(--color-accent);
font-weight: 400; font-size: 1.6rem; line-height: 1; flex: none;
transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details .body { padding: 0 0 calc(var(--space) * 3); color: var(--color-muted); max-width: 60ch; }
/* generic accordion (kept for reuse) */
details { border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-bottom: calc(var(--space) * 1.5); background: var(--color-bg); }
summary { cursor: pointer; padding: calc(var(--space) * 2) calc(var(--space) * 2.5); font-weight: 600; }
/* ── FINAL CTA ────────────────────────────────────────────────────────── */
.final-cta { text-align: center; }
.final-cta .lead { margin-left: auto; margin-right: auto; }
/* ── CATALOG (index) ──────────────────────────────────────────────────── */
.catalog { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: clamp(20px, 3vw, 32px); }
.cat-item {
display: flex; flex-direction: column; overflow: hidden;
background: var(--color-bg); border-radius: var(--radius);
box-shadow: var(--shadow-card);
transition: transform .18s ease, box-shadow .18s ease;
}
.cat-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-float); }
.cat-thumb { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-surface); position: relative; }
.cat-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.cat-item:hover .cat-thumb img { transform: scale(1.04); }
.cat-thumb .cover-type { height: 100%; padding: calc(var(--space) * 3); }
.cat-thumb .cover-type .ct-title { font-size: 1.3rem; }
.cat-badge { position: absolute; left: 12px; top: 12px; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--color-bg); color: var(--color-accent-deep); padding: 0.4em 0.7em; border-radius: 999px; box-shadow: var(--shadow-card); }
.cat-body { padding: calc(var(--space) * 2.75) calc(var(--space) * 2.75) calc(var(--space) * 3); display: flex; flex-direction: column; gap: var(--space); flex: 1; }
/* Tag-agnostic on purpose. A card title is h2 on a category hub and h4
inside a home-page category block, so binding these to h2 left the
grouped homepage showing bare blue underlined links. */
.cat-item :is(h2, h3, h4) { font-size: 1.18rem; line-height: 1.15; margin: 0; }
.cat-item :is(h2, h3, h4) a { text-decoration: none; color: var(--color-fg); }
.cat-item :is(h2, h3, h4) a:hover { color: var(--color-accent); }
.cat-desc { font-size: 0.9rem; color: var(--color-muted); margin: 0; flex: 1; }
.cat-meta { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-faint); }
.cat-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space); margin-top: calc(var(--space) * 1.25); }
.cat-price { font-family: var(--font-mono); font-weight: 700; font-size: 1.12rem; color: var(--color-highlight-deep); }
.cat-go { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; color: var(--color-accent); text-decoration: none; display: inline-flex; align-items: center; gap: 0.35em; }
.cat-item:hover .cat-go { gap: 0.6em; }
.holding { color: var(--color-muted); }
/* ── CATEGORY GROUPS (index + shelf) ───────────────────────────────────
One block per category. The markup shipped before these rules existed,
which put each heading hard against the grid above it. The separator is
a rule line rather than whitespace alone: at three columns the gap
between two categories reads as the gap between two rows of one. */
.cat-group {
/* Neutralises the global `section { padding: clamp(56px,9vw,104px) 0 }`.
A category group is a block INSIDE a section band, not a band itself, and
inheriting that padding put ~100px of dead air under every section head. */
padding: 0;
}
/* The section head was spaced for sitting directly on the card grid. A category
heading now comes between the two, so it needs less room, not more. */
.catalog-sec .sec-head { margin-bottom: calc(var(--space) * 3); }
/* Heading emphasis on the home catalog, per niche. tokens.css may set these two sizes
(shape.headings = "category_first") so the category name, a game for Dice Trail,
outranks the section headline visually. Unset, both keep their default sizes. */
.catalog-sec .sec-head h2 { font-size: var(--catalog-title-size, var(--step-3)); }
.cat-group + .cat-group {
margin-top: calc(var(--space) * 7);
padding-top: calc(var(--space) * 6);
border-top: 1px solid var(--color-border);
}
.cat-group-head { max-width: 720px; margin-bottom: calc(var(--space) * 3); }
.cat-group-head :is(h2, h3) {
font-size: var(--category-title-size, var(--step-1)); line-height: 1.15; margin: 0;
color: var(--color-fg);
}
/* The shelf's own scale. Its items are prose at --step-1, so the group heading
sits a step above them at --step-2 to read as the divider it is. The h2
default (--step-3) was too big and dwarfed the list under it. */
.shelf-list .cat-group-head :is(h2, h3) { font-size: var(--step-2); }
.cat-group-head p { color: var(--color-muted); margin: 0.4em 0 0; }
.cat-group-more { margin: calc(var(--space) * 3) 0 0; }
.cat-group-more a {
font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700;
color: var(--color-accent); text-decoration: none;
display: inline-flex; align-items: center; gap: 0.35em;
padding: 0.7em 1.2em; border-radius: 999px;
/* 44px floor: at 12.8px the padding alone left a 39px tap target on mobile. */
min-height: 44px; box-sizing: border-box; justify-content: center;
background: var(--color-surface); box-shadow: var(--shadow-card);
transition: gap .18s ease, background .18s ease;
}
.cat-group-more a:hover { gap: 0.7em; background: var(--color-accent-soft); }
/* The shelf's items carry their own top border, so a group there needs the
breathing room without a second line doubling up on the first item. */
/* The shelf's items already carry their own top border, so a group there needs
the breathing room without a second rule doubling the first item's line, and
less of it than the catalog's card grid needs. */
.shelf-list .cat-group + .cat-group {
border-top: 0; padding-top: 0; margin-top: calc(var(--space) * 5);
}
.shelf-list .cat-group-head { margin-bottom: calc(var(--space) * 2); }
.shelf-list .cat-group-more { margin-top: calc(var(--space) * 2.5); }
/* ── Footer ───────────────────────────────────────────────────────────── */
.site-foot { background: var(--color-ink-panel); color: color-mix(in srgb, var(--color-accent-fg) 70%, transparent); padding: calc(var(--space) * 6) var(--pad); font-size: 0.85rem; }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: var(--space) calc(var(--space) * 3); align-items: center; justify-content: space-between; }
.site-foot p { color: inherit; margin: 0; }
.site-foot .brand { color: var(--color-accent-fg); }
/* ── Sticky mobile CTA ────────────────────────────────────────────────── */
.sticky-cta {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none;
gap: calc(var(--space) * 1.5); align-items: center; justify-content: space-between;
background: color-mix(in srgb, var(--color-bg) 92%, transparent);
backdrop-filter: blur(10px);
border-top: 1px solid var(--color-border);
padding: calc(var(--space) * 1.25) var(--pad);
box-shadow: 0 -10px 30px -12px rgba(20,40,28,.25);
}
.sticky-cta .sc-price { display: flex; flex-direction: column; line-height: 1.1; }
.sticky-cta .sc-price b { font-family: var(--font-mono); font-size: 1.1rem; color: var(--color-highlight-deep); }
.sticky-cta .sc-price small { font-size: 0.7rem; color: var(--color-muted); }
.sticky-cta .btn { padding: 0.8em 1.4em; font-size: 1rem; flex-direction: row; }
/* ── HOMEPAGE (kind:"index" with home copy) ───────────────────────────── */
/* All colour derives from the niche token contract; every hard value below is
a color-mix on a token, so the palette carries through per niche. */
.home-hero {
max-width: 1120px; margin: 0 auto;
padding: clamp(28px, 5vw, 60px) var(--pad) clamp(48px, 7vw, 96px);
display: grid; grid-template-columns: 1.08fr 0.92fr;
gap: clamp(32px, 6vw, 88px); align-items: center;
}
.home-hero h1 { max-width: 13ch; }
.home-hero .lead { max-width: 34rem; }
/* The shelf — a fanned stack of real covers; the homepage's signature. */
.shelf { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1.04 / 1; justify-self: end; }
.shelf::after {
content: ""; position: absolute; left: 4%; right: 4%; bottom: 0; height: 9%;
background: radial-gradient(50% 100% at 50% 50%, color-mix(in srgb, var(--color-ink-panel) 22%, transparent), transparent 72%);
z-index: 0;
}
.sh-cover {
position: absolute; width: 53%; aspect-ratio: 4 / 5;
border-radius: var(--radius); overflow: hidden;
background: var(--color-ink-panel); color: var(--color-accent-fg);
display: flex; flex-direction: column; justify-content: space-between;
padding: calc(var(--space) * 3);
box-shadow: var(--shadow-card), inset 0 0 0 1px color-mix(in srgb, var(--color-accent-fg) 7%, transparent);
}
.sh-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh-cover .ct-title { font-size: clamp(1.05rem, 2vw, 1.35rem); }
.sh-cover.c1 { left: 0; top: 12%; transform: rotate(-7deg); z-index: 1;
background: color-mix(in srgb, var(--color-ink-panel) 86%, var(--color-accent)); }
.sh-cover.c2 { right: 1%; top: 0; transform: rotate(5.5deg); z-index: 2;
background: color-mix(in srgb, var(--color-ink-panel) 88%, var(--color-highlight-deep)); }
.sh-cover.c3 { left: 21%; top: 17%; width: 58%; transform: rotate(-1.5deg); z-index: 3;
box-shadow: var(--shadow-float), inset 0 0 0 1px color-mix(in srgb, var(--color-accent-fg) 9%, transparent); }
.sh-band {
position: absolute; left: 0; right: 0; bottom: 0;
display: flex; align-items: center; justify-content: space-between; gap: var(--space);
padding: calc(var(--space) * 1.5) calc(var(--space) * 2.25);
font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--color-accent-fg);
background: linear-gradient(to top, color-mix(in srgb, var(--color-ink-panel) 86%, transparent), transparent);
}
.sh-band .cb-tag { color: var(--color-highlight); font-weight: 700; }
/* Facts band — quiet, true statements about the format. Deliberately not
.card: no lift, no shadow; this band recedes behind the hero and catalog. */
.facts { padding: clamp(40px, 6vw, 68px) 0; }
.facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(20px, 3.5vw, 44px); }
.fact { border-top: 2px solid var(--color-highlight); padding-top: calc(var(--space) * 2.25); }
.fact b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--color-fg); letter-spacing: -0.01em; margin-bottom: calc(var(--space) * 0.75); }
.fact p { margin: 0; font-size: 0.9rem; color: var(--color-muted); }
/* How it works — a genuine sequence (2 or 3 steps), so it earns its numbers. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(24px, 4vw, 52px); }
.step { border-top: 1px solid var(--color-border-ink); padding-top: calc(var(--space) * 2.5); }
.step .st-num { display: inline-block; font-family: var(--font-mono); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-highlight-deep); margin-bottom: calc(var(--space) * 1.5); }
.step h3 { margin-bottom: var(--space); }
.step p { margin: 0; font-size: 0.94rem; }
/* ── Scroll-driven reveal (JS-free, progressive) ──────────────────────── */
/* Content is visible by default. Only browsers that support scroll timelines
AND don't ask for reduced motion opt into the animation. */
/* ── The Reading Shelf (/a/) ────────────────────────────────────────────────
The hub the article pages belong to. Deliberately a list and not a grid: a
reader is choosing what to read, and an excerpt is what makes that choice
possible. A grid of covers would be the catalogue again, which is a page
about buying. */
.shelf-hero { padding-bottom: calc(var(--space) * 4); }
.shelf-list { padding: calc(var(--space) * 2) 0 calc(var(--space) * 10); }
.shelf-item {
display: flex; gap: calc(var(--space) * 4); align-items: flex-start;
padding: calc(var(--space) * 4) 0;
border-top: 1px solid var(--color-border);
}
.shelf-item:last-child { border-bottom: 1px solid var(--color-border); }
/* The cover is wrapped in a link now, so the LINK is the flex child and holds
the width; the image fills it. */
.shelf-thumb-link {
display: block; width: 92px; flex: none;
border-radius: var(--radius-sm); overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease;
}
.shelf-thumb-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-float); }
.shelf-thumb {
display: block; width: 100%; border-radius: var(--radius-sm);
aspect-ratio: 3 / 4; object-fit: cover; box-shadow: var(--shadow-card);
}
.shelf-thumb-blank {
display: flex; align-items: center; justify-content: center; text-align: center;
background: var(--color-ink-panel); color: var(--color-accent-fg);
font-family: var(--font-display); font-size: 0.72rem; padding: 0.5em;
}
.shelf-copy { flex: 1; min-width: 0; }
.shelf-copy :is(h2, h3) { font-size: var(--step-1); margin: 0 0 0.5em; max-width: 28ch; }
.shelf-copy :is(h2, h3) a { color: var(--color-fg); text-decoration: none; }
.shelf-copy :is(h2, h3) a:hover { color: var(--color-accent-deep); text-decoration: underline; text-underline-offset: 0.18em; }
.shelf-copy p { margin: 0 0 0.6em; max-width: 62ch; }
.shelf-meta {
font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.07em;
text-transform: uppercase; color: var(--color-faint); margin: 0;
}
@media (max-width: 560px) {
.shelf-item { gap: calc(var(--space) * 3); }
.shelf-thumb-link { width: 68px; }
}
/* ── article page (/a//) ──────────────────────────────────────────────
Same system as a product page, aimed at a reader. The differences are all
restraint: no price in the hero, no trust chips, one promo mid-article and
one offer at the end. A reader who bounces off a page that sells before it
says anything is worth less than no visit at all. */
.art-hero {
padding: calc(var(--space) * 12) 0 calc(var(--space) * 6);
background:
radial-gradient(90ch 40ch at 15% -10%, var(--color-accent-soft), transparent 70%),
var(--color-bg);
}
.art-hero h1 { margin: calc(var(--space) * 2.5) 0; max-width: 22ch; }
.art-hero .lead { color: var(--color-fg); }
.art-meta {
font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--color-faint);
margin: calc(var(--space) * 3) 0 0;
}
.art-sec { padding: calc(var(--space) * 5) 0; }
.art-sec + .art-sec { padding-top: 0; }
/* The heading is the retrievable unit, so it gets the space that says so. */
.art-sec h2 {
font-size: var(--step-2); max-width: 26ch;
margin: 0 0 calc(var(--space) * 2.5);
}
.art-sec .prose { font-size: 1.02rem; }
.art-sec .prose a { color: var(--color-accent-deep); text-underline-offset: 0.18em; }
/* Inline promo: a cover, a name, a price, a button. Not a second hero. */
.art-promo { padding: calc(var(--space) * 4) 0; }
.art-promo-inner {
display: flex; gap: calc(var(--space) * 4); align-items: center;
background: var(--color-surface-2); border: 1px solid var(--color-border);
border-radius: var(--radius); padding: calc(var(--space) * 4);
box-shadow: var(--shadow-card);
}
.art-promo-cover {
width: 132px; flex: none; border-radius: var(--radius-sm);
box-shadow: var(--shadow-card); aspect-ratio: 3 / 4; object-fit: cover;
}
.art-promo-cover-blank {
display: flex; align-items: center; justify-content: center; text-align: center;
background: var(--color-ink-panel); color: var(--color-accent-fg);
font-family: var(--font-display); font-size: 0.82rem; padding: 0.6em;
}
.art-promo-copy { flex: 1; }
.art-promo-copy h2 { font-size: var(--step-1); margin: 0.4em 0 0.5em; }
.art-promo-copy p {
font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--color-muted);
margin: 0 0 calc(var(--space) * 2.5);
}
.art-promo-alt { flex-direction: row-reverse; }
/* Closing offer. NOT the dark .offer panel the product page uses: on an
article that reads as a footer, so the reader stops before the one block
meant to convert. One shade up from the page, bordered like the promo cards,
with the argument on the left and the action beside it on the right. */
.art-offer {
padding: calc(var(--space) * 6) 0 calc(var(--space) * 8);
background: var(--color-surface);
border-top: 1px solid var(--color-border);
}
.art-offer-inner {
display: flex; gap: calc(var(--space) * 5); align-items: flex-start;
background: var(--color-surface-2); border: 1px solid var(--color-border);
border-radius: var(--radius); padding: calc(var(--space) * 5);
box-shadow: var(--shadow-card);
}
.art-offer-main { flex: 1 1 auto; min-width: 0; }
.art-offer-main h2 { font-size: var(--step-1); margin: 0.45em 0 0.4em; }
.art-offer-sub { color: var(--color-muted); margin: 0 0 calc(var(--space) * 3); max-width: 46ch; }
.art-offer-list {
list-style: none; padding: 0; margin: 0;
columns: 2; column-gap: calc(var(--space) * 4);
font-size: 0.9rem; color: var(--color-muted);
}
.art-offer-list li {
padding: 0.3em 0 0.3em 1.1em; position: relative;
break-inside: avoid;
}
.art-offer-list li::before {
content: ""; position: absolute; left: 0; top: 0.82em;
width: 0.5em; height: 1px; background: var(--color-accent);
}
.art-offer-buy {
flex: 0 0 210px; text-align: center; align-self: center;
display: flex; flex-direction: column; align-items: center; gap: calc(var(--space) * 2);
}
.art-offer-cover {
width: 118px; border-radius: var(--radius-sm); aspect-ratio: 3 / 4;
object-fit: cover; box-shadow: var(--shadow-card);
}
.art-offer-price {
font-family: var(--font-display); font-size: var(--step-2); font-weight: 700;
color: var(--color-fg); margin: 0; line-height: 1;
}
.art-offer-price .cents { font-size: 0.55em; vertical-align: 0.55em; margin-right: 0.05em; }
.art-offer-buy .btn { width: 100%; }
.art-offer-reassure {
font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.07em;
text-transform: uppercase; color: var(--color-faint); margin: 0; line-height: 1.7;
}
/* Sources: present because the page makes claims, small because the reader
came for the answer. */
.art-sources {
padding: calc(var(--space) * 6) 0 calc(var(--space) * 10);
border-top: 1px solid var(--color-border);
}
.art-sources h2 {
font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700;
letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-faint);
margin: 0 0 calc(var(--space) * 2.5);
}
.art-sources-body { font-size: 0.84rem; color: var(--color-faint); }
.art-sources-body ul { padding-left: 1.1em; }
.art-sources-body li { margin-bottom: 0.45em; }
.art-sources-body a { color: var(--color-muted); }
.art-sources-body p { margin-bottom: 0.8em; }
.art-src-date {
display: inline-block; margin-left: 0.5em;
font-family: var(--font-mono); font-size: 0.86em; letter-spacing: 0.04em;
color: color-mix(in srgb, var(--color-faint) 75%, transparent);
white-space: nowrap;
}
@media (max-width: 640px) {
.art-hero { padding-top: calc(var(--space) * 8); }
.art-promo-inner, .art-promo-alt { flex-direction: column; align-items: flex-start; gap: calc(var(--space) * 3); }
.art-promo-cover { width: 108px; }
.art-offer-inner { flex-direction: column; gap: calc(var(--space) * 4); padding: calc(var(--space) * 4); }
.art-offer-list { columns: 1; }
.art-offer-buy { flex: none; width: 100%; align-self: stretch; }
}
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.reveal {
opacity: 0; transform: translateY(22px);
animation: rise-in linear both;
animation-timeline: view();
animation-range: entry 5% cover 22%;
}
.hero-copy > *, .hero-visual { opacity: 0; animation: rise-in .7s ease both; }
.hero-copy > *:nth-child(1) { animation-delay: .05s; }
.hero-copy > *:nth-child(2) { animation-delay: .12s; }
.hero-copy > *:nth-child(3) { animation-delay: .19s; }
.hero-copy > *:nth-child(4) { animation-delay: .26s; }
.hero-copy > *:nth-child(5) { animation-delay: .33s; }
.hero-visual { animation-delay: .18s; }
.shelf { opacity: 0; animation: rise-in .8s ease both; animation-delay: .18s; }
.sh-cover.c3 { animation: settle .9s cubic-bezier(.2,.8,.3,1) both; animation-delay: .35s; }
}
}
@keyframes rise-in { to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: rotate(-1.5deg) translateY(-14px); } to { opacity: 1; transform: rotate(-1.5deg) translateY(0); } }
/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 860px) {
.hero { grid-template-columns: 1fr; padding-top: calc(var(--space) * 3); gap: calc(var(--space) * 4); align-items: start; display: flex; flex-direction: column; }
.hero-copy { max-width: none; order: -1; }
.hero-visual { order: -2; }
.cover { width: min(82%, 340px); margin-inline: auto; flex: none; min-height: 0; height: auto; aspect-ratio: 4 / 5; }
.cards-grid { grid-template-columns: 1fr 1fr; }
.home-hero { grid-template-columns: 1fr; gap: calc(var(--space) * 6); }
.shelf { order: -1; justify-self: center; max-width: 310px; }
}
@media (max-width: 560px) {
.cards-grid, .cards-grid.duo { grid-template-columns: 1fr; }
.sticky-cta { display: flex; }
body { padding-bottom: 76px; }
.tagline { display: none; }
.site-foot .wrap { flex-direction: column; align-items: flex-start; }
.chapter > summary { padding: calc(var(--space) * 2) calc(var(--space) * 2.25); }
.chapter .ch-title { font-size: 1.08rem; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}