121 lines
3.1 KiB
CSS
Executable file
121 lines
3.1 KiB
CSS
Executable file
@charset "UTF-8";
|
|
#page-a-propos {
|
|
--hauteur-conteneur: var(--contenu-page-hauteur-minimale-sans-categories);
|
|
--page-marges-bloc-debut: var(--en-tete-hauteur);
|
|
--conteneur-marges-internes-ligne: var(--espace-xl);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
min-block-size: var(--hauteur-conteneur);
|
|
max-block-size: var(--hauteur-conteneur);
|
|
margin-top: var(--page-marges-bloc-debut);
|
|
}
|
|
#page-a-propos .storytelling {
|
|
overflow-y: scroll;
|
|
overscroll-behavior: none;
|
|
min-block-size: inherit;
|
|
max-block-size: inherit;
|
|
}
|
|
#page-a-propos .storytelling__conteneur {
|
|
overscroll-behavior: inherit;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
place-items: center;
|
|
min-block-size: calc(var(--hauteur-conteneur) * 13);
|
|
padding: 0 var(--conteneur-marges-internes-ligne);
|
|
}
|
|
#page-a-propos .storytelling__animation {
|
|
--hauteur-animation: 90px;
|
|
--taille-police: calc(var(--espace-xl) * 2.5);
|
|
pointer-events: none;
|
|
position: absolute;
|
|
z-index: 3;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
overflow: hidden;
|
|
display: grid;
|
|
place-content: center;
|
|
place-items: center;
|
|
block-size: 100%;
|
|
margin: auto;
|
|
visibility: visible;
|
|
opacity: 100%;
|
|
mask-image: linear-gradient(
|
|
var(--mask-direction, to right),
|
|
hsla(0, 0%, 0%, 0),
|
|
hsl(0, 0%, 0%) 20%,
|
|
hsl(0, 0%, 0%) 80%,
|
|
hsla(0, 0%, 0%, 0)
|
|
);
|
|
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
|
|
}
|
|
#page-a-propos .storytelling__animation[hidden] {
|
|
display: grid !important;
|
|
visibility: hidden;
|
|
opacity: 0%;
|
|
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
|
|
}
|
|
#page-a-propos .storytelling__animation.no-js {
|
|
visibility: hidden;
|
|
opacity: 0%;
|
|
transition: 1s opacity ease-in-out, 1s visibility ease-in-out;
|
|
}
|
|
#page-a-propos .storytelling__animation .animation-conteneur {
|
|
overflow: visible;
|
|
width: 120vw;
|
|
block-size: var(--hauteur-animation);
|
|
}
|
|
#page-a-propos .storytelling__animation .animation-texte {
|
|
overflow: visible;
|
|
font-size: var(--taille-police);
|
|
font-weight: 600;
|
|
text-shadow: 4px 4px 0 var(--couleur-blanc);
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--espacement-inter-lettres-rapproche-s);
|
|
}
|
|
#page-a-propos .storytelling__image {
|
|
position: sticky;
|
|
top: 0;
|
|
align-content: center;
|
|
inline-size: max-content;
|
|
max-inline-size: 100%;
|
|
min-block-size: var(--hauteur-conteneur);
|
|
max-block-size: var(--hauteur-conteneur);
|
|
}
|
|
#page-a-propos .storytelling__image[data-caché] {
|
|
display: none !important;
|
|
}
|
|
#page-a-propos .storytelling__image picture {
|
|
max-block-size: inherit;
|
|
}
|
|
#page-a-propos .storytelling__image img {
|
|
scale: 0.95;
|
|
max-block-size: inherit;
|
|
margin: auto;
|
|
object-fit: contain;
|
|
background: transparent;
|
|
}
|
|
@media (scripting: none) {
|
|
#page-a-propos .storytelling__animation {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
@media (width <= 700px) {
|
|
#page-a-propos {
|
|
--conteneur-marges-internes-ligne: var(--espace-l);
|
|
}
|
|
}
|
|
@media (width <= 500px) {
|
|
#page-a-propos {
|
|
--conteneur-marges-internes-ligne: var(--espace-m);
|
|
}
|
|
}
|
|
|
|
@supports (-moz-appearance: none) {
|
|
#page-a-propos .storytelling__animation {
|
|
--taille-police: calc(var(--espace-xl) * 2.2);
|
|
}
|
|
}
|
|
|
|
/* # sourceMappingURL=page-a-propos.css.map */
|