Add hero/banner-overlay CSS variables and wire template.css

- Add HERO / BANNER OVERLAY section to light.standard.css and dark.standard.css:
  --hero-height, --hero-color, --hero-bg-repeat, --hero-bg-attachment,
  --hero-bg-position, --hero-bg-size, --hero-border-bottom,
  --hero-overlay-bg (light: 0.1 alpha / dark: 0.3 alpha),
  --hero-overlay-padding, --hero-overlay-text-align, --hero-overlay-text-color
- Replace all hardcoded values in .container-banner .banner-overlay and
  .overlay with var() references (with fallbacks)
- Fix background-position: comma syntax → correct space-separated single-bg value
- Add css_vars_hero note field to CSS Variables tab in templateDetails.xml
- Add TPL_MOKOCASSIOPEIA_CSS_VARS_HERO_LABEL/DESC to en-US and en-GB
- Regenerate .min files

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/language/en-GB/tpl_mokocassiopeia.ini

@@ -145,6 +145,9 @@ TPL_MOKOCASSIOPEIA_CSS_VARS_ALERT_LIST_DESC="<strong>Alert link colours</strong>
 TPL_MOKOCASSIOPEIA_CSS_VARS_COLORS_LABEL="Standard Colours, Grays &amp; Opacity"
 TPL_MOKOCASSIOPEIA_CSS_VARS_COLORS_DESC="<strong>Named colours</strong><br><code>--blue</code>, <code>--indigo</code>, <code>--purple</code>, <code>--pink</code>, <code>--red</code>, <code>--orange</code>, <code>--yellow</code>, <code>--green</code>, <code>--teal</code>, <code>--cyan</code>, <code>--black</code>, <code>--white</code><br><br><strong>Gray scale</strong><br><code>--gray-100</code> through <code>--gray-900</code> plus <code>--white-rgb</code> and <code>--black-rgb</code><br><br><strong>Opacity utilities</strong><br><code>--opacity-0</code>, <code>--opacity-5</code>, <code>--opacity-10</code>, <code>--opacity-15</code>, <code>--opacity-20</code>, <code>--opacity-25</code>, <code>--opacity-30</code>, <code>--opacity-50</code>, <code>--opacity-75</code>, <code>--opacity-100</code>"
 
+TPL_MOKOCASSIOPEIA_CSS_VARS_HERO_LABEL="Hero / Banner Overlay"
+TPL_MOKOCASSIOPEIA_CSS_VARS_HERO_DESC="Applied to the <code>.custom-hero</code> / <code>.banner-overlay</code> layout. Set on <code>:root[data-bs-theme]</code> so light and dark values are independent.<br><code>--hero-height</code> — Banner height (default: <code>70vh</code>)<br><code>--hero-color</code> — Base text colour<br><code>--hero-bg-repeat</code> — Background repeat (default: <code>no-repeat</code>)<br><code>--hero-bg-attachment</code> — Background attachment (default: <code>fixed</code>)<br><code>--hero-bg-position</code> — Background position (default: <code>top center</code>)<br><code>--hero-bg-size</code> — Background size (default: <code>cover</code>)<br><code>--hero-border-bottom</code> — Bottom border (default: <code>solid var(--accent-color-secondary)</code>)<br><code>--hero-overlay-bg</code> — Overlay tint colour (light default: <code>hsla(0,0%,0%,0.1)</code> / dark default: <code>hsla(0,0%,0%,0.3)</code>)<br><code>--hero-overlay-padding</code> — Overlay inner padding (default: <code>1em</code>)<br><code>--hero-overlay-text-align</code> — Overlay text alignment (default: <code>center</code>)<br><code>--hero-overlay-text-color</code> — Overlay text colour"
+
 TPL_MOKOCASSIOPEIA_CSS_VARS_HEADER_LABEL="Header Background"
 TPL_MOKOCASSIOPEIA_CSS_VARS_HEADER_DESC="Controls the background of the topbar/header area.<br><code>--header-background-image</code> — CSS <code>background-image</code> value (default: built-in SVG pattern)<br><code>--header-background-attachment</code> — <code>fixed</code> or <code>scroll</code><br><code>--header-background-repeat</code> — e.g. <code>repeat</code>, <code>no-repeat</code><br><code>--header-background-size</code> — e.g. <code>auto</code>, <code>cover</code>, <code>contain</code>"
 

