/* motif.css — the six primitives that carry a deck's visual identity (B-068). * * WHY THIS FILE EXISTS * Reverse-engineering a real 39-page IR deck showed its identity reduces to a * handful of things repeated on nearly every page: an accent bar left of every * title, a footer rule with a page number, titles pinned to one datum line, * full-bleed accent dividers, borderless cards floating on a shadow ramp, and a * two-state pill. Anything pixel-identical on 30 of 39 pages is a cascade * invariant, not an authoring decision — so it belongs here, bound to the bare * markup an author already writes, instead of being retyped per slide. * * OPT-IN, ALWAYS * Every rule is scoped to `body[data-motif]`. Without that attribute this file * is inert, so the 16 gallery fixtures and every deck already in the wild render * byte-identical after it ships. Turn it on per deck: * * The folio needs its own flag (`data-folio`) because page numbering interacts * with three different export paths — see the FOLIO section. * * NO !important, NO color-mix() * Overrides here beat base.css by specificity alone (`body[data-motif] .slide` * is 0,2,1 vs base's 0,1,0), which keeps deck.css — loaded last, hand-owned, * B-055 — able to win without an escalation war. And color-mix() is banned * system-wide: html2canvas, the in-deck PDF engine, cannot parse it, so all * accent compositing is precomputed into flat hex by theme.css (B-067). * * LOAD ORDER * index.html links this AFTER base.css/diagrams.css and BEFORE theme.css, so a * preset's tokens and a deck's own deck.css both still override it. */ :root { /* Geometry as ratios of the 1920x1080 stage the deck is authored against, so the primitives hold at any viewport. Measured off the reference deck: eyebrow 8x48 next to a 44px title, footer rule at y=1010 spanning x=239..1824, title cap-top pinned at y=90. */ /* Eyebrow: expressed in `em` rather than px BECAUSE the reference deck recurses the same bar at three scales (8x48 beside an H1, 5x30 beside a sub-head, 4x28 beside a column label). All three are ~0.18em wide and ~1.1em tall relative to their own type size, so one em-based rule reproduces the whole recursion instead of three hardcoded pairs. */ --motif-eyebrow-w: 0.18em; --motif-eyebrow-h: 1.1em; --motif-eyebrow-gap: 0.72em; /* B-084: the column the bar HANGS in, and the one thing about the eyebrow that must NOT be em-based. The bar's own size scales with its heading — that is the recursion above and it is right. But the reserve was em-based too, and a reserve that changes with type size cannot be a datum: at 1440 it indented an h1 by 48.96px, an h2 by 30.96px and a column label by a third figure, while every paragraph, card and table on the same slide started at the column edge. Measured on the shipped decks: 0 / 30.95 / 51.83px of heading indent across eight slides — three different left edges on one deck, which is most of what "clumsy" is when nothing is individually wrong. (B-109: a fourth figure, 348.15px, was listed here and does not belong. Re-measured on the parent commit at every stage width: the first three reproduce to the digit, the fourth does not appear on either deck at any width — it was a centred `.arch-statement` heading's offset, which is a centring result and not an indent.) Fixed here, hung there, and the content column reserves it once for everything inside it. */ --motif-eyebrow-col: 25.6px; /* Footer: the rule sits 6.5% above the stage floor, and its ends line up with the content column above it. B-084: this used to be the literal `12.45%`, described as "the reference deck's 239/1824 span (12.45% each side)". The reference span was not symmetric — 239 on the left, a different figure on the right — and one side's value got written to both. The deeper problem is that the two edges are measured in different coordinate systems: a percentage here resolves against the STAGE, while the column above resolves as a capped `min(1200px, 90vw)` (base.css `.slide-content`) inside the slide's padding. They can only agree at one viewport width, and they did: measured 59px apart at 1440 and 121px the other way at 1920, so the hairline ran short of the text on one screen and past it on the next. Derived instead. `50%` is half the stage (the ::after's containing block is the slide's padding box), the `min(...)` is half the column, and the `max` floor is the slide padding, which is where the column lands once the cap stops binding. (This paragraph once ended "hand-coupled to two literals in base.css" — B-113 retired that: both sites now read `--content-max` / `--content-share` from tokens.css.) B-111 moved it twice. First when the column stopped being a px cap and became a share of the stage; then again because the first move got the REFERENCE BOX wrong, which is the same mistake in a new place. The column's `92%` resolves against `.slide`'s CONTENT box (stage minus its padding, twice), while a percentage here resolves against `.slide`'s PADDING box (the whole stage) — the `::after`'s containing block. Writing `46%` in both spots therefore made two different numbers: measured 88% of the stage for the hairline against 81% for the column, a 7-point mismatch that puts the rule's ends past the text on every screen. Derived properly now: the column's left edge is `padding + (stage - 2*padding - W)/2`, which simplifies to `stage/2 - W/2`, so this is exactly half the stage minus half the column — and half the column has to be measured in the column's own box. B-113: the halves now read the SAME tokens the column reads (`--content-max` / `--content-share`, tokens.css) instead of restating them as literals — `900px` was `--content-max`/2 and `0.46` was `--content-share`/2 by hand. A bundle that narrows the column via `composition.contentShare` moves this inset with it for free. */ --motif-footer-bottom: 6.5%; --motif-footer-inset: calc(50% - min(var(--content-max) / 2, (100% - 2 * var(--slide-padding)) * var(--content-share) / 2)); --motif-footer-rule: 1px; /* Room the footer band needs kept clear of content. Expressed in vh because it is reserved as padding on `.slide-content`, where a percentage would resolve against WIDTH. Covers the rule's offset plus the folio line beneath it. */ --motif-footer-reserve: 88px; /* Neutral elevation ramp. Neutral on purpose: the reference deck never tints a shadow with the accent, and an accent-tinted shadow is the single fastest way to make a deck read as generated. */ --motif-elev-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.10); --motif-elev-2: 0 4px 6px rgba(15, 23, 42, 0.05), 0 10px 15px rgba(15, 23, 42, 0.10); --motif-elev-3: 0 10px 15px rgba(15, 23, 42, 0.04), 0 20px 25px rgba(15, 23, 42, 0.10); --motif-elev-4: 0 20px 25px rgba(15, 23, 42, 0.06), 0 25px 50px rgba(15, 23, 42, 0.16); } [data-theme="dark"] { /* On a near-black page a slate-tinted shadow is invisible; the ramp has to go to real black and lean harder, or "elevation" reads as nothing at all. */ --motif-elev-1: 0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.50); --motif-elev-2: 0 4px 6px rgba(0, 0, 0, 0.45), 0 10px 15px rgba(0, 0, 0, 0.55); --motif-elev-3: 0 10px 15px rgba(0, 0, 0, 0.45), 0 20px 25px rgba(0, 0, 0, 0.60); --motif-elev-4: 0 20px 25px rgba(0, 0, 0, 0.50), 0 25px 50px rgba(0, 0, 0, 0.70); } /* ── 1. Accent eyebrow bar ───────────────────────────────────────────────── Binds to bare headings. `h1::before` is free in the shared layer (measured on a scaffolded deck: computed `content` is `none`), unlike `.slide::before` which the atmosphere backdrop already owns (base.css:66-73). */ /* base.css:239 colours `h1, h2, h3` with `var(--primary)`, so the neutral-title rule has to cover h3 as well — otherwise card headings stay `primary` red while the bar and pills are `accent` blue (seen in the light theme on corporate-slate: red card titles beside a blue accent). h3 gets the neutral colour but no bar: the reference deck reserves the eyebrow for slide- and column-level headings, not for every card title, which would turn the motif into noise. */ body[data-motif] .slide h3 { color: var(--fg); } body[data-motif] .slide h1, body[data-motif] .slide h2, body[data-motif] .slide .col-label { position: relative; /* The accent lives in the BAR, not in the words. base.css:239 sets `h1,h2,h3 { color: var(--primary) }`, and a preset whose `primary` differs in hue from its `accent` then renders a red title beside a blue bar — measured on corporate-slate in the light theme (title #d90429, bar #2b6cb0). The reference deck sets titles in the neutral foreground for exactly this reason: one accent per slide, and it is the bar. --fg against --bg is the pair the contrast gate already guarantees. */ color: var(--fg); } /* B-084: the column is reserved HERE, on the content box, not on each heading. The earlier note said hanging the bar was impossible because `.slide-content` is `overflow: hidden` and clipped it — true of a bar hung outside that box, and that is not what this does. The reserve is `.slide-content`'s own padding, so the bar hangs into the element's PADDING box, which `overflow: hidden` does not clip. Every block inside then shares one left edge, and the bar is the only thing left of it. */ body[data-motif] .slide > .slide-content { padding-left: var(--motif-eyebrow-col); } /* Wherever the bar is off, the reserve is off with it — an empty gutter on a centred statement is the indent defect wearing different clothes. Both of these used to be `h1, h2 { padding-left: 0 }`, which became dead the moment the reserve moved; the exemption follows the reserve rather than being left behind pointing at a declaration that is no longer there. B-109: the third selector is the one that matters off the gallery. The rule that turns the BAR off (`.arch-statement h1::before`, below) is a DESCENDANT selector, so it fires wherever `.arch-statement` sits. The reserve exemption was written as a compound — `.slide-content.arch-statement` — which only matches the two gallery decks, where the class happens to be on the content box itself. The archetype an author actually copies (`_templates/archetypes/statement.html`) nests `.arch-statement` INSIDE `.slide-content`, so on that markup the bar went off and the 25.6px reserve stayed: a centred statement with an empty gutter, which is the exact defect this block exists to prevent. Two selectors describing one condition have to agree on what the condition is. */ body[data-motif] .slide[data-kind="divider"] > .slide-content, body[data-motif] .slide > .slide-content.arch-statement, body[data-motif] .slide > .slide-content:has(> .arch-statement) { padding-left: 0; } /* A column label lives INSIDE a column, so its bar keeps the old indent: hung, it would land in the gutter between two columns (or off the stage for the first), which is a different alignment question from the slide's own left datum. */ body[data-motif] .slide .col-label { padding-left: calc(var(--motif-eyebrow-w) + var(--motif-eyebrow-gap)); } body[data-motif] .slide h1::before, body[data-motif] .slide h2::before, body[data-motif] .slide .col-label::before { content: ""; position: absolute; left: calc(-1 * var(--motif-eyebrow-col)); top: 0.12em; width: var(--motif-eyebrow-w); height: var(--motif-eyebrow-h); background: var(--accent); } body[data-motif] .slide .col-label::before { left: 0; } /* An author who does not want the bar on one heading opts that heading out rather than fighting the cascade. */ body[data-motif] .slide [data-eyebrow="off"]::before { content: none; } /* ── 2. Top-pinned title datum ───────────────────────────────────────────── base.css centres every slide vertically (`.slide{justify-content:center}` :49, `.slide-content{justify-content:center}` :214-236), so titles shift line by line as content changes — measured at y=617 on a one-line deck. The reference deck pins the title cap-top to one datum on every content page, which is what makes flipping through it feel still. */ body[data-motif] .slide[data-align="top"], body[data-motif] .slide[data-align="top"] .slide-content { justify-content: flex-start; } /* WITHDRAWN: `data-align="spread"`. It was meant to turn the void at the bottom of a light slide into deliberate space between the title and the footer. A review A/B-ed it against plain top-alignment and measured what it actually did: every spread slide in a real deck had exactly TWO children (a title and one block), so `space-between` had nothing to distribute and could only inflate the single seam between a claim and its own evidence — 393px on a stat row, 314px on a timeline, up to 59% of the stage — while parking the block flush against the footer band where it read as a footnote. Space BELOW content reads as a poster margin; space between a claim and its proof reads as a missing element. Removed rather than tuned: a primitive that needs a child-count and a fill-ratio condition to be safe is not a primitive. */ /* ── 3. Full-bleed accent divider ────────────────────────────────────────── The loudest gesture in the reference deck and the thing that makes a chapter start unmistakable: accent edge to edge, chrome gone, lockup centred, excluded from page numbering. --accent-field / --on-accent are measured to clear 4.5:1 against each other (B-067) — the field moves if no text colour can. */ body[data-motif] .slide[data-kind="divider"] { background: var(--accent-field); color: var(--on-accent); justify-content: center; text-align: center; } body[data-motif] .slide[data-kind="divider"] .slide-content { justify-content: center; } body[data-motif] .slide[data-kind="divider"] h1, body[data-motif] .slide[data-kind="divider"] h2, body[data-motif] .slide[data-kind="divider"] p { color: var(--on-accent); } /* No eyebrow on a divider, and no reserved column for it. The plan said to recolour the bar to --on-accent here so "the motif still reads". Rendering it settled the question the other way: a divider title is centred, while the bar anchors to the left edge of the heading block, so the bar ends up marooned ~500px from the words — and the reserved padding also pushes the centred text off the stage's true centre by ~0.9em. The reference deck's dividers carry no bar either; the full accent field IS the gesture. */ body[data-motif] .slide[data-kind="divider"] h1::before, body[data-motif] .slide[data-kind="divider"] h2::before { content: none; } /* Same reasoning wherever a heading is CENTRED rather than left-aligned: the bar anchors to the left edge of the heading block, so on a centred statement slide it hangs off on its own, disconnected from the words. The archetype that centres its type opts out of the bar the way a divider does. */ body[data-motif] .arch-statement h1::before, body[data-motif] .arch-statement h2::before, body[data-motif] .arch-cover .arch-band .arch-label::before { content: none; } /* The deck-global atmosphere backdrop would wash a gradient over the field. */ body[data-motif] .slide[data-kind="divider"]::before { display: none; } /* Deck chrome is fixed-position and deck-global (base.css .brand-mark/.nav-dots/ .deck-progress), so there is no per-slide hook. `:has()` gives one: when the ACTIVE slide is a divider, stand the chrome down. Screen-only concern — every export path already hides chrome (base.css body.pdf-capture, print.css). */ body[data-motif]:has(.slide[data-kind="divider"][data-active="true"]) .brand-mark, body[data-motif]:has(.slide[data-kind="divider"][data-active="true"]) .nav-dots, body[data-motif]:has(.slide[data-kind="divider"][data-active="true"]) .deck-progress { opacity: 0; pointer-events: none; } /* ── 4. Borderless card on a shadow ramp ─────────────────────────────────── The reference deck has no card border anywhere in 39 pages: separation comes from elevation alone. */ body[data-motif] .card, body[data-motif] .cov-card, body[data-motif] .data-card { border: 0; box-shadow: var(--motif-elev-2); } body[data-motif] .card[data-elev="1"] { box-shadow: var(--motif-elev-1); } body[data-motif] .card[data-elev="3"] { box-shadow: var(--motif-elev-3); } body[data-motif] .card[data-elev="4"] { box-shadow: var(--motif-elev-4); } /* ── 5. Solid pill ──────────────────────────────────────────────────────── Completes the two-state grammar the reference deck uses for status: an outline pill for "declared", a solid accent pill for "true now". */ body[data-motif] .pill.solid, body[data-motif] .tag.solid { background: var(--accent-field); color: var(--on-accent); border-color: transparent; } /* ── 6. FOLIO + footer rule ──────────────────────────────────────────────── One pseudo-element carries both halves of the footer: `border-top` draws the hairline, `content: counter(folio)` sets the page number under its right end. `.slide::after` is free (measured: computed `content` is `none`). Gated on `data-folio` SEPARATELY from `data-motif` because page numbering has three different owners across the outputs, and only one number may appear in each: - on screen ......... `.deck-counter` inside .deck-controls (a real control: navigation.js makes it a role=button that jumps to slide 1). B-084: this used to say the counter was "left alone" because "the folio is additive" — which contradicts the sentence three lines above it, and the screen showed the contradiction: a `data-folio` deck painted TWO page numbers, 36px apart, reading DIFFERENT values (folio "3" beside counter "4 / 8", because dividers and covers leave the folio sequence and the counter's raw index does not). The folio is not additive to the counter; it replaces it. The suppressor is at the end of this section. - html2canvas PDF ... pdf.js stamps `n / total` with jsPDF after the raster. The suppressor for THIS path lives in base.css next to the other body.pdf-capture rules — exactly one suppressor, because suppressing in both CSS and JS would leave the raster PDF with no number at all and no gate would catch it. - Playwright export . B-109: this said "has no page number today", and that is false. `render-deck.ts` hides the deck chrome but never adds `body.pdf-capture` and never emulates print, so `.slide::after` renders with `content: counter(folio)` and the folio is in every exported frame — which is the right outcome, just not the one written here. What remains true is the warning: opting anything in there must NOT be done by adding body.pdf-capture, which un-stacks the absolutely positioned slides that export's activation loop needs. `counter-reset` sits on `body`, NOT `#deck`: the mobile export path clones `.slide` nodes straight into an iframe `` with no `#deck` wrapper, so a `#deck`-scoped reset would silently not apply there. */ body[data-folio] { counter-reset: folio; } body[data-folio] .slide { counter-increment: folio; } /* Keep content out of the footer band. Round one had content painting OVER the folio; giving `.slide::after` a z-index fixed that and then `data-align="spread"` pushed the last block INTO the band, so the hairline ran through stat captions and across cards — the same defect mirrored. A deck that shows a footer has to reserve room for it, exactly as the reference deck stops its content above the rule. */ body[data-folio] .slide > .slide-content { padding-bottom: var(--motif-footer-reserve); } /* The folio and the deck's control pill both want the bottom-right corner, and on a short stage the pill descends into the footer band and swallows the digit: measured 1.48:1 (light) / 1.55:1 (dark) as painted at 1280x600 and 900x600, against 5.10 / 4.83:1 for the same pixels with the chrome hidden. Below AA from 640px of viewport height down, on every numbered slide, in both themes. No ancestor-composite contrast scan can see this — the occluder is a fixed SIBLING, not an ancestor background — which is why it survived three review rounds. Rather than fight a z-index war with the chrome, move the digit to the other end of the rule at exactly the heights where the two collide. */ /* A divider and a cover carry no footer, so they keep the full stage. */ body[data-folio] .slide[data-kind="divider"] > .slide-content, body[data-folio] .slide[data-kind="cover"] > .slide-content { padding-bottom: 0; } body[data-folio] .slide::after { content: counter(folio); position: absolute; /* Asymmetric on purpose: the left end lands on the TEXT datum, which is the content column plus the eyebrow reserve, while the right end is the column edge. The old single symmetric token was one side's number copied to both. */ left: calc(var(--motif-footer-inset) + var(--motif-eyebrow-col)); right: var(--motif-footer-inset); bottom: var(--motif-footer-bottom); border-top: var(--motif-footer-rule) solid var(--accent); padding-top: 0.5rem; text-align: right; font-size: var(--small-size); font-weight: 600; /* --fg, not --accent-text. The accent-text token is derived against the FLAT --bg, but every slide paints an atmosphere gradient over that, and on the presets with a strong backdrop the folio measured 2.66-2.85:1 where it actually sits. --fg is the pair the live render gate already validates on this exact background, and keeping the accent in the hairline alone matches the layer's own rule: one accent per slide, and it is the bar. */ color: var(--fg); /* Must not start transparent: the Playwright export neutralises reveal animations by targeting `.slide > *`, which never matches a pseudo-element, so an opacity-0 default here would never be turned back on. */ opacity: 1; /* Above the content. `.slide-content` carries `z-index: 1` while a pseudo-element defaults to `auto`, so a full-width panel painted over the footer band: on a chart-panel slide the hairline stopped at x=678 and the folio digit was covered entirely (pixel-scanned: 500 accent px on that slide vs 1082 on its neighbour). Deck furniture belongs on top of the stage, not under it. */ z-index: 2; } /* Move the digit to the other end of the rule at exactly the heights where it collides with the control pill. ROUND 5 CORRECTION: this rule shipped BEFORE the block above, at equal specificity, so `text-align: right` won every time and the mitigation never once applied. The review measured the consequence on the real deck — 90% of the glyph painted at 1.00:1 at 1280x600, 100% at 1280x560 — while a ratio-only scan read the surviving antialiased sliver at ~9:1 and called it clean. Two things worth keeping from that: a fix whose only evidence is a colour measurement can hide a geometry that never moved, and source order is part of a rule's meaning whenever specificity ties. */ /* B-109: unconditional, and it used to be `@media (max-height: 700px)`. The collision is not a short-stage phenomenon: `.deck-controls` sits at `bottom: 2vmin` (base.css) while the folio band sits at 6.5% of the stage, so the two are different functions of the viewport and they cross. The number that matters is INK, not boxes: a box-intersection sweep says five of six sizes overlap, but the `::after` box spans the whole column, so most of that overlap is empty. Measured instead by differencing two screenshots that differ only in `color: transparent` on the folio — geometry identical, so background, hairline and chrome all cancel and what remains is the digit's own pixels: viewport right-aligned left-aligned 1280x720 22px ink 34px ink 1024x700 20px 35px 900x650 13px 30px 1440x810 39px 39px (boxes overlap, glyph clears by 3px) 1920x1080 43px 40px The missing pixels are not missing from the diff by accident — they are the ones the pill paints over, identical in both shots and therefore invisible to it. Nearly 60% of the digit is gone at 900x650. The 700px band covered two of the three affected sizes; a taller band would just move the crossing point. Moving the CHROME instead was tried and measured: lifting it clear of the folio band puts it on the nav rail, and ci-validate-chrome.mjs failed it at four viewports (`dot 17 hits aside.deck-controls`). The bottom-right corner has two occupants and only one of them can leave, so the digit takes the other end of its own rule — where the left end already lands on the text datum, and where nothing else lives. */ body[data-folio] .slide::after { text-align: left; } /* A divider is outside the page sequence in the reference deck — no number, no rule, and the count does not advance past it. A COVER is outside it too: dogfooding a real deck put a folio "1" under the title slide, which no deck of this kind carries. Mark a cover with `data-kind="cover"` (the cover fragment does) and it drops out of the sequence the same way, so the first content slide reads 1. */ body[data-folio] .slide[data-kind="divider"], body[data-folio] .slide[data-kind="cover"] { counter-increment: none; } body[data-folio] .slide[data-kind="divider"]::after, body[data-folio] .slide[data-kind="cover"]::after { content: none; } /* B-084: the screen's other page number stands down when the folio is on. Two numbers in the bottom-right that disagree is worse than either alone, and the folio is the one that counts the way the printed reference does. Specificity (0,3,1) beats `.deck-counter` (0,2,0) on its own, so no `!important` — a deck that wants the counter back turns `data-folio` off, which is the same switch that put the folio there. The counter keeps its role=button semantics for every deck that does not opt into folios; only `data-folio` decks lose it, and there the folio itself is not a control, so nothing gains a dead affordance. */ body[data-folio] .deck-controls .deck-counter { display: none; } /* Reduced motion: nothing here animates, but the divider chrome fade above is a transition on .brand-mark et al (base.css). Respect the user's setting by making the stand-down instant rather than eased. */ @media (prefers-reduced-motion: reduce) { body[data-motif]:has(.slide[data-kind="divider"][data-active="true"]) .brand-mark, body[data-motif]:has(.slide[data-kind="divider"][data-active="true"]) .nav-dots, body[data-motif]:has(.slide[data-kind="divider"][data-active="true"]) .deck-progress { transition: none; } }