145 lines
3.5 KiB
CSS
145 lines
3.5 KiB
CSS
.homepage-hero {
|
|
--hgtHero: calc(100vh - (var(--hgtHeader) + 2rem));
|
|
|
|
min-height: var(--hgtHero);
|
|
|
|
.heroBG /* Rectangle 2 */{
|
|
background: linear-gradient(83.68deg, #032F46 3.13%, #006196 45.91%, #8FC9E6 96.27%);
|
|
mix-blend-mode: normal;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.bgVector /* Rectangle 83 */ {
|
|
background: linear-gradient(73.8deg, #032F46 12.47%, rgba(0, 97, 150, 0.4) 47.08%, rgba(143, 201, 230, 0.1) 73.75%);
|
|
background-blend-mode: multiply;
|
|
height: 100%;
|
|
mix-blend-mode: multiply;
|
|
opacity: 0.7;
|
|
width: 100%;
|
|
}
|
|
|
|
.topGradient /* Rectangle 88 */ {
|
|
background: linear-gradient(347.21deg, #032F46 18.31%, rgba(0, 97, 150, 0.4) 56.56%, rgba(143, 201, 230, 0.1) 81.82%);
|
|
background-blend-mode: multiply;
|
|
mix-blend-mode: normal;
|
|
}
|
|
|
|
.heroVector {
|
|
background-blend-mode: normal !important;
|
|
height: var(--hgtHero);
|
|
mix-blend-mode: normal !important;
|
|
opacity: 1 !important;
|
|
width: 100%;
|
|
|
|
svg {
|
|
}
|
|
}
|
|
|
|
.intro {
|
|
h1 {
|
|
font-size: var(--text-54px);
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
|
|
strong {
|
|
font-size: var(--text-54px);
|
|
font-weight: 700;
|
|
}
|
|
|
|
em { color: var(--color-cwc-orange-01); }
|
|
}
|
|
}
|
|
}
|
|
|
|
.homepage-hero__location {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.homepage-hero {
|
|
--hgtHero: clamp(37.5rem, 187vw, 47rem);
|
|
|
|
min-height: var(--hgtHero);
|
|
}
|
|
|
|
.homepage-hero .content-wrapper {
|
|
padding-inline: clamp(1.25rem, 8vw, 2rem) !important;
|
|
}
|
|
|
|
.homepage-hero .content-wrapper > div {
|
|
margin-left: clamp(1.25rem, 8vw, 2rem);
|
|
max-width: 21.25rem;
|
|
padding-top: clamp(3rem, 14vw, 3.75rem);
|
|
text-align: left;
|
|
}
|
|
|
|
.homepage-hero .intro h1 {
|
|
font-size: clamp(1.75rem, 8vw, 2rem);
|
|
letter-spacing: 0;
|
|
line-height: 1.24;
|
|
margin-bottom: 1.75rem;
|
|
}
|
|
|
|
.homepage-hero .intro h1 strong {
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
}
|
|
|
|
.homepage-hero .intro p {
|
|
font-size: var(--text-14px);
|
|
line-height: 1.3;
|
|
margin: 0;
|
|
max-width: 18rem;
|
|
}
|
|
|
|
.homepage-hero .reset {
|
|
flex-wrap: nowrap;
|
|
gap: clamp(0.75rem, 5.5vw, 1.4rem);
|
|
justify-content: flex-start;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.homepage-hero .button {
|
|
font-size: var(--text-18px);
|
|
min-height: 2.75rem;
|
|
min-width: clamp(7.5rem, 36.82vw, 9.25rem);
|
|
padding: 0.65rem 1rem;
|
|
}
|
|
|
|
.homepage-hero .reset x-button:nth-child(2) .button {
|
|
min-width: clamp(7.75rem, 38.8vw, 9.75rem);
|
|
}
|
|
|
|
.homepage-hero .heroVector .vector {
|
|
bottom: 6.25rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: clamp(43rem, 190vw, 48rem);
|
|
}
|
|
|
|
.homepage-hero .heroMedia img,
|
|
.homepage-hero .heroMedia video {
|
|
object-position: 58% center;
|
|
}
|
|
|
|
.homepage-hero .homepage-hero__location {
|
|
align-items: center;
|
|
bottom: 5.5rem;
|
|
color: var(--color-cwc-blue-03);
|
|
display: flex;
|
|
font-size: var(--text-14px);
|
|
gap: 0.5rem;
|
|
left: 2rem;
|
|
position: absolute;
|
|
z-index: 30;
|
|
}
|
|
|
|
.homepage-hero .homepage-hero__location svg {
|
|
fill: none;
|
|
height: 1.25rem;
|
|
stroke: currentColor;
|
|
stroke-width: 1.75;
|
|
width: 1.25rem;
|
|
}
|
|
}
|