Files
kaleidoskop/styles/typography.css
T
valknar 364cc249dc Remove finale page from book interior
The cover PDF serves this purpose. Removes the page--finale template
block, the finale data loading path in build.js, and all finale CSS.
Page count: 100 → 99 (imprint + title + TOC + 96 scene pages).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-03 19:55:52 +02:00

191 lines
4.0 KiB
CSS

/* ── Cormorant Garamond — display, titles, ornaments ── */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
src: url('../fonts/cormorant-garamond-400-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
src: url('../fonts/cormorant-garamond-300-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
src: url('../fonts/cormorant-garamond-400-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 600;
src: url('../fonts/cormorant-garamond-600-italic.woff2') format('woff2');
}
/* ── Lora — body text ── */
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 400;
src: url('../fonts/lora-400-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 400;
src: url('../fonts/lora-400-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 500;
src: url('../fonts/lora-500-normal.woff2') format('woff2');
}
/* ── Design tokens ── */
:root {
--ink: #1e1b18;
--ink-muted: rgba(30, 27, 24, 0.38);
--ink-rule: rgba(30, 27, 24, 0.18);
--cream: #faf8f2;
--midnight: #0d0d2b;
--gold: #b89a4e;
--font-display: 'Cormorant Garamond', Georgia, serif;
--font-body: 'Lora', Georgia, serif;
}
/* ── Base ── */
body {
font-family: var(--font-body);
color: var(--ink);
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* ── Imprint page ── */
.imprint-content {
font-family: var(--font-body);
font-size: 0.72rem;
color: var(--ink-muted);
line-height: 2;
}
/* ── Table of contents ── */
.toc-title {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: 1.9rem;
color: var(--ink);
padding-bottom: 0.6rem;
border-bottom: 1px solid var(--ink-rule);
margin-bottom: 0.2rem;
}
.toc-list li {
font-family: var(--font-body);
font-size: 0.95rem;
color: var(--ink);
line-height: 1.5;
}
.toc-list li::before {
font-family: var(--font-display);
font-style: italic;
font-size: 0.8rem;
color: var(--ink-muted);
}
/* ── Story number label ── */
.story-number {
display: block;
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 0.55rem;
}
/* ── Story title ── */
.story-title {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: 1.85rem;
line-height: 1.25;
color: var(--ink);
padding-bottom: 0.6rem;
border-bottom: 1px solid var(--ink-rule);
margin-bottom: 1rem;
}
/* ── Scene text ── */
.scene-text {
font-family: var(--font-body);
font-size: 1.02rem;
line-height: 1.9;
color: var(--ink);
}
.scene-text p {
margin-bottom: 1em;
}
.scene-text p:last-child {
margin-bottom: 0;
}
.scene-text em {
font-style: italic;
}
/* ── Scene ornament ── */
.scene-ornament {
font-family: var(--font-display);
font-size: 1.4rem;
color: var(--ink-muted);
text-align: center;
margin-top: auto;
padding-top: 0.5rem;
}
/* ── Title page ── */
.titlepage-ornament {
font-family: var(--font-display);
font-size: 1.6rem;
color: var(--ink-muted);
}
.titlepage-title {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: 2.4rem;
line-height: 1.2;
color: var(--ink);
}
.titlepage-subtitle {
font-family: var(--font-display);
font-style: italic;
font-size: 1rem;
color: var(--ink-muted);
letter-spacing: 0.08em;
}
.titlepage-author {
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--ink-muted);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-top: 0.5rem;
}