/* Web Databases block (acf/screen-mockup). Illustrated monitor with a screenshot corner-pinned into its screen shape via a projective transform computed in assets/js/conditional/blocks/screenMockup.js (same technique as the Web Mockup hero's Tablet case), surrounded by real HTML database cards connected to it by straight lines the same JS file draws at runtime (it measures actual rendered positions, so it works unchanged under either layout system below). Clicking a card selects it and updates the detail panel below. Two positioning systems exist side by side in the markup (see template-parts/blocks/block-screen-mockup.php's header comment) and this file's media queries pick which one is visible: - Desktop (>900px, the styles right below this comment, unscoped): cards are positioned absolutely by --spoke-left/--spoke-top (percent offsets PHP computes from each row's angle + radius — see the Spoke Angle Studio tool) inside a wide (1.6:1) diagram box. - Tablet/mobile (≤900px): the "@media (max-width: 900px)" block below reverts to the older CSS Grid slot system (.screenMockupDiagram--count-{2,3,4,5}), which hasn't been redone as spokes yet. Mobile additionally collapses that into a single-column accordion (@media max-width:600px, at the bottom of this file). All the block's non-typographic styling (card radius/border, colors, monitor size) comes in as CSS custom properties set inline per-instance from Design Tokens → Admin → Web Databases — see inc/helpers/database-types.php's shew_screen_mockup_*_css()/*_px() functions and the --sm-* var() defaults below. */ .screenMockupBlock { --sm-block-bg: #ffffff; --sm-card-bg: #efece3; --sm-hover-bg: #efece3; --sm-click-bg: #efece3; --sm-icon-color: #3f5765; --sm-selected-bg: #f6e4d3; --sm-selected-accent: #c1602c; --sm-card-radius: 12px; --sm-card-border-width: 1px; display: flex; flex-direction: column; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); width: 100%; margin: 0 auto; /* Standard block vertical padding (notes/block-design-standards.md §2) — var()-with-clamp-fallback, same pattern as displayPosts.css/ displayCaseStudy.css/testimonialCards.css, so this block sits with the same top/bottom rhythm as the rest of the library instead of relying on whatever margin its neighbors happen to have. */ padding-top: var(--sm-space-above, clamp(40px, 6vw, 100px)); padding-bottom: var(--sm-space-below, clamp(40px, 6vw, 100px)); } /* ── Diagram — desktop (>900px): radial spoke layout ─────────────────── */ /* Fixed, independent of the monitor's own width token (Design Tokens → Admin → Web Databases → Monitor Max Width). Card radius (0-100, in shew_screen_mockup_spoke_offset()) is a fraction of THIS box, same as the Spoke Angle Studio treated distance as relative to its own canvas rather than to the monitor icon drawn on it — so shrinking the monitor token shrinks the monitor alone and opens up more visible space around it, it doesn't pull the spokes in with it. .screenMockupStage's own max-width:100% (below) still exists as a safety net if the monitor token is ever set large enough to threaten the cards' radius. Wider than tall (1.6:1, not square) to match the reference mockup's fan — the 'top' spoke and the two side pairs read as a horizontal spread with headroom above/below, not a circle. Since shew_screen_mockup_spoke_ offset() applies the same 0-100 radius fraction to both left/top percentages, a non-square box naturally stretches that into an elliptical (wider-than-tall) fan with no extra math needed. */ .screenMockupDiagram { position: relative; width: min(880px, 100%); aspect-ratio: 1.6 / 1; margin: 0 auto; } /* Purely a layout hook for the 6-8 count "wrap" fallback below (a real flex box there, to center an incomplete last row — something a CSS Grid's fixed column tracks can't do on their own). display:contents everywhere else removes it from the box tree entirely, so its children behave as direct children of .screenMockupDiagram for every other layout system (desktop absolute spoke positioning, and the named-slot grid areas for 1-5 databases) — unaffected by this wrapper's existence. */ .screenMockupCards { display: contents; } .screenMockupConnectors { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; } /* Stroke width follows the same Card Border Width token (Design Tokens → Admin → Web Databases → Card & Layout Controls, --sm-card-border-width) as the cards' own border, rather than a hardcoded value independent of it, so the two read as one consistent linework weight. */ .screenMockupConnectorLine { stroke: var(--sm-icon-color); stroke-width: var(--sm-card-border-width, 1.5px); stroke-linecap: round; opacity: 0.5; } .screenMockupConnectorLine.is-active { stroke: var(--sm-selected-accent); stroke-width: calc(var(--sm-card-border-width, 1.5px) + 0.5px); opacity: 1; } .screenMockupDiagram .screenMockupSlot--mon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* ── Monitor (corner-pin stage) ──────────────────────────────────────── */ .screenMockupStage { position: relative; /* Above .screenMockupConnectors (z-index:1) so the monitor + its screen contents render on top of the spoke lines, which visually originate from the monitor's center — without this, each line's start point drew over the monitor artwork instead of appearing to come from behind it. Below .screenMockupCard (z-index:3) so a card's own spoke, if their radius ever brings them close enough to overlap, still reads on top of the monitor rather than under it. */ z-index: 2; max-width: 100%; } /* Opaque backdrop for the clipped screen shape (clip-path is set inline per- instance in block-screen-mockup.php from the illustration's corner-pin data) — needs its own solid background so whatever sits behind it (namely each spoke's connector line, which starts right at the monitor's center and so runs directly underneath this shape) never shows through, however .screenMockupScreenshotLayer above it fades during the entrance animation. Uses the Block Background token (Design Tokens → Admin → Web Databases), so a screenshot with a transparent background shows that color behind it, not a hardcoded white. */ .screenMockupScreenshotMask { position: absolute; inset: 0; overflow: hidden; background: var(--sm-block-bg, #fff); } .screenMockupScreenshotLayer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; transform-origin: 0 0; will-change: transform; opacity: 1; } .screenMockupScrollInner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* width:100%/height:auto is only the resting size before JS measures the image and takes over — screenMockup.js's sizeImageToCover() sets an explicit width/height/margin-left inline once the image loads, covering the stage box exactly (cropped sides for a short screenshot, overflowing height — enabling the scroll-linked translateY above — for a tall one). That's done in JS rather than via object-fit:cover here because this box sits under a matrix3d transform (the corner-pin homography, applied to its ancestor .screenMockupScreenshotLayer) and object-fit's cover sizing wasn't holding up reliably under that combination. */ .screenMockupScrollInner IMG { display: block; width: 100%; height: auto; } .screenMockupLineart { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* ── Database cards — desktop (>900px): positioned by spoke offset ────── --spoke-left/--spoke-top are set inline per card from PHP (percent of the diagram box, center-origin); width is fixed here since the card is no longer sized by a grid track. */ .screenMockupCard { position: absolute; left: var(--spoke-left, 50%); top: var(--spoke-top, 50%); /* Standalone `translate` property (not the `transform` shorthand) so this self-centering offset composes with, rather than gets clobbered by, the Card Entrance Animation's own `transform: translate3d(...)` (motion-effects.css) — the two are independent CSS properties that combine, unlike two rules both setting `transform` where the later/ more-specific one wins outright and silently drops the other's offset. Losing the -50%/-50% here shifted every revealed card by half its own box size (75px right + a proportional amount down for this card's 150px width) since it fell back to "top-left corner at the spoke point" instead of "centered on it". */ translate: -50% -50%; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; width: 150px; padding: 1.1rem 0.85rem; background: var(--sm-card-bg); border: var(--sm-card-border-width) solid transparent; border-radius: var(--sm-card-radius); color: var(--sm-card-color, var(--sm-icon-color)); font-family: inherit; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } /* Explicit background-color here (not just the filter below) is required — .screenMockupCard is a real