app/home/_components/Home.module.css
.HomeHeader {
--home-header-height: 400px;
height: var(--home-header-height);
}
.HomeHeaderGradient {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100vw;
height: var(--home-header-height);
background: linear-gradient(180deg, #ff5800 0%, #cb59ab 100%, #ea36b8 100%);
}
.HomeHeaderHeadline {
margin-top: 45px;
color: white;
font-size: 92px;
font-weight: 400;
line-height: 85px;
text-align: center;
word-wrap: break-word;
@media (width <= 768px) {
font-size: 64px;
}
}
.HomeHeaderParagraph {
margin: 35px 0;
color: white;
font-size: 20px;
font-weight: 400;
line-height: 24px;
text-align: center;
word-wrap: break-word;
@media (width <= 768px) {
padding: 0 20px;
font-size: 18px;
}
}
.HomeHeaderCta {
display: flex;
justify-content: center;
margin: 16px 0 52px;
@media (width <= 768px) {
width: 80%;
}
}
.HomeHeaderWaves {
--home-header-waves-height: 25px;
position: relative;
margin-top: 4px;
margin-bottom: var(--home-header-waves-height);
}
.HomeHeaderWaves svg {
width: 100vw;
height: var(--home-header-waves-height);
}
.HomeHeaderWavesParallax > use {
animation: move-forever 30s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.HomeHeaderWavesParallax > use:nth-child(1),
.HomeHeaderWavesParallax > use:nth-child(2) {
animation-delay: -2s;
animation-duration: 6s;
}
.HomeHeaderWavesParallax > use:nth-child(3) {
animation-delay: -3s;
animation-duration: 12s;
}
.HomeHeaderWavesParallax > use:nth-child(4) {
animation-delay: -4s;
animation-duration: 15s;
}
.HomeHeaderWavesParallax > use:nth-child(5) {
animation-delay: -5s;
animation-duration: 20s;
}
@keyframes move-forever {
0% {
transform: translate3d(-90px, 0, 0);
}
100% {
transform: translate3d(85px, 0, 0);
}
}