(WCAG page-has-heading-one);
* it was h2. Match on class + both tags so the styling holds either way. NB the global
* theme.json h1 is uppercase (PageHero) — this headline is sentence-case in the design
* (Home.tsx has no uppercase class), so the promotion must undo the inherited transform. */
:is(.ml-brandband, .ml-vpromo) :is(h1, h2, h3).ml-brandband__title {
margin: 0;
font-size: 1.5rem; /* text-2xl 24px */
font-weight: 800;
line-height: 1.25; /* leading-tight */
letter-spacing: -0.025em; /* tracking-tight */
color: #fff;
text-transform: none;
}
@media (min-width: 768px) { /* md:text-4xl 36px; text-4xl line-height 2.5rem=40px wins over leading-tight */
:is(.ml-brandband, .ml-vpromo) :is(h1, h2, h3).ml-brandband__title { font-size: 2.25rem; line-height: 2.5rem; }
}
/* Home.tsx:354 `mt-3 text-white/80 text-sm md:text-base max-w-xl`. Both line-heights
* are AUTHORED per breakpoint: text-sm = 14px/20px, text-base = 16px/24px. Without
* them the global 1.5 ratio applied — which coincidentally lands on 24px at md but
* gives 21px (not 20px) below it, so the paragraph ran 3px tall and pushed the CTAs,
* logos and the band's own height out of parity on mobile only. */
:is(.ml-brandband, .ml-vpromo) p.ml-brandband__text {
margin: 0.75rem 0 0;
color: rgb(255 255 255 / 0.8);
font-size: 0.875rem;
line-height: 1.25rem;
max-width: 36rem;
}
@media (min-width: 768px) {
:is(.ml-brandband, .ml-vpromo) p.ml-brandband__text { font-size: 1rem; line-height: 1.5rem; }
}
/* The CTA row's own rhythm, for the same reason: `.ml-content .wp-block-buttons`
* and the article net move it to 24/24 where the design says 20/0. */
:is(.ml-brandband, .ml-vpromo) .wp-block-buttons.ml-brandband__ctas { margin: 1.25rem 0 0; }
/* Same guard for the section header the Yhteistyökumppanit pattern carries — it is
* readable dark-on-light either way, but the article net still resized it
* (measured in an uutinen: eyebrow 16 px instead of 11, title 30 px with a 40 px
* top margin instead of 24/4). Values verbatim from § Etusivu sections. */
.ml-secthead p.ml-secthead__eyebrow {
margin: 0;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
color: hsl(182 100% 9% / 0.7);
}
@media (min-width: 768px) {
.ml-secthead p.ml-secthead__eyebrow { font-size: 0.875rem; line-height: 1.25rem; }
}
.ml-secthead :is(h1, h2, h3).ml-secthead__title {
margin: 0.25rem 0 0;
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 800;
letter-spacing: -0.025em;
text-transform: uppercase;
color: var(--wp--preset--color--foreground);
}
@media (min-width: 768px) {
.ml-secthead :is(h1, h2, h3).ml-secthead__title { font-size: 1.5rem; line-height: 2rem; }
}
/* ── Customer blocks INSIDE the Yhteistyökumppanit band ──────────────────────
* (customer 2026-08-14, /1153-2/: no gap between the pattern and the text, and
* the text runs the whole band wide instead of staying in the text column)
* With the enter guard on (editor-chrome-enter-guard.js), Enter never escapes a
* group — so text typed right after the logo grid lands INSIDE .ml-partners as
* the band's direct child. No net reached it there: the band is an alignwide
* FLOW group, so core's blockGap-0 reset zeroed every margin (the text sat glued
* to the logos and to itself, measured 0 px) and each paragraph spanned the whole
* band (1392 px at 1440 against the 760 text column). The Sisältölaatikko already
* carries its own inside-the-band net (§ BRAND BAND above); this is the partners
* equivalent, and every value is the § BARE PAGE CONTENT mirror — keep them in
* sync: the same 760 cap, left-flush without the bare net's max() anchor or
* !important (the band is alignwide, so its left edge IS the text column's left
* edge at every width, and a flow group has no auto-centring to fight), the same
* body rhythm and typography, and the grid→text boundary reads as the section
* gap — the same 3/4 rem the text would get if it sat AFTER the band, so a block
* that landed inside the band is indistinguishable from one that escaped it.
* The etusivu is untouched: its band ends with the sl-ml/partners block, which
* renders the same .ml-partners__grid class the net excludes, and nothing
* follows it. `.block-list-appender` is excluded so the canvas's own ⊕ appender
* doesn't pick up the section gap and pad the band in the editor only. */
.ml-partners > :not(.ml-secthead):not(.ml-partners__grid):not(.block-list-appender) { max-width: 760px; margin-inline: 0 auto; }
/* …with one exception the net above cannot see: in the BLOCK EDITOR a server-rendered block is
* wrapped in an unclassed
, so the logo grid is no longer a direct child of .ml-partners and
* the wrapper collects the 760 cap instead. The customer saw the result as "yhteistyökumppanit is
* very small in editor mode" (2026-08-20): the canvas drew a 760px, 4-column grid where the front
* end runs the full alignwide 8. Release only the wrapper that holds the grid — twice, because
* :has() is the precise form but a browser without it drops the whole selector, and the
* editor-scoped fallback (unclassed direct-child div, which no real content block ever is) keeps
* the fix working there regardless. Both are overrides, so a dropped line costs nothing. */
/* Specificity note: the net above is (0,4,0) — :not() lends its argument's weight, so a plain
* `.ml-partners > *:has(…)` at (0,2,0) loses and the cap stays. Both overrides therefore repeat
* the net's own :not() chain and add one selector on top. */
.ml-partners > :not(.ml-secthead):not(.ml-partners__grid):not(.block-list-appender):has(> .ml-partners__grid) { max-width: none; margin-inline: 0; }
.editor-styles-wrapper .ml-partners > :not(.ml-secthead):not(.ml-partners__grid):not(.block-list-appender):not([class]) { max-width: none; margin-inline: 0; }
.ml-partners > .ml-partners__grid + :not(.block-list-appender) { margin-block-start: 3rem; }
.ml-partners > p { margin: 1rem 0; font-size: 15px; line-height: 1.5; color: var(--wp--preset--color--foreground); }
.ml-partners > :is(h2, h3, h4) { margin: 2.5rem 0 0.75rem; font-weight: 800; color: var(--wp--preset--color--brand-teal); letter-spacing: -0.025em; }
.ml-partners > h2 { font-size: 1.5rem; line-height: 2rem; }
.ml-partners > h3 { font-size: 1.25rem; line-height: 1.75rem; }
.ml-partners > h4 { font-size: 1.125rem; line-height: 1.75rem; }
.ml-partners > :is(ul, ol) { margin: 1rem 0; padding-left: 1.25rem; }
.ml-partners > ul { list-style: none; padding-left: 0; }
.ml-partners > ul li { position: relative; padding-left: 1.25rem; margin: 0.5rem 0; font-size: 15px; line-height: 1.5; }
.ml-partners > ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--wp--preset--color--brand-lime); }
.ml-partners > ol { list-style: decimal; padding-left: 1.5rem; }
.ml-partners > ol li { margin: 0.5rem 0; font-size: 15px; line-height: 1.5; }
.ml-partners > ol li::marker { color: var(--wp--preset--color--brand-teal); font-weight: 800; }
@media (min-width: 768px) {
.ml-partners > .ml-partners__grid + :not(.block-list-appender) { margin-block-start: 4rem; }
.ml-partners > p { font-size: 1rem; line-height: 1.5rem; }
.ml-partners > h2 { font-size: 1.875rem; line-height: 2.25rem; }
.ml-partners > h3 { font-size: 1.5rem; line-height: 2rem; }
.ml-partners > h4 { font-size: 1.25rem; line-height: 1.75rem; }
.ml-partners > :is(ul, ol) li { font-size: 1rem; line-height: 1.5rem; }
}
/* …and the same trap in a `.ml-sect-gap` / `.ml-sect-gap-sm` wrapper (the spacing groups the
* etusivu seed wraps around an ad or a carousel): text landing inside one got the full band
* width and zero margins, exactly like the partners case above (measured on the gap sweep:
* p at 1392px, mt/mb 0, glued to the ad). Same medicine, compact — width to the text column,
* body-paragraph rhythm, and the block→text boundary is the section gap. Cap ONLY typed
* text-ish blocks: the etusivu seed's gap wrappers also hold designed section patterns
* (.ml-nc carousel, .ml-clubstrip, .ml-ng) that are NOT sl-ml/* blocks — a :not(sl-ml)
* blanket squeezed the full-bleed carousel to the 760 column (2026-08-14 regression). */
:is(.ml-sect-gap, .ml-sect-gap-sm) > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, table, figure):not(.alignwide):not(.alignfull) { max-width: 760px; margin-inline: 0 auto; }
:is(.ml-sect-gap, .ml-sect-gap-sm) > :is([class*="wp-block-sl-ml-"], [class*="wp-block-ml-"]) + :not(.block-list-appender) { margin-block-start: 3rem; }
:is(.ml-sect-gap, .ml-sect-gap-sm) > p { margin: 1rem 0; font-size: 15px; line-height: 1.5; color: var(--wp--preset--color--foreground); }
@media (min-width: 768px) {
:is(.ml-sect-gap, .ml-sect-gap-sm) > :is([class*="wp-block-sl-ml-"], [class*="wp-block-ml-"]) + :not(.block-list-appender) { margin-block-start: 4rem; }
:is(.ml-sect-gap, .ml-sect-gap-sm) > p { font-size: 1rem; line-height: 1.5rem; }
}
/* ═══════════════════════════════════════════════════════════════════════════
* PAGE SECTION RHYTHM — ONE gap between stacked patterns (customer 2026-08-13:
* "check every pattern so the gaps are perfect, right now if i add image to page
* and some other pattern theres no gap")
* ═══════════════════════════════════════════════════════════════════════════
* Measured before this block (page.html at 1440, one page per pattern): EVERY
* pattern-to-pattern boundary was ZERO — the two Mainospaikat, the ottelunauha,
* Valmentajat, and both sidebar minis butted edge to edge — and an image set to
* Leveä / Koko leveys sat flush against the pattern above it, because the
* alignment guard at the top of this file zeroes `margin-block-start` on every
* aligned child of a constrained layout and throws the figure's own 2rem away.
* Whatever gap DID appear came from whichever neighbour happened to own a
* margin: 16 px after a paragraph, 32 px after an image, 64 px for the
* Sisältölaatikko / Yhteistyökumppanit. Five values, none of them a decision.
*
* The contract: a boundary that touches a SECTION block is the design's section
* gap, 3rem / 4rem ≥768 — the value `.ml-brandband` and `.ml-partners` already
* carry, so the two patterns the customer meets most keep their exact spacing
* and everything else joins them. Body rhythm is untouched (16 px between
* paragraphs, 12 px under a heading, 32 px around a figure): those are the
* design's own values, and a heading still HUGS the section it introduces —
* hence the `:not(h1)…:not(h6)` on the preceding side.
*
* `!important` throughout for one reason: the guard at the top of this file is
* `!important`, and every pattern is alignwide or alignfull.
*
* TWO blocks are NEUTRAL — a boundary next to them keeps exactly what it had:
* `.ml-pagehero` the data-view pages (ottelut, sarjataulukko, pistepörssi,
* joukkueet, pelaaja, ottelu) are hero + one element and their
* reviewed hero→view gap is the element's own padding.
* `.ml-content` a Sisältöalue pads itself (40/64 at ≥768) and every seeded
* content page is built from it — including the six that stack
* a data view under a band (/naiset|miehet/pelaajarekisteri,
* /naiset|miehet/valmentajat, the tilastot pages), all
* verified unchanged.
*/
:is(.ml-page, .ml-sisaltosivu) > .wp-block-post-content > :not(.ml-pagehero):not(.ml-content):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + :is([class*="wp-block-ml-"], [class*="wp-block-sl-ml-"], .ml-brandband, .ml-partners, .ml-sect-gap, .ml-sect-gap-sm, .wp-block-group.alignwide, .wp-block-group.alignfull):not(.ml-content),
:is(.ml-page, .ml-sisaltosivu) > .wp-block-post-content > :is([class*="wp-block-ml-"], [class*="wp-block-sl-ml-"], .ml-brandband, .ml-partners, .ml-sect-gap, .ml-sect-gap-sm, .wp-block-group.alignwide, .wp-block-group.alignfull):not(.ml-pagehero):not(.ml-content) + :not(.ml-content) {
margin-block-start: 3rem !important;
}
@media (min-width: 768px) {
:is(.ml-page, .ml-sisaltosivu) > .wp-block-post-content > :not(.ml-pagehero):not(.ml-content):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + :is([class*="wp-block-ml-"], [class*="wp-block-sl-ml-"], .ml-brandband, .ml-partners, .ml-sect-gap, .ml-sect-gap-sm, .wp-block-group.alignwide, .wp-block-group.alignfull):not(.ml-content),
:is(.ml-page, .ml-sisaltosivu) > .wp-block-post-content > :is([class*="wp-block-ml-"], [class*="wp-block-sl-ml-"], .ml-brandband, .ml-partners, .ml-sect-gap, .ml-sect-gap-sm, .wp-block-group.alignwide, .wp-block-group.alignfull):not(.ml-pagehero):not(.ml-content) + :not(.ml-content) {
margin-block-start: 4rem !important;
}
}
/* The five data views that carry their dedicated page's container padding
* (`main .wp-block-ml-standings|pisteporssi|livescores|livescore|teams` above —
* the design's MainContainer py-6 md:py-8, 24/32 px) would ADD it to the gap:
* 96 px against a Sisältölaatikko's 64, and 128 px between two of them. The
* padding is invisible whitespace on a transparent wrapper, so it reads as gap —
* drop it on the sides where the section gap owns the boundary and the perceived
* gap is 48/64 everywhere. Both NEUTRAL neighbours (and a heading, which hugs)
* keep it, so hero → view is untouched; `:has(+ …)` keeps it on the LAST section
* of a page, which still needs its breathing room above the footer. */
:is(.ml-page, .ml-sisaltosivu) > .wp-block-post-content > :not(.ml-pagehero):not(.ml-content):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + :is(.wp-block-ml-standings, .wp-block-ml-pisteporssi, .wp-block-ml-livescores, .wp-block-ml-livescore, .wp-block-ml-teams) {
padding-block-start: 0 !important;
}
:is(.ml-page, .ml-sisaltosivu) > .wp-block-post-content > :is(.wp-block-ml-standings, .wp-block-ml-pisteporssi, .wp-block-ml-livescores, .wp-block-ml-livescore, .wp-block-ml-teams):has(+ :not(.ml-content)) {
padding-block-end: 0 !important;
}
/* ── The same contract INSIDE a Sisältöalue ──────────────────────────────────
* A pattern dropped into a band is one level down, so the rules above (direct
* children of post-content) can't see it — measured in a band before this:
* 64 px above a Sisältölaatikko but 16 px below it, 16 px + the view's own
* padding for a Pistepörssi, and 16/16 for a Mainospaikka (which has no padding
* of its own, so the ad artwork nearly touched the paragraph). Same gap, same
* heading-hug exception; the band's own padding still owns its first and last
* child, which is why these are `+` rules only.
* No `!important` needed here (a band is a FLOW group, so the alignment guard
* never fires) and no editor mirror either — the band is a real block, so the
* canvas gets these very rules through add_editor_style. */
/* `.ml-cardgrid` joined 2026-08-14 (gap sweep): the Korttiruudukko is a section-like unit —
* bordered cards — but sat only the 16px body rhythm from the text the customer types after
* it inside the same Sisältöalue, where every other pattern boundary reads 3/4rem. No seeded
* or ported page has a sibling next to its cardgrid (checked: the grid is its wrapper's only
* child everywhere), so only customer-typed neighbours move. */
.ml-content > :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + :is([class*="wp-block-ml-"], [class*="wp-block-sl-ml-"], .ml-brandband, .ml-partners, .ml-cardgrid),
.ml-content > :is([class*="wp-block-ml-"], [class*="wp-block-sl-ml-"], .ml-brandband, .ml-partners, .ml-cardgrid) + * {
margin-block-start: 3rem;
}
@media (min-width: 768px) {
.ml-content > :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + :is([class*="wp-block-ml-"], [class*="wp-block-sl-ml-"], .ml-brandband, .ml-partners, .ml-cardgrid),
.ml-content > :is([class*="wp-block-ml-"], [class*="wp-block-sl-ml-"], .ml-brandband, .ml-partners, .ml-cardgrid) + * {
margin-block-start: 4rem;
}
}
/* …and the five padded views drop their dedicated page's container padding in a
* band too: the band pads its own first/last child, and every inner boundary is
* now the section gap. */
.ml-content > :is(.wp-block-ml-standings, .wp-block-ml-pisteporssi, .wp-block-ml-livescores, .wp-block-ml-livescore, .wp-block-ml-teams) {
padding-block: 0;
}
/* An ALIGNED content block gets its own rhythm back. The guard at the top of this
* file zeroes margin-block-start on every aligned child, which is right for the
* design's stacked full-bleed sections but wrong for a Kuva the customer set to
* Leveä: measured 0 px between a Sisältöalue and the image below it — the
* reported "no gap". 2rem = exactly what the same block gets unaligned, so an
* image's spacing no longer depends on its width setting. The section rules above
* out-specify this one (0,7,0 vs 0,5,0), so a pattern → wide image boundary is
* still the section gap. Takes over from the narrower alignwide
* table/gallery/embed/video rule in § BARE PAGE CONTENT for every adjacency; that
* one still owns the case this pair can't match, a wide table as the page's very
* first block. */
:is(.ml-page, .ml-sisaltosivu) > .wp-block-post-content > :not(.ml-pagehero) + :is(figure, .wp-block-image, .wp-block-table, .wp-block-gallery, .wp-block-embed, .wp-block-video, .wp-block-buttons, .wp-block-quote, blockquote, .wp-block-details, pre, ul, ol, h1, h2, h3, h4, h5, h6, p):is(.alignwide, .alignfull) {
margin-block-start: 2rem !important;
}
/* …and directly under the hero it is the same 1.5/2.5rem an UNALIGNED first block
* gets (§ BARE PAGE CONTENT's `.alignfull + …` rule, which the guard's
* `!important` was beating): measured 0 px above both alignwide headings on
* /seurat, and 32 px above a wide table where the unaligned one had 40. */
:is(.ml-page, .ml-sisaltosivu) > .wp-block-post-content > .ml-pagehero + :is(figure, .wp-block-image, .wp-block-table, .wp-block-gallery, .wp-block-embed, .wp-block-video, .wp-block-buttons, .wp-block-quote, blockquote, .wp-block-details, pre, ul, ol, h1, h2, h3, h4, h5, h6, p):is(.alignwide, .alignfull) {
margin-block-start: 1.5rem !important;
}
@media (min-width: 768px) {
:is(.ml-page, .ml-sisaltosivu) > .wp-block-post-content > .ml-pagehero + :is(figure, .wp-block-image, .wp-block-table, .wp-block-gallery, .wp-block-embed, .wp-block-video, .wp-block-buttons, .wp-block-quote, blockquote, .wp-block-details, pre, ul, ol, h1, h2, h3, h4, h5, h6, p):is(.alignwide, .alignfull) {
margin-block-start: 2.5rem !important;
}
}
/* ── Article body: the same one-gap contract at the article's own 2rem scale ──
* `.ml-article__body [class*="wp-block-ml-"] { margin: 2rem 0 }` covers the ml/*
* views only, so inside an uutinen a Sisältölaatikko kept its page-scale 64/0
* and a Mainospaikka got nothing at all (measured: Yhteistyökumppanit →
* Mainospaikka = 0 px). One value for every section block, matching the 2rem the
* article's own figures and data views already use. */
.ml-article__body > :is([class*="wp-block-ml-"], [class*="wp-block-sl-ml-"], .ml-brandband, .ml-partners, .ml-content, .ml-sect-gap, .ml-sect-gap-sm) {
margin-block: 2rem;
}
/* The five data views' own `main .wp-block-ml-…` container padding (24/32 px) is
* their DEDICATED page's MainContainer, and inside an article body it lands on top
* of the 2rem above — 64 px against every other section's 32, and 32 px more than
* the editor canvas shows (`main` doesn't exist there, so the padding never
* applied in the editor: a live/editor disagreement as well as an uneven gap). */
.ml-article__body > :is(.wp-block-ml-standings, .wp-block-ml-pisteporssi, .wp-block-ml-livescores, .wp-block-ml-livescore, .wp-block-ml-teams) {
padding-block: 0;
}
/* A Sisältöalue (or the Korttiruudukko, which ships inside one) is alignfull, so
* inside the article card it pulled itself 24 px past the body's text column on
* each side (measured x=64 w=944 against the body's 88/896). Clamp it to the
* column and let the rule above own its rhythm — the same reset
* `.ml-content .ml-content` gets when one band nests in another. */
.ml-article__body > .ml-content {
max-width: none !important;
margin-inline: 0 !important;
padding-inline: 0 !important;
padding-block: 0 !important;
}
/* Sivupohja (template) edit view: core swaps the page's real content for generic description
* paragraphs — next to the fully-rendered header/footer it reads as a broken page. Dress it as
* a labelled note that points at the real editing surface. Editor-only (add_editor_style).
*
* Detector, both halves load-bearing:
* [data-type="core/post-content"] — the post-content BLOCK, i.e. a template view. In the POST
* editor (article/page, renderingMode post-only) core puts the same `wp-block-post-content`
* class on the canvas ROOT container (`.is-root-container`, no data-type, not a block) — so
* without this the note also sat on top of every article whose body was still empty
* (customer, tasklist 2026-08-13: "when editing article remove text 'Sivun sisältö…'").
* :not(:has(…__block)) — no nested block wrappers, i.e. core's description placeholder rather
* than a real content tree, so the rule can never touch actual page content. */
.editor-styles-wrapper .wp-block-post-content[data-type="core/post-content"]:not(:has(.block-editor-block-list__block)) {
margin: 2.5rem auto;
padding: 1.5rem 2rem;
border: 1px dashed rgb(16 59 44 / 0.35);
border-radius: 12px;
background: rgb(16 59 44 / 0.04);
}
.editor-styles-wrapper .wp-block-post-content[data-type="core/post-content"]:not(:has(.block-editor-block-list__block))::before {
content: 'Sivun sisältö — muokataan kohdassa Sivut → (avaa sivu), ei sivupohjassa.';
display: block;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 13px;
color: var(--wp--preset--color--brand-teal);
margin-bottom: 0.75rem;
}
.editor-styles-wrapper .wp-block-post-content[data-type="core/post-content"]:not(:has(.block-editor-block-list__block)) > p {
color: rgb(16 59 44 / 0.55);
font-size: 14px;
line-height: 1.5;
margin: 0.25rem 0;
}
/* When editor-template-preview.js swaps the placeholder for the LIVE page (.sl-ml-tpl-live),
* core's description paragraphs hide, the note keeps pointing at the real editing surface, and
* the frame runs edge to edge inside the band. These carry the same [data-type] as the note rules
* they override — source order alone no longer decides now that the note rule matches on the
* attribute too (it would otherwise out-specify these and re-label the live preview). */
.editor-styles-wrapper .wp-block-post-content[data-type="core/post-content"].sl-ml-tpl-live > p { display: none; }
.editor-styles-wrapper .wp-block-post-content[data-type="core/post-content"].sl-ml-tpl-live { padding: 0.75rem 0 0; border: 0; background: none; }
/* No label once the LIVE page is rendered: the preview speaks for itself, and the note only sat
* on top of it. The dashed placeholder note above still applies to templates with no preview. */
.editor-styles-wrapper .wp-block-post-content[data-type="core/post-content"].sl-ml-tpl-live::before { content: none; }
/* Full-bleed inside the constrained post-content layout: the live page is a full-width design,
* so previewing it at the 760px text column renders the tablet layout instead of the page the
* visitor sees. Standard full-bleed formula — the canvas's own width is the viewport here. */
.editor-styles-wrapper .wp-block-post-content[data-type="core/post-content"].sl-ml-tpl-live > .sl-ml-tpl-preview {
width: 100vw;
max-width: none;
margin-left: calc(50% - 50vw);
}
/* ═══ ETUSIVUN VIDEONOSTO (source VideoPromo.tsx) ═══════════════════════════
* The "18 seuraa" brand band's video variant: same gradient panel and copy
* column (the text reuses the .ml-brandband__* type classes), with a chrome-
* less looping YouTube embed filling the right half (desktop) / the top
* (mobile). The scripted video area is the sl-ml/video-embed block; overlay
* gradients hide YouTube's own chrome. Layout-only rules — safe at file end. */
.ml-vpromo {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
margin-top: 1.5rem;
border-radius: 1rem;
color: #fff;
min-height: 320px;
background: linear-gradient(to bottom right, var(--wp--preset--color--brand-teal), #0a3b3a, var(--wp--preset--color--brand-teal));
}
/* VideoPromo.tsx:84 swaps the section gradient at md — teal→teal→#0a3b3a (dark corner
* bottom-right, under the video) instead of the mobile teal→#0a3b3a→teal. Without the
* swap the desktop blend behind the video reads visibly different from the design. */
@media (min-width: 768px) {
.ml-vpromo {
background: linear-gradient(to bottom right, var(--wp--preset--color--brand-teal), var(--wp--preset--color--brand-teal), #0a3b3a);
}
}
/* The frame boots hidden (front end only — render.php adds --boot) and fades in on the
* player's first REAL playing state, so YouTube's start chrome (big play button, spinner,
* white iframe) never shows; until then the pane is the design's plain teal. video-promo.js
* adds is-playing (4s fallback if the event stream never comes up). */
.ml-vembed--boot .ml-vembed__frame { opacity: 0; }
.ml-vembed--boot.is-playing .ml-vembed__frame { opacity: 1; transition: opacity .4s ease; }
/* Both glow circles sit on the LEFT in this variant (VideoPromo.tsx) — the right is video. */
.ml-vpromo::before,
.ml-vpromo::after {
content: "";
position: absolute;
width: 360px;
height: 360px;
border-radius: 50%;
filter: blur(64px);
pointer-events: none;
z-index: 1;
background: hsl(182 100% 9% / 0.2);
}
.ml-vpromo::before { left: -5rem; top: -6rem; }
.ml-vpromo::after { left: -6rem; bottom: -6rem; }
@media (min-width: 768px) {
.ml-vpromo { margin-top: 2rem; min-height: 400px; }
.ml-vpromo::before,
.ml-vpromo::after { background: hsl(59 85% 47% / 0.1); }
}
.ml-vpromo__content {
position: relative;
z-index: 2;
display: flex;
flex: 1 1 auto;
flex-direction: column;
justify-content: center;
padding: 1.5rem;
}
@media (min-width: 768px) { .ml-vpromo__content { width: 50%; padding: 2.5rem; } }
@media (min-width: 1024px) { .ml-vpromo__content { padding: 3rem; } }
/* Same wrap net as the brand band's own copy (see § customer-added blocks). */
.ml-vpromo__content > * { min-width: 0; }
.ml-vembed {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
min-height: 180px;
overflow: hidden;
background: var(--wp--preset--color--brand-teal);
}
@media (min-width: 768px) {
.ml-vembed {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 50%;
height: 100%;
aspect-ratio: auto;
min-height: 0;
}
}
/* EDITOR ONLY (the wrapper exists just on the canvas): the sl-ml/video-embed block's own
* wrapper takes the video pane's geometry, so clicking the video selects the video block
* (its YouTube / own-file settings) instead of the surrounding group. */
.ml-vpromo > [data-type="sl-ml/video-embed"] { position: relative; }
@media (min-width: 768px) {
.ml-vpromo > [data-type="sl-ml/video-embed"] { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; }
.ml-vpromo > [data-type="sl-ml/video-embed"] .ml-vembed { right: auto; left: 0; width: 100%; }
}
/* The iframe is oversized and centered so the 16:9 video COVERS the pane (the
* source's w-[260%]/[220%]/[200%] ladder); pointer-events off = YouTube's own
* hover chrome can never appear. */
.ml-vembed__frame {
pointer-events: none;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
border: 0;
}
@media (min-width: 768px) { .ml-vembed__frame, .ml-vembed__poster { width: 260%; } }
@media (min-width: 1024px) { .ml-vembed__frame, .ml-vembed__poster { width: 220%; } }
@media (min-width: 1280px) { .ml-vembed__frame, .ml-vembed__poster { width: 200%; } }
/* An uploaded media-library video (is-file variant) covers the pane like the iframe does. */
.ml-vembed video.ml-vembed__frame { object-fit: cover; }
/* The video's own thumbnail over the frame only until the first REAL playing state —
* it replaces the old plain-teal boot pane so the pre-play moment (~1 s) shows the video's
* look instead of an empty box, and it doubles as the placeholder when an engine blocks
* muted autoplay (poster + our play button). Same geometry as the frame so the hand-off
* is seamless. */
.ml-vembed__poster {
pointer-events: none;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
object-fit: cover;
transition: opacity .5s ease;
}
.ml-vembed.is-playing .ml-vembed__poster { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
/* Paused (video-promo.js is-paused, only after a real playing state): YouTube's paused chrome
* (centre play button, title bar, "Watch on YouTube") is not removable with controls=0, so the
* pane shows the video's thumbnail again over the fading frame and keeps OUR controls; play
* brings the frame back. Frame opacity, not visibility, so the two cross-fade instead of the teal
* backdrop flashing between them (customer 2026-08-27). */
.ml-vembed__frame { transition: opacity .5s ease; }
.ml-vembed.is-paused .ml-vembed__frame { opacity: 0; }
.ml-vembed.is-playing.is-paused .ml-vembed__poster { opacity: 1; visibility: visible; transition: opacity .5s ease; }
/* YouTube's start chrome (center play/pause pill) overlays the first ~4 s of playback and
* no embed parameter removes it (measured: bare autoplay, API start, early seek, playsinline
* on/off — always there). It shows exactly as in the design source: covering it was tried
* and rejected (a full poster delays visible playback; a local blur disc read as an
* artifact). An uploaded videoUrl (native