.anm-slider { --anm-font-family: inherit; --anm-heading-color: #fff; --anm-text-color: #fff; --anm-button-bg: #fff; --anm-button-text: #111; --anm-overlay-color: #000; --anm-slider-max-width: 100%; --anm-slide-height: clamp(360px, 72vh, 920px); --anm-slide-height-tablet: clamp(320px, 62vh, 760px); --anm-slide-height-mobile: clamp(260px, 58vh, 560px); --anm-dots-bottom: 24px; --anm-scroll-arrow-bottom: 56px; --anm-border-radius-top: 0px; --anm-border-radius-bottom: 0px; --anm-image-fit: cover; --anm-content-padding: 12px; --anm-content-padding-mobile: 10px; position: relative; width: 100%; max-width: var(--anm-slider-max-width); margin-left: auto; margin-right: auto; overflow: hidden; border-radius: var(--anm-border-radius-top) var(--anm-border-radius-top) var(--anm-border-radius-bottom) var(--anm-border-radius-bottom); } .anm-slider.anm-theme-adapt { --anm-font-family: inherit; --anm-heading-color: var(--wp--preset--color--light, #fff); --anm-text-color: var(--wp--preset--color--light, #fff); --anm-button-bg: var(--wp--preset--color--primary, #fff); --anm-button-text: var(--wp--preset--color--light, #111); --anm-overlay-color: #000; } .anm-slider-track { display: flex; transition: transform 0.45s ease; will-change: transform; } .anm-slide { position: relative; min-width: 100%; min-height: var(--anm-slide-height); display: flex; align-items: center; justify-content: center; } .anm-slider.anm-size-compact { --anm-slide-height: clamp(280px, 50vh, 520px); --anm-slide-height-tablet: clamp(260px, 46vh, 480px); --anm-slide-height-mobile: clamp(220px, 45vh, 420px); } .anm-slider.anm-size-medium { --anm-slide-height: clamp(320px, 60vh, 720px); --anm-slide-height-tablet: clamp(300px, 54vh, 620px); --anm-slide-height-mobile: clamp(240px, 52vh, 500px); } .anm-slider.anm-size-large { --anm-slide-height: clamp(360px, 72vh, 920px); --anm-slide-height-tablet: clamp(320px, 62vh, 760px); --anm-slide-height-mobile: clamp(260px, 58vh, 560px); } .anm-slider.anm-size-fullscreen { --anm-slide-height: 100vh; --anm-slide-height-tablet: 90vh; --anm-slide-height-mobile: 85vh; } .anm-slide-image { position: absolute; inset: 0; overflow: hidden; z-index: 0; } .anm-slide-img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; min-width: 100%; min-height: 100%; max-width: none !important; object-fit: var(--anm-image-fit, cover) !important; object-position: center; display: block; } .anm-slide-overlay { position: absolute; inset: 0; background: var(--anm-overlay-color); opacity: 0.45; z-index: 1; } .anm-slide-content { position: relative; z-index: 2; max-width: min(760px, calc(100% - 24px)); width: min(92%, 760px); text-align: center; font-family: var(--anm-font-family); box-sizing: border-box; padding: var(--anm-content-padding, 12px); max-height: calc(var(--anm-slide-height) - 32px); overflow-y: auto; overflow-wrap: anywhere; word-break: break-word; } .anm-slide-content.anm-content-left { margin-left: min(var(--anm-content-margin, 60px), 8vw); margin-right: auto; } .anm-slide-content.anm-content-center { margin-left: auto; margin-right: auto; } .anm-slide-content.anm-content-right { margin-right: min(var(--anm-content-margin, 60px), 8vw); margin-left: auto; } .anm-slide-content.anm-text-left { text-align: left; } .anm-slide-content.anm-text-center { text-align: center; } .anm-slide-content.anm-text-right { text-align: right; } .anm-slide-content.anm-text-justify { text-align: justify; } .anm-slide-content h3 { margin: 0 0 10px; color: var(--anm-heading-color); font-size: clamp(1.5rem, 2.8vw, 2.3rem); } .anm-slide-content p { margin: 0 0 16px; color: var(--anm-text-color); font-size: 1rem; line-height: 1.55; } .anm-slider .anm-slide-button { display: inline-block; background: var(--anm-button-bg); color: var(--anm-button-text) !important; text-decoration: none; font-weight: 600; padding: 10px 18px; border-radius: 6px; } .anm-slider .anm-slide-button:link, .anm-slider .anm-slide-button:visited, .anm-slider .anm-slide-button:hover, .anm-slider .anm-slide-button:focus, .anm-slider .anm-slide-button:active { color: var(--anm-button-text) !important; background: var(--anm-button-bg); } .anm-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, 0.8); color: #111; font-size: 22px; line-height: 1; z-index: 3; } .anm-prev { left: 10px; } .anm-next { right: 10px; } .anm-dots { position: absolute; z-index: 3; left: 50%; bottom: var(--anm-dots-bottom); transform: translateX(-50%); display: flex; gap: 8px; } .anm-scroll-down { position: absolute; left: 50%; bottom: var(--anm-scroll-arrow-bottom); transform: translateX(-50%); z-index: 4; width: 34px; height: 34px; border: 0; border-radius: 0; cursor: pointer; background: transparent; color: inherit; font-size: 0; line-height: 1; display: flex; align-items: center; justify-content: center; animation: anmArrowBounce 1.3s ease-in-out infinite; } .anm-chevron-down { width: 14px; height: 14px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); display: block; } @keyframes anmArrowBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(7px); } } .anm-slider.anm-hide-dots .anm-dots { display: none; } .anm-slider.anm-hide-arrows .anm-nav { display: none; } .anm-slider.anm-hide-scroll-arrow .anm-scroll-down { display: none; } .anm-dot { width: 10px; height: 10px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255, 255, 255, 0.5); } .anm-dot.is-active { background: #fff; } @media (min-width: 768px) and (max-width: 1024px) { .anm-slide { height: var(--anm-slide-height-tablet); } .anm-slide-image { overflow: hidden; z-index: 0; } .anm-slide-img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; min-width: 100%; min-height: 100%; max-width: none !important; object-fit: cover !important; } .anm-slide-content { max-height: calc(var(--anm-slide-height-tablet) - 28px); } } @media (max-width: 767px) { .anm-slide { height: var(--anm-slide-height-mobile); } .anm-slide-image { overflow: hidden; z-index: 0; } .anm-slide-img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; min-width: 100%; min-height: 100%; max-width: none !important; object-fit: cover !important; } .anm-slide-content { width: calc(100% - 20px); max-width: calc(100% - 20px); max-height: calc(var(--anm-slide-height-mobile) - 24px); padding: var(--anm-content-padding-mobile, var(--anm-content-padding, 10px)); } .anm-slide-content.anm-content-left { margin-left: min(var(--anm-content-margin, 60px), 5vw); } .anm-slide-content.anm-content-right { margin-right: min(var(--anm-content-margin, 60px), 5vw); } .anm-nav { width: 34px; height: 34px; } .anm-scroll-down { width: 30px; height: 30px; } .anm-chevron-down { width: 12px; height: 12px; } } @media (prefers-reduced-motion: reduce) { .anm-scroll-down { animation: none; } }