/* ============================================ Pretpot Sticky Grid to Slider Style 1 ============================================ */ /* --------------------------------------------------------------- STICKY FIX — Elementor parent containers position: sticky requires that NO ancestor between the sticky element and the scroll root () has overflow: hidden/auto/scroll OR a fixed height smaller than the scroll distance. We target every known Elementor wrapper class. The JS also applies these overrides at runtime via inline styles (more reliable than CSS alone in complex page-builder layouts). --------------------------------------------------------------- */ /* Widget's own Elementor wrappers */ .elementor-widget-pretpot-sticky-grid-slider-style-1, .elementor-widget-pretpot-sticky-grid-slider-style-1 > .elementor-widget-container { overflow: visible !important; height: auto !important; min-height: 0 !important; max-height: none !important; } /* Elementor v2 — section / column ancestors */ .elementor-section:has(.pretpot-sticky-grid-slider), .elementor-column:has(.pretpot-sticky-grid-slider), .elementor-widget-wrap:has(.pretpot-sticky-grid-slider), .elementor-container:has(.pretpot-sticky-grid-slider) { overflow: visible !important; height: auto !important; min-height: 0 !important; max-height: none !important; } /* Elementor v3 — flexbox containers */ .e-con:has(.pretpot-sticky-grid-slider), .e-con-inner:has(.pretpot-sticky-grid-slider) { overflow: visible !important; height: auto !important; min-height: 0 !important; max-height: none !important; } /* The widget wrapper itself */ .pretpot-sticky-grid-slider { position: relative; width: 100%; overflow: visible !important; height: auto !important; } /* The scroll-height section creates the scroll distance. Height is now set via inline style directly (e.g. style="height:400vh") rather than a CSS variable so it is always applied. */ .pretpot-sticky-grid-slider__section { position: relative; /* height set inline by PHP/JS template */ } /* Sticky panel — top and height are set inline so the offset setting works */ .pretpot-sticky-grid-slider__sticky { position: sticky; /* top and height are set inline */ width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; } .pretpot-sticky-grid-slider__container { position: relative; width: 100%; height: 100%; } /* ---- Items ---- */ .pretpot-sticky-grid-slider__item { position: absolute; overflow: hidden; will-change: transform, width, height, left, top, opacity; /* border-radius and position are driven entirely by JS inline styles */ transition: none; } /* Enforce cover on ALL media — both in grid and carousel phases */ .pretpot-sticky-grid-slider__item img, .pretpot-sticky-grid-slider__item video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Keep links full-size inside items */ .pretpot-sticky-grid-slider__item > a { display: block; position: absolute; inset: 0; width: 100%; height: 100%; } /* Overlay content on items */ .pretpot-sticky-grid-slider__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; z-index: 2; pointer-events: none; } .pretpot-sticky-grid-slider__overlay-title { margin: 0; color: #fff; text-align: center; text-shadow: 0 2px 10px rgba(0,0,0,0.5); } .pretpot-sticky-grid-slider__overlay-desc { margin: 10px 0 0; color: rgba(255,255,255,0.9); text-align: center; text-shadow: 0 1px 6px rgba(0,0,0,0.5); } /* ---- Progress indicator ---- */ .pretpot-sticky-grid-slider__progress { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: 200px; height: 3px; background: rgba(255,255,255,0.2); border-radius: 3px; z-index: 100; } .pretpot-sticky-grid-slider__progress-fill { height: 100%; width: 0%; background: var(--progress-color, #fff); border-radius: 3px; transition: width 0.1s linear; } /* ---- Navigation arrows ---- */ .pretpot-sticky-grid-slider__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 50; opacity: 0; transition: opacity 0.3s ease, background 0.3s ease; pointer-events: none; } .pretpot-sticky-grid-slider__nav--prev { left: 20px; } .pretpot-sticky-grid-slider__nav--next { right: 20px; } .pretpot-sticky-grid-slider__nav:hover { background: rgba(255,255,255,0.3); } .pretpot-sticky-grid-slider--carousel-active .pretpot-sticky-grid-slider__nav { opacity: 1; pointer-events: auto; } /* ---- Slide indicators (dots) ---- */ .pretpot-sticky-grid-slider__dots { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 100; opacity: 0; transition: opacity 0.3s ease; } .pretpot-sticky-grid-slider--carousel-active .pretpot-sticky-grid-slider__dots { opacity: 1; } .pretpot-sticky-grid-slider__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.3); cursor: pointer; transition: background 0.3s ease, transform 0.3s ease; } .pretpot-sticky-grid-slider__dot--active { background: #fff; transform: scale(1.3); } /* ---- Responsive ---- */ @media (max-width: 768px) { .pretpot-sticky-grid-slider__nav { width: 40px; height: 40px; } .pretpot-sticky-grid-slider__nav--prev { left: 10px; } .pretpot-sticky-grid-slider__nav--next { right: 10px; } }