/* -------------------------------------------------------------------------- Auto Image Cycle (Slideshow) -------------------------------------------------------------------------- */ [data-image-cycle-item="active"] { transition: opacity 0.4s ease 0s, visibility 0s ease 0s; opacity: 1; visibility: visible; z-index: 3; } [data-image-cycle-item="previous"] { transition: opacity 0.4s ease 0.4s, visibility 0s ease 0.4s; opacity: 0; visibility: visible; z-index: 2; } [data-image-cycle-item="not-active"] { opacity: 0; visibility: hidden; z-index: 1; } /* -------------------------------------------------------------------------- Centered Looping Slider -------------------------------------------------------------------------- */ /* Orange highlight ring on bullet point nav for hover + focus states */ .centered-slider-bullet::after{ content: ''; position: absolute; inset: 2px; border-radius: 100em; z-index: -1; border: 1px solid #FF4C24; transition: all 0.5s cubic-bezier(0.65, 0.05, 0, 1); } .centered-slider-bullet:hover::after, .centered-slider-bullet.active::after, .centered-slider-bullet:focus::after{ inset: -5px; } /* Fade non-active slides */ .centered-slider-row:has( .centered-slider-slide.active) .centered-slider-slide:not(.active){ opacity: 0.45; } /* Little (orange) corners on each slide */ /* https://css-tip.com/corner-only-border-image/ */ .centered-slider-slide::after { --size: 1em; /* corner size */ --width: 1px; /* border width */ --gap: 0.5em; /* gap */ --color: #FF4C24; content: ''; position: absolute; inset: calc(var(--gap) * -1); z-index: 1; opacity: 0; padding: calc(var(--gap) + var(--width)); outline: var(--width) solid var(--color); outline-offset: calc(var(--gap)/-1); mask: conic-gradient(at var(--size) var(--size),#0000 75%,#000 0) 0 0/calc(100% - var(--size)) calc(100% - var(--size)), linear-gradient(#000 0 0) content-box; transition: all 0.4s cubic-bezier(0.65, 0.05, 0, 1); } .centered-slider-slide.active::after { outline-offset: calc(-1*var(--width)); opacity: 1; } /* -------------------------------------------------------------------------- 3D Image Carousel -------------------------------------------------------------------------- */ [data-3d-carousel-wrap] { position: relative; width: 100%; height: 100%; perspective: 1200px; transform-style: preserve-3d; pointer-events: none; user-select: none; } [data-3d-carousel-wrap] * { pointer-events: none; } [data-3d-carousel-panel] { position: absolute; top: 50%; left: 50%; width: 32vw; max-width: 520px; aspect-ratio: 3 / 4; margin-left: -16vw; margin-top: -21vw; backface-visibility: hidden; will-change: transform; } [data-3d-carousel-content] { width: 100%; height: 100%; overflow: hidden; border-radius: 0.5rem; } [data-3d-carousel-content] img, [data-3d-carousel-content] video { width: 100%; height: 100%; object-fit: cover; display: block; }