|
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap'); |
|
|
|
@keyframes fadeIn { |
|
0% { |
|
opacity: 0; |
|
} |
|
100% { |
|
opacity: 1; |
|
} |
|
} |
|
|
|
.hero-container { |
|
position: relative; |
|
width: 100%; |
|
overflow: visible; |
|
} |
|
|
|
.hero-section { |
|
display: flex; |
|
flex-direction: column; |
|
min-height: 30rem; |
|
width: 100dvw; |
|
position: relative; |
|
border-radius: 12px; |
|
animation: fadeIn 1s ease-in-out; |
|
justify-content: center; |
|
} |
|
|
|
.hero-image { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100dvw; |
|
height: 100dvh; |
|
background-size: cover; |
|
background-position: center; |
|
background-repeat: no-repeat; |
|
transition: opacity 1s ease-in-out; |
|
opacity: 0; |
|
z-index: -1; |
|
animation: hero-anim-landscape 15s infinite; |
|
} |
|
|
|
@keyframes hero-anim-portrait { |
|
0% { |
|
background-position: center; |
|
background-size: 160% 140%; |
|
} |
|
25% { |
|
background-position: top left; |
|
background-size: 120% 100%; |
|
} |
|
50% { |
|
background-position: bottom right; |
|
background-size: 160% 140%; |
|
} |
|
75% { |
|
background-position: top right; |
|
background-size: 120% 100%; |
|
} |
|
100% { |
|
background-position: center; |
|
background-size: 160% 140%; |
|
} |
|
} |
|
|
|
|
|
@keyframes hero-anim-landscape { |
|
0% { |
|
background-position: center; |
|
background-size: 130% 150%; |
|
} |
|
25% { |
|
background-position: top left; |
|
background-size: 100% 120%; |
|
} |
|
50% { |
|
background-position: bottom right; |
|
background-size: 130% 150%; |
|
} |
|
75% { |
|
background-position: top right; |
|
background-size: 100% 120%; |
|
} |
|
100% { |
|
background-position: center; |
|
background-size: 130% 150%; |
|
} |
|
} |
|
|
|
.hero-image.active { |
|
opacity: 1; |
|
} |
|
|
|
.hero-text { |
|
display: flex; |
|
flex-direction: column; |
|
color: white; |
|
gap: 0.5rem; |
|
text-align: left; |
|
z-index: 1; |
|
height: 100%; |
|
margin-top: 30px; |
|
margin-left: 20px; |
|
width: 80%; |
|
justify-content: space-around; |
|
} |
|
|
|
.hero-title { |
|
color: white; |
|
font-size: 7rem; |
|
font-family: "Anton", sans-serif; |
|
font-weight: 400; |
|
font-style: normal; |
|
line-height: 1; |
|
transition: font-size 0.3s ease-in-out; |
|
user-select: none; |
|
width: auto; |
|
} |
|
|
|
.hero-section-play-button { |
|
background-color: #1f202196; |
|
padding: 10px; |
|
width: 120px; |
|
border-radius: 5px; |
|
} |
|
|
|
.hero-description { |
|
color: white; |
|
font-size: 1.2rem; |
|
font-weight: normal; |
|
line-height: 1.4; |
|
overflow: hidden; |
|
display: -webkit-box; |
|
-webkit-line-clamp: 3; |
|
-webkit-box-orient: vertical; |
|
text-overflow: ellipsis; |
|
transition: font-size 0.3s ease-in-out; |
|
user-select: none; |
|
} |
|
|
|
.hero-indicators { |
|
position: absolute; |
|
bottom: 1rem; |
|
left: 50%; |
|
display: flex; |
|
gap: 0.5rem; |
|
} |
|
|
|
.indicator { |
|
width: 20px; |
|
height: 10px; |
|
border-radius: 5px; |
|
background-color: gray; |
|
cursor: pointer; |
|
transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out; |
|
} |
|
|
|
.indicator.active { |
|
background-color: white; |
|
transform: scale(1.2); |
|
} |
|
|
|
|
|
@media (orientation:portrait){ |
|
.hero-image{ |
|
height: 85dvw; |
|
width: 100dvw; |
|
animation: hero-anim-portrait 15s infinite; |
|
} |
|
.hero-title { |
|
color: white; |
|
font-size: 2.5rem; |
|
} |
|
.hero-section { |
|
min-height: 14rem; |
|
} |
|
.hero-description{ |
|
font-size: .9rem; |
|
} |
|
|
|
} |
|
@media (orientation:landscape){ |
|
.hero-section{ |
|
height: 3.5rem; |
|
} |
|
.hero-text{ |
|
margin-top: 3rem; |
|
margin-left: 4rem; |
|
} |
|
} |