npm - @w3kits-com/plugin-opendesign - Versions diffs - 0.1.8 → 0.1.10 - Mend

@w3kits-com/plugin-opendesign 0.1.8 → 0.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1712) hide show

package/dist/__w3kits/assets/design-templates/html-ppt-zhangzara-biennale-yellow/example.html ADDED Viewed

@@ -0,0 +1,833 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<title>Biennale Yellow — Slide Template</title>
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+<style>
+  :root {
+    --paper:      #E9E5DB;   /* warm parchment ground */
+    --paper-deep: #DCD6C4;   /* slightly darker for shadows */
+    --sun:        #F1EE2E;   /* signature solar yellow */
+    --sun-soft:   #F8F39B;
+    --ink:        #1B2566;   /* deep indigo navy */
+    --ember:      #E26B4A;   /* warm peach accent */
+    --haze:       #F0DA7C;
+    --line:       #1B2566;
+  }
+  * { box-sizing: border-box; }
+  html, body { margin: 0; padding: 0; height: 100%; background: #0a0a0a; }
+  body {
+    font-family: 'Archivo', 'Helvetica Neue', sans-serif;
+    color: var(--ink);
+    overflow: hidden;
+  }
+  /* deck wrapper — fills the viewport, centers a stage */
+  .deck { position: fixed; inset: 0; display: grid; place-items: center; }
+  .stage {
+    position: relative;
+    width: 100vw; height: 100vh;
+    overflow: hidden;
+    background: var(--paper);
+  }
+  /* one slide at a time, soft cross-fade */
+  .slide {
+    position: absolute; inset: 0;
+    opacity: 0; pointer-events: none;
+    transition: opacity 280ms ease;
+  }
+  .slide.active { opacity: 1; pointer-events: auto; }
+  /* Type system — kept on a small set of utility classes */
+  .display      { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; line-height: 0.9; letter-spacing: -0.012em; }
+  .display-it   { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; line-height: 1.04; letter-spacing: -0.005em; }
+  .micro-label  { font-family: 'Archivo', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; }
+  .body-text    { font-family: 'Archivo', sans-serif; font-weight: 400; line-height: 1.5; }
+  .mono-tab     { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 400; }
+  /* Page number — single, bottom-right, on every slide */
+  .pagenum {
+    position: absolute;
+    right: clamp(24px, 2.4vw, 48px);
+    bottom: clamp(22px, 2.4vh, 42px);
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    font-size: clamp(11px, 0.85vw, 13px);
+    color: var(--ink);
+    letter-spacing: 0.08em;
+    z-index: 8;
+    opacity: 0.75;
+  }
+  /* Persistent navigation hint — bottom-left, single appearance */
+  .nav-hint {
+    position: fixed;
+    left: clamp(20px, 2vw, 36px);
+    bottom: clamp(16px, 2vh, 28px);
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    font-size: clamp(10px, 0.75vw, 12px);
+    color: var(--ink);
+    letter-spacing: 0.08em;
+    opacity: 0.4;
+    z-index: 10;
+    pointer-events: none;
+  }
+  /* ──────────────────────────────────────────────────────────────────
+     SLIDE 1 — COVER (poster echo)
+     ────────────────────────────────────────────────────────────────── */
+  .s-cover { background: var(--paper); }
+  /* abstract block grid behind, gives the layered yellow feeling */
+  .s-cover .blocks {
+    position: absolute; inset: 0;
+    pointer-events: none;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-rows: repeat(8, 1fr);
+  }
+  .s-cover .blocks div { background: transparent; }
+  .s-cover .blocks .b1 { background: rgba(241,238,46,0.55); grid-column: 1; grid-row: 3 / 6; }
+  .s-cover .blocks .b2 { background: rgba(241,238,46,0.4);  grid-column: 4; grid-row: 1 / 4; }
+  .s-cover .blocks .b3 { background: rgba(241,238,46,0.7);  grid-column: 1 / 3; grid-row: 6 / 9; }
+  .s-cover .blocks .b4 { background: rgba(241,238,46,0.45); grid-column: 3 / 5; grid-row: 6 / 8; }
+  /* central sun-bloom + corner peach edge */
+  .s-cover .sunglow {
+    position: absolute; inset: 0; pointer-events: none;
+    background:
+      radial-gradient(ellipse 42% 38% at 52% 42%, rgba(241,238,46,0.95) 0%, rgba(241,238,46,0.65) 38%, rgba(240,218,124,0.22) 65%, rgba(233,229,219,0) 88%),
+      radial-gradient(ellipse 28% 30% at 88% 16%, rgba(226,107,74,0.22) 0%, rgba(226,107,74,0) 70%);
+  }
+  .s-cover .date-rail {
+    position: absolute;
+    top: clamp(28px, 3.2vh, 56px);
+    right: clamp(40px, 4vw, 76px);
+    font-family: 'Instrument Serif', Georgia, serif;
+    font-size: clamp(48px, min(5.2vw, 9vh), 96px);
+    color: var(--ink);
+    line-height: 0.96;
+    text-align: right;
+    letter-spacing: -0.005em;
+    z-index: 5;
+  }
+  .s-cover .titlewrap {
+    position: absolute;
+    left: clamp(40px, 4vw, 76px);
+    bottom: clamp(132px, 16vh, 220px);
+    z-index: 5;
+    max-width: 88%;
+  }
+  .s-cover .title {
+    font-family: 'Instrument Serif', Georgia, serif;
+    font-size: clamp(120px, min(14.6vw, 22vh), 240px);
+    line-height: 0.86;
+    color: var(--ink);
+    letter-spacing: -0.018em;
+  }
+  .s-cover .title em { font-style: italic; }
+  .s-cover .subline {
+    margin-top: clamp(8px, 1vh, 18px);
+    font-family: 'Archivo', sans-serif;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.18em;
+    font-size: clamp(11px, 0.85vw, 13px);
+    color: var(--ink);
+  }
+  .s-cover .footer-row {
+    position: absolute;
+    left: clamp(40px, 4vw, 76px);
+    right: clamp(40px, 4vw, 76px);
+    bottom: clamp(28px, 3vh, 52px);
+    display: grid;
+    grid-template-columns: 1.1fr 1fr 1.4fr 2fr;
+    gap: clamp(20px, 2.4vw, 44px);
+    z-index: 5;
+  }
+  .s-cover .footer-row > div {
+    border-top: 1px solid var(--ink);
+    padding-top: clamp(10px, 1.2vh, 16px);
+  }
+  .s-cover .footer-row .ftag {
+    text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
+    font-size: clamp(10px, 0.72vw, 12px);
+    margin-bottom: 6px;
+  }
+  .s-cover .footer-row .ftxt {
+    font-family: 'Archivo', sans-serif;
+    font-size: clamp(11px, 0.78vw, 13px);
+    line-height: 1.45;
+  }
+  .s-cover .footer-row .fdesc {
+    font-family: 'Archivo', sans-serif;
+    font-size: clamp(11px, 0.74vw, 12px);
+    line-height: 1.5;
+    color: var(--ink);
+  }
+  /* ──────────────────────────────────────────────────────────────────
+     SLIDE 2 — MANIFESTO (single italic statement, atmospheric)
+     ────────────────────────────────────────────────────────────────── */
+  .s-manifesto { background: var(--paper); display: flex; align-items: center; justify-content: center; }
+  .s-manifesto .haze {
+    position: absolute; inset: 0; pointer-events: none;
+    background:
+      radial-gradient(ellipse 70% 60% at 50% 50%, rgba(241,238,46,0.7) 0%, rgba(248,243,155,0.42) 32%, rgba(240,218,124,0.18) 56%, rgba(233,229,219,0) 80%),
+      radial-gradient(circle 600px at 12% 88%, rgba(226,107,74,0.15) 0%, rgba(226,107,74,0) 70%);
+  }
+  .s-manifesto .quote {
+    position: relative; z-index: 4;
+    max-width: min(86%, 1480px);
+    padding: 0 clamp(40px, 6vw, 120px);
+    font-family: 'Instrument Serif', Georgia, serif;
+    font-style: italic;
+    font-weight: 400;
+    font-size: clamp(56px, min(7vw, 11vh), 120px);
+    line-height: 1.04;
+    color: var(--ink);
+    letter-spacing: -0.005em;
+    text-align: left;
+  }
+  .s-manifesto .attr {
+    position: absolute;
+    left: clamp(40px, 4vw, 76px);
+    bottom: clamp(56px, 6vh, 96px);
+    font-family: 'Archivo', sans-serif;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+    font-size: clamp(11px, 0.85vw, 13px);
+    color: var(--ink);
+    z-index: 4;
+  }
+  /* ──────────────────────────────────────────────────────────────────
+     SLIDE 3 — PROGRAMME (split editorial spread)
+     ────────────────────────────────────────────────────────────────── */
+  .s-programme { background: var(--paper); display: grid; grid-template-columns: 1fr 1fr; }
+  .s-programme .left {
+    background: var(--sun);
+    position: relative;
+    padding: clamp(40px, 4.2vw, 80px);
+    display: flex; flex-direction: column; justify-content: space-between;
+  }
+  .s-programme .left .kicker {
+    font-family: 'Archivo', sans-serif;
+    font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em;
+    font-size: clamp(11px, 0.85vw, 14px);
+    color: var(--ink);
+  }
+  .s-programme .left .word {
+    font-family: 'Instrument Serif', Georgia, serif;
+    font-size: clamp(110px, min(11vw, 18vh), 200px);
+    line-height: 0.86;
+    color: var(--ink);
+    letter-spacing: -0.018em;
+  }
+  .s-programme .left .meta {
+    font-family: 'Archivo', sans-serif;
+    font-size: clamp(13px, 0.95vw, 16px);
+    line-height: 1.5;
+    max-width: 88%;
+    color: var(--ink);
+  }
+  .s-programme .right {
+    background: var(--paper);
+    position: relative;
+    padding: clamp(40px, 4.2vw, 80px) clamp(40px, 4.2vw, 80px) clamp(56px, 5vh, 88px);
+    display: flex; flex-direction: column; gap: clamp(18px, 2.2vh, 32px);
+  }
+  .s-programme .right .head {
+    font-family: 'Archivo', sans-serif;
+    font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em;
+    font-size: clamp(11px, 0.85vw, 14px);
+    border-bottom: 1px solid var(--ink);
+    padding-bottom: 14px;
+  }
+  .s-programme .strands {
+    display: flex; flex-direction: column;
+    gap: clamp(14px, 1.8vh, 22px);
+  }
+  .s-programme .strand {
+    display: grid;
+    grid-template-columns: 56px 1fr;
+    gap: clamp(14px, 1.4vw, 24px);
+    border-bottom: 1px solid rgba(27,37,102,0.18);
+    padding-bottom: clamp(12px, 1.6vh, 22px);
+  }
+  .s-programme .strand .num {
+    font-family: 'Instrument Serif', Georgia, serif;
+    font-size: clamp(28px, 2vw, 38px);
+    color: var(--ink);
+    line-height: 1;
+  }
+  .s-programme .strand h3 {
+    margin: 0 0 4px 0;
+    font-family: 'Instrument Serif', Georgia, serif;
+    font-weight: 400;
+    font-size: clamp(22px, 1.7vw, 32px);
+    line-height: 1.1;
+    color: var(--ink);
+  }
+  .s-programme .strand p {
+    margin: 0;
+    font-family: 'Archivo', sans-serif;
+    font-size: clamp(14px, 0.95vw, 15px);
+    line-height: 1.5;
+    color: var(--ink);
+    max-width: 92%;
+  }
+  /* ──────────────────────────────────────────────────────────────────
+     SLIDE 4 — CHAPTER DIVIDER (huge serif numeral)
+     ────────────────────────────────────────────────────────────────── */
+  .s-chapter { background: var(--paper); }
+  .s-chapter .glow {
+    position: absolute; inset: 0; pointer-events: none;
+    background:
+      radial-gradient(circle 720px at -10% -10%, rgba(241,238,46,0.7) 0%, rgba(241,238,46,0) 65%),
+      radial-gradient(circle 540px at 110% 110%, rgba(226,107,74,0.18) 0%, rgba(226,107,74,0) 70%);
+  }
+  .s-chapter .vrail {
+    position: absolute;
+    left: clamp(40px, 4vw, 76px);
+    top: 50%;
+    transform: translateY(-50%) rotate(-90deg);
+    transform-origin: 0 50%;
+    font-family: 'Archivo', sans-serif;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.32em;
+    font-size: clamp(11px, 0.85vw, 13px);
+    color: var(--ink);
+    white-space: nowrap;
+    z-index: 4;
+  }
+  .s-chapter .stack {
+    position: absolute;
+    left: clamp(120px, 12vw, 220px);
+    top: clamp(40px, 5vh, 96px);
+    bottom: clamp(80px, 9vh, 130px);
+    right: clamp(40px, 4vw, 76px);
+    display: flex; flex-direction: column; justify-content: center;
+    z-index: 4;
+  }
+  .s-chapter .nm {
+    font-family: 'Instrument Serif', Georgia, serif;
+    font-size: clamp(220px, min(28vw, 64vh), 720px);
+    line-height: 0.84;
+    color: var(--ink);
+    letter-spacing: -0.04em;
+  }
+  .s-chapter .ttl {
+    margin-top: clamp(12px, 1.6vh, 28px);
+    font-family: 'Instrument Serif', Georgia, serif;
+    font-style: italic;
+    font-size: clamp(40px, min(4.4vw, 7vh), 90px);
+    line-height: 1.05;
+    color: var(--ink);
+    max-width: 78%;
+  }
+  .s-chapter .lede {
+    margin-top: clamp(18px, 2.2vh, 36px);
+    font-family: 'Archivo', sans-serif;
+    font-size: clamp(15px, 1.05vw, 18px);
+    line-height: 1.55;
+    color: var(--ink);
+    max-width: 56ch;
+  }
+  /* ──────────────────────────────────────────────────────────────────
+     SLIDE 5 — DATA: ATTENDANCE BARS
+     ────────────────────────────────────────────────────────────────── */
+  .s-data { background: var(--paper); }
+  .s-data .glow {
+    position: absolute; inset: 0; pointer-events: none;
+    background: radial-gradient(ellipse 50% 40% at 92% 8%, rgba(241,238,46,0.55) 0%, rgba(241,238,46,0) 70%);
+  }
+  .s-data .frame {
+    position: absolute; inset: clamp(40px, 4vw, 76px) clamp(40px, 4vw, 76px) clamp(70px, 7vh, 120px);
+    display: grid;
+    grid-template-columns: 1fr 1.4fr;
+    grid-template-rows: auto 1fr;
+    gap: clamp(20px, 2.5vw, 48px);
+    z-index: 4;
+  }
+  .s-data .head { grid-column: 1 / 3; display: flex; align-items: end; justify-content: space-between; gap: 32px; border-bottom: 1px solid var(--ink); padding-bottom: clamp(14px, 1.6vh, 24px); }
+  .s-data .head .lab { font-family: 'Archivo', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; font-size: clamp(11px, 0.85vw, 13px); color: var(--ink); }
+  .s-data .head .h { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(32px, min(3.6vw, 6vh), 56px); line-height: 1; color: var(--ink); }
+  .s-data .col-a { display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 2vh, 32px); }
+  .s-data .stat { display: flex; flex-direction: column; gap: 4px; }
+  .s-data .stat .v { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(72px, min(7vw, 12vh), 144px); line-height: 0.92; color: var(--ink); letter-spacing: -0.01em; }
+  .s-data .stat .v sup { font-size: 0.42em; vertical-align: super; opacity: 0.7; font-style: italic; }
+  .s-data .stat .lab2 { font-family: 'Archivo', sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; font-size: clamp(11px, 0.8vw, 13px); color: var(--ink); }
+  .s-data .stat .desc { font-family: 'Archivo', sans-serif; font-size: clamp(14px, 0.95vw, 15px); line-height: 1.45; color: var(--ink); max-width: 32ch; margin-top: 4px; }
+  .s-data .chart { display: flex; flex-direction: column; gap: clamp(8px, 1vh, 14px); justify-content: center; }
+  .s-data .row { display: grid; grid-template-columns: 64px 1fr 80px; align-items: center; gap: clamp(12px, 1vw, 22px); }
+  .s-data .row .yr { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: clamp(12px, 0.85vw, 14px); color: var(--ink); letter-spacing: 0.04em; }
+  .s-data .row .val { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: clamp(12px, 0.85vw, 14px); color: var(--ink); text-align: right; letter-spacing: 0.02em; }
+  .s-data .bar { height: clamp(14px, 1.6vh, 22px); background: var(--ink); position: relative; }
+  .s-data .bar.lit { background: var(--sun); border: 1px solid var(--ink); }
+  /* ──────────────────────────────────────────────────────────────────
+     SLIDE 6 — QUOTE SPREAD
+     ────────────────────────────────────────────────────────────────── */
+  .s-quote { background: var(--paper); }
+  .s-quote .yblock {
+    position: absolute;
+    right: 0; top: 0; bottom: 0;
+    width: 32%;
+    background: var(--sun);
+  }
+  .s-quote .glow {
+    position: absolute; inset: 0; pointer-events: none;
+    background: radial-gradient(circle 600px at 8% 92%, rgba(241,238,46,0.4) 0%, rgba(241,238,46,0) 70%);
+  }
+  .s-quote .qwrap {
+    position: absolute;
+    left: clamp(40px, 4vw, 76px);
+    right: 36%;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 4;
+  }
+  .s-quote .qkicker {
+    font-family: 'Archivo', sans-serif; font-weight: 600;
+    text-transform: uppercase; letter-spacing: 0.22em;
+    font-size: clamp(11px, 0.82vw, 13px);
+    color: var(--ink);
+    margin-bottom: clamp(14px, 1.8vh, 26px);
+  }
+  .s-quote .qbody {
+    font-family: 'Instrument Serif', Georgia, serif;
+    font-style: italic;
+    font-size: clamp(40px, min(4.6vw, 7vh), 88px);
+    line-height: 1.06;
+    color: var(--ink);
+    letter-spacing: -0.005em;
+  }
+  .s-quote .qattr {
+    margin-top: clamp(20px, 2.4vh, 36px);
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: clamp(14px, 1.4vw, 24px);
+    align-items: end;
+    border-top: 1px solid var(--ink);
+    padding-top: clamp(10px, 1.4vh, 18px);
+  }
+  .s-quote .qattr .who { font-family: 'Archivo', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; font-size: clamp(11px, 0.85vw, 13px); color: var(--ink); }
+  .s-quote .qattr .role { font-family: 'Archivo', sans-serif; font-size: clamp(11px, 0.78vw, 13px); color: var(--ink); opacity: 0.75; }
+  .s-quote .y-mark {
+    position: absolute;
+    right: clamp(40px, 4vw, 76px);
+    bottom: clamp(70px, 8vh, 130px);
+    font-family: 'Instrument Serif', Georgia, serif;
+    font-size: clamp(120px, min(15vw, 22vh), 280px);
+    line-height: 0.9;
+    color: var(--ink);
+    letter-spacing: -0.04em;
+    z-index: 4;
+  }
+  /* ──────────────────────────────────────────────────────────────────
+     SLIDE 7 — CALENDAR (dense tabular)
+     ────────────────────────────────────────────────────────────────── */
+  .s-cal { background: var(--paper); }
+  .s-cal .glow {
+    position: absolute; inset: 0; pointer-events: none;
+    background: radial-gradient(circle 700px at 105% 0%, rgba(241,238,46,0.45) 0%, rgba(241,238,46,0) 65%);
+  }
+  .s-cal .frame {
+    position: absolute;
+    inset: clamp(40px, 4vw, 76px) clamp(40px, 4vw, 76px) clamp(70px, 7vh, 120px);
+    display: flex; flex-direction: column;
+    z-index: 4;
+  }
+  .s-cal .frame .topbar {
+    display: flex; align-items: end; justify-content: space-between;
+    border-bottom: 1px solid var(--ink);
+    padding-bottom: clamp(12px, 1.4vh, 22px);
+    margin-bottom: clamp(16px, 1.8vh, 26px);
+  }
+  .s-cal .frame .topbar .h {
+    font-family: 'Instrument Serif', Georgia, serif;
+    font-size: clamp(40px, min(4.4vw, 7vh), 80px);
+    line-height: 1;
+    color: var(--ink);
+  }
+  .s-cal .frame .topbar .lab { font-family: 'Archivo', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; font-size: clamp(11px, 0.82vw, 13px); color: var(--ink); }
+  .s-cal .ledger { flex: 1; display: flex; flex-direction: column; gap: 0; }
+  .s-cal .row {
+    display: grid;
+    grid-template-columns: 92px 1.6fr 0.9fr 80px;
+    gap: clamp(14px, 1.4vw, 28px);
+    align-items: center;
+    padding: clamp(10px, 1.3vh, 18px) 0;
+    border-bottom: 1px solid rgba(27,37,102,0.2);
+  }
+  .s-cal .row .date { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: clamp(13px, 0.95vw, 16px); color: var(--ink); letter-spacing: 0.02em; }
+  .s-cal .row .ttl  { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(20px, 1.6vw, 30px); line-height: 1.15; color: var(--ink); }
+  .s-cal .row .ttl em { font-style: italic; }
+  .s-cal .row .ven  { font-family: 'Archivo', sans-serif; font-size: clamp(14px, 0.92vw, 15px); color: var(--ink); }
+  .s-cal .row .dur  { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: clamp(12px, 0.84vw, 14px); color: var(--ink); text-align: right; letter-spacing: 0.04em; opacity: 0.78; }
+  .s-cal .row.headrow { border-bottom: 1px solid var(--ink); padding-bottom: 8px; }
+  .s-cal .row.headrow > div { font-family: 'Archivo', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; font-size: clamp(10px, 0.7vw, 12px); color: var(--ink); }
+  /* ──────────────────────────────────────────────────────────────────
+     SLIDE 8 — COLOPHON (mirror of cover, inverted)
+     ────────────────────────────────────────────────────────────────── */
+  .s-colophon { background: var(--paper); }
+  .s-colophon .glow {
+    position: absolute; inset: 0; pointer-events: none;
+    background:
+      radial-gradient(ellipse 55% 50% at 50% 110%, rgba(241,238,46,0.85) 0%, rgba(241,238,46,0.5) 35%, rgba(240,218,124,0.18) 60%, rgba(233,229,219,0) 84%),
+      radial-gradient(ellipse 30% 30% at 12% 18%, rgba(226,107,74,0.18) 0%, rgba(226,107,74,0) 70%);
+  }
+  .s-colophon .blocks {
+    position: absolute; inset: 0;
+    pointer-events: none;
+    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: repeat(8, 1fr);
+  }
+  .s-colophon .blocks .b1 { background: rgba(241,238,46,0.55); grid-column: 1 / 3; grid-row: 1 / 3; }
+  .s-colophon .blocks .b2 { background: rgba(241,238,46,0.4);  grid-column: 4; grid-row: 5 / 8; }
+  .s-colophon .titlewrap {
+    position: absolute;
+    left: clamp(40px, 4vw, 76px);
+    top: clamp(36px, 4vh, 72px);
+    z-index: 5;
+    max-width: 92%;
+  }
+  .s-colophon .ktag {
+    font-family: 'Archivo', sans-serif; font-weight: 600; text-transform: uppercase;
+    letter-spacing: 0.22em; font-size: clamp(11px, 0.82vw, 13px); color: var(--ink); margin-bottom: clamp(12px, 1.4vh, 22px);
+  }
+  .s-colophon .ttl {
+    font-family: 'Instrument Serif', Georgia, serif;
+    font-size: clamp(80px, min(10vw, 16vh), 200px);
+    line-height: 0.86;
+    color: var(--ink);
+    letter-spacing: -0.018em;
+  }
+  .s-colophon .ttl em { font-style: italic; }
+  .s-colophon .colofo {
+    position: absolute;
+    left: clamp(40px, 4vw, 76px);
+    bottom: clamp(70px, 8vh, 120px);
+    right: clamp(40px, 4vw, 76px);
+    display: grid;
+    grid-template-columns: 1.2fr 1.1fr 1fr 1.4fr;
+    gap: clamp(20px, 2.4vw, 44px);
+    z-index: 5;
+  }
+  .s-colophon .colofo > div {
+    border-top: 1px solid var(--ink);
+    padding-top: clamp(10px, 1.2vh, 16px);
+  }
+  .s-colophon .colofo .ftag { text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; font-size: clamp(10px, 0.72vw, 12px); margin-bottom: 6px; color: var(--ink); }
+  .s-colophon .colofo .ftxt { font-family: 'Archivo', sans-serif; font-size: clamp(11px, 0.78vw, 13px); line-height: 1.5; color: var(--ink); }
+</style>
+</head>
+<body>
+<div class="deck">
+  <div class="stage">
+    <!-- 1. COVER ──────────────────────────────────────────────────── -->
+    <section class="slide s-cover active">
+      <div class="blocks" aria-hidden="true">
+        <div class="b1"></div><div class="b2"></div><div class="b3"></div><div class="b4"></div>
+      </div>
+      <div class="sunglow" aria-hidden="true"></div>
+      <div class="date-rail">02.05—<br/>11.10.2026</div>
+      <div class="titlewrap">
+        <h1 class="title">Aurora<br/><em>Programme</em></h1>
+        <div class="caption subline">Annual Survey · Issue No. 04</div>
+      </div>
+      <div class="footer-row">
+        <div>
+          <div class="caption ftag">Hosted by</div>
+          <div class="caption ftxt">Aurora Institute<br/>for Public Form</div>
+        </div>
+        <div>
+          <div class="caption ftag">Edition</div>
+          <div class="caption ftxt">Fourth annual<br/>open programme</div>
+        </div>
+        <div>
+          <div class="caption ftag">Reading</div>
+          <div class="caption ftxt">A field study of light,<br/>matter and atmosphere</div>
+        </div>
+        <div>
+          <div class="caption ftag">Notes</div>
+          <div class="caption fdesc">Six months of exhibitions, residencies and public lectures across three pavilions, mapped against a slow-changing palette of yellow.</div>
+        </div>
+      </div>
+      <div class="pagenum">01 / 08</div>
+    </section>
+    <!-- 2. MANIFESTO ──────────────────────────────────────────────── -->
+    <section class="slide s-manifesto">
+      <div class="haze" aria-hidden="true"></div>
+      <p class="quote">A room is a slow argument with the sun. We have spent four years listening for what it answers.</p>
+      <div class="attr">From the Aurora Charter, 2023</div>
+      <div class="pagenum">02 / 08</div>
+    </section>
+    <!-- 3. PROGRAMME ──────────────────────────────────────────────── -->
+    <section class="slide s-programme">
+      <div class="left">
+        <div class="kicker">Strands · 2026</div>
+        <div>
+          <div class="word">Programme</div>
+        </div>
+        <div class="meta">Six interlocking strands run across the year. Each is independently curated, but every strand answers to the same question: what does light know that we don't?</div>
+      </div>
+      <div class="right">
+        <div class="head caption">Strand · Title · Anchor</div>
+        <div class="strands">
+          <div class="strand">
+            <div class="num">01</div>
+            <div>
+              <h3>Slow Atmospheres</h3>
+              <p>A reading room of long-form essays, drawings and weather notebooks, organised around the changing yellow of late afternoon.</p>
+            </div>
+          </div>
+          <div class="strand">
+            <div class="num">02</div>
+            <div>
+              <h3>Public Form</h3>
+              <p>Three commissions in three pavilions, each examining how a public square wears its own light over the course of a season.</p>
+            </div>
+          </div>
+          <div class="strand">
+            <div class="num">03</div>
+            <div>
+              <h3>Field Notes</h3>
+              <p>A residency programme drawing artists, architects and meteorologists together for a hundred days of recording, drawing and arguing.</p>
+            </div>
+          </div>
+          <div class="strand">
+            <div class="num">04</div>
+            <div>
+              <h3>Quiet Editions</h3>
+              <p>A typographic publishing strand committed to printing only what asks to be read in daylight, on warm paper, slowly.</p>
+            </div>
+          </div>
+          <div class="strand">
+            <div class="num">05</div>
+            <div>
+              <h3>Open Conversations</h3>
+              <p>Twelve evenings of public talks, paired with a meal and a question: what is the weather like in your work?</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="pagenum">03 / 08</div>
+    </section>
+    <!-- 4. CHAPTER DIVIDER ────────────────────────────────────────── -->
+    <section class="slide s-chapter">
+      <div class="glow" aria-hidden="true"></div>
+      <div class="caption vrail">First Chapter — Slow Atmospheres</div>
+      <div class="stack">
+        <div class="nm">01</div>
+        <div class="ttl">A reading of the season's quietest hours</div>
+        <p class="lede">In its first chapter the Aurora Programme convenes around the slowest light of the year: the long minutes after the sun has gone but before the room has admitted it. We open the year in March, in three rooms, in three cities, with three lamps left burning past closing.</p>
+      </div>
+      <div class="pagenum">04 / 08</div>
+    </section>
+    <!-- 5. DATA ──────────────────────────────────────────────────── -->
+    <section class="slide s-data">
+      <div class="glow" aria-hidden="true"></div>
+      <div class="frame">
+        <div class="head">
+          <div class="h">Public attendance</div>
+          <div class="caption lab">Open programme · 2022—2026</div>
+        </div>
+        <div class="col-a">
+          <div class="stat">
+            <div class="v">182<sup>k</sup></div>
+            <div class="caption lab2">Visitors · Year four</div>
+            <div class="desc">A 2.4× rise on the inaugural year, drawn from a programme that grew slower than the audience.</div>
+          </div>
+          <div class="stat">
+            <div class="v">7<sup>4%</sup></div>
+            <div class="caption lab2">Returning audience</div>
+            <div class="desc">Three quarters of last year's visitors came back; nearly half came back twice.</div>
+          </div>
+        </div>
+        <div class="chart">
+          <div class="row"><div class="caption yr">2022</div><div class="bar" style="width: 32%"></div><div class="caption val">76,400</div></div>
+          <div class="row"><div class="caption yr">2023</div><div class="bar" style="width: 48%"></div><div class="caption val">112,800</div></div>
+          <div class="row"><div class="caption yr">2024</div><div class="bar" style="width: 62%"></div><div class="caption val">141,200</div></div>
+          <div class="row"><div class="caption yr">2025</div><div class="bar" style="width: 72%"></div><div class="caption val">164,900</div></div>
+          <div class="row"><div class="caption yr">2026</div><div class="bar lit" style="width: 86%"></div><div class="caption val">182,300</div></div>
+        </div>
+      </div>
+      <div class="pagenum">05 / 08</div>
+    </section>
+    <!-- 6. QUOTE ──────────────────────────────────────────────────── -->
+    <section class="slide s-quote">
+      <div class="yblock" aria-hidden="true"></div>
+      <div class="glow" aria-hidden="true"></div>
+      <div class="qwrap">
+        <div class="caption qkicker">A note from the curator</div>
+        <p class="qbody">The yellow we use is not the yellow we mean. It is the yellow that arrives ten minutes after we leave the building.</p>
+        <div class="qattr">
+          <div class="caption who">Idun Reijners</div>
+          <div class="caption role">Curator-at-large, Aurora Institute · letter to the editorial board, January 2026</div>
+        </div>
+      </div>
+      <div class="y-mark" aria-hidden="true">¨</div>
+      <div class="pagenum">06 / 08</div>
+    </section>
+    <!-- 7. CALENDAR ──────────────────────────────────────────────── -->
+    <section class="slide s-cal">
+      <div class="glow" aria-hidden="true"></div>
+      <div class="frame">
+        <div class="topbar">
+          <div class="h">Public calendar</div>
+          <div class="caption lab">Selected dates · May—October</div>
+        </div>
+        <div class="ledger">
+          <div class="row headrow"><div class="caption">Date</div><div class="caption">Title</div><div class="caption">Venue</div><div class="caption">Length</div></div>
+          <div class="row">
+            <div class="caption date">02.05</div>
+            <div class="ttl"><em>The Long Yellow</em>, opening lecture</div>
+            <div class="ven">Pavilion of Quiet Form, Rotterdam</div>
+            <div class="caption dur">90 min</div>
+          </div>
+          <div class="row">
+            <div class="caption date">17.05</div>
+            <div class="ttl">A walk through the season's first room</div>
+            <div class="ven">Reading Garden, Pavilion North</div>
+            <div class="caption dur">2 hr</div>
+          </div>
+          <div class="row">
+            <div class="caption date">06.06</div>
+            <div class="ttl"><em>Public Form 01</em> — opening</div>
+            <div class="ven">Square of the Slow Sun, Antwerp</div>
+            <div class="caption dur">All day</div>
+          </div>
+          <div class="row">
+            <div class="caption date">28.06</div>
+            <div class="ttl">Field Notes residency, week one supper</div>
+            <div class="ven">House of the Half Window</div>
+            <div class="caption dur">3 hr</div>
+          </div>
+          <div class="row">
+            <div class="caption date">19.07</div>
+            <div class="ttl"><em>A Letter to the Sun</em>, evening reading</div>
+            <div class="ven">Aurora Library, room 3</div>
+            <div class="caption dur">75 min</div>
+          </div>
+          <div class="row">
+            <div class="caption date">14.08</div>
+            <div class="ttl">Quiet Editions — print fair &amp; book launch</div>
+            <div class="ven">Type Garden, Pavilion South</div>
+            <div class="caption dur">2 days</div>
+          </div>
+          <div class="row">
+            <div class="caption date">22.09</div>
+            <div class="ttl">Open Conversations · meteorology &amp; drawing</div>
+            <div class="ven">Reading Room, ground floor</div>
+            <div class="caption dur">2 hr</div>
+          </div>
+          <div class="row">
+            <div class="caption date">11.10</div>
+            <div class="ttl"><em>The Last Window</em>, closing performance</div>
+            <div class="ven">Pavilion of Quiet Form, Rotterdam</div>
+            <div class="caption dur">60 min</div>
+          </div>
+        </div>
+      </div>
+      <div class="pagenum">07 / 08</div>
+    </section>
+    <!-- 8. COLOPHON ──────────────────────────────────────────────── -->
+    <section class="slide s-colophon">
+      <div class="blocks" aria-hidden="true">
+        <div class="b1"></div><div class="b2"></div>
+      </div>
+      <div class="glow" aria-hidden="true"></div>
+      <div class="titlewrap">
+        <div class="caption ktag">Colophon · Programme 04</div>
+        <h2 class="ttl">With thanks<br/>to the slow<br/><em>readers.</em></h2>
+      </div>
+      <div class="colofo">
+        <div>
+          <div class="caption ftag">Curated by</div>
+          <div class="caption ftxt">Idun Reijners<br/>with the editorial board</div>
+        </div>
+        <div>
+          <div class="caption ftag">Designed</div>
+          <div class="caption ftxt">In daylight, on warm paper,<br/>over fourteen weeks</div>
+        </div>
+        <div>
+          <div class="caption ftag">Hosts</div>
+          <div class="caption ftxt">Aurora Institute<br/>Pavilion of Quiet Form<br/>Reading Garden</div>
+        </div>
+        <div>
+          <div class="caption ftag">Until next year</div>
+          <div class="caption ftxt">The fifth programme opens in May 2027. Look for the yellow on the door.</div>
+        </div>
+      </div>
+      <div class="pagenum">08 / 08</div>
+    </section>
+  </div>
+</div>
+<div class="caption nav-hint">← / → · space</div>
+<script>
+  // Plain vanilla navigation: arrows, space, home/end, swipe.
+  // Show only the active slide via class toggle.
+  const slides = Array.from(document.querySelectorAll('.slide'));
+  let current = 0;
+  function show(i) {
+    if (i < 0) i = 0;
+    if (i > slides.length - 1) i = slides.length - 1;
+    slides[current].classList.remove('active');
+    slides[i].classList.add('active');
+    current = i;
+  }
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowRight' || e.key === 'PageDown' || e.key === ' ') { e.preventDefault(); show(current + 1); }
+    else if (e.key === 'ArrowLeft' || e.key === 'PageUp') { e.preventDefault(); show(current - 1); }
+    else if (e.key === 'Home') { e.preventDefault(); show(0); }
+    else if (e.key === 'End') { e.preventDefault(); show(slides.length - 1); }
+  });
+  // Touch swipe — basic horizontal recogniser
+  let tx = null;
+  document.addEventListener('touchstart', (e) => { tx = e.touches[0].clientX; }, { passive: true });
+  document.addEventListener('touchend', (e) => {
+    if (tx == null) return;
+    const dx = e.changedTouches[0].clientX - tx;
+    if (Math.abs(dx) > 40) show(current + (dx < 0 ? 1 : -1));
+    tx = null;
+  });
+</script>
+</body>
+</html>