/* * overrides.css — keep this file as small as possible. * Every rule needs a comment explaining why no native Elementor control / * atomic style prop could do it. The client cannot edit this file. */ /* NextJS . Not a widget setting. */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Off-screen mobile drawer (translateX(100%)) must not create horizontal scroll. `clip`, not `hidden`, so position:sticky keeps working. */ overflow-x: clip; } /* Header template = Topbar +
. In NextJS the topbar scrolls away while
sticks; a sticky element can only stick inside its parent, so the Theme Builder location wrapper is the sticky box instead, offset by the topbar height (h-9 = 2.25rem, topbar is lg-only). Elementor's Sticky motion effect can't express a negative offset. */ .elementor-location-header { position: sticky; top: 0; z-index: 40; } @media (min-width: 1024px) { .elementor-location-header { top: -2.25rem; } } .admin-bar .elementor-location-header { top: 32px; } @media (min-width: 1024px) { .admin-bar .elementor-location-header { top: calc(32px - 2.25rem); } } /* The editor preview forces the location to position:relative; a negative top would then shift the topbar out of view while editing. */ .elementor-editor-active .elementor-location-header, .elementor-editor-preview .elementor-location-header { top: auto !important; } /* Custom widgets (.sn-tw) render NextJS markup with Tailwind utilities, which live in cascade layers. Elementor's unlayered element resets (`.elementor a{text-decoration:none}`, `.elementor img{height:auto;…}`, `.elementor iframe{…}`) would beat every layered utility, so inside our widgets we roll those properties back to the layered (Tailwind) values. */ .elementor .sn-tw a { box-shadow: revert-layer; text-decoration: revert-layer; } .elementor .sn-tw img { border: revert-layer; border-radius: revert-layer; box-shadow: revert-layer; height: revert-layer; max-width: revert-layer; } .elementor .sn-tw iframe, .elementor .sn-tw video { border: revert-layer; line-height: revert-layer; margin: revert-layer; max-width: revert-layer; width: revert-layer; } /* Coloured word inside an atomic heading (NextJS ). html-v3 strips class/style on inline tags; only `id` survives. */ #sn-hero-accent { color: #5DA88F; } /* Classic Icon widget used inside atomic flex rows (Lucide library): make the wrapper chain hug the svg so it sizes/aligns like a bare lucide-react (the classic wrappers otherwise add line-height boxes around it). */ .elementor .elementor-widget-icon.sn-icon, .elementor .sn-icon .elementor-icon-wrapper, .elementor .sn-icon .elementor-icon { display: flex; line-height: 0; margin: 0; padding: 0; flex: 0 0 auto; } .elementor .sn-icon .elementor-icon svg { display: block; } /* Icon colour: lucide-react icons inherit currentColor. Elementor's global default paints icons with the kit primary colour (0,3,0); inherit instead, while per-widget colour picks (0,5,0) still win. Lucide outlines are never filled (the global default also sets `fill`). */ .elementor-widget-icon.sn-icon.elementor-view-default .elementor-icon { color: inherit; } .elementor .elementor-widget-icon.sn-icon svg.lucide { fill: none !important; }