src/language/en-US/tpl_mokocassiopeia.ini

@@ -145,6 +145,9 @@ TPL_MOKOCASSIOPEIA_CSS_VARS_ALERT_LIST_DESC="<strong>Alert link colors</strong>
 TPL_MOKOCASSIOPEIA_CSS_VARS_COLORS_LABEL="Standard Colors, Grays &amp; Opacity"
 TPL_MOKOCASSIOPEIA_CSS_VARS_COLORS_DESC="<strong>Named colors</strong><br><code>--blue</code>, <code>--indigo</code>, <code>--purple</code>, <code>--pink</code>, <code>--red</code>, <code>--orange</code>, <code>--yellow</code>, <code>--green</code>, <code>--teal</code>, <code>--cyan</code>, <code>--black</code>, <code>--white</code><br><br><strong>Gray scale</strong><br><code>--gray-100</code> through <code>--gray-900</code> plus <code>--white-rgb</code> and <code>--black-rgb</code><br><br><strong>Opacity utilities</strong><br><code>--opacity-0</code>, <code>--opacity-5</code>, <code>--opacity-10</code>, <code>--opacity-15</code>, <code>--opacity-20</code>, <code>--opacity-25</code>, <code>--opacity-30</code>, <code>--opacity-50</code>, <code>--opacity-75</code>, <code>--opacity-100</code>"
 
+TPL_MOKOCASSIOPEIA_CSS_VARS_HERO_LABEL="Hero / Banner Overlay"
+TPL_MOKOCASSIOPEIA_CSS_VARS_HERO_DESC="Applied to the <code>.custom-hero</code> / <code>.banner-overlay</code> layout. Set on <code>:root[data-bs-theme]</code> so light and dark values are independent.<br><code>--hero-height</code> — Banner height (default: <code>70vh</code>)<br><code>--hero-color</code> — Base text color<br><code>--hero-bg-repeat</code> — Background repeat (default: <code>no-repeat</code>)<br><code>--hero-bg-attachment</code> — Background attachment (default: <code>fixed</code>)<br><code>--hero-bg-position</code> — Background position (default: <code>top center</code>)<br><code>--hero-bg-size</code> — Background size (default: <code>cover</code>)<br><code>--hero-border-bottom</code> — Bottom border (default: <code>solid var(--accent-color-secondary)</code>)<br><code>--hero-overlay-bg</code> — Overlay tint color (light default: <code>hsla(0,0%,0%,0.1)</code> / dark default: <code>hsla(0,0%,0%,0.3)</code>)<br><code>--hero-overlay-padding</code> — Overlay inner padding (default: <code>1em</code>)<br><code>--hero-overlay-text-align</code> — Overlay text alignment (default: <code>center</code>)<br><code>--hero-overlay-text-color</code> — Overlay text color"
+
 TPL_MOKOCASSIOPEIA_CSS_VARS_HEADER_LABEL="Header Background"
 TPL_MOKOCASSIOPEIA_CSS_VARS_HEADER_DESC="Controls the background of the topbar/header area.<br><code>--header-background-image</code> — CSS <code>background-image</code> value (default: built-in SVG pattern)<br><code>--header-background-attachment</code> — <code>fixed</code> or <code>scroll</code><br><code>--header-background-repeat</code> — e.g. <code>repeat</code>, <code>no-repeat</code><br><code>--header-background-size</code> — e.g. <code>auto</code>, <code>cover</code>, <code>contain</code>"