Rebuild mega menus, header, and footer to match Figma (LS-1618)

[brandonmarshal]

Summary

• Added 6 mega menu template parts for Ollie Menu Designer's Dropdown Menu block (Default item styling for Work/Solutions/Pricing/Insights/About, plus Service item styling with 6 lifecycle-phase columns), registered in theme.json.
• Rebuilt the site header (patterns/header.php) and footer (patterns/footer.php) to match the Figma design.
• Fixed the header search field and light/dark toggle button rendering incorrectly in the Site Editor — the toggle had no base button shell, and animations.css wasn't reaching the Site Editor's iframed canvas (add_editor_style() now covers it).
• Fixed the footer nav link grid so its two rows use a consistent auto-equal column pattern instead of mismatched fixed/auto widths, so columns line up like a proper grid.
• Fixed the footer's phase-colour nav dots and social icons rendering black in both light and dark mode (missing fill="currentColor" on their SVGs).
• Added a site-logo--dark / site-logo--light CSS swap convention for the header logo, matching the existing sun/moon icon-swap pattern (applied per-environment in the Site Editor, since it depends on each site's own Media Library).

Closes LS-1618

Test plan

Static checks:

• npm run patterns:escape — no escaping issues
• npm run security:scan — passed
• npm run theme:validate — no new failures introduced
• npm run schema:validate — no new failures introduced
• npm run build:css compiles cleanly, new CSS present in compiled output

Verified live on a local WordPress instance:

• Header search field collapses by default and toggle button renders correctly in the Site Editor
• Footer nav columns align consistently in both rows
• Footer phase dots and social icons render the correct colour in both light and dark mode

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features
  • Added mega menus for Work, Solutions, Pricing, Insights, About, and Services.
  • Introduced a redesigned header with logo, navigation, expandable search, and project CTA.
  • Added a comprehensive footer with notes, statistics, social links, and legal navigation.
  • Added new button, card, icon, menu, and footer styling options.
• Enhancements
  • Added phase-based colors and improved hover, focus, and reduced-motion interactions.
• Bug Fixes
  • Improved footer layouts, icon colors, breadcrumbs, header search behavior, and Site Editor styling.

[linear-code]

LS-1618

[coderabbitai]

Warning

Review limit reached

@brandonmarshal, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 2 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: CHILL

Plan: Pro Plus

Run ID: 6b86910d-ceef-4051-8413-b3067d1b44cb

📥 Commits

Reviewing files that changed from the base of the PR and between 57fe332 and 0087ef3.

📒 Files selected for processing (9)

• CHANGELOG.md
• assets/css/animations.css
• parts/about-mega-menu.html
• parts/insights-mega-menu.html
• parts/pricing-mega-menu.html
• parts/solutions-mega-menu.html
• parts/work-mega-menu.html
• patterns/menu/menu-item-card.php
• src/scss/animations/_footer-motion.scss

Note

.coderabbit.yml has unrecognized properties

CodeRabbit is using all valid settings from your configuration. Unrecognized properties (listed below) have been ignored and may indicate typos or deprecated fields that can be removed.

⚠️ Parsing warnings (1)

Validation error: Unrecognized key: "version"

⚙️ Configuration instructions

• Please see the configuration documentation for more information.
• You can also validate your configuration using the online YAML validator.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

📝 Walkthrough

Walkthrough

The theme adds semantic color and shadow tokens, six mega-menu template parts, reusable block styles, a redesigned header with expandable search, and a structured footer with interactive styling and decorative effects.

Changes

Site experience

Layer / File(s)	Summary
Theme tokens and style contracts theme.json, styles/...	Adds phase/status/text tokens, shadow presets, mega-menu and footer panel styles, plus header, footer, and CTA block style contracts.
Mega-menu templates and interactions parts/*-mega-menu.html, src/scss/animations/_menu-motion.scss, assets/css/animations.css	Adds six mega-menu panels with grouped content, lifecycle phases, calls to action, responsive layout rules, hover/focus states, and reduced-motion handling.
Header search and controls patterns/header.php, assets/js/header-search.js, inc/header.php, functions.php, src/scss/animations/_header-motion.scss	Adds the composed header, enqueues expandable search behavior, wires editor styles, and styles header buttons, CTA motion, and search transitions.
Footer pattern and presentation patterns/footer.php, src/scss/animations/_footer-motion.scss, styles/sections/footer/*	Replaces the minimal footer with notes, proof cards, navigation, legal links, and social icons, then adds decorative effects, SVG color fixes, link reveals, and interaction states.

Estimated code review effort: 4 (Complex) | ~60 minutes

Possibly related PRs

• lightspeedwp/ls-theme#4: Both changes modify theme.json loading or token and template-part configuration.

Suggested labels: comp:section-styles, comp:theme-json, lang:js

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: rebuilding mega menus, header, and footer to match Figma.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/LS-1618-mega-menus-header-footer

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[mergify]

Tick the box to add this pull request to the merge queue (same as @mergifyio queue).

• Queue this pull request

[coderabbitai]

Actionable comments posted: 7

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

patterns/footer.php (1)

1-10: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Add @package tag to the file docblock.

CI (PHPCS WordPress ruleset) is failing on this file for a missing @package tag.

🐛 Proposed fix

 /**
  * Title: Footer
  * Slug: ls-theme/footer
  * Categories: footer
  * Block Types: core/template-part/footer
  * Description: Full site footer — editorial notes panel, company summary with proof points, 5-column link grid, and legal/social bottom bar.
+ * `@package` ls-theme
  */

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@patterns/footer.php` around lines 1 - 10, Add the required `@package` tag to
the file-level docblock in patterns/footer.php, using the package name
established by the surrounding theme files and leaving the existing metadata
unchanged.

Source: Pipeline failures

patterns/header.php (1)

2-8: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Add the required package annotation.

PHPCS fails because this file-level docblock lacks @package ls-theme.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@patterns/header.php` around lines 2 - 8, Add the required `@package` ls-theme
annotation to the file-level docblock in patterns/header.php, alongside the
existing Title, Slug, Categories, Block Types, and Description metadata.

Source: Pipeline failures

🧹 Nitpick comments (4)

patterns/footer.php (3)

268-268: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Hardcoded copyright year will go stale.

© 2026 lightSpeedwp.agency. is hardcoded; consider generating the year dynamically so it doesn't need a manual edit every year.

♻️ Proposed fix

-<p class="has-text-color has-100-font-size" style="color:var(--wp--custom--color--text--subtle);margin-top:0;margin-bottom:0;text-transform:uppercase">© 2026 lightSpeedwp.agency. All rights reserved.</p>
+<p class="has-text-color has-100-font-size" style="color:var(--wp--custom--color--text--subtle);margin-top:0;margin-bottom:0;text-transform:uppercase">© <?php echo esc_html( gmdate( 'Y' ) ); ?> lightSpeedwp.agency. All rights reserved.</p>

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@patterns/footer.php` at line 268, Replace the hardcoded year in the footer
copyright paragraph with a dynamically generated current year, using the
project's existing PHP escaping conventions if applicable. Keep the agency name,
rights text, styling, and surrounding markup unchanged.

---

94-96: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Nav-column category labels ("Services", "Solutions", "Systems", "Company", "Studio") use plain paragraphs, not headings.

Each of these five footer nav-column groups labels its link list with a styled <p> rather than a heading element, so screen-reader users navigating by heading/landmark structure won't see these as section labels.

As per coding guidelines for {templates/**/*.html,parts/**/*.html,patterns/**/*.{php,html}}: "Use semantic HTML, maintain correct heading hierarchy, and use ARIA attributes where needed for accessibility."

Also applies to: 134-136, 166-168, 200-202, 232-234

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@patterns/footer.php` around lines 94 - 96, Replace the styled paragraph
labels for the footer navigation groups—“Services,” “Solutions,” “Systems,”
“Company,” and “Studio”—with semantic heading elements while preserving their
existing typography, color, and text-transform styling. Update each
corresponding closing block consistently and maintain the surrounding link-list
structure.

Source: Coding guidelines

---

13-313: 📐 Maintainability & Code Quality | 🔵 Trivial | 🏗️ Heavy lift

Static copy isn't wrapped in translation functions.

None of this pattern's ~40 text strings (badge label, heading, proof-card copy, nav-column labels/links, legal links, copyright) use __()/esc_html__() with the ls-theme text domain, so the footer can't be localized.

As per path instructions, "This is a WordPress block pattern file... Review for correct translation function usage," and per coding guidelines, "Use translation functions correctly: __(), esc_html__(), esc_attr__() in PHP files."

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@patterns/footer.php` around lines 13 - 313, Wrap every static footer string
in the pattern markup with the appropriate WordPress translation function using
the ls-theme text domain, including badge text, headings, proof-card copy,
navigation labels and links, legal links, and copyright text. Update the
surrounding PHP so translated values are safely escaped with esc_html__() for
text and esc_attr__() where translated attributes are used, while preserving the
existing block structure and styling.

Sources: Coding guidelines, Path instructions

theme-utils.mjs (1)

208-260: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

Add a light/dark token symmetry check.

lightFlat/darkFlat are only checked for non-emptiness (line 227), not for having the same key set. A token present in theme.json's settings.custom.color/shadow but missing from styles/dark.json (or vice versa) is silently dropped from that mode's :root[data-theme=...] block — the property then falls back to the other mode's value instead of surfacing an error, which can produce a silent theme-toggle regression.

♻️ Proposed symmetry check

 	if ( 0 === Object.keys( lightFlat ).length || 0 === Object.keys( darkFlat ).length ) {
 		error( 'No settings.custom.color/shadow tokens found in theme.json or styles/dark.json.' );
 		process.exit( 1 );
 	}
+
+	const lightKeys = new Set( Object.keys( lightFlat ) );
+	const darkKeys = new Set( Object.keys( darkFlat ) );
+	const missingInDark = [ ...lightKeys ].filter( ( k ) => ! darkKeys.has( k ) );
+	const missingInLight = [ ...darkKeys ].filter ( ( k ) => ! lightKeys.has( k ) );
+	if ( missingInDark.length || missingInLight.length ) {
+		error( `Light/dark custom token mismatch. Missing in dark: ${ missingInDark.join( ', ' ) || 'none' }. Missing in light: ${ missingInLight.join( ', ' ) || 'none' }.` );
+		process.exit( 1 );
+	}

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@theme-utils.mjs` around lines 208 - 260, Add a symmetry validation in
generateThemeToggleCss after the existing non-empty checks, comparing the key
sets of lightFlat and darkFlat and failing with error plus process.exit(1) when
they differ. Preserve generation only when both modes contain identical token
keys, while keeping the existing toBlock and output behavior unchanged.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@assets/css/animations.css`:
- Around line 1498-1538: Update the header-search.js logic that toggles
site-header__search--expanded to also manage the search input’s tabindex: set it
to -1 while collapsed and restore its normal tab order when expanded and
focusable. Ensure the visible submit button remains the keyboard-accessible
control that triggers expansion.

In `@patterns/header.php`:
- Line 36: Update the “Start a project” CTA anchor in the button markup to use
the actual project/contact destination instead of the placeholder href="#".
Preserve the existing button classes and link text.
- Around line 14-16: Update the header image in the pattern to use a deployable
theme asset via the escaped theme URL helper instead of the hard-coded localhost
attachment URL, and replace the empty alt attribute with descriptive alternative
text that identifies the site brand.
- Line 22: Localize the visitor-facing strings in the header pattern, including
the Search label/placeholder/button text, Toggle light and dark mode, and Start
a project →, using the appropriate translation/context helpers with the ls-theme
domain. Escape each translated value at the rendered attribute or text output
boundary while preserving the existing markup and behavior.

In `@src/scss/animations/_footer-motion.scss`:
- Around line 100-102: Update the fill declaration in the .site-footer
.icon-container svg rule to use the lowercase currentcolor keyword required by
Stylelint.
- Around line 60-90: Replace the ambiguous `.site-footer
.wp-block-columns:nth-of-type(2)` selector with a dedicated class targeting only
the intended Company/Studio nav-column grid. Add that class to the corresponding
`wp:columns` block in `patterns/footer.php`, then update `_footer-motion.scss`
to apply the blur and child layering through the new class while leaving the
rest of the footer unchanged.

In `@styles/blocks/groups/mega-menu-item-default.json`:
- Around line 22-48: Remove the unsupported :hover, :focus, and
outermost/icon-block entries from mega-menu-item-default.json, leaving only the
supported structural variation properties such as padding and radius. Preserve
the interactive hover/focus behavior in the existing menu-motion styles rather
than defining it in the variation schema.

---

Outside diff comments:
In `@patterns/footer.php`:
- Around line 1-10: Add the required `@package` tag to the file-level docblock in
patterns/footer.php, using the package name established by the surrounding theme
files and leaving the existing metadata unchanged.

In `@patterns/header.php`:
- Around line 2-8: Add the required `@package` ls-theme annotation to the
file-level docblock in patterns/header.php, alongside the existing Title, Slug,
Categories, Block Types, and Description metadata.

---

Nitpick comments:
In `@patterns/footer.php`:
- Line 268: Replace the hardcoded year in the footer copyright paragraph with a
dynamically generated current year, using the project's existing PHP escaping
conventions if applicable. Keep the agency name, rights text, styling, and
surrounding markup unchanged.
- Around line 94-96: Replace the styled paragraph labels for the footer
navigation groups—“Services,” “Solutions,” “Systems,” “Company,” and
“Studio”—with semantic heading elements while preserving their existing
typography, color, and text-transform styling. Update each corresponding closing
block consistently and maintain the surrounding link-list structure.
- Around line 13-313: Wrap every static footer string in the pattern markup with
the appropriate WordPress translation function using the ls-theme text domain,
including badge text, headings, proof-card copy, navigation labels and links,
legal links, and copyright text. Update the surrounding PHP so translated values
are safely escaped with esc_html__() for text and esc_attr__() where translated
attributes are used, while preserving the existing block structure and styling.

In `@theme-utils.mjs`:
- Around line 208-260: Add a symmetry validation in generateThemeToggleCss after
the existing non-empty checks, comparing the key sets of lightFlat and darkFlat
and failing with error plus process.exit(1) when they differ. Preserve
generation only when both modes contain identical token keys, while keeping the
existing toBlock and output behavior unchanged.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: CHILL

Plan: Pro Plus

Run ID: 76750026-1bb2-474a-879a-d6ad670a6b98

📥 Commits

Reviewing files that changed from the base of the PR and between e8253e1 and d47011e.

📒 Files selected for processing (35)

• CHANGELOG.md
• assets/css/animations.css
• assets/css/theme-toggle.css
• assets/js/header-search.js
• assets/js/theme-toggle.js
• functions.php
• inc/header.php
• inc/theme-toggle.php
• package.json
• parts/about-mega-menu.html
• parts/insights-mega-menu.html
• parts/pricing-mega-menu.html
• parts/services-mega-menu.html
• parts/solutions-mega-menu.html
• parts/work-mega-menu.html
• patterns/footer.php
• patterns/header.php
• src/scss/animations.scss
• src/scss/animations/_footer-motion.scss
• src/scss/animations/_header-motion.scss
• src/scss/animations/_menu-motion.scss
• styles/blocks/buttons/button-cta-gradient.json
• styles/blocks/groups/footer-proof-card.json
• styles/blocks/groups/footer-social-icon.json
• styles/blocks/groups/header-icon-button.json
• styles/blocks/groups/mega-menu-item-default.json
• styles/blocks/groups/mega-menu-item-service.json
• styles/blocks/paragraphs/footer-nav-link.json
• styles/dark.json
• styles/presets/links.json
• styles/presets/shadows.json
• styles/sections/footer/footer-notes-panel.json
• styles/sections/menu/mega-menu-panel.json
• theme-utils.mjs
• theme.json

[ZaredRogers]

Looking great @brandonmarshal

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

CHANGELOG.md (1)

104-104: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Remove or rewrite the superseded toggle entry.

Line 98 says the theme-side light/dark toggle, related CSS, and header markup were removed, but Line 104 still presents the toggle button fix as part of the final unreleased state. Delete this entry or explicitly mark it as superseded so the changelog does not imply that the removed toggle still ships.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@CHANGELOG.md` at line 104, Remove the superseded toggle-button fix entry from
the changelog, or rewrite it to clearly indicate that it no longer ships. Update
the entry around the header icon button fix while preserving the existing
changelog structure and ensuring it does not contradict the removal note near
line 98.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@CHANGELOG.md`:
- Line 104: Remove the superseded toggle-button fix entry from the changelog, or
rewrite it to clearly indicate that it no longer ships. Update the entry around
the header icon button fix while preserving the existing changelog structure and
ensuring it does not contradict the removal note near line 98.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: CHILL

Plan: Pro Plus

Run ID: c4447aab-df0b-4d89-8430-a977ecd8184d

📥 Commits

Reviewing files that changed from the base of the PR and between 063baf0 and 57fe332.

📒 Files selected for processing (5)

• CHANGELOG.md
• assets/css/animations.css
• functions.php
• patterns/header.php
• src/scss/animations/_header-motion.scss

💤 Files with no reviewable changes (4)

• functions.php
• patterns/header.php
• src/scss/animations/_header-motion.scss
• assets/css/animations.css

[brandonmarshal]

Pre-merge checklist status:

• ✅ Removed the temporary CSS/JS colour switcher (fully recoverable via git history)
• 🔜 Investigating ls-plugin myself first
• ✅ Fixed mobile/desktop icon stretching (footer social icons + proof cards)
• ✅ Re-aligned icons to top
• ✅ Extracted mega-menu item into a reusable pattern (patterns/menu/menu-item-card.php), applied across all 31 items in Work/Solutions/Pricing/Insights/About — content untouched