Files
kaleidoskop/styles/typography.css
T
valknar 90b35f9d0c Remove interior title page — cover replaces it
The title page is redundant since the KDP cover (cover.pdf) already
establishes title and author. Interior now opens directly on the
copyright page, followed by the TOC and stories (99 pages total).
Removed unused .page--title CSS from layout and typography.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-03 18:56:59 +02:00

177 lines
3.8 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;
}
/* ── Finale overlay ── */
.finale-overlay h2 {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: 2.6rem;
color: white;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
letter-spacing: 0.02em;
}
.finale-overlay p {
font-family: var(--font-display);
font-style: italic;
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.7);
letter-spacing: 0.12em;
margin-top: 0.6rem;
}