/* ========================================================================== Rooted — Beaver Builder integration layer -------------------------------------------------------------------------- Loaded AFTER rooted-framework.css (the design system) and BEFORE the per-page skin. Its only job is to make Beaver Builder's own chrome transparent, so the design system's classes remain the single source of truth for skin, and BB node settings remain the single source of truth for structure (grid/flex, tracks, gaps, responsive stacking). Nothing brand-specific belongs in here. Re-skinning happens by swapping the --ds-* token values in rooted-framework.css. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Rows are the kit's
BB wraps every row in .fl-row > .fl-row-content-wrap > .fl-row-content and pads the wrap. The kit puts section padding on the section class itself (.story, .classes, ...), which lands on .fl-row — so zero BB's wrap. -------------------------------------------------------------------------- */ .fl-builder-content .fl-row-content-wrap { padding: 0; margin: 0; } .fl-builder-content .fl-row-full-width .fl-row-content { max-width: none; } .fl-builder-content .fl-row { overflow: visible; } /* -------------------------------------------------------------------------- 2. THE DOUBLED-MARGIN BUG BB applies a 20px left/right MARGIN to module wrappers through a zero-specificity :where() rule that fires at every width. On desktop it hides inside the centred container; on mobile it stacks on top of the section gutter and reads as a ~40px double inset throughout the page. It is MARGIN, not padding — a padding audit never finds it. Zero the HORIZONTAL margin only: vertical margins are how the kit spaces stacked elements (.home-hero__lede { margin-top: ... }) and must survive. -------------------------------------------------------------------------- */ .fl-builder-content .fl-module { margin-left: 0; margin-right: 0; } .fl-builder-content .fl-module > .fl-module-content { margin: 0; } .fl-builder-content .fl-col-content { padding: 0; } /* Modules must not shrink-wrap or overflow inside a flex/grid box. */ .fl-builder-content .fl-module, .fl-builder-content .fl-module > .fl-module-content { min-width: 0; } /* -------------------------------------------------------------------------- 3. Rich-text and wpautop BB 2.11 renders the Text Editor FLAT: .fl-module, .fl-module-rich-text, .fl-rich-text and the module's own class all sit on ONE element, and the content is its direct children. So a kit class that lays out its children (a flex row) works as written — with one exception. wpautop wraps INLINE top-level content (a bare , a leading ) in a

, which then becomes the flex child instead of the element the kit rule expects. Two defences, in order of preference: 1. author block-level children in the module's markup (a

, not a ) so wpautop is a no-op — do this by default; 2. where inline content is unavoidable, add `rt-flat` to the module and the injected paragraph drops out of the layout tree. -------------------------------------------------------------------------- */ .fl-builder-content .rt-flat > p { display: contents; } /* An svg wrapped in a sizing div behaves like the bare svg the kit styles. */ .fl-builder-content .bb-wordmark__icon > svg, .fl-builder-content .bb-cta-link svg, .fl-builder-content .bb-stars svg { display: block; } .fl-builder-content .bb-wordmark__icon > svg { width: 100%; height: 100%; } /* The Text Editor's own wrapper is otherwise a plain, style-free block. */ .fl-builder-content .fl-rich-text { color: inherit; font: inherit; line-height: inherit; } .fl-builder-content .fl-rich-text p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- 4. Headings The Heading module renders ONE element carrying .fl-module, .fl-heading and the module's own class. BB's stylesheet forces `margin: 0 !important` on .fl-heading, so the kit's h2/h3/h4 bottom margins have to be restated with !important — the only place in this build that needs it, and only because BB got there first. -------------------------------------------------------------------------- */ .fl-builder-content h1.fl-heading, .fl-builder-content h2.fl-heading, .fl-builder-content h3.fl-heading, .fl-builder-content h4.fl-heading { font-family: var(--ds-font-heading); font-weight: var(--ds-weight-semibold); line-height: var(--ds-line-tight); color: var(--ds-color-text); text-wrap: balance; padding: 0; } .fl-builder-content h1.fl-heading { margin: 0 !important; } .fl-builder-content h2.fl-heading { font-size: var(--ds-text-3xl); margin: 0 0 var(--ds-space-md) !important; } .fl-builder-content h3.fl-heading { font-size: var(--ds-text-xl); line-height: var(--ds-line-snug); margin: 0 0 var(--ds-space-sm) !important; } .fl-builder-content h4.fl-heading { font-size: var(--ds-text-lg); line-height: var(--ds-line-snug); margin: 0 0 var(--ds-space-xs) !important; } /* -------------------------------------------------------------------------- 5. Photo module The kit crops with aspect-ratio + object-fit on the . BB renders
— the module's class sits on the
, so `.my-class img.fl-photo-img { ... }` is the crop hook. Make the one intermediate wrapper transparent to height. -------------------------------------------------------------------------- */ .fl-builder-content .fl-photo { line-height: 0; display: block; width: 100%; } .fl-builder-content .fl-photo-content { display: block; width: 100%; } .fl-builder-content .fl-photo-content > img.fl-photo-img { width: 100%; height: auto; display: block; } .fl-builder-content .fl-photo-img { border-radius: inherit; } /* A photo module used as a fixed-ratio media panel: the wrapper inherits the figure's height so object-fit has something to crop against. */ .fl-builder-content .media-fill .fl-photo-content { height: 100%; } .fl-builder-content .media-fill img.fl-photo-img { height: 100%; object-fit: cover; } /* -------------------------------------------------------------------------- 6. Button module The visible control is the INNER a.fl-button, never the module wrapper — styling the wrapper silently does nothing. Restate the kit's .bb-btn on the anchor, and switch skin with rooted-btn--primary / --outline on the module's class field. -------------------------------------------------------------------------- */ .fl-builder-content .fl-button-wrap { display: inline-flex; margin: 0; } .fl-builder-content .fl-button-wrap .fl-button-group-inner { display: inline-flex; } .fl-builder-content .rooted-btn a.fl-button, .fl-builder-content .rooted-btn a.fl-button:visited, .fl-builder-content .rooted-btn a.fl-button:focus { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--ds-font-body); font-size: var(--ds-text-base); font-weight: var(--ds-weight-medium); letter-spacing: 0.01em; line-height: var(--ds-line-body); padding: 0.85rem 1.9rem; border-radius: 999px; border: none; text-decoration: none; box-shadow: none; transition: background var(--ds-transition-base), border-color var(--ds-transition-base), color var(--ds-transition-base); } .fl-builder-content .rooted-btn a.fl-button span.fl-button-text { font: inherit; color: inherit; } .fl-builder-content .rooted-btn--primary a.fl-button, .fl-builder-content .rooted-btn--primary a.fl-button:visited { background: var(--ds-color-accent); color: var(--ds-color-on-accent); } .fl-builder-content .rooted-btn--primary a.fl-button:hover { background: var(--ds-color-accent-deep); color: var(--ds-color-on-accent); } .fl-builder-content .rooted-btn--outline a.fl-button, .fl-builder-content .rooted-btn--outline a.fl-button:visited { background: transparent; color: var(--ds-color-text); border: 1px solid var(--ds-color-text-25); } .fl-builder-content .rooted-btn--outline a.fl-button:hover { background: transparent; border-color: var(--ds-color-accent); color: var(--ds-color-accent-deep); } /* On the inverted band the rose accent fails AA behind white text, so the primary button flips to light rose with dark text. */ .fl-builder-content .cta-band .rooted-btn--primary a.fl-button, .fl-builder-content .cta-band .rooted-btn--primary a.fl-button:visited { background: var(--ds-color-accent-light); color: var(--ds-color-ink-deep); } .fl-builder-content .cta-band .rooted-btn--primary a.fl-button:hover { background: var(--ds-color-on-ink); color: var(--ds-color-ink-deep); } /* -------------------------------------------------------------------------- 7. Box module BB 2.11 renders the Box flat too: .fl-module.fl-module-box plus the module's class on one element, children directly inside. So a kit class on a Box governs its real children with no wrapper surgery needed. One asymmetry worth knowing: BB emits the `gap` setting for a FLEX box (.fl-node-x { gap: 24px }) but emits NOTHING for a grid box — neither `gap` nor the `grid_gap` dimension reaches the stylesheet. Grid gaps therefore live in CSS, on the kit class, and are marked as such where they appear. Flex gaps stay in the node settings where they belong. -------------------------------------------------------------------------- */ .fl-builder-content .fl-module-box { min-width: 0; } /* -------------------------------------------------------------------------- 8. Theme reset PLD Blank is intentionally bare, but BB's own layout stylesheet still ships a content width and link colour. Neither belongs on this build. -------------------------------------------------------------------------- */ .fl-builder-content a { color: inherit; text-decoration: none; } .fl-builder-content .fl-row-content { width: 100%; } .fl-builder-content ul, .fl-builder-content ol { list-style: none; margin: 0; padding: 0; } .fl-builder-content img { max-width: 100%; height: auto; }