/* ==========================================================================
writer-theme.css — the Rhetorical Writer brand theme
--------------------------------------------------------------------------
Drop-in, additive stylesheet. Load AFTER css/slides.css. Everything is
scoped under `.slide.theme-writer`; built-in themes are untouched.
Wiring (per THEME-AUTHORING-GUIDE.md):
1. This file lives at css/writer-theme.css (name is load-bearing —
the PNG exporter finds theme CSS by convention).
2. index.html:
3. index.html: in #theme-select.
Design intent — "the manuscript at night":
• Ink-dark desk with a barely-there ruled-paper baseline grid — the
page you write on, after hours.
• A literary serif (Fraunces for display, Source Serif 4 for text)
carries the writing; a typewriter mono (IBM Plex Mono) carries the
marginalia — tags, kickers, footers, buttons. The mono is the
file-native story told typographically: this deck is plain text.
• Family accents: gilt for Framing (the bound edition's edges), teal
for Declarative, dusty rose for Reflection, iris for Sequence, moss
for Evidence — all tuned to sit calmly on the dark ground.
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
/* ---------- palette + contract (§3: every variable, no omissions) ---------- */
.slide.theme-writer {
--bg: #14151c; /* ink-black with a blue undertone */
--bg2: #1c1e27; /* raised surface */
--ink: #ece9e2; /* warm paper-white */
--muted: #9a97a3; /* graphite */
--line: #32343f;
--card: #1c1e27;
--shadow: rgba(0, 0, 0, .5);
--ghost: rgba(236, 233, 226, .06);
/* family accents — shared calm chroma, varied hue */
--gilt: #c9a45c; /* Framing — gilt edge */
--teal: #55b9a5; /* Declarative — ink teal */
--rose: #c887a0; /* Reflection — dusty rose */
--iris: #8d92ee; /* Sequence — iris */
--moss: #83b878; /* Evidence — moss */
--c1: var(--iris); --c2: var(--teal); --c3: var(--gilt);
--c4: var(--rose); --c5: var(--moss); --c6: #c07a55;
font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
-webkit-font-smoothing: antialiased;
/* keep the dark ground + washes when printing to PDF */
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* The desk at night: two faint accent washes + a ruled baseline grid so the
ground reads as a page, not a void. Sits behind all content. */
.slide.theme-writer {
background-color: var(--bg);
background-image:
radial-gradient(120% 90% at 10% 0%, rgba(201, 164, 92, .05), transparent 55%),
radial-gradient(120% 90% at 95% 100%, rgba(141, 146, 238, .05), transparent 55%),
repeating-linear-gradient(180deg, transparent 0 47px, rgba(236, 233, 226, .025) 47px 48px);
}
/* Quiet arrival. Constraints per §5: opacity only (the app positions slides
with inline transforms — never animate transform on .slide), and scoped to
the two live surfaces so PDF/PNG never freeze at an opacity:0 first frame. */
@keyframes writer-in {
from { opacity: 0; }
to { opacity: 1; }
}
#preview-frame .slide.theme-writer,
#present .slide.theme-writer {
animation: writer-in .5s cubic-bezier(.22, .61, .36, 1) backwards;
}
/* ---------- typography, theme-wide ---------- */
/* Display voice: Fraunces — bookish, a little sharp. */
.slide.theme-writer .h-xl,
.slide.theme-writer .t-title,
.slide.theme-writer .def-term,
.slide.theme-writer .num-value {
font-family: "Fraunces", Georgia, serif;
font-weight: 500;
letter-spacing: -.015em;
}
.slide.theme-writer .h-md,
.slide.theme-writer .cmp-label,
.slide.theme-writer .ov-card-title {
font-family: "Fraunces", Georgia, serif; font-weight: 500;
}
.slide.theme-writer .h-sub,
.slide.theme-writer .def-text,
.slide.theme-writer .num-label,
.slide.theme-writer .src-text,
.slide.theme-writer .qq-sub,
.slide.theme-writer .cta-detail {
font-family: "Source Serif 4", Georgia, serif; font-weight: 400;
}
.slide.theme-writer strong { font-weight: 600; }
/* Marginalia voice: the typewriter mono. Tags, kickers, footers, buttons,
dates, table headers — everything that annotates rather than argues. */
.slide.theme-writer .slide-tag,
.slide.theme-writer .kicker,
.slide.theme-writer .slide-footer,
.slide.theme-writer .t-author,
.slide.theme-writer .src-author,
.slide.theme-writer .demo-time,
.slide.theme-writer .tl-date,
.slide.theme-writer .chart-x,
.slide.theme-writer .chart-val,
.slide.theme-writer .cta-btn,
.slide.theme-writer .end-link,
.slide.theme-writer .ov-num,
.slide.theme-writer .proc-n,
.slide.theme-writer .demo-n,
.slide.theme-writer .tbl th {
font-family: "IBM Plex Mono", Consolas, Menlo, monospace;
}
.slide.theme-writer .slide-tag,
.slide.theme-writer .kicker {
font-weight: 500; letter-spacing: .18em;
}
/* Category bar: a fine gilt-style rule that fades out, not a solid band. */
.slide.theme-writer .cat-bar {
height: 4px;
background: linear-gradient(90deg, var(--cat), color-mix(in oklab, var(--cat) 40%, transparent) 75%, transparent);
}
/* Card surfaces: crisp edges, hairline borders, deep quiet shadows. */
.slide.theme-writer .ov-card,
.slide.theme-writer .src-card,
.slide.theme-writer .proc-card,
.slide.theme-writer .demo-box,
.slide.theme-writer .tbl,
.slide.theme-writer .def-img,
.slide.theme-writer .demo-img,
.slide.theme-writer .list-img {
border-radius: 10px;
box-shadow: 0 18px 44px -16px var(--shadow);
}
.slide.theme-writer code {
font-family: "IBM Plex Mono", Consolas, Menlo, monospace;
background: color-mix(in oklab, var(--cat) 14%, var(--bg2));
color: color-mix(in oklab, var(--cat) 60%, var(--ink));
border-radius: 4px;
}
/* ==========================================================================
PER-FAMILY ACCENTUATION
`--cat` arrives as an inline style from render.js, so each family override
needs !important. Beyond hue, each family gets one typographic gesture so
the slide's job is felt at a glance.
========================================================================== */
/* ---- FRAMING (title · overview · header · ending) — the bound edition -----
Gilt. Grand Fraunces display, an italic ghost numeral as a section
threshold, gilt rules like edge-stained pages. */
.slide.theme-writer.cat-framing { --cat: var(--gilt) !important; }
.slide.theme-writer.type-title .t-title { font-size: 84px; font-weight: 500; }
.slide.theme-writer .t-subtitle,
.slide.theme-writer .h-sub { font-style: italic; color: var(--muted); }
.slide.theme-writer .title-rule,
.slide.theme-writer .stmt-mark,
.slide.theme-writer .def-rule {
background: linear-gradient(90deg, var(--cat), color-mix(in oklab, var(--cat) 45%, transparent));
border-radius: 2px;
}
.slide.theme-writer .title-scrim,
.slide.theme-writer .bg-scrim { opacity: .82; }
.slide.theme-writer.type-header .ghost-num {
color: color-mix(in oklab, var(--gilt) 11%, transparent);
font-family: "Fraunces", Georgia, serif; font-weight: 400; font-style: italic;
}
.slide.theme-writer .ov-card { border-top: 3px solid var(--cat); background: var(--card); }
.slide.theme-writer .ov-num { color: var(--cat); font-weight: 500; }
.slide.theme-writer .end-frame {
border-color: color-mix(in oklab, var(--gilt) 35%, var(--line));
border-radius: 12px;
}
.slide.theme-writer .end-link {
font-weight: 500;
}
.slide.theme-writer .end-link.primary {
background: var(--gilt); color: #14151c;
}
/* ---- DECLARATIVE (statement · quote · definition · source) — set in ink ----
Teal. Assertions stand on a firm left rule, upright and confident — the
one family that never italicizes its main text. */
.slide.theme-writer.cat-declarative { --cat: var(--teal) !important; }
.slide.theme-writer .stmt {
font-family: "Fraunces", Georgia, serif;
font-weight: 400; font-size: 54px; line-height: 1.26;
padding-left: 36px; border-left: 3px solid var(--cat);
}
.slide.theme-writer.type-statement .stmt-mark { display: none; }
.slide.theme-writer .q-text { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-style: italic; }
.slide.theme-writer .q-glyph { color: var(--cat); opacity: .22; }
.slide.theme-writer .src-card { border-left: 6px solid var(--cat); background: var(--card); }
.slide.theme-writer .def-term { color: var(--ink); }
.slide.theme-writer .src-link { font-family: "IBM Plex Mono", Consolas, monospace; }
/* ---- REFLECTION (question · equation · demo · cta) — room to think ---------
Dusty rose, the most air. Light weights, generous leading; the demo box
reads as a note pinned to the desk; the CTA is the one loud object. */
.slide.theme-writer.cat-reflection { --cat: var(--rose) !important; }
.slide.theme-writer .qq-text {
font-family: "Fraunces", Georgia, serif;
font-weight: 400; line-height: 1.28;
}
.slide.theme-writer .ghost-q {
color: color-mix(in oklab, var(--rose) 10%, transparent);
font-style: italic;
}
.slide.theme-writer .eq-expr { font-weight: 400; }
.slide.theme-writer .eq-op { color: var(--cat); font-weight: 500; }
.slide.theme-writer .demo-box {
border: 1px solid color-mix(in oklab, var(--rose) 35%, var(--line));
background: color-mix(in oklab, var(--rose) 6%, var(--card));
}
.slide.theme-writer .demo-head { color: var(--cat); }
.slide.theme-writer .demo-n {
background: color-mix(in oklab, var(--rose) 24%, var(--card));
color: color-mix(in oklab, var(--rose) 70%, var(--ink));
font-weight: 600;
}
.slide.theme-writer .cta-text { font-family: "Fraunces", Georgia, serif; font-weight: 400; }
.slide.theme-writer .cta-btn {
background: var(--cat); color: #14151c;
border-radius: 6px; font-weight: 600; letter-spacing: .05em;
box-shadow: 0 14px 34px -10px var(--shadow);
}
/* ---- SEQUENCE (comparison · list · process · timeline) — the through-line --
Iris. Steps and spines read as annotation: mono numerals, a dotted
connective line, markers in accent. */
.slide.theme-writer.cat-sequence { --cat: var(--iris) !important; }
.slide.theme-writer .proc-card { border-bottom: 3px solid var(--cat); background: var(--card); }
.slide.theme-writer .proc-n { color: var(--cat); font-weight: 600; }
.slide.theme-writer .proc-arrow { color: var(--cat); opacity: .85; }
.slide.theme-writer .list-items li::marker { color: var(--cat); }
.slide.theme-writer .cmp-vs { background: color-mix(in oklab, var(--iris) 30%, var(--line)); }
.slide.theme-writer .cmp-vs span {
background: var(--cat); color: #14151c;
font-family: "IBM Plex Mono", Consolas, monospace; font-weight: 600;
}
.slide.theme-writer .tl-line {
height: 2px;
background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 15px);
}
.slide.theme-writer .tl-dot {
background: var(--cat);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--iris) 30%, var(--line));
}
.slide.theme-writer .tl-date { font-weight: 600; color: var(--cat); }
/* ---- EVIDENCE (number · trendline · table · charts) — proof, precisely -----
Moss. The hero number in display serif; tables and chart labels crisp,
mono-annotated — data presented like a careful footnote, not a billboard. */
.slide.theme-writer.cat-evidence { --cat: var(--moss) !important; }
.slide.theme-writer .num-value { font-weight: 400; font-size: 228px; }
.slide.theme-writer .num-label { font-style: italic; color: var(--muted); }
.slide.theme-writer .tbl { border: 1px solid var(--line); }
.slide.theme-writer .tbl th {
letter-spacing: .08em; font-weight: 600; text-transform: uppercase;
color: #14151c; /* dark ink on the light moss --cat background */
}
.slide.theme-writer .tbl tr:nth-child(even) td {
background: color-mix(in oklab, var(--moss) 6%, var(--bg2));
}
.slide.theme-writer .trend-to { color: var(--cat); font-weight: 500; }
.slide.theme-writer .chart-val { fill: var(--ink); font-weight: 600; }
.slide.theme-writer .venn-num { font-weight: 500; }