/* SX-Plugin — Logo Cloud */ .sx-lc { --sx-lc-max-width: 768px; --sx-lc-gap: 42px; --sx-lc-pad: 16px; --sx-lc-logo-height: 20px; --sx-lc-logo-opacity: 1; --sx-lc-logo-opacity-hover: 1; --sx-lc-speed: 60s; --sx-lc-columns: 4; --sx-lc-divider-color: rgba(255, 255, 255, 0.18); --sx-lc-divider-top-width: 384px; --sx-lc-divider-spacing: 20px; --sx-lc-glow-color: rgba(255, 255, 255, 0.1); --sx-lc-glow-size: 120vw; --sx-lc-glow-blur: 30px; --sx-lc-glow-offset: -50%; position: relative; width: 100%; } /* Break out of the Elementor container so the strip reaches both screen edges. */ .sx-lc--stretch { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); } /* A 100vw box is wider than the content area whenever a vertical scrollbar is present. Clip the page rather than let that few-pixel overhang create a horizontal scrollbar. Scoped with :has() so only affected pages are touched. */ body:has(.sx-lc--stretch) { overflow-x: clip; } /* That rule alone did not hold: overflow set on only reaches the viewport by propagation, and with one axis clipped and the other visible the browser declined to propagate it — the home page scrolled 144px sideways at 1440, pushed by the glow below, which is 120vw wide by design. So the strip clips its own overhang instead of asking the page to. Nothing is lost visually: the glow is a radial gradient that has already faded to transparent well before its own edge. `clip` rather than `hidden` so the box does not become a scroll container, and `visible` on the other axis so the halo still bleeds above and below. */ .sx-lc { overflow-x: clip; overflow-y: visible; } .sx-lc__glow { position: absolute; top: var(--sx-lc-glow-offset); left: 50%; width: var(--sx-lc-glow-size); height: var(--sx-lc-glow-size); transform: translateX(-50%); border-radius: 0 0 50% 50% / 0 0 100% 100%; background: radial-gradient(ellipse at center, var(--sx-lc-glow-color), transparent 50%); filter: blur(var(--sx-lc-glow-blur)); pointer-events: none; z-index: 0; } .sx-lc__inner { position: relative; z-index: 1; max-width: var(--sx-lc-max-width); margin-inline: auto; } .sx-lc--stretch .sx-lc__inner { max-width: none; } /* Logos run edge to edge while the text block keeps the original 3xl measure. */ .sx-lc--stretch.sx-lc--contain .sx-lc__heading, .sx-lc--stretch.sx-lc--contain .sx-lc__divider--bottom { max-width: var(--sx-lc-max-width); margin-inline: auto; } .sx-lc__heading { margin: 0 0 20px; text-align: center; line-height: 1.3; } .sx-lc__line { display: inline; } .sx-lc__line--2 { font-weight: 600; } .sx-lc__divider { height: 1px; background: var(--sx-lc-divider-color); -webkit-mask-image: linear-gradient(to right, transparent, #000, transparent); mask-image: linear-gradient(to right, transparent, #000, transparent); } .sx-lc__divider--top { max-width: var(--sx-lc-divider-top-width); margin: var(--sx-lc-divider-spacing) auto; } .sx-lc__divider--bottom { margin-top: var(--sx-lc-divider-spacing); } /* ------------------------------------------------------------------ Marquee */ .sx-lc__viewport { overflow: hidden; padding-block: var(--sx-lc-pad); /* The track is far wider than this box, so it is *this* element's direction that decides which edge the overflow is anchored to — setting ltr on the track alone only fixes the order of its own children. Under rtl the track would hang off the left edge before the -50% keyframe even starts, and the logos would scroll out of sight instead of through it. */ direction: ltr; } .sx-lc--fade .sx-lc__viewport { -webkit-mask-image: linear-gradient(to right, transparent, #000, transparent); mask-image: linear-gradient(to right, transparent, #000, transparent); } .sx-lc__track { display: flex; align-items: center; width: max-content; /* Item order stays fixed regardless of the page's direction; the viewport above handles where the track is anchored. */ direction: ltr; } /* Spacing lives on the items, not on flex `gap`: the -50% keyframe only lines up when every item contributes an identical width, its spacing included. */ .sx-lc__item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; margin-right: var(--sx-lc-gap); } .sx-lc--marquee .sx-lc__track { animation: sx-lc-scroll var(--sx-lc-speed) linear infinite; will-change: transform; } .sx-lc--reverse .sx-lc__track { animation-direction: reverse; } .sx-lc--pause .sx-lc__viewport:hover .sx-lc__track { animation-play-state: paused; } @keyframes sx-lc-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* --------------------------------------------------------------------- Grid */ .sx-lc__grid { display: grid; grid-template-columns: repeat(var(--sx-lc-columns), minmax(0, 1fr)); gap: var(--sx-lc-gap); align-items: center; padding-block: var(--sx-lc-pad); } .sx-lc__grid .sx-lc__item { margin-right: 0; } /* -------------------------------------------------------------------- Logos */ .sx-lc__link { display: block; line-height: 0; pointer-events: auto; } /* Scoped through .sx-lc on purpose: Elementor's own frontend CSS ships `.elementor img { height: auto }` (specificity 0,1,1), which beats a bare `.sx-lc__logo` (0,1,0) and would pin every logo to its natural size. */ .sx-lc .sx-lc__logo { display: block; width: auto; max-width: 100%; height: var(--sx-lc-logo-height); object-fit: contain; opacity: var(--sx-lc-logo-opacity); transition: opacity 0.3s ease, filter 0.3s ease; /* Logos are decoration: never drag-select them out of the strip. */ -webkit-user-select: none; user-select: none; pointer-events: none; } .sx-lc__item:hover .sx-lc__logo { opacity: var(--sx-lc-logo-opacity-hover); } /* Colour treatments — `white` matches the original's dark:brightness-0 dark:invert. */ .sx-lc--f-white .sx-lc__logo { filter: brightness(0) invert(1); } .sx-lc--f-black .sx-lc__logo { filter: brightness(0); } .sx-lc--f-gray .sx-lc__logo { filter: grayscale(1); } .sx-lc--fh-none .sx-lc__item:hover .sx-lc__logo { filter: none; } .sx-lc--fh-white .sx-lc__item:hover .sx-lc__logo { filter: brightness(0) invert(1); } .sx-lc--fh-black .sx-lc__item:hover .sx-lc__logo { filter: brightness(0); } .sx-lc--fh-gray .sx-lc__item:hover .sx-lc__logo { filter: grayscale(1); } /* ------------------------------------------------------------------- States */ .sx-lc__notice { padding: 16px; border: 1px dashed currentColor; border-radius: 4px; opacity: 0.6; text-align: center; font-size: 13px; } @media (prefers-reduced-motion: reduce) { .sx-lc--marquee .sx-lc__track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; } .sx-lc--marquee .sx-lc__item { margin: calc(var(--sx-lc-gap) / 4) calc(var(--sx-lc-gap) / 2); } }