:root {
--isb-transition-duration: 0.7s;
--isb-transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
--isb-arrow-size: 44px;
--isb-dot-size: 8px;
--isb-progress-color: rgba(255,255,255,0.9);
} .isb-slideshow {
position: relative;
width: 100%;
aspect-ratio: var(--isb-aspect-ratio, 16/9);
border-radius: var(--isb-border-radius, 0);
overflow: hidden;
background: #000;
user-select: none;
-webkit-user-select: none;
} .isb-track {
position: absolute;
inset: 0;
}
.isb-slide {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
will-change: opacity, transform;
}
.isb-slide--active {
opacity: 1;
pointer-events: auto;
z-index: 1;
}
.isb-slide__image {
width: 100%;
height: 100%;
object-fit: var(--isb-object-fit, cover);
display: block;
draggable: false;
} .isb-transition-fade .isb-slide {
transition:
opacity var(--isb-transition-duration) var(--isb-transition-ease);
} .isb-transition-slide .isb-slide {
opacity: 1;
transform: translateX(100%);
transition:
transform var(--isb-transition-duration) var(--isb-transition-ease);
}
.isb-transition-slide .isb-slide--prev {
transform: translateX(-100%);
}
.isb-transition-slide .isb-slide--active {
transform: translateX(0);
} .isb-transition-zoom .isb-slide {
transform: scale(1.08);
transition:
opacity var(--isb-transition-duration) var(--isb-transition-ease),
transform var(--isb-transition-duration) var(--isb-transition-ease);
}
.isb-transition-zoom .isb-slide--active {
transform: scale(1);
} .isb-transition-flip {
perspective: 1200px;
}
.isb-transition-flip .isb-slide {
transform: rotateY(-90deg);
transform-origin: center center;
transition:
opacity 0.1s var(--isb-transition-ease),
transform var(--isb-transition-duration) var(--isb-transition-ease);
backface-visibility: hidden;
}
.isb-transition-flip .isb-slide--active {
transform: rotateY(0deg);
opacity: 1;
} .isb-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: var(--isb-arrow-size);
height: var(--isb-arrow-size);
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.88);
color: #111;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 12px rgba(0,0,0,0.25);
transition:
background 0.2s ease,
transform 0.2s ease,
box-shadow 0.2s ease;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.isb-arrow:hover {
background: #fff;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
transform: translateY(-50%) scale(1.08);
}
.isb-arrow:active {
transform: translateY(-50%) scale(0.96);
}
.isb-arrow--prev { left: 14px; }
.isb-arrow--next { right: 14px; } @media (hover: none) {
.isb-arrow {
background: rgba(255,255,255,0.6);
box-shadow: none;
}
} .isb-dots {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 7px;
z-index: 10;
padding: 6px 10px;
background: rgba(0,0,0,0.2);
border-radius: 20px;
backdrop-filter: blur(4px);
}
.isb-dot {
width: var(--isb-dot-size);
height: var(--isb-dot-size);
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.5);
cursor: pointer;
padding: 0;
transition:
background 0.25s ease,
transform 0.25s ease,
width 0.25s ease;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.isb-dot--active {
background: #fff;
transform: scale(1.35);
width: 20px;
border-radius: 4px;
}
.isb-dot:hover:not(.isb-dot--active) {
background: rgba(255,255,255,0.8);
} .isb-counter {
position: absolute;
bottom: 16px;
right: 16px;
z-index: 10;
display: flex;
align-items: center;
gap: 2px;
color: #fff;
font-size: 13px;
font-weight: 700;
font-variant-numeric: tabular-nums;
background: rgba(0,0,0,0.45);
padding: 4px 12px;
border-radius: 14px;
backdrop-filter: blur(6px);
letter-spacing: 0.03em;
}
.isb-counter__sep {
opacity: 0.5;
margin: 0 2px;
} .isb-progress {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: rgba(255,255,255,0.2);
z-index: 10;
overflow: hidden;
}
.isb-progress__bar {
height: 100%;
background: var(--isb-progress-color);
width: 0%;
animation: isb-progress-fill linear forwards;
transform-origin: left;
}
@keyframes isb-progress-fill {
from { width: 0%; }
to   { width: 100%; }
}
.isb-slideshow--paused .isb-progress__bar {
animation-play-state: paused;
} @media (prefers-reduced-motion: reduce) {
.isb-slide,
.isb-arrow,
.isb-dot,
.isb-progress__bar {
transition: none !important;
animation: none !important;
}
} .wp-block-image-slideshow-block-slideshow.alignwide {
max-width: var(--wp--style--global--wide-size, 1200px);
margin-left: auto;
margin-right: auto;
}
.wp-block-image-slideshow-block-slideshow.alignfull {
max-width: 100%;
}