/** * Elementor wrapper neutralizer. * * The design in app.css is Tailwind, applied to Elementor elements through each * element's "CSS Classes" field. Two things otherwise stop that from rendering the * way the reference design does: * * 1. Elementor wraps every container and widget in an extra div. A grid or flex * parent then sees that wrapper instead of the real child, so col-span/gap * never reach the element they were written for. * 2. Elementor's container defaults (width, padding, gap, flex) fight the * utilities on the same element. * * This file fixes both. It is enqueued BEFORE app.css and every selector here is * kept to single-class specificity, so a utility on the same element always wins * the cascade. The companion half of the fix lives in functions.php, which demotes * Elementor's own stylesheets into a cascade layer — without that, Elementor's * higher-specificity rules (.e-con-boxed.e-flex sets align-items) outrank the * utilities no matter what this file does. */ /* Elementor's inner wrappers carry no design of their own and must not generate a layout box, or they break every parent/child layout relationship. */ .e-con > .e-con-inner { display: contents; } .elementor-widget > .elementor-widget-container { display: contents; } /** * Theme Builder location wrappers. * * Elementor wraps each location in a div that is exactly as tall as the template * inside it. A sticky element can only travel within its parent's box, so the sticky * header had no range at all and scrolled away with the page — it was sticky, just * against a 73px-tall parent. * * display: contents removes the wrapper's box, so the header and footer become direct * flex children of , exactly as they are in the reference design. It also makes * the footer's mt-auto mean something, which is what holds the footer at the bottom on * a short page. */ .elementor-location-header, .elementor-location-footer { display: contents; } /* Clear the container defaults Elementor sets, so the utilities decide. Both the custom properties and the resolved values are reset — Elementor reads several of these through var() indirection. Wrapped in :where() so the whole block has ZERO specificity. Elementor's rules are in a cascade layer and lose to anything unlayered regardless of specificity, so nothing is given up — but several design utilities are themselves zero-specificity (Tailwind emits space-y-*, divide-* and friends as `:where(.space-y-6 > …)`), and a plain `.elementor-widget { margin: 0 }` silently outranks every one of them. */ :where(.e-con) { --display: block; --flex-direction: row; --container-widget-width: auto; --container-default-padding-top: 0px; --container-default-padding-right: 0px; --container-default-padding-bottom: 0px; --container-default-padding-left: 0px; --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; --margin-top: 0px; --margin-right: 0px; --margin-bottom: 0px; --margin-left: 0px; --row-gap: 0px; --column-gap: 0px; --width: auto; --content-width: none; --min-height: auto; display: block; width: auto; max-width: none; min-width: 0; padding: 0; margin: 0; gap: normal; position: static; } /* Widgets are plain boxes; their CSS Classes do the rest. Zero specificity, as above. */ :where(.elementor-widget) { width: auto; margin: 0; } /** * Widget inner elements inherit the design. * * A widget's CSS Classes land on its outer .elementor-element, not on the tag the * widget prints. With .elementor-widget-container set to display:contents above, * that outer element *is* the design box — so the printed tag has to stop styling * itself and inherit instead, or Elementor's rules win on the element the text * actually lives in. * * .elementor-heading-title sets `line-height: 1`, which otherwise flattens every * heading and paragraph on the page. */ :where(.elementor-heading-title) { font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; text-align: inherit; text-transform: inherit; text-wrap: inherit; margin: 0; padding: 0; } /* A link inside a heading widget inherits rather than taking link colour. */ .elementor-heading-title > a { color: inherit; text-decoration: inherit; } /* The image widget's figure/div wrapper must not add a box either. */ .elementor-widget-image .elementor-image, .elementor-widget-image figure { display: contents; } /** * Inline text widget. * * A widget wrapper is a block, so a reference element that was a bare inline * gets its own line box instead of sharing its parent's, and the parent grows by the * difference between the two line-heights. * * This is a theme utility rather than Tailwind's `inline`, because app.css is a * generated build that only contains the classes the reference design actually used — * and it never needed `inline`, so that class does not exist to be applied. */ .bff-inline { display: inline; }