[data-media-init] [data-media-placeholder] { transition: opacity 0.2s ease, visibility 0.2s ease; } [data-media-init][data-media-status="playing"] [data-media-placeholder], [data-media-init][data-media-status="paused"] [data-media-placeholder] { visibility: hidden; opacity: 0; } /*Cascading Slider*/ [data-cascading-viewport] { --gap: 0.5em; } [data-cascading-slide] { --clip: 0; --radius: 0.75em; } [data-cascading-slide] { box-shadow: none; transition: box-shadow 0.65s ease; } [data-cascading-slide] .cascading-slider__item-content { pointer-events: none; } [data-cascading-slide] .cascading-slider__item-link { pointer-events: none; } [data-cascading-slide][data-status="active"] .cascading-slider__item-content { pointer-events: auto; } [data-cascading-slide][data-status="active"] .cascading-slider__item-link { pointer-events: auto; } /*Hier bepaal je de shadow die op de achtergrond onder de tekst te zien is*/ [data-cascading-slide][data-status="active"] .cascading-slider__item-content { cursor: default; background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%); transition: opacity 0.65s ease; } [data-cascading-slide]::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0); border-radius: var(--radius); transition: opacity 0.65s ease; pointer-events: none; } [data-cascading-slide][data-status="active"]::after { opacity: 0; } [data-cascading-slide] .cascading-slider__h { transition-delay: 0ms; } [data-cascading-slide][data-status="active"] .cascading-slider__h { transition-delay: 400ms; opacity: 1; transform: translate(0px, 0em); } .wf-design-mode [data-cascading-viewport] { display: flex; flex-direction: row; gap: 1em; overflow: auto; } .wf-design-mode [data-cascading-slide] { position: relative; width: 60%; flex: 0 0 auto; } .wf-design-mode .cascading-slider__h { opacity: 1; transform: translate(0px, 0em); } /* Global attribute to easily control easing and timing of all targetted elements */ [data-button-anim-target] { transition: transform 0.525s cubic-bezier(0.625, 0.05, 0, 1); } /* Fake a duplicate text element using text shadow without blur */ /* We save the distance in a variable for easy use in the CSS animation */ .btn-icon-content__text { --text-duplicate-distance: 1.5em; text-shadow: 0px var(--text-duplicate-distance) currentColor; } /* Only apply hover animations if they are actually not supported */ @media (hover:hover) and (pointer:fine) { .btn-icon-link:hover .btn-icon-content__text { transform: translate(0px, calc(-1 * var(--text-duplicate-distance))); } .btn-icon-link:hover .btn-icon-icon__bg { transform: rotate(90deg); } .btn-icon-link:hover .btn-icon-icon__arrow { transform: translate(200%, 0px); } .btn-icon-link:hover .btn-icon-content__bg { transform: translate(0px, 0%) rotate(0deg); } } /* Add auto overflow in webflow to make editing easier */ .wf-design-mode [data-horizontal-scroll-wrap] { overflow: auto; }