/* * Instant Photos layout. * * Each item is rendered inside a white photo frame with the caption set * below the image. Per-item randomisation (rotation, counter-rotated * shadow and counter-rotated world-up lift) is delivered through inline * CSS custom properties set on each .fg-item by * Layout_Instant_Photos::decorate_item(). * * Custom properties consumed (set per-item via style="..."): * --fg-rotation Base tilt, e.g. "-7.25deg" * --fg-rotation-sign -1 | 0 | 1, used to amplify hover boost * --fg-shadow-x/y World-down shadow offsets at rest * --fg-shadow-blur Resting blur * --fg-shadow-hover-x/y Counter-rotated offsets at hover distance * --fg-shadow-hover-blur Hover blur * --fg-lift-x/y Counter-rotated world-up translate at rest * --fg-lift-hover-x/y Counter-rotated world-up translate on hover * * Wrapper style variables consumed: * --fg-frame-thickness Width of the white photo border, responsive * --fg-hover-boost Hover rotation boost in degrees (unit-less, fixed) * --fg-gap Item spacing, from the spacing adapter * --fg-cols / --fg-col-min Columns, from the columns adapter * * Wrapper data attributes consumed: * data-fg-hover-action "straighten" | "tilt" * * Theme overrides: * --fg-sticker-color Sticker tint colour. Default warm tape beige. * Override in your theme CSS to recolour the * sticker without forking the layout. */ [data-fg-layout="instant-photos"] .fg-item { gap: var(--fg-frame-thickness, 16px); } [data-fg-layout="instant-photos"] .fg-instant-photos-track { display: grid; gap: var(--fg-gap); align-items: start; } [data-fg-layout="instant-photos"][data-fg-columns-mode="fixed"] .fg-instant-photos-track { grid-template-columns: repeat(var(--fg-cols), minmax(0, 1fr)); } [data-fg-layout="instant-photos"][data-fg-columns-mode="auto"] .fg-instant-photos-track { grid-template-columns: repeat( auto-fit, minmax(min(var(--fg-col-min), 100%), 1fr) ); } /* Per-item card. Background and padding draw the white photo frame; the caption sits inside the same card so the frame wraps both. */ [data-fg-layout="instant-photos"] .fg-item.fg-instant-photo { position: relative; min-width: 0; background: #fff; padding: var(--fg-frame-thickness, 16px); box-sizing: border-box; border-radius: 4px; transform-origin: center center; transform: rotate(var(--fg-rotation, 0deg)); transition: transform 250ms ease, box-shadow 250ms ease; will-change: transform; } /* Every tile gets a soft top-lit rest shadow. Offsets are pre-counter-rotated in PHP so the light source stays world-up regardless of tile rotation. Two shadows are stacked for more realistic depth: - Contact layer (first): half the offset and blur of the base value, darker alpha. Reads as the card touching the surface beneath. - Ambient layer (second): the full base offset and blur, softer alpha. Reads as diffuse light wrapping around the card. Both layers share the same pre-counter-rotated direction so the world-up light source is preserved. The shadow is independent of the Elevation toggle; only the lift-translate and the hover shadow growth are gated on --elevated. */ [data-fg-layout="instant-photos"] .fg-item.fg-instant-photo { box-shadow: calc(var(--fg-shadow-x, 0px) * 0.5) calc(var(--fg-shadow-y, 1px) * 0.5) calc(var(--fg-shadow-blur, 4px) * 0.5) rgba(0, 0, 0, 0.22), var(--fg-shadow-x, 0px) var(--fg-shadow-y, 1px) var(--fg-shadow-blur, 4px) rgba(0, 0, 0, 0.12); } /* When elevated, the rest transform adds a counter-rotated world-up lift so the tile sits a few pixels above its grid cell regardless of its individual tilt angle. Order matters: translate first then rotate means the CSS matrix applies rotate first then translate, so the translate vector is in the post-rotation (world) space - exactly what the PHP pre-counter-rotation accounts for. The shadow uses the --fg-elev-shadow-* vars (which include the lift distance baked in) so the shadow stays anchored beneath the original tile position - producing a visible world-space gap between the lifted tile and its shadow, which sells the elevation. */ [data-fg-layout="instant-photos"] .fg-item.fg-instant-photo--elevated { transform: translate(var(--fg-lift-x, 0px), var(--fg-lift-y, 0px)) rotate(var(--fg-rotation, 0deg)); box-shadow: calc(var(--fg-elev-shadow-x, 0px) * 0.4) calc(var(--fg-elev-shadow-y, 8px) * 0.4) calc(var(--fg-shadow-blur, 4px) * 0.6) rgba(0, 0, 0, 0.1), var(--fg-elev-shadow-x, 0px) var(--fg-elev-shadow-y, 8px) calc(var(--fg-shadow-blur, 4px) * 4) rgba(0, 0, 0, 0.14); } /* The media box takes the chosen --fg-item-aspect-ratio. Item Fit is always Cover here, so object-fit is hardcoded and --fg-item-fit is not consumed. */ [data-fg-layout="instant-photos"] .fg-item.fg-instant-photo .fg-item-media { aspect-ratio: var(--fg-item-aspect-ratio, 4 / 3); background: #f4f4f4; /* subtle grey behind images that are still loading */ } [data-fg-layout="instant-photos"] .fg-item.fg-instant-photo .fg-item-media picture, [data-fg-layout="instant-photos"] .fg-item.fg-instant-photo .fg-item-media img { width: 100%; height: 100%; object-fit: cover; } /* Caption styling - always below, centered. The font family is filtered to a handwritten subset by Layout_Instant_Photos via the typography font_families filter; no family is hard-coded here so user choice from that filtered list still wins. */ [data-fg-layout="instant-photos"] .fg-item.fg-instant-photo .fg-caption { display: block; text-align: center; color: #333; line-height: 1.3; } [data-fg-layout="instant-photos"] .fg-item.fg-instant-photo .fg-caption-title { display: block; font-weight: 500; } [data-fg-layout="instant-photos"] .fg-item.fg-instant-photo .fg-caption-description { display: block; font-size: 0.85em; color: #777; margin-top: 0.25em; } /* Hover behaviour */ /* "Straighten" - rotate toward 0deg. Elevation amplifies the lift on hover; non-elevated tiles only rotate. */ [data-fg-layout="instant-photos"][data-fg-hover-action="straighten"] .fg-item.fg-instant-photo:hover { transform: rotate(0deg); } [data-fg-layout="instant-photos"][data-fg-hover-action="straighten"] .fg-item.fg-instant-photo--elevated:hover { transform: translate(var(--fg-lift-hover-x, 0px), var(--fg-lift-hover-y, 0px)) rotate(0deg) scale(1.02); } /* "Tilt" - rotate further in the same direction as the base rotation. --fg-hover-boost is unit-less; --fg-rotation-sign (-1 / 0 / 1) gives the direction so a single calc() handles all three cases. */ [data-fg-layout="instant-photos"][data-fg-hover-action="tilt"] .fg-item.fg-instant-photo:hover { transform: rotate( calc( var(--fg-rotation, 0deg) + (var(--fg-rotation-sign, 0) * var(--fg-hover-boost, 0) * 1deg) ) ); } [data-fg-layout="instant-photos"][data-fg-hover-action="tilt"] .fg-item.fg-instant-photo--elevated:hover { transform: translate(var(--fg-lift-hover-x, 0px), var(--fg-lift-hover-y, 0px)) rotate( calc( var(--fg-rotation, 0deg) + (var(--fg-rotation-sign, 0) * var(--fg-hover-boost, 0) * 1deg) ) ) scale(1.02); } /* Elevated tiles get a deeper, taller two-layer shadow on hover. The contact layer barely grows because the card is now floating well above the surface (and the contact point is far below it); the ambient layer expands and softens dramatically to sell the height. Both layers use --fg-elev-shadow-hover-* which bakes in the hover lift distance so the shadow stays anchored as the tile rises. */ [data-fg-layout="instant-photos"] .fg-item.fg-instant-photo--elevated:hover { box-shadow: calc(var(--fg-elev-shadow-hover-x, 0px) * 0.25) calc(var(--fg-elev-shadow-hover-y, 16px) * 0.4) calc(var(--fg-shadow-blur, 4px) * 2) calc(var(--fg-shadow-blur, 4px) * -2) rgba(0, 0, 0, 0.3), var(--fg-elev-shadow-hover-x, 0px) var(--fg-elev-shadow-hover-y, 16px) calc(var(--fg-shadow-hover-blur, 14px) * 1.5) rgba(0, 0, 0, 0.16); } /* Sticker */ [data-fg-layout="instant-photos"] .fg-item.fg-instant-photo--stickered::before { content: ""; position: absolute; z-index: 1; top: 0; left: 50%; width: 120px; height: 24px; transform: translate(-50%, -50%); background-color: var(--fg-sticker-color, rgba(225, 210, 175, 0.85)); transition: opacity 250ms ease; -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAA7CAYAAAHdk54IAAAACXBIWXMAAAsSAAALEgHS3X78AAADSUlEQVR4nO2cQVbbMBBAf9zuG07QcAJl2xVm5WXLDcINuAHqCaAnKNwAdnhV5wSNT9BwAsIJ0oUlxyl5tSG2Jkj67+XhFyxrJiON5NFIo/V6TZlrzYYCQGW6oIWRKbxuu3EXyVsKiRe+36fwVzmdR4uHywJj28bfVjuPFg+Xbu0bC/6HvbrcW9mr5cVK/4fK9Mh5pWWu12H8vFB5sCnwbcf/in+/6DLsda00BX718bAu2IaUuqrQImNTATf4KOEcJolrZw+VTe8lKp1JVHrhssIy1+MEuHRZKfAk0U+PJLrMSmI8TSU0LawbTHE40rimOUVKJQVxgchoKoFtumPgSVqYAakCBirTK+BRWJghubEWnQE/paUZiqYz8lZJ4Ag2zuhUUBAnWEVnkkIMzBMIhY8k+HD2hRS/LQpQBmFRkSiZBCJvEhKoTBcfzcVIWpgm5m2qjTEw7Xhf7XULYAUsOhRcmk/rfSrTXe5zQgjOaK6yQPooBPQ+GhX1jaioR5zARtFzQUGcYGNGN8JyDE4CUOZ6IizHkPyATdP9IyjI0NwBJJ5bE8ykPqGazHuLynRlURO89pW5vfB9HD2xF74rWuO9ojZa4b2iwDVUeVW+LxkCHCfsyE7zkEkCKGkphkZlukiAZ2lBBuYZqgnDWFqSgbmAMLzuDMJQdCvC4D0hKDqHMBTVAAe3mtZxJQ26p/WtwCwyNSrwNvGxhZJ+AxBFj8/q8ryVyvQCTMuN9D4LPmm/5VW0pazPMT05BJ8bFE2DplJCRPoj9lDPiAb1jKZBu+SLRQ6TkzLXU2gY1KyrOd9fGemN3/DS5c7cyxHpiVtoBBYsZa6XwGcBgSJv51FlVQrKVg8tc31HNOZ7ZGYv6khRmesV8ElCmsje1KuDNv8vJRrzvfLdJorBdnA+9tD3x1xl26s2zTH02q0skR54kYjRNOiNOzkiPaHMEQs1TYN22ZIYOTy2jpKIBvWAMtf1uWJx+cwPrspcV1nIZp/zBXAlLFRkf05DSSsPheOEOHb6wrnK9DIxJ/N6v/fXc27ttuZg9jh7Tp2cEFNQ/KCe0EaDekJIu0RDYQnRoL5wZg9xa26FeM2pqxPz6YspO1YO9qDvrQiHTr0v5y9kb/1k7GZpAQAAAABJRU5ErkJggg=="); mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAA7CAYAAAHdk54IAAAACXBIWXMAAAsSAAALEgHS3X78AAADSUlEQVR4nO2cQVbbMBBAf9zuG07QcAJl2xVm5WXLDcINuAHqCaAnKNwAdnhV5wSNT9BwAsIJ0oUlxyl5tSG2Jkj67+XhFyxrJiON5NFIo/V6TZlrzYYCQGW6oIWRKbxuu3EXyVsKiRe+36fwVzmdR4uHywJj28bfVjuPFg+Xbu0bC/6HvbrcW9mr5cVK/4fK9Mh5pWWu12H8vFB5sCnwbcf/in+/6DLsda00BX718bAu2IaUuqrQImNTATf4KOEcJolrZw+VTe8lKp1JVHrhssIy1+MEuHRZKfAk0U+PJLrMSmI8TSU0LawbTHE40rimOUVKJQVxgchoKoFtumPgSVqYAakCBirTK+BRWJghubEWnQE/paUZiqYz8lZJ4Ag2zuhUUBAnWEVnkkIMzBMIhY8k+HD2hRS/LQpQBmFRkSiZBCJvEhKoTBcfzcVIWpgm5m2qjTEw7Xhf7XULYAUsOhRcmk/rfSrTXe5zQgjOaK6yQPooBPQ+GhX1jaioR5zARtFzQUGcYGNGN8JyDE4CUOZ6IizHkPyATdP9IyjI0NwBJJ5bE8ykPqGazHuLynRlURO89pW5vfB9HD2xF74rWuO9ojZa4b2iwDVUeVW+LxkCHCfsyE7zkEkCKGkphkZlukiAZ2lBBuYZqgnDWFqSgbmAMLzuDMJQdCvC4D0hKDqHMBTVAAe3mtZxJQ26p/WtwCwyNSrwNvGxhZJ+AxBFj8/q8ryVyvQCTMuN9D4LPmm/5VW0pazPMT05BJ8bFE2DplJCRPoj9lDPiAb1jKZBu+SLRQ6TkzLXU2gY1KyrOd9fGemN3/DS5c7cyxHpiVtoBBYsZa6XwGcBgSJv51FlVQrKVg8tc31HNOZ7ZGYv6khRmesV8ElCmsje1KuDNv8vJRrzvfLdJorBdnA+9tD3x1xl26s2zTH02q0skR54kYjRNOiNOzkiPaHMEQs1TYN22ZIYOTy2jpKIBvWAMtf1uWJx+cwPrspcV1nIZp/zBXAlLFRkf05DSSsPheOEOHb6wrnK9DIxJ/N6v/fXc27ttuZg9jh7Tp2cEFNQ/KCe0EaDekJIu0RDYQnRoL5wZg9xa26FeM2pqxPz6YspO1YO9qDvrQiHTr0v5y9kb/1k7GZpAQAAAABJRU5ErkJggg=="); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; pointer-events: none; } /* Hide the sticker on mouseover when requested. */ [data-fg-layout="instant-photos"] .fg-item.fg-instant-photo--sticker-hide-on-hover:hover::before { opacity: 0; }