From def29b6e9c26c50f17576d6428765690e548ba54 Mon Sep 17 00:00:00 2001
From: Alex Dunmow <alex@dx314.com>
Date: Sun, 5 Jul 2026 17:54:25 +0800
Subject: [PATCH] refactor: replace hand-rolled utility CSS with Tailwind
 classes (host build now scans theme templates)

---
 assets/style.css                           | 10 ----------
 blocks/private_dining.ninjatpl             |  2 +-
 manifest.yaml                              | 10 ----------
 templates/overrides/art-deco/hero.ninjatpl |  2 +-
 4 files changed, 2 insertions(+), 22 deletions(-)

diff --git a/assets/style.css b/assets/style.css
index cb351f4..9cfaf75 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -17,16 +17,6 @@
         margin: 0;
     }
 
-    /* deco-hero-compact — image-less hero: comfortable padding, no viewport-height balloon. */
-    .deco-hero-compact { padding-top: 4rem; padding-bottom: 4rem; }
-    @media (min-width: 768px) {
-        .deco-hero-compact { padding-top: 6rem; padding-bottom: 6rem; }
-    }
-
-    /* deco-stats — capacity/minimum figure row: guaranteed column gap so values never collide. */
-    .deco-stats { display: flex; flex-wrap: wrap; gap: 0.75rem 3rem; }
-    .deco-stats-center { justify-content: center; }
-
     /* deco-frame — stepped ziggurat frame, layered borders + clipped corners. */
     .deco-frame {
         position: relative;
diff --git a/blocks/private_dining.ninjatpl b/blocks/private_dining.ninjatpl
index 70a45aa..3fd67a6 100644
--- a/blocks/private_dining.ninjatpl
+++ b/blocks/private_dining.ninjatpl
@@ -7,7 +7,7 @@
       {% if eyebrow %}<div class="mb-3 flex items-center gap-4 {% if not hasImage %}justify-center{% endif %}"><span class="deco-rule w-10"></span><span class="deco-caps text-xs" style="color:hsl(var(--primary));">{{ eyebrow }}</span>{% if not hasImage %}<span class="deco-rule w-10"></span>{% endif %}</div>{% endif %}
       {% if title %}<h2 class="deco-caps text-3xl md:text-4xl" style="font-family:var(--font-heading, 'Cinzel', 'Italiana', Georgia, serif);color:hsl(var(--foreground));">{{ title }}</h2>{% endif %}
       {% if description %}<div class="mt-4 space-y-4 text-lg italic {% if not hasImage %}mx-auto max-w-xl{% endif %}" style="color:hsl(var(--muted-foreground));font-family:var(--font-body, 'Cormorant Garamond', Georgia, serif);">{{ description|safe }}</div>{% endif %}
-      {% if seats or minimum %}<dl class="deco-stats mt-6 {% if not hasImage %}deco-stats-center{% endif %}">{% if seats %}<div><dt class="deco-caps text-xs" style="color:hsl(var(--primary));">Capacity</dt><dd class="mt-1">{{ seats }}</dd></div>{% endif %}{% if minimum %}<div><dt class="deco-caps text-xs" style="color:hsl(var(--primary));">Minimum</dt><dd class="mt-1">{{ minimum }}</dd></div>{% endif %}</dl>{% endif %}
+      {% if seats or minimum %}<dl class="flex flex-wrap gap-x-12 gap-y-3 mt-6 {% if not hasImage %}justify-center{% endif %}">{% if seats %}<div><dt class="deco-caps text-xs" style="color:hsl(var(--primary));">Capacity</dt><dd class="mt-1">{{ seats }}</dd></div>{% endif %}{% if minimum %}<div><dt class="deco-caps text-xs" style="color:hsl(var(--primary));">Minimum</dt><dd class="mt-1">{{ minimum }}</dd></div>{% endif %}</dl>{% endif %}
       {% if enquireUrl %}<a href="{{ enquireUrl }}" class="deco-pill mt-8 inline-flex items-center gap-2">{{ enquireLabel|default:"Enquire" }}</a>{% endif %}
     </div>
   </div>
diff --git a/manifest.yaml b/manifest.yaml
index 8700749..97c3db4 100644
--- a/manifest.yaml
+++ b/manifest.yaml
@@ -128,16 +128,6 @@ css:
             margin: 0;
         }
 
