.jm-hero {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
overflow: hidden;
min-height: var(--section-lg);
} .jm-hero + .jm-section {
padding-block-start: 5px;
} .jm-hero__media {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.jm-hero__media picture,
.jm-hero__image {
display: block;
width: 100%;
height: 100%;
}
.jm-hero__image {
object-fit: cover;
object-position: left top;
} .jm-hero__media::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.2);
pointer-events: none;
} .jm-hero__overlay.overlay {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
pointer-events: none;
filter: blur(0.5px) drop-shadow(0 0 0 #c9c7c7);
}
.jm-hero__overlay.overlay::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(90deg, #0002 0 2px, transparent 4px 35vmin);
animation: jm-hero-overlay-vlines 0.45s steps(1) infinite;
}
.jm-hero__overlay.overlay::after {
content: "";
position: absolute;
inset: 0;
opacity: 0.2;
background-image:
repeating-conic-gradient(#000 0%, transparent 0.00003%, transparent 0.0005%, transparent 0.00095%),
repeating-conic-gradient(#000 0%, transparent 0.00005%, transparent 0.00015%, transparent 0.0009%);
animation: jm-hero-overlay-grains 0.5s steps(1) infinite;
}
@keyframes jm-hero-overlay-vlines {
0%,
100% {
transform: translateX(0);
opacity: 0.5;
}
10% {
transform: translateX(-1%);
}
20% {
transform: translateX(1%);
}
30% {
transform: translateX(-2%);
opacity: 0.75;
}
40% {
transform: translateX(3%);
}
50% {
transform: translateX(-3%);
opacity: 0.5;
}
60% {
transform: translateX(8%);
}
70% {
transform: translateX(-3%);
}
80% {
transform: translateX(10%);
opacity: 0.25;
}
90% {
transform: translateX(-2%);
}
}
@keyframes jm-hero-overlay-grains {
0%,
100% {
transform: translate(0, 0);
}
10% {
transform: translate(-1%, -1%);
}
20% {
transform: translate(1%, 1%);
}
30% {
transform: translate(-2%, -2%);
}
40% {
transform: translate(3%, 3%);
}
50% {
transform: translate(-3%, -3%);
}
60% {
transform: translate(4%, 4%);
}
70% {
transform: translate(-4%, -4%);
}
80% {
transform: translate(2%, 2%);
}
90% {
transform: translate(-3%, -3%);
}
}
@media (prefers-reduced-motion: reduce) {
.jm-hero__overlay.overlay::before,
.jm-hero__overlay.overlay::after {
animation: none;
}
}
.jm-hero__content {
position: relative;
z-index: var(--z-base);
width: 100%;
padding-top: var(--header-height);
text-align: center;
}
.jm-hero__stack {
align-items: center;
gap: 0;
}
.jm-hero__title {
max-width: var(--container-text);
margin: 0;
font-size: var(--fs-display-lg);
line-height: var(--lh-heading);
color: var(--color-text-inverse);
}
.jm-hero__title-text {
max-width: var(--container-text);
font-size: var(--fs-h3);
margin: 0;
color: var(--color-text-inverse);
}
.jm-hero__text {
max-width: var(--container-text);
font-size: var(--fs-base);
margin-top: var(--space-8);
color: var(--color-text-inverse);
}
.jm-hero__rotating {
position: relative;
display: inline-block;
overflow: hidden;
width: 100%;
height: 1.3em;
line-height: var(--lh-base);
}
.jm-hero__rotating-word {
position: absolute;
inset-block-start: 0;
inset-inline: 0;
display: block;
transition: transform 0.45s ease, opacity 0.45s ease;
will-change: transform, opacity;
}
.jm-hero__rotating-word.is-current {
transform: translateY(0);
opacity: 1;
}
.jm-hero__rotating-word.is-next {
transform: translateY(100%);
opacity: 0;
}
.jm-hero__rotating-word.is-enter {
transform: translateY(0);
opacity: 1;
}
.jm-hero__rotating-word.is-exit {
transform: translateY(-100%);
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.jm-hero__rotating-word {
transition: none;
}
}
.jm-hero__cta {
margin-top: var(--space-6);
}
@media (min-width: 782px) {
.jm-hero {
justify-content: flex-end;
min-height: var(--section-lg);
}
.jm-hero__media {
background-position: left top;
} .jm-hero__content {
display: flex;
justify-content: center;
width: 50%;
max-width: none;
margin-inline: 0;
padding-top: 0;
padding-inline: var(--gutter);
}
.jm-hero__stack {
width: 100%;
}
.jm-hero__title {
font-size: var(--fs-display-lg);
}
.jm-hero__text {
font-size: var(--fs-lg);
}
}