.sf-flipbook-wrap {
margin: 1.5em auto;
width: 100%;
}
.sf-flipbook {
margin: 0 auto;
touch-action: pan-y;
}
.sf-flipbook .sf-page {
background: #fff;
overflow: hidden;
}
.sf-flipbook .sf-page img {
width: 100%;
height: 100%;
display: block;
-webkit-user-select: none;
user-select: none;
-webkit-user-drag: none;
}
.sf-flipbook-loading {
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
padding: 2em;
font-size: 14px;
color: #555;
text-align: center;
}
.sf-flipbook-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 1em;
margin-top: 0.75em;
}
.sf-flipbook-controls button {
cursor: pointer;
border: 1px solid var( --sf-btn-border, #ccc );
background: var( --sf-btn-bg, #f7f7f7 );
color: var( --sf-btn-text, #333 );
font-size: 22px;
line-height: 1;
width: 40px;
height: 40px;
border-radius: 50%;
transition: background 0.15s ease, border-color 0.15s ease;
}
.sf-flipbook-controls button:hover {
background: var( --sf-btn-bg-hover, #ececec );
border-color: var( --sf-btn-border, #999 );
}
.sf-flipbook-controls button:focus-visible {
outline: 2px solid #2271b1;
outline-offset: 2px;
}
.sf-page-counter {
font-size: 14px;
color: var( --sf-counter-text, #555 );
min-width: 60px;
text-align: center;
font-variant-numeric: tabular-nums;
}  .sf-cover-block {
display: inline-block;
margin: 1.5em auto;
text-align: center;
line-height: normal;
}
.sf-flipbook-cover-wrap {
position: relative;
cursor: pointer;
display: inline-block;
line-height: 0;
border-radius: 2px; perspective: 1600px;
transition: transform 0.25s ease;
} .sf-flipbook-cover-wrap:not(.sf-gallery-cover)::before {
content: "";
position: absolute;
background: #fff;
border-radius: 2px;
z-index: 1;
pointer-events: none; inset: 2px -6px 2px 0;
box-shadow:
2px 0 0 -1px #f5f5f5,
4px 0 0 -2px #efefef,
6px 0 0 -3px #e9e9e9;
} .sf-flipbook-cover-wrap:not(.sf-gallery-cover) .sf-cover-thumb {
position: relative;
transform-origin: left center;
transform: rotateY( 0deg );
transition: transform 0.45s cubic-bezier( 0.2, 0.7, 0.3, 1 ), box-shadow 0.3s ease;
box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.18 );
border-radius: 2px;
overflow: hidden;
transform-style: preserve-3d;
will-change: transform;
z-index: 2;
}
.sf-flipbook-cover-wrap:hover,
.sf-flipbook-cover-wrap:focus-visible {
outline: none;
} .sf-flipbook-cover-wrap:not(.sf-gallery-cover):hover .sf-cover-thumb,
.sf-flipbook-cover-wrap:not(.sf-gallery-cover):focus-visible .sf-cover-thumb {
transform: rotateY( -26deg );
box-shadow: 18px 14px 40px rgba( 0, 0, 0, 0.28 );
} .sf-gallery-cover .sf-cover-thumb {
box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.18 );
border-radius: 2px;
overflow: hidden;
transition: box-shadow 0.2s ease;
}
.sf-gallery-cover {
transition: transform 0.2s ease;
}
.sf-gallery-cover:hover,
.sf-gallery-cover:focus-visible {
transform: translateY( -3px );
}
.sf-gallery-cover:hover .sf-cover-thumb,
.sf-gallery-cover:focus-visible .sf-cover-thumb {
box-shadow: 0 10px 34px rgba( 0, 0, 0, 0.28 );
}
.sf-cover-thumb img {
width: 100%;
height: auto;
display: block;
}
.sf-cover-thumb .sf-flipbook-loading {
min-height: 320px;
min-width: 220px;
}
.sf-cover-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
background: rgba( 0, 0, 0, 0 );
opacity: 0;
transition: opacity 0.3s ease;
color: #fff;
text-align: center;
line-height: 1.3;
z-index: 4;
pointer-events: none;
} .sf-flipbook-cover-wrap:hover .sf-cover-overlay,
.sf-flipbook-cover-wrap:focus-visible .sf-cover-overlay {
opacity: 1;
background: rgba( 0, 0, 0, 0.04 );
}
.sf-cover-icon::before {
content: "\f211"; font-family: dashicons;
font-size: 38px;
} .sf-cover-title-below {
margin-top: 12px;
text-align: center;
font-size: 15px;
font-weight: 600;
line-height: 1.35;
color: inherit;
}
.sf-cover-title {
font-size: 15px;
font-weight: 600;
padding: 0 12px;
text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.5 );
} body.sf-overlay-open {
overflow: hidden;
}
.sf-overlay {
position: fixed;
inset: 0;
z-index: 99999;
background: rgba( 20, 20, 25, 0.92 );
background: color-mix( in srgb, var( --sf-overlay-bg, #14141a ) 92%, transparent );
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2vh 2vw;
box-sizing: border-box;
animation: sf-fade-in 0.2s ease;
}
@keyframes sf-fade-in {
from { opacity: 0; }
to   { opacity: 1; }
}
.sf-overlay-stage {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
width: auto;
min-width: 0;
min-height: 0;
}
.sf-overlay .sf-flipbook {
margin: 0;
}
.sf-overlay-close {
position: absolute;
top: 16px;
right: 20px;
width: 44px;
height: 44px;
border-radius: 50%;
border: 0;
background: rgba( 255, 255, 255, 0.15 );
color: #fff;
font-size: 30px;
line-height: 1;
cursor: pointer;
transition: background 0.15s ease;
}
.sf-overlay-close:hover {
background: rgba( 255, 255, 255, 0.3 );
}
.sf-overlay .sf-flipbook-controls {
margin-top: 14px;
}
.sf-overlay .sf-flipbook-controls button {
background: rgba( 255, 255, 255, 0.15 );
border-color: transparent;
color: #fff;
}
.sf-overlay .sf-flipbook-controls button:hover {
background: rgba( 255, 255, 255, 0.3 );
}
.sf-overlay .sf-page-counter {
color: #eee;
}
.sf-overlay-loading {
position: absolute;
color: #eee;
} .sf-zoom-group {
display: inline-flex;
gap: 6px;
margin-left: 8px;
padding-left: 12px;
border-left: 1px solid rgba( 128, 128, 128, 0.3 );
}
.sf-zoom-group button {
cursor: pointer;
border: 1px solid var( --sf-btn-border, #ccc );
background: var( --sf-btn-bg, #f7f7f7 );
color: var( --sf-btn-text, #333 );
font-size: 20px;
line-height: 1;
width: 40px;
height: 40px;
border-radius: 50%;
transition: background 0.15s ease, border-color 0.15s ease;
}
.sf-zoom-group button:hover:not(:disabled) {
background: var( --sf-btn-bg-hover, #ececec );
border-color: var( --sf-btn-border, #999 );
}
.sf-zoom-group button:disabled {
opacity: 0.4;
cursor: default;
}
.sf-flipbook.sf-zoomed {
cursor: grab;
touch-action: none;
}
.sf-flipbook.sf-zoomed:active {
cursor: grabbing;
} .sf-flipbook-stage,
.sf-overlay-stage {
overflow: hidden;
}
.sf-flipbook-stage {
width: 100%;
display: flex;
justify-content: center;
} .sf-overlay .sf-zoom-group button {
background: rgba( 255, 255, 255, 0.15 );
border-color: transparent;
color: #fff;
}
.sf-overlay .sf-zoom-group button:hover:not(:disabled) {
background: rgba( 255, 255, 255, 0.3 );
} .sf-gallery {
display: grid;
gap: 28px 22px;
margin: 1.5em 0;
}
.sf-gallery-cols-1 { grid-template-columns: repeat( 1, 1fr ); }
.sf-gallery-cols-2 { grid-template-columns: repeat( 2, 1fr ); }
.sf-gallery-cols-3 { grid-template-columns: repeat( 3, 1fr ); }
.sf-gallery-cols-4 { grid-template-columns: repeat( 4, 1fr ); }
.sf-gallery-cols-5 { grid-template-columns: repeat( 5, 1fr ); }
.sf-gallery-cols-6 { grid-template-columns: repeat( 6, 1fr ); }
@media ( max-width: 782px ) {
.sf-gallery-cols-4,
.sf-gallery-cols-5,
.sf-gallery-cols-6 { grid-template-columns: repeat( 3, 1fr ); }
}
@media ( max-width: 540px ) {
.sf-gallery-cols-2,
.sf-gallery-cols-3,
.sf-gallery-cols-4,
.sf-gallery-cols-5,
.sf-gallery-cols-6 { grid-template-columns: repeat( 2, 1fr ); }
}
.sf-gallery-item {
display: flex;
flex-direction: column;
align-items: center;
}
.sf-gallery .sf-gallery-cover {
margin: 0;
width: 100%;
display: block;
}
.sf-gallery .sf-cover-thumb {
min-height: 0;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
}
.sf-gallery .sf-cover-thumb .sf-flipbook-loading {
min-height: 220px;
width: 100%;
}
.sf-gallery-title {
margin-top: 10px;
font-size: var( --sf-gtitle-size, 14px );
font-weight: var( --sf-gtitle-weight, 600 );
color: var( --sf-gtitle-color, #333 );
text-align: center;
line-height: 1.3;
} .sf-fs-group {
display: inline-flex;
margin-left: 8px;
padding-left: 12px;
border-left: 1px solid rgba( 128, 128, 128, 0.3 );
}
.sf-fs-group button {
cursor: pointer;
border: 1px solid var( --sf-btn-border, #ccc );
background: var( --sf-btn-bg, #f7f7f7 );
color: var( --sf-btn-text, #333 );
font-size: 18px;
line-height: 1;
width: 40px;
height: 40px;
border-radius: 50%;
transition: background 0.15s ease, border-color 0.15s ease;
}
.sf-fs-group button:hover {
background: var( --sf-btn-bg-hover, #ececec );
border-color: var( --sf-btn-border, #999 );
} .sf-gallery-carousel-wrap {
position: relative;
display: flex;
align-items: center;
gap: 8px;
margin: 1.5em 0;
}
.sf-gallery-carousel {
display: flex;
gap: 22px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
flex: 1; scrollbar-width: none; -ms-overflow-style: none; }
.sf-gallery-carousel::-webkit-scrollbar {
display: none; } .sf-gallery-carousel .sf-gallery-item {
scroll-snap-align: start;
flex: 0 0 auto;
}
.sf-gallery-carousel.sf-gallery-cols-1 .sf-gallery-item { width: calc( 100% ); }
.sf-gallery-carousel.sf-gallery-cols-2 .sf-gallery-item { width: calc( ( 100% - 22px ) / 2 ); }
.sf-gallery-carousel.sf-gallery-cols-3 .sf-gallery-item { width: calc( ( 100% - 44px ) / 3 ); }
.sf-gallery-carousel.sf-gallery-cols-4 .sf-gallery-item { width: calc( ( 100% - 66px ) / 4 ); }
.sf-gallery-carousel.sf-gallery-cols-5 .sf-gallery-item { width: calc( ( 100% - 88px ) / 5 ); }
.sf-gallery-carousel.sf-gallery-cols-6 .sf-gallery-item { width: calc( ( 100% - 110px ) / 6 ); }
@media ( max-width: 782px ) {
.sf-gallery-carousel.sf-gallery-cols-4 .sf-gallery-item,
.sf-gallery-carousel.sf-gallery-cols-5 .sf-gallery-item,
.sf-gallery-carousel.sf-gallery-cols-6 .sf-gallery-item { width: calc( ( 100% - 44px ) / 3 ); }
}
@media ( max-width: 540px ) {
.sf-gallery-carousel .sf-gallery-item { width: calc( ( 100% - 22px ) / 2 ); }
}
.sf-carousel-prev,
.sf-carousel-next {
flex: 0 0 auto;
cursor: pointer;
border: 1px solid var( --sf-btn-border, #ccc );
background: var( --sf-btn-bg, #f7f7f7 );
color: var( --sf-btn-text, #333 );
font-size: 22px;
line-height: 1;
width: 40px;
height: 40px;
border-radius: 50%;
transition: background 0.15s ease, opacity 0.15s ease;
}
.sf-carousel-prev:hover:not(:disabled),
.sf-carousel-next:hover:not(:disabled) {
background: var( --sf-btn-bg-hover, #ececec );
border-color: var( --sf-btn-border, #999 );
}
.sf-carousel-prev:disabled,
.sf-carousel-next:disabled {
opacity: 0.35;
cursor: default;
}  .sf-cover-title-band {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 14px 12px 10px; background: linear-gradient( to top, rgba( 0, 0, 0, 0.72 ) 0%, rgba( 0, 0, 0, 0.45 ) 60%, rgba( 0, 0, 0, 0 ) 100% );
background: linear-gradient( to top,
color-mix( in srgb, var( --sf-band-bg, #000 ) 72%, transparent ) 0%,
color-mix( in srgb, var( --sf-band-bg, #000 ) 45%, transparent ) 60%,
transparent 100% );
color: var( --sf-band-text, #fff );
font-size: 14px;
font-weight: 600;
line-height: 1.3;
text-align: center;
text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.6 );
pointer-events: none;
} .sf-title-overlay .sf-cover-title-band {
opacity: 1;
} .sf-title-hover .sf-cover-title-band {
opacity: 0;
transition: opacity 0.2s ease;
}
@media ( hover: hover ) {
.sf-title-hover .sf-flipbook-cover-wrap:hover .sf-cover-title-band,
.sf-title-hover .sf-flipbook-cover-wrap:focus-visible .sf-cover-title-band {
opacity: 1;
}
} .sf-gallery-carousel-wrap.sf-no-scroll .sf-carousel-prev,
.sf-gallery-carousel-wrap.sf-no-scroll .sf-carousel-next {
display: none;
}  .sf-overlay-main {
display: flex;
align-items: stretch;
justify-content: center;
flex: 1;
width: 100%;
min-height: 0;
gap: 0;
} .sf-overlay-main .sf-overlay-stage {
flex: 1;
} .sf-thumbs {
width: 0;
overflow: hidden;
transition: width 0.25s ease;
flex: 0 0 auto;
display: flex;
flex-direction: column;
background: rgba( 0, 0, 0, 0.25 );
border-radius: 8px;
}
.sf-overlay.sf-thumbs-open .sf-thumbs {
width: 180px;
margin-right: 14px;
}
.sf-thumbs-title {
color: #eee;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 12px 12px 8px;
flex: 0 0 auto;
opacity: 0.7;
}
.sf-thumbs-list {
overflow-y: auto;
padding: 0 12px 12px;
display: flex;
flex-direction: column;
gap: 10px;
scrollbar-width: thin;
}
.sf-thumb {
position: relative;
border: 2px solid transparent;
border-radius: 4px;
padding: 0;
background: none;
cursor: pointer;
line-height: 0;
transition: border-color 0.15s ease, transform 0.15s ease;
}
.sf-thumb img {
width: 100%;
height: auto;
display: block;
border-radius: 2px;
box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.4 );
}
.sf-thumb:hover {
transform: translateY( -2px );
border-color: rgba( 255, 255, 255, 0.5 );
}
.sf-thumb-active {
border-color: #fff;
}
.sf-thumb-num {
position: absolute;
bottom: 4px;
right: 4px;
background: rgba( 0, 0, 0, 0.7 );
color: #fff;
font-size: 11px;
line-height: 1;
padding: 2px 5px;
border-radius: 3px;
} .sf-thumbs-toggle.sf-active {
background: rgba( 255, 255, 255, 0.35 );
} .sf-nav-group,
.sf-thumbs-group {
display: inline-flex;
align-items: center;
gap: 6px;
}
.sf-nav-group {
padding: 0 12px;
border-left: 1px solid rgba( 128, 128, 128, 0.3 );
border-right: 1px solid rgba( 128, 128, 128, 0.3 );
margin: 0 8px;
} .sf-overlay .sf-first,
.sf-overlay .sf-last,
.sf-overlay .sf-thumbs-toggle {
cursor: pointer;
border: 1px solid transparent;
background: rgba( 255, 255, 255, 0.15 );
color: #fff;
font-size: 18px;
line-height: 1;
width: 40px;
height: 40px;
border-radius: 50%;
transition: background 0.15s ease;
}
.sf-overlay .sf-first:hover,
.sf-overlay .sf-last:hover,
.sf-overlay .sf-thumbs-toggle:hover {
background: rgba( 255, 255, 255, 0.3 );
} @media ( max-width: 640px ) {
.sf-overlay.sf-thumbs-open .sf-thumbs {
position: absolute;
top: 60px;
left: 10px;
bottom: 80px;
width: 120px;
z-index: 5;
margin-right: 0;
}
} .sf-share-group {
display: inline-flex;
align-items: center;
}
.sf-overlay .sf-share-toggle {
cursor: pointer;
border: 1px solid transparent;
background: rgba( 255, 255, 255, 0.15 );
color: #fff;
font-size: 18px;
line-height: 1;
width: 40px;
height: 40px;
border-radius: 50%;
transition: background 0.15s ease;
}
.sf-overlay .sf-share-toggle:hover,
.sf-overlay .sf-share-toggle.sf-active {
background: rgba( 255, 255, 255, 0.32 );
}
.sf-share-panel {
position: absolute;
bottom: 80px;
left: 50%;
transform: translateX( -50% );
width: min( 92vw, 440px );
background: #fff;
border-radius: 12px;
box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.4 );
padding: 18px;
z-index: 10;
animation: sf-fade-in 0.15s ease;
}
.sf-share-title {
font-size: 16px;
font-weight: 600;
color: #222;
text-align: center;
margin-bottom: 14px;
}
.sf-share-row {
display: flex;
gap: 8px;
margin-bottom: 14px;
}
.sf-share-url {
flex: 1;
border: 1px solid #ccc;
border-radius: 6px;
padding: 8px 10px;
font-size: 13px;
color: #333;
min-width: 0;
}
.sf-share-copy {
flex: 0 0 auto;
cursor: pointer;
border: 0;
border-radius: 6px;
background: #2271b1;
color: #fff;
padding: 8px 14px;
font-size: 13px;
white-space: nowrap;
transition: background 0.15s ease;
}
.sf-share-copy:hover {
background: #135e96;
}
.sf-share-nets {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.sf-share-net {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 10px;
color: #fff;
text-decoration: none;
transition: opacity 0.15s ease, transform 0.15s ease;
}
.sf-share-net:hover {
opacity: 0.88;
transform: translateY( -2px );
}
.sf-share-net svg {
display: block;
}
.sf-share-fb   { background: #1877f2; }
.sf-share-x    { background: #000000; }
.sf-share-in   { background: #0a66c2; }
.sf-share-wa   { background: #25d366; }
.sf-share-mail { background: #555555; }
@media ( max-width: 640px ) {
.sf-share-panel { bottom: 90px; }
} .sf-overlay .sf-download {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: 1px solid transparent;
background: rgba( 255, 255, 255, 0.15 );
color: #fff;
font-size: 20px;
line-height: 1;
width: 40px;
height: 40px;
border-radius: 50%;
margin-left: 6px;
text-decoration: none;
transition: background 0.15s ease;
}
.sf-overlay .sf-download:hover {
background: rgba( 255, 255, 255, 0.32 );
} .sf-sound-group {
display: inline-flex;
align-items: center;
margin-left: 8px;
padding-left: 12px;
border-left: 1px solid rgba( 128, 128, 128, 0.3 );
} .sf-sound-group .sf-sound {
cursor: pointer;
border: 1px solid var( --sf-btn-border, #ccc );
background: var( --sf-btn-bg, #f7f7f7 );
color: var( --sf-btn-text, #333 );
font-size: 16px;
line-height: 1;
width: 40px;
height: 40px;
border-radius: 50%;
transition: background 0.15s ease;
}
.sf-sound-group .sf-sound:hover {
background: var( --sf-btn-bg-hover, #ececec );
} .sf-sound-group.sf-sound-dark .sf-sound {
border-color: transparent;
background: rgba( 255, 255, 255, 0.15 );
color: #fff;
}
.sf-sound-group.sf-sound-dark .sf-sound:hover,
.sf-sound-group.sf-sound-dark .sf-sound.sf-active {
background: rgba( 255, 255, 255, 0.3 );
} .sf-sound:not(.sf-active) {
opacity: 0.6;
} .sf-flipbook-controls button,
.sf-share-toggle,
.sf-sound,
.sf-thumbs-toggle,
.sf-first,
.sf-last,
.sf-download {
display: inline-flex;
align-items: center;
justify-content: center;
}
.sf-flipbook-controls button svg,
.sf-share-net svg {
display: block;
}