{
  "id": "midnight-reel-appeal",
  "name": "Projector Appeal",
  "theme": "midnight-reel",
  "category": "Marketing",
  "description": "A fundraising page where the ask is a single line, the progress is a hairline rather than a bar, and the reasons are told as three short paragraphs in the dark.",
  "layout": "A centred 54ch column on an otherwise empty page, with a full-width hairline progress rule sitting directly under the target figure and a three-up reason band at the bottom.",
  "modules": [
    {
      "key": "ask",
      "name": "The ask",
      "html": "\n<div class=\"ak\"><span class=\"k\">Appeal · closes 31 October</span>\n<h1>Our 35mm projector needs a new intermittent movement.</h1>\n<p class=\"lede\">It is the part that holds each frame still for one forty-eighth of a second. Ours has done that about four hundred million times and it is beginning to weave.</p></div>"
    },
    {
      "key": "progress",
      "name": "Progress",
      "html": "\n<div class=\"pg\"><div class=\"fg\"><b>£14,820</b><span class=\"k\">raised of £22,000</span></div><div class=\"tr\"><i style=\"--p:67%\"></i></div><div class=\"mt\"><span>412 donors</span><span>67%</span><span>26 days left</span></div></div>"
    },
    {
      "key": "reasons",
      "name": "Reasons",
      "html": "\n<section class=\"rs\">\n  <div><span class=\"n\">01</span><p>Nine of the films in this autumn's programme exist as prints and nothing else. Without a working projector they simply do not screen here.</p></div>\n  <div><span class=\"n\">02</span><p>The part is made by one workshop in Milan and takes fourteen weeks. Ordering it in November means being dark in February.</p></div>\n  <div><span class=\"n\">03</span><p>We have never charged more than five pounds to a member and we would like not to start now.</p></div>\n</section>"
    },
    {
      "key": "give",
      "name": "Give bar",
      "html": "\n<footer class=\"gv\"><div class=\"amts\"><button type=\"button\">£10</button><button type=\"button\" class=\"on\">£25</button><button type=\"button\">£50</button><button type=\"button\">£120</button><button type=\"button\">Other</button></div><button type=\"button\" class=\"go\">Give £25</button></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "midnight-reel-appeal",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T19:45:54+09:00",
    "updatedAt": "2026-09-01T19:45:54+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/midnight-reel-appeal.json",
  "structure": "A centred 54ch column on an otherwise empty page, with a full-width hairline progress rule sitting directly under the target figure and a three-up reason band at the bottom.",
  "html": "<div class=\"dz dz-midnight-reel-appeal\" data-design=\"midnight-reel-appeal\" data-theme=\"midnight-reel\">\n<section class=\"dz-mod\" data-mod=\"ask\" aria-label=\"The ask\">\n<div class=\"ak\"><span class=\"k\">Appeal · closes 31 October</span>\n<h1>Our 35mm projector needs a new intermittent movement.</h1>\n<p class=\"lede\">It is the part that holds each frame still for one forty-eighth of a second. Ours has done that about four hundred million times and it is beginning to weave.</p></div></section>\n<section class=\"dz-mod\" data-mod=\"progress\" aria-label=\"Progress\">\n<div class=\"pg\"><div class=\"fg\"><b>£14,820</b><span class=\"k\">raised of £22,000</span></div><div class=\"tr\"><i style=\"--p:67%\"></i></div><div class=\"mt\"><span>412 donors</span><span>67%</span><span>26 days left</span></div></div></section>\n<section class=\"dz-mod\" data-mod=\"reasons\" aria-label=\"Reasons\">\n<section class=\"rs\">\n  <div><span class=\"n\">01</span><p>Nine of the films in this autumn's programme exist as prints and nothing else. Without a working projector they simply do not screen here.</p></div>\n  <div><span class=\"n\">02</span><p>The part is made by one workshop in Milan and takes fourteen weeks. Ordering it in November means being dark in February.</p></div>\n  <div><span class=\"n\">03</span><p>We have never charged more than five pounds to a member and we would like not to start now.</p></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"give\" aria-label=\"Give bar\">\n<footer class=\"gv\"><div class=\"amts\"><button type=\"button\">£10</button><button type=\"button\" class=\"on\">£25</button><button type=\"button\">£50</button><button type=\"button\">£120</button><button type=\"button\">Other</button></div><button type=\"button\" class=\"go\">Give £25</button></footer></section>\n</div>",
  "css": "\n.dz-midnight-reel-appeal { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 0 40px 36px; }\n.dz-midnight-reel-appeal .ak { max-width: 54ch; margin: 60px auto 44px; text-align: center; }\n.dz-midnight-reel-appeal .k { font-size: 12.5px; color: var(--muted-foreground); }\n.dz-midnight-reel-appeal .ak h1 { font-family: var(--pv-display); font-size: 46px; font-weight: 500; line-height: 1.08; margin: 14px 0 22px; }\n.dz-midnight-reel-appeal .lede { font-size: 18px; line-height: 1.58; color: var(--muted-foreground); margin: 0; }\n.dz-midnight-reel-appeal .pg { border-top: var(--pv-bw) solid var(--border); border-bottom: var(--pv-bw) solid var(--border); padding: 24px 0; }\n.dz-midnight-reel-appeal .fg { display: flex; align-items: baseline; gap: 14px; justify-content: center; }\n.dz-midnight-reel-appeal .fg b { font-family: var(--pv-mono); font-size: 40px; font-weight: 700; color: var(--primary); }\n.dz-midnight-reel-appeal .tr { height: 1px; background: var(--border); margin: 20px 0 12px; position: relative; }\n.dz-midnight-reel-appeal .tr i { position: absolute; left: 0; top: -1px; height: 3px; width: var(--p); background: var(--primary); }\n.dz-midnight-reel-appeal .mt { display: flex; justify-content: space-between; font-family: var(--pv-mono); font-size: 11.5px; color: var(--muted-foreground); }\n.dz-midnight-reel-appeal .rs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 40px 0; }\n.dz-midnight-reel-appeal .n { font-family: var(--pv-mono); font-size: 12px; color: var(--primary); }\n.dz-midnight-reel-appeal .rs p { font-size: 15px; line-height: 1.6; color: var(--muted-foreground); margin: 10px 0 0; }\n.dz-midnight-reel-appeal .gv { display: flex; align-items: center; gap: 20px; justify-content: center; padding-top: 26px; border-top: var(--pv-bw) solid var(--border); }\n.dz-midnight-reel-appeal .amts { display: flex; gap: 10px; }\n.dz-midnight-reel-appeal .amts button { font: inherit; font-size: 14px; font-family: var(--pv-mono); background: transparent; color: var(--muted-foreground); border: var(--pv-bw) solid var(--border); border-radius: 0; padding: 10px 16px; cursor: pointer; transition: all var(--dur) var(--ease); }\n.dz-midnight-reel-appeal .amts button:hover { color: var(--foreground); border-color: var(--primary); }\n.dz-midnight-reel-appeal .amts .on { color: var(--primary); border-color: var(--primary); }\n.dz-midnight-reel-appeal .go { font: inherit; font-size: 14px; background: var(--primary); color: var(--primary-foreground); border: 1px solid var(--primary); border-radius: 0; padding: 12px 30px; cursor: pointer; }\n@media (prefers-reduced-motion: reduce) { .dz-midnight-reel-appeal *, .dz-midnight-reel-appeal *::before, .dz-midnight-reel-appeal *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/midnight-reel.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Lora:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
}