Merge branch 'main' of ssh://git.keithsolomon.net:222/Solo-Web-Works/CWC

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;
+        ?>

index.php

@@ -10,7 +10,7 @@ namespace CWC;
 
 // Determine classes based on sidebar presence
 if ( hasSidebar() ) {
-	$classes  = 'container grid grid-cols-1 lg:grid-cols-4 gap-8 xl:gap-16 my-section mx-auto';
+	$classes  = 'container grid grid-cols-1 lg:grid-cols-4 gap-8 xl:gap-16 my-section mx-auto lg:px-0!';
 	$clsEntry = 'lg:col-span-3';
 } else {
 	$classes = 'container my-section lg:my-0 mx-auto';
@@ -23,8 +23,6 @@ get_header();
 	<?php if ( have_posts() ) : ?>
 		<div class="blog-posts <?php echo esc_attr( $clsEntry ); ?>">
 			<div class="post-list">
-				<h1 class="post-list__h1">Blog</h1>
-
 				<div class="post-list__posts grid grid-cols-[repeat(auto-fit,minmax(20rem,1fr))] gap-6">
 					<?php
 					while ( have_posts() ) :

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>