/** * LT Widgets Modular - Image Effects * Modules: Mask Fade + Shape Masks. * * Legacy-compatible classes from the old Mask Fade implementation are preserved. */ .lt-maskfade, .lt-maskfade-enabled-yes { --lt-angle: 90deg; --lt-s: 0%; --lt-m: 50%; --lt-e: 100%; --lt-mid-alpha: 0.5; } .lt-maskfade-image img, .lt-maskfade-enabled-yes.elementor-widget-image img { -webkit-mask-image: linear-gradient( var(--lt-angle), rgba(0, 0, 0, 0) var(--lt-s), rgba(0, 0, 0, var(--lt-mid-alpha)) var(--lt-m), rgba(0, 0, 0, 1) var(--lt-e) ) !important; mask-image: linear-gradient( var(--lt-angle), rgba(0, 0, 0, 0) var(--lt-s), rgba(0, 0, 0, var(--lt-mid-alpha)) var(--lt-m), rgba(0, 0, 0, 1) var(--lt-e) ) !important; -webkit-mask-size: 100% 100% !important; mask-size: 100% 100% !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-position: center !important; } .lt-maskfade-container:not(.lt-maskfade-container-bg-only), .lt-maskfade-enabled-yes.e-con:not(.lt-maskfade-container-bg-only) { -webkit-mask-image: linear-gradient( var(--lt-angle), rgba(0, 0, 0, 0) var(--lt-s), rgba(0, 0, 0, var(--lt-mid-alpha)) var(--lt-m), rgba(0, 0, 0, 1) var(--lt-e) ) !important; mask-image: linear-gradient( var(--lt-angle), rgba(0, 0, 0, 0) var(--lt-s), rgba(0, 0, 0, var(--lt-mid-alpha)) var(--lt-m), rgba(0, 0, 0, 1) var(--lt-e) ) !important; -webkit-mask-size: 100% 100% !important; mask-size: 100% 100% !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-position: center !important; } /* v1.16.76: Mask Fade on a Container background image only. * This keeps the container content unmasked by moving the background image to * a decorative pseudo-element. The original background image is hidden only * when the module could read Elementor's background image URL. */ .lt-maskfade-container-bg-only.e-con, .lt-maskfade-container-bg-only.elementor-element { position: relative !important; isolation: isolate; } .lt-maskfade-container-bg-ready.e-con, .lt-maskfade-container-bg-ready.elementor-element { background-image: none !important; } .lt-maskfade-container-bg-ready.e-con::before, .lt-maskfade-container-bg-ready.elementor-element::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background-image: var(--lt-maskfade-bg-image, none); background-position: var(--lt-maskfade-bg-position, center center); background-repeat: var(--lt-maskfade-bg-repeat, no-repeat); background-size: var(--lt-maskfade-bg-size, cover); background-attachment: var(--lt-maskfade-bg-attachment, scroll); -webkit-mask-image: linear-gradient( var(--lt-angle), rgba(0, 0, 0, 0) var(--lt-s), rgba(0, 0, 0, var(--lt-mid-alpha)) var(--lt-m), rgba(0, 0, 0, 1) var(--lt-e) ) !important; mask-image: linear-gradient( var(--lt-angle), rgba(0, 0, 0, 0) var(--lt-s), rgba(0, 0, 0, var(--lt-mid-alpha)) var(--lt-m), rgba(0, 0, 0, 1) var(--lt-e) ) !important; -webkit-mask-size: 100% 100% !important; mask-size: 100% 100% !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-position: center !important; } .lt-maskfade-container-bg-ready.e-con > *, .lt-maskfade-container-bg-ready.elementor-element > * { position: relative; z-index: 1; } .lt-maskfade-container-bg-missing.e-con, .lt-maskfade-container-bg-missing.elementor-element { -webkit-mask-image: none !important; mask-image: none !important; } /* Do not force width:100%; Elementor width/max-width/aspect-ratio controls must keep working. */ .lt-maskfade-image img, .lt-shapemask-image img { display: block; max-width: 100%; height: auto; } .lt-maskfade-container.e-con, .lt-shapemask-container.e-con { position: relative; } /* Shape Masks ------------------------------------------------------------ */ .lt-shapemask, .lt-shapemask-type-rounded-soft, .lt-shapemask-type-rounded-xl, .lt-shapemask-type-circle, .lt-shapemask-type-blob-svg, .lt-shapemask-type-custom-svg, .lt-shapemask-type-diagonal-cut, .lt-shapemask-type-arch, .lt-shapemask-type-ticket { --lt-shape-mask-size: contain; --lt-shape-diagonal-angle: 8deg; --lt-shape-diagonal-depth: 8%; --lt-shape-diagonal-positive: max(var(--lt-shape-diagonal-depth, 8%), 0%); --lt-shape-diagonal-negative: min(var(--lt-shape-diagonal-depth, 8%), 0%); --lt-shape-arch-radius: 120px; --lt-shape-arch-depth: var(--lt-shape-arch-radius, 120px); --lt-shape-arch-positive: max(var(--lt-shape-arch-depth, 120px), 0px); --lt-shape-arch-negative: max(calc(var(--lt-shape-arch-depth, 120px) * -1), 0px); } .lt-shapemask-image.lt-shapemask-rounded-soft img, .lt-shapemask-type-rounded-soft.elementor-widget-image img, .lt-shapemask-container.lt-shapemask-rounded-soft, .lt-shapemask-type-rounded-soft.e-con { border-radius: var(--lt-shape-radius-soft, 20px) !important; } .lt-shapemask-image.lt-shapemask-rounded-xl img, .lt-shapemask-type-rounded-xl.elementor-widget-image img, .lt-shapemask-container.lt-shapemask-rounded-xl, .lt-shapemask-type-rounded-xl.e-con { border-radius: var(--lt-shape-radius-xl, 56px) !important; } .lt-shapemask-image.lt-shapemask-circle img, .lt-shapemask-type-circle.elementor-widget-image img, .lt-shapemask-container.lt-shapemask-circle, .lt-shapemask-type-circle.e-con { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 999px !important; } .lt-shapemask-image.lt-shapemask-blob-svg img, .lt-shapemask-type-blob-svg.elementor-widget-image img, .lt-shapemask-container.lt-shapemask-blob-svg, .lt-shapemask-type-blob-svg.e-con, .lt-shapemask-image.lt-shapemask-custom-svg img, .lt-shapemask-type-custom-svg.elementor-widget-image img, .lt-shapemask-container.lt-shapemask-custom-svg, .lt-shapemask-type-custom-svg.e-con { -webkit-mask-image: var(--lt-shape-mask-url) !important; mask-image: var(--lt-shape-mask-url) !important; -webkit-mask-size: var(--lt-shape-mask-size, contain) !important; mask-size: var(--lt-shape-mask-size, contain) !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-position: center !important; } .lt-shapemask-image.lt-shapemask-diagonal-cut img, .lt-shapemask-type-diagonal-cut.elementor-widget-image img, .lt-shapemask-container.lt-shapemask-diagonal-cut, .lt-shapemask-type-diagonal-cut.e-con { /* Bottom cut. Signed depth lets negative values tilt the cut in the opposite direction. */ -webkit-clip-path: polygon( 0 0, 100% 0, 100% calc(100% - var(--lt-shape-diagonal-positive, 8%)), 0 calc(100% + var(--lt-shape-diagonal-negative, 0%)) ); clip-path: polygon( 0 0, 100% 0, 100% calc(100% - var(--lt-shape-diagonal-positive, 8%)), 0 calc(100% + var(--lt-shape-diagonal-negative, 0%)) ); } .lt-shapemask-diagonal-top.lt-shapemask-image.lt-shapemask-diagonal-cut img, .lt-shapemask-diagonal-top.lt-shapemask-type-diagonal-cut.elementor-widget-image img, .lt-shapemask-diagonal-top.lt-shapemask-container.lt-shapemask-diagonal-cut, .lt-shapemask-diagonal-top.lt-shapemask-type-diagonal-cut.e-con { -webkit-clip-path: polygon( 0 var(--lt-shape-diagonal-positive, 8%), 100% calc(0% - var(--lt-shape-diagonal-negative, 0%)), 100% 100%, 0 100% ); clip-path: polygon( 0 var(--lt-shape-diagonal-positive, 8%), 100% calc(0% - var(--lt-shape-diagonal-negative, 0%)), 100% 100%, 0 100% ); } .lt-shapemask-diagonal-both.lt-shapemask-image.lt-shapemask-diagonal-cut img, .lt-shapemask-diagonal-both.lt-shapemask-type-diagonal-cut.elementor-widget-image img, .lt-shapemask-diagonal-both.lt-shapemask-container.lt-shapemask-diagonal-cut, .lt-shapemask-diagonal-both.lt-shapemask-type-diagonal-cut.e-con { -webkit-clip-path: polygon( 0 var(--lt-shape-diagonal-positive, 8%), 100% calc(0% - var(--lt-shape-diagonal-negative, 0%)), 100% calc(100% - var(--lt-shape-diagonal-positive, 8%)), 0 calc(100% + var(--lt-shape-diagonal-negative, 0%)) ); clip-path: polygon( 0 var(--lt-shape-diagonal-positive, 8%), 100% calc(0% - var(--lt-shape-diagonal-negative, 0%)), 100% calc(100% - var(--lt-shape-diagonal-positive, 8%)), 0 calc(100% + var(--lt-shape-diagonal-negative, 0%)) ); } /* Arch uses clip-path polygons instead of gradient masks, so the cut is crisp. Positive depth creates a convex arch. Negative depth creates an inward/concave cut. */ .lt-shapemask-image.lt-shapemask-arch img, .lt-shapemask-type-arch.elementor-widget-image img, .lt-shapemask-container.lt-shapemask-arch, .lt-shapemask-type-arch.e-con { --lt-shape-arch-depth: var(--lt-shape-arch-radius, 120px); --lt-shape-arch-positive: max(var(--lt-shape-arch-depth, 120px), 0px); --lt-shape-arch-negative: max(calc(var(--lt-shape-arch-depth, 120px) * -1), 0px); } .lt-shapemask-arch-top.lt-shapemask-image.lt-shapemask-arch img, .lt-shapemask-arch-top.lt-shapemask-type-arch.elementor-widget-image img, .lt-shapemask-arch-top.lt-shapemask-container.lt-shapemask-arch, .lt-shapemask-arch-top.lt-shapemask-type-arch.e-con { -webkit-clip-path: polygon( 0 var(--lt-shape-arch-positive), 12.5% calc((var(--lt-shape-arch-positive) * 0.5625) + (var(--lt-shape-arch-negative) * 0.4375)), 25% calc((var(--lt-shape-arch-positive) * 0.25) + (var(--lt-shape-arch-negative) * 0.75)), 37.5% calc((var(--lt-shape-arch-positive) * 0.0625) + (var(--lt-shape-arch-negative) * 0.9375)), 50% var(--lt-shape-arch-negative), 62.5% calc((var(--lt-shape-arch-positive) * 0.0625) + (var(--lt-shape-arch-negative) * 0.9375)), 75% calc((var(--lt-shape-arch-positive) * 0.25) + (var(--lt-shape-arch-negative) * 0.75)), 87.5% calc((var(--lt-shape-arch-positive) * 0.5625) + (var(--lt-shape-arch-negative) * 0.4375)), 100% var(--lt-shape-arch-positive), 100% 100%, 0 100% ); clip-path: polygon( 0 var(--lt-shape-arch-positive), 12.5% calc((var(--lt-shape-arch-positive) * 0.5625) + (var(--lt-shape-arch-negative) * 0.4375)), 25% calc((var(--lt-shape-arch-positive) * 0.25) + (var(--lt-shape-arch-negative) * 0.75)), 37.5% calc((var(--lt-shape-arch-positive) * 0.0625) + (var(--lt-shape-arch-negative) * 0.9375)), 50% var(--lt-shape-arch-negative), 62.5% calc((var(--lt-shape-arch-positive) * 0.0625) + (var(--lt-shape-arch-negative) * 0.9375)), 75% calc((var(--lt-shape-arch-positive) * 0.25) + (var(--lt-shape-arch-negative) * 0.75)), 87.5% calc((var(--lt-shape-arch-positive) * 0.5625) + (var(--lt-shape-arch-negative) * 0.4375)), 100% var(--lt-shape-arch-positive), 100% 100%, 0 100% ); } .lt-shapemask-arch-bottom.lt-shapemask-image.lt-shapemask-arch img, .lt-shapemask-arch-bottom.lt-shapemask-type-arch.elementor-widget-image img, .lt-shapemask-arch-bottom.lt-shapemask-container.lt-shapemask-arch, .lt-shapemask-arch-bottom.lt-shapemask-type-arch.e-con { -webkit-clip-path: polygon( 0 0, 100% 0, 100% calc(100% - var(--lt-shape-arch-positive)), 87.5% calc(100% - ((var(--lt-shape-arch-positive) * 0.5625) + (var(--lt-shape-arch-negative) * 0.4375))), 75% calc(100% - ((var(--lt-shape-arch-positive) * 0.25) + (var(--lt-shape-arch-negative) * 0.75))), 62.5% calc(100% - ((var(--lt-shape-arch-positive) * 0.0625) + (var(--lt-shape-arch-negative) * 0.9375))), 50% calc(100% - var(--lt-shape-arch-negative)), 37.5% calc(100% - ((var(--lt-shape-arch-positive) * 0.0625) + (var(--lt-shape-arch-negative) * 0.9375))), 25% calc(100% - ((var(--lt-shape-arch-positive) * 0.25) + (var(--lt-shape-arch-negative) * 0.75))), 12.5% calc(100% - ((var(--lt-shape-arch-positive) * 0.5625) + (var(--lt-shape-arch-negative) * 0.4375))), 0 calc(100% - var(--lt-shape-arch-positive)) ); clip-path: polygon( 0 0, 100% 0, 100% calc(100% - var(--lt-shape-arch-positive)), 87.5% calc(100% - ((var(--lt-shape-arch-positive) * 0.5625) + (var(--lt-shape-arch-negative) * 0.4375))), 75% calc(100% - ((var(--lt-shape-arch-positive) * 0.25) + (var(--lt-shape-arch-negative) * 0.75))), 62.5% calc(100% - ((var(--lt-shape-arch-positive) * 0.0625) + (var(--lt-shape-arch-negative) * 0.9375))), 50% calc(100% - var(--lt-shape-arch-negative)), 37.5% calc(100% - ((var(--lt-shape-arch-positive) * 0.0625) + (var(--lt-shape-arch-negative) * 0.9375))), 25% calc(100% - ((var(--lt-shape-arch-positive) * 0.25) + (var(--lt-shape-arch-negative) * 0.75))), 12.5% calc(100% - ((var(--lt-shape-arch-positive) * 0.5625) + (var(--lt-shape-arch-negative) * 0.4375))), 0 calc(100% - var(--lt-shape-arch-positive)) ); } .lt-shapemask-arch-both.lt-shapemask-image.lt-shapemask-arch img, .lt-shapemask-arch-both.lt-shapemask-type-arch.elementor-widget-image img, .lt-shapemask-arch-both.lt-shapemask-container.lt-shapemask-arch, .lt-shapemask-arch-both.lt-shapemask-type-arch.e-con { -webkit-clip-path: polygon( 0 var(--lt-shape-arch-positive), 12.5% calc((var(--lt-shape-arch-positive) * 0.5625) + (var(--lt-shape-arch-negative) * 0.4375)), 25% calc((var(--lt-shape-arch-positive) * 0.25) + (var(--lt-shape-arch-negative) * 0.75)), 37.5% calc((var(--lt-shape-arch-positive) * 0.0625) + (var(--lt-shape-arch-negative) * 0.9375)), 50% var(--lt-shape-arch-negative), 62.5% calc((var(--lt-shape-arch-positive) * 0.0625) + (var(--lt-shape-arch-negative) * 0.9375)), 75% calc((var(--lt-shape-arch-positive) * 0.25) + (var(--lt-shape-arch-negative) * 0.75)), 87.5% calc((var(--lt-shape-arch-positive) * 0.5625) + (var(--lt-shape-arch-negative) * 0.4375)), 100% var(--lt-shape-arch-positive), 100% calc(100% - var(--lt-shape-arch-positive)), 87.5% calc(100% - ((var(--lt-shape-arch-positive) * 0.5625) + (var(--lt-shape-arch-negative) * 0.4375))), 75% calc(100% - ((var(--lt-shape-arch-positive) * 0.25) + (var(--lt-shape-arch-negative) * 0.75))), 62.5% calc(100% - ((var(--lt-shape-arch-positive) * 0.0625) + (var(--lt-shape-arch-negative) * 0.9375))), 50% calc(100% - var(--lt-shape-arch-negative)), 37.5% calc(100% - ((var(--lt-shape-arch-positive) * 0.0625) + (var(--lt-shape-arch-negative) * 0.9375))), 25% calc(100% - ((var(--lt-shape-arch-positive) * 0.25) + (var(--lt-shape-arch-negative) * 0.75))), 12.5% calc(100% - ((var(--lt-shape-arch-positive) * 0.5625) + (var(--lt-shape-arch-negative) * 0.4375))), 0 calc(100% - var(--lt-shape-arch-positive)) ); clip-path: polygon( 0 var(--lt-shape-arch-positive), 12.5% calc((var(--lt-shape-arch-positive) * 0.5625) + (var(--lt-shape-arch-negative) * 0.4375)), 25% calc((var(--lt-shape-arch-positive) * 0.25) + (var(--lt-shape-arch-negative) * 0.75)), 37.5% calc((var(--lt-shape-arch-positive) * 0.0625) + (var(--lt-shape-arch-negative) * 0.9375)), 50% var(--lt-shape-arch-negative), 62.5% calc((var(--lt-shape-arch-positive) * 0.0625) + (var(--lt-shape-arch-negative) * 0.9375)), 75% calc((var(--lt-shape-arch-positive) * 0.25) + (var(--lt-shape-arch-negative) * 0.75)), 87.5% calc((var(--lt-shape-arch-positive) * 0.5625) + (var(--lt-shape-arch-negative) * 0.4375)), 100% var(--lt-shape-arch-positive), 100% calc(100% - var(--lt-shape-arch-positive)), 87.5% calc(100% - ((var(--lt-shape-arch-positive) * 0.5625) + (var(--lt-shape-arch-negative) * 0.4375))), 75% calc(100% - ((var(--lt-shape-arch-positive) * 0.25) + (var(--lt-shape-arch-negative) * 0.75))), 62.5% calc(100% - ((var(--lt-shape-arch-positive) * 0.0625) + (var(--lt-shape-arch-negative) * 0.9375))), 50% calc(100% - var(--lt-shape-arch-negative)), 37.5% calc(100% - ((var(--lt-shape-arch-positive) * 0.0625) + (var(--lt-shape-arch-negative) * 0.9375))), 25% calc(100% - ((var(--lt-shape-arch-positive) * 0.25) + (var(--lt-shape-arch-negative) * 0.75))), 12.5% calc(100% - ((var(--lt-shape-arch-positive) * 0.5625) + (var(--lt-shape-arch-negative) * 0.4375))), 0 calc(100% - var(--lt-shape-arch-positive)) ); } .lt-shapemask-image.lt-shapemask-ticket img, .lt-shapemask-type-ticket.elementor-widget-image img, .lt-shapemask-container.lt-shapemask-ticket, .lt-shapemask-type-ticket.e-con { -webkit-clip-path: polygon(8% 0, 92% 0, 92% 8%, 100% 8%, 100% 92%, 92% 92%, 92% 100%, 8% 100%, 8% 92%, 0 92%, 0 8%, 8% 8%); clip-path: polygon(8% 0, 92% 0, 92% 8%, 100% 8%, 100% 92%, 92% 92%, 92% 100%, 8% 100%, 8% 92%, 0 92%, 0 8%, 8% 8%); } /* Atomic containers ------------------------------------------------------ * Values are stored as Atomic props. The editor bridge and PHP renderer set * only these plugin-owned variables/classes; native Flexbox/Grid layout is not * modified. */ .lt-atomic-image-effects { --lt-angle: var(--lt-atomic-mask-angle-desktop, 90deg); --lt-s: var(--lt-atomic-mask-start-desktop, 0%); --lt-m: var(--lt-atomic-mask-mid-desktop, 50%); --lt-e: var(--lt-atomic-mask-end-desktop, 100%); --lt-mid-alpha: var(--lt-atomic-mask-opacity-desktop, 0.5); --lt-shape-diagonal-depth: var(--lt-atomic-shape-diagonal-desktop, 8%); --lt-shape-arch-radius: var(--lt-atomic-shape-arch-desktop, 120px); --lt-shape-arch-depth: var(--lt-shape-arch-radius); } @media (max-width: 1024px) { .lt-atomic-image-effects { --lt-angle: var(--lt-atomic-mask-angle-tablet, var(--lt-atomic-mask-angle-desktop, 90deg)); --lt-s: var(--lt-atomic-mask-start-tablet, var(--lt-atomic-mask-start-desktop, 0%)); --lt-m: var(--lt-atomic-mask-mid-tablet, var(--lt-atomic-mask-mid-desktop, 50%)); --lt-e: var(--lt-atomic-mask-end-tablet, var(--lt-atomic-mask-end-desktop, 100%)); --lt-mid-alpha: var(--lt-atomic-mask-opacity-tablet, var(--lt-atomic-mask-opacity-desktop, 0.5)); --lt-shape-diagonal-depth: var(--lt-atomic-shape-diagonal-tablet, var(--lt-atomic-shape-diagonal-desktop, 8%)); --lt-shape-arch-radius: var(--lt-atomic-shape-arch-tablet, var(--lt-atomic-shape-arch-desktop, 120px)); --lt-shape-arch-depth: var(--lt-shape-arch-radius); } } @media (max-width: 767px) { .lt-atomic-image-effects { --lt-angle: var(--lt-atomic-mask-angle-mobile, var(--lt-atomic-mask-angle-tablet, 90deg)); --lt-s: var(--lt-atomic-mask-start-mobile, var(--lt-atomic-mask-start-tablet, 0%)); --lt-m: var(--lt-atomic-mask-mid-mobile, var(--lt-atomic-mask-mid-tablet, 50%)); --lt-e: var(--lt-atomic-mask-end-mobile, var(--lt-atomic-mask-end-tablet, 100%)); --lt-mid-alpha: var(--lt-atomic-mask-opacity-mobile, var(--lt-atomic-mask-opacity-tablet, 0.5)); --lt-shape-diagonal-depth: var(--lt-atomic-shape-diagonal-mobile, var(--lt-atomic-shape-diagonal-tablet, 8%)); --lt-shape-arch-radius: var(--lt-atomic-shape-arch-mobile, var(--lt-atomic-shape-arch-tablet, 120px)); --lt-shape-arch-depth: var(--lt-shape-arch-radius); } }