/* ============================================================
Verdigris Slide Decks - reference stylesheet
16:9 master, 1280x720px (13.33in x 7.5in widescreen), paged via @page for PDF render.
Render: use `npm run render:slides -- input.html output.pdf`
(build/render-slides.cjs). Plain `chrome --print-to-pdf` drops most slide
content in paged-media context; the npm script wraps a viewport-screenshot
workaround that produces faithful per-slide PDF pages. See Z2O-1464.
Status: experimental. Graduates after 2 customer-facing decks
ship using this template with positive review.
Consumption:
...
slides.css EXTENDS cover.css; cover.css must load first.
All selectors namespaced .vd-slide-* to avoid collision with
.vd-cover-*, .vd-paper-*, .vd-thesis-*, etc. from cover.css.
SLIDE-ROOT OVERRIDE (PR-G decision 2):
Slides set inherited body to 18pt via .vd-slide{font-size}, distinct
from the 11pt print body inherited by cover/whitepaper-body/case-study/
one-pager. This codifies the read-distance principle (18in print vs
6-30ft projection). Slide-context typography tokens carry projection-
scaled pt values (display.slide-h1=56pt, deck.slide=20pt, body-display
=22pt, metric.callout=24pt). Caption / caption-strong are overridden
at slide context (11pt / 12pt) vs print (9pt / 9.5pt).
Tokens mirrored from:
- tokens/spacing/slides.json (slide grid, rhythm, table)
- tokens/spacing/print.json (page size primitives reused)
- tokens/typography/font-family.json (Inter, Lato, JetBrains Mono)
- tokens/typography/scale.json (print pt mirror via @import; codegen at build/config.ts)
- tokens/color/base.json (built hex via build/dist/hex/colors.json)
============================================================ */
@import url('../dist/typography/print.css');
:root {
--vd-teal-text: #007571; /* WCAG-AA teal on light bg; brand.verdigris-on-light token */
/* Slide master (16:9, 1280x720px = 13.33in x 7.5in, standard widescreen).
IMPORTANT: px not pt. 1pt = 1/72in (so 1280pt would be ~17.78in, oversized).
CSS px maps to 1/96in for print rendering. PowerPoint/Keynote widescreen
exports to PDF at 13.33in x 7.5in, which is 1280x720px. Match that.
[Fixed 2026-05-03 after Loop 4 CSS audit caught the pt vs px scaling bug.] */
--vd-slide-width: 1280px;
--vd-slide-height: 720px;
/* Frame: floor + ceiling per the project rule */
--vd-slide-frame-top-min: 48pt;
--vd-slide-frame-top: 56pt;
--vd-slide-frame-top-max: 72pt;
--vd-slide-frame-side-min: 56pt;
--vd-slide-frame-side: 72pt;
--vd-slide-frame-side-max: 88pt;
--vd-slide-frame-bottom-min: 48pt;
--vd-slide-frame-bottom: 56pt;
--vd-slide-frame-bottom-max: 64pt;
/* Footer band */
--vd-slide-footer-height: 32pt;
--vd-slide-footer-padding-side: 56pt;
/* Logomark heights */
--vd-slide-logomark-footer: 20pt;
--vd-slide-logomark-title: 52pt;
/* Vertical rhythm */
--vd-slide-title-to-deck: 22pt;
--vd-slide-deck-to-body: 40pt;
--vd-slide-body-block-gap: 22pt;
/* Confidentiality colors are declared in cover.css root and inherited here.
Refactored 2026-05-03 (Loop 4 CSS audit) -- removing duplicates that drift. */
}
/* ---- Named pages per genre ----
Each genre uses a named @page so theme + footer can vary.
IMPORTANT: WeasyPrint @page :first issue (#2088) — use named pages.
*/
@page slide-cover {
size: 1280px 720px;
margin: 0;
background: var(--vd-neutral-950);
}
@page slide-body-light {
size: 1280px 720px;
margin: 0;
background: #ffffff;
}
@page slide-body-dark {
size: 1280px 720px;
margin: 0;
background: var(--vd-neutral-950);
}
/* ---- Reset (additive to cover.css) ---- */
.vd-slide-deck { margin: 0; padding: 0; font-family: 'Inter', -apple-system, sans-serif; }
.vd-slide *, .vd-slide *::before, .vd-slide *::after { box-sizing: border-box; }
/* ============================================================
SLIDE BASE
Each .vd-slide is one printed page.
SLIDE-ROOT OVERRIDE (decision 2): font-size: 18pt sets the
body-text inheritance for slide context, distinct from the
11pt print body inherited by other print stylesheets.
============================================================ */
.vd-slide {
position: relative;
width: 1280px;
height: 720px;
font-size: 18pt; /* slide-root override; body inheritance baseline */
page-break-after: always;
overflow: hidden;
display: flex;
flex-direction: column;
padding: var(--vd-slide-frame-top) var(--vd-slide-frame-side) calc(var(--vd-slide-frame-bottom) + var(--vd-slide-footer-height));
}
/* Slide-context overrides: caption / caption-strong / micro carry slide pt
values inside .vd-slide (read-distance principle: projection vs print). Other
print stylesheets loaded in the same document inherit their normal print pt
values from their own :root since these declarations are scoped. */
.vd-slide {
--vd-typography-caption: 11pt; /* vs 9pt print */
--vd-typography-caption-strong: 12pt; /* vs 9.5pt print */
--vd-typography-micro: 10pt; /* slide-context figure-credit; vs 8pt print */
}
/* Light vs dark variants */
.vd-slide-light { page: slide-body-light; background: #ffffff; color: var(--vd-ink); }
.vd-slide-dark { page: slide-body-dark; background: var(--vd-neutral-950); color: rgba(255, 255, 255, 0.92); }
/* ============================================================
TITLE SLIDE (cover-like)
============================================================ */
.vd-slide-title {
page: slide-cover;
background: var(--vd-neutral-950);
color: #ffffff;
justify-content: space-between;
}
.vd-slide-title .vd-slide-title-top { display: flex; align-items: center; }
.vd-slide-title .vd-slide-logomark-large {
height: var(--vd-slide-logomark-title);
width: auto;
}
.vd-slide-title .vd-slide-eyebrow {
font-family: 'Lato', sans-serif;
font-size: var(--vd-typography-deck-page);
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--vd-teal-soft);
padding-top: 80pt;
}
.vd-slide-title h1 {
font-family: 'Lato', sans-serif;
font-size: var(--vd-typography-display-slide-h1);
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.10;
color: rgba(255, 255, 255, 0.96);
padding-top: 24pt;
max-width: 1000pt;
margin: 0;
}
.vd-slide-title h1 .vd-accent { color: var(--vd-teal); }
.vd-slide-title .vd-slide-deck {
font-size: var(--vd-typography-deck-slide-title);
line-height: 1.4;
font-weight: 400;
color: rgba(255, 255, 255, 0.72);
max-width: 880pt;
padding-top: 20pt;
}
.vd-slide-title .vd-slide-byline {
display: flex;
justify-content: space-between;
align-items: flex-end;
font-size: var(--vd-typography-deck-slide); /* 20pt — matches title-slide register */
color: rgba(255, 255, 255, 0.78);
padding-top: 14pt;
border-top: 0.5pt solid var(--vd-rule-strong);
margin-top: auto;
}
.vd-slide-title .vd-slide-byline .vd-name { font-weight: 600; color: #ffffff; }
.vd-slide-title .vd-slide-byline .vd-affil {
display: block;
font-size: var(--vd-typography-deck-page);
font-weight: 400;
color: rgba(255, 255, 255, 0.55);
padding-top: 4pt;
}
.vd-slide-title .vd-slide-byline .vd-date {
font-size: var(--vd-typography-deck-page);
color: rgba(255, 255, 255, 0.65);
text-align: right;
}
/* ============================================================
BODY SLIDE
============================================================ */
.vd-slide-body {
page: slide-body-light;
background: #ffffff;
color: var(--vd-ink);
}
.vd-slide-eyebrow {
display: flex;
align-items: baseline;
font-family: 'Lato', sans-serif;
font-size: var(--vd-typography-caption-strong);
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--vd-muted);
padding-bottom: 6pt;
}
.vd-slide-eyebrow .vd-num {
font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
font-size: var(--vd-typography-caption);
color: var(--vd-teal-text);
margin-right: 16pt;
}
h2.vd-slide-headline {
font-family: 'Lato', sans-serif;
font-size: var(--vd-typography-headline-section-max); /* 36pt default (lab/conference room) */
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.18;
color: var(--vd-ink);
margin: 0;
max-width: 1100pt;
padding-bottom: var(--vd-slide-title-to-deck);
}
/* Auditorium-projection opt-in: set [data-projection="auditorium"] on
or any .vd-slide ancestor to scale body-slide H1 from 36pt -> 42pt. Floor
40pt (--vd-typography-headline-slide-min), ceiling 44pt (-max). */
[data-projection="auditorium"] h2.vd-slide-headline {
font-size: var(--vd-typography-headline-slide); /* 42pt auditorium default */
}
h2.vd-slide-headline .vd-accent { color: var(--vd-teal-text); }
p.vd-slide-deck-line {
font-size: var(--vd-typography-deck-slide);
line-height: 1.4;
color: var(--vd-muted);
margin: 0;
max-width: 900pt;
padding-bottom: var(--vd-slide-deck-to-body);
}
.vd-slide-body-content {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: var(--vd-slide-body-block-gap);
font-size: var(--vd-typography-body-display); /* 22pt slide body */
line-height: 1.45;
}
.vd-slide-body-content p { margin: 0; }
.vd-slide-body-content strong { font-weight: 600; }
.vd-slide-body-content .vd-emphasis { font-size: var(--vd-typography-metric-callout); font-weight: 600; }
/* Bullet lists, slide-tuned */
.vd-slide-body-content ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14pt;
}
.vd-slide-body-content ul li {
position: relative;
padding-left: 28pt;
font-size: var(--vd-typography-body-display);
line-height: 1.45;
}
.vd-slide-body-content ul li::before {
content: "";
position: absolute;
left: 0; top: 0.55em;
width: 12pt; height: 2.5pt;
background: var(--vd-teal);
border-radius: 1pt;
}
/* Two-column body layout */
.vd-slide-body-content.vd-cols-2 { flex-direction: row; gap: 48pt; align-items: flex-start; }
.vd-slide-body-content.vd-cols-2 > * { flex: 1 1 0; }
/* Three-column body layout */
.vd-slide-body-content.vd-cols-3 { flex-direction: row; gap: 36pt; align-items: flex-start; }
.vd-slide-body-content.vd-cols-3 > * { flex: 1 1 0; }
/* ============================================================
TABLES (slide-tuned, mode: persuade-slide-deck.table-formatting)
Z2O-1323 enforcement: max 6 cols, max 8 rows, padding floor/ceiling.
============================================================ */
table.vd-slide-table {
width: 100%;
border-collapse: collapse;
font-size: var(--vd-typography-headline-section); /* 18pt — slide table body */
line-height: 1.4;
margin: 0;
}
table.vd-slide-table thead tr {
border-bottom: 1pt solid var(--vd-ink);
}
table.vd-slide-table thead th {
font-family: 'Lato', sans-serif;
font-size: var(--vd-typography-deck-page);
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--vd-muted);
text-align: left;
padding: 10pt 16pt 10pt 0;
}
table.vd-slide-table tbody td {
padding: 12pt 16pt 12pt 0;
border-bottom: 0.25pt solid var(--vd-rule-paper);
vertical-align: top;
color: var(--vd-ink);
}
table.vd-slide-table tbody tr:last-child td { border-bottom: none; }
table.vd-slide-table th:first-child,
table.vd-slide-table td:first-child {
font-weight: 600;
width: auto;
}
/* Callout block (single anchor metric or thesis) */
.vd-slide-callout {
padding: 24pt 0 24pt 28pt;
border-left: 4pt solid var(--vd-teal);
}
.vd-slide-callout .vd-callout-label {
font-family: 'Lato', sans-serif;
font-size: var(--vd-typography-caption-strong);
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--vd-teal-text);
padding-bottom: 8pt;
}
.vd-slide-callout .vd-callout-body {
font-size: var(--vd-typography-metric-callout);
line-height: 1.35;
color: var(--vd-ink);
}
.vd-slide-callout .vd-callout-metric {
font-family: 'Lato', sans-serif;
font-size: var(--vd-typography-metric-anchor);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.0;
color: var(--vd-teal-text);
display: block;
padding-bottom: 8pt;
}
/* ============================================================
FOOTER BAND (logomark + page number + confidentiality marking)
Required on every slide except the title slide.
Z2O-1318 (logomark consistency) + Z2O-1319 (confidentiality) enforced here.
============================================================ */
.vd-slide-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: var(--vd-slide-footer-height);
padding: 0 var(--vd-slide-footer-padding-side);
display: flex;
align-items: center;
justify-content: space-between;
font-family: 'Inter', sans-serif;
font-size: var(--vd-typography-body); /* 11pt — print body for footer chrome */
color: var(--vd-muted);
border-top: 0.4pt solid var(--vd-rule-paper);
}
.vd-slide-dark .vd-slide-footer {
color: rgba(255, 255, 255, 0.55);
border-top-color: var(--vd-rule-strong);
}
.vd-slide-footer .vd-slide-logomark-footer {
height: var(--vd-slide-logomark-footer);
width: auto;
display: block;
}
.vd-slide-footer .vd-slide-page-num {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: var(--vd-typography-body);
letter-spacing: 0.08em;
}
.vd-slide-footer .vd-conf-marking {
font-family: 'Lato', sans-serif;
font-size: var(--vd-typography-caption); /* 11pt slide-context (was 9pt literal) */
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
/* Default tier color: PUBLIC. If the marking element omits a tier-specific
class (a producer error), the marking still renders legibly rather than
inheriting the body color, which on dark slides would be near-invisible.
The four tier-specific classes below override this default. */
color: var(--vd-conf-public);
}
.vd-slide-footer .vd-conf-public { color: var(--vd-conf-public); }
/* Tier color routing for slide footers. Light slides use the canonical
.vd-conf-public/.vd-conf-partner/.vd-conf-internal hexes (all pass AA-text
on white) and the customer-on-light variant. Dark slides flip: customer
uses its canonical warm yellow (passes on dark), and partner/internal use
their on-dark variants because their canonicals fail AA on dark
(~2.97:1 / ~2.60:1 respectively).
The dark-context selector list enumerates .vd-slide-dark, .vd-slide-title,
and .vd-slide-close because the latter two declare dark backgrounds inline
without composing .vd-slide-dark. Unifying that markup model is filed as
a follow-up. [Z2O-1385] */
.vd-slide-footer .vd-conf-customer { color: var(--vd-conf-customer-on-light); }
.vd-slide-dark .vd-slide-footer .vd-conf-customer,
.vd-slide-title .vd-slide-footer .vd-conf-customer,
.vd-slide-close .vd-slide-footer .vd-conf-customer { color: var(--vd-conf-customer); }
.vd-slide-footer .vd-conf-partner { color: var(--vd-conf-partner); }
.vd-slide-dark .vd-slide-footer .vd-conf-partner,
.vd-slide-title .vd-slide-footer .vd-conf-partner,
.vd-slide-close .vd-slide-footer .vd-conf-partner { color: var(--vd-conf-partner-on-dark); }
.vd-slide-footer .vd-conf-internal { color: var(--vd-conf-internal); }
.vd-slide-dark .vd-slide-footer .vd-conf-internal,
.vd-slide-title .vd-slide-footer .vd-conf-internal,
.vd-slide-close .vd-slide-footer .vd-conf-internal { color: var(--vd-conf-internal-on-dark); }
/* ============================================================
FIGURES IN SLIDES
Reuse cover.css .vd-figure pattern; slides override sizing.
Figure + caption + credit always travel together; never split.
============================================================ */
.vd-slide figure.vd-figure {
margin: 0;
page-break-inside: avoid;
}
.vd-slide figure.vd-figure img,
.vd-slide figure.vd-figure svg,
.vd-slide figure.vd-figure canvas {
/* Slide is 720px = 540pt tall. Frame top+bottom (112pt) + footer (32pt) =
144pt frame overhead. Headline (~36pt) + deck (~20pt) + rhythm gaps
(~62pt) + caption (~30pt) ~= 150pt. Figure max ~250pt to avoid clipping
when other content is present. Was 480pt (Loop 4); reduced 2026-05-03
after gemini-code-assist review on PR #43 caught the overflow risk. */
max-height: 280pt;
width: 100%;
height: auto;
object-fit: contain;
}
.vd-slide figcaption.vd-figure-caption {
font-size: var(--vd-typography-deck-page);
padding-top: 10pt;
}
.vd-slide figcaption.vd-figure-caption .vd-figure-label {
font-size: var(--vd-typography-caption);
}
.vd-slide .vd-figure-credit {
font-size: var(--vd-typography-micro);
padding-top: 4pt;
}
/* ============================================================
PLACEHOLDER TEMPLATES
.vd-template from cover.css — Z2O-1320 enforcement:
role labels are NOT placeholders; only fields the author must
fill in (customer name, date, anchor metric) get .vd-template.
============================================================ */
/* (Inherits from cover.css; no slide-specific overrides needed.) */
/* ============================================================
CLOSE SLIDE (mirror of title; reverses to dark with teal accent)
============================================================ */
.vd-slide-close {
page: slide-cover;
background: var(--vd-neutral-950);
color: #ffffff;
justify-content: center;
align-items: flex-start;
padding-left: 88pt;
}
.vd-slide-close .vd-slide-eyebrow { color: var(--vd-teal-soft); padding-bottom: 18pt; }
.vd-slide-close h2 {
font-family: 'Lato', sans-serif;
font-size: var(--vd-typography-display-slide-h1);
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.10;
color: rgba(255, 255, 255, 0.96);
margin: 0;
max-width: 1000pt;
}
.vd-slide-close h2 .vd-accent { color: var(--vd-teal); }
.vd-slide-close .vd-slide-cta {
font-size: var(--vd-typography-deck-slide-max); /* 22pt — close-CTA sits between deck-slide and slide-h1 */
line-height: 1.4;
color: rgba(255, 255, 255, 0.78);
padding-top: 28pt;
max-width: 880pt;
}
/* ============================================================
PROJECTION SAFETY
Print-color-adjust ensures backgrounds, alert tints, teal
accents survive PDF export and light-mode projector display.
============================================================ */
.vd-slide,
.vd-slide-footer,
.vd-template,
.vd-slide-callout {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}