/* contentbox-responsive.css
* Retrofits responsive behaviour onto ContentBox's fixed-px output.
* Loaded after all other contentbox-runtime*.css files.
* Scoped under .is-wrapper to stay out of the admin shell.
*
* Why: ContentBox saves content with hard-coded `.size-60`, `.is-section-100`,
* fixed pixel ![]()
widths. Its responsive `clamp()` rule only fires under a
* `.v2` ancestor — our content uses `.box-v2`, so the clamp never fires.
* This file (a) retargets the clamp onto `.box-v2`, (b) caps section min-height
* below 970px, (c) forces fluid images, (d) wraps row columns on mobile,
* (e) fluidises `.is-content-NNN` containers.
*/
/* ---------- 1. Fluid typography under .box-v2 ------------------------- */
/* ContentBox ships a clamp rule scoped to `.v2:not(.v3)` ancestor, but our
* saved content wraps in `.box-v2` so the rule never fires. Re-target it
* for tablet + mobile only — leave ≥971px desktop at the author's design size
* so existing pages don't visually shrink. */
@media (max-width: 970px) {
.is-wrapper.box-v2 [class*="size-"],
.is-wrapper .box-v2 [class*="size-"] {
--scale-base: clamp(1620, 1620 + ((var(--fs) - 20) * 15), 1920);
font-size: clamp(
var(--min-fs, calc(var(--fs) * 1px)),
calc(var(--fs) / var(--scale-base) * 100vw),
calc(var(--fs) * 1px)
) !important;
}
}
/* ---------- 2. Section min-height caps ------------------------------- */
/* Match the runtime's own selector specificity: it ships
* .is-wrapper div.is-section-100 { min-height: 100vh } (0,2,1)
* .is-section-100 .is-box:not(.box-autofit) { min-height: 100vh }
* so we need at least the same specificity + later cascade.
* The .is-box rule is critical: hero sections wrap content in
* .is-section-100 > .is-boxes > .is-box.is-box-N and EACH .is-box is forced
* to 100vh — on mobile they stack vertically so a 2-box section becomes
* 2 * 100vh tall. Cap them all. */
@media (max-width: 970px) {
.is-wrapper div.is-section-100,
.is-wrapper div.is-section-auto,
.is-wrapper .is-section-100 .is-box:not(.box-autofit),
.is-wrapper .is-section-auto .is-box:not(.box-autofit),
.is-wrapper .is-boxes,
.is-wrapper .is-boxes > .is-box {
min-height: auto !important;
height: auto !important;
}
/* The flex `.is-boxes` row layout becomes a column on mobile via
* ContentBox's own breakpoint, but force it here as a safety net. */
.is-wrapper .is-boxes {
flex-direction: column !important;
}
}
/* ---------- 3. Fluid images ------------------------------------------ */
@media (max-width: 970px) {
.is-wrapper img {
max-width: 100% !important;
height: auto !important;
}
.is-wrapper img[style*="object-fit"] {
object-fit: contain !important;
}
}
/* ---------- 4. Container width fluidity ------------------------------ */
@media (max-width: 970px) {
.is-wrapper [class*="is-content-"] {
max-width: 100% !important;
}
}
/* ---------- 5. Column wrap on small screens -------------------------- */
/* Rows are nowrap on desktop (see section 10 — the base `.is-wrapper .row`
* no longer sets flex-wrap, so it inherits the runtime's `flex-wrap:initial`).
* Wrapping + full-width column stacking is intentionally MOBILE-ONLY and
* applies to all `.is-wrapper .row` (not just `.row.clearfix`). */
@media (max-width: 970px) {
.is-wrapper .is-container,
.is-wrapper .row {
flex-wrap: wrap !important;
}
.is-wrapper .row > .column,
.is-wrapper .row > [class*="col-"] {
width: 100% !important;
max-width: 100% !important;
flex-basis: 100% !important;
}
}
/* ---------- 6. Edge padding tighter on mobile ------------------------ */
@media (max-width: 540px) {
.is-wrapper [class*="edge-x-"] {
padding-left: 16px !important;
padding-right: 16px !important;
}
}
/* ---------- 7. Overflow guard --------------------------------------- */
@media (max-width: 970px) {
.is-wrapper { overflow-x: hidden; }
}
/* ---------- 8. Vimeo background-video wrapper ------------------------ */
/* ContentBox saves Vimeo background videos inside a .vimeo-wrapper that
* holds the player iframe. The wrapper itself is positioned by ContentBox's
* runtime (absolute fill of its parent .is-section/.is-box). The iframe
* inside it needs its own sizing so it covers the wrapper while preserving
* the 16:9 aspect ratio at any viewport.
* - 100vw / 56.25vw → fill viewport width at 16:9 (no letterbox top/btm)
* - 177.77vh / 100vh → fill viewport height at 16:9 (no pillarbox sides)
* - position+translate centers the iframe regardless of which dimension
* is the binding constraint.
* Applied identically in the live editor, /view preview, and tenant SSR. */
.vimeo-wrapper iframe {
width: 100vw;
height: 56.25vw;
min-height: 100vh;
min-width: 177.77vh;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* ---------- 9. Bootstrap-style responsive embed wrapper -------------- */
/* Reproduces .embed-responsive / .embed-responsive-16by9 so embedded
* iframes (YouTube, Vimeo, forms, etc.) inside saved page content keep
* their aspect ratio without needing the full Bootstrap stylesheet
* pulled in. The 56.25% bottom padding gives 16:9; the absolutely-
* positioned iframe inside fills the resulting box.
* Used by ContentBox-saved content across editor, /view, /transfer, and
* the public SSR. */
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
margin-top: 1.4em;
margin-bottom: 1em;
}
.embed-responsive.embed-responsive-16by9 {
padding-bottom: 56.25%;
}
/* The wrapper collapses to height:0 + padding-bottom:%. The embedded media
* (iframe, embed, object, video) must be absolutely positioned to fill the
* resulting padding box — without this, an iframe with HTML width/height
* attributes (e.g.