refactor: replace hand-rolled utility CSS with Tailwind classes (host build now scans theme templates)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

assets/style.css

@@ -252,42 +252,6 @@ body.pd-paper {
     }
 }
 
-/* --- Layout helpers (theme-owned, semantic tokens only) -----------------
+/* --- Menu list rhythm (complex child-combinator selector) --------------- */
- * Installed .bnp themes live outside the host Tailwind @source globs, so the
- * host build does NOT compile grid / aspect-ratio / gap / padding utilities
- * that appear only in this theme's own templates. The theme therefore owns
- * those layout primitives here as plain CSS: mobile-first, collapsing to a
- * single column on small screens, with explicit media queries so the render
- * is reliable regardless of the JIT content scan. No colors — layout only. */
-.pd-section { padding-top: 2.75rem; padding-bottom: 2.75rem; }
-@media (min-width: 768px) {
-    .pd-section { padding-top: 4rem; padding-bottom: 4rem; }
-}
-
-.pd-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
-@media (min-width: 640px) {
-    .pd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-}
-@media (min-width: 1024px) {
-    .pd-grid--lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-    .pd-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-    .pd-grid--lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-}
-
-/* Two-up menu board: one column on phones, two side by side from md. */
-.pd-menu-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem 3rem; }
-@media (min-width: 768px) {
-    .pd-menu-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-}
 .pd-menu-list { margin-top: 1rem; }
 .pd-menu-list > li + li { margin-top: 1.25rem; }
-
-/* Media frames: a fixed aspect box so a photo fills gracefully. The EMPTY
- * state is omitted in-template (no ballooning boxes when no photo is set). */
-.pd-media { position: relative; width: 100%; overflow: hidden; aspect-ratio: 4 / 3; }
-.pd-media--square { aspect-ratio: 1 / 1; }
-.pd-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
-
-/* Card body padding (host may not emit p-5 for theme templates). */
-.pd-card-body { padding: 1.25rem 1.25rem 1.5rem; }
-@media (min-width: 768px) { .pd-card-body { padding: 1.5rem; } }

blocks/bakers_note.ninjatpl

@@ -1,4 +1,4 @@
-<section data-block="pastel-dream:bakers_note" class="pd-section bg-background text-foreground{% if class %} {{ class }}{% endif %}">
+<section data-block="pastel-dream:bakers_note" class="py-11 md:py-16 bg-background text-foreground{% if class %} {{ class }}{% endif %}">
 	<div class="mx-auto max-w-3xl px-4">
 		<div class="pd-card relative overflow-hidden p-8 text-center md:p-12">
 			<div class="pointer-events-none absolute -right-16 -top-16 h-48 w-48 rounded-full bg-accent/15 pd-breathe" aria-hidden="true"></div>

blocks/cake_gallery.ninjatpl

@@ -1,15 +1,15 @@
-<section data-block="pastel-dream:cake_gallery" class="pd-section bg-background text-foreground{% if class %} {{ class }}{% endif %}">
+<section data-block="pastel-dream:cake_gallery" class="py-11 md:py-16 bg-background text-foreground{% if class %} {{ class }}{% endif %}">
 	<div class="mx-auto max-w-6xl px-4">
 		<div class="text-center">
 			{% if heading %}<h2 class="pd-display text-3xl text-primary md:text-4xl"><span class="pd-doodle-underline">{{ heading }}</span></h2>{% endif %}
 			{% if intro %}<p class="pd-body mx-auto mt-3 max-w-2xl text-lg text-muted-foreground">{{ intro }}</p>{% endif %}
 		</div>
 		{% if cakes %}
-		<div class="mt-10 pd-grid pd-grid--2 pd-grid--3">
+		<div class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
 			{% for cake in cakes %}
 			<figure class="pd-frame overflow-hidden flex flex-col">
-				{% if cake.image %}<div class="pd-media pd-media--square pd-torn-bottom bg-secondary">{% img cake.image alt=cake.name|default:"Cake" class="h-full w-full object-cover" %}</div>{% endif %}
+				{% if cake.image %}<div class="relative w-full overflow-hidden aspect-square pd-torn-bottom bg-secondary">{% img cake.image alt=cake.name|default:"Cake" class="block h-full w-full object-cover" %}</div>{% endif %}
-				<figcaption class="pd-card-body">
+				<figcaption class="p-5 md:p-6">
 					<div class="flex items-start justify-between gap-3">
 						<div>
 							{% if cake.name %}<h3 class="pd-display text-xl text-primary">{{ cake.name }}</h3>{% endif %}

