From 02f9999621046fb20d9741ea14e68ad81c87938b Mon Sep 17 00:00:00 2001 From: Keith Solomon Date: Sun, 5 Jul 2026 10:36:27 -0500 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9E=20fix:=20Update=20header/hero=20to?= =?UTF-8?q?=20swap=20based=20on=20service=20page=20children?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- header.php | 10 ++- static/dist/theme.css | 99 +++++++++++++++++++++------ styles/base/typography.css | 26 +++---- styles/blocks/page-hero.css | 40 ++++++++--- views/partials/page-hero-services.php | 71 +++++++++++++++++++ views/partials/page-hero.php | 57 +++++---------- 6 files changed, 213 insertions(+), 90 deletions(-) create mode 100644 views/partials/page-hero-services.php diff --git a/header.php b/header.php index d091c0c..0395520 100644 --- a/header.php +++ b/header.php @@ -48,6 +48,10 @@ $showHero = isServicesDescendant() && get_field( 'hero_style' ) === 'default';
- - - + diff --git a/static/dist/theme.css b/static/dist/theme.css index 6b0473e..f783c2a 100644 --- a/static/dist/theme.css +++ b/static/dist/theme.css @@ -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%; } diff --git a/styles/base/typography.css b/styles/base/typography.css index 2e0f9b4..7e8857a 100644 --- a/styles/base/typography.css +++ b/styles/base/typography.css @@ -43,19 +43,19 @@ --text-base: 1rem; --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); } :root { diff --git a/styles/blocks/page-hero.css b/styles/blocks/page-hero.css index 0defbfa..24dcea3 100644 --- a/styles/blocks/page-hero.css +++ b/styles/blocks/page-hero.css @@ -1,7 +1,25 @@ -/* Page Hero partial styles (page-hero.php) - * Scoped to .page-hero to avoid affecting the homepage-hero block. */ +.page-hero__heading { + @apply text-cwc-blue-01; -.page-hero { + 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 partial styles (page-hero-services.php) + * Scoped to .page-hero-services to avoid affecting the homepage-hero block. */ +.page-hero-services { background: linear-gradient(73.83deg, #8FC9E6 -8.7%, #006196 21.51%, #032F46 60.7%); isolation: isolate; margin-bottom: 10rem; @@ -9,13 +27,13 @@ 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; @@ -28,7 +46,7 @@ } } -.page-hero__intro { +.page-hero-services__intro { color: #fff; font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 300; @@ -38,7 +56,7 @@ text-align: left; } -.page-hero__media { +.page-hero-services__media { bottom: -5%; height: auto; max-height: none; @@ -52,7 +70,7 @@ max-width: clamp(20rem, 30vw, 28rem); } -.page-hero__vector { +.page-hero-services__vector { bottom: clamp(1.5rem, 4vw, 3rem); height: auto; left: 0; @@ -63,18 +81,18 @@ } @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%; } diff --git a/views/partials/page-hero-services.php b/views/partials/page-hero-services.php new file mode 100644 index 0000000..a098543 --- /dev/null +++ b/views/partials/page-hero-services.php @@ -0,0 +1,71 @@ + + +
+
+ + +

+ . +

+ + +
+ +
+ +
+ + + + + + + + +
diff --git a/views/partials/page-hero.php b/views/partials/page-hero.php index fd77004..17197da 100644 --- a/views/partials/page-hero.php +++ b/views/partials/page-hero.php @@ -8,64 +8,39 @@ namespace CWC; // Set variables -$bgColor = get_field( 'background_color' ); -$isDark = get_field( 'is_dark' ); -$heading = get_field( 'heading' ); -$heroImage = get_field( 'hero_image' ); -$heroVector = get_field( 'hero_vector' ); -$intro = get_field( 'intro' ); +$bgColor = get_field( 'background_color' ); +$isDark = get_field( 'is_dark' ); +$heading = get_field( 'heading' ); +$intro = get_field( 'intro' ); + +if ( is_home() ) { + $intro = get_field( 'intro', get_option( 'page_for_posts' ) ); +} // Fallback for heading if ( ! $heading ) { $heading = getTheTitle(); } -// Additional logic for dark mode (if needed) -if ( is_home() || is_single() || is_archive() || is_search() || is_404() ) { - $isDark = true; -} - -// The wrapper color is the gradient from .page-hero in page-hero.css. The -// editor's background_color ACF field overrides the gradient with a solid color. $wrapperStyle = $bgColor ? 'background-color: ' . esc_attr( $bgColor ) . ';' : ''; ?> -
-
+
+
-

- . -

+ +

+ . +

+ -
+
- - - - - - - -