/* =====================================================================
try-class-band.css — Try-a-Class CTA band, page-378 block version.
Coupled with the section (enqueued with melody-magic/teacher-block on 378);
kept out of homepage.css so it stays with its block and off the shared file.
TWO switchable looks, picked via the section's block style. DARK is the
default everywhere the band ships (Ben 6/9); LIGHT is an opt-out alternate:
DARK (default) — photo + dark teal→grape overlay, white text, BUTTER
accent, white-pill / white-outline CTAs. Keyed off
`.mm-band:not(.is-style-mm-band-light)` — NOT
`.is-style-mm-band-dark` — because WP emits no
is-style-* class when the default style is selected, so
the class-less default must also resolve to dark.
.is-style-mm-band-light — photo + light wash, dark text, GRAPE accent,
teal-fill / teal-outline CTAs
Shared layout (full-bleed, photo crop, centered/contained content, padding,
CTA layout) is up top; only colors + the overlay differ per variant below.
===================================================================== */
/* ---- Eyebrow dot: legacy span hidden, pseudo provides it (color per variant) ---- */
.mm-band__eyebrow-dot { display: none; }
/* Eyebrow base — ported from homepage.css so the eyebrow styles on /programs/
too (homepage.css only loads on the home page). Color is per variant below. */
.mm-band__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0;
font-family: var(--mm-font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.mm-band__eyebrow::before {
content: "";
flex: none;
width: 6px;
height: 6px;
border-radius: 999px;
}
/* ---- Section = full-width gutter only; the photo lives on the card now ----
Was a full-bleed photo section. Ben 6/3: NOT full width — the photo + overlay
moved onto a rounded, center-constrained CARD that floats on the paper bg.
The section still spans the viewport so it owns the side gutter + the vertical
space between the card and the neighbouring sections; it carries no photo. */
.mm-band {
width: 100vw;
max-width: 100vw;
margin-inline: calc(50% - 50vw);
padding-block: clamp(48px, 6vw, 88px);
padding-inline: clamp(16px, 5vw, 64px);
background: none;
}
/* Card → the rounded, centered, contained photo card (owns the photo + overlay,
set per variant). Inner padding gives the content room inside the rounding. */
/* .mm-band prefix on the card so these beat homepage-polish.css's transparent
.mm-band__card reset (0,1,0) regardless of load order. The photo lives on the
::before layer so it can be blurred without softening the text. */
.mm-band .mm-band__card {
position: relative;
isolation: isolate;
max-width: 1080px;
margin-inline: auto;
border-radius: clamp(20px, 2.4vw, 32px);
overflow: hidden;
box-shadow: 0 30px 70px -32px rgba(14, 63, 58, 0.45);
padding-block: clamp(64px, 7vw, 104px);
padding-inline: clamp(28px, 5vw, 72px);
background: none;
}
/* Blurred photo layer — the photo + color wash live here (set per variant).
Scaled up 1.06 so the blur's soft edge never reveals the card corners; sits
behind the content via negative z-index inside the card's isolated context. */
.mm-band .mm-band__card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: blur(5px);
transform: scale(1.06);
}
.mm-band .mm-band__card::after { content: none; } /* no decorative blobs */
/* ---- Shared centered, contained content rhythm ----
display:grid here (not just on homepage.css) so the row gap actually applies
on the single-mm_program + /programs/ pages, where homepage.css is NOT loaded
— otherwise the row falls back to plain block flow and the gap is inert,
smashing the CTA against the copy. */
.mm-band .mm-band__row {
display: grid;
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
gap: 44px;
}
.mm-band .mm-band__row > * { margin-block: 0; }
.mm-band .mm-band__pitch { max-width: none; }
.mm-band .mm-band__eyebrow { margin-bottom: 0; }
.mm-band .mm-band__heading {
margin-block-start: 16px;
margin-block-end: 0;
font-size: clamp(34px, 4.4vw, 54px);
}
.mm-band .mm-band__sub {
margin-block-start: 22px;
margin-block-end: 0;
max-width: 600px;
margin-inline: auto;
}
/* ---- Shared CTA layout: centered, content-width row (icons intentionally dropped) ---- */
.mm-band .mm-band__cta-col { align-items: center; }
.mm-band .mm-band__cta-col > * { margin-block: 0; }
/* Even gap below the buttons before the fine-print note. */
.mm-band .mm-band__cta-col > .mm-band__note { margin-top: 22px; }
.mm-band .mm-band__ctas {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
}
.mm-band .mm-band__ctas .wp-block-button { width: auto; }
.mm-band .wp-block-button.is-style-mm-band-primary > .wp-block-button__link,
.mm-band .wp-block-button.is-style-mm-band-secondary > .wp-block-button__link {
display: block;
width: auto;
box-sizing: border-box;
text-align: center;
border-radius: 999px;
font-family: var(--mm-font-display);
text-decoration: none;
transition: transform var(--mm-dur) var(--mm-ease), box-shadow var(--mm-dur) var(--mm-ease),
background-color var(--mm-dur) var(--mm-ease), border-color var(--mm-dur) var(--mm-ease);
}
.mm-band .wp-block-button.is-style-mm-band-primary > .wp-block-button__link {
padding: 18px 28px;
font-weight: 800;
font-size: 17px;
}
.mm-band .wp-block-button.is-style-mm-band-secondary > .wp-block-button__link {
padding: 14px 24px;
font-weight: 700;
font-size: 15px;
background-color: transparent;
border: 1.5px solid;
}
/* =====================================================================
LIGHT variant — photo + light wash, dark text, grape accent, teal CTAs.
===================================================================== */
.mm-band.is-style-mm-band-light .mm-band__card::before {
background-image:
linear-gradient(135deg,
rgba(223, 240, 237, 0.90) 0%,
rgba(247, 245, 238, 0.86) 58%,
rgba(237, 227, 242, 0.90) 100%),
url('/wp-content/uploads/2026/06/kindermusik-storytime.jpeg');
}
.mm-band.is-style-mm-band-light .mm-band__heading { color: var(--mm-ink); }
.mm-band.is-style-mm-band-light .mm-band__heading-accent { color: var(--mm-grape-700); }
.mm-band.is-style-mm-band-light .mm-band__eyebrow { color: var(--mm-teal-700); }
.mm-band.is-style-mm-band-light .mm-band__eyebrow::before { background-color: var(--mm-teal-700); }
.mm-band.is-style-mm-band-light .mm-band__sub,
.mm-band.is-style-mm-band-light .mm-band__note { color: var(--mm-ink-2); }
/* Kill the dark-band text-shadows on the light variant (Ben 6/1). They come
from homepage-polish.css's unscoped .mm-band__heading/__eyebrow/__sub/__note
rules — built for white text on the dark overlay — and leak onto BOTH
variants. On dark ink over the light wash they read as heavy muddy halos.
These (0,2,0) selectors beat the (0,1,0) source regardless of load order;
the dark variant keeps its shadows. (text-shadow inherits, so nulling the
heading also clears its accent span.) */
.mm-band.is-style-mm-band-light .mm-band__heading,
.mm-band.is-style-mm-band-light .mm-band__eyebrow,
.mm-band.is-style-mm-band-light .mm-band__sub,
.mm-band.is-style-mm-band-light .mm-band__note { text-shadow: none; }
.mm-band.is-style-mm-band-light .wp-block-button.is-style-mm-band-primary > .wp-block-button__link {
background-color: var(--mm-teal-700);
color: #fff;
box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.25);
}
.mm-band.is-style-mm-band-light .wp-block-button.is-style-mm-band-secondary > .wp-block-button__link {
color: var(--mm-teal-800);
border-color: rgba(31, 122, 112, 0.45);
}
.mm-band.is-style-mm-band-light .wp-block-button.is-style-mm-band-secondary > .wp-block-button__link:hover,
.mm-band.is-style-mm-band-light .wp-block-button.is-style-mm-band-secondary > .wp-block-button__link:focus-visible {
background-color: rgba(31, 122, 112, 0.08);
border-color: var(--mm-teal-700);
}
/* =====================================================================
DARK variant (DEFAULT) — same photo + dark teal→grape overlay, white
text, butter accent, white-pill / white-outline CTAs. Selector is
:not(.is-style-mm-band-light) so it also catches the class-less default.
===================================================================== */
.mm-band:not(.is-style-mm-band-light) .mm-band__card::before {
/* Light teal wash — CANONICAL for every dark band as of 6/16: teal-300 →
teal-400 over the muted classroom photo. This lighter treatment used to
live ONLY in program-polish.css (scoped to program singles), which
forked the band so /programs/* looked lighter than group-benefits / home
/ important-dates. Folded here so all dark bands share one source of
truth; the program-polish override has been removed. White text stays
legible via its text-shadow below (it sits on the content layer, not on
this blurred ::before). */
background-image:
linear-gradient(135deg,
rgba(159, 214, 204, 0.74) 0%,
rgba(112, 192, 192, 0.86) 100%),
url('/wp-content/uploads/2026/06/kindermusik-storytime.jpeg');
}
.mm-band:not(.is-style-mm-band-light) .mm-band__heading {
color: #fff;
text-shadow: 0 2px 24px rgba(14, 63, 58, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
}
.mm-band:not(.is-style-mm-band-light) .mm-band__heading-accent { color: var(--mm-butter); }
.mm-band:not(.is-style-mm-band-light) .mm-band__eyebrow { color: #fff; text-shadow: 0 1px 6px rgba(14, 63, 58, 0.40); }
/* Purple star marker (replaces the dot) — same grape star used on the home
hero / FAQ eyebrows. The eyebrow is inline-flex, so ::before is a sized item. */
.mm-band:not(.is-style-mm-band-light) .mm-band__eyebrow::before {
width: 14px;
height: 14px;
border-radius: 0;
background-color: var(--mm-grape-500);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.mm-band:not(.is-style-mm-band-light) .mm-band__sub { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 8px rgba(14, 63, 58, 0.40); }
.mm-band:not(.is-style-mm-band-light) .mm-band__note { color: rgba(255, 255, 255, 0.72); }
.mm-band:not(.is-style-mm-band-light) .wp-block-button.is-style-mm-band-primary > .wp-block-button__link {
/* Butter primary — the standout CTA against the teal wash. Ink label for
strong contrast on the light butter fill. No border (WP's default 1px
would otherwise outline the pill). */
background-color: var(--mm-butter);
color: var(--mm-ink);
border: none;
box-shadow: 0 12px 30px -8px rgba(14, 63, 58, 0.45);
}
/* Hover: brighten + lift (never darken — brand rule). Pin the label to ink so
the global a:hover{color:teal-800} can't green the text. */
.mm-band:not(.is-style-mm-band-light) .wp-block-button.is-style-mm-band-primary > .wp-block-button__link:hover,
.mm-band:not(.is-style-mm-band-light) .wp-block-button.is-style-mm-band-primary > .wp-block-button__link:focus-visible {
background-color: #F8DD8A;
color: var(--mm-ink);
transform: translateY(-2px);
box-shadow: 0 18px 38px -10px rgba(14, 63, 58, 0.5);
}
/* Solid white pill with an ink label (was a white-outline ghost). Reads as a
clear secondary action against the teal wash. */
.mm-band:not(.is-style-mm-band-light) .wp-block-button.is-style-mm-band-secondary > .wp-block-button__link {
background-color: #fff;
color: var(--mm-ink);
border: none;
box-shadow: 0 12px 30px -8px rgba(14, 63, 58, 0.35);
}
/* Hover: lift + brighten (never darken — brand rule); pin label to ink so the
global a:hover{color:teal-800} can't green it. */
.mm-band:not(.is-style-mm-band-light) .wp-block-button.is-style-mm-band-secondary > .wp-block-button__link:hover,
.mm-band:not(.is-style-mm-band-light) .wp-block-button.is-style-mm-band-secondary > .wp-block-button__link:focus-visible {
background-color: #fff;
color: var(--mm-ink);
transform: translateY(-2px);
box-shadow: 0 18px 38px -10px rgba(14, 63, 58, 0.4);
}