🐞 fix: Update header/hero to swap based on service page children
This commit is contained in:
Keith Solomon
Vendored
+77
-22
@@ -101,19 +101,19 @@
|
||||
--font-quincy: "quincy-cf", serif;
|
||||
--line-height: 1.6;
|
||||
--text-12px: round(down, clamp(0.625rem, 0.5962rem + 0.1282vw, 0.75rem), 1px);
|
||||
--text-14px: round(up, clamp(0.75rem, 0.7212rem + 0.1282vw, 0.875rem), 2px);
|
||||
--text-16px: round(up, clamp(0.875rem, 0.8462rem + 0.1282vw, 1rem), 2px);
|
||||
--text-18px: round(up, clamp(1rem, 0.9712rem + 0.1282vw, 1.125rem), 2px);
|
||||
--text-20px: round(up, clamp(1.125rem, 1.0962rem + 0.1282vw, 1.25rem), 2px);
|
||||
--text-22px: round(up, clamp(1.25rem, 1.2212rem + 0.1282vw, 1.375rem), 2px);
|
||||
--text-24px: round(up, clamp(1.375rem, 1.3462rem + 0.1282vw, 1.5rem), 2px);
|
||||
--text-28px: round(up, clamp(1.625rem, 1.5962rem + 0.1282vw, 1.75rem), 2px);
|
||||
--text-30px: round(up, clamp(1.75rem, 1.7212rem + 0.1282vw, 1.875rem), 2px);
|
||||
--text-32px: round(up, clamp(1.875rem, 1.8462rem + 0.1282vw, 2rem), 2px);
|
||||
--text-34px: round(up, clamp(2rem, 1.9712rem + 0.1282vw, 2.125rem), 2px);
|
||||
--text-40px: round(up, clamp(2.25rem, 2.1923rem + 0.2564vw, 2.5rem), 2px);
|
||||
--text-54px: round(up, clamp(2.375rem, 2.1442rem + 1.0256vw, 3.375rem), 2px);
|
||||
--text-64px: round(up, clamp(3rem, 2.7692rem + 1.0256vw, 4rem), 2px);
|
||||
--text-14px: round(up, clamp(0.75rem, 0.7212rem + 0.1282vw, 0.875rem), 1px);
|
||||
--text-16px: round(up, clamp(0.875rem, 0.8462rem + 0.1282vw, 1rem), 1px);
|
||||
--text-18px: round(up, clamp(1rem, 0.9712rem + 0.1282vw, 1.125rem), 1px);
|
||||
--text-20px: round(up, clamp(1.125rem, 1.0962rem + 0.1282vw, 1.25rem), 1px);
|
||||
--text-22px: round(up, clamp(1.25rem, 1.2212rem + 0.1282vw, 1.375rem), 1px);
|
||||
--text-24px: round(up, clamp(1.375rem, 1.3462rem + 0.1282vw, 1.5rem), 1px);
|
||||
--text-28px: round(up, clamp(1.625rem, 1.5962rem + 0.1282vw, 1.75rem), 1px);
|
||||
--text-30px: round(up, clamp(1.75rem, 1.7212rem + 0.1282vw, 1.875rem), 1px);
|
||||
--text-32px: round(up, clamp(1.875rem, 1.8462rem + 0.1282vw, 2rem), 1px);
|
||||
--text-34px: round(up, clamp(2rem, 1.9712rem + 0.1282vw, 2.125rem), 1px);
|
||||
--text-40px: round(up, clamp(2.25rem, 2.1923rem + 0.2564vw, 2.5rem), 1px);
|
||||
--text-54px: round(up, clamp(2.375rem, 2.1442rem + 1.0256vw, 3.375rem), 1px);
|
||||
--text-64px: round(up, clamp(3rem, 2.7692rem + 1.0256vw, 4rem), 1px);
|
||||
--twcb-scrollbar-width: 0px;
|
||||
--button-primary-bg: var(--background-image-button-gradient);
|
||||
--button-primary-color: var(--color-white);
|
||||
@@ -291,6 +291,9 @@
|
||||
}
|
||||
}
|
||||
@layer utilities {
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
@@ -580,6 +583,9 @@
|
||||
.min-w-32 {
|
||||
min-width: calc(var(--spacing) * 32);
|
||||
}
|
||||
.flex-0 {
|
||||
flex: 0;
|
||||
}
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
@@ -685,6 +691,9 @@
|
||||
.gap-8 {
|
||||
gap: calc(var(--spacing) * 8);
|
||||
}
|
||||
.gap-20 {
|
||||
gap: calc(var(--spacing) * 20);
|
||||
}
|
||||
.gap-24 {
|
||||
gap: calc(var(--spacing) * 24);
|
||||
}
|
||||
@@ -856,6 +865,9 @@
|
||||
.py-12 {
|
||||
padding-block: calc(var(--spacing) * 12);
|
||||
}
|
||||
.pt-3 {
|
||||
padding-top: calc(var(--spacing) * 3);
|
||||
}
|
||||
.pt-5 {
|
||||
padding-top: calc(var(--spacing) * 5);
|
||||
}
|
||||
@@ -905,6 +917,10 @@
|
||||
font-size: var(--text-4xl);
|
||||
line-height: var(--tw-leading, var(--text-4xl--line-height));
|
||||
}
|
||||
.text-18px\/6 {
|
||||
font-size: var(--text-18px);
|
||||
line-height: calc(var(--spacing) * 6);
|
||||
}
|
||||
.text-base {
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--tw-leading, var(--text-base--line-height));
|
||||
@@ -1065,6 +1081,10 @@
|
||||
--tw-duration: 300ms;
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
.duration-500 {
|
||||
--tw-duration: 500ms;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
.ease-in-out {
|
||||
--tw-ease: var(--ease-in-out);
|
||||
transition-timing-function: var(--ease-in-out);
|
||||
@@ -1367,6 +1387,16 @@
|
||||
margin-block: calc(var(--spacing) * 0);
|
||||
}
|
||||
}
|
||||
.lg\:mt-30 {
|
||||
@media (width >= 64rem) {
|
||||
margin-top: calc(var(--spacing) * 30);
|
||||
}
|
||||
}
|
||||
.lg\:mb-4 {
|
||||
@media (width >= 64rem) {
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
}
|
||||
}
|
||||
.lg\:block {
|
||||
@media (width >= 64rem) {
|
||||
display: block;
|
||||
@@ -1437,6 +1467,16 @@
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
.lg\:px-0 {
|
||||
@media (width >= 64rem) {
|
||||
padding-inline: calc(var(--spacing) * 0);
|
||||
}
|
||||
}
|
||||
.lg\:px-0\! {
|
||||
@media (width >= 64rem) {
|
||||
padding-inline: calc(var(--spacing) * 0) !important;
|
||||
}
|
||||
}
|
||||
.lg\:px-8 {
|
||||
@media (width >= 64rem) {
|
||||
padding-inline: calc(var(--spacing) * 8);
|
||||
@@ -5054,19 +5094,34 @@ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], i
|
||||
mask-composite: intersect;
|
||||
-webkit-mask-composite: intersect;
|
||||
}
|
||||
.page-hero {
|
||||
.page-hero__heading {
|
||||
color: var(--color-cwc-blue-01);
|
||||
line-height: 1;
|
||||
margin: 0 0 1.5rem;
|
||||
text-align: left;
|
||||
em {
|
||||
color: var(--color-secondary);
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
.page-hero__intro {
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
text-align: left;
|
||||
}
|
||||
.page-hero-services {
|
||||
background: linear-gradient(73.83deg, #8FC9E6 -8.7%, #006196 21.51%, #032F46 60.7%);
|
||||
isolation: isolate;
|
||||
margin-bottom: 10rem;
|
||||
min-height: clamp(31rem, 38vw, 36rem);
|
||||
position: relative;
|
||||
}
|
||||
.page-hero__content {
|
||||
.page-hero-services__content {
|
||||
padding-block: clamp(2rem, 6vw, 4rem);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
.page-hero__heading {
|
||||
.page-hero-services__heading {
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
margin: 3rem 0 1.5rem;
|
||||
@@ -5077,7 +5132,7 @@ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], i
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
.page-hero__intro {
|
||||
.page-hero-services__intro {
|
||||
color: #fff;
|
||||
font-size: clamp(1rem, 1.5vw, 1.25rem);
|
||||
font-weight: 300;
|
||||
@@ -5086,7 +5141,7 @@ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], i
|
||||
opacity: 0.95;
|
||||
text-align: left;
|
||||
}
|
||||
.page-hero__media {
|
||||
.page-hero-services__media {
|
||||
bottom: -5%;
|
||||
height: auto;
|
||||
max-height: none;
|
||||
@@ -5098,7 +5153,7 @@ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], i
|
||||
z-index: 1;
|
||||
max-width: clamp(20rem, 30vw, 28rem);
|
||||
}
|
||||
.page-hero__vector {
|
||||
.page-hero-services__vector {
|
||||
bottom: clamp(1.5rem, 4vw, 3rem);
|
||||
height: auto;
|
||||
left: 0;
|
||||
@@ -5108,16 +5163,16 @@ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], i
|
||||
z-index: 5;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.page-hero {
|
||||
.page-hero-services {
|
||||
min-height: clamp(28rem, 130vw, 40rem);
|
||||
}
|
||||
.page-hero__media {
|
||||
.page-hero-services__media {
|
||||
bottom: -8%;
|
||||
right: 0;
|
||||
top: auto;
|
||||
max-width: 60vw;
|
||||
}
|
||||
.page-hero__vector {
|
||||
.page-hero-services__vector {
|
||||
bottom: clamp(1rem, 3vw, 2rem);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user