{
  "id": "curtain-call-seatmap",
  "name": "Seat Selection",
  "theme": "curtain-call",
  "category": "Commerce",
  "description": "A booking screen where the seat map is the page and the price bands are read off the map itself rather than from a legend you have to hold in your head.",
  "layout": "A 2fr/1fr split with the stage-up seat map filling the left and a sticky order well on the right that is darker than the ground rather than lighter.",
  "modules": [
    {
      "key": "bar",
      "name": "Performance bar",
      "html": "\n<header class=\"pb\"><div><h1>A Number</h1><p>Thursday 12 June, 19:30 · Marlowe Playhouse</p></div><span class=\"mono\">60 min · no interval</span></header>"
    },
    {
      "key": "map",
      "name": "Seat map",
      "html": "\n<section class=\"mp\">\n  <div class=\"stage\">Stage</div>\n  <div class=\"rows\">\n    <div class=\"row\"><span class=\"rl\">A</span><i class=\"s p1\"></i><i class=\"s p1\"></i><i class=\"s p1 sel\"></i><i class=\"s p1 sel\"></i><i class=\"s p1\"></i><i class=\"s gone\"></i><i class=\"s gone\"></i><i class=\"s p1\"></i><i class=\"s p1\"></i><i class=\"s p1\"></i><span class=\"rl\">A</span></div>\n    <div class=\"row\"><span class=\"rl\">B</span><i class=\"s p1\"></i><i class=\"s gone\"></i><i class=\"s p1\"></i><i class=\"s p1\"></i><i class=\"s p1\"></i><i class=\"s p1\"></i><i class=\"s p1\"></i><i class=\"s p1\"></i><i class=\"s gone\"></i><i class=\"s p1\"></i><span class=\"rl\">B</span></div>\n    <div class=\"row\"><span class=\"rl\">C</span><i class=\"s p2\"></i><i class=\"s p2\"></i><i class=\"s p2\"></i><i class=\"s p2\"></i><i class=\"s p2\"></i><i class=\"s p2\"></i><i class=\"s gone\"></i><i class=\"s p2\"></i><i class=\"s p2\"></i><i class=\"s p2\"></i><span class=\"rl\">C</span></div>\n    <div class=\"row\"><span class=\"rl\">D</span><i class=\"s p2\"></i><i class=\"s p2\"></i><i class=\"s gone\"></i><i class=\"s gone\"></i><i class=\"s p2\"></i><i class=\"s p2\"></i><i class=\"s p2\"></i><i class=\"s p2\"></i><i class=\"s p2\"></i><i class=\"s p2\"></i><span class=\"rl\">D</span></div>\n    <div class=\"row\"><span class=\"rl\">E</span><i class=\"s p3\"></i><i class=\"s p3\"></i><i class=\"s p3\"></i><i class=\"s p3\"></i><i class=\"s p3\"></i><i class=\"s p3\"></i><i class=\"s p3\"></i><i class=\"s p3\"></i><i class=\"s p3\"></i><i class=\"s p3\"></i><span class=\"rl\">E</span></div>\n  </div>\n  <ul class=\"bands\"><li><i class=\"s p1\"></i>Band A · £46</li><li><i class=\"s p2\"></i>Band B · £34</li><li><i class=\"s p3\"></i>Band C · £22</li><li><i class=\"s gone\"></i>Unavailable</li></ul>\n</section>"
    },
    {
      "key": "order",
      "name": "Order well",
      "html": "\n<aside class=\"or\"><h2>Your seats</h2>\n<ul class=\"ol2\"><li><span>Row A, seat 3</span><span class=\"mono\">£46.00</span></li><li><span>Row A, seat 4</span><span class=\"mono\">£46.00</span></li></ul>\n<dl><div><dt>Seats</dt><dd class=\"mono\">2</dd></div><div><dt>Booking fee</dt><dd class=\"mono\">£0.00</dd></div><div class=\"tot\"><dt>Total</dt><dd class=\"mono\">£92.00</dd></div></dl>\n<a class=\"btn\" href=\"#\">Hold these seats</a>\n<p class=\"hint\">Held for 12 minutes. Members may exchange up to four hours before curtain.</p></aside>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "curtain-call-seatmap",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T23:32:27+09:00",
    "updatedAt": "2026-09-01T23:32:27+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/curtain-call-seatmap.json",
  "structure": "A 2fr/1fr split with the stage-up seat map filling the left and a sticky order well on the right that is darker than the ground rather than lighter.",
  "html": "<div class=\"dz dz-curtain-call-seatmap\" data-design=\"curtain-call-seatmap\" data-theme=\"curtain-call\">\n<section class=\"dz-mod\" data-mod=\"bar\" aria-label=\"Performance bar\">\n<header class=\"pb\"><div><h1>A Number</h1><p>Thursday 12 June, 19:30 · Marlowe Playhouse</p></div><span class=\"mono\">60 min · no interval</span></header></section><div class=\"split\"><section class=\"dz-mod\" data-mod=\"map\" aria-label=\"Seat map\">\n<section class=\"mp\">\n  <div class=\"stage\">Stage</div>\n  <div class=\"rows\">\n    <div class=\"row\"><span class=\"rl\">A</span><i class=\"s p1\"></i><i class=\"s p1\"></i><i class=\"s p1 sel\"></i><i class=\"s p1 sel\"></i><i class=\"s p1\"></i><i class=\"s gone\"></i><i class=\"s gone\"></i><i class=\"s p1\"></i><i class=\"s p1\"></i><i class=\"s p1\"></i><span class=\"rl\">A</span></div>\n    <div class=\"row\"><span class=\"rl\">B</span><i class=\"s p1\"></i><i class=\"s gone\"></i><i class=\"s p1\"></i><i class=\"s p1\"></i><i class=\"s p1\"></i><i class=\"s p1\"></i><i class=\"s p1\"></i><i class=\"s p1\"></i><i class=\"s gone\"></i><i class=\"s p1\"></i><span class=\"rl\">B</span></div>\n    <div class=\"row\"><span class=\"rl\">C</span><i class=\"s p2\"></i><i class=\"s p2\"></i><i class=\"s p2\"></i><i class=\"s p2\"></i><i class=\"s p2\"></i><i class=\"s p2\"></i><i class=\"s gone\"></i><i class=\"s p2\"></i><i class=\"s p2\"></i><i class=\"s p2\"></i><span class=\"rl\">C</span></div>\n    <div class=\"row\"><span class=\"rl\">D</span><i class=\"s p2\"></i><i class=\"s p2\"></i><i class=\"s gone\"></i><i class=\"s gone\"></i><i class=\"s p2\"></i><i class=\"s p2\"></i><i class=\"s p2\"></i><i class=\"s p2\"></i><i class=\"s p2\"></i><i class=\"s p2\"></i><span class=\"rl\">D</span></div>\n    <div class=\"row\"><span class=\"rl\">E</span><i class=\"s p3\"></i><i class=\"s p3\"></i><i class=\"s p3\"></i><i class=\"s p3\"></i><i class=\"s p3\"></i><i class=\"s p3\"></i><i class=\"s p3\"></i><i class=\"s p3\"></i><i class=\"s p3\"></i><i class=\"s p3\"></i><span class=\"rl\">E</span></div>\n  </div>\n  <ul class=\"bands\"><li><i class=\"s p1\"></i>Band A · £46</li><li><i class=\"s p2\"></i>Band B · £34</li><li><i class=\"s p3\"></i>Band C · £22</li><li><i class=\"s gone\"></i>Unavailable</li></ul>\n</section></section><section class=\"dz-mod\" data-mod=\"order\" aria-label=\"Order well\">\n<aside class=\"or\"><h2>Your seats</h2>\n<ul class=\"ol2\"><li><span>Row A, seat 3</span><span class=\"mono\">£46.00</span></li><li><span>Row A, seat 4</span><span class=\"mono\">£46.00</span></li></ul>\n<dl><div><dt>Seats</dt><dd class=\"mono\">2</dd></div><div><dt>Booking fee</dt><dd class=\"mono\">£0.00</dd></div><div class=\"tot\"><dt>Total</dt><dd class=\"mono\">£92.00</dd></div></dl>\n<a class=\"btn\" href=\"#\">Hold these seats</a>\n<p class=\"hint\">Held for 12 minutes. Members may exchange up to four hours before curtain.</p></aside></section></div>\n</div>",
  "css": "\n.dz-curtain-call-seatmap { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 0 30px 30px; }\n.dz-curtain-call-seatmap .pb { display: flex; justify-content: space-between; align-items: baseline; padding: 22px 0 18px; border-bottom: 1px solid var(--border); }\n.dz-curtain-call-seatmap .pb h1 { font-family: var(--pv-display); font-weight: 400; letter-spacing: -.015em; font-size: 40px; margin: 0; }\n.dz-curtain-call-seatmap .pb p { margin: 4px 0 0; color: var(--muted-foreground); font-size: 14px; }\n.dz-curtain-call-seatmap .mono { font-family: var(--pv-mono); font-size: 13px; letter-spacing: .01em; color: var(--muted-foreground); }\n.dz-curtain-call-seatmap .split { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; align-items: start; margin-top: 28px; }\n.dz-curtain-call-seatmap .mp { background: var(--card); border-radius: var(--pv-radius); padding: 26px; }\n.dz-curtain-call-seatmap .stage { text-align: center; font-family: var(--pv-mono); font-size: 13px; letter-spacing: .01em; color: var(--muted-foreground); border-bottom: 2px solid var(--border); padding-bottom: 10px; margin-bottom: 28px; }\n.dz-curtain-call-seatmap .rows { display: grid; gap: 10px; }\n.dz-curtain-call-seatmap .row { display: flex; gap: 8px; justify-content: center; align-items: center; }\n.dz-curtain-call-seatmap .rl { font-family: var(--pv-mono); font-size: 13px; letter-spacing: .01em; color: var(--muted-foreground); width: 18px; text-align: center; }\n.dz-curtain-call-seatmap .s { width: 26px; height: 22px; border-radius: 3px; display: inline-block; }\n.dz-curtain-call-seatmap .s.p1 { background: color-mix(in oklab, var(--primary) 26%, var(--card)); }\n.dz-curtain-call-seatmap .s.p2 { background: color-mix(in oklab, var(--primary) 16%, var(--card)); }\n.dz-curtain-call-seatmap .s.p3 { background: color-mix(in oklab, var(--primary) 8%, var(--card)); }\n.dz-curtain-call-seatmap .s.sel { background: var(--primary); }\n.dz-curtain-call-seatmap .s.gone { background: var(--muted); opacity: .55; }\n.dz-curtain-call-seatmap .bands { list-style: none; display: flex; gap: 20px; margin: 26px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted-foreground); }\n.dz-curtain-call-seatmap .bands li { display: flex; align-items: center; gap: 7px; }\n.dz-curtain-call-seatmap .or { background: color-mix(in oklab, var(--background) 84%, black); border-radius: var(--pv-radius); padding: 24px; position: sticky; top: 20px; }\n.dz-curtain-call-seatmap .or h2 { font-family: var(--pv-display); font-weight: 400; letter-spacing: -.015em; font-size: 23px; margin: 0 0 16px; }\n.dz-curtain-call-seatmap .ol2 { list-style: none; margin: 0 0 18px; padding: 0; }\n.dz-curtain-call-seatmap .ol2 li { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14px; }\n.dz-curtain-call-seatmap dl { margin: 0 0 20px; }\n.dz-curtain-call-seatmap dl div { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }\n.dz-curtain-call-seatmap dl .tot { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 12px; font-weight: 600; }\n.dz-curtain-call-seatmap dt, .dz-curtain-call-seatmap dd { margin: 0; }\n.dz-curtain-call-seatmap dt { color: var(--muted-foreground); }\n.dz-curtain-call-seatmap .btn { display: block; text-align: center; background: var(--primary); color: var(--primary-foreground); padding: 13px; border-radius: var(--pv-radius-sm); text-decoration: none; font-weight: 600; }\n.dz-curtain-call-seatmap .hint { font-size: 12px; color: var(--muted-foreground); margin: 12px 0 0; }\n",
  "requiredTheme": "/api/v1/themes/curtain-call.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Gloock:wght@400;500;600;700&family=Cabin:wght@400;500;600;700&family=Cutive+Mono:wght@400;500;600;700&display=swap"
}