Refine hero: gradient backdrop, intro inside hero, image on right, vector visible

- styles/blocks/page-hero.css: add blue-to-teal gradient to .page-hero (matches
  homepage-hero). Fix image mask direction (right-to-left fade) so the image
  is visible on the right and fades to transparent on the left. Reposition
  the vector to span the full bottom of the hero at z-index 2 (above the
  media layer, below content). Add .page-hero__intro and .page-hero__intro-inner
  grid rules for the new two-column heading + body block.
- views/partials/page-hero.php: drop bg-dark / bg-cover / bg-no-repeat
  utilities (the gradient comes from CSS now). Simplify the heading render.
  Load the page-intro partial inside .page-hero__content, below the heading.
- views/partials/page-intro.php: rewrite as a fragment for embedding inside
  the hero - a two-column heading (hard-coded 'Our Work') + body grid.
  Returns early when the intro field is empty.
- page.php: remove the page-intro partial call (it's now loaded from
  page-hero.php).
- tests/inner-page.spec.js: switch the selector from .page-intro to
  .page-hero__intro. Update the order assertions to verify the intro is
  a descendant of the hero (not a sibling below it).

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Keith Solomon
2026-07-01 15:25:39 -05:00
co-authored by Claude
parent 342ae015c7
commit e221f62ef7
6 changed files with 2383 additions and 3369 deletions
+9 -6
View File
@@ -2,8 +2,8 @@
/**
* Page Intro Partial
*
* Renders the centered narrow intro section beneath the page hero.
* Loaded by page.php when the `intro` ACF field is non-empty.
* Renders the intro heading + body inside the page-hero.
* Loaded by page-hero.php when the `intro` ACF field is non-empty.
*
* @package CWC
*/
@@ -17,10 +17,13 @@ if ( ! $intro ) {
}
?>
<section class="page-intro py-12 lg:py-20 text-center" aria-label="<?php echo esc_attr__( 'Page introduction' ); ?>">
<div class="mx-auto max-w-3xl content-wrapper">
<p class="page-intro__text text-lg lg:text-xl leading-relaxed text-dark">
<div class="page-hero__intro text-light">
<div class="page-hero__intro-inner">
<h2 class="page-hero__intro-heading text-2xl lg:text-3xl font-quincy font-normal leading-tight">
<?php echo esc_html__( 'Our Work', 'cwc' ); ?>
</h2>
<p class="page-hero__intro-text text-base lg:text-lg leading-relaxed text-light/90">
<?php echo wp_kses_post( $intro ); ?>
</p>
</div>
</section>
</div>