* {
box-sizing: border-box;
}
:root {
--timeline-bg: #fff;
--center-col-width: 196px;
--center-height: 176px;
--bar-width: 48px;
--stem-width: 98px;
--stem-height: 10px;
--stem-dot-size: 24px;
--circle-size: 136px;
--circle-radius: 46px;
--green: #359349;
--yellow: #F8C721;
--orange: #E5702D;
--red: #DB3B33;
--purple: #612972;
--blue: #1E5F98;
}
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
body {
margin: 0;
font-family: Arial, sans-serif;
background: var(--timeline-bg);
}
.rainbow-ribbon {
display: block;
width: 100%;
height: 120px;
max-width: 100%;
overflow: hidden;
}
.ribbon-top {
height: 200px;
}
.ribbon-top-mobile {
display: none;
}
.ribbon-bottom {
height: 200px;
}
.ribbon-bottom-mobile {
display: none;
}
@media (max-width: 768px) {
.ribbon-top {
display: none;
}
.ribbon-top-mobile {
display: block;
height: 144px;
margin-bottom: -30px;
}
.ribbon-bottom {
display: none;
}
.ribbon-bottom-mobile {
display: block;
height: 110px;
margin-top: -42px;
}
}
.timeline {
position: relative;
width: min(720px, 94%);
margin: 0 auto; z-index: 1;
font-family: "Protest Strike", sans-serif;
font-weight: 400;
font-style: normal;
}
.timeline-item {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) var(--center-col-width) minmax(0, 1fr);
grid-template-areas: "left center right";
align-items: center;
min-height: var(--center-height);
margin: 0;
z-index: 1;
} .timeline-item::before {
content: "";
position: absolute;
left: 50%;
top: 0;
width: var(--bar-width);
height: calc(100% - var(--circle-radius));
transform: translateX(-50%);
border-radius: 0;
z-index: 0;
background: transparent;
}
.timeline-item:first-child::before {
display: block;
height: calc(100% - var(--circle-radius) + 60px);
top: -60px;
}
.timeline-item:last-child::before {
display: block;
height: calc(100% - var(--circle-radius) + 60px);
bottom: -60px;
top: unset;
} .timeline-center {
grid-area: center;
position: relative;
width: var(--center-col-width);
height: var(--center-height);
justify-self: center;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
} .timeline-center::before {
content: "";
position: absolute;
left: 50%;
top: 60%;
width: var(--bar-width);
height: 70%;
transform: translateX(-50%);
border-radius: 0;
z-index: 0;
background: transparent;
}  .timeline-item[data-color="green"]::before {
background: var(--green);
}
.timeline-item[data-color="yellow"]::before {
background: var(--yellow);
}
.timeline-item[data-color="orange"]::before {
background: var(--orange);
}
.timeline-item[data-color="red"]::before {
background: var(--red);
}
.timeline-item[data-color="purple"]::before {
background: var(--purple);
}
.timeline-item[data-color="blue"]::before {
background: var(--blue);
} .timeline-item[data-next-color="green"] .timeline-center::before {
background: var(--green);
}
.timeline-item[data-next-color="yellow"] .timeline-center::before {
background: var(--yellow);
}
.timeline-item[data-next-color="orange"] .timeline-center::before {
background: var(--orange);
}
.timeline-item[data-next-color="red"] .timeline-center::before {
background: var(--red);
}
.timeline-item[data-next-color="purple"] .timeline-center::before {
background: var(--purple);
}
.timeline-item[data-next-color="blue"] .timeline-center::before {
background: var(--blue);
}
.timeline-item[data-next-color=""] .timeline-center::before {
background: transparent;
} .timeline-stem {
position: absolute;
top: 50%;
width: var(--stem-width);
height: var(--stem-height);
border-radius: 999px;
transform: translateY(-50%);
z-index: 1;
}
.timeline-stem::after {
content: "";
position: absolute;
top: 50%;
width: var(--stem-dot-size);
height: var(--stem-dot-size);
border-radius: 50%;
transform: translateY(-50%);
background: inherit;
}
.side-left .timeline-stem {
left: -18px;
}
.side-left .timeline-stem::after {
left: calc(-1 * (var(--stem-dot-size) / 2));
}
.side-right .timeline-stem {
right: -18px;
}
.side-right .timeline-stem::after {
right: calc(-1 * (var(--stem-dot-size) / 2));
}
.timeline-circle {
position: relative;
z-index: 3;
width: var(--circle-size);
height: var(--circle-size);
border-radius: 50%;
background: #fff;
border: 8px solid;
overflow: hidden;
transform: scale(0.2) rotate(-25deg);
opacity: 0;
filter: blur(10px);
transition: all 0.9s cubic-bezier(.2, .8, .2, 1);
}
.timeline-circle img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
} .timeline-year,
.timeline-desc {
position: relative;
z-index: 2;
opacity: 0;
min-width: 0;
transition: all 0.9s cubic-bezier(.2, .8, .2, 1);
}
.timeline-year {
font-size: clamp(2.6rem, 4vw, 4rem);
font-weight: 800;
line-height: 1;
margin: 0;
}
.timeline-desc {
font-size: 1rem; line-height: 1.4;
max-width: 320px;
margin: 0;
} .side-left .timeline-year {
grid-area: left; text-align: center; transform: translateX(-140px);
}
.side-left .timeline-desc {
grid-area: right; text-align: center; transform: translateX(140px);
} .side-right .timeline-year {
grid-area: right; text-align: center; transform: translateX(140px);
}
.side-right .timeline-desc {
grid-area: left; text-align: center; transform: translateX(-140px);
} .timeline-item.visible .timeline-circle {
transform: scale(1) rotate(0);
opacity: 1;
filter: blur(0);
}
.timeline-item.visible .timeline-year,
.timeline-item.visible .timeline-desc {
transform: translateX(0);
opacity: 1;
}
.timeline-item.visible .timeline-year {
transition-delay: 0.15s;
}
.timeline-item.visible .timeline-desc {
transition-delay: 0.3s;
} .timeline-item[data-color="green"] .timeline-year,
.timeline-item[data-color="green"] .timeline-desc {
color: var(--green);
}
.timeline-item[data-color="yellow"] .timeline-year,
.timeline-item[data-color="yellow"] .timeline-desc {
color: var(--yellow);
}
.timeline-item[data-color="orange"] .timeline-year,
.timeline-item[data-color="orange"] .timeline-desc {
color: var(--orange);
}
.timeline-item[data-color="red"] .timeline-year,
.timeline-item[data-color="red"] .timeline-desc {
color: var(--red);
}
.timeline-item[data-color="purple"] .timeline-year,
.timeline-item[data-color="purple"] .timeline-desc {
color: var(--purple);
}
.timeline-item[data-color="blue"] .timeline-year,
.timeline-item[data-color="blue"] .timeline-desc {
color: var(--blue);
} .green {
background: var(--green);
border-color: var(--green);
}
.yellow {
background: var(--yellow);
border-color: var(--yellow);
}
.orange {
background: var(--orange);
border-color: var(--orange);
}
.red {
background: var(--red);
border-color: var(--red);
}
.purple {
background: var(--purple);
border-color: var(--purple);
}
.blue {
background: var(--blue);
border-color: var(--blue);
} .confetti {
position: absolute;
width: 10px;
height: 10px;
opacity: 0.5;
animation: sst-float 6s infinite ease-in-out alternate;
pointer-events: none;
z-index: 0;
} .confetti.square {
width: 8px;
height: 8px;
border-radius: 2px;
} .confetti.circle {
width: 9px;
height: 9px;
border-radius: 50%;
} .confetti.star {
width: 34px;
height: 34px;
opacity: .5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23f2c230' d='M50 10c5 0 8 2 10 7l6 15c2 4 4 6 8 6h15c10 0 14 11 7 17L84 65c-3 3-4 6-3 10l4 15c3 10-7 17-15 11L56 92c-4-3-8-3-12 0l-14 9c-8 6-18-1-15-11l4-15c1-4 0-7-3-10L4 55c-7-6-3-17 7-17h15c4 0 6-2 8-6l6-15c2-5 5-7 10-7z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain; background-color: transparent;
} @keyframes sst-float {
from {
transform: translateY(0px) rotate(0deg);
}
to {
transform: translateY(-40px) rotate(180deg);
}
} @media (max-width: 768px) {
:root {
--circle-size: 100px;
--center-height: 120px;
--bar-width: 40px;
--center-col-width: 150px;
}
.timeline {
width: 94%;
padding: 50px 0;
}
.timeline-item {
grid-template-columns: var(--center-col-width) 1fr;
grid-template-areas:
"center year"
"center desc";
column-gap: 18px;
row-gap: 2px;
min-height: var(--center-height);
margin: 0 0 14px;
align-items: center;
}
.timeline-item::before {
left: calc(var(--center-col-width) / 2);
}
.timeline-item:first-child::before {
display: block;
height: calc(100% - var(--circle-radius) + 80px);
top: -80px;
}
.timeline-center {
grid-area: center;
width: var(--center-col-width);
height: var(--center-height);
}
.timeline-stem {
left: auto !important;
right: 0 !important;
}
.timeline-stem::after {
right: calc(-1 * (var(--stem-dot-size) / 2)) !important;
left: auto !important;
}
.timeline-year {
grid-area: year !important;
justify-self: start !important;
align-self: end;
text-align: left !important;
padding: 0 !important;
transform: translateX(50px);
font-size: 2.1rem;
line-height: 1;
margin: 0;
}
.timeline-desc {
grid-area: desc !important;
justify-self: start !important;
align-self: start;
text-align: left !important;
padding: 0 !important;
transform: translateX(50px);
max-width: none;
font-size: 0.95rem;
line-height: 1.25;
margin: 0;
}
}