/** * Comm360 — Cartes empilées en parallaxe (Stacking Cards Parallax — CSS FIDÈLE Osmo). * * CSS repris verbatim de la fiche Osmo. Tous les sélecteurs sont déjà espacés * de noms (classes stacking-cards__* / stacking-card__*) : aucun scoping * supplémentaire nécessaire. Ces classes stylent les cartes de la démo de la * fiche (facultatives, réutilisables telles quelles) ; le déclencheur de * l'effet est la classe .comm360-cartes-parallaxe ou l'attribut Osmo * d'origine [data-stacking-cards-item] posé sur chaque carte (aucun style * n'est requis sur le déclencheur). * * Rappel de la fiche : ne pas mettre display:flex sur le parent de * .stacking-cards__collection (le plus souvent ou
), cela casse * l'effet. */ .stacking-cards__collection { width: 100%; } .stacking-cards__list { flex-flow: column; display: flex; } .stacking-cards__item { color: #fff; border-top-left-radius: 1em; border-top-right-radius: 1em; flex-flow: column; justify-content: center; align-items: center; width: 100%; min-height: 100vh; margin-top: -1em; padding-top: 5em; padding-bottom: 5em; display: flex; position: relative; } .stacking-cards__item.is--green { background-color: #1a261e; } .stacking-cards__item.is--purple { background-color: #544a58; } .stacking-cards__item.is--blue { background-color: #1a232e; } .stacking-cards__item.is--brown { background-color: #62594c; } .stacking-cards__item.is--red { background-color: #1f1715; } .stacking-cards__item-h { text-align: center; text-transform: uppercase; margin-top: 0; margin-bottom: 0; font-family: PP Neue Corp Tight, Arial, sans-serif; font-size: 10vw; font-weight: 700; line-height: .8; } .stacking-card__heading-faded { opacity: .5; } .stacking-cards__item-img { aspect-ratio: 1; border-radius: .75em; width: 30vw; margin-top: -1vw; } .stacking-cards__item-top { justify-content: space-between; align-items: center; display: flex; position: absolute; top: 2.5em; left: 2.5em; right: 2.5em; } .stacking-card__top-span { font-size: 1em; font-weight: 500; }