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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user