/** * Zodiaq Wave Slider — Frontend Styles * * Layout, transitions (swipe/fade/cut/zoom/morph/fly/wipe), fit modes * (cover/contain/center/focal), content overlays, text animations, * controls, indicators, progress bar, and responsive breakpoints. * * All customizable values use --zws-* CSS custom properties. * * @package ZodiaqWaveSlider * @copyright KeMeK Network * @license GPL-2.0-or-later */ .zws { --zws-aspect: 21/9; --zws-radius: 14px; --zws-transition-ms: 500ms; /* UI knobs */ --zws-btn-size: 52px; --zws-icon-scale: 38%; --zws-dot-w: 28px; --zws-dot-h: 3px; /* Glass surface */ --zws-glass-bg: rgba(255, 255, 255, .08); --zws-glass-bg-hover: rgba(255, 255, 255, .92); --zws-glass-border: rgba(255, 255, 255, .14); --zws-glass-blur: 16px; --zws-glass-saturation: 1.6; /* Typography — intentionally neutral; themes override */ --zws-font: system-ui, -apple-system, "Segoe UI", sans-serif; position: relative; z-index: 0; isolation: isolate; width: 100%; max-width: 100%; line-height: 0; box-sizing: border-box; overflow-x: hidden; overflow-x: clip; } /* Full-width — reset width to auto so block-level expansion works with WordPress's negative-margin alignment (.has-global-padding > .alignfull). width:100% in the base .zws rule locks width to the parent content-box; auto lets the element expand when negative margins increase available space. */ .zws.alignfull { width: auto; max-width: none; } /* In the block editor, let WP handle alignment — disable 100vw breakout. The editor renders blocks inside an iframe with .editor-styles-wrapper on . The 100vw trick breaks inside this context. */ body.editor-styles-wrapper .zws.alignfull, .editor-styles-wrapper .zws.alignfull { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* Fullscreen hero */ .zws.zws--fullscreen { max-width: none !important; height: 100vh !important; min-height: 100vh !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } .zws.zws--fullscreen .zws-viewport { height: 100vh !important; height: 100svh !important; min-height: 100vh !important; aspect-ratio: auto; } .zws.zws--fullscreen .zws-track, .zws.zws--fullscreen .zws-slide, .zws.zws--fullscreen .zws-slide figure { height: 100vh !important; } /* --- VIEWPORT -------------------------------------------------------------- */ .zws-viewport { width: 100%; aspect-ratio: var(--zws-aspect); position: relative; overflow: hidden; border-radius: var(--zws-radius); background: transparent; box-sizing: border-box; touch-action: pan-y; cursor: grab; } .zws-viewport:active { cursor: grabbing; } /* Keep slides filling the viewport */ .zws-track, .zws-slide, .zws-slide figure { height: 100%; } /* Strip list defaults */ ul.zws-track, .zws-track, .zws-track li, .zws-slide { list-style: none !important; margin: 0 !important; padding: 0 !important; } .zws-slide::marker { content: '' !important; } /* --- TRANSITION MODES ------------------------------------------------------ */ /* Swipe */ .zws:not(.zws--fade):not(.zws--cut):not(.zws--zoom):not(.zws--morph):not(.zws--fly):not(.zws--wipe) .zws-track { display: flex; transition: transform var(--zws-transition-ms) cubic-bezier(.22, 1, .36, 1); will-change: transform; } .zws:not(.zws--fade):not(.zws--cut):not(.zws--zoom):not(.zws--morph):not(.zws--fly):not(.zws--wipe) .zws-slide { min-width: 100%; flex: 0 0 100%; } /* Shared stacked layout for overlay transitions */ .zws.zws--fade .zws-track, .zws.zws--cut .zws-track, .zws.zws--zoom .zws-track, .zws.zws--morph .zws-track, .zws.zws--fly .zws-track, .zws.zws--wipe .zws-track { position: relative; height: 100%; } .zws.zws--fade .zws-slide, .zws.zws--cut .zws-slide, .zws.zws--zoom .zws-slide, .zws.zws--morph .zws-slide, .zws.zws--fly .zws-slide, .zws.zws--wipe .zws-slide { position: absolute; inset: 0; width: 100%; height: 100%; } /* Fade */ .zws.zws--fade .zws-slide { opacity: 0; transition: opacity var(--zws-transition-ms) cubic-bezier(.4, 0, .2, 1); } .zws.zws--fade .zws-slide.is-active { opacity: 1; z-index: 2; } /* Cut (instant) */ .zws.zws--cut .zws-slide { opacity: 0; transition: none; } .zws.zws--cut .zws-slide.is-active { opacity: 1; z-index: 2; } /* Zoom */ .zws.zws--zoom .zws-slide { opacity: 0; transform: scale(1.08); filter: brightness(1.03) saturate(1.15); transition: opacity var(--zws-transition-ms) cubic-bezier(.22, 1, .36, 1), transform var(--zws-transition-ms) cubic-bezier(.22, 1, .36, 1), filter var(--zws-transition-ms) cubic-bezier(.22, 1, .36, 1); } .zws.zws--zoom .zws-slide.is-active { opacity: 1; transform: scale(1); filter: none; z-index: 2; } /* Morph */ .zws.zws--morph .zws-slide { opacity: 0; transform: scale(0.97); filter: blur(8px) saturate(1.3); transition: opacity var(--zws-transition-ms) cubic-bezier(.22, 1, .36, 1), transform var(--zws-transition-ms) cubic-bezier(.22, 1, .36, 1), filter var(--zws-transition-ms) cubic-bezier(.22, 1, .36, 1); } .zws.zws--morph .zws-slide.is-active { opacity: 1; transform: scale(1); filter: blur(0) saturate(1); z-index: 2; } /* Fly Through */ .zws.zws--fly .zws-slide { opacity: 0; transform: translateX(40px) scale(1.02); filter: blur(3px); transition: opacity var(--zws-transition-ms) cubic-bezier(.22, 1, .36, 1), transform var(--zws-transition-ms) cubic-bezier(.22, 1, .36, 1), filter var(--zws-transition-ms) cubic-bezier(.22, 1, .36, 1); } .zws.zws--fly .zws-slide.is-active { opacity: 1; transform: translateX(0) scale(1); filter: none; z-index: 2; } /* Wipe */ .zws.zws--wipe .zws-slide { opacity: 1; clip-path: inset(0 100% 0 0); transform: scale(1.015); transition: clip-path var(--zws-transition-ms) cubic-bezier(.22, 1, .36, 1), transform var(--zws-transition-ms) cubic-bezier(.22, 1, .36, 1); } .zws.zws--wipe .zws-slide.is-active { clip-path: inset(0 0 0 0); transform: scale(1); z-index: 2; } /* --- FIT MODES ------------------------------------------------------------- */ .zws-slide figure { margin: 0 !important; height: 100%; position: relative; } .zws-slide picture { display: block; height: 100%; } .zws-slide img { width: 100%; height: 100%; display: block; object-position: center; object-fit: cover; } .zws.zws--contain .zws-slide img { object-fit: contain; } .zws.zws--contain .zws-viewport { background: #000; } .zws.zws--center .zws-slide img { object-fit: cover; object-position: 50% 50%; } .zws.zws--focal .zws-slide img { object-fit: cover; } /* --- CAPTION --------------------------------------------------------------- */ .zws-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: .875rem 1.25rem; font-family: var(--zws-font); font-size: .875rem; line-height: 1.5; color: #fff; text-align: left; background: linear-gradient( to top, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .2) 60%, transparent 100% ); box-sizing: border-box; } /* --- CONTENT OVERLAY ------------------------------------------------------- */ /* Overlay layer — always rendered per slide so the gradient applies even when the slide has no title/body/button. Decoupled from .zws-content so image-only slides still get the legibility tint. */ .zws-slide__overlay { --zws-overlay-strength: .65; --zws-overlay-rgb: 0, 0, 0; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( to top, rgba(var(--zws-overlay-rgb), var(--zws-overlay-strength)) 0%, rgba(var(--zws-overlay-rgb), calc(var(--zws-overlay-strength) * .4)) 45%, transparent 75% ); z-index: 2; } .zws-slide__overlay--light { --zws-overlay-rgb: 255, 255, 255; } .zws-content { --zws-text-color: #fff; --zws-button-bg: #fff; --zws-button-color: #0a0a0a; --zws-content-padding-x: 48px; --zws-content-padding-y: 40px; --zws-content-max-width: 960px; --zws-title-size: 48px; --zws-body-size: 18px; --zws-button-size: 15px; position: absolute; inset: 0; padding: var(--zws-content-padding-y) var(--zws-content-padding-x); color: var(--zws-text-color); z-index: 3; box-sizing: border-box; display: flex; align-items: flex-end; justify-content: flex-start; text-align: left; font-family: var(--zws-font); } .zws-content--top { align-items: flex-start; } .zws-content--middle { align-items: center; } .zws-content--bottom { align-items: flex-end; } .zws-content--left .zws-content__inner { margin-right: auto; text-align: left; } .zws-content--center .zws-content__inner { margin: 0 auto; text-align: center; } .zws-content--right .zws-content__inner { margin-left: auto; text-align: right; } .zws-content--light { --zws-text-color: #0a0a0a; --zws-button-bg: #0a0a0a; --zws-button-color: #fff; } .zws-content__inner { max-width: min(var(--zws-content-max-width), 68ch); } .zws-content__title { margin: 0 0 .65rem; font-size: clamp(1.375rem, 4.5vw, var(--zws-title-size)); font-weight: 700; line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; color: var(--zws-title-color, var(--zws-text-color)); } .zws-content__body { margin: 0 0 1.5rem; font-size: clamp(.95rem, 2.4vw, var(--zws-body-size)); font-weight: 400; line-height: 1.6; letter-spacing: .005em; opacity: .88; } /* --- CTA BUTTONS ----------------------------------------------------------- */ .zws-content__button { display: inline-block; position: relative; padding: .7rem 2rem; font-family: var(--zws-font); font-size: clamp(.85rem, 2vw, var(--zws-button-size)); font-weight: 600; letter-spacing: .04em; background: var(--zws-button-bg) !important; color: var(--zws-button-color) !important; border-radius: 100px; border: 1px solid transparent; text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease, box-shadow .4s ease; } /* Shimmer sweep */ .zws-content__button::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 105deg, transparent 35%, rgba(255, 255, 255, .35) 45%, rgba(255, 255, 255, .35) 55%, transparent 65% ); translate: -110% 0; transition: translate .6s cubic-bezier(.22, 1, .36, 1); z-index: 1; pointer-events: none; } .zws-content__button:hover { transform: scale(1.04); box-shadow: 0 4px 24px rgba(0, 0, 0, .18); } .zws-content__button:hover::after { translate: 110% 0; } .zws-content__button:focus-visible { outline: 2px solid var(--zws-text-color); outline-offset: 3px; } .zws-content__button:active { transform: scale(.95); opacity: .8; transition-duration: .1s; } .zws-content__button[aria-disabled="true"] { opacity: .5; pointer-events: none; } /* Ghost variant — frosted glass with rotating gradient border */ .zws-content__button--ghost { background: rgba(255, 255, 255, .05) !important; color: var(--zws-text-color) !important; border-color: rgba(255, 255, 255, .15); backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6); box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), border-color .4s ease, box-shadow .4s ease, background .3s ease; } .zws-content__button--ghost::after { background: none; } .zws-content__button--ghost:hover { background: rgba(255, 255, 255, .1) !important; border-color: rgba(255, 255, 255, .45); box-shadow: 0 0 20px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .12); } .zws-content--light .zws-content__button--ghost { background: rgba(0, 0, 0, .03) !important; border-color: rgba(0, 0, 0, .1); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); } .zws-content--light .zws-content__button--ghost:hover { background: rgba(0, 0, 0, .07) !important; border-color: rgba(0, 0, 0, .3); box-shadow: 0 0 20px rgba(0, 0, 0, .04), inset 0 1px 0 rgba(255, 255, 255, .5); } /* Minimal variant — sliding highlight reveal */ .zws-content__button--minimal { background: transparent !important; color: var(--zws-text-color) !important; border-color: transparent; border-radius: 4px; padding: .35rem .75rem; overflow: hidden; } .zws-content__button--minimal::after { content: ''; position: absolute; inset: 0; background: currentColor; opacity: 0; border-radius: inherit; transform: scaleX(0); transform-origin: left center; transition: transform .4s cubic-bezier(.22, 1, .36, 1), opacity .3s ease; z-index: -1; } .zws-content__button--minimal:hover { transform: none; } .zws-content__button--minimal:hover::after { transform: scaleX(1); opacity: .1; translate: 0; } .zws-content--light .zws-content__button--minimal:hover::after { opacity: .07; } /* --- TEXT ANIMATIONS -------------------------------------------------------- */ .zws-content[class*="zws-content--anim-"] .zws-content__title, .zws-content[class*="zws-content--anim-"] .zws-content__body, .zws-content[class*="zws-content--anim-"] .zws-content__button { opacity: 0; } .zws-content[class*="zws-content--anim-"].is-active .zws-content__title, .zws-content[class*="zws-content--anim-"].is-active .zws-content__body, .zws-content[class*="zws-content--anim-"].is-active .zws-content__button { animation-duration: var(--zws-anim-duration, 500ms); animation-fill-mode: both; animation-timing-function: cubic-bezier(.22, 1, .36, 1); } .zws-content[class*="zws-content--anim-"].is-active .zws-content__body { animation-delay: var(--zws-anim-delay, 100ms); } .zws-content[class*="zws-content--anim-"].is-active .zws-content__button { animation-delay: calc(var(--zws-anim-delay, 100ms) * 2); } .zws-content--anim-fade-up.is-active .zws-content__title, .zws-content--anim-fade-up.is-active .zws-content__body, .zws-content--anim-fade-up.is-active .zws-content__button { animation-name: zwsFadeUp; } .zws-content--anim-slide-up.is-active .zws-content__title, .zws-content--anim-slide-up.is-active .zws-content__body, .zws-content--anim-slide-up.is-active .zws-content__button { animation-name: zwsSlideUp; } .zws-content--anim-fade-in.is-active .zws-content__title, .zws-content--anim-fade-in.is-active .zws-content__body, .zws-content--anim-fade-in.is-active .zws-content__button { animation-name: zwsFadeIn; } .zws-content--anim-slide-left.is-active .zws-content__title, .zws-content--anim-slide-left.is-active .zws-content__body, .zws-content--anim-slide-left.is-active .zws-content__button { animation-name: zwsSlideLeft; } @keyframes zwsFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes zwsFadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes zwsSlideUp { from { opacity: 1; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes zwsSlideLeft { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } /* --- NAV CONTROLS ---------------------------------------------------------- */ /* Controls overlay */ .zws-viewport > .zws-controls { position: absolute; inset: 0; z-index: 10; pointer-events: none; } /* Shared glass button */ .zws-prev, .zws-next, .zws-toggle { pointer-events: auto; border: 0; background: var(--zws-glass-bg); color: #fff; border-radius: 999px; width: var(--zws-btn-size); height: var(--zws-btn-size); cursor: pointer; position: relative; font-size: 0; line-height: 0; backdrop-filter: blur(var(--zws-glass-blur)) saturate(var(--zws-glass-saturation)); -webkit-backdrop-filter: blur(var(--zws-glass-blur)) saturate(var(--zws-glass-saturation)); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 4px 12px rgba(0, 0, 0, .08), inset 0 0 0 1px var(--zws-glass-border); transition: background .25s cubic-bezier(.22, 1, .36, 1), color .2s ease, transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s cubic-bezier(.22, 1, .36, 1), opacity .2s ease; } /* Arrow placement */ .zws-prev, .zws-next { position: absolute; top: 50%; transform: translateY(-50%); } .zws-prev { left: 1.125rem; } .zws-next { right: 1.125rem; } .zws-toggle { position: absolute; top: 1rem; right: 1rem; } /* Hover — glass inverts to solid */ .zws-prev:hover, .zws-next:hover, .zws-toggle:hover { background: var(--zws-glass-bg-hover); color: #0a0a0a; box-shadow: 0 4px 20px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .1), inset 0 0 0 1px rgba(255, 255, 255, .4); } .zws-prev:hover, .zws-next:hover { transform: translateY(-50%) scale(1.08); } .zws-toggle:hover { transform: scale(1.08); } /* Active press */ .zws-prev:active, .zws-next:active { transform: translateY(-50%) scale(.96); transition-duration: .1s; } .zws-toggle:active { transform: scale(.96); transition-duration: .1s; } /* Focus ring — visible only for keyboard */ .zws-prev:focus:not(:focus-visible), .zws-next:focus:not(:focus-visible), .zws-toggle:focus:not(:focus-visible) { outline: none; } .zws-prev:focus-visible, .zws-next:focus-visible, .zws-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } /* SVG-mask icon base */ .zws-prev::before, .zws-next::before, .zws-toggle::before { content: ""; position: absolute; inset: 0; margin: auto; width: var(--zws-icon-scale); height: var(--zws-icon-scale); background: currentColor; -webkit-mask: none; mask: none; } /* Chevrons — clean stroke weight */ .zws-prev::before { -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .zws-next::before { -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } /* Play / Pause icons */ .zws-toggle[data-state="play"]::before { -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .zws-toggle[data-state="pause"]::before { -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } /* --- PROGRESS BAR ---------------------------------------------------------- */ .zws-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .08); z-index: 11; } .zws-progress__bar { display: block; width: 0%; height: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .95)); box-shadow: 0 0 10px rgba(255, 255, 255, .3); will-change: width; } /* --- INDICATORS ------------------------------------------------------------ */ .zws-indicators { position: absolute; left: 0; right: 0; bottom: 1.125rem; display: flex; gap: 7px; justify-content: center; align-items: center; z-index: 11; } .zws-dot { width: var(--zws-dot-w); height: var(--zws-dot-h); border-radius: 999px; border: 0; background: rgba(255, 255, 255, .3); cursor: pointer; padding: 0; position: relative; overflow: hidden; transition: width .35s cubic-bezier(.22, 1, .36, 1), background .25s ease, box-shadow .25s ease; } .zws-dot:hover { background: rgba(255, 255, 255, .55); } .zws-dot.is-active { width: 44px; background: rgba(255, 255, 255, .25); box-shadow: 0 0 12px rgba(255, 255, 255, .15); } /* Active fill sweep — luminous bar that grows to full width */ .zws-dot.is-active::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #fff; transform-origin: left; animation: zwsDotFill var(--zws-dot-duration, 5s) linear .35s forwards; opacity: 0; } @keyframes zwsDotFill { 0% { transform: scaleX(0); opacity: 1; } 100% { transform: scaleX(1); opacity: 1; } } /* When autoplay is off or paused, the fill should not animate */ .zws[data-autoplay="0"] .zws-dot.is-active::after, .zws[data-autoplay="false"] .zws-dot.is-active::after { animation: none; transform: scaleX(1); background: #fff; } .zws-dot:focus-visible { outline: 2px solid #fff; outline-offset: 4px; box-shadow: 0 0 0 3px rgba(0, 0, 0, .3); } /* Screen reader text */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } /* --- LINKED TITLE (all viewports) ------------------------------------------ */ .zws-content__title-link { color: inherit; text-decoration: none; padding-bottom: .08em; transition: letter-spacing .4s cubic-bezier(.22, 1, .36, 1), opacity .25s ease; } .zws-content__title-link:hover { letter-spacing: -.005em; opacity: .92; } .zws-content__title-link:active { opacity: .75; transition-duration: .08s; } .zws-content__title-link:focus-visible { outline: 2px solid var(--zws-text-color); outline-offset: 4px; border-radius: 2px; } /* Trailing arrow hint — always visible on linked titles */ .zws-content__title--linked::after { content: '\2009\2192'; opacity: .4; font-weight: 400; transition: opacity .35s cubic-bezier(.22, 1, .36, 1), transform .35s cubic-bezier(.22, 1, .36, 1); display: inline-block; } .zws-content__title--linked:hover::after { opacity: .7; transform: translateX(4px); } /* --- RESPONSIVE ------------------------------------------------------------ */ /* Tablet — hide button, show title + body */ @media (max-width: 768px) { .zws { --zws-btn-size: 42px; --zws-dot-w: 22px; --zws-dot-h: 3px; --zws-glass-blur: 12px; } .zws-content { --zws-content-padding-x: 22px; --zws-content-padding-y: 20px; } .zws-content__inner { max-width: min(var(--zws-content-max-width), 92vw); } .zws-content__title { margin: 0 0 .4rem; line-height: 1.12; } .zws-content__body { margin: 0 0 .875rem; line-height: 1.5; } /* Hide CTA button — the linked title carries the URL */ .zws-content__button { display: none; } .zws-prev { left: .75rem; } .zws-next { right: .75rem; } .zws-toggle { top: .75rem; right: .75rem; } .zws-indicators { bottom: .875rem; } .zws-dot.is-active { width: 34px; } } /* Mobile — title only */ @media (max-width: 480px) { .zws { --zws-btn-size: 38px; --zws-icon-scale: 36%; } .zws-content { --zws-content-padding-x: 16px; --zws-content-padding-y: 14px; } /* Hide body text — not enough vertical space */ .zws-content__body { display: none; } .zws-content__title { margin: 0; font-size: clamp(1.125rem, 5vw, 1.75rem); } } /* --- REDUCED MOTION -------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .zws:not(.zws--fade):not(.zws--cut):not(.zws--zoom):not(.zws--morph):not(.zws--fly):not(.zws--wipe) .zws-track { transition: none; } .zws.zws--fade .zws-slide, .zws.zws--cut .zws-slide, .zws.zws--zoom .zws-slide, .zws.zws--morph .zws-slide, .zws.zws--fly .zws-slide { transition: none; transform: none !important; filter: none !important; } .zws.zws--wipe .zws-slide { transition: none; transform: none !important; clip-path: none !important; opacity: 0; } .zws.zws--wipe .zws-slide.is-active { opacity: 1; } .zws-content__button { transition: none; } .zws-content__button::after { display: none; } .zws-dot { transition: none; } .zws-dot.is-active::after { animation: none; transform: scaleX(1); } .zws-prev, .zws-next, .zws-toggle { transition: none; } .zws-content[class*="zws-content--anim-"] .zws-content__title, .zws-content[class*="zws-content--anim-"] .zws-content__body, .zws-content[class*="zws-content--anim-"] .zws-content__button { animation: none !important; opacity: 1; transform: none; } }