From 12a98762cd81d5557fb45a2910365b7d1dc2e2d8 Mon Sep 17 00:00:00 2001
From: Jonathan Miller <jmiller@noreply.git.mokoconsulting.tech>
Date: Thu, 23 Apr 2026 22:53:17 +0000
Subject: [PATCH] fix: hero wrapper full-width, card centering via CSS
 variables
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

.hero is the module wrapper — now a full-width flex container.
Card styling (max-width, bg, padding, radius) moves to .hero .card.
All dimensions driven by CSS variables with sensible defaults:
--hero-justify, --hero-align, --hero-min-height,
--hero-card-text-align, --hero-card-max-width, etc.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/media/css/template.css | 31 ++++++++++++++++++++++---------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/media/css/template.css b/src/media/css/template.css
index 8efea3a..1cc4a5d 100644
--- a/src/media/css/template.css
+++ b/src/media/css/template.css
@@ -13925,8 +13925,17 @@ meter {
 	}
 }
 
-/* ── HERO CARD BASE ── */
+/* ── HERO WRAPPER (module wrapper, full-width centering container) ── */
 .hero {
+	display: flex;
+	justify-content: var(--hero-justify, center);
+	align-items: var(--hero-align, center);
+	width: 100%;
+	min-height: var(--hero-min-height, 100%);
+}
+
+/* ── HERO CARD BASE (the .card inside the hero wrapper) ── */
+.hero .card {
 	max-width: var(--hero-card-max-width, 600px);
 	padding: var(--hero-card-padding-y, 3rem) var(--hero-card-padding-x, 2rem);
 	background-color: var(--hero-card-bg, var(--hero-primary-bg-color, #0d1e3a));
@@ -13935,17 +13944,21 @@ meter {
 	background-position: center;
 	color: var(--hero-card-color, var(--hero-primary-color, #f1f5f9));
 	border-radius: var(--hero-card-border-radius, .5rem);
+	text-align: var(--hero-card-text-align, center);
+	margin-left: auto;
+	margin-right: auto;
+	border: none;
 }
 
-/* ── PRIMARY VARIANT (uses default card vars) ── */
-.hero#primary {
+/* ── PRIMARY VARIANT ── */
+.hero#primary .card {
 	background-color: var(--hero-card-bg, #0d1e3a);
 	background-image: var(--hero-card-overlay, none);
 	color: var(--hero-card-color, #f1f5f9);
 }
 
 /* ── SECONDARY / ALTERNATIVE VARIANT ── */
-.hero#secondary {
+.hero#secondary .card {
 	max-width: var(--hero-alt-card-max-width, 600px);
 	padding: var(--hero-alt-card-padding-y, 3rem) var(--hero-alt-card-padding-x, 2rem);
 	background-color: var(--hero-alt-card-bg, #080f1e);
@@ -13967,14 +13980,14 @@ meter {
 		background-image: none;
 	}
 	.hero {
-		max-width: 100%;
-		width: 100%;
 		min-height: 100vh;
 		min-height: 100dvh;
-		border-radius: 0;
-		display: flex;
 		flex-direction: column;
-		justify-content: center;
+	}
+	.hero .card {
+		max-width: 100%;
+		width: 100%;
+		border-radius: 0;
 	}
 }