🐞 fix: Update header/hero to swap based on service page children

header.php

@@ -48,6 +48,10 @@ $showHero = isServicesDescendant() && get_field( 'hero_style' ) === 'default';
 	</header>
 
 	<main id="maincontent" class="overflow-hidden min-h-[78dvh]">
-		<?php if ( $showHero ) : ?>
+		<?php
-			<?php get_template_part( 'views/partials/page-hero' ); ?>
+        if ( $showHero ) :
-		<?php endif; ?>
+            get_template_part( 'views/partials/page-hero-services' );
+        else :
+            get_template_part( 'views/partials/page-hero' );
+        endif;
+        ?>

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-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), 2px);
+    --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), 2px);
+    --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), 2px);
+    --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), 2px);
+    --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), 2px);
+    --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), 2px);
+    --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), 2px);
+    --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), 2px);
+    --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), 2px);
+    --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), 2px);
+    --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), 2px);
+    --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), 2px);
+    --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%;
   }

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-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), 2px);
+    --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), 2px);
+    --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), 2px);
+    --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), 2px);
+    --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), 2px);
+    --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), 2px);
+    --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), 2px);
+    --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), 2px);
+    --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), 2px);
+    --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), 2px);
+    --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), 2px);
+    --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), 2px);
+    --text-64px: round(up, clamp(3rem, 2.7692rem + 1.0256vw, 4rem), 1px);
 }
 
 :root {

styles/blocks/page-hero.css

@@ -1,7 +1,25 @@
-/* Page Hero partial styles (page-hero.php)
+.page-hero__heading {
- * Scoped to .page-hero to avoid affecting the homepage-hero block. */
+    @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%;
     }

views/partials/page-hero-services.php

@@ -0,0 +1,71 @@
+<?php
+/**
+ * Page Hero Partial
+ *
+ * @package CWC
+ */
+
+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' );
+
+// 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 ) . ';' : '';
+?>
+
+<div class="page-hero-services text-light <?php echo $isDark ? 'dark' : ''; ?>" style="<?php echo esc_attr( $wrapperStyle ); ?>">
+    <div class="page-hero-services__content container mx-auto px-0!">
+        <!-- <div id="breadcrumbs">
+            <?php Breadcrumbs::render(); ?>
+        </div> -->
+
+        <h1 class="page-hero-services__heading">
+            <?php echo wp_kses_post( $heading ); ?><em>.</em>
+        </h1>
+
+        <?php if ( $intro ) : ?>
+            <div class="page-hero-services__intro">
+                <?php echo wp_kses_post( $intro ); ?>
+            </div>
+        <?php endif; ?>
+    </div>
+
+    <?php if ( $heroImage ) : ?>
+        <img
+            class="page-hero-services__media"
+            src="<?php echo esc_url( $heroImage['url'] ); ?>"
+            alt=""
+            loading="lazy"
+            aria-hidden="true"
+            role="presentation"
+        />
+    <?php endif; ?>
+
+    <?php if ( $heroVector ) : ?>
+        <img
+            class="page-hero-services__vector"
+            src="<?php echo esc_url( $heroVector['url'] ); ?>"
+            alt=""
+            loading="lazy"
+            aria-hidden="true"
+            role="presentation"
+        />
+    <?php endif; ?>
+</div>

views/partials/page-hero.php

@@ -11,61 +11,36 @@ namespace CWC;
 $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' );
 
+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 ) . ';' : '';
 ?>
 
-<div class="page-hero text-light <?php echo $isDark ? 'dark' : ''; ?>" style="<?php echo esc_attr( $wrapperStyle ); ?>">
+<div class="page-hero <?php echo $isDark ? 'dark' : ''; ?> lg:px-0 lg:mt-30 lg:mb-4" style="<?php echo esc_attr( $wrapperStyle ); ?>">
-    <div class="page-hero__content container mx-auto px-0!">
+    <div class="page-hero__content container flex flex-col lg:flex-row justify-between gap-20 mx-auto px-0!">
         <!-- <div id="breadcrumbs">
             <?php Breadcrumbs::render(); ?>
         </div> -->
 
-        <h1 class="page-hero__heading">
+        <?php if ( $heading ) : ?>
+            <h1 class="page-hero__heading flex-0">
                 <?php echo wp_kses_post( $heading ); ?><em>.</em>
             </h1>
+        <?php endif; ?>
 
         <?php if ( $intro ) : ?>
-            <div class="page-hero__intro">
+            <div class="page-hero__intro grow text-18px/6 pt-3">
                 <?php echo wp_kses_post( $intro ); ?>
             </div>
         <?php endif; ?>
     </div>
-
-    <?php if ( $heroImage ) : ?>
-        <img
-            class="page-hero__media"
-            src="<?php echo esc_url( $heroImage['url'] ); ?>"
-            alt=""
-            loading="lazy"
-            aria-hidden="true"
-            role="presentation"
-        />
-    <?php endif; ?>
-
-    <?php if ( $heroVector ) : ?>
-        <img
-            class="page-hero__vector"
-            src="<?php echo esc_url( $heroVector['url'] ); ?>"
-            alt=""
-            loading="lazy"
-            aria-hidden="true"
-            role="presentation"
-        />
-    <?php endif; ?>
 </div>