refactor(css): inline FL-Builder layout grid + add visual regression gates

[pftg]

Summary by CodeRabbit

• Styling

  • Added a layout-grid include to the critical header and consolidated per-page critical styles; homepage critical CSS expanded into a modular stylesheet with responsive rules for tabs, menus, logos, headers and many builder modules; contact/privacy pages now use the shared consolidated critical bundle.

• Documentation

  • Added extensive CSS migration program docs (index, goals, tracker, dashboard, strategies, runbooks) and removed/archived numerous legacy planning and sprint artifacts.

• Tests

  • Introduced strict zero-tolerance visual‑regression and CSS processing validation protocols and associated tester/reviewer workflows.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Adds an FL‑Builder layout-grid partial include into header critical base, replaces an empty contact-us critical block with the base include, expands page-specific critical CSS (homepage, privacy-policy) with large FL‑Builder/PowerPack rules, and makes extensive documentation and governance edits for CSS migration, visual‑regression protocols, and agent coordination.

Changes

Cohort / File(s)	Summary
Header critical partials themes/beaver/layouts/partials/header/critical/base-critical.html, themes/beaver/layouts/partials/header/critical/contact-us.html, themes/beaver/layouts/partials/header/critical/homepage.html, themes/beaver/layouts/partials/header/critical/privacy-policy.html	Inserted include header/critical/consolidated/fl-layout-grid.html into base-critical.html; replaced an empty contact-us critical block with the base-critical include; added or replaced large page-specific critical CSS (homepage, privacy-policy) including many FL‑Builder/PowerPack node-specific rules and responsive media queries.
Testing & visual‑regression docs test/system/CSS_PROCESSING_TEST_PROTOCOL.md, test/system/CSS_TESTING_SUMMARY.md, .claude/hooks/pre-commit-screenshot-validation.md, .claude/agents/core/screenshot-guardian.md	Added zero‑tolerance visual‑regression test protocols, baseline capture and gating guidance, a pre‑commit screenshot guardrail, and a Screenshot Guardian validator spec with blocking authority and evidence formats.
Agent governance & policies CLAUDE.md, AGENT_COORDINATION_FAILURE_ANALYSIS.md, .claude/agents/*.md, .claude/agents/core/*.md, .claude/agents/claude-flow-expert.md	Added Autonomous Swarm Coordination language, stricter visual‑validation gates, new roles (Screenshot Guardian), incident analysis dossier, and updated agent hooks/messages and policies.
Specialist YAMLs simplified .claude/agents/specialists/hugo-expert.yaml, .claude/agents/specialists/performance-optimizer.yaml, .claude/agents/specialists/seo-specialist.yaml	Removed multi-step coordination/analysis flows from specialist YAMLs leaving minimal pre/post task hooks.
Project docs — additions & runtime coordination docs/projects/2509-css-migration/PROJECT-INDEX.md, docs/projects/2509-css-migration/TASK-TRACKER.md, docs/projects/2509-css-migration/GOAL-AT-A-GLANCE.md, docs/projects/2509-css-migration/SWARM-EXECUTION-PROMPT.md, docs/projects/2509-css-migration/10-19-analysis-docs/*, docs/CSS_CONSOLIDATION_*.md, _runtime/css-analysis/*, _runtime/css-hive-coordination/*	Added many analysis, index, tracker, goals, consolidation dashboards, extraction guides, swarm prompts, runtime coordination dashboards, and procedural artifacts supporting CSS consolidation and extraction workflows.
Project docs — deletions docs/projects/2509-css-migration/30-39-documentation/30.01-progress-tracker.md, .../30.02-roadmap.md, .../30.03-sprint-5-plan.md, docs/projects/2509-css-migration/50-59-testing/*, docs/projects/2509-css-migration/20-29-components/*, many others (see diff)	Removed numerous legacy planning, roadmap, sprint, testing, metrics, and goal documents across the CSS migration documentation corpus.
Design/docs path updates docs/30-39-architecture-design/design-patterns/hugo-pipes-design.md, docs/30-39-architecture/37-legacy-css-cleanup-strategy.md, docs/design-system/color-system.md	Updated references from base-layout.css to vendors/base-4.min.css and applied minor formatting/newline fixes.
Misc / gitignore .gitignore	Replaced generic _runtime/ ignore with a specific ignore for docs/projects/2509-css-migration/50-59-execution/.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant Page as Page Template
  participant Hugo as Hugo Renderer
  participant Base as base-critical.html
  participant Grid as consolidated/fl-layout-grid.html
  participant Style as inlined style

  Page->>Hugo: render head partials
  Hugo->>Base: include base-critical
  Base->>Grid: include fl-layout-grid partial
  Grid-->>Base: emit grid markup/CSS
  Base->>Style: emit critical CSS into head
  Style-->>Page: above-the-fold styles applied

Loading

sequenceDiagram
  autonumber
  participant Coder as Coder
  participant Reviewer as Reviewer
  participant SG as Screenshot Guardian
  participant Tester as Tester

  Coder->>Reviewer: submit CSS/template change
  Reviewer->>SG: request visual validation
  SG->>SG: run pixel-diff (tolerance=0)
  alt visual differences detected
    SG-->>Coder: block change + provide evidence
  else no differences
    SG->>Tester: hand off to test suite
    Tester-->>Coder: final test results
  end

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• drop roboto #76 — Modifies the same header critical partials; likely to overlap with the new include/inlining changes.
• refact: structure tempaltes #242 — Alters header critical partials and contact-us handling; may conflict with the contact-us replacement to base include.
• refact: continue fixes 4 #256 — Related FL‑Builder/layout-grid and critical CSS reorganizations; potential overlap with foundation/critical bundles.

Suggested reviewers

• dgorodnichy
• AucT

Poem

Hop-hop, I stitch the styles just right,
Grid first, then critical rules take flight.
Guardians scan each pixel with care,
Old docs trimmed, new maps laid bare.
A rabbit's nibble, tidy and bright. 🥕✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title accurately describes the CSS refactor inlining the FL-Builder layout grid alongside adding visual regression gates, using the repository’s conventional prefix and clear terminology. It is concise, specific, and directly reflects the core objectives of the PR without extraneous details. A teammate reviewing the commit history would immediately grasp the primary scope and purpose.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ac9641c and ca3f7fc.

📒 Files selected for processing (1)

• CLAUDE.md (8 hunks)

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 2

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 20b3599 and d41d2ac.

📒 Files selected for processing (5)

• themes/beaver/layouts/partials/header/critical/base-critical.html (1 hunks)
• themes/beaver/layouts/partials/header/critical/consolidated/fl-layout-grid.html (1 hunks)
• themes/beaver/layouts/partials/header/critical/contact-us.html (1 hunks)
• themes/beaver/layouts/partials/header/critical/homepage.html (1 hunks)
• themes/beaver/layouts/partials/header/critical/privacy-policy.html (1 hunks)

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Drop the @charset line from this inline stylesheet.

Within a <style> tag the @charset rule is invalid, so it’s ignored and just triggers parser noise. Remove it to keep the critical CSS clean.

-@charset "UTF-8";

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

@charset "UTF-8";

🤖 Prompt for AI Agents

In themes/beaver/layouts/partials/header/critical/homepage.html around line 4,
remove the invalid @charset "UTF-8"; rule from the inline <style> block: delete
that line so the inline stylesheet contains only valid CSS declarations (no
@charset inside <style>), leaving the rest of the critical CSS unchanged.

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Remove invalid @charset directives from inline critical CSS.

@charset is only valid at the very start of an external stylesheet, so these inline occurrences are ignored by the browser and just add parser noise. Please drop them from this block.

-@charset "UTF-8";
…
-@charset "UTF-8";

Also applies to: 52-52

🤖 Prompt for AI Agents

In themes/beaver/layouts/partials/header/critical/privacy-policy.html around
lines 37 and 52, remove the invalid inline @charset directives from the critical
CSS block because @charset is only allowed at the very start of an external
stylesheet; edit the file to delete those @charset lines (both occurrences) so
the inline CSS contains only valid rules and no parser-noise directives.