.hero {
position: relative;
min-height: 100vh;
color: white;
background-color: #034a9c;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 1.5rem;
background-image: url(https://images.unsplash.com/photo-1521737604893-d14cc237f11d);
background-size: cover;
background-position: center;
}
.hero.hero * {
color: white;
}
.hero--overlay {
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 0;
}
.hero--content {
max-width: 64rem;
z-index: 2;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.hero .hero--highlight-1 {
font-size: 1.6rem;
}
.hero .hero--highlight-2 {
font-size: 2rem;
}
.hero--diagonal-ripple,
.hero--diagonal-ripple-instant,
.hero--diagonal-ripple-faint {
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent 48%, rgba(255, 255, 255, 0.15) 50%, transparent 52%);
background-size: 200% 200%;
background-repeat: no-repeat;
pointer-events: none;
z-index: 2;
}
.hero--diagonal-ripple {
animation: rippleDiagonalMove 6s linear infinite;
opacity: 0.6;
}
.hero--diagonal-ripple-instant {
animation: rippleDiagonalMoveInstant 4s linear infinite;
opacity: 0.6;
}
.hero--diagonal-ripple-faint {
animation: rippleDiagonalMove 6s linear infinite;
}
@keyframes rippleDiagonalMove {
from {
background-position: 100% 100%;
}
to {
background-position: -100% -100%;
}
}
@keyframes rippleDiagonalMoveInstant {
0% {
background-position: 100% 100%;
}
99.999% {
background-position: 0% 0%;
}
100% {
background-position: 100% 100%;
}
}