blocks/order_ribbon.ninjatpl

@@ -1,4 +1,4 @@
-<section data-block="pastel-dream:order_ribbon" class="pd-section bg-background text-foreground{% if class %} {{ class }}{% endif %}">
+<section data-block="pastel-dream:order_ribbon" class="py-11 md:py-16 bg-background text-foreground{% if class %} {{ class }}{% endif %}">
 	<div class="mx-auto max-w-5xl px-4">
 		<div class="pd-chalkboard relative overflow-hidden p-8 md:p-12">
 			<div class="relative flex flex-col items-start gap-6 md:flex-row md:items-center md:justify-between">

blocks/seasonal_specials.ninjatpl

@@ -1,4 +1,4 @@
-<section data-block="pastel-dream:seasonal_specials" class="pd-section bg-background text-foreground{% if class %} {{ class }}{% endif %}">
+<section data-block="pastel-dream:seasonal_specials" class="py-11 md:py-16 bg-background text-foreground{% if class %} {{ class }}{% endif %}">
 	<div class="mx-auto max-w-6xl px-4">
 		<div class="max-w-2xl">
 			{% if kicker %}<p class="pd-hand text-xl text-accent">{{ kicker }}</p>{% endif %}
@@ -6,11 +6,11 @@
 			{% if intro %}<p class="pd-body mt-3 text-lg text-muted-foreground">{{ intro }}</p>{% endif %}
 		</div>
 		{% if items %}
-		<div class="mt-10 pd-grid pd-grid--2 pd-grid--3">
+		<div class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
 			{% for item in items %}
 			<article class="pd-card overflow-hidden flex flex-col">
-				{% if item.image %}<div class="pd-media bg-secondary">{% img item.image alt=item.name|default:"Seasonal special" class="h-full w-full object-cover" %}</div>{% endif %}
+				{% if item.image %}<div class="relative w-full overflow-hidden aspect-[4/3] bg-secondary">{% img item.image alt=item.name|default:"Seasonal special" class="block h-full w-full object-cover" %}</div>{% endif %}
-				<div class="pd-card-body">
+				<div class="p-5 md:p-6">
 					<div class="flex items-start justify-between gap-3">
 						<h3 class="pd-display text-xl text-primary">{{ item.name }}</h3>
 						{% if item.price %}<span class="pd-mono shrink-0 text-lg text-accent tabular-nums">{% if currency %}{{ currency }}{% endif %}{{ item.price }}</span>{% endif %}

manifest.yaml

@@ -361,42 +361,6 @@ css:
         }
     }
 
-    /* --- Layout helpers (theme-owned, semantic tokens only) -----------------
+    /* --- Menu list rhythm (complex child-combinator selector) --------------- */
-     * Installed .bnp themes live outside the host Tailwind @source globs, so the
-     * host build does NOT compile grid / aspect-ratio / gap / padding utilities
-     * that appear only in this theme's own templates. The theme therefore owns
-     * those layout primitives here as plain CSS: mobile-first, collapsing to a
-     * single column on small screens, with explicit media queries so the render
-     * is reliable regardless of the JIT content scan. No colors — layout only. */
-    .pd-section { padding-top: 2.75rem; padding-bottom: 2.75rem; }
-    @media (min-width: 768px) {
-        .pd-section { padding-top: 4rem; padding-bottom: 4rem; }
-    }
-
-    .pd-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
-    @media (min-width: 640px) {
-        .pd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-    }
-    @media (min-width: 1024px) {
-        .pd-grid--lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-        .pd-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-        .pd-grid--lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-    }
-
-    /* Two-up menu board: one column on phones, two side by side from md. */
-    .pd-menu-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem 3rem; }
-    @media (min-width: 768px) {
-        .pd-menu-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-    }
     .pd-menu-list { margin-top: 1rem; }
     .pd-menu-list > li + li { margin-top: 1.25rem; }
-
-    /* Media frames: a fixed aspect box so a photo fills gracefully. The EMPTY
-     * state is omitted in-template (no ballooning boxes when no photo is set). */
-    .pd-media { position: relative; width: 100%; overflow: hidden; aspect-ratio: 4 / 3; }
-    .pd-media--square { aspect-ratio: 1 / 1; }
-    .pd-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
-
-    /* Card body padding (host may not emit p-5 for theme templates). */
-    .pd-card-body { padding: 1.25rem 1.25rem 1.5rem; }
-    @media (min-width: 768px) { .pd-card-body { padding: 1.5rem; } }

templates/overrides/pastel-dream/cta.ninjatpl

@@ -1,4 +1,4 @@
-<section class="pd-section bg-background text-foreground{% if class %} {{ class }}{% endif %}">
+<section class="py-11 md:py-16 bg-background text-foreground{% if class %} {{ class }}{% endif %}">
   <div class="mx-auto max-w-6xl px-4">
     <div class="{% if background == "band" %}pd-torn-top pd-torn-bottom rounded-2xl bg-primary px-6 py-14 text-center text-primary-foreground md:px-12{% elif background == "card" %}pd-card px-6 py-14 text-center md:px-12{% else %}flex flex-col items-center gap-8 rounded-2xl bg-muted px-6 py-12 text-foreground md:flex-row md:justify-between md:px-12 md:text-left{% endif %}">
       <div class="{% if background != "split" %}mx-auto max-w-2xl{% endif %}">

templates/overrides/pastel-dream/feature-grid.ninjatpl

@@ -3,7 +3,7 @@
     {% if eyebrow %}<p class="pd-hand text-center text-2xl text-accent">{{ eyebrow }}</p>{% endif %}
     {% if heading %}<h2 class="pd-display mt-1 text-center text-3xl text-primary md:text-4xl"><span class="pd-doodle-underline">{{ heading }}</span></h2>{% endif %}
     {% if intro %}<p class="pd-body mx-auto mt-4 max-w-2xl text-center text-lg text-muted-foreground">{{ intro }}</p>{% endif %}
-    <div class="mt-12 pd-grid pd-grid--2 {% if columns == 2 %}pd-grid--lg-2{% elif columns == 4 %}pd-grid--lg-4{% else %}pd-grid--3{% endif %}">
+    <div class="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 {% if columns == 2 %}lg:grid-cols-2{% elif columns == 4 %}lg:grid-cols-4{% else %}lg:grid-cols-3{% endif %}">
       {% for item in items %}
       <div class="{% if layout == "card" %}pd-card p-6 transition-shadow hover:shadow-md{% elif layout == "centered" %}text-center{% endif %}">
         {% if item.icon %}<div class="mb-4 inline-flex h-11 w-11 items-center justify-center rounded-full bg-accent/15 text-accent{% if layout == "centered" %} mx-auto{% endif %}"><svg class="h-6 w-6" aria-hidden="true"><use href="/icons/{{ item.icon|split:":"|first }}.svg#{{ item.icon|split:":"|last }}"></use></svg></div>{% endif %}

templates/overrides/pastel-dream/hours-location.ninjatpl

@@ -1,7 +1,7 @@
-<section class="pd-section bg-background text-foreground{% if class %} {{ class }}{% endif %}">
+<section class="py-11 md:py-16 bg-background text-foreground{% if class %} {{ class }}{% endif %}">
   <div class="mx-auto max-w-5xl px-4">
     {% if heading %}<h2 class="pd-display text-3xl text-primary md:text-4xl"><span class="pd-doodle-underline">{{ heading }}</span></h2>{% endif %}
-    <div class="mt-10 pd-grid pd-grid--2">
+    <div class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2">
       <div>
         {% if hours %}
         <table class="pd-body w-full text-sm" data-pd-hours>

templates/overrides/pastel-dream/menu-list.ninjatpl

@@ -1,9 +1,9 @@
-<section class="pd-section bg-background text-foreground{% if class %} {{ class }}{% endif %}">
+<section class="py-11 md:py-16 bg-background text-foreground{% if class %} {{ class }}{% endif %}">
   <div class="mx-auto max-w-5xl px-4">
     {% if heading %}<h2 class="pd-display text-3xl text-primary md:text-4xl"><span class="pd-doodle-underline">{{ heading }}</span></h2>{% endif %}
     {% if intro %}<p class="pd-body mt-3 max-w-2xl text-lg text-muted-foreground">{{ intro }}</p>{% endif %}
     <div class="pd-chalkboard mt-10 p-6 md:p-10">
-      <div class="pd-menu-cols {% if columns == 2 %}pd-menu-cols--2{% endif %}">
+      <div class="grid grid-cols-1 gap-x-12 gap-y-10 {% if columns == 2 %}md:grid-cols-2{% endif %}">
         {% for section in sections %}
         <div class="menu-section">
           {% if section.title %}<h3 class="pd-hand border-b pd-chalk-rule pb-2 text-3xl">{{ section.title }}</h3>{% endif %}