{
  "id": "supper-club-service",
  "name": "Service Settings",
  "theme": "supper-club",
  "category": "Settings & Forms",
  "description": "Where the boundary hours are set — the one place in the system that admits the page changes by itself, and the only screen with a control for it.",
  "layout": "A centred narrow column of ruled setting rows with mono time fields, and a preview line showing which menu is live at the moment.",
  "modules": [
    {
      "key": "head",
      "name": "Settings head",
      "html": "\n<header class=\"sh\"><span class=\"k\">House settings</span><h1>Services</h1><p class=\"ld\">The site shows exactly one menu at a time. These hours decide which. There is no manual override, on purpose — a room that is serving lunch should not be able to show the dinner menu by accident.</p></header>"
    },
    {
      "key": "rows",
      "name": "Service rows",
      "html": "\n<section class=\"rw\"><h2 class=\"ch\">Boundaries</h2>\n<div class=\"r\"><span>Lunch begins</span><input class=\"mn\" value=\"12:00\"></div>\n<div class=\"r\"><span>Lunch ends, dinner menu appears</span><input class=\"mn\" value=\"17:30\"></div>\n<div class=\"r\"><span>Dinner begins</span><input class=\"mn\" value=\"18:00\"></div>\n<div class=\"r\"><span>Kitchen closes</span><input class=\"mn\" value=\"22:30\"></div>\n<div class=\"r\"><span>Overnight, show</span><input class=\"mn\" value=\"tomorrow's lunch\"></div>\n</section>"
    },
    {
      "key": "closed",
      "name": "Closed days",
      "html": "\n<section class=\"rw\"><h2 class=\"ch\">Closed</h2><div class=\"days\"><span class=\"dy\">Mon</span><span class=\"dy\">Tue</span><span class=\"dy\">Wed</span><span class=\"dy\">Thu</span><span class=\"dy\">Fri</span><span class=\"dy on\">Sat</span><span class=\"dy on\">Sun</span></div><p class=\"nt\">On a closed day the page shows the next service that will run, and the booking form defaults to it.</p></section>"
    },
    {
      "key": "now",
      "name": "Live preview",
      "html": "\n<footer class=\"lp\"><span class=\"k\">Right now the site is showing</span><p class=\"mn\">Dinner · 18.00 — 22.30 · changed at 17:30 today</p><button class=\"pri\">Save services</button></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "supper-club-service",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:20:59+09:00",
    "updatedAt": "2026-09-02T01:20:59+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/supper-club-service.json",
  "structure": "A centred narrow column of ruled setting rows with mono time fields, and a preview line showing which menu is live at the moment.",
  "html": "<div class=\"dz dz-supper-club-service\" data-design=\"supper-club-service\" data-theme=\"supper-club\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Settings head\">\n<header class=\"sh\"><span class=\"k\">House settings</span><h1>Services</h1><p class=\"ld\">The site shows exactly one menu at a time. These hours decide which. There is no manual override, on purpose — a room that is serving lunch should not be able to show the dinner menu by accident.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"rows\" aria-label=\"Service rows\">\n<section class=\"rw\"><h2 class=\"ch\">Boundaries</h2>\n<div class=\"r\"><span>Lunch begins</span><input class=\"mn\" value=\"12:00\"></div>\n<div class=\"r\"><span>Lunch ends, dinner menu appears</span><input class=\"mn\" value=\"17:30\"></div>\n<div class=\"r\"><span>Dinner begins</span><input class=\"mn\" value=\"18:00\"></div>\n<div class=\"r\"><span>Kitchen closes</span><input class=\"mn\" value=\"22:30\"></div>\n<div class=\"r\"><span>Overnight, show</span><input class=\"mn\" value=\"tomorrow's lunch\"></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"closed\" aria-label=\"Closed days\">\n<section class=\"rw\"><h2 class=\"ch\">Closed</h2><div class=\"days\"><span class=\"dy\">Mon</span><span class=\"dy\">Tue</span><span class=\"dy\">Wed</span><span class=\"dy\">Thu</span><span class=\"dy\">Fri</span><span class=\"dy on\">Sat</span><span class=\"dy on\">Sun</span></div><p class=\"nt\">On a closed day the page shows the next service that will run, and the booking form defaults to it.</p></section></section>\n<section class=\"dz-mod\" data-mod=\"now\" aria-label=\"Live preview\">\n<footer class=\"lp\"><span class=\"k\">Right now the site is showing</span><p class=\"mn\">Dinner · 18.00 — 22.30 · changed at 17:30 today</p><button class=\"pri\">Save services</button></footer></section>\n</div>",
  "css": "\n.dz-supper-club-service { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 40px; }\n.dz-supper-club-service .k { text-transform: uppercase; letter-spacing: .22em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-supper-club-service .mn { font-family: var(--pv-mono); font-size: 13px; }\n.dz-supper-club-service .sh, .dz-supper-club-service .rw, .dz-supper-club-service .lp { max-width: 58ch; margin: 0 auto; }\n.dz-supper-club-service h1 { font-family: var(--pv-display); font-weight: 300; font-size: 72px; line-height: 1.02; letter-spacing: -.02em; margin: 12px 0 14px; text-align: center; }\n.dz-supper-club-service .ld { font-size: 16.5px; line-height: 1.66; margin: 0; }\n.dz-supper-club-service .sh { text-align: center; }\n.dz-supper-club-service .ld { text-align: left; }\n.dz-supper-club-service .ch { text-transform: uppercase; letter-spacing: .22em; font-size: 10.5px; font-weight: 600; text-align: center; margin: 64px 0 30px; color: var(--muted-foreground); border-top: 1px solid var(--border); padding-top: 30px; }\n.dz-supper-club-service .r { display: flex; align-items: center; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 16.5px; }\n.dz-supper-club-service .r input { margin-left: auto; width: 180px; background: var(--card); border: 1px solid var(--border); border-radius: 2px; color: var(--foreground); font: inherit; font-family: var(--pv-mono); font-size: 13px; padding: 9px 12px; text-align: center; }\n.dz-supper-club-service .r input:focus { outline: none; border-color: var(--primary); }\n.dz-supper-club-service .days { display: flex; gap: 8px; }\n.dz-supper-club-service .dy { flex: 1; text-align: center; border: 1px solid var(--border); border-radius: 2px; padding: 12px 0; text-transform: uppercase; letter-spacing: .22em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-supper-club-service .dy.on { border-color: var(--primary); color: var(--primary); }\n.dz-supper-club-service .nt { font-size: 14px; line-height: 1.6; color: var(--muted-foreground); margin: 16px 0 0; }\n.dz-supper-club-service .lp { text-align: center; margin-top: 64px; padding-top: 30px; border-top: 1px solid var(--border); }\n.dz-supper-club-service .lp p { margin: 8px 0 20px; color: var(--accent); }\n.dz-supper-club-service .pri { background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 1px; padding: 14px 26px; font: inherit; text-transform: uppercase; letter-spacing: .22em; font-size: 10.5px; font-weight: 600; cursor: pointer; }\n@media (prefers-reduced-motion: reduce) { .dz-supper-club-service *, .dz-supper-club-service *::before, .dz-supper-club-service *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/supper-club.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Cardo:wght@400;500;600;700&family=Xanh+Mono:wght@400;500;600;700&display=swap"
}