.hero {
position: relative;
display: flex;
width: 100%;
max-width: unset;
min-height: 100vh;
}
.hero__inner-container {
display: flex;
flex-flow: column;
align-items: center;
padding-top: 11.333rem;
padding-bottom: 6.466rem;
}
@media only screen and (min-width: 1279px) {
.hero__inner-container {
padding-top: 8.854vw;
padding-bottom: 5.052vw;
}
}
@media only screen and (max-width: 1278.99px) {
.hero__inner-container {
padding-top: 33.077vw;
padding-bottom: 25.385vw;
}
}
.hero__content {
width: calc(100% - var(--site-padding) * 2);
font-size: clamp(3.2rem, 3.2rem + 15 * (100vw - 375px) / 905, 4.7rem);
line-height: 1.06;
margin: auto;
letter-spacing: -0.02em;
}
@media only screen and (min-width: 1279px) {
.hero__content {
font-size: 3.646vw;
}
}
@media only screen and (max-width: 1278.99px) {
.hero__content {
font-size: 7.692vw;
}
}
.hero__content h1 {
overflow: hidden;
position: relative;
display: inline-block;
width: -moz-fit-content;
width: fit-content;
font-size: inherit;
line-height: inherit;
vertical-align: bottom;
margin: 0;
}
@media only screen and (max-width: 1278.99px) {
.hero__content h1 .line {
display: flex;
align-items: flex-end;
}
.hero__content h1 .line::after {
position: relative;
display: block;
content: "";
width: 8.718vw;
height: 0.564vw;
background-color: #3B413A;
}
}
.hero__content h1 span {
display: inline-block;
}
.hero__content p {
position: relative;
margin: 0;
}
.hero__content p > span {
overflow: hidden;
position: relative;
display: inline-block;
vertical-align: bottom;
}
.hero__content p span > span {
display: inline-block;
}
.hero__content a {
overflow: hidden;
position: relative;
display: inline-block;
color: inherit;
text-decoration: none;
padding-bottom: 0.19em;
}
.hero__content a span {
display: inline-block;
}
.hero__content a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 0;
height: 0.075em;
font-size: inherit;
background: currentColor;
}
.hero__content a:hover {
color: #ff5123;
}
.hero__image {
position: relative;
display: inline-block;
width: 0;
height: 0.075em;
margin: 0;
transition: width 0.35s ease;
}
@media only screen and (max-width: 1278.99px) {
.hero__image {
display: none;
}
}
.hero__image img {
position: absolute;
}
.hero__image.is-first-image {
border-bottom: 0.075em solid;
margin: 0 0 0 0.21em;
}
.hero__image.is-first-image img {
bottom: -1px;
}
.hero__image.is-second-image {
display: none;
height: 0.77em;
margin-left: 0.8em;
}
@media only screen and (min-width: 959px) {
.hero__image.is-second-image {
display: inline-block;
}
}
.hero__image.is-second-image img {
height: auto;
top: 0;
}
.hero__image.is-third-image {
display: none;
width: 9.467rem;
height: auto;
margin: 2em auto 2em 20%;
}
@media only screen and (min-width: 1279px) {
.hero__image.is-third-image {
display: block;
width: 7.396vw;
margin: 2.1em 23.8% 2.1em auto;
}
}
.hero__image.is-third-image img {
position: relative;
top: 0;
clip-path: inset(0 0 100% 0);
}
.hero__footer {
display: flex;
justify-content: space-between;
width: calc(100% - 5rem);
margin: 1.5em auto 0;
}
@media only screen and (min-width: 1279px) {
.hero__footer {
width: calc(100% - 3.906vw);
}
}
@media only screen and (max-width: 1278.99px) {
.hero__footer {
margin-top: 21.026vw;
width: calc(100% - var(--site-padding) * 2);
}
}
.hero__button {
overflow: hidden;
position: relative;
display: flex;
flex-flow: row-reverse;
justify-content: center;
align-items: center;
width: -moz-fit-content;
width: fit-content;
height: clamp(4.5rem, 3.516vw, 3.516vw);
font-size: clamp(1.2rem, 0.833vw, 0.833vw);
text-decoration: none;
box-shadow: 0 0 0 1px #3B413A;
border-radius: 100vw;
padding: 0 1.2em 0 0;
z-index: 0;
pointer-events: none;
margin-left: 2.533rem;
}
@media only screen and (min-width: 1279px) {
.hero__button {
margin-left: 1.979vw;
}
}
@media only screen and (max-width: 1278.99px) {
.hero__button {
margin-left: 0;
height: 14.359vw;
padding-right: 6.667vw;
}
}
.hero__button .icon {
width: 2.93em;
height: 2.93em;
color: #3B413A;
background: transparent;
box-shadow: 0 0 0 1px #3B413A;
border-radius: 5rem;
margin: 0.645em 1.25em 0.645em 0.645em;
transition: background 0.35s ease;
z-index: 1;
}
@media only screen and (max-width: 1278.99px) {
.hero__button .icon {
width: 10vw;
height: 10vw;
margin-left: 2.564vw;
}
}
.hero__button .icon svg {
width: 0.625em;
height: 0.625em;
}
@media only screen and (max-width: 1278.99px) {
.hero__button .icon svg {
width: 2.564vw;
height: 2.564vw;
}
}
.hero__button .text {
font-size: inherit;
color: #3B413A;
transition: color 0.35s ease;
z-index: 1;
}
@media only screen and (max-width: 1278.99px) {
.hero__button .text {
font-size: 3.59vw;
}
}
.hero__button::after {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
border-radius: inherit;
background: #C2C2C2;
transform: translateX(-100%);
transition: transform 0.35s ease;
z-index: -1;
}
.hero__button:hover {
box-shadow: 0 0 0 1px #fff;
}
.hero__button:hover .icon {
background: #C2C2C2;
box-shadow: 0 0 0 1px #fff;
color: #fff;
}
.hero__button:hover .text {
color: #fff;
}
.hero__button:hover::after {
transform: translateX(0);
}
.hero__social-links {
display: flex;
align-items: center;
gap: 0.6em;
font-size: 1.6rem;
pointer-events: none;
}
@media only screen and (min-width: 1279px) {
.hero__social-links {
font-size: 0.833vw;
}
}
.hero__social-links a {
font-size: inherit;
color: inherit;
}
.hero__social-links a:hover {
color: #FF5123;
}
.hero__social-links .icon {
width: 1em;
min-width: 1.6rem;
height: 1em;
min-height: 1.6rem;
}
@media only screen and (max-width: 1278.99px) {
.hero__social-links .icon {
width: 1em;
min-width: 2.564vw;
height: 1em;
min-height: 2.564vw;
}
}
@media (min-aspect-ratio: 16/9) {
.hero {
min-height: 100vh;
}
}
.site-content__inner-container > .hero {
width: 100%;
max-width: unset;
}
.site-content__inner-container > .hero:first-child {
padding-top: var(--site-header--height) !important;
margin-top: 0 !important;
}
.admin-bar .hero {
min-height: calc(100vh - 46px);
}
@media screen and (min-width: 783px) {
.admin-bar .hero {
min-height: calc(100vh - 32px);
}
}
.admin-bar .hero__inner-container {
min-height: calc(100vh - var(--site-header--height) - 46px);
}
@media screen and (min-width: 783px) {
.admin-bar .hero__inner-container {
min-height: calc(100vh - var(--site-header--height) - 32px);
}
}
.hero.js-visible .hero__content h1 > span {
animation: animateTextLine 0.75s ease-out 1 both;
}
.hero.js-visible .hero__content p > span {
--animation-delay: 200ms;
overflow: hidden;
position: relative;
display: inline-block;
vertical-align: bottom;
animation-delay: inherit;
}
.hero.js-visible .hero__content p > span:nth-child(2) {
--animation-delay: 400ms;
}
.hero.js-visible .hero__content p > span:nth-child(3) {
--animation-delay: 600ms;
}
.hero.js-visible .hero__content p > span:nth-child(4) {
--animation-delay: 800ms;
}
.hero.js-visible .hero__content p > span:nth-child(5) {
--animation-delay: 1000ms;
}
.hero.js-visible .hero__content p > span > span {
display: inline-block;
animation: animateTextLine 0.75s ease-out 1 both;
animation-delay: var(--animation-delay);
}
.hero.js-visible .hero__content a span {
--animation-delay: 800ms;
display: inline-block;
animation: animateTextLine 0.75s ease-out 1 both;
}
.hero.js-visible .hero__content a span > span {
animation-delay: var(--animation-delay);
}
.hero.js-visible .hero__content a::after {
animation: animateLineWidth 0.75s ease-out 1 both;
animation-delay: 1200ms;
}
.hero.js-visible .hero__image.is-first-image {
width: 7.867rem;
transition-delay: 800ms;
}
@media only screen and (min-width: 1279px) {
.hero.js-visible .hero__image.is-first-image {
width: 6.146vw;
}
}
.hero.js-visible .hero__image.is-first-image img {
animation: animateClipPathToTop 0.6s ease-out 1 both;
animation-delay: 1000ms;
}
.hero.js-visible .hero__image.is-second-image {
width: 19.734rem;
}
@media only screen and (min-width: 1279px) {
.hero.js-visible .hero__image.is-second-image {
width: 15.417vw;
}
}
.hero.js-visible .hero__image.is-second-image img {
animation: animateClipPathToBottom 0.6s ease-out 1 both;
animation-delay: 1400ms;
}
.hero.js-visible .hero__image.is-third-image img {
animation: animateClipPathToBottom 0.6s ease-out 1 both;
animation-delay: 1400ms;
}
.hero.js-visible .hero__button {
animation: animateOpacity 0.5s ease-out 1 both;
animation-delay: 0.35s;
pointer-events: all;
}
.hero.js-visible .hero__social-links {
animation: animateOpacity 0.5s ease-out 1 both;
animation-delay: 0.35s;
pointer-events: all;
}
.hero.js-visible .hero__button {
animation: animateOpacity 1s ease-out 1 both;
animation-delay: 0.75s;
}