chobbledotcom · stefan-burke · May 2, 2026 · May 2, 2026 · May 2, 2026 · May 2, 2026
diff --git a/css/theme.scss b/css/theme.scss
@@ -19,7 +19,9 @@
   // --- Palette ----------------------------------------------------------------
   --color-bg: #f6d9e1;                   // light pink — page background
   --body-background: #f6d9e1;
-  --body-background-alt: #efc9d3;        // slightly darker pink for alt sections
+  // Translucent so the page background image (dice corners or game artwork)
+  // shows through alternating sections.
+  --body-background-alt: rgba(239, 201, 211, 0.55);
   --color-card-bg: #ffffff;              // white cards / panels
   --color-text: #111111;
   --color-text-muted: #666666;
@@ -38,9 +40,9 @@
   --color-gradient-start: rgba(146, 58, 82, 0.22);
   --color-gradient-end: rgba(0, 77, 59, 0.18);
 
-  // Dark sections — pair deep green with cream text so the palette stays warm
-  --color-dark-bg: #003a2c;
-  --color-dark-bg-alt: #002f24;
+  // Dark sections — translucent dark plum so page backgrounds bleed through
+  --color-dark-bg: #322036d6;
+  --color-dark-bg-alt: #322036d6;
   --color-dark-text: #fff7f4;
   --color-dark-text-muted: #d9c8cd;
   --color-dark-card-bg: #0a5a47;
@@ -66,3 +68,64 @@
   --list-marker-content: "✦ ";
   --list-marker-color: #923a52;
 }
+
+// =============================================================================
+// PAGE BACKGROUNDS
+// =============================================================================
+// Every page gets a fixed, full-viewport, low-opacity background painted
+// behind the content via body::before. The default is the dice-corner
+// artwork from the old site (stretched to cover, matching the old
+// .cover-image treatment). The four featured release pages override the
+// `background-image` (and tweak positioning where needed) to swap in their
+// own themed artwork.
+//
+// The page-bg colour lives on `html` and body itself is transparent so the
+// fixed pseudo-element (z-index: -1) actually paints behind body content
+// instead of being hidden by body's own background layer.
+// =============================================================================
+
+html {
+  background: var(--body-background);
+}
+
+body.design-system {
+  background: transparent;
+}
+
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background-image: url("/images/brand/dice-corner.png");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  opacity: 0.18;
+}
+
+.page--releases--drama-llamas::before {
+  background-image: url("/images/backgrounds/drama_llamas_background.png");
+}
+
+.page--releases--judes-world::before {
+  background-image: url("/images/backgrounds/judes_world_background.png");
+  background-repeat: repeat;
+  background-size: 500px 500px;
+  opacity: 0.10;
+}
+
+.page--releases--bumbling::before {
+  background-image: url("/images/backgrounds/bumbling_background.png");
+  background-repeat: repeat;
+  background-size: 500px auto;
+  opacity: 0.10;
+}
+
+.page--releases--caltrop-kaiju::before {
+  background-image: url("/images/backgrounds/caltrop_kaiju_background.png");
+  background-repeat: repeat-x;
+  background-position: bottom center;
+  background-size: auto 60vh;
+}
diff --git a/games/a-fey-mystery-of-glen-dourn/index.md b/games/a-fey-mystery-of-glen-dourn/index.md
@@ -60,9 +60,8 @@ blocks:
         label: Play time
 
   - type: features
-    header_intro: |-
+    intro_content: |-
       ## Reviews
-    heading_level: 4
     items:
       - title: Andrés L.
         description: |

diff --git a/games/bardic-origins-the-lyric-grove/index.md b/games/bardic-origins-the-lyric-grove/index.md
@@ -45,7 +45,6 @@ blocks:
       to add flavour to your game.**
 
   - type: features
-    heading_level: 4
     items:
       - title: Detailed Setting & Backstory Options
         description: |

diff --git a/games/bardic-origins-the-storied-bastion/index.md b/games/bardic-origins-the-storied-bastion/index.md
@@ -36,7 +36,6 @@ blocks:
       items to add flavour to your game.**
 
   - type: features
-    heading_level: 4
     items:
       - title: Detailed Setting & Backstory Options
         description: |

