Keith Solomon
115 lines
2.6 KiB
CSS
115 lines
2.6 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-64px);
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
|
|
strong {
|
|
font-size: var(--text-65px);
|
|
font-weight: 700;
|
|
}
|
|
|
|
em { color: var(--color-cwc-orange-01); }
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.homepage-hero {
|
|
--hgtHero: 20.75rem;
|
|
|
|
min-height: var(--hgtHero);
|
|
}
|
|
|
|
.homepage-hero .content-wrapper {
|
|
padding-inline: 1rem;
|
|
}
|
|
|
|
.homepage-hero .content-wrapper > div {
|
|
max-width: 20rem;
|
|
padding-top: 2.25rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.homepage-hero .intro h1 {
|
|
font-size: clamp(1.8rem, 8vw, 2.2rem);
|
|
letter-spacing: 0;
|
|
line-height: 0.98;
|
|
margin-bottom: 0.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: 16rem;
|
|
}
|
|
|
|
.homepage-hero .reset {
|
|
gap: 0.7rem;
|
|
justify-content: flex-start;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.homepage-hero .button {
|
|
font-size: var(--text-14px);
|
|
min-height: 2.25rem;
|
|
min-width: 6.35rem;
|
|
padding: 0.5rem 0.8rem;
|
|
}
|
|
|
|
.homepage-hero .heroVector .vector {
|
|
bottom: 0.15rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 170%;
|
|
}
|
|
|
|
.homepage-hero .heroMedia img,
|
|
.homepage-hero .heroMedia video {
|
|
object-position: center top;
|
|
}
|
|
}
|