, class or * not. The price was silently rendering at 12px instead of 43px. Scoping * this selector to its actual container fixes that outright. */ .baq-first-side .baq-first-price { font-family: var(--baq-font-display); font-weight: var(--baq-weight-display-lg); font-size: 43px; margin-bottom: 9px; } .baq-first-side p { font-family: var(--baq-font-body); font-size: var(--baq-text-secondary-size); line-height: 1.65; color: var(--baq-ink); margin-bottom: 22px; } .baq-first-side .baq-btn-primary { background: var(--baq-ink); color: var(--baq-paper); border-color: var(--baq-ink); } /* ---- responsive ---- */ @media (max-width: 820px) { .baq-split-grid, .baq-dark-feature-grid, .baq-credibility-grid { grid-template-columns: 1fr; } .baq-route-grid { grid-template-columns: 1fr 1fr; } .baq-two-column-grid { grid-template-columns: 1fr; } .baq-dark-two-column-grid, .baq-two-text-grid { grid-template-columns: 1fr; } /* first_session_cta stays two columns until 560px, same as the original .baq-first-box */ .baq-first-cta-variant .baq-two-text-grid { grid-template-columns: 7fr 5fr; } } /* * Stacking point moved from max-width:767.98px to max-width:991.98px. * * The old value was itself arbitrary relative to what actually controls * this row's width: an ancestor Bootstrap .container, whose max-width * steps at fixed bands (540px/720px/960px/1140px at the 576/768/992/1200 * viewport breakpoints), not a smooth function of viewport width. That * means .baq-hero's own rendered row width also steps at those same * points — measured directly: ~1116px total for any viewport >=1200px, * ~936px for 992-1199px, and ~696px for 768-991px. The 768-991px band * (which includes 976px) was two-column under the old rule, giving a * 398.5px panel — too narrow for the 59px H1 (needs 378.3125px just for * the unbreakable "Body Sculpting" run, before any of the rest of the * line) — while the 992-1199px band, at 518.5px, was and remains fine. * * 991.98px is not a second guess independent of that: it's the exact * edge of Bootstrap's own lg breakpoint, so it reclassifies the entire * 768-991px band as stacked (full-width, no row-height sharing with the * photo, so no letterbox-style gap either) while leaving 992px and up * untouched. There is no viewport value this can fail to cover the way * 767.98px failed to cover 768-991px, because it's aligned to the same * breakpoint system that creates the bands in the first place, rather * than an independently chosen number. The h1 clamp above is the second, * independent layer that keeps this safe even if that weren't true. */ @media (max-width: 991.98px) { .baq-hero { flex-direction: column; min-height: 0; } .baq-hero-photo { order: -1; flex: none; width: 100%; /* was padding-top:62% (a fixed ratio sized for the old 784x844 crop). The new photo is portrait (2:3), so the box now follows the same aspect-ratio declared in the desktop rule instead of a different hardcoded percentage — one ratio, not two to keep in sync. */ } .baq-hero-panel { flex: none; width: 100%; min-width: 0; background: var(--baq-ink); border-left: 0; padding: 37px 28px; } /* * Removes nowrap at the same point the hero already stacks at, not a * new one invented for this purpose. Only safe to do now that * .baq-eyebrow is fixed back to its own 13px (see the specificity fix * above) — at the 18px it was rendering at before, this same change * would have wrapped to 3 lines on real phone widths (360/390), * which is why it wasn't done until that was fixed. At the correct * 13px, confirmed by direct measurement: 2 lines at 360/390/414, 1 * line at 560 and above within this stacked range. */ .baq-hero-panel .baq-eyebrow { white-space: normal; } /* * The object-position:center 35% bias that lived here was specific to * cropping the old 784x844 photo — now that .baq-hero-photo is sized * to the new image's own 2:3 ratio and object-fit is contain, there is * no crop to bias at any width, so this override is removed rather * than carried forward describing a crop that no longer happens. */ } @media (max-width: 560px) { .baq-shell { padding-left: 21px; padding-right: 21px; } .baq-promise-grid, .baq-route-grid, .baq-section-head, .baq-first-box, .baq-first-cta-variant .baq-two-text-grid { grid-template-columns: 1fr; } .baq-promise-item { border-right: 0; border-bottom: 1px solid rgba(20, 15, 12, 0.18); padding: 15px 0; } .baq-promise-item:last-child { border-bottom: 0; } .baq-split, .baq-find, .baq-dark-feature, .baq-credibility, .baq-first { padding: 72px 0; } .baq-split-grid, .baq-section-head, .baq-dark-feature-grid, .baq-credibility-grid { gap: 35px; } .baq-split h2, .baq-section-head h2, .baq-dark-feature h2, .baq-credibility h2, .baq-first h2 { font-size: 39px; } .baq-dark-feature-photo, .baq-credibility-photo { min-height: 390px; height: 390px; } .baq-first-side { padding: 28px 0 0; } .baq-two-column { padding: 72px 0; } .baq-two-column-grid { gap: 35px; } .baq-two-column h2 { font-size: 39px; } .baq-two-column-photo { min-height: 390px; height: 390px; } .baq-dark-two-column, .baq-two-text { padding: 72px 0; } .baq-dark-two-column-grid { gap: 35px; } .baq-two-text-grid { grid-template-columns: 1fr; } .baq-dark-two-column h2, .baq-two-text h2 { font-size: 39px; } .baq-dark-two-column-photo { min-height: 390px; height: 390px; } } /* * ---- plain content-block reading typography ---- * * Brings the site's intended 18px/1.65 reading experience to plain * "content" blocks (no custom template) on interior pages, without * touching any of the six baq_* section templates. * * Scoping note, updated: originally scoped to `.col-md-12 * .ccm-block-content` alone. That wrapper is emitted by the theme's own * blocks/content/view.php, not by core or by the block itself — when the * theme fork omitted that file, `.ccm-block-content` silently stopped * appearing at all and this rule stopped matching anything, sitewide, * with no error. Restored the missing file, but the selector itself * should not depend on a single theme file staying in place to keep * working, so this now targets a plain block's `
`/`
` as a DIRECT CHILD of `.col-md-12` (today's fallback * shape when no wrapper exists) OR as a direct child of a * `.ccm-block-content` that is itself a direct child of `.col-md-12` * (the wrapper's normal shape once present) — either way, matching only * one level deep. * * This is what keeps it away from the six baq_* templates and the * Express Form block: every one of the six always wraps its own content * in `` as the immediate child of `.col-md-12` * (confirmed directly against the live DOM, including each template's * degraded/fallback-rendering paths), and the Express Form block wraps * in `.ccm-block-express-form`, not `.ccm-block-content` — so a `>` * child combinator can never reach into either, regardless of how deep * their own markup nests. The FAQ accordion wraps in * `.accordion.ccm-block-accordion` for the same reason. The footer's * plain-content address block sits outside `.col-md-12` entirely, so it * stays untouched either way. */ .col-md-12 > p, .col-md-12 > ul, .col-md-12 > ol, .col-md-12 > li, .col-md-12 > .ccm-block-content > p, .col-md-12 > .ccm-block-content > ul, .col-md-12 > .ccm-block-content > ol, .col-md-12 > .ccm-block-content > li { font-family: var(--baq-font-body); font-size: var(--baq-text-base-size); line-height: var(--baq-text-base-line); } .col-md-12 > p, .col-md-12 > ul, .col-md-12 > ol, .col-md-12 > blockquote, .col-md-12 > .ccm-block-content > p, .col-md-12 > .ccm-block-content > ul, .col-md-12 > .ccm-block-content > ol, .col-md-12 > .ccm-block-content > blockquote { max-width: var(--baq-reading-measure); } /* * ---- content heading measure ---- * * h2/h3/h4 inside a plain content block ran the full 1116px column width * instead of the 680px reading measure above them, on every content page * (confirmed on both /prep-and-aftercare and a blog post, identical * markup shape). Same selector shape as the paragraph rule above, plus * two exclusions the paragraph rule doesn't need: * * `:not(section[class*="baq-"] *)` — every one of the five baq_* * container templates (baq_hero, baq_two_column, baq_dark_two_column, * baq_two_text, baq_promise_strip) builds its editable regions with * `ContainerArea(...)->enableGridContainer()`, and enableGridContainer() * wraps that region in its OWN full `.container > .row > .col-md-12`, * nested inside the section. So a heading typed into, say, baq_two_text's * "Head" area sits at `section.baq-two-text ... .col-md-12 > * .ccm-block-content > h2` — confirmed live (baq_two_text's own H2, * homepage) — which the plain `.col-md-12 > .ccm-block-content > h2` * selector matches just as readily as real page content, because nothing * in that selector distinguishes a page-level `.col-md-12` from one * nested inside a section three levels down. This exclusion rules out * ANY heading anywhere under a `section` whose class contains "baq-", * regardless of how many container/row/col-md-12 layers separate them. * * `:not([class*="baq-"])` — independent safety net for a heading that * carries a baq- class without being inside a baq- section at all (e.g. * hand-added in a plain content block). * * The homepage hero H1, the testimonial box and the footer don't need * either exclusion: all three sit outside `.col-md-12` entirely * (confirmed by direct template inspection), so the base selector never * reaches them regardless. * * Only max-width is set here, not font-size/line-height/font-family — * headings keep their own heading styling, they just stop overrunning * the column. */ .col-md-12 > h2:not([class*="baq-"]):not(section[class*="baq-"] *), .col-md-12 > h3:not([class*="baq-"]):not(section[class*="baq-"] *), .col-md-12 > h4:not([class*="baq-"]):not(section[class*="baq-"] *), .col-md-12 > .ccm-block-content > h2:not([class*="baq-"]):not(section[class*="baq-"] *), .col-md-12 > .ccm-block-content > h3:not([class*="baq-"]):not(section[class*="baq-"] *), .col-md-12 > .ccm-block-content > h4:not([class*="baq-"]):not(section[class*="baq-"] *) { max-width: var(--baq-reading-measure); } .col-md-12 > blockquote, .col-md-12 > .ccm-block-content > blockquote { font-family: var(--baq-font-display); font-weight: var(--baq-weight-display-sm); font-size: var(--baq-display-floor); line-height: 1.4; margin: 28px 0; padding-left: 20px; border-left: 2px solid var(--baq-gold); } /* * ---- express_form submit button ---- * * The block emits plain Bootstrap markup (