October 22 – 27
FREE ONLINE SUMMIT | 5 Days | 15 Teachers
Reclaim your attention, your inner compass, your compassion, your clarity, and your sense of belonging.
/* ========== Keyword Fade Carousel (No JS) ========== */
.lr-keyword-fade{
–w: 500px; /* image width */
–h: auto; /* can set fixed height if you want */
–slide-count: 4; /* update if you change # of slides */
–cycle: 16s; /* full cycle duration */
–fade: 1.2s; /* fade in/out duration */
–gap: 0s; /* visible plateau before fade out */
position: relative;
width: var(–w);
height: var(–h);
margin: 0 auto; /* center horizontally */
background: transparent; /* transparent stage */
display: grid;
place-items: center;
}
/* Stack slides */
.lr-keyword-fade .kw-slide{
position: absolute;
inset: 0;
display: grid;
place-items: center;
opacity: 0;
animation: kw-fade var(–cycle) linear infinite;
}
/* Images scale cleanly within the stage */
.lr-keyword-fade .kw-slide img{
width: var(–w);
height: auto;
display: block;
}
/* Stagger each slide using nth-child delays */
.lr-keyword-fade .kw-slide:nth-child(1){ animation-delay: calc(0 * var(–cycle) / var(–slide-count)); }
.lr-keyword-fade .kw-slide:nth-child(2){ animation-delay: calc(1 * var(–cycle) / var(–slide-count)); }
.lr-keyword-fade .kw-slide:nth-child(3){ animation-delay: calc(2 * var(–cycle) / var(–slide-count)); }
.lr-keyword-fade .kw-slide:nth-child(4){ animation-delay: calc(3 * var(–cycle) / var(–slide-count)); }
/* If you add more slides, add more nth-child lines and update –slide-count */
/* Keyframes: fade in, hold, fade out, then stay hidden */
@keyframes kw-fade{
/* timeline is per-slide window = cycle/slide-count */
0%{ opacity: 0; }
/* fade in */
calc( (var(–fade) / (var(–cycle) / var(–slide-count))) * 100% ){ opacity: 1; }
/* hold plateau */
calc( ((var(–fade) + var(–gap)) / (var(–cycle) / var(–slide-count))) * 100% ){ opacity: 1; }
/* fade out */
calc( ((2*var(–fade) + var(–gap)) / (var(–cycle) / var(–slide-count))) * 100% ){ opacity: 0; }
100%{ opacity: 0; }
}
/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
.lr-keyword-fade .kw-slide{ animation: none; opacity: 1; }
.lr-keyword-fade .kw-slide:not(:first-child){ display:none; }
}