diff --git a/games/bardic-origins-timbrel-sleets-intrepid-players/index.md b/games/bardic-origins-timbrel-sleets-intrepid-players/index.md
@@ -44,7 +44,6 @@ blocks:
       to add flavour to your game.**
 
   - type: features
-    heading_level: 4
     items:
       - title: Detailed Setting & Backstory Options
         description: |

diff --git a/games/beach-bar-a-llama/index.md b/games/beach-bar-a-llama/index.md
@@ -46,9 +46,8 @@ blocks:
         label: Print edition
 
   - type: buy-options
-    header_intro: |-
+    intro_content: |-
       ## Buy Direct
-    header_align: center
     image_aspect_ratio: "1/1"
     items:
       - image: src/images/products/drama_llamas_beach_bar_a_llama.jpeg

diff --git a/games/bumbling/index.md b/games/bumbling/index.md
@@ -58,9 +58,8 @@ blocks:
         label: Print Edition
 
   - type: features
-    header_intro: |-
+    intro_content: |-
       ## Reviews
-    heading_level: 4
     items:
       - title: sinopiasaur
         description: "\"This is a sweet and relaxing way to pass a couple hours of a summer afternoon.\""
@@ -69,9 +68,8 @@ blocks:
           "A simple little bee RPG that thankfully doesn't make any references to that b—dy film."
 
   - type: buy-options
-    header_intro: |-
+    intro_content: |-
       ## Buy Direct
-    header_align: center
     image_aspect_ratio: "1/1"
     items:
       - image: src/images/products/bumbling_booklet.jpeg

diff --git a/games/caltrop-kaiju/index.md b/games/caltrop-kaiju/index.md
@@ -50,9 +50,8 @@ blocks:
         label: Print Edition
 
   - type: buy-options
-    header_intro: |-
+    intro_content: |-
       ## Buy Direct
-    header_align: center
     image_aspect_ratio: "1/1"
     items:
       - image: src/images/products/caltrop_kaiju_booklet.jpeg

diff --git a/games/drama-llamas/index.md b/games/drama-llamas/index.md
@@ -68,19 +68,17 @@ blocks:
         label: Print Edition
 
   - type: features
-    header_intro: |-
+    intro_content: |-
       ## Reviews
-    heading_level: 4
     items:
       - title: Panne
         description: "\"This was such a bonkers-fun game! It's all about going full ridiculous and playing the shadow game behind the scenes. But the game itself encourages communication between the players so that it's reframed as collaboratively creating drama rather than a PVP type game.\""
       - title: Catalyze
         description: "\"When I played Drama Llamas with my buddies I got the giggles so bad that I couldn't talk. It's really easy to play and leaves a lot of room for improvisation and silliness, although there's a clear structure to gee things along too. Some of the artwork is BEAU-TI-FUL! A++ would recommend!\""
 
   - type: buy-options
-    header_intro: |-
+    intro_content: |-
       ## Buy Direct
-    header_align: center
     image_aspect_ratio: "1/1"
     items:
       - image: src/images/products/drama_llamas.jpeg
@@ -100,7 +98,7 @@ blocks:
         link: https://buy.stripe.com/9B64gz9CjbcCdUQby07N605
 
   - type: downloads
-    intro: |
+    intro_content: |
       ## Downloads
     items:
       - file: /assets/files/drama_llamas_character_sheet.pdf

diff --git a/games/flora-and-llama/index.md b/games/flora-and-llama/index.md
@@ -45,9 +45,8 @@ blocks:
         label: Print edition
 
   - type: buy-options
-    header_intro: |-
+    intro_content: |-
       ## Buy Direct
-    header_align: center
     image_aspect_ratio: "1/1"
     items:
       - image: src/images/products/drama_llamas_flora_and_llamas.jpeg

diff --git a/games/judes-world/index.md b/games/judes-world/index.md
@@ -75,9 +75,8 @@ blocks:
         label: Print Edition
 
   - type: buy-options
-    header_intro: |-
+    intro_content: |-
       ## Buy Direct
-    header_align: center
     image_aspect_ratio: "1/1"
     items:
       - image: src/images/products/judes_world_zine.jpeg

diff --git a/games/llama-warrior/index.md b/games/llama-warrior/index.md
@@ -45,9 +45,8 @@ blocks:
         label: Print edition
 
   - type: buy-options
-    header_intro: |-
+    intro_content: |-
       ## Buy Direct
-    header_align: center
     image_aspect_ratio: "1/1"
     items:
       - image: src/images/products/drama_llamas_llama_warrior.jpeg

diff --git a/games/red-gold/index.md b/games/red-gold/index.md
@@ -56,9 +56,8 @@ blocks:
         label: Play time
 
   - type: features
-    header_intro: |-
+    intro_content: |-
       ## Reviews
-    heading_level: 4
     items:
       - title: Sam H.
         description: |

diff --git a/games/righteous-jaunt/index.md b/games/righteous-jaunt/index.md
@@ -51,9 +51,8 @@ blocks:
         label: Print Edition
 
   - type: buy-options
-    header_intro: |-
+    intro_content: |-
       ## Buy Direct
-    header_align: center
     image_aspect_ratio: "1/1"
     items:
       - image: src/images/products/righteous_jaunt_booklet.jpeg

diff --git a/pages/media-press.md b/pages/media-press.md
@@ -13,7 +13,7 @@ blocks:
     lead: Press kits, reviews, and interviews about Button Kin Games.
 
   - type: icon-links
-    intro: |
+    intro_content: |
       ## Press Kits
 
       Logos, screenshots, factsheets, and press contacts for Button Kin's flagship releases.

diff --git a/pages/media-streams.md b/pages/media-streams.md
@@ -19,7 +19,7 @@ blocks:
       PLACEHOLDER TEXT
 
   - type: features
-    header_intro: |-
+    intro_content: |-
       ## Notable Streams
     items:
       - title: PLACEHOLDER TEXT

diff --git a/pages/media.md b/pages/media.md
@@ -26,7 +26,7 @@ blocks:
         description: Press kits, interviews, and reviews.
 
   - type: icon-links
-    intro: |
+    intro_content: |
       ## Jump to a section
     items:
       - icon: "hugeicons:youtube"

diff --git a/pages/services-layout.md b/pages/services-layout.md
@@ -19,7 +19,7 @@ blocks:
       PLACEHOLDER TEXT
 
   - type: features
-    header_intro: |-
+    intro_content: |-
       ## What's Included
     items:
       - title: PLACEHOLDER TEXT

diff --git a/pages/services-writing.md b/pages/services-writing.md
@@ -19,7 +19,7 @@ blocks:
       PLACEHOLDER TEXT
 
   - type: features
-    header_intro: |-
+    intro_content: |-
       ## What's Included
     items:
       - title: PLACEHOLDER TEXT

diff --git a/snippets/featured-games.md b/snippets/featured-games.md
@@ -6,9 +6,8 @@ blocks:
     filter:
       property: data.featured
       equals: true
-    header_intro: |-
+    intro_content: |-
       ## Featured Releases
 
       Flagship games from Button Kin.
-    header_align: center
 ---
diff --git a/snippets/footer-content.md b/snippets/footer-content.md
@@ -16,11 +16,10 @@ blocks:
     reference: recent-blog-posts
 
   - type: contact-form
-    header_intro: |-
+    intro_content: |-
       ## Contact Button Kin
 
       Drop us a line — we love hearing from players, playtesters, and fellow designers.
-    header_align: center
     content: |
       Get in touch about our games, upcoming events, writing commissions, or layout services.
 

diff --git a/snippets/recent-blog-posts.md b/snippets/recent-blog-posts.md
@@ -4,9 +4,9 @@ blocks:
   - type: items
     collection: news
     horizontal: true
-    header_intro: |-
+    image_aspect_ratio: "5/4"
+    intro_content: |-
       ## Recent Posts
 
       The latest from the Button Kin Times newsletter.
-    header_align: center
 ---
diff --git a/snippets/socials.md b/snippets/socials.md
@@ -2,7 +2,7 @@
 name: Socials
 blocks:
   - type: icon-links
-    intro: |
+    intro_content: |
       ## Find Button Kin Online
     items:
       - icon: "hugeicons:mail-01"

diff --git a/snippets/upcoming-events.md b/snippets/upcoming-events.md
@@ -3,9 +3,8 @@ name: Upcoming Events
 blocks:
   - type: items
     collection: upcomingEvents
-    header_intro: |-
+    intro_content: |-
       ## Upcoming Events
 
       Where you can find Button Kin Games next.
-    header_align: center
 ---