.main-hero {
min-height: 100vh;
display: flex;
justify-content: center;
background-color: #fff;
padding: 4rem 1.5rem 2rem;
position: relative;
overflow: hidden;
}
.main-hero__container {
max-width: 600px;
margin: 0 auto;
width: 100%;
}
.main-hero__content {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
} .main-hero__star {
position: absolute;
bottom: -10%;
left: -16%;
width: 40px;
height: auto;
z-index: 1;
} .main-hero__title {
font: 700 5rem/0.95 var(--primary-font);
color: var(--secondary-color);
margin: 0 0 2rem 0;
letter-spacing: -0.03em;
text-transform: uppercase;
}
.main-hero__title-line {
display: block;
position: relative;
line-height: 0.85;
} .main-hero__title-line--highlight {
position: relative;
color: var(--primary-color);
} .main-hero__ellipsis {
display: inline-block;
width: 80px;
height: auto;
position: absolute;
top: auto;
bottom: 0;
right: 5%;
} .main-hero__subtitle {
font: 400 2.25rem/1 var(--primary-font);
color: var(--secondary-color);
margin: 0;
max-width: 300px;
}
.main-hero__subtitle-break {
display: none;
} @media (min-width: 768px) {
.main-hero {
padding: 3rem 2rem;
}
.main-hero__title {
font-size: 7rem;
margin-bottom: 2.5rem;
}
.main-hero__star {
width: 50px;
left: -14%;
}
.main-hero__ellipsis {
width: 110px;
}
.main-hero__subtitle {
position: absolute;
font-size: 1.75rem;
bottom: 9%;
right: 6%;
}
.main-hero__subtitle-break {
display: inline;
}
} @media (min-width: 1024px) {
.main-hero {
padding: 4rem 2rem;
}
.main-hero__ellipsis {
right: 0;
width: 132px;
}
.main-hero__subtitle {
right: 7%;
bottom: 9%;
}
} @media (min-width: 1440px) {
.main-hero__title {
font-size: 8.5rem;
}
.main-hero__ellipsis {
width: 150px;
}
.main-hero__subtitle {
bottom: 8%;
right: -3%;
font-size: 2.125rem;
}
} @media (prefers-reduced-motion: no-preference) {
.main-hero__title-line {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s ease-out forwards;
}
.main-hero__title-line:nth-child(1) {
animation-delay: 0.1s;
}
.main-hero__title-line:nth-child(2) {
animation-delay: 0.2s;
}
.main-hero__title-line:nth-child(3) {
animation-delay: 0.3s;
}
.main-hero__title-line:nth-child(4) {
animation-delay: 0.4s;
}
.main-hero__title-line:nth-child(5) {
animation-delay: 0.5s;
}
.main-hero__subtitle {
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.8s ease-out 0.7s forwards;
}
.main-hero__star {
opacity: 0;
transform: rotate(-45deg) scale(0.5);
animation: starAppear 1s ease-out 0.9s forwards;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes starAppear {
to {
opacity: 1;
transform: rotate(0) scale(1);
}
}
}