:root{--wpgb-accent-scheme-1:#0069ff;--wpgb-dark-scheme-1:#262626;--wpgb-dark-scheme-2:#565656;--wpgb-dark-scheme-3:#767676;--wpgb-light-scheme-1:#ffffff;--wpgb-light-scheme-2:#f6f6f6;--wpgb-light-scheme-3:#f5f5f5;--wpgb-lightbox-background:linear-gradient(180deg, rgba(30,30,30,0.45) 0%, rgba(30,30,30,0.9) 100%);--wpgb-lightbox-controls:#ffffff;--wpgb-lightbox-spinner:#ffffff;--wpgb-lightbox-title:#ffffff;--wpgb-lightbox-desc:#bbbbbb;}@media all and (-ms-high-contrast:none), (-ms-high-contrast:active){.wpgb-grid-8:not(.wpgb-enabled) .wpgb-viewport>div{margin:0 -4px}.wpgb-grid-8:not(.wpgb-enabled) .wpgb-card{width:calc(( 100% - 3 * 16px ) / 3 - 0.1px);margin:8px}}.wpgb-grid-8:not(.wpgb-enabled) .wpgb-viewport>div{grid-template-columns: repeat(3, 1fr);grid-gap:16px}.wp-grid-builder.wpgb-grid-8:not(.wpgb-enabled) .wpgb-card{height:260px}@media screen and (max-width: 1280px){@media all and (-ms-high-contrast:none), (-ms-high-contrast:active){.wpgb-grid-8:not(.wpgb-enabled) .wpgb-viewport>div{margin:0 -4px}.wpgb-grid-8:not(.wpgb-enabled) .wpgb-card{width:calc(( 100% - 3 * 16px ) / 3 - 0.1px);margin:8px}}.wpgb-grid-8:not(.wpgb-enabled) .wpgb-viewport>div{grid-template-columns: repeat(3, 1fr);grid-gap:16px}.wp-grid-builder.wpgb-grid-8:not(.wpgb-enabled) .wpgb-card{height:240px}}@media screen and (max-width: 1024px){@media all and (-ms-high-contrast:none), (-ms-high-contrast:active){.wpgb-grid-8:not(.wpgb-enabled) .wpgb-viewport>div{margin:0 -4px}.wpgb-grid-8:not(.wpgb-enabled) .wpgb-card{width:calc(( 100% - 2 * 16px ) / 2 - 0.1px);margin:8px}}.wpgb-grid-8:not(.wpgb-enabled) .wpgb-viewport>div{grid-template-columns: repeat(2, 1fr);grid-gap:16px}.wp-grid-builder.wpgb-grid-8:not(.wpgb-enabled) .wpgb-card{height:220px}}@media screen and (max-width: 640px){@media all and (-ms-high-contrast:none), (-ms-high-contrast:active){.wpgb-grid-8:not(.wpgb-enabled) .wpgb-viewport>div{margin:0 -3px}.wpgb-grid-8:not(.wpgb-enabled) .wpgb-card{width:calc(( 100% - 1 * 12px ) / 1 - 0.1px);margin:6px}}.wpgb-grid-8:not(.wpgb-enabled) .wpgb-viewport>div{grid-template-columns: repeat(1, 1fr);grid-gap:12px}.wp-grid-builder.wpgb-grid-8:not(.wpgb-enabled) .wpgb-card{height:220px}}.wpgb-grid-8 .wpgb-card .wpgb-lazy-load{color:var(--wpgb-accent-scheme-1);background:#e0e4e9}.wp-grid-builder .wpgb-card-26 .wpgb-card-inner{text-align:center;overflow:hidden}.wp-grid-builder .wpgb-card-26 .wpgb-card-media{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.wp-grid-builder .wpgb-card-26 .wpgb-card-media:hover .wpgb-card-media-thumbnail{-webkit-transform:scaleX(1.5) scaleY(1.5);transform:scaleX(1.5) scaleY(1.5)}.wp-grid-builder .wpgb-card-26 .wpgb-card-media:hover .wpgb-card-media-overlay{opacity:0}.wp-grid-builder .wpgb-card-26 .wpgb-card-media-overlay{background:linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 100%);opacity:1;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-duration:250ms;transition-duration:250ms}.wp-grid-builder .wpgb-card-26 .wpgb-card-media:hover .wpgb-card-media-overlay{opacity:0}.wp-grid-builder .wpgb-card-26 .wpgb-card-media-thumbnail{-webkit-filter:blur(0px);filter:blur(0px);-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-duration:400ms;transition-duration:400ms;-webkit-transform:scaleX(1) scaleY(1);transform:scaleX(1) scaleY(1)}.wp-grid-builder .wpgb-card-26 :hover .wpgb-card-media-thumbnail{-webkit-filter:blur(10px);filter:blur(10px)}.wp-grid-builder .wpgb-card-26 .wpgb-card-media:hover .wpgb-card-media-thumbnail{-webkit-transform:scaleX(1.5) scaleY(1.5);transform:scaleX(1.5) scaleY(1.5)}.wp-grid-builder .wpgb-card-26 .wpgb-block-1{mix-blend-mode:screen;font-size:1em;line-height:1.4;font-weight:700;text-align:center;text-transform:uppercase;margin:0;padding:1em;background:#fff;display:inline-block;width:60%;color:#000;opacity:0;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-duration:250ms;transition-duration:250ms;transform-origin:50% 100% 0;-webkit-transform:perspective(1000px) rotateX(60deg);transform:perspective(1000px) rotateX(60deg)}.wp-grid-builder .wpgb-card-26 .wpgb-card-media:hover .wpgb-block-1{opacity:1;-webkit-transform:perspective(1000px) rotateX(0deg);transform:perspective(1000px) rotateX(0deg)}.wp-grid-builder .wpgb-card-26 .wpgb-block-2{font-size:1.625em;line-height:1.4;font-weight:700;padding:0;margin:0 1em;opacity:1;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-duration:250ms;transition-duration:250ms;transform-origin:50% 100% 0;-webkit-transform:perspective(1000px) rotateX(0deg);transform:perspective(1000px) rotateX(0deg)}.wp-grid-builder .wpgb-card-26 .wpgb-card-media:hover .wpgb-block-2{opacity:0;-webkit-transform:perspective(1000px) rotateX(60deg);transform:perspective(1000px) rotateX(60deg)}.wp-grid-builder .wpgb-card-26 .wpgb-block-3{font-size:1em;line-height:1.4;font-weight:600;margin-bottom:1em;margin-right:1.625em;margin-left:1.625em;opacity:1;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-duration:250ms;transition-duration:250ms;transform-origin:50% 100% 0;-webkit-transform:perspective(1000px) rotateX(0deg);transform:perspective(1000px) rotateX(0deg)}.wp-grid-builder .wpgb-card-26 .wpgb-card-media:hover .wpgb-block-3{opacity:0;-webkit-transform:perspective(1000px) rotateX(60deg);transform:perspective(1000px) rotateX(60deg)}.wp-grid-builder .wpgb-card-26 .wpgb-card-media:hover .wpgb-block-1{opacity:1;-webkit-transform:perspective(1000px) rotateX(0deg);transform:perspective(1000px) rotateX(0deg)}.wp-grid-builder .wpgb-card-26 .wpgb-card-media:hover .wpgb-block-2{opacity:0;-webkit-transform:perspective(1000px) rotateX(60deg);transform:perspective(1000px) rotateX(60deg)}.wp-grid-builder .wpgb-card-26 .wpgb-card-media:hover .wpgb-block-3{opacity:0;-webkit-transform:perspective(1000px) rotateX(60deg);transform:perspective(1000px) rotateX(60deg)}/* * ============================================================ * REDWOOD KITCHENS — INSPIRATION LIBRARY V2.1 * WP Grid Builder — Grid #7 * LIGHTBOX CSS — LOCKED V2.1 BASELINE * ============================================================ * * Purpose * ------- * Refine WP Grid Builder's native lightbox without replacing it. * * Main objectives:* - Use the Redwood/Ollie Contrast background. * - Keep incoming images within a stable viewport area. * - Mask WPGB's image-resize/reflow moment between slides. * - Avoid noticeable transition animation. * - Prevent captions moving the image when text wraps. * * V2.1 image-delivery context * --------------------------- * Normal WPGB lightbox display uses the 1600px image source. * * Page 1660's V2.1 enhancement separately preserves the 2560px * WordPress "scaled" source for click-to-zoom. * * CompressX may transparently serve AVIF/WebP versions of those * logical WordPress image URLs. * * Important * --------- * The temporary .redwood-lightbox-hold element is created and * removed by the Grid #7 JavaScript. * * Do not remove it from the CSS without reviewing the JS. */ /* ============================================================ * 1. LIGHTBOX BACKGROUND * ============================================================ * * Ollie "Contrast" colour:* #1E1E26 * * Applied to the holder and internal image containers so changes * in image aspect ratio do not expose another background. */ .wpgb-lightbox-holder,
.wpgb-lightbox-holder figure,
.wpgb-lightbox-holder .wpgb-lightbox-media{background:#1E1E26 !important}/* ============================================================ * 2. INCOMING IMAGE CONSTRAINTS * ============================================================ * * WPGB inserts the incoming image and can subsequently resize it * to fit the available lightbox area. * * These limits constrain it immediately, reducing the visible * "large then shrink" effect, especially on portrait images. */ .wpgb-lightbox-holder img{max-width:calc(100vw - 120px) !important;max-height:calc(100vh - 180px) !important;width:auto !important;height:auto !important;object-fit:contain;animation:none !important;-webkit-animation:none !important}/* * WordPress adds an admin toolbar when logged in. * Reserve the additional vertical space while administering * or testing the page. */ body.admin-bar .wpgb-lightbox-holder img{max-height:calc(100vh - 212px) !important}/* ============================================================ * 3. TEMPORARY OUTGOING-IMAGE BUFFER * ============================================================ * * Immediately before accepted keyboard navigation, JavaScript * clones the currently displayed lightbox image and places it * over the real WPGB image. * * WPGB can then load, decode and resize the next image underneath. * * Once the incoming image is ready, the temporary image becomes * transparent and is subsequently removed from the DOM. * * This is a visual buffer, not an intentional animation. */ .redwood-lightbox-hold{position:fixed;/* * Must sit above the WPGB image while remaining below controls * that use a still-higher stacking level. */ z-index:999998;pointer-events:none;background:#1E1E26;overflow:hidden;opacity:1;transform:translateX(0);/* * 10ms proved preferable in testing:* effectively an immediate handover while retaining the buffer. */ transition:transform 10ms ease-out, opacity 10ms ease-out}.redwood-lightbox-hold img{width:100%;height:100%;object-fit:contain}/* ============================================================ * 4. BUFFER EXIT STATE * ============================================================ * * Earlier experiments moved the outgoing image left/right. * V2.1 deliberately uses NO visible horizontal movement. * * Directional classes remain because the JS already identifies * previous/next navigation. They provide a future extension point * without changing current behaviour. */ .redwood-lightbox-hold.redwood-slide-out-left{transform:translateX(0);opacity:0}.redwood-lightbox-hold.redwood-slide-out-right{transform:translateX(0);opacity:0}/* ============================================================ * 5. CAPTION STABILITY * ============================================================ * * WPGB normally allows caption height to vary. * * With a narrow portrait image, a long caption can wrap onto an * additional line. That changes figure height and can cause WPGB * to vertically reposition the image. * * Reserving a fixed 56px caption area keeps image position stable * between shorter and longer captions. */ .wpgb-lightbox-holder figcaption{min-height:56px;max-height:56px;overflow:hidden;transform:none !important;-webkit-transform:none !important;transition:none !important;-webkit-transition:none !important;animation:none !important;-webkit-animation:none !important}.wp-grid-builder:not(.wpgb-template){opacity:1!important}