lazyslides 0.2.1 → 0.2.2

package/README.md

@@ -10,7 +10,7 @@ Leverage your favorite AI agent to build simple, yet meaningful slide decks.
 
 Built on [Eleventy](https://www.11ty.dev/), [Reveal.js](https://revealjs.com), and [Tailwind CSS](https://tailwindcss.com).
 
-[Live demo](https://chrisissorry.github.io/lazyslides/presentations/example/)
+[Live demo](https://chrisissorry.github.io/lazyslides/presentations/)
 
 ## Why
 

package/_includes/slides/_nested-list.njk

@@ -1,22 +1,38 @@
-{# Reusable macro for rendering nested lists (map syntax + legacy object syntax) #}
-{% macro renderItems(items, ordered) %}
+{# Reusable macro for rendering nested lists (map syntax + legacy object syntax).
+   Supports fragment animations and auto-animate data-id attributes.
+
+   Parameters:
+     items     — the list items array
+     ordered   — true for <ol>, false for <ul> (default: false)
+     fragment_type — slide-level fragment class applied to all items (e.g. "fade-up")
+#}
+{% macro renderItems(items, ordered, fragment_type) %}
 <{{ "ol" if ordered else "ul" }}>
   {% for item in items %}
-  <li>
-    {% if item is mapping %}
-      {% for key, children in item %}
-        {{ key }}
-        <ul>
-          {% for sub in children %}<li>{{ sub }}</li>{% endfor %}
-        </ul>
-      {% endfor %}
-    {% elif item.text %}
+  <li
+    {%- if item is mapping and item.text is defined %}
+      {%- set frag = item.fragment or fragment_type %}
+      {%- if frag %} class="fragment {{ frag }}"{% endif %}
+      {%- if item.data_id %} data-id="{{ item.data_id }}"{% endif %}
+    {%- elif item is mapping %}
+      {%- if fragment_type %} class="fragment {{ fragment_type }}"{% endif %}
+    {%- else %}
+      {%- if fragment_type %} class="fragment {{ fragment_type }}"{% endif %}
+    {%- endif %}>
+    {% if item is mapping and item.text is defined %}
       {{ item.text }}
       {% if item.sub_items %}
       <ul>
-        {% for sub in item.sub_items %}<li>{{ sub }}</li>{% endfor %}
+        {% for sub in item.sub_items %}<li{% if frag %} class="fragment {{ frag }}"{% endif %}>{{ sub }}</li>{% endfor %}
       </ul>
       {% endif %}
+    {% elif item is mapping %}
+      {% for key, children in item %}
+        {{ key }}
+        <ul>
+          {% for sub in children %}<li{% if fragment_type %} class="fragment {{ fragment_type }}"{% endif %}>{{ sub }}</li>{% endfor %}
+        </ul>
+      {% endfor %}
     {% else %}
       {{ item }}
     {% endif %}

package/_includes/slides/_section-attrs.njk

@@ -0,0 +1,15 @@
+{# Reusable macro for emitting data-* attributes on <section> tags.
+   Handles transitions, auto-animate, backgrounds (color, gradient, image, video). #}
+{% macro sectionAttrs(slide) %}
+{%- if slide.transition %} data-transition="{{ slide.transition }}"{% endif %}
+{%- if slide.transition_speed %} data-transition-speed="{{ slide.transition_speed }}"{% endif %}
+{%- if slide.auto_animate %} data-auto-animate{% endif %}
+{%- if slide.auto_animate_easing %} data-auto-animate-easing="{{ slide.auto_animate_easing }}"{% endif %}
+{%- if slide.auto_animate_duration %} data-auto-animate-duration="{{ slide.auto_animate_duration }}"{% endif %}
+{%- if slide.background_color %} data-background-color="{{ slide.background_color }}"{% endif %}
+{%- if slide.background_gradient %} data-background="{{ slide.background_gradient }}"{% endif %}
+{%- if slide.background_image %} data-background-image="{{ slide.background_image }}"{% endif %}
+{%- if slide.background_video %} data-background-video="{{ slide.background_video }}"{% endif %}
+{%- if slide.background_video_loop %} data-background-video-loop{% endif %}
+{%- if slide.background_video_muted %} data-background-video-muted{% endif %}
+{%- endmacro %}

package/_includes/slides/agenda.njk

@@ -1,7 +1,8 @@
 {# TEMPLATE: agenda — Clickable table of contents for presentation sections.
    Set auto_generate: true to build the agenda automatically from section slides.
    Manual mode: provide sections array with title and slide (0-based index). #}
-<section class="slide-agenda">
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-agenda"{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     <div class="slide-header">
       <h2>{{ slide.title | default("Agenda") }}</h2>

package/_includes/slides/center.njk

@@ -1,5 +1,6 @@
 {# TEMPLATE: center — Centered statement, image, or both. Image has lightbox on click. #}
-<section class="slide-center">
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-center"{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     {% if slide.title %}<h2>{{ slide.title }}</h2>{% endif %}
     {% if slide.text %}<p>{{ slide.text }}</p>{% endif %}

package/_includes/slides/code.njk

@@ -1,5 +1,6 @@
 {# TEMPLATE: code — Code snippet display with syntax highlighting. #}
-<section class="slide-code">
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-code"{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     <div class="slide-header">
       <h2>{{ slide.title }}</h2>

package/_includes/slides/columns.njk

@@ -1,11 +1,12 @@
 {# TEMPLATE: columns — Two-column layout for side-by-side content. #}
-<section class="slide-columns">
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-columns"{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     <div class="slide-header">
       <h2>{{ slide.title }}</h2>
     </div>
     <div class="columns">
-      <div class="column">
+      <div class="column{% if slide.fragment %} fragment {{ slide.fragment }}{% endif %}">
         {% if slide.left_title %}<h3>{{ slide.left_title }}</h3>{% endif %}
         {% if slide.left_text %}<p>{{ slide.left_text }}</p>{% endif %}
         {% if slide.left_items %}
@@ -15,7 +16,7 @@
         </ul>
         {% endif %}
       </div>
-      <div class="column">
+      <div class="column{% if slide.fragment %} fragment {{ slide.fragment }}{% endif %}">
         {% if slide.right_title %}<h3>{{ slide.right_title }}</h3>{% endif %}
         {% if slide.right_text %}<p>{{ slide.right_text }}</p>{% endif %}
         {% if slide.right_items %}

package/_includes/slides/comparison.njk

@@ -1,5 +1,6 @@
 {# TEMPLATE: comparison — Before/after two-column table with optional highlight styling. #}
-<section class="slide-comparison{% if slide.highlight == 'left' %} highlight-left{% elif slide.highlight == 'none' %} highlight-none{% endif %}">
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-comparison{% if slide.highlight == 'left' %} highlight-left{% elif slide.highlight == 'none' %} highlight-none{% endif %}"{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     <div class="slide-header">
       <h2>{{ slide.title }}</h2>
@@ -13,7 +14,7 @@
       </thead>
       <tbody>
         {% for row in slide.rows %}
-        <tr>
+        <tr{% if slide.fragment %} class="fragment {{ slide.fragment }}"{% endif %}>
           <td>{% if row.left_icon == "bad" %}<span class="icon-bad">✗</span>{% endif %}{{ row.left }}</td>
           <td>{% if row.right_icon == "good" %}<span class="icon-good">✓</span>{% endif %}{{ row.right }}</td>
         </tr>

package/_includes/slides/content.njk

@@ -1,6 +1,7 @@
 {# TEMPLATE: content — Standard slide with headline and bullet points. #}
 {% from "slides/_nested-list.njk" import renderItems %}
-<section class="slide-content">
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-content"{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     <div class="slide-header">
       <h2>{{ slide.title }}</h2>
@@ -8,10 +9,10 @@
     </div>
     {% if slide.text %}<p>{{ slide.text }}</p>{% endif %}
     {% if slide.items %}
-    {{ renderItems(slide.items) }}
+    {{ renderItems(slide.items, false, slide.fragment) }}
     {% endif %}
     {% if slide.ordered_items %}
-    {{ renderItems(slide.ordered_items, true) }}
+    {{ renderItems(slide.ordered_items, true, slide.fragment) }}
     {% endif %}
     {% if slide.notes %}<aside class="notes">{{ slide.notes }}</aside>{% endif %}
   </div>

package/_includes/slides/funnel.njk

@@ -1,5 +1,6 @@
 {# TEMPLATE: funnel — Progressive narrowing funnel with stage labels and annotations. #}
-<section class="slide-funnel">
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-funnel"{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     <div class="slide-header">
       <h2>{{ slide.title }}</h2>
@@ -7,7 +8,7 @@
     <div class="funnel-wrapper">
       <div class="funnel-grid">
         {% for stage in slide.stages %}
-        <div class="funnel-row">
+        <div class="funnel-row{% if slide.fragment %} fragment {{ slide.fragment }}{% endif %}">
           <div class="funnel-stage-wrapper">
             <div class="funnel-stage stage-{{ loop.index }}">
               <span class="stage-label">{{ stage.label }}</span>

package/_includes/slides/hero.njk

@@ -1,6 +1,7 @@
 {# TEMPLATE: hero — Full-bleed background image with dark overlay and optional text box. #}
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
 {% if slide.image %}{% set img_src = slide.image | resolveImage %}{% endif %}
-<section class="slide-hero"{% if slide.image %} style="background-image: url('{{ img_src }}'); background-size: cover; background-position: center;"{% elif slide.color %} style="background-color: {{ slide.color }};"{% endif %}>
+<section class="slide-hero"{% if slide.image %} data-background-image="{{ img_src }}" data-background-size="cover" data-background-position="center"{% elif slide.color %} data-background-color="{{ slide.color }}"{% endif %}{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     <h1>{{ slide.title }}</h1>
     {% if slide.text %}<p>{{ slide.text }}</p>{% endif %}

package/_includes/slides/image-overlay.njk

@@ -1,9 +1,7 @@
-{# TEMPLATE: image-overlay — Full background image with positioned text box overlay.
-   NOTE: Use inline style for background-image, NOT data-background-image.
-   Reveal.js data-background-* renders in the full viewport (including theater margins),
-   while inline style keeps the image within the 960×540 slide bounds. #}
+{# TEMPLATE: image-overlay — Full background image with positioned text box overlay. #}
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
 {% set img_src = slide.image | resolveImage %}
-<section class="slide-image-overlay" style="background-image: url('{{ img_src }}'); background-size: cover; background-position: center;">
+<section class="slide-image-overlay" data-background-image="{{ img_src }}" data-background-size="cover" data-background-position="center"{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     <div class="overlay-box {{ slide.position | default('bottom-left') }}">
       {% if slide.title %}<h3>{{ slide.title }}</h3>{% endif %}

package/_includes/slides/metrics.njk

@@ -1,5 +1,6 @@
 {# TEMPLATE: metrics — Key statistics display with 2-4 metric cards. #}
-<section class="slide-metrics">
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-metrics"{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     <div class="slide-header">
       <h2>{{ slide.title }}</h2>
@@ -11,7 +12,7 @@
     {% else %}{% set cols_class = "cols-3" %}{% endif %}
     <div class="metrics-grid {{ cols_class }}">
       {% for metric in slide.metrics %}
-      <div class="metric-card">
+      <div class="metric-card{% if slide.fragment %} fragment {{ slide.fragment }}{% endif %}">
         <div class="value{% if metric.color %} {{ metric.color }}{% endif %}">{{ metric.value }}</div>
         <div class="label">{{ metric.label }}</div>
         {% if metric.context %}<div class="context">{{ metric.context }}</div>{% endif %}

package/_includes/slides/quote.njk

@@ -1,5 +1,6 @@
 {# TEMPLATE: quote — Testimonial or statement with attribution. #}
-<section class="slide-quote">
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-quote"{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     <div class="quote-mark">"</div>
     <blockquote>{{ slide.quote }}</blockquote>

package/_includes/slides/section.njk

@@ -1,5 +1,6 @@
 {# TEMPLATE: section — Chapter divider slide for separating presentation sections. #}
-<section class="slide-section">
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-section"{{ sectionAttrs(slide) }}>
   <h2>{{ slide.title }}</h2>
   {% if slide.subtitle %}<p class="subtitle">{{ slide.subtitle }}</p>{% endif %}
   {% if slide.notes %}<aside class="notes">{{ slide.notes }}</aside>{% endif %}

package/_includes/slides/split-wide.njk

@@ -1,6 +1,7 @@
 {# TEMPLATE: split-wide — 1/3 content + 2/3 image layout (inverse of split). #}
 {% from "slides/_nested-list.njk" import renderItems %}
-<section class="slide-split-wide">
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-split-wide"{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     <div class="split-wide-container">
       <div class="split-wide-content">
@@ -9,11 +10,11 @@
         </div>
         {% if slide.text %}<p>{{ slide.text }}</p>{% endif %}
         {% if slide.items %}
-        {{ renderItems(slide.items) }}
+        {{ renderItems(slide.items, false, slide.fragment) }}
         {% endif %}
         {% if slide.notes %}<aside class="notes">{{ slide.notes }}</aside>{% endif %}
       </div>
-      <div class="split-wide-image">
+      <div class="split-wide-image{% if slide.image_fit == 'contain' %} image-contain{% endif %}">
         {% if slide.image %}
         {% set img_src = slide.image | resolveImage %}
         <a href="{{ img_src }}" class="glightbox">

package/_includes/slides/split.njk

@@ -1,9 +1,10 @@
 {# TEMPLATE: split — 1/3 image + 2/3 content layout. Image has lightbox on click. #}
 {% from "slides/_nested-list.njk" import renderItems %}
-<section class="slide-split">
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-split"{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     <div class="split-container">
-      <div class="split-image">
+      <div class="split-image{% if slide.image_fit == 'contain' %} image-contain{% endif %}">
         {% if slide.image %}
         {% set img_src = slide.image | resolveImage %}
         <a href="{{ img_src }}" class="glightbox">
@@ -17,7 +18,7 @@
         </div>
         {% if slide.text %}<p>{{ slide.text }}</p>{% endif %}
         {% if slide.items %}
-        {{ renderItems(slide.items) }}
+        {{ renderItems(slide.items, false, slide.fragment) }}
         {% endif %}
         {% if slide.notes %}<aside class="notes">{{ slide.notes }}</aside>{% endif %}
       </div>

package/_includes/slides/table.njk

@@ -1,5 +1,6 @@
 {# TEMPLATE: table — Multi-column data table with neutral styling and zebra striping. #}
-<section class="slide-table">
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-table"{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     <div class="slide-header">
       <h2>{{ slide.title }}</h2>

package/_includes/slides/three-columns.njk

@@ -0,0 +1,48 @@
+{# TEMPLATE: three-columns — Three equal-width columns for side-by-side content. #}
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-three-columns"{{ sectionAttrs(slide) }}>
+  <div class="slide-body">
+    <div class="slide-header">
+      <h2>{{ slide.title }}</h2>
+    </div>
+    <div class="three-columns">
+      <div class="column{% if slide.fragment %} fragment {{ slide.fragment }}{% endif %}">
+        {% if slide.col1_title %}<h3>{{ slide.col1_title }}</h3>{% endif %}
+        {% if slide.col1_text %}<p>{{ slide.col1_text }}</p>{% endif %}
+        {% if slide.col1_items %}
+        <ul>
+          {% for item in slide.col1_items %}<li>{{ item }}</li>
+          {% endfor %}
+        </ul>
+        {% endif %}
+      </div>
+      <div class="column{% if slide.fragment %} fragment {{ slide.fragment }}{% endif %}">
+        {% if slide.col2_title %}<h3>{{ slide.col2_title }}</h3>{% endif %}
+        {% if slide.col2_text %}<p>{{ slide.col2_text }}</p>{% endif %}
+        {% if slide.col2_items %}
+        <ul>
+          {% for item in slide.col2_items %}<li>{{ item }}</li>
+          {% endfor %}
+        </ul>
+        {% endif %}
+      </div>
+      <div class="column{% if slide.fragment %} fragment {{ slide.fragment }}{% endif %}">
+        {% if slide.col3_title %}<h3>{{ slide.col3_title }}</h3>{% endif %}
+        {% if slide.col3_text %}<p>{{ slide.col3_text }}</p>{% endif %}
+        {% if slide.col3_items %}
+        <ul>
+          {% for item in slide.col3_items %}<li>{{ item }}</li>
+          {% endfor %}
+        </ul>
+        {% endif %}
+      </div>
+    </div>
+    {% if slide.notes %}<aside class="notes">{{ slide.notes }}</aside>{% endif %}
+  </div>
+  {% if global_footer and not slide.hide_footer %}
+  {% set reference = slide.reference %}
+  {% set reference_link = slide.reference_link %}
+  {% set references = slide.references %}
+  {% include "slides/footer.njk" %}
+  {% endif %}
+</section>

package/_includes/slides/timeline.njk

@@ -1,5 +1,6 @@
 {# TEMPLATE: timeline — Horizontal timeline with alternating above/below event cards. #}
-<section class="slide-timeline">
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-timeline"{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     <div class="slide-header">
       <h2>{{ slide.title }}</h2>
@@ -9,7 +10,7 @@
       <div class="timeline-events">
         {% for event in slide.events %}
         {% set remainder = loop.index % 2 %}
-        <div class="timeline-event {% if remainder == 1 %}above{% else %}below{% endif %}">
+        <div class="timeline-event {% if remainder == 1 %}above{% else %}below{% endif %}{% if slide.fragment %} fragment {{ slide.fragment }}{% endif %}">
           <div class="event-dot"></div>
           <div class="event-connector"></div>
           <div class="event-card">

package/_includes/slides/title.njk

@@ -1,5 +1,6 @@
 {# TEMPLATE: title — Opening slide with logo, title, subtitle, and author. #}
-<section class="slide-title">
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-title"{{ sectionAttrs(slide) }}>
   {% if slide.logo != false %}
   <div class="logo">
     <svg 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">

package/_layouts/presentation.njk

@@ -17,10 +17,17 @@
   <!-- Tailwind CSS (structural styles) -->
   <link rel="stylesheet" href="{{ '/assets/css/styles.css' | url }}">
 
-  <!-- Theme CSS (design tokens) -->
+  <!-- Theme -->
   {% set theme_name = theme | default('default') %}
   <link rel="stylesheet" href="{{ '/assets/css/themes/' | url }}{{ theme_name }}.css">
 
+  {% if footer_brand or footer_logo == false %}
+  <style>
+    {% if footer_brand %}:root { --footer-brand-name: '{{ footer_brand }}'; }{% endif %}
+    {% if footer_logo == false %}.footer-center .logo-small { display: none; }{% endif %}
+  </style>
+  {% endif %}
+
   <!-- Code highlighting theme -->
   <link rel="stylesheet" href="{{ '/assets/reveal.js/plugin/highlight/monokai.css' | url }}">
 
@@ -28,15 +35,6 @@
   <link rel="stylesheet" href="{{ '/assets/css/vendor/glightbox.min.css' | url }}">
 </head>
 <body>
-  <!-- Exit button to return to presentations index -->
-  <a href="{{ '/presentations/' | url }}"
-     class="exit-button"
-     title="Exit to presentations list">
-    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-      <path d="M18 6L6 18M6 6l12 12"/>
-    </svg>
-  </a>
-
   <div class="reveal">
     <div class="slides">
       {% for slide in slides %}
@@ -52,6 +50,9 @@
     <div class="section-progress-dots"></div>
   </div>
 
+  <!-- Viewport footer — fixed at screen bottom, outside Reveal.js canvas -->
+  <div id="viewport-footer"></div>
+
   <!-- Reveal.js -->
   <script src="{{ '/assets/reveal.js/dist/reveal.js' | url }}"></script>
 
@@ -59,6 +60,11 @@
   <script src="{{ '/assets/reveal.js/plugin/markdown/markdown.js' | url }}"></script>
   <script src="{{ '/assets/reveal.js/plugin/highlight/highlight.js' | url }}"></script>
   <script src="{{ '/assets/reveal.js/plugin/notes/notes.js' | url }}"></script>
+  <script src="{{ '/assets/reveal.js/plugin/zoom/zoom.js' | url }}"></script>
+  <script src="{{ '/assets/reveal.js/plugin/search/search.js' | url }}"></script>
+  {% if math %}
+  <script src="{{ '/assets/reveal.js/plugin/math/math.js' | url }}"></script>
+  {% endif %}
 
   <!-- Convert newlines to <br/> in speaker notes for proper line breaks -->
   <script>
@@ -81,7 +87,7 @@
       height: {{ height | default(540) }},
 
       // Scale settings
-      margin: isPdfExport ? 0 : 0.04,
+      margin: parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--reveal-margin')) || 0,
       minScale: 0.2,
       maxScale: 2.0,
 
@@ -94,7 +100,7 @@
       progress: isPdfExport ? false : {{ progress | default(true) }},
 
       // Slide number
-      slideNumber: {{ slideNumber | default(false) }},
+      slideNumber: false,
 
       // Push each slide to browser history
       history: {{ history | default(true) }},
@@ -157,7 +163,7 @@
       mobileViewDistance: {{ mobileViewDistance | default(2) }},
 
       // Plugins
-      plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
+      plugins: [ RevealMarkdown, RevealHighlight, RevealNotes, RevealZoom, RevealSearch{% if math %}, RevealMath.KaTeX{% endif %} ]
     });
   </script>
 
@@ -237,5 +243,24 @@
       updateDots(); // Set initial state
     });
   </script>
+
+  <!-- Viewport footer: clone current slide's footer to fixed container -->
+  <script>
+    function updateViewportFooter() {
+      const container = document.getElementById('viewport-footer');
+      if (!container || document.body.classList.contains('pdf-export')) return;
+
+      const currentSlide = Reveal.getCurrentSlide();
+      const footer = currentSlide?.querySelector('.slide-footer');
+
+      container.innerHTML = '';
+      if (footer) {
+        container.appendChild(footer.cloneNode(true));
+      }
+    }
+
+    Reveal.on('ready', updateViewportFooter);
+    Reveal.on('slidechanged', updateViewportFooter);
+  </script>
 </body>
 </html>

package/assets/css/themes/card.css

@@ -0,0 +1,63 @@
+/* ============================================
+   CARD THEME
+   Restores the card/theater aesthetic where slides
+   appear as floating white cards on a gradient background.
+
+   Usage: Add `theme: card` to presentation frontmatter
+   ============================================ */
+
+:root {
+  /* Primary Color Scale — same sky blue as default */
+  --color-primary-50: #f0f9ff;
+  --color-primary-100: #e0f2fe;
+  --color-primary-200: #bae6fd;
+  --color-primary-400: #38bdf8;
+  --color-primary-500: #0ea5e9;
+  --color-primary-600: #0284c7;
+  --color-primary-700: #0369a1;
+
+  --reveal-margin: 0.04;  /* Theater-style inset for card frame */
+  --footer-brand-name: 'lazyslides';
+}
+
+/* Theater gradient background */
+html, body {
+  background: linear-gradient(135deg, #f1f5f9 0%, var(--color-primary-50) 100%);
+}
+
+/* Transparent viewport so theater background shows through */
+.reveal-viewport {
+  background: transparent !important;
+}
+
+/* White card styling on each slide */
+.reveal .slides > section,
+.reveal .slides > section > section {
+  background: #ffffff;
+  border-radius: 6px;
+  border: 1px solid var(--color-slate-200, #e2e8f0);
+  box-shadow:
+    0 2px 3px -1px rgba(0, 0, 0, 0.07),
+    0 5px 10px -3px rgba(0, 0, 0, 0.05);
+}
+
+/* Restore footer rounded corners */
+.slide-footer {
+  border-radius: 0 0 6px 6px;
+  border-top: 1px solid var(--color-slate-200);
+  background: var(--color-slate-50);
+}
+
+/* Hero and image-overlay get rounded corners too */
+.reveal .slides section.slide-hero,
+.reveal .slides section.slide-image-overlay {
+  border-radius: 6px;
+}
+
+/* PDF export removes card styling */
+.pdf-export .reveal .slides > section,
+.pdf-export .reveal .slides > section > section {
+  border-radius: 0;
+  border: none;
+  box-shadow: none;
+}

package/assets/css/themes/corporate.css

@@ -0,0 +1,25 @@
+/* ============================================
+   CORPORATE THEME
+   Charcoal and slate, minimal and professional.
+
+   Usage: Add `theme: corporate` to presentation frontmatter
+   ============================================ */
+
+:root {
+  /* Primary Color Scale — slate/charcoal */
+  --color-primary-50: #f8fafc;
+  --color-primary-100: #f1f5f9;
+  --color-primary-200: #e2e8f0;
+  --color-primary-400: #94a3b8;
+  --color-primary-500: #64748b;
+  --color-primary-600: #475569;
+  --color-primary-700: #334155;
+
+  --font-heading: var(--font-sans);
+
+  --footer-brand-name: 'lazyslides';
+}
+
+html, body {
+  background: #ffffff;
+}

package/assets/css/themes/default.css

@@ -52,11 +52,9 @@
 }
 
 /* ----------------------------------------
-   THEATER BACKGROUND
-   The gradient behind the slide cards.
+   BACKGROUND
    ---------------------------------------- */
 
 html, body {
-  /* Default: warm gray to light primary tint */
-  background: linear-gradient(135deg, #f1f5f9 0%, var(--color-primary-50) 100%);
+  background: var(--color-background, #ffffff);
 }

package/assets/css/themes/forest.css

@@ -0,0 +1,23 @@
+/* ============================================
+   FOREST THEME
+   Deep greens with warm earth tones.
+
+   Usage: Add `theme: forest` to presentation frontmatter
+   ============================================ */
+
+:root {
+  /* Primary Color Scale — forest green */
+  --color-primary-50: #f0fdf4;
+  --color-primary-100: #dcfce7;
+  --color-primary-200: #bbf7d0;
+  --color-primary-400: #4ade80;
+  --color-primary-500: #22c55e;
+  --color-primary-600: #16a34a;
+  --color-primary-700: #15803d;
+
+  --footer-brand-name: 'lazyslides';
+}
+
+html, body {
+  background: #fafdf7;
+}