/* =====================================================================
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:
.is-style-mm-band-light — photo + light wash, dark text, GRAPE accent,
teal-fill / teal-outline CTAs
.is-style-mm-band-dark — same photo + dark teal→grape overlay, white text,
BUTTER accent, white-pill / white-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.
Once Katherine picks one, delete the other variant block + its block style.
===================================================================== */
/* ---- 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 — same photo + dark teal→grape overlay, white text,
butter accent, white-pill / white-outline CTAs.
===================================================================== */
.mm-band.is-style-mm-band-dark .mm-band__card::before {
/* Ben 6/3: full-teal wash, light → darkish teal (no grape, no teal-900
forest green). Light teal-500 top-left graduating to teal-700 bottom-
right. Slightly stronger now + the ::before is blurred, so the busy
classroom photo reads as a soft texture, not noise; white text stays
crisp (it's not on the blurred layer). */
background-image:
linear-gradient(135deg,
rgba(74, 184, 169, 0.66) 0%,
rgba(45, 145, 132, 0.74) 52%,
rgba(31, 122, 112, 0.82) 100%),
url('/wp-content/uploads/2026/06/kindermusik-storytime.jpeg');
}
.mm-band.is-style-mm-band-dark .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.is-style-mm-band-dark .mm-band__heading-accent { color: var(--mm-butter); }
.mm-band.is-style-mm-band-dark .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.is-style-mm-band-dark .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.is-style-mm-band-dark .mm-band__sub { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 8px rgba(14, 63, 58, 0.40); }
.mm-band.is-style-mm-band-dark .mm-band__note { color: rgba(255, 255, 255, 0.72); }
.mm-band.is-style-mm-band-dark .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. */
background-color: var(--mm-butter);
color: var(--mm-ink);
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.is-style-mm-band-dark .wp-block-button.is-style-mm-band-primary > .wp-block-button__link:hover,
.mm-band.is-style-mm-band-dark .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);
}
.mm-band.is-style-mm-band-dark .wp-block-button.is-style-mm-band-secondary > .wp-block-button__link {
color: #fff;
border-color: rgba(255, 255, 255, 0.4);
}
.mm-band.is-style-mm-band-dark .wp-block-button.is-style-mm-band-secondary > .wp-block-button__link:hover,
.mm-band.is-style-mm-band-dark .wp-block-button.is-style-mm-band-secondary > .wp-block-button__link:focus-visible {
background-color: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.6);
}