/* * Prevent the WPBakery archive CTA from flashing beside an Isotope grid * before the grid has calculated its final height. Visibility is preserved * as layout space, so this does not alter the archive content or its order. */ html:not(.etg-tour-grids-ready) body:not(.single-tour-item) .vc_btn3-container > a[href*="/tailor-make-your-tour/"] { visibility: hidden; opacity: 0; clip-path: inset(50%); pointer-events: none; animation: etg-tour-cta-safety-reveal 0s linear 4s forwards; } html.etg-tour-grids-ready body:not(.single-tour-item) .vc_btn3-container > a[href*="/tailor-make-your-tour/"] { visibility: visible !important; opacity: 1 !important; clip-path: inset(0) !important; pointer-events: auto !important; animation: none; } @keyframes etg-tour-cta-safety-reveal { to { visibility: visible; opacity: 1; clip-path: inset(0); } } /* * Tour grid loading skeleton. * * The grid is built by Isotope, which can only position cards once it has * measured them, so for a moment the browser shows unpositioned floated cards * and then they jump into place. Rather than try to hide that with JS timing, * the list template renders a skeleton in the HTML and this stylesheet swaps * the two over when gains .etg-tour-grids-ready. * * Two details matter: * - the real grid is hidden with `visibility`, never `display`, so its boxes * still have geometry and Isotope can measure them while it is invisible; * - the skeleton is absolutely positioned, so showing and hiding it never * changes the height of anything around it. * * Both sides carry a CSS-only fallback that fires at 3s, so if JS fails, is * blocked, or is switched off entirely, the tours still appear on their own. */ .qodef-tours-list-holder { position: relative; } .etg-tour-skeleton { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; display: grid; gap: 18px; grid-auto-rows: min-content; padding: 0 9px; overflow: hidden; pointer-events: none; opacity: 1; transition: opacity 220ms ease, visibility 220ms ease; } /* Never over the related-tours block: that one is a plain CSS grid and is painted correctly on the first frame, so it has nothing to hide. */ .single-tour-item .etg-tour-skeleton, .etg-related-tours-section .etg-tour-skeleton { display: none; } /* Match the column count the real grid will use. */ .qodef-tours-columns-1 .etg-tour-skeleton { grid-template-columns: repeat(1, minmax(0, 1fr)); } .qodef-tours-columns-2 .etg-tour-skeleton { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qodef-tours-columns-3 .etg-tour-skeleton { grid-template-columns: repeat(3, minmax(0, 1fr)); } .qodef-tours-columns-4 .etg-tour-skeleton { grid-template-columns: repeat(4, minmax(0, 1fr)); } .qodef-tours-columns-5 .etg-tour-skeleton { grid-template-columns: repeat(5, minmax(0, 1fr)); } .qodef-tours-columns-6 .etg-tour-skeleton { grid-template-columns: repeat(6, minmax(0, 1fr)); } /* Mirrors tours-responsive.css so the placeholders sit where the cards will. */ @media only screen and (max-width: 1024px) { .qodef-tours-columns-4 .etg-tour-skeleton, .qodef-tours-columns-5 .etg-tour-skeleton, .qodef-tours-columns-6 .etg-tour-skeleton { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media only screen and (max-width: 768px) { .qodef-tours-columns-3 .etg-tour-skeleton, .qodef-tours-columns-4 .etg-tour-skeleton, .qodef-tours-columns-5 .etg-tour-skeleton { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media only screen and (max-width: 680px) { .etg-tour-skeleton { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; } } .etg-tour-skeleton-tile { display: flex; overflow: hidden; flex-direction: column; border-radius: 8px; background-color: #fff; box-shadow: 0 8px 22px rgba(23, 32, 51, 0.08); } .etg-tour-skeleton-media { aspect-ratio: 3 / 2; background-color: #e9edf2; } .etg-tour-skeleton-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; padding: 22px 20px; } .etg-tour-skeleton-line { display: block; height: 12px; border-radius: 6px; background-color: #e9edf2; } .etg-tour-skeleton-title { height: 16px; } .etg-tour-skeleton-short { width: 60%; } .etg-tour-skeleton-bar { height: 46px; background-color: #f1f3f6; } /* One shimmer for the whole skeleton, animating a transform so it stays on the compositor instead of repainting every tile. */ .etg-tour-skeleton::after { position: absolute; top: 0; bottom: 0; left: 0; width: 60%; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0)); content: ''; transform: translate3d(-100%, 0, 0); animation: etg-tour-skeleton-shimmer 1250ms ease-in-out infinite; will-change: transform; } @keyframes etg-tour-skeleton-shimmer { to { transform: translate3d(266%, 0, 0); } } /* Hide the real grid until it has been laid out. */ html:not(.etg-tour-grids-ready) body:not(.single-tour-item) .qodef-tours-list-holder > .qodef-tours-list-holder-inner { visibility: hidden; animation: etg-tour-grid-safety-reveal 0s linear 3s forwards; } /* Swap them over once the grid is positioned. */ html.etg-tour-grids-ready .etg-tour-skeleton { visibility: hidden; opacity: 0; } html.etg-tour-grids-ready .etg-tour-skeleton::after { animation: none; } /* JS-free fallback: reveal the tours and drop the skeleton after 3s. */ .etg-tour-skeleton { animation: etg-tour-skeleton-safety-hide 0s linear 3s forwards; } @keyframes etg-tour-grid-safety-reveal { to { visibility: visible; } } @keyframes etg-tour-skeleton-safety-hide { to { visibility: hidden; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .etg-tour-skeleton::after { animation: none; } .etg-tour-skeleton { transition: none; } }