/** * b2be-blocks base stylesheet. * * This is the shared block library's own neutral structure. Every selector * is wrapped in :where(...), which has zero specificity, so a theme rule that * sets the same property with any class selector wins, whatever the load * order. Two limits (Codex review, 24 Sep): among zero-specificity rules the * later one wins, and a value the theme sets on a parent and leaves to * inheritance does not beat a property this file sets on the element itself. * Added 2026-09-24 after Opascope's insights cards rendered * as a plain bulleted list with full-width images, because the grid and the * card layout lived only in Escalate's child theme and nowhere in this * library. This file gives every b2be-* block sane structure (layout, * spacing, image shape, list resets) on any site. Colour, type and brand * decisions stay in each child theme. * * No brand colours or fonts here. Where a shape needs a colour to read at * all (a card edge, a marker circle), it uses currentColor through * color-mix(), which inherits whatever colour the surrounding page already * has and costs nothing to a child theme that sets its own. */ /* No rule on images in general. A descendant rule such as [class*="b2be-"] img reached every image inside .b2be-wrap, which wraps whole pages, and cut the height of Opascope's slider photo on the first preview (24 Sep). Instead, every block that prints an image names it here, so none can overflow its box (Codex pass 3: the gallery card had lost its sizing), and nothing else is touched. Blocks with their own image rules further down add to this. */ :where(.b2be-gcard img, .b2be-marquee__logo img, .b2be-footer__logo img, .b2be-logo img, .b2be-pressbar__inner img, .b2be-card__img img, .b2be-pressstrip__shot img, .b2be-fig img, .b2be-cs-card img, .b2be-embed img) { max-width: 100%; height: auto; } /* --------------------------------------------------------------- layout -- */ /* .b2be-wrap centres content with a side gutter, so a page has a readable measure before a theme sets its own max width. .b2be-band is a full-width section wrapper (used by the marquee) and needs no more than that. No box-sizing and no width here: on Opascope, whose own wrap rule sets the measure and the padding, border-box moved the padding inside the measure and narrowed every page by twice the gutter (24 Sep). */ :where(.b2be-wrap) { max-width: 75rem; margin-inline: auto; padding-inline: var(--wp--preset--spacing--40, 1.5rem); } :where(.b2be-band) { width: 100%; } /* --------------------------------------------------------------- header -- */ /* The row layout the mobile menu script depends on: a flex row that can collapse into a stacked nav under a burger button. Without this, the nav links and the burger both render as an unstyled stack down the page. */ :where(.b2be-header__inner) { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--40, 1.5rem); flex-wrap: wrap; } :where(.b2be-logo) { display: inline-flex; align-items: center; } :where(.b2be-nav) { display: flex; align-items: center; flex-wrap: wrap; gap: var(--wp--preset--spacing--40, 1.5rem); } :where(.b2be-header__cta) { display: flex; align-items: center; gap: var(--wp--preset--spacing--30, 1rem); } /* The burger is three bars drawn with span elements and no shape of its own; without this it is three stacked full-width lines. Hidden above the nav breakpoint, since the row nav is already usable there. */ :where(.b2be-burger) { display: none; position: relative; width: 1.75em; height: 1.5em; padding: 0; background: none; border: 0; cursor: pointer; } :where(.b2be-burger span) { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; } :where(.b2be-burger span:nth-child(1)) { top: 0; } :where(.b2be-burger span:nth-child(2)) { top: 45%; } :where(.b2be-burger span:nth-child(3)) { bottom: 0; } /* Below the breakpoint the row nav is replaced by the burger. The theme's own script toggles the .open class on both elements; this is only the shape that makes that toggle mean something. */ @media (max-width: 860px) { :where(.b2be-nav) { display: none; } :where(.b2be-nav.open) { display: flex; flex-direction: column; align-items: flex-start; width: 100%; } :where(.b2be-burger) { display: block; } } /* -------------------------------------------------------------- marquee -- */ /* An endlessly scrolling strip needs its overflow clipped and a track twice the width of one pass, animated by exactly half its own width. The PHP renderer already prints the track twice and sets animation-duration per instance inline; this file only names the animation and its shape. */ :where(.b2be-marquee) { overflow: hidden; } :where(.b2be-marquee__track) { display: flex; align-items: center; gap: var(--wp--preset--spacing--50, 2rem); width: max-content; animation: b2be-marquee 30s linear infinite; } :where(.b2be-marquee__logo) { display: inline-flex; align-items: center; flex-shrink: 0; } :where(.b2be-marquee__logo img) { display: block; width: auto; } @keyframes b2be-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { :where(.b2be-marquee__track) { animation: none; } } /* --------------------------------------------------------- listing/cards -- */ /* The listing block's whole reason to exist: a grid that is one, two, three or four across depending on the block's own setting, collapsing before it runs out of room. Without this, .b2be-cards is a plain