/* ======================================================== CAROUSEL GADGET STYLES ======================================================== */ /* Stack the slides once JavaScript is successfully enabled */ .wv-js-carousel-wrapper.is-carousel .wv-js-carousel-slide { position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; margin-bottom: 0 !important; opacity: 0; pointer-events: none; z-index: 0; will-change: transform, opacity; } .wv-js-carousel-wrapper.is-carousel .wv-js-carousel-slide.active, .wv-js-carousel-wrapper.is-carousel .wv-js-carousel-slide.anim-next-enter, .wv-js-carousel-wrapper.is-carousel .wv-js-carousel-slide.anim-next-leave, .wv-js-carousel-wrapper.is-carousel .wv-js-carousel-slide.anim-prev-enter, .wv-js-carousel-wrapper.is-carousel .wv-js-carousel-slide.anim-prev-leave { opacity: 1 !important; z-index: 10; pointer-events: auto; } /* Slide Keyframes */ .wv-js-carousel-wrapper.is-carousel .wv-js-carousel-slide.anim-next-enter { z-index: 10; animation: slideInRight 0.6s ease-out forwards; } .wv-js-carousel-wrapper.is-carousel .wv-js-carousel-slide.anim-next-leave { z-index: 5; animation: slideOutLeft 0.6s ease-out forwards; } .wv-js-carousel-wrapper.is-carousel .wv-js-carousel-slide.anim-prev-enter { z-index: 10; animation: slideInLeft 0.6s ease-out forwards; } .wv-js-carousel-wrapper.is-carousel .wv-js-carousel-slide.anim-prev-leave { z-index: 5; animation: slideOutRight 0.6s ease-out forwards; } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes slideOutLeft { from { transform: translateX(0); } to { transform: translateX(-100%); } } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes slideOutRight { from { transform: translateX(0); } to { transform: translateX(100%); } } /* ======================================================== PREFERS-REDUCED-MOTION ======================================================== */ @media (prefers-reduced-motion: reduce) { .wv-js-carousel-slide, .wv-js-carousel-prev, .wv-js-carousel-next, .wv-js-carousel-dots button { animation: none !important; transition: none !important; } } /* ======================================================== PREV/NEXT ======================================================== */ .wv-js-carousel-prev, .wv-js-carousel-next { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; background-color: rgba(255, 255, 255, 0.35); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; cursor: pointer; z-index: 30; background-repeat: no-repeat; background-position: center; background-size: 20px 20px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); transition: background-color 0.25s ease, transform 0.2s ease; } .wv-js-carousel-prev { left: -21px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 20 20'%3E%3Cpath d='M4 10l9 9 1.4-1.4L6.8 10l7.6-7.6L13 1z' fill='%23202122'/%3E%3C/svg%3E"); } .wv-js-carousel-next { right: -21px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 20 20'%3E%3Cpath d='M16 10l-9-9-1.4 1.4 7.6 7.6-7.6 7.6L7 19z' fill='%23202122'/%3E%3C/svg%3E"); } .wv-js-carousel-prev:hover, .wv-js-carousel-next:hover { background-color: rgba(255, 255, 255, 0.9); transform: translateY(-50%) scale(1.08); } .wv-js-carousel-prev:focus-visible, .wv-js-carousel-next:focus-visible { outline: 2px solid #36c; outline-offset: 2px; } /* ======================================================== NUMBERED PAGINATION (Bottom-Left 1, 2, 3 Tabs) ======================================================== */ .wv-js-carousel-dots { position: absolute; bottom: 12px; left: 40px; transform: none; display: flex; gap: 6px; z-index: 20; } .wv-js-carousel-dots:empty { display: none; } /* Inactive numbered tabs */ .wv-js-carousel-dots button { width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, 0.4); color: rgba(255, 255, 255, 0.85); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 11px; font-weight: 700; line-height: 22px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.2); cursor: pointer; padding: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } /* Active and hover tab states */ .wv-js-carousel-dots button.active, .wv-js-carousel-dots button:hover { background: rgba(255, 255, 255, 0.65); color: #101418; border-color: rgba(255, 255, 255, 0.9); transform: scale(1.1); } .wv-js-carousel-dots button:focus-visible { outline: 2px solid #36c; outline-offset: 2px; } /* ======================================================== DARK THEME OVERRIDES ======================================================== */ @media screen { html.skin-theme-clientpref-night .wv-js-carousel-prev, html.skin-theme-clientpref-night .wv-js-carousel-next { background-color: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); } html.skin-theme-clientpref-night .wv-js-carousel-prev { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 20 20'%3E%3Cpath d='M4 10l9 9 1.4-1.4L6.8 10l7.6-7.6L13 1z' fill='%23ffffff'/%3E%3C/svg%3E"); } html.skin-theme-clientpref-night .wv-js-carousel-next { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 20 20'%3E%3Cpath d='M16 10l-9-9-1.4 1.4 7.6 7.6-7.6 7.6L7 19z' fill='%23ffffff'/%3E%3C/svg%3E"); } html.skin-theme-clientpref-night .wv-js-carousel-prev:hover, html.skin-theme-clientpref-night .wv-js-carousel-next:hover { background-color: rgba(0, 0, 0, 0.75); } html.skin-theme-clientpref-night .wv-js-carousel-dots button { background: rgba(0, 0, 0, 0.45); color: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.2); } html.skin-theme-clientpref-night .wv-js-carousel-dots button.active, html.skin-theme-clientpref-night .wv-js-carousel-dots button:hover { background: rgba(255, 255, 255, 0.35); color: #ffffff; border-color: rgba(255, 255, 255, 0.7); } } @media screen and (prefers-color-scheme: dark) { html.skin-theme-clientpref-os .wv-js-carousel-prev, html.skin-theme-clientpref-os .wv-js-carousel-next { background-color: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); } html.skin-theme-clientpref-os .wv-js-carousel-prev { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 20 20'%3E%3Cpath d='M4 10l9 9 1.4-1.4L6.8 10l7.6-7.6L13 1z' fill='%23ffffff'/%3E%3C/svg%3E"); } html.skin-theme-clientpref-os .wv-js-carousel-next { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 20 20'%3E%3Cpath d='M16 10l-9-9-1.4 1.4 7.6 7.6-7.6 7.6L7 19z' fill='%23ffffff'/%3E%3C/svg%3E"); } html.skin-theme-clientpref-os .wv-js-carousel-prev:hover, html.skin-theme-clientpref-os .wv-js-carousel-next:hover { background-color: rgba(0, 0, 0, 0.75); } html.skin-theme-clientpref-os .wv-js-carousel-dots button { background: rgba(0, 0, 0, 0.45); color: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.2); } html.skin-theme-clientpref-os .wv-js-carousel-dots button.active, html.skin-theme-clientpref-os .wv-js-carousel-dots button:hover { background: rgba(255, 255, 255, 0.35); color: #ffffff; border-color: rgba(255, 255, 255, 0.7); } } /* ======================================================== MOBILE CONSTRAINTS (Screen width <= 768px) ======================================================== */ @media screen and (max-width: 768px) { .wv-js-carousel-dots { left: 16px; bottom: 12px; z-index: 25; } .wv-js-carousel-prev, .wv-js-carousel-next { top: auto; bottom: 10px; transform: none; width: 34px; height: 34px; background-size: 16px 16px; z-index: 25; } .wv-js-carousel-prev { left: auto; right: 56px; } .wv-js-carousel-next { right: 16px; } .wv-js-carousel-prev:hover, .wv-js-carousel-next:hover { transform: scale(1.08); } } 
French
Deutsch