{
  "id": "midnight-reel-join",
  "name": "Join",
  "theme": "midnight-reel",
  "category": "Auth & Onboarding",
  "description": "A sign-up that is one question at a time on a nearly empty black page, with the tall marquee photograph doing the persuading from the right edge.",
  "layout": "A 46/54 split where the form column is vertically centred with enormous margins and the photograph runs full-bleed from the top edge to the bottom on the right.",
  "modules": [
    {
      "key": "form",
      "name": "Join form",
      "html": "\n<div class=\"fm\"><span class=\"k\">Membership</span>\n<h1>Five pounds a film, for as long as you keep coming.</h1>\n<form>\n  <label><span>Your name</span><input type=\"text\" value=\"Nadia Okonjo-Bright\"></label>\n  <label><span>Email</span><input type=\"email\" value=\"nadia@example.org\"></label>\n  <fieldset><legend>Membership</legend>\n    <label class=\"rd\"><input type=\"radio\" name=\"mr-tier\" checked><span><b>Full · £60 a year</b><em>Every screening £5, two guest tickets a month, bar discount.</em></span></label>\n    <label class=\"rd\"><input type=\"radio\" name=\"mr-tier\"><span><b>Concession · £34 a year</b><em>Same benefits. We do not ask for proof.</em></span></label>\n  </fieldset>\n  <button type=\"button\" class=\"go\">Become a member</button>\n</form>\n<p class=\"fine\">Cancel any time. We do not sell the list, ever.</p></div>"
    },
    {
      "key": "plate",
      "name": "Marquee plate",
      "html": "\n<figure class=\"pl\"><img src=\"{{ART marquee}}\" alt=\"{{ARTALT marquee}}\"><figcaption>Ancoats Street, 1996 — the year the bulbs were last replaced.</figcaption></figure>"
    },
    {
      "key": "mark",
      "name": "Corner mark",
      "html": "\n<span class=\"mk\">The Midnight Reel</span>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "midnight-reel-join",
    "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-join.json",
  "structure": "A 46/54 split where the form column is vertically centred with enormous margins and the photograph runs full-bleed from the top edge to the bottom on the right.",
  "html": "<div class=\"dz dz-midnight-reel-join\" data-design=\"midnight-reel-join\" data-theme=\"midnight-reel\">\n<section class=\"dz-mod\" data-mod=\"mark\" aria-label=\"Corner mark\">\n<span class=\"mk\">The Midnight Reel</span></section><section class=\"dz-mod\" data-mod=\"form\" aria-label=\"Join form\">\n<div class=\"fm\"><span class=\"k\">Membership</span>\n<h1>Five pounds a film, for as long as you keep coming.</h1>\n<form>\n  <label><span>Your name</span><input type=\"text\" value=\"Nadia Okonjo-Bright\"></label>\n  <label><span>Email</span><input type=\"email\" value=\"nadia@example.org\"></label>\n  <fieldset><legend>Membership</legend>\n    <label class=\"rd\"><input type=\"radio\" name=\"mr-tier\" checked><span><b>Full · £60 a year</b><em>Every screening £5, two guest tickets a month, bar discount.</em></span></label>\n    <label class=\"rd\"><input type=\"radio\" name=\"mr-tier\"><span><b>Concession · £34 a year</b><em>Same benefits. We do not ask for proof.</em></span></label>\n  </fieldset>\n  <button type=\"button\" class=\"go\">Become a member</button>\n</form>\n<p class=\"fine\">Cancel any time. We do not sell the list, ever.</p></div></section><section class=\"dz-mod\" data-mod=\"plate\" aria-label=\"Marquee plate\">\n<figure class=\"pl\"><img src=\"https://designlookbook.dev/assets/img/midnight-reel-marquee.webp\" alt=\"Rows of unlit bulbs under a cinema canopy at night\"><figcaption>Ancoats Street, 1996 — the year the bulbs were last replaced.</figcaption></figure></section>\n</div>",
  "css": "\n.dz-midnight-reel-join { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 46fr 54fr; min-height: 560px; }\n.dz-midnight-reel-join .mk { position: absolute; top: 26px; left: 40px; font-family: var(--pv-display); font-size: 20px; }\n.dz-midnight-reel-join { position: relative; }\n.dz-midnight-reel-join .fm { align-self: center; padding: 50px 56px 50px 40px; }\n.dz-midnight-reel-join .k { font-size: 12.5px; color: var(--muted-foreground); }\n.dz-midnight-reel-join .fm h1 { font-family: var(--pv-display); font-size: 40px; font-weight: 500; line-height: 1.1; margin: 12px 0 30px; }\n.dz-midnight-reel-join form { display: flex; flex-direction: column; gap: 20px; }\n.dz-midnight-reel-join label { display: flex; flex-direction: column; gap: 8px; }\n.dz-midnight-reel-join label > span { font-size: 12.5px; color: var(--muted-foreground); }\n.dz-midnight-reel-join input[type=\"text\"], .dz-midnight-reel-join input[type=\"email\"] { font: inherit; font-size: 16px; background: transparent; color: var(--foreground); border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 8px 0; transition: border-color var(--dur) var(--ease); }\n.dz-midnight-reel-join input[type=\"text\"]:focus, .dz-midnight-reel-join input[type=\"email\"]:focus { outline: none; border-bottom-color: var(--primary); }\n.dz-midnight-reel-join fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }\n.dz-midnight-reel-join legend { font-size: 12.5px; color: var(--muted-foreground); padding: 0 0 12px; }\n.dz-midnight-reel-join .rd { flex-direction: row; align-items: flex-start; gap: 12px; cursor: pointer; }\n.dz-midnight-reel-join .rd input { margin-top: 4px; accent-color: var(--primary); width: 15px; height: 15px; }\n.dz-midnight-reel-join .rd b { display: block; font-size: 15.5px; font-weight: 500; }\n.dz-midnight-reel-join .rd em { display: block; font-style: normal; font-size: 13px; color: var(--muted-foreground); margin-top: 3px; }\n.dz-midnight-reel-join .go { font: inherit; font-size: 14px; align-self: flex-start; background: transparent; color: var(--primary); border: 1px solid var(--primary); border-radius: 0; padding: 12px 28px; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }\n.dz-midnight-reel-join .go:hover { background: var(--primary); color: var(--primary-foreground); }\n.dz-midnight-reel-join .fine { font-size: 12px; color: var(--muted-foreground); margin: 22px 0 0; }\n.dz-midnight-reel-join .pl { margin: 0; position: relative; }\n.dz-midnight-reel-join .pl img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-midnight-reel-join .pl figcaption { position: absolute; left: 26px; bottom: 24px; right: 26px; font-size: 12px; color: var(--muted-foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-midnight-reel-join *, .dz-midnight-reel-join *::before, .dz-midnight-reel-join *::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"
}