178 lines
4.2 KiB
CSS
178 lines
4.2 KiB
CSS
#page-a-propos {
|
|
--images-longueur-maximale: 1300px;
|
|
--page-marges-bloc-debut: var(--en-tete-hauteur);
|
|
--images-marges-ligne: var(--espace-xl) * 2;
|
|
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
margin-top: var(--page-marges-bloc-debut);
|
|
}
|
|
|
|
#page-a-propos .storytelling {
|
|
padding: var(--espace-xl) 0;
|
|
color: var(--couleur-gris-fonce);
|
|
}
|
|
|
|
#page-a-propos .storytelling__conteneur {
|
|
position: relative;
|
|
width: min(var(--images-longueur-maximale), 100% - var(--images-marges-ligne));
|
|
margin: auto;
|
|
}
|
|
|
|
#page-a-propos .storytelling picture {
|
|
position: relative;
|
|
}
|
|
|
|
#page-a-propos .storytelling picture::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-gris.svg");
|
|
background-repeat: space;
|
|
background-position: center;
|
|
background-size: contain;
|
|
filter: opacity(0%);
|
|
animation: 1s clignotement infinite alternate both linear;
|
|
}
|
|
|
|
#page-a-propos .storytelling img {
|
|
position: relative;
|
|
width: max-content;
|
|
height: auto;
|
|
object-fit: contain;
|
|
background: transparent;
|
|
}
|
|
|
|
#page-a-propos .storytelling .epingle {
|
|
position: absolute;
|
|
right: 46.5%;
|
|
}
|
|
|
|
#page-a-propos .storytelling .epingle img {
|
|
pointer-events: none;
|
|
display: block;
|
|
width: 1.5rem;
|
|
filter: drop-shadow(1px 1px 3px var(--couleur-gris-fonce));
|
|
transition: 0.2s filter;
|
|
}
|
|
|
|
#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="1"] {
|
|
top: 2%;
|
|
}
|
|
|
|
#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="2"] {
|
|
top: 23%;
|
|
}
|
|
|
|
#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="3"] {
|
|
top: 35%;
|
|
}
|
|
|
|
#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="4"] {
|
|
top: 58%;
|
|
}
|
|
|
|
#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="5"] {
|
|
top: 76%;
|
|
}
|
|
|
|
#page-a-propos .storytelling .epingle[data-id-ensemble-epingle-boite="6"] {
|
|
top: 95.5%;
|
|
}
|
|
|
|
#page-a-propos .storytelling .epingle[data-ensemble-epingle-boite-actif] img {
|
|
filter: drop-shadow(1px 1px 5px var(--couleur-gris-fonce));
|
|
}
|
|
|
|
#page-a-propos .storytelling .boite-texte {
|
|
position: absolute;
|
|
top: 0;
|
|
right: calc(46.5% - (15rem + var(--espace-l)) / 2);
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
padding: var(--espace-l);
|
|
font-size: 0.8rem;
|
|
font-style: italic;
|
|
color: var(--couleur-noir);
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
background: var(--couleur-fond);
|
|
border: 1px solid var(--couleur-noir);
|
|
transition: 0.2s opacity, 0.2s visibility;
|
|
}
|
|
|
|
#page-a-propos .storytelling .boite-texte button {
|
|
position: absolute;
|
|
top: 0;
|
|
right: calc(-1.5rem - var(--espace-m) - var(--espace-xs));
|
|
align-self: end;
|
|
padding: var(--espace-xs);
|
|
}
|
|
|
|
#page-a-propos .storytelling .boite-texte button img {
|
|
pointer-events: none;
|
|
aspect-ratio: 1;
|
|
width: 1.5rem;
|
|
}
|
|
|
|
#page-a-propos .storytelling .boite-texte button:active {
|
|
background: var(--couleur-jaune);
|
|
}
|
|
|
|
#page-a-propos .storytelling .boite-texte p {
|
|
max-width: 15rem;
|
|
}
|
|
|
|
#page-a-propos .storytelling .boite-texte p + p {
|
|
margin-top: var(--espace-m);
|
|
}
|
|
|
|
#page-a-propos .storytelling .boite-texte[data-ensemble-epingle-boite-actif] {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="2"] {
|
|
--hauteur-boite: calc(7lh + 1rem + var(--espace-l) * 2);
|
|
|
|
top: calc(23% - var(--hauteur-boite) / 2);
|
|
}
|
|
|
|
#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="3"] {
|
|
--hauteur-boite: calc(7lh + 1rem + var(--espace-l) * 2);
|
|
|
|
top: calc(35% - var(--hauteur-boite) / 2);
|
|
}
|
|
|
|
#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="4"] {
|
|
--hauteur-boite: calc(8lh + 2rem + var(--espace-l) * 2);
|
|
|
|
top: calc(58% - var(--hauteur-boite) / 2);
|
|
}
|
|
|
|
#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="5"] {
|
|
--hauteur-boite: calc(12lh + 2rem + var(--espace-l) * 2);
|
|
|
|
top: calc(76% - var(--hauteur-boite) / 2);
|
|
}
|
|
|
|
#page-a-propos .storytelling .boite-texte[data-id-ensemble-epingle-boite="6"] {
|
|
--hauteur-boite: calc(7lh + 1rem + var(--espace-l) * 2);
|
|
|
|
top: calc(95.5% - var(--hauteur-boite) / 2);
|
|
}
|
|
|
|
@media (width <= 700px) {
|
|
#page-a-propos {
|
|
--images-marges-ligne: var(--espace-m);
|
|
}
|
|
}
|
|
|
|
@keyframes clignotement {
|
|
to {
|
|
filter: opacity(30%);
|
|
}
|
|
}
|