- contact-info.php was calling esc_attr() on the output of
blockWrapperAttributes(), which returns a full attribute string.
esc_attr() turned the wrapping quotes into " so the class
attribute rendered literally as class="contact-info ...".
Switched to wp_kses_post() to match the pattern used by every
other block template in the project.
- contact-info.css: .gfield_required used --color-cwc-orange-01
(#e15747, 3.71:1 on white) which fails WCAG 2 AA. Swapped to the
project's --color-secondary-accessible token (#c43c2b) so the
required marker is brand-aligned and meets the 4.5:1 minimum.
- Regenerated static/dist/theme.css to match.
- styles/blocks/page-hero.css:
- .page-hero__vector: width is now 100% (was clamp(28rem, 60vw, 56rem))
so the orange linework spans the full width of the hero. The SVG
scales proportionally (1920x489 viewBox).
- .page-hero__media: added top: clamp(2rem, 4vw, 4rem) so the image
has visible top padding inside the hero (in addition to overflowing
the bottom). Reduced right offset to clamp(0.5rem, 2vw, 2rem) so
the image sits closer to the right edge. Width is 'auto' with
max-width: clamp(20rem, 30vw, 28rem) so the image's natural aspect
ratio (490x613 portrait) is preserved.
- views/partials/page-hero.php: .page-hero__content is now 'container
mx-auto px-0!' so the breadcrumbs, H1, and intro sit flush left at
x=0, matching the logo's left edge (which is also at x=0 thanks to
the header's px-0! override on its container).
Co-Authored-By: Claude <noreply@anthropic.com>
- views/partials/page-hero.php: removed the page-intro partial call. The
intro is now rendered inline as a single .page-hero__intro div
containing the editor-supplied intro text only (no hard-coded
heading). The H1 is rendered with a dedicated .page-hero__heading
class for typography control. Breadcrumbs + H1 + intro are in a
single .page-hero__content container.
- views/partials/page-intro.php: deleted (no longer used).
- styles/blocks/page-hero.css: rewritten layout. The hero has a min-height
of clamp(31rem, 38vw, 36rem). .page-hero__media is a foreground
absolutely-positioned img on the right (no mask, no cover, no
object-fit), with bottom: -10% so the image's bottom hangs over
the bottom edge of the hero. The vector is positioned at
bottom: clamp(1.5rem, 4vw, 3rem) with some spacing from the bottom
edge, full-width on the left. Both elements stay above the content
layer (z-index 10) and below the breadcrumb/title text. The H1 uses
Quincy serif at clamp(2.5rem, 6vw, 4.5rem). The intro text is
capped at 36rem to sit alongside the H1 without spanning the full
hero width.
- tests/inner-page.spec.js: removed the now-obsolete
.page-hero__intro-heading / .page-hero__intro-text assertions (the
intro is a single text block now).
Co-Authored-By: Claude <noreply@anthropic.com>
- Goal: hero is now a blue-to-teal gradient (not a flat dark color) and the
intro block lives inside the hero composition (not as a separate page
section).
- Architecture: reduced from 3-part (hero / intro / body) to 2-part
(hero / body) since the intro is now embedded in the hero.
- Hero Partial: dropped the bg-dark utility (gradient is set in CSS), the
hero image is anchored to the right with a left-to-right fade, and the
vector is full-width anchored to the bottom at z-index 2.
- Hero Partial CSS: the file is at styles/blocks/page-hero.css (not
views/partials/page-hero.css). Updated the rules to match the new
gradient + image right-side + vector bottom-center + intro grid layout.
- Intro Partial: rewritten as a fragment for embedding inside the hero
(two-column heading + body grid) rather than a centered standalone
section. Partial is loaded by page-hero.php, not page.php.
- page.php Wiring: no longer loads the page-intro partial directly; the
partial is loaded by page-hero.php.
- Error Handling, Verification, and Acceptance Criteria: updated to
match the new structure (no empty .page-intro wrapper check; intro is
a descendant of the hero; gradient + image-right + vector-bottom-center
expectations).
Co-Authored-By: Claude <noreply@anthropic.com>
- 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>
Defines the inner page layout: dark hero with background image and decorative
vector (driven by two new fields on the existing Page Heading ACF group), a
centered narrow intro section underneath (driven by the existing Intro field),
and the standard the_content body.
The mockup's bottom dark block is the existing site footer, not a new CTA. No
new ACF blocks are introduced; the layout reuses the existing Page Heading meta
box and the page-hero partial that header.php already loads.
Co-Authored-By: Claude <noreply@anthropic.com>
Per the user's request:
- Page scroll is locked when the mobile menu is open: add an
:has() selector that applies overflow: hidden + touch-action: none to
the <body> when the .nav-main__toggle has aria-expanded=true. Verified
with mouse wheel and PageDown: window.scrollY stays at 0.
- Menu scrolls internally when its content overflows: switch
.menu-vdi's 'overflow-hidden' to 'overflow-y: auto' with
'overscroll-behavior: contain' so scroll gestures feed the menu
rather than chain-scroll to the body behind it.
- Cap the menu at viewport height instead of growing: change
'min-height: calc(100vh - var(--hgtHeader))' to
'max-height: calc(100vh - var(--hgtHeader))' so the menu fills the
visible space below the header and any overflowing items become
scrollable inside the menu.
Per the user's feedback, fix the issues still visible in the menu:
1. Hero rendered over the menu: bumped menu z-index from 10 to 100 so it
always sits above the hero's stacked elements.
2. List markers on items: added explicit list-style: none / padding: 0 on
the menu <ul> and items to override the base typography rule that sets
list-style-type: disc and padding: 0 1rem on every <ul>.
3. Blue links: the base typography rule 'a, .link { color: var(--color-bodylinks); }'
has specificity 0,1,1 and was beating the menu text-white rule. Override
with color: var(--color-white) !important on menu links and child links
inside the mobile media query.
4. Full borders with rounded corners on child items: change child item
border from '2px solid var(--color-secondary); border-radius: 0.5rem'
to 'border-bottom: 2px solid var(--color-secondary); border-radius: 0'
so each child gets only a bottom border (matching the user's spec).
5. Menu items now use plain CSS (color/display/padding/font-weight) instead
of @apply text-white/no-underline to give them explicit override
specificity against the base styles.
6. Toggle button: changed the SVG width from 2rem to 1.5rem in
styles/components/site-header.css so the hamburger and X icons render
at a square 1.5rem x 1.5rem aspect ratio inside the (intentionally)
rectangular orange button.
Nav-main template unchanged from the previous commit (Contact button +
social icons already in place). Header test still passes - the button box
itself (72x45) is unchanged, only the icon aspect changed.
Per the user's spec, the mobile menu is:
- Dark navy background, white links, 95% viewport width
- Parent items (those with child links) get an orange chevron
- Child items get an orange border; nothing else gets any border
- Bottom of menu has a Contact link styled as a button and social icons
Changes:
1. Menu CSS (styles/navigation/nav-mobile-sliding.css):
- Switch the menu background from white to bg-cwc-blue-02 (dark navy)
- Switch menu item text from black to white
- Hide the existing .menu-vdi__submenu and show the children inline under their
parent with a 2px orange border, rounded corners, and white text
- Style the existing chevron SVG inside the parent <button> with the orange
secondary color so it's visible against the navy background
- Add a .menu-vdi__footer block (Contact button + social icons) anchored to
the bottom of the menu panel, shown only when the toggle is aria-expanded
- Hide .menu-vdi__footer entirely at desktop so it doesn't leak into the
page DOM and trigger accessibility warnings
2. Menu template (views/components/nav-main.php):
- Append a .menu-vdi__footer div after the menu items containing a Contact
link to home_url('/contact/') and the existing social-media partial
- The footer renders inside <nav> but is positioned via fixed CSS to align
with the menu panel
Header/toggle button unchanged - the orange/coral rounded button design from
the original mobile-fidelity plan was already correct and is left alone.
Move the mobile hero <img> out of the .vector container (which is intentionally wider than the viewport to bleed the desktop SVG) so the mobile img anchors to .heroVector's full-width edges. Set width: 100vw, left: 0, bottom: 6.25rem so the 402-wide mobile SVG distributes the linework across the full hero at the 402 reference composition.
Capture the per-block approach, what changed in each PHP/CSS file, and the test/geometry updates needed for the new mobile-*-vector.svg files. Mirror the structure used by the prior 2026-06-27 mobile-homepage-fidelity spec.
The mobile contact linework is loading=lazy and only resolved when scrolled into view. Wait for it to finish loading before the geometry assertions read its bounding rect, matching the pattern already used for the Our Work desktop vector.
Replace the clip-path composition of the desktop SVG with a real <img> that references the artist-supplied mobile-work-vector.svg. Drop the CSS-layer trick and the ::before/::after background pieces; the new mobile SVG already covers the composition. Update the linework composition test to assert against the new <img>.
Render mobile-contact-vector.svg alongside the existing contact linework. CSS hides the desktop SVG and shows the mobile <img> at <=767px so the new 342x187 composition fills the card width. Update the geometry test to assert the new linework ratio (342/187) and the snapshot.
Add hero-vector-mobile.php that renders mobile-hero-vector.svg alongside the existing desktop hero partial. The homepage-hero.css hides the desktop SVG and shows the mobile <img> below 768px while preserving every other mobile rule.
Swap pullquote-mobile-linework.png for the artist-supplied mobile-pullquote-vector.svg at the existing pull-quote__vector--mobile slot. Update the visual snapshots to match the new artwork.
Keith Solomon