-        /* deco-hero-compact — image-less hero: comfortable padding, no viewport-height balloon. */
-        .deco-hero-compact { padding-top: 4rem; padding-bottom: 4rem; }
-        @media (min-width: 768px) {
-            .deco-hero-compact { padding-top: 6rem; padding-bottom: 6rem; }
-        }
-
-        /* deco-stats — capacity/minimum figure row: guaranteed column gap so values never collide. */
-        .deco-stats { display: flex; flex-wrap: wrap; gap: 0.75rem 3rem; }
-        .deco-stats-center { justify-content: center; }
-
         /* deco-frame — stepped ziggurat frame, layered borders + clipped corners. */
         .deco-frame {
             position: relative;
diff --git a/templates/overrides/art-deco/hero.ninjatpl b/templates/overrides/art-deco/hero.ninjatpl
index 63d0ec2..2710637 100644
--- a/templates/overrides/art-deco/hero.ninjatpl
+++ b/templates/overrides/art-deco/hero.ninjatpl
@@ -32,7 +32,7 @@
 {% else %}
 {% set align = "center" %}
 {% if variant == "left-aligned" %}{% set align = "left" %}{% endif %}
-<section data-block-override="art-deco:hero" class="hero relative flex flex-col overflow-hidden bg-background text-foreground deco-grain {% if hasImage %}{% if minHeight == "screen" %}min-h-screen{% elif minHeight == "50vh" %}min-h-[50vh]{% elif minHeight == "auto" %}min-h-[400px]{% else %}min-h-[75vh]{% endif %}{% else %}deco-hero-compact{% endif %} {% if verticalAlign == "top" %}justify-start pt-20{% elif verticalAlign == "bottom" %}justify-end pb-20{% else %}justify-center{% endif %}{% if class %} {{ class }}{% endif %}">
+<section data-block-override="art-deco:hero" class="hero relative flex flex-col overflow-hidden bg-background text-foreground deco-grain {% if hasImage %}{% if minHeight == "screen" %}min-h-screen{% elif minHeight == "50vh" %}min-h-[50vh]{% elif minHeight == "auto" %}min-h-[400px]{% else %}min-h-[75vh]{% endif %}{% else %}py-16 md:py-24{% endif %} {% if verticalAlign == "top" %}justify-start pt-20{% elif verticalAlign == "bottom" %}justify-end pb-20{% else %}justify-center{% endif %}{% if class %} {{ class }}{% endif %}">
 {% if hasImage %}<div class="absolute inset-0 z-0">{% img backgroundImage alt=headlineText class="h-full w-full object-cover" layout="hero" %}{% if showOverlay %}<div class="absolute inset-0 {% if overlayColor == "light" %}bg-background/60{% elif overlayColor == "primary" %}bg-primary/50{% elif overlayOpacity <= 30 %}bg-black/30{% elif overlayOpacity <= 50 %}bg-black/50{% elif overlayOpacity <= 70 %}bg-black/70{% else %}bg-black/80{% endif %}"></div>{% endif %}</div>{% endif %}
 <div class="pointer-events-none absolute inset-x-0 top-0 z-[1] h-40 opacity-40 deco-sunburst" aria-hidden="true"></div>
 <div class="relative z-10 mx-auto w-full max-w-4xl px-4 sm:px-6 lg:px-8 {% if variant == "left-aligned" %}text-left{% else %}text-center{% endif %}"><div class="deco-frame bg-transparent px-6 py-10 sm:px-10 sm:py-14">{{ herocontent(align) }}</div></div>