.sitebyter-ds-container {
position: relative;
max-width: 100%;
margin: 0 auto;
overflow: visible;
}
.sitebyter-ds-item {
position: absolute;
top: 50%;
left: 50%;
width: var(--sitebyter-ds-item-width, 320px);
max-width: 90%;
opacity: 0;
transform: translate(calc(-50% + var(--offset-x, 0px)), calc(-220% + var(--offset-y, 0px)))
rotate(0deg)
scale(0.92);
transition:
transform var(--duration, 1200ms) cubic-bezier(0.17, 0.67, 0.2, 1.01) var(--delay, 0ms),
opacity calc(var(--duration, 1200ms) * 0.45) ease-out var(--delay, 0ms);
will-change: transform, opacity;
}
.sitebyter-ds-container.is-visible .sitebyter-ds-item {
opacity: 1;
transform: translate(calc(-50% + var(--offset-x, 0px)), calc(-50% + var(--offset-y, 0px)))
rotate(var(--angle, 0deg))
scale(1);
}
/* Fade effect: no falling motion, image is already at its landing spot/angle
and just fades + settles in with a slight scale. Higher specificity than
.sitebyter-ds-item alone, so this overrides the drop transform above. */
.sitebyter-ds-container.sitebyter-ds-effect-fade .sitebyter-ds-item {
transform: translate(calc(-50% + var(--offset-x, 0px)), calc(-50% + var(--offset-y, 0px)))
rotate(var(--angle, 0deg))
scale(0.94);
transition:
opacity var(--duration, 1200ms) ease-out var(--delay, 0ms),
transform var(--duration, 1200ms) ease-out var(--delay, 0ms);
}
.sitebyter-ds-container.sitebyter-ds-effect-fade.is-visible .sitebyter-ds-item {
transform: translate(calc(-50% + var(--offset-x, 0px)), calc(-50% + var(--offset-y, 0px)))
rotate(var(--angle, 0deg))
scale(1);
}
.sitebyter-ds-item img {
display: block;
width: 100%;
height: auto;
border-radius: 6px;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28), 0 3px 6px rgba(0, 0, 0, 0.15);
}
.sitebyter-ds-photo {
display: block;
}
/* Polaroid frame: white card around the photo with extra room at the
bottom, like a real Polaroid print. The frame carries the shadow
instead of the image, and sits inside the item's box (border-box)
so it doesn't grow past item_width. */
.sitebyter-ds-container.sitebyter-ds-frame-polaroid .sitebyter-ds-photo {
position: relative;
box-sizing: border-box;
width: 100%;
background: #fff;
padding: 2.5% 2.5% 8% 2.5%;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28), 0 3px 6px rgba(0, 0, 0, 0.15);
border-radius: 2px;
}
.sitebyter-ds-container.sitebyter-ds-frame-polaroid .sitebyter-ds-item img {
border-radius: 0;
box-shadow: none;
}
/* Aged/vintage tone: sepia + reduced saturation + a vignette darkening the
image edges. The vignette is an inset box-shadow on the ![]()
itself
(not a wrapper/pseudo-element), so it respects border-radius and doesn't
bleed onto the Polaroid frame's white border when both are combined. */
.sitebyter-ds-container.sitebyter-ds-tone-aged .sitebyter-ds-item img {
filter: sepia(0.45) saturate(0.7) contrast(1.1) brightness(0.95);
box-shadow:
0 14px 28px rgba(0, 0, 0, 0.28),
0 3px 6px rgba(0, 0, 0, 0.15),
inset 0 0 50px 14px rgba(50, 35, 15, 0.35);
}
.sitebyter-ds-container.sitebyter-ds-frame-polaroid.sitebyter-ds-tone-aged .sitebyter-ds-item img {
box-shadow: inset 0 0 50px 14px rgba(50, 35, 15, 0.35);
}
/* Black & white tone: a plain color choice, not a "this is an old/aged
object" signal — so unlike Tone=Aged, this does NOT tint the Polaroid
border; it stays white. */
.sitebyter-ds-container.sitebyter-ds-tone-bw .sitebyter-ds-item img {
filter: grayscale(1) contrast(1.05);
}
/* Coffee stains: independent of Tone — combine them or use either alone.
The actual gradient recipe is generated per item in PHP (randomized
count, size, position, and transparency — see coffee_stain_background()
in class-sitebyter-ds-shortcode.php) and passed down as the
--sitebyter-ds-stain-bg custom property on each .sitebyter-ds-item, so
every image in a stack gets its own stain pattern instead of one fixed
recipe repeated everywhere. The fallback below only matters if that
custom property is somehow missing. overflow:hidden here is what clips
rings/drips that are deliberately positioned past the edge. This is on
.sitebyter-ds-photo, not just the ![]()
, so it also covers the Polaroid
frame's white border when that's the active frame. */
.sitebyter-ds-container.sitebyter-ds-stains-coffee .sitebyter-ds-photo {
position: relative;
overflow: hidden;
}
.sitebyter-ds-container.sitebyter-ds-stains-coffee .sitebyter-ds-photo::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
mix-blend-mode: multiply;
background: var(--sitebyter-ds-stain-bg, radial-gradient(circle at 50% 50%, transparent 15%, rgba(90, 58, 30, 0.25) 18%, transparent 22%));
}
/* Polaroid's white border gets a warm cream tint instead of staying stark
white whenever Tone=Aged and/or Stains=Coffee is active — a bright white
edge around an otherwise sepia/stained photo looks inconsistent. */
.sitebyter-ds-container.sitebyter-ds-frame-polaroid.sitebyter-ds-tone-aged .sitebyter-ds-photo,
.sitebyter-ds-container.sitebyter-ds-frame-polaroid.sitebyter-ds-stains-coffee .sitebyter-ds-photo {
background: #f1e4c8;
}
/* Caption: sits in the Polaroid's blank bottom strip, in a handwriting-style
font (loaded only on pages that actually use a caption — see
wp_enqueue_style('sitebyter-ds-caption-font', ...) in render()). Only
rendered by PHP when Frame=Polaroid, but scoped here the same way as
defensive practice. Font-size is tied to the configured item width
(not viewport units), so it scales correctly whether the stack is
small or large. */
.sitebyter-ds-container.sitebyter-ds-frame-polaroid .sitebyter-ds-caption {
position: absolute;
left: 4%;
right: 4%;
bottom: 0.5%;
height: 7%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
pointer-events: none;
font-family: 'Caveat', cursive;
font-weight: 600;
font-size: calc(var(--sitebyter-ds-item-width, 320px) * 0.045);
line-height: 1.1;
color: #3a2c1a;
}
@media (prefers-reduced-motion: reduce) {
.sitebyter-ds-item {
transition: opacity 300ms ease-out var(--delay, 0ms);
transform: translate(calc(-50% + var(--offset-x, 0px)), calc(-50% + var(--offset-y, 0px)))
rotate(var(--angle, 0deg));
}
}