/* slider.css - paste into a file and include in */ #custom-slider { position: relative; overflow: hidden; } /* ensure the container is the positioning context for absolute slides */ .custom-slider-container { position: relative; height: 100%; } /* slides: all overlap, we fade them in/out */ .custom-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.9s ease-in-out; pointer-events: none; /* inactive slides shouldn’t receive events */ display: block; z-index: 0; } .custom-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } /* active slide shows above others */ .custom-slide.active { opacity: 1; pointer-events: auto; z-index: 1; } /* dots */ .custom-dots { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 60; /* sits above overlay */ display: flex; gap: 8px; padding: 0; margin: 0; list-style: none; } .custom-dots li { margin: 0; } .custom-dots button { width: 12px; height: 12px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.8); opacity: 0.6; cursor: pointer; padding: 0; font-size: 0; /* ✅ ensures no accidental text/numbers ever show */ } .custom-dots button.active { opacity: 1; background: #ffcc33; /* highlight color */ } /* overlay sits visually above slides but DOES NOT block clicks */ .slider-overlay { z-index: 10; pointer-events: none; /* allow clicks through the dimmer */ } /* ensure text overlay content sits above dimmer & dots */ .slider-content { position: relative; z-index: 30; } /* small responsive tweak: make dots slightly larger on touch devices */ @media (pointer: coarse) { .custom-dots button { width: 16px; height: 16px; } }