.timeline {
padding: 4rem 2rem;
}
.timeline__container {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.timeline__line {
position: absolute;
top: 62px;
left: 0;
right: 0;
height: 2px;
background-color: var(--wp--preset--color--custom-or);
transform: translateY(-50%);
}
.timeline__items {
display: flex;
justify-content: space-between;
position: relative;
}
.timeline__item {
width: 80px;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 1rem;
cursor: pointer;
transition: all 0.3s ease;
position: relative; }
.timeline__year {
position: relative;
font-size: var(--wp--preset--font-size--3);
font-weight: bold;
letter-spacing: 3px;
color: var(--wp--preset--color--custom-or);
margin-bottom: 1rem;
transition: all 0.3s ease;
}
.timeline__year::after {
content: "";
position: absolute;
top: calc(100% + 8px);
left: calc(50% - 1px);
width: 2px;
height: 24px;
background-color: var(--wp--preset--color--custom-or);
}
.timeline__dot {
width: 17px;
height: 19px;
border-radius: 50%;
background-image: url(https://www.ingeworks.fr/wp-content/themes/ingeworks/assets/chart/timeline-dot.svg);
background-size: 80% 100%;
background-position: center;
background-repeat: no-repeat;
margin: 1rem 0;
transform: scale(0);
transition: all 0.3s ease;
}
.timeline__text {
text-align: center;
opacity: 0;
height: 0;
max-height: 100px; overflow-y: auto; transition: all 0.3s ease;
position: absolute;
top: calc(50% + 30px); width: 100%;
}
.timeline__item.active {
width: 300px;
}
.timeline__item.active .timeline__dot {
transform: scale(1.5);
}
.timeline__item.active .timeline__text {
opacity: 1;
height: auto;
margin-top: 1rem;
}
@media screen and (max-width: 768px) {
.timeline {
padding: 0;
max-width: 100%;
overflow: auto;
}
.timeline__items {
display: flex;
justify-content: space-between;
position: relative;
max-width: 100%;
height: 200px;
padding-bottom: 2rem;
-webkit-overflow-scrolling: touch;
}
.timeline__container {
width: max-content;
padding: 0;
}
.timeline__item {
min-width: 200px;
margin-right: 1rem;
}
.timeline__item.active {
width: 250px;
}
.timeline__text {
top: 80px;
}
}