/** * PDL — Elementor default-layout overrides. * * The PDL widgets reproduce the static prototype's layout, where the is * full width and each section handles its own centering — either a * `max-w-7xl mx-auto px-7.5` wrapper (boxed content) or a full-bleed coloured * band with `justify-center` / `justify-evenly` flex content. * * Elementor, however, wraps every widget in a container (`.e-con` / * `.e-con-inner`, or legacy `.elementor-section` / `.elementor-container`) that * imposes a default content width (1140px), padding and a 20px gap. That * re-centres/boxes the widgets and stops the full-bleed bands reaching the * viewport edges — the centering mismatch. * * We neutralise those defaults (via CSS variables where possible, so no * !important / specificity wars) and let the widgets' own Tailwind classes own * width, centering and spacing. Loaded after `elementor-frontend`. */ /* ------------------------------------------------------------------------- * Flexbox containers (Elementor 3.6+ default markup). * ---------------------------------------------------------------------- */ .e-con { --content-width: 100%; --container-max-width: 100%; --padding-block-start: 0px; --padding-block-end: 0px; --padding-inline-start: 0px; --padding-inline-end: 0px; --gap: 0px; } .e-con > .e-con-inner { max-width: none; padding: 0; margin-inline: 0; gap: 0; } /* ------------------------------------------------------------------------- * Legacy sections / columns (in case any layout still uses the old markup). * ---------------------------------------------------------------------- */ .elementor-section.elementor-section-boxed > .elementor-container { max-width: 100%; } .elementor-section .elementor-container { gap: 0; } /* ------------------------------------------------------------------------- * Let each PDL widget's own markup control its width and internal spacing. * ---------------------------------------------------------------------- */ .elementor-widget-wrap { padding: 0; } .elementor-widget-container { padding: 0; } /* ------------------------------------------------------------------------- * PDL widgets manage width + centering themselves (Tailwind max-w-* + mx-auto). * As flex items inside Elementor's `.e-con.e-flex` containers they'd otherwise * size to content and hug the left, leaving mx-auto no free space. Force them * to a full-width block so their own centering has a full-width base. * ---------------------------------------------------------------------- */ [class*="elementor-widget-pdl-"] { width: 100%; max-width: 100%; align-self: stretch; /* stretch across the flex container's cross axis */ } [class*="elementor-widget-pdl-"] > .elementor-widget-container { width: 100%; } /* ------------------------------------------------------------------------- * Images inside PDL widgets. * Elementor ships `.elementor img { height: auto; border-radius: 0; ... }` * which is unlayered (specificity 0,1,1) and therefore overrides Tailwind's * layered utilities — so card images ignore h-full / object-cover height and * lose their rounding (videos are unaffected, hence the mismatch). These * unlayered, more-specific rules (loaded after elementor-frontend) re-assert * the utilities the widgets rely on. * ---------------------------------------------------------------------- */ [class*="elementor-widget-pdl-"] img.h-full, [class*="elementor-widget-pdl-"] img.object-cover { height: 100%; } [class*="elementor-widget-pdl-"] img.rounded-xl { border-radius: 0.75rem; } [class*="elementor-widget-pdl-"] img.rounded-lg { border-radius: 0.5rem; } [class*="elementor-widget-pdl-"] img.rounded-full { border-radius: 9999px; }