@hypersocial/decks-cli 0.9.8 → 0.9.10

package/templates/layouts/_deck.html

@@ -55,20 +55,26 @@
     --font: "Space Grotesk", system-ui, sans-serif; --mono: "Space Mono", ui-monospace, monospace;
     /* The type scale: one display size per slide at most, then title, sub (a title beside a visual), lead, body, label. */
     --t-display: 128px; --t-title: 84px; --t-sub: 56px; --t-lead: 30px; --t-body: 24px; --t-label: 17px;
+    /* The text colour on an accent ground. A brand with a dark accent sets it to its paper. */
+    --accent-ink: var(--ink);
     --hd-ground: var(--accent); --hd-ground-ink: var(--ink); /* the loading state: the first slide's colours */
     /* Soft grounds (on-tint, on-tint-2, on-tint-3): washes of the accents, so slide changes read without going loud. */
     --tint-1: color-mix(in srgb, var(--accent) 18%, var(--paper)); --tint-2: color-mix(in srgb, var(--accent-2) 20%, var(--paper)); --tint-3: color-mix(in srgb, var(--accent-3, var(--accent)) 24%, var(--paper));
   }
   * { box-sizing: border-box; margin: 0; padding: 0; }
   body { color: var(--ink); font-family: var(--font); font-weight: 500; -webkit-font-smoothing: antialiased; --hd-font: var(--font); --hd-mono: var(--mono); }
-  .slide { display: flex; flex-direction: column; gap: 24px; padding: 64px 72px 56px; background: var(--paper); color: var(--ink); --hd-speech: #f3c9dc; }
-  .slide.on-accent { background: var(--accent); --hd-speech: var(--card); }
+  /* The caption bubble is always a fixed light fill with dark ink, so it reads whatever the
+     brand's --card or --ink (a dark brand's card is dark). A slide can still set its own. */
+  .slide { display: flex; flex-direction: column; gap: 24px; padding: 64px 72px 56px; background: var(--paper); color: var(--ink); --hd-speech: #f3c9dc; --hd-speech-ink: #0b0b0f; }
+  .slide.on-accent { background: var(--accent); color: var(--accent-ink); --hd-speech: #ffffff; }
   .slide.on-ink { background: var(--ink); color: var(--paper); --hd-speech: #d9ccff; }
-  .slide.on-tint { background: var(--tint-1); --hd-speech: var(--card); }
-  .slide.on-tint-2 { background: var(--tint-2); --hd-speech: var(--card); }
-  .slide.on-tint-3 { background: var(--tint-3); --hd-speech: var(--card); }
+  .slide.on-tint { background: var(--tint-1); --hd-speech: #ffffff; }
+  .slide.on-tint-2 { background: var(--tint-2); --hd-speech: #ffffff; }
+  .slide.on-tint-3 { background: var(--tint-3); --hd-speech: #ffffff; }
   .kicker { font: var(--t-label) var(--mono); letter-spacing: .16em; text-transform: uppercase; }
-  .tt { font-family: var(--display, var(--font)); font-weight: 700; font-size: var(--t-title); line-height: .95; letter-spacing: -.045em; text-wrap: balance; }
+  /* Titles take the display face's weight and tracking (brand.mjs sets them for a face the
+     template was not tuned for) and never fake a weight the face lacks. */
+  .tt { font-family: var(--display, var(--font)); font-weight: var(--display-weight, 700); font-synthesis: none; font-size: var(--t-title); line-height: .95; letter-spacing: var(--display-tracking, -.045em); text-wrap: balance; }
   .lead { font-size: var(--t-lead); line-height: 1.3; max-width: 28em; text-wrap: pretty; }
   .muted { opacity: .65; }
   /* The presenter glides to each slide's slot: bottom-right by default,
@@ -98,26 +104,57 @@
       linear-gradient(color-mix(in srgb, var(--ink) 14%, transparent) 0 0) 14% 67% / 44% 2.4% no-repeat,
       linear-gradient(var(--accent) 0 0) 50% 90% / 84% 6% no-repeat,
       var(--paper); }
-  /* Backgrounds, optional and for a few slides a deck. bg-dots on the section:
-     a dot grid in the slide's text colour, faded in from the side away from the text
-     (--dots-fade is the fade's direction: 90deg puts the dots on the right,
-     270deg on the left). A <div class="deco" aria-hidden="true"> in the slide
-     holds small inked tiles, each a <span> placed by its inline left/top (and
-     background, rotate). Both sit behind the slide's content. */
-  .slide.bg-dots, .slide:has(> .deco) { isolation: isolate; }
-  .slide.bg-dots::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(color-mix(in srgb, currentColor 24%, transparent) 3px, transparent 3.6px) 0 0 / 36px 36px; -webkit-mask-image: linear-gradient(var(--dots-fade, 90deg), transparent 40%, #000 80%); mask-image: linear-gradient(var(--dots-fade, 90deg), transparent 40%, #000 80%); }
+  /* Decorations: a <div class="deco" aria-hidden="true"> in the slide holds small
+     inked tiles, each a <span> placed by its inline left/top (and background, rotate),
+     behind the slide's content. */
+  .slide:has(> .deco) { isolation: isolate; }
   .slide > .deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
   .slide > .deco > span { position: absolute; display: grid; place-items: center; width: 80px; height: 80px; border: 3px solid var(--ink); border-radius: 20px; background: var(--card); box-shadow: 8px 8px 0 var(--ink); color: var(--ink); font: 700 34px var(--font); }
-  /* The look kit (deck_guide topic look): one texture per deck, one icon set, real pictures.
-     Textures go on the section, behind the content, on a few slides: bg-lines, diagonal
-     speed lines fading out towards the text (--fade-at: where they are strongest, default
-     the right); bg-halftone, a corner of halftone dots (--fade-at, default top right);
-     bg-rays, rays from a point (--rays-at), for an opener or a closer. */
-  .slide:is(.bg-lines, .bg-halftone, .bg-rays) { isolation: isolate; overflow: hidden; }
-  .slide:is(.bg-lines, .bg-halftone, .bg-rays)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
-  .slide.bg-lines::before { background: repeating-linear-gradient(-22deg, transparent 0 30px, color-mix(in srgb, currentColor 10%, transparent) 30px 32px); -webkit-mask-image: radial-gradient(1000px 780px at var(--fade-at, 82% 52%), #000 12%, transparent 70%); mask-image: radial-gradient(1000px 780px at var(--fade-at, 82% 52%), #000 12%, transparent 70%); }
-  .slide.bg-halftone::before { background: radial-gradient(color-mix(in srgb, currentColor 22%, transparent) 2.6px, transparent 3px) 0 0 / 22px 22px; -webkit-mask-image: radial-gradient(640px 640px at var(--fade-at, 88% 14%), #000 25%, transparent 70%); mask-image: radial-gradient(640px 640px at var(--fade-at, 88% 14%), #000 25%, transparent 70%); }
-  .slide.bg-rays::before { background: repeating-conic-gradient(from 0deg at var(--rays-at, 72% 50%), color-mix(in srgb, currentColor 9%, transparent) 0deg 2.2deg, transparent 2.2deg 9deg); -webkit-mask-image: radial-gradient(circle at var(--rays-at, 72% 50%), transparent 10%, #000 45%); mask-image: radial-gradient(circle at var(--rays-at, 72% 50%), transparent 10%, #000 45%); }
+  /* Backgrounds (deck_guide topic look). Four classes on the section, tokens only, each painted
+     behind the content (a ::before at z-index -1 in an isolated slide) and confined to the object
+     it backs, never under the text. Each carries its own per-layout rules (.l-<layout>.bg-<name>),
+     so on a layout with nothing to back it paints nothing. Plain grounds come first; one signature
+     (bg-corner or bg-mark) per deck on three slides at most; bg-pool and bg-stage only on a slide
+     with a picture. A deck may add its own in its <style> under the same contract. */
+  .slide:is(.bg-pool, .bg-corner, .bg-stage, .bg-mark) { isolation: isolate; overflow: hidden; }
+  .slide:is(.bg-pool, .bg-corner, .bg-stage, .bg-mark)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
+  /* bg-pool: one soft light of the next accent (accent-2 on paper, accent on a tint, a screened
+     accent-3 on an accent ground, accent on ink), placed per layout as the spotlight of the picture. */
+  .slide.bg-pool { --pool: color-mix(in srgb, var(--accent-2) 34%, transparent); }
+  .slide:is(.on-tint, .on-tint-2, .on-tint-3).bg-pool { --pool: color-mix(in srgb, var(--accent) 38%, transparent); }
+  .slide.on-accent.bg-pool { --pool: color-mix(in srgb, var(--accent-3, var(--accent-2)) 55%, transparent); }
+  .slide.on-accent.bg-pool::before { mix-blend-mode: screen; }
+  .slide.on-ink.bg-pool { --pool: color-mix(in srgb, var(--accent) 32%, transparent); }
+  .slide.bg-pool::before { background: radial-gradient(var(--pw, 760px) var(--ph, 600px) at var(--px, 82%) var(--py, 28%), var(--pool), transparent 70%); }
+  .l-hero.bg-pool { --px: 82%; --py: 28%; --pw: 760px; --ph: 600px; }
+  .l-split.bg-pool { --px: 73%; --py: 50%; --pw: 900px; --ph: 860px; }
+  .l-product.bg-pool { --px: 34%; --py: 50%; --pw: 1180px; --ph: 860px; }
+  .l-phones.bg-pool { --px: 68%; --py: 50%; --pw: 900px; --ph: 760px; }
+  .l-chart.bg-pool { --px: 84%; --py: 40%; --pw: 640px; --ph: 520px; }
+  .l-quote.bg-pool { --px: 10%; --py: 14%; --pw: 760px; --ph: 560px; }
+  .l-closer.bg-pool { --px: 90%; --py: 4%; --pw: 820px; --ph: 640px; }
+  /* bg-corner: a hard-edged quarter-disc of halftone, top-right, behind the stickers. A signature: cover, closer. */
+  .slide.bg-corner::before {
+    --corner-r: 580px; --corner-dot: color-mix(in srgb, currentColor var(--corner-a, 15%), transparent);
+    inset: auto; right: 0; top: 0; width: var(--corner-r); height: var(--corner-r); border-bottom-left-radius: 100%;
+    background: radial-gradient(var(--corner-dot) 2.8px, transparent 3.3px) 0 0 / 20px 20px;
+    -webkit-mask-image: radial-gradient(circle at 100% 0, #000 45%, rgba(0,0,0,.4) 100%); mask-image: radial-gradient(circle at 100% 0, #000 45%, rgba(0,0,0,.4) 100%); }
+  .l-closer.bg-corner::before { --corner-r: 460px; }
+  .on-ink.bg-corner::before { --corner-a: 22%; }
+  :is(.l-split, .l-product, .l-chart, .l-quote, .l-number, .l-features, .l-team, .l-timeline, .l-compare).bg-corner::before { content: none; }
+  /* bg-stage: a rounded dot plate exactly the picture's column plus 32px, so the frame or the phones stand on it; on the hero a tile behind the stickers. */
+  .slide.bg-stage::before { inset: auto; background: radial-gradient(color-mix(in srgb, currentColor var(--stage-a, 24%), transparent) 2.4px, transparent 2.9px) 0 0 / 22px 22px; border-radius: 40px; }
+  .l-product.bg-stage::before { position: relative; grid-area: frame; align-self: stretch; margin: var(--stage-m, -32px -24px -32px -40px); }
+  .l-phones.bg-stage::before { position: relative; grid-area: row; align-self: stretch; margin: var(--stage-m, -32px); }
+  .l-hero.bg-stage::before { right: 110px; top: 110px; width: 410px; height: 350px; }
+  :is(.l-split, .l-chart, .l-quote, .l-closer, .l-number, .l-features, .l-team, .l-timeline, .l-compare).bg-stage::before { content: none; }
+  /* bg-mark: the slide number, set as style="--mark:'04'" on the section, huge in --display, faint,
+     cropped by the top edge; right on the hero, in the indent on slot-left slides. A signature: cover, an opener, closer. */
+  .slide.bg-mark::before { content: var(--mark, ""); inset: auto; right: 24px; top: -.26em; font: var(--display-weight, 700) var(--mark-size, 560px)/1 var(--display, var(--font)); font-synthesis: none; letter-spacing: var(--display-tracking, -.05em); white-space: nowrap;
+    color: color-mix(in srgb, currentColor var(--mark-a, 8%), transparent); }
+  .slide.on-ink.bg-mark::before { --mark-a: 6%; }
+  .slide.slot-left.bg-mark::before { right: auto; left: -.08em; font-size: var(--mark-size, 440px); } /* ends inside the 500px indent, clear of the title */
+  :is(.l-split, .l-product, .l-chart, .l-phones, .l-number, .l-features, .l-team, .l-timeline, .l-compare).bg-mark::before { content: none; }
   /* Pieces. .sticker: a logo or icon tile, tilted (--tilt), ink edge, hard offset
      shadow (.sticker.photo for a face or an app icon that fills it). .ticks: a short
      list with accent-square bullets. .panel: a quiet card. .pill: a small tag. */
@@ -128,10 +165,10 @@
   .ticks { list-style: none; display: flex; flex-direction: column; gap: 14px; }
   .ticks li { position: relative; padding-left: 34px; font-size: var(--t-body); line-height: 1.3; font-weight: 600; }
   .ticks li::before { content: ""; position: absolute; left: 0; top: .4em; width: 16px; height: 16px; border-radius: 5px; background: var(--accent); }
-  .on-accent .ticks li::before { background: var(--ink); }
+  .on-accent .ticks li::before { background: var(--accent-ink); }
   .panel { padding: 24px 28px; border-radius: 22px; background: color-mix(in srgb, currentColor 6%, transparent); }
   .pill { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 8px 16px; border-radius: 999px; background: var(--card); color: var(--ink); font: 700 var(--t-label) var(--mono); letter-spacing: .08em; text-transform: uppercase; box-shadow: 4px 4px 0 var(--accent); }
-  .on-accent .pill { box-shadow: 4px 4px 0 var(--ink); }
+  .on-accent .pill { box-shadow: 4px 4px 0 var(--accent-ink); }
   /* A laptop for a desktop screenshot or clip: a .frame.laptop holding an img.shot or video.shot. */
   .slide .frame.laptop { position: relative; width: 860px; max-width: 100%; padding: 14px 14px 22px; border-radius: 20px 20px 6px 6px; background: #1a1a1d; box-shadow: 0 30px 70px color-mix(in srgb, var(--ink) 22%, transparent); }
   .slide .frame.laptop::after { content: ""; position: absolute; left: -6%; right: -6%; bottom: -16px; height: 16px; border-radius: 0 0 16px 16px; background: linear-gradient(#d9d9de, #a9a9b0); }
@@ -145,12 +182,12 @@
     :root.hd-no-presenter .slide { padding-bottom: 28px; }
     .slide .frame.card { width: 160px; padding: 5px; border-width: 2px; border-radius: 24px; box-shadow: 8px 8px 0 var(--shadow); }
     .slide .frame.card > .shot { border-radius: 19px; border-width: 1px; }
-    /* The text fills the card's width: the dots fade in towards the bottom, and the tiles stay off. */
-    .slide.bg-dots::before { background-size: 22px 22px; background-image: radial-gradient(color-mix(in srgb, currentColor 24%, transparent) 2px, transparent 2.5px); -webkit-mask-image: linear-gradient(180deg, transparent 45%, #000 85%); mask-image: linear-gradient(180deg, transparent 45%, #000 85%); }
+    /* The text fills the card's width, so the backgrounds keep off it: the corner fades in
+       towards the bottom, under the presenter, at a finer pitch; the stage and the mark hide;
+       the pool (a soft light) stays as it is; the tiles stay off. */
+    .slide.bg-corner::before { inset: 0; width: auto; height: auto; border-radius: 0; background-size: 14px 14px; background-image: radial-gradient(var(--corner-dot) 1.6px, transparent 2px); -webkit-mask-image: linear-gradient(180deg, transparent 40%, #000 90%); mask-image: linear-gradient(180deg, transparent 40%, #000 90%); }
+    .slide:is(.bg-stage, .bg-mark)::before { content: none; }
     .slide > .deco { display: none; }
-    /* Textures fade in towards the bottom, under the presenter, away from the text. */
-    .slide:is(.bg-lines, .bg-halftone)::before { -webkit-mask-image: linear-gradient(180deg, transparent 40%, #000 90%); mask-image: linear-gradient(180deg, transparent 40%, #000 90%); }
-    .slide.bg-halftone::before { background-size: 14px 14px; background-image: radial-gradient(color-mix(in srgb, currentColor 22%, transparent) 1.6px, transparent 2px); }
     .sticker { width: 48px; height: 48px; padding: 9px; border-width: 2px; border-radius: 13px; box-shadow: 3px 3px 0 var(--ink); }
     .ticks { gap: 6px; }
     .ticks li { padding-left: 18px; }
@@ -175,7 +212,9 @@
 
 <!-- `hyperdecks narrate decks/__SLUG__` fills data-manifest with the manifest
      URL it writes. data-presenter: head (live Minimoji, needs data-avatar),
-     static (data-presenter-image) or none (captions only). -->
+     static (data-presenter-image) or none (captions only). deck new, deck
+     narrator and narrate write the narrator's face here
+     (data-presenter-from="narrator", so release follows a later narrator). -->
 <script type="module" src="https://hyperdecks.ai/player/v1/player.js"
         data-manifest="" data-stage="1600x900" data-presenter="none" data-presenter-style="__PRESENTER_STYLE__"></script>
 </body>

package/templates/layouts/closer.html

@@ -11,7 +11,7 @@ script: That's it. [go: #__ID__-cta] Here is the one thing to do next. Thanks [g
 <style>
   .l-closer .content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 32px; padding-left: 500px; }
   .l-closer .tt { font-size: var(--t-display); line-height: .9; }
-  .l-closer .cta { display: inline-flex; align-items: center; gap: 16px; width: fit-content; max-width: 100%; padding: 22px 34px; border-radius: 22px; background: var(--accent); color: var(--ink); font: 700 34px var(--mono); letter-spacing: -.01em; text-decoration: none; }
+  .l-closer .cta { display: inline-flex; align-items: center; gap: 16px; width: fit-content; max-width: 100%; padding: 22px 34px; border-radius: 22px; background: var(--accent); color: var(--accent-ink); font: 700 34px var(--mono); letter-spacing: -.01em; text-decoration: none; }
   .l-closer .contact { font: var(--t-label) var(--mono); letter-spacing: .12em; text-transform: uppercase; }
   @media (max-width: 650px) {
     .l-closer .content { padding-left: 0; justify-content: flex-start; gap: 16px; }

package/templates/layouts/phones.html

@@ -1,6 +1,6 @@
 <!--
 layout: phones
-summary: A fanned row of two to four phone cards (the inner ones larger and in front, the outer ones tilted out), the point in the column beside it.
+summary: A fanned row of two to four phone cards (the inner ones larger and in front, the outer ones tilted out), the point in the column beside it. The row stands on a dot plate (bg-stage).
 use: a phone app's flow or its key screens. Each card's .shot is a placeholder check fails on: put in a phone-size screenshot (`hyperdecks screenshot <url> --width 390 --height 844`, capture_url) as <img class="shot">, or a screen recording as <video class="shot" autoplay muted loop playsinline>. Two to four cards: the row spaces and tilts them (on phones only the first three show); change one card's --tilt or --shadow on it. One phone only: use product with .frame.card.
 slot: bottom-left
 presenter: stage
@@ -18,7 +18,7 @@ script: Here is the app on a phone. [look: #__ID__-row] You start here, [go: #__
   .l-phones .row { grid-area: row; display: flex; justify-content: center; align-items: center; padding: 0 0 40px; }
   .l-phones .row > .frame.card { --tilt: 0deg; flex: none; width: 260px; margin: 0 -14px; }
   .l-phones .row > .frame.card:first-child { --tilt: -7deg; --shadow: var(--accent-2); translate: 0 36px; }
-  .l-phones .row > .frame.card:last-child { --tilt: 7deg; --shadow: var(--accent-3); translate: 0 36px; }
+  .l-phones .row > .frame.card:last-child { --tilt: 7deg; --shadow: var(--accent-3, var(--accent-2)); translate: 0 36px; }
   .l-phones .row > .frame.card:not(:first-child, :last-child) { width: 300px; z-index: 1; }
   .l-phones .row:has(> :nth-child(4)) > .frame.card { width: 220px; }
   .l-phones .row:has(> :nth-child(4)) > .frame.card:not(:first-child, :last-child) { width: 250px; }
@@ -31,14 +31,14 @@ script: Here is the app on a phone. [look: #__ID__-row] You start here, [go: #__
     .l-phones .row > .frame.card:is(:first-child, :last-child) { translate: 0 16px; }
     /* Four do not fit the phone card: the row keeps the first three, the third as its end. */
     .l-phones .row > .frame.card:nth-child(n + 4) { display: none; }
-    .l-phones .row:has(> :nth-child(4)) > .frame.card:nth-child(3) { --tilt: 7deg; --shadow: var(--accent-3); width: 108px; translate: 0 16px; }
+    .l-phones .row:has(> :nth-child(4)) > .frame.card:nth-child(3) { --tilt: 7deg; --shadow: var(--accent-3, var(--accent-2)); width: 108px; translate: 0 16px; }
   }
   /* No presenter (:root.hd-no-presenter: no face and no captions, deck_guide look): the corner is free. Phones keep this layout's rules. */
   @media (min-width: 651px) {
     :root.hd-no-presenter .l-phones .text { align-self: center; }
   }
 </style>
-<section class="slide l-phones slot-left bg-dots" id="__ID__" data-chapter="On a phone" data-note="Phone screens: name the app build and the date they were captured.">
+<section class="slide l-phones slot-left bg-stage" id="__ID__" data-chapter="On a phone" data-note="Phone screens: name the app build and the date they were captured.">
   <div class="text">
     <div class="kicker">On a phone</div>
     <h2 class="tt" data-title-mobile="Three taps.">Three taps, start to finish.</h2>
@@ -53,7 +53,7 @@ script: Here is the app on a phone. [look: #__ID__-row] You start here, [go: #__
   <div class="deco" aria-hidden="true">
     <span style="left: 52%; top: 8%; background: var(--accent); rotate: -10deg;">★</span>
     <span style="left: 92%; top: 42%; background: var(--accent-2); rotate: 12deg;">♪</span>
-    <span style="left: 48%; top: 78%; background: var(--accent-3); rotate: 8deg;">☺</span>
+    <span style="left: 48%; top: 78%; background: var(--accent-3, var(--accent-2)); rotate: 8deg;">☺</span>
   </div> -->
   <div class="narration-slot"></div>
 </section>

package/templates/layouts/split.html

@@ -1,6 +1,6 @@
 <!--
 layout: split
-summary: Image plus copy: the copy on the left (a sticker for the logo or icon, kicker, title, one line, three ticks), a real picture on the right in a phone card, on speed lines.
+summary: Image plus copy: the copy on the left (a sticker for the logo or icon, kicker, title, one line, three ticks), a real picture on the right in a phone card (the picture is the background; add bg-pool to light it).
 use: the workhorse for a product, a feature or an app: most slides of a good deck are this one. The phone's .shot is a placeholder check fails on: put in a phone screenshot (capture_url at 390×844) or a screen recording (upload_deck_asset) as <img class="shot"> or <video class="shot" autoplay muted loop playsinline>. For a desktop app, replace the card with <div class="frame laptop" id="__ID__-frame"><img class="shot" src="…" alt="…"></div>; for a 16:9 clip or photo, <img class="shot wide" src="…" alt="…" id="__ID__-frame">. Swap the sticker's icon for the product's logo (<span class="sticker photo"><img src="…" alt=""></span>) or one icon from the deck's set.
 slot: bottom-left
 presenter: stage
@@ -32,7 +32,7 @@ script: Here it is, doing the job. [look: #__ID__-frame] It starts with [go: #__
     :root.hd-no-presenter .l-split .text { align-self: center; padding-top: 0; }
   }
 </style>
-<section class="slide l-split slot-left bg-lines" id="__ID__" data-chapter="The product" data-note="Picture: name the screen or clip and the date it was captured.">
+<section class="slide l-split slot-left" id="__ID__" data-chapter="The product" data-note="Picture: name the screen or clip and the date it was captured.">
   <div class="text">
     <div class="head">
       <span class="sticker" id="__ID__-logo"><svg class="lucide-smartphone" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg></span>

package/templates/narrated-deck.html

@@ -54,7 +54,7 @@
   .slide { display: flex; flex-direction: column; gap: 28px; padding: 64px 72px 56px; background: var(--paper); }
   .slide.accent { background: var(--accent); }
   .kicker { font: 18px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
-  .tt { font-family: var(--display, var(--font)); font-size: 104px; line-height: .95; letter-spacing: -.045em; margin: 0; text-wrap: balance; }
+  .tt { font-family: var(--display, var(--font)); font-weight: var(--display-weight, 700); font-synthesis: none; font-size: 104px; line-height: .95; letter-spacing: var(--display-tracking, -.045em); margin: 0; text-wrap: balance; }
   .lead { font-size: 32px; line-height: 1.3; max-width: 30em; margin: 0; }
   .content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding-right: 500px; }
   /* The presenter glides to each slide's slot; slots alternate sides so the
@@ -156,6 +156,8 @@
 <!-- `hyperdecks narrate decks/__SLUG__` fills data-manifest with the manifest
      URL it writes. data-presenter: head (live Minimoji, needs
      data-avatar), static (data-presenter-image) or none (captions only).
+     deck new, deck narrator and narrate write the narrator's face here
+     (data-presenter-from="narrator", so release follows a later narrator).
      data-presenter-style: stage (large head, lower-third captions), bubble,
      glass (frosted panel) or corner (small head, subtitles). -->
 <script type="module" src="https://hyperdecks.ai/player/v1/player.js"