🧩 BRICKS AI HYBRID PATH · LIVE APR 20 2026

This playbook is built under the 3-tool workflow: Figma for the 20% that carries the brand (hero + MOAT sections), Bricks AI Studio for the 80% that repeats (grids, rows, accordions, chip bars), Claude/Nexus to orchestrate briefs.

🚫 OFF-LIMITS
Audrey does NOT design a header or footer in Figma. Global Bricks components already ship on every page.
πŸ“ NAMING
NN_type_descriptor Β· lowercase + underscores Β· number matches the § in the Section-by-Section spec Β· starts at 01, no 00_header.
🧩 PER-SECTION MODE
One frame at a time. Audrey names the frame → asks Claude: “prompt for [page] section NN” → tuned Bricks AI prompt returned → paste in Bricks AI → approve → ship.
πŸ“¦ WHOLE-PAGE MODE
Full bundle. All frames named → asks Claude: “whole [page] prompt pack” → document with every section prompt. Figma-flagged sections marked “drop your Figma export, do not regenerate.”
Every prompt enforces: No header/footer generation · Brand tokens (#1D1760 navy, #30C5FF blue, #FFEA00 yellow, Inter) · Stephanie format (Problem → Impact → Solution → Data → Need) · LocalBusiness + page-type schema · Mobile-first (44px taps, 16px body min) · No em dashes in client copy.
β†’ Full 3-tool workflow diagram + 5 wiring steps

One Page = Two Jobs

Paid traffic and organic traffic land on the same URL. Every service page we build does double duty: it converts Google Ads clicks AND ranks for free search traffic.

Google Ads
Paid Traffic
ONE PAGE
/sewer-camera-inspection/
Google Search
Free Organic Traffic

Landing pages ARE service pages. One URL. One page. Two jobs.

🎨

Audrey, This Is Your Part

Everything else in this playbook is Robert's execution plan. You don't need to read past this section unless you want to.

You design ONE template. That's it.
One page. Your vision. Your baby. Kalen loved the doodle direction. Once your template is live, Robert copies it for every new service page. You don't design 6 pages. You design one.
📷
Hero images: one at a time, no rush.
When we need a hero image for a new page, we'll ask you for just that one. No batch requests. No pile-up. Your mockup is already in the Drive. The direction is clear.
🎯
Your confirmed design specs.
Inter font. No gradients. Doodle elements (handdrawn feel). Hero PNG with wave baked in, text below (ADA). #30C5FF borders. #F2F2F2 backgrounds. Light theme. No emojis on landing pages.
📄 Open Your Creative Brief
↓ Everything below this line is Robert's execution plan for the menu restructure, page creation, and technical SEO. You're welcome to read it, but your part is done above. ↓

Audrey's Part

This is the only section you need to read. Everything below it is Robert's execution plan.

1

You design ONE template. That's it.

One page, your vision, your baby. Every service page on the site will use this template. Sewer, drains, water heaters, emergency -- all of them. You design it once. That's the job.

2

Once your template is live, Robert copies it for every new page.

You don't design 6 pages. Robert handles duplicating the template, swapping out content, and adding pages to the menu. You build the foundation, he builds the house on top of it.

3

When we need a hero image for a new page, we'll ask you ONE at a time.

No rush. Each service page needs a hero image. We'll send you a brief for each one individually, with the service name and any specific direction. No batch requests. One at a time, at a comfortable pace.

4

Your design specs (confirmed):

Font
Inter
Gradients
None
Style
Doodle elements
Hero
Wave PNG, text below (ADA)
Borders
#30C5FF
Background
#F2F2F2
Theme
Light
5

Your mockup is already in the Drive.

Kalen loved the direction. The initial mockup you put together got a thumbs up. The direction is right. Now it just needs to become a real Oxygen template.

Open Your Service Page Template Brief →

Everything below this section is Robert's execution plan. You don't need to read it unless you're curious.

Playbook Rule

If Audrey is involved in a playbook or implementation doc, her section goes at the TOP, clearly separated, with a note that everything else is for Robert. This applies to every future playbook.

Current Menu Audit

The existing flat menu is missing entire service categories. Customers searching for these services never find Bright Side.

Current Menu Flat

  • Sewer Repair
  • Sewer Replacement
  • Trenchless Sewer
  • Drain Cleaning
  • Water Heater Repair
  • Leak Repair
  • Sump Pump
  • Gas Line Repair
  • Septic (BSP does NOT do this)

Proposed Menu Nested

  • Sewer > 6 sub-pages
  • Drains > 3 sub-pages
  • Water Heaters > 3 sub-pages
  • Emergency > 3 sub-pages
  • Other > 2+ pages
  • FREE Camera Inspection (CTA)

What's Wrong Right Now

📷
No Camera Inspection page
190K monthly searches
🚨
No Emergency page
165K monthly searches
🔥
No WH Replacement page
246K monthly searches
🚽
Septic listed (not a BSP service)
Confuses customers
🚫
No Sewer Cleanout page
184K monthly searches
👀
911K searches invisible
No pages to rank for them

911K Monthly Searches We're Invisible For

These search terms have massive national volume. Without pages targeting them, Bright Side does not exist for these searches.

246K
Water Heater Replacement
NO PAGE EXISTS
Highest volume. Highest revenue per job.
190K
Sewer Camera Inspection
NO PAGE EXISTS
Lead magnet. $299 gets foot in door.
184K
Sewer Cleanout
NO PAGE EXISTS
High urgency. Emergency pricing.
165K
Emergency Plumbing
NO PAGE EXISTS
Emergency Eric persona. Highest intent.
126K
Sewer Smell / Gas
NO PAGE EXISTS
Symptom search. Low competition.
911K
TOTAL INVISIBLE
ZERO PAGES
National monthly volume we cannot capture.

API Execution Plan

Exact WordPress REST API calls. The site used Oxygen Builder pre-cutover; now on Bricks Builder 2.3.2 (May 2026) with a standard WP nav menu (menu-main_top).

Phase 1: Immediate Cleanup READY

ActionMethodEndpointStatus
Remove Septic from menu DELETE /wp-json/wp/v2/menu-items/{septic_id} Ready
Create parent menu items (Sewer, Drains, Water Heaters, Emergency, Other) POST /wp-json/wp/v2/menu-items Ready
Move existing pages under parents PATCH /wp-json/wp/v2/menu-items/{id} with parent: {parent_id} Ready
Add "FREE Camera Inspection" CTA to nav POST /wp-json/wp/v2/menu-items with classes: ['cta-yellow'] After page exists

Phase 2: Weekly Page Creation ONGOING

ActionMethodEndpointStatus
Create new page (e.g., /sewer-camera-inspection/) POST /wp-json/wp/v2/pages Need Content
Apply Bricks template (POST /wp-json/bsp/v2/db/native-save with _bricks_page_content_2 elements) POST /wp-json/wp/v2/pages/{id} + meta Need Template
Add page as menu item under parent POST /wp-json/wp/v2/menu-items API Call
Add FAQPage + PlumbingService schema POST Rank Math or inline <script type="application/ld+json"> API Call
Assign blog category for related posts POST /wp-json/wp/v2/categories API Call

Technical Notes

  • • WordPress menu: menu-main_top (standard WP menu, not Oxygen custom)
  • • Nested sub-menus already work (Service Areas dropdown proves it)
  • • Desktop: hover shows flyout children. Mobile: hamburger tap-to-expand accordion
  • • No code changes needed. Just add pages as menu items under parent categories
  • • NEVER create active Code Snippets via API (Hostinger WP rule)
  • • WP prefix: ukueq_

Build Order Timeline

One page per week. Menu grows as pages go live. Audrey works project-by-project, never dump multiple pages on her.

Week 1: Template Design

IN PROGRESS

Audrey design finalized. Template ported to Bricks (PID 8 sewer-camera as canonical shell). One template, reused for all service pages.

Audrey's Specs: Inter font, no gradients, doodle elements, wave hero PNG, text below hero (ADA), #30C5FF borders, light theme

Week 2: Sewer Camera Inspection

NEXT UP

/sewer-camera-inspection/ goes live. Added to menu under Sewer. Google Ads pointed here. 190K/mo search volume.

$199 camera inspection = lead magnet. Gets foot in the door for $5K+ sewer jobs.

Week 3: Replacement + Cleanout

PLANNED

/sewer-line-replacement/ + /sewer-cleanout/ go live. Both added to Sewer menu category. 184K combined searches.

Week 4: Emergency + Water Heater

PLANNED

/emergency-plumbing/ + /water-heater-replacement/ go live. New Emergency and Water Heater categories created in menu. 411K combined searches.

Ongoing: One Page Per Week

CONTINUOUS

Hydro Jetting, Clogged Drain, Tankless Water Heaters, Burst Pipe Repair, Fixture Repair. Each one builds out the menu and captures more searches.

Related Blog Posts on Service Pages

Blog posts appear at the bottom of matching service pages. Internal linking strengthens both the service page (authority) and the blog post (traffic). One Code Snippet. No plugin needed.

Service Page
/sewer-repair/
Hero, CTA, content, FAQ...
Scroll down to bottom of page
Related Articles
Sewer
5 Signs You Need a Sewer Line Repair
Sewer
Tree Roots vs Your Sewer Line
Sewer
Camera Inspection: What We Find

How It Works

  • 1. Each service page has a WP category assigned (Sewer, Drains, etc.)
  • 2. A single Code Snippet queries blog posts in the matching category
  • 3. Displays 3 most recent posts as cards at page bottom
  • 4. Auto-updates as new blog posts are published
  • 5. No plugin required. Pure WP query + Oxygen shortcode

Blog Categories Already Mapped

CategoryPostsService Pages
Sewer76 pages
Drains83 pages
Emergency33 pages
Water Heaters43 pages
General Plumbing5+Other pages

SEO Benefits

  • ✓ Internal links from service page to blog (passes authority)
  • ✓ Internal links from blog back to service page (CTA in each post)
  • ✓ Keeps visitors on site longer (lower bounce rate)
  • ✓ Google sees topical depth (multiple pages on same subject)

Who Does What

Clear ownership. No overlap. No ambiguity.

A

Audrey

Designer

  • ONE template design (in progress)
  • Hero images, one page at a time
  • Doodle elements + wave hero PNG
  • Desktop + mobile artboard sizes
  • Light theme, Inter font, #30C5FF borders
Works project-by-project. Never dump multiple pages on her.
K

Kalen

Master Plumber / Copy

  • Writes ALL service page copy
  • Reviews every page before publish
  • Approves technical content
  • FAQ answers from field experience
  • Wants heavy involvement in content
Nothing goes live without his review.
R

Robert

Developer / SEO / Ads

  • Builds pages via WP REST API
  • SEO optimization + schema markup
  • Menu restructure (API calls)
  • CRO elements + forms + tracking
  • Google Ads campaign setup
  • FAQ schema + internal linking
One page per week. Quality over quantity.

Connected Playbooks

This playbook covers WHAT pages to build and WHERE they go in the menu. These three playbooks cover HOW to build them, WHAT goes on them, and HOW they look.

This Playbook = WHAT + WHERE  |  CRO = HOW IT CONVERTS  |  Sewer Brief = CONTENT  |  Template Brief = DESIGN

Revenue Impact

Conservative estimates based on 1% KC metro share of national search volume, 3% click-through rate, 15% booking rate from BSP historical data.

Missing Page National Vol Est. KC Searches Est. Monthly Clicks Est. Monthly Bookings Avg Ticket Monthly Revenue
Water Heater Replacement 246K 2,460 74 11 $2,800 $30,800
Sewer Camera Inspection 190K 1,900 57 9 $299 $2,691
Camera leads convert to $5K-$15K sewer jobs at ~35% close rate + $15,750*
Sewer Cleanout 184K 1,840 55 8 $450 $3,600
Emergency Plumbing 165K 1,650 50 7 $650 $4,550
Sewer Smell / Gas 126K 1,260 38 6 $350 $2,100
TOTAL POTENTIAL 911K 9,110 274 41 $59,491/mo
$59K
Estimated Monthly Revenue
$713K
Annualized Revenue Potential
$0
Cost (Organic = Free Traffic)

Methodology: National search volume from SEMRush. KC metro estimated at 1% of national (conservative for a metro of 2.2M). Click-through rate at 3% for organic position 5-10 (first 6 months). Booking rate at 15% (BSP historical). Average ticket from ServiceTitan job data. Camera inspection upsell at 35% close rate (Kalen's reported close rate for sewer jobs). These are conservative floor estimates, not projections.

This playbook is part of the BSP master strategy
OPEN SACRED HTML
Morpheus Command Center All Documents
Phase 1 Copy Deck - Audrey-Authored

[Copy]Menu Page Strategy Copy Deck

Source: /opt/nexus/nexus/scripts/output/audrey_copy/menu_strategy/ · Integrated 2026-05-01 · BSP Session 9 Track D Phase 3
TL;DRImportant note. The Menu Page Strategy playbook is primarily a nav/menu and service-page architecture doc, not a price-menu copy spec. Detailed price display rules live in the Sewer Brief and Landing Page CRO Playbook (cited but not in scope here). Track_d shipped a service-menu landing page deck below as a reasonable interpretation of "menu page": the...
[#]

Key Stats & Anchors

Free
- Tertiary: Free Camera Inspection (yellow highlight in nav...
5 Generations
4.9 Google (384+) Β· BBB A+ Β· 5 Generations Β· Same-Day Β·...
Same-Day
4.9 Google (384+) Β· BBB A+ Β· 5 Generations Β· Same-Day Β·...
$99
A free sewer camera inspection is free. A drain unclog...
free
A free sewer camera inspection is free. A drain unclog...
[1]

Section-by-Section Copy

Menu / Services Page Copy Deck

Source: BSP_Menu_Page_Strategy_Playbook.html (fetched 2026-05-01).

Important note. The Menu Page Strategy playbook is primarily a nav/menu and service-page architecture doc, not a price-menu copy spec. Detailed price display rules live in the Sewer Brief and Landing Page CRO Playbook (cited but not in scope here). Track_d shipped a service-menu landing page deck below as a reasonable interpretation of "menu page": the index page that lists all our plumbing services with transparent pricing for each. Audrey can confirm interpretation.


Section 01. Hero

H1: Plumbing Services with a Price Menu You Can Actually See. Sub: Sewer, drain, water heater, leak repair. Flat-rate prices, posted publicly. Family-owned since 1940.

CTAs.

  • Primary: Call (913) 963-1029 (yellow #FFEA00)
  • Secondary: Book Online (blue outline)
  • Tertiary: Free Camera Inspection (yellow highlight in nav per playbook)

Section 02. Trust Bar (reused 6 chips)

4.9 Google (384+) Β· BBB A+ Β· 5 Generations Β· Same-Day Β· Licensed and Insured Β· Free Estimates


Section 03. Why a Price Menu

H2: Why We Post Our Prices.

Most KC plumbers hide their prices behind a dispatch fee and a sales pitch. We do not. We publish flat-rate pricing for every common service so you walk into the conversation knowing the number.

A free sewer camera inspection is free. A drain unclog starts at $99. A water heater swap has three real numbers depending on the tank you need. We will tell you the price before we touch a tool.


Section 05. Service Menu

Service category cards in priority order. Each card lists service, starting price, what's included, and "Learn More" link to the dedicated service page.

Sewer Repair and Replacement

Starting at: $3,500 (trenchless spot repair). What's included: Free camera inspection. Flat-rate written quote. Two-year workmanship warranty. Link: Learn More about Sewer Repair

Sewer Camera Inspection

Price: Free with any sewer repair $500 or over. $189 standalone. What's included: HD camera footage. On-the-spot diagnosis. Written report. Link: Learn More about Sewer Camera Inspections

Drain Cleaning

Starting at: $99 (single drain). What's included: Snake or hydro-jet, depending on the clog. Unclog or it's free. Link: Learn More about Drain Cleaning

Water Heaters

Starting at: $1,895 (40-gallon tank install). What's included: Removal of old unit. New unit install. Disposal. Manufacturer warranty plus our 2-year workmanship. Link: Learn More about Water Heaters

Leak Repair

Starting at: $295 (basic supply-line repair). What's included: Detection, repair, and verification in one visit. Link: Learn More about Leak Repair

Sump Pumps

Starting at: $895 (basic replacement). What's included: Removal, install, and basement protection check. Link: Learn More about Sump Pumps

Gas Line Repair

Starting at: $395 (diagnostic + simple fix). What's included: Leak detection, repair, and city-required pressure test. Link: Learn More about Gas Line Repair


Section 07. Transparent Pricing Promise

H2: Flat-Rate Pricing. Approved Before We Start.

You see the price before we pick up a tool. No hourly billing. No surprise add-ons. If the job changes, we stop, talk through the change, and quote it.


Section 09. Why One URL Serves Two Audiences

(Playbook strategy note for Audrey, not customer-facing copy.)

Paid traffic and organic traffic land on the same URL. Every service page does double duty: it converts Google Ads clicks AND ranks for free search traffic. Means: hero copy works for ads, body copy works for SEO. No paid/organic split.


Section 10. FAQ

See faq_seed.md.


Section 13. Final CTA

Headline: Real prices. Real plumbers. Same-day service. Sub: Five generations of Kansas City plumbing. Family-owned since 1940.

Buttons.

  • Call (913) 963-1029 (yellow #FFEA00)
  • Book Online (blue outline)

Tone Rules

  • Stephanie format applies (Problem -> Impact -> Solution -> Data -> Need).
  • Kalen reviews every service page before publish. Track_d shipped placeholder pricing pulled from existing service pages. Final ranges await Kalen sign-off per playbook rule.
  • "Free Camera Inspection" CTA stays yellow-highlighted in the nav per playbook.
  • No em dashes.
  • No emojis on landing pages.
  • Brand tokens: #1D1760 navy, #30C5FF blue, #FFEA00 yellow, Inter typeface.
  • 16 px body minimum. 44 px tap targets.
[2]

Hero Options

Headline Options

Option A (recommended, transparency stake) H1: Plumbing Services with a Price Menu You Can Actually See. Sub: Sewer, drain, water heater, leak repair. Flat-rate prices, posted publicly. Family-owned since 1940. Option B (simple service-list lead) H1: All the Plumbing Services Bright Side Offers, in One Place. Sub: Sewer, drain, water heater, leak repair, sump pumps, gas line. Flat-rate pricing on every job. Option C (anti-hidden-pricing stake) H1: No Hidden Pricing. No Hourly Billing. No Surprise Add-Ons. Sub: Flat-rate prices on every plumbing service. Family-owned KC plumber since 1940. Option D (urgency hook) H1: Same-Day Plumbing Across the KC Metro. Pick Your Service. Sub: Sewer, drain, water heater, leak repair. Real prices, real plumbers, real family. Option E (problem-first) H1: What Do You Need Fixed Today? Sub: Pick the service. See the starting price. Book online or call (913) 963-1029.

Recommendation

Option A is canonical. Aligns with the "transparent pricing" moat from the Homepage playbook and the "flat-rate approved before we start" guarantee. Option E for paid traffic if conversion rate on the menu page beats the homepage.

Reject

Any hero with "lowest price" or "guaranteed cheapest". Honesty stake.

[3]

CTA Copy

Hero CTAs

Primary. Call (913) 963-1029 (yellow #FFEA00) Secondary. Book Online (blue outline) Tertiary. Free Camera Inspection (text link, navigates to /sewer-camera-inspection/)

Per-Service Card CTAs

Each service card. Learn More about {Service} (Inter 600, 14px, #30C5FF text link) Plus a secondary action button. Book This Service (yellow #FFEA00) Variants.

  • Learn More
  • See This Service
  • Book This Job
  • Get a Quote

Nav CTA (per playbook)

"FREE Camera Inspection" yellow-highlighted in the top nav bar. Always visible.

Final CTA Block

Headline: Real prices. Real plumbers. Same-day service. Sub: Five generations of Kansas City plumbing. Family-owned since 1940. Buttons.

  • Call (913) 963-1029 (yellow #FFEA00)
  • Book Online (blue outline)

Microcopy Rules

  • Phone tap-to-call wired on mobile. 48 px touch targets.
  • Each "Starting at" price is a real number Kalen has approved. Never invented.
  • Anchor text on Learn More links matches destination H1.
  • One yellow button per viewport. The yellow nav CTA does not count if it stays in the header.
  • No em dashes.
[4]

FAQ Seed

No FAQ seed parsed.

Source Citations (click to expand)

Menu / Services Page Source Citations

Primary source: BSP_Menu_Page_Strategy_Playbook.html (fetched 2026-05-01). Brand canon: CLAUDE.md.


Source caveat

The Menu Page Strategy playbook is primarily a nav/menu and service-page-architecture doc, not a price-menu copy spec. Track_d shipped a "services menu" landing page deck below as a reasonable interpretation. Final pricing and detail copy await Kalen approval per playbook ownership rule ("Kalen writes ALL service page copy").


| Element | Source | Notes | |---|---|---| | One-URL-two-audiences strategy | Playbook Β§Service Page Value Prop | Verbatim quote: "Paid traffic and organic traffic land on the same URL... double duty." | | FREE Camera Inspection nav CTA yellow | Playbook Β§CTA Guidance | Verbatim. | | Stephanie format enforcement | Playbook Β§Primary Copy Framework | Applied to body sections. | | Kalen reviews every service page before publish | Playbook Β§Copy Ownership | Hard rule, flagged in deck. | | Brand tokens (#1D1760 / #30C5FF / #FFEA00, Inter) | Playbook Β§Copy Rules + CLAUDE.md | Verbatim. | | 16 px body min, 44 px tap targets | Playbook Β§Copy Rules | Mobile-first rule. | | No em dashes / no emojis on landing pages | Playbook Β§Copy Rules + CLAUDE.md | Verbatim. | | 6-service grid + gas line | Cross-referenced Homepage Playbook Β§04 + Remaining Pages Playbook | Pulled forward. | | "Starting at" pricing pattern | Track_d draft, derived from existing service pages | Pending Kalen sign-off per playbook ownership rule. | | Service categories priority order | Homepage Playbook Β§04 (sewer leads) | Applied. | | Trust bar reused chips | Homepage Playbook Β§02 | Verbatim. |


Outstanding blockers

  • Kalen approval on every "Starting at" price (playbook hard rule: nothing goes live without his review).
  • Sewer Brief and Landing Page CRO Playbook hold the detailed pricing-display rules and may amend this deck.
  • If the "menu" intent is something other than a services-listing page (e.g., a literal price book, a nav structure doc, or a backend admin menu), Audrey should redirect track_d.
Generated BSP Session 9 Track D Phase 3 · sources preserved in /opt/nexus/nexus/scripts/output/audrey_copy/menu_strategy/ · backups in /tmp/playbook_*_pre_session_9_*.html

✅ Bricks Correction Log (2026-05-02)

This playbook was authored when the site was on Oxygen Builder. After the May 2026 cutover to Bricks Builder 2.3.2 on bricks.callbrightside.com, the following corrections apply:

Original (stale)Corrected (current)
Oxygen Builder + ct_builder_shortcodesBricks Builder 2.3.2 + _bricks_page_content_2 postmeta
WordPress nav menu (menu-main_top)Bricks header template (currently PID 105 via functions.php force-render; swap pending)
Sewer Camera Inspection — NEWLIVE PID 8 (already built)
Emergency Plumbing — NEWLIVE PID 12 (already built)
Sewer Line Replacement — LIVE needs contentNEEDS BUILD on Bricks (was on Oxygen, not yet ported)
Service Areas dropdown proves Oxygen supports nestingBricks 2.3.2 supports nested Dropdown element natively in Nav (Nestable) per Perplexity research, May 2026 — see codebase doc §50

Current page inventory snapshot (Bricks, 2026-05-02)

LIVE service pages (11): Sewer Camera Inspection (PID 8), Sewer Repair (286), Trenchless (291), Sewer Cleaning (287), Drain Cleaning (288), Water Heater Repair (292), Sump Pump (289), Emergency Plumbing (12), Leak Repair (290), Gas Line Repair (468), Water Softeners & Filtration.

NEEDS BUILD (7): Sewer Line Replacement, Sewer Cleanout, Hydro Jetting, Clogged Drain Service, Water Heater Replacement, Tankless Water Heaters, Burst Pipe Repair, Fixture Repair.

LIVE locations (15): Overland Park (258), Lenexa (285), Olathe (294), Leawood (293), Shawnee (295), Merriam (296), Mission (297), Prairie Village (298), Kansas City (299), Spring Hill (300), Edgerton (301), Gardner (302), De Soto (303), Bonner Springs (304), Stilwell (305).

🧱 Section 11 β€” Bricks Build Execution (2026-05-02 v1)

Authoritative guide for actually building the menu in Bricks 2.3.2. Born from 3 failed API attempts on May 2 2026 where Claude shipped broken headers based on wrong assumptions about Bricks element types. Documents the REAL element type catalog + the UI-build path Robert uses + the verification ladder for any future API rebuild.

🚨 11.1 β€” Why this section exists

May 2 2026: Claude attempted to programmatically build new header (PID 551) with dropdowns for Services + Locations. Build shipped to live, broke homepage visually. Robert called it out with screenshots. Root cause:

βœ… 11.2 β€” PROVEN Bricks 2.3.2 element types in this install

Inventoried via meta-full across 17 production PIDs (8/12/105/106/157/286-292/533/535/539/542/545):

Element name Use for Count Found in PIDs
sectionTop-level page sections144All
containerEdge-to-edge horizontal rows6105, 106, 157, 286
blockGeneric flex/grid layout wrappers478Most
divLightweight block wrapper2105, 106
imageLogo, hero, photos389All
headingH1-H6 headings337Most
text-basicParagraph text (default body element)531Most
textGeneric text element46292
text-linkInline link (used in nav-nested)4105 only
buttonCTA button (Call, Book, etc)49Most
nav-nestedBricks Nestable Nav (the modern nav element)1105 only
toggleOpen/close button (hamburger)2105 only

❌ 11.3 β€” REJECTED element types (do NOT use)

Element name Failure mode Burned
dropdownPostmeta accepts. Frontend doesn't render. Children render as inline visible text.2026-05-02
nav-linkRenders as red error box: "nav-link: PHP class does not exist".2026-05-02
rich-textPHP class does not exist. Use text-basic instead.2026-05-02
nav-menuUntested. Probe with Playwright DOM check before using.n/a

🎯 11.4 β€” Target spec (consolidated from Β§4)

[LOGO] [Services β–Ό] [Locations β–Ό] [About Us] [πŸ“· FREE Camera Inspection] [Call (913) 963-1029]

Services dropdown (5 sub-categories, only LIVE pages):
  Sewer:           Sewer Camera Inspection / Sewer Repair / Trenchless / Sewer Cleaning
  Drains:          Drain Cleaning
  Water Heaters:   Water Heater Repair
  Emergency:       Emergency Plumbing / Sump Pump Emergency
  Other Services:  Leak Repair / Gas Line Repair

Locations dropdown (15 cities, 2 columns):
  Col 1: Overland Park / Lenexa / Leawood / Olathe / Shawnee / Merriam / Mission / Prairie Village
  Col 2: Kansas City / Spring Hill / Edgerton / Gardner / De Soto / Bonner Springs / Stilwell

Mobile (under 991px): hamburger toggle β€” menu overlay full-screen, dropdowns become accordion (tap to expand inline).

πŸ“‚ 11.5 β€” Recommended dropdown approach (3 paths)

Since dropdown doesn't exist, dropdowns must be built another way.

Path Ξ± β€” UNTESTED, try first

Nested nav-nested as a child of a parent text-link. Bricks docs suggest this for sub-menus. Risk: may not toggle without custom JS β€” probe with Playwright FIRST.

Path Ξ² β€” proven pattern

block + heading + JS toggle (modeled on Snippet 71 FAQ accordion). Custom JS toggles .is-open class on click; CSS controls visibility. Pro: proven works. Con: another custom JS layer.

Path Ξ³ β€” Robert's chosen path

Manual UI build in Bricks builder. Robert drags real Bricks elements via the visual UI. Eliminates element-type guessing entirely.

🧹 11.6 β€” EXTREME MICROSTEPS for Robert's manual UI build (PID 619)

πŸ“Œ Path Z chosen 2026-05-03: work in PID 619 "Header" (fresh empty draft) β€” NOT PID 551 "Main Header v2" (the older broken 52-element rebuild from May 2). Cleanup of 551 happens later. All steps below reference PID 619.
πŸ“‚ STEP 0 β€” Open Bricks editor on PID 619 (10 sub-steps)
  1. 0.1 🌐 Open browser. Navigate to https://bricks.callbrightside.com/wp-admin/.
  2. 0.2 πŸ”‘ Log in with your WP admin credentials if not already logged in.
  3. 0.3 🧭 In the left WP admin sidebar, hover/click "Bricks".
  4. 0.4 πŸ“œ Click submenu "Templates" (or paste URL edit.php?post_type=bricks_template in browser bar).
  5. 0.5 πŸ”Ž In the templates list, find the row titled "Header" with status Draft and ID 619.
  6. 0.6 πŸ–±οΈ Hover that row. Buttons appear: Edit | Quick Edit | Trash | View | Edit with Bricks.
  7. 0.7 ▢️ Click "Edit with Bricks". The Bricks editor loads in a new tab/window.
  8. 0.8 ⏳ Wait 3-5 seconds for the canvas to render. You'll see: top toolbar (logo, save, preview, device toggles), left "Structure" panel, center white canvas, right "Settings" panel.
  9. 0.9 πŸ‘€ Confirm the Structure panel on the left is empty (template 619 has no elements yet β€” that's expected).
  10. 0.10 βœ… You're in. Ready for Step 1.
βž• STEP 1 β€” Add the <header> section (8 sub-steps)
  1. 1.1 πŸ” In the left toolbar of the Structure panel, click the "+" icon (Add Element). The Elements panel opens.
  2. 1.2 ⌨️ Type section in the search bar at the top of the Elements panel.
  3. 1.3 πŸ–±οΈ Drag the "Section" element onto the empty canvas (or click it once).
  4. 1.4 πŸ“‹ With the Section selected, right panel switches to settings. You see tabs: Content | Style | Settings.
  5. 1.5 🏷️ Click "Settings" tab β†’ find "HTML tag" β†’ change from "section" (default) to "header".
  6. 1.6 🎨 Click "Style" tab β†’ "Background" sub-section β†’ "Color" β†’ pick white #FFFFFF.
  7. 1.7 πŸ“ Style tab β†’ "Spacing" sub-section β†’ "Padding". Enter values per breakpoint:
    • πŸ–₯️ Desktop (default): top=12, right=24, bottom=12, left=24 (px)
    • πŸ“± Click tablet icon in top toolbar β†’ top=10, right=16, bottom=10, left=16
    • πŸ“ž Click mobile icon in top toolbar β†’ top=8, right=12, bottom=8, left=12
    • ↩ Click desktop icon to return to default editing.
  8. 1.8 βœ… Section header ready in Structure panel.
πŸ“¦ STEP 2 β€” Add Container (flex layout) inside Section (7 sub-steps)
  1. 2.1 πŸ–±οΈ In Structure panel, click the Section to select it.
  2. 2.2 βž• Click "+" inside the Section row OR drag "Container" element onto the Section in canvas.
  3. 2.3 πŸ“‹ Click the new Container in Structure to select it.
  4. 2.4 🎨 Style tab β†’ "Layout" sub-section:
    • Direction = Horizontal (row icon)
    • Align Items = Center
    • Justify Content = Space Between
  5. 2.5 πŸ“ Style tab β†’ "Sizing" sub-section: Width = 100%, Max-Width = 1280px.
  6. 2.6 ↔️ Style tab β†’ "Spacing" β†’ Margin: top=0, right=auto, bottom=0, left=auto (centers the container).
  7. 2.7 βœ… Container ready. You should see the Section in Structure with one Container inside.
🎲 STEP 3 β€” Logo (Block + Image element) on the LEFT (10 sub-steps)
  1. 3.1 πŸ–±οΈ Click the Container in Structure to select it.
  2. 3.2 βž• Drag "Block" element INSIDE the Container (this becomes the logo wrapper).
  3. 3.3 πŸ–±οΈ Click the new Block in Structure.
  4. 3.4 βž• Drag "Image" element INSIDE the Block.
  5. 3.5 πŸ–±οΈ Click the Image element.
  6. 3.6 πŸ–ΌοΈ Content tab β†’ "Image" β†’ click "Choose Image". Media library opens.
  7. 3.7 πŸ”Ž Search/find the BSP horizontal logo (attachment ID 28). Click it. Click "Select".
  8. 3.8 πŸ”— Content tab β†’ "Link Type" β†’ "URL" β†’ enter / (homepage).
  9. 3.9 πŸ“ Style tab β†’ Sizing:
    • πŸ–₯️ Desktop: Width = 280px
    • πŸ“ž Switch to mobile icon: Width = 150px
    • ↩ Switch back to desktop icon.
  10. 3.10 βœ… Logo done. Should appear on left of canvas.
⚑ STEP 4 β€” RECOMMENDED PATH Ξ΄: Drop "Nav Menu" element + wire WP menu (~30 seconds)
🎯 Path δ is the new primary path per Perplexity research 2026-05-03 (msg_1777811516943) confirming Bricks 2.3.2 has a built-in "Nav Menu" element that pulls registered WP menus with full nested submenu rendering, native hover dropdowns, and built-in mobile accordion. CC pre-created 4 WP menus via REST API for testing. Build time: ~30s vs ~30-60 min manual Nav Nestable (Path γ, kept below as fallback).
  1. 4.1 πŸ–±οΈ In Bricks editor, click Container in Structure panel.
  2. 4.2 πŸ” Element search panel β†’ type nav menu (with space) or just menu.
  3. 4.3 πŸ–±οΈ Drag "Nav Menu" element INTO the Container, positioned middle (between Logo Block and where Call CTA will go). NOT "Nav (Nestable)" β€” that's the manual path.
  4. 4.4 βš™οΈ Click the new Nav Menu in Structure β†’ right panel switches to its settings.
  5. 4.5 πŸ“‹ Settings tab β†’ "Menu" dropdown β†’ select one of the 4 pre-built WP menus:
    WP Menu Name ID Test purpose
    Bricks Test - Sewer Submenu6Simplest β€” 4 flat items, smallest test
    Bricks Test - Locations7Flat 15 cities, 2-column test
    Bricks Test - Services Hierarchy83-level nesting test (Services β†’ Sewer β†’ 4 services)
    Bricks Main Menu9Production: full Services + Locations + About Us + CTA
  6. 4.6 🎨 Settings tab β†’ adjust dropdown trigger if needed:
    • Desktop: hover to open submenu (Bricks default)
    • Mobile: tap-to-open accordion (Bricks default)
    • If neither default works β†’ "Submenu Trigger" setting may be exposed
  7. 4.7 πŸ“ Style tab β†’ set typography + colors:
    • Font family = Inter (per playbook brand)
    • Top-level link color = #1D1760 (navy)
    • Hover color = #30C5FF (cyan blue accent)
    • Submenu background = white or transparent (Bricks dropdown default)
  8. 4.8 πŸ§ͺ Smart test sequence to validate Path Ξ΄ works:
    1. Save + preview with Menu = "Bricks Test - Sewer Submenu" (ID 6) β€” expect 4 inline links visible. If renders βœ“ Bricks does pull WP menus.
    2. Switch to "Bricks Test - Services Hierarchy" (ID 8) β€” hover "Services" expects dropdown with 5 sub-categories; hover "Sewer" expects 4 child services. If renders βœ“ deep nesting works.
    3. Switch to "Bricks Main Menu" (ID 9) β€” production ready. Save + publish 619.
    4. Signal Claude go 619 for the PHP hook swap.
  9. 4.9 βœ… Done. Total build time: ~30 seconds for the menu element. No 35 sub-step manual Nav Nestable required.
  10. 4.10 ⚠️ If "Nav Menu" element doesn't appear in Bricks 2.3.2 elements panel: fallback to Path γ (Step 4-FALLBACK below). Element search should find it via `nav menu`. If not, an add-on may need activation.
πŸ“œ STEP 4-FALLBACK β€” Path Ξ³: manual Nav (Nestable) build (only if Path Ξ΄ unavailable)
πŸ“Œ Use this only if Step 4 Path Ξ΄ Nav Menu element doesn't render WP menus or the element doesn't exist. Per playbook 11.4 and Bricks Correction Log canonical PIDs. ~30-60 min build time vs ~30s for Path Ξ΄.
  1. Ξ³.1 In Element search type nav.
  2. Ξ³.2 Drag "Nav (Nestable)" INTO the Container after the Block (logo).
  3. Ξ³.3 Settings tab β†’ Breakpoint = mobile_landscape (collapse below 991px).
  4. Ξ³.4 5A β€” Services parent + 5 sub-categories (11 LIVE pages, grouped)
    1. Drag Nav Item, Label = Services, Link empty (parent).
    2. Inside it, drag NESTED Nav (Nestable).
    3. Sewer (4): Camera Inspection (PID 8), Repair (286), Trenchless (291), Cleaning (287)
    4. Drains (1): Drain Cleaning (288)
    5. Water Heaters (1): Water Heater Repair (292)
    6. Emergency (2): Emergency Plumbing (12), Sump Pump (289)
    7. Other Services (3): Leak Repair (290), Gas Line (468), Water Softeners (469)
    8. NEEDS BUILD pages β€” DO NOT add: Sewer Line Replacement, Sewer Cleanout, Hydro Jetting, Clogged Drain, WH Replacement, Tankless WH, Burst Pipe, Fixture Repair
    9. Septic β€” never add (BSP doesn't offer)
  5. Ξ³.5 5B β€” Locations parent + 15 cities in 2 columns
    1. Drag Nav Item, Label = Locations, Link empty.
    2. Inside, NESTED Nav with 2-column layout (Display = grid, Columns = 2).
    3. Col 1: Overland Park (258), Lenexa (285), Olathe (294), Leawood (293), Shawnee (295), Merriam (296), Mission (297), Prairie Village (298)
    4. Col 2: Kansas City (299), Spring Hill (300), Edgerton (301), Gardner (302), De Soto (303), Bonner Springs (304), Stilwell (305)
  6. Ξ³.6 5C β€” About Us top-level Nav Item, Link = /about-us/ (PID 535).
  7. Ξ³.7 5D β€” πŸ“· FREE Camera Inspection top-level styled CTA: bg #FFEA00, color #1D1760, padding 8/14/8/14, border-radius 6px, link to /sewer-camera-inspection/.
  8. Ξ³.8 ⚠️ Maintenance cost: editing menu items requires reopening Bricks editor. Path Ξ΄ allows menu edits via WP admin Appearance β†’ Menus without touching Bricks.
πŸ“± STEP 6 β€” Hamburger Toggle (mobile-only) (8 sub-steps)
  1. 6.1 πŸ–±οΈ Select Container in Structure (Toggle goes after Nav, inside Container).
  2. 6.2 πŸ”Ž Element search β†’ type toggle.
  3. 6.3 πŸ–±οΈ Drag "Toggle" AFTER the Nav (Nestable) inside Container.
  4. 6.4 βš™οΈ Settings tab β†’ "Open icon" β†’ pick ion-md-menu (hamburger lines).
  5. 6.5 βš™οΈ Settings tab β†’ "Close icon" β†’ pick ion-md-close (X).
  6. 6.6 πŸ‘οΈ Settings tab β†’ "Conditions" sub-section β†’ set visibility:
    • πŸ–₯️ Desktop: HIDE
    • πŸ“± Tablet: HIDE
    • πŸ“ž Mobile Landscape and below: SHOW
  7. 6.7 πŸ”— Settings tab β†’ "Toggle target" β†’ select the Nav (Nestable) element so toggle controls it.
  8. 6.8 βœ… Toggle ready. Will only appear below 991px viewport.
☎️ STEP 7 β€” Call CTA Button on the RIGHT (10 sub-steps)
  1. 7.1 πŸ–±οΈ Click Container in Structure (Button is last child, far right).
  2. 7.2 πŸ”Ž Element search β†’ type button.
  3. 7.3 πŸ–±οΈ Drag "Button" INSIDE Container, after Toggle (or after Nav if no Toggle).
  4. 7.4 πŸ“ Content tab β†’ "Text" = Call (913) 963-1029.
  5. 7.5 πŸ”— Content tab β†’ "Link Type" = "URL" β†’ enter tel:+19139631029.
  6. 7.6 🎨 Style tab β†’ Background β†’ Color = #30C5FF (cyan blue, BSP secondary).
  7. 7.7 ✏️ Style tab β†’ Typography β†’ Color = #1D1760 (navy).
  8. 7.8 πŸ“ Style tab β†’ Spacing β†’ Padding = top=12, right=24, bottom=12, left=24 (px).
  9. 7.9 πŸ”˜ Style tab β†’ Border β†’ Border Radius = 8px.
  10. 7.10 βœ… Call button styled and visible right side.
πŸ’Ύ STEP 8 β€” Save AND Publish (CRITICAL β€” both, not just save) (5 sub-steps)
  1. 8.1 πŸ’Ύ Press Ctrl+S (or click the Save button in top toolbar).
  2. 8.2 ⏳ Wait for "Saved" confirmation in toolbar.
  3. 8.3 ⚠️ Bricks templates in DRAFT status will NOT render via PHP hook. Must publish.
  4. 8.4 πŸ“€ In top right of Bricks editor, find status dropdown β†’ change from Draft to Publish. Click Save again.
    Alternative path: exit Bricks editor β†’ in WP admin Templates list, hover row 619 β†’ click Quick Edit β†’ Status = Published β†’ Update.
  5. 8.5 βœ… Template 619 is now published and ready to render.
πŸ“· STEP 9 β€” Preview verification at 3 viewports (12 sub-steps)
  1. 9.1 πŸ‘οΈ Click the "Preview" eye icon in Bricks toolbar (or open /water-heater-repair/ in another tab).
  2. 9.2 πŸ–₯️ Desktop check (1440px):
    • Logo visible LEFT
    • 4 nav items in MIDDLE: Services, Locations, About Us, πŸ“· FREE Camera Inspection
    • Call (913) 963-1029 button RIGHT
    • FREE Camera Inspection chip is yellow
  3. 9.3 πŸ–±οΈ Hover "Services" β†’ flyout dropdown shows 11 services.
  4. 9.4 πŸ–±οΈ Hover "Locations" β†’ flyout shows 15 cities.
  5. 9.5 βœ… Click any service link β†’ confirms it navigates to correct URL.
  6. 9.6 ↩️ Back to header.
  7. 9.7 πŸ“± Tablet check (~768-991px): resize browser narrower or use Bricks tablet device toggle. Confirm:
    • Header still horizontal
    • Padding tighter
    • Nav still visible (above 991px breakpoint)
  8. 9.8 πŸ“ž Mobile check (375-767px): resize narrower. Confirm:
    • Hamburger icon (☰) appears RIGHT of logo
    • Nav (Nestable) is hidden in collapsed state
    • Click hamburger β†’ Nav slides/expands
    • Tap Services β†’ sub-menu expands accordion-style
    • Tap close (βœ•) β†’ Nav collapses
  9. 9.9 🎨 Verify brand colors render correctly:
    • Yellow chip = #FFEA00
    • Call button bg = #30C5FF
    • Text on dark elements = #1D1760 navy
    • Body font = Inter
  10. 9.10 🎯 Tap targets at mobile: minimum 44Γ—44 px per WCAG 2.5.5 AAA.
  11. 9.11 🚫 Verify "Septic" is NOT in any menu (BSP doesn't offer it).
  12. 9.12 βœ… All 3 viewports look right. Ready to ping Claude.
πŸ’¬ STEP 10 β€” Ping Claude for the PHP swap (4 sub-steps)
  1. 10.1 ⌨️ In your Claude chat, type: go 619.
  2. 10.2 πŸ€– Claude executes the pre-staged swap chain (~62 sec wall-clock):
    • Pulls live style.css fresh (preserves all 25 Inter cluster ships)
    • install_child_safe with modified functions.php (line 136: 105 β†’ 619)
    • Footer hook line 566 (106) untouched
    • LSCWPΓ—3 cache purge + Cloudflare zone purge_everything
    • Sleep 5s for cache to clear
    • Playwright DOM-probe verify NEW header brxe-IDs differ from PRE-swap on 6 page-class samples (homepage, Cluster L, Cluster S, Cluster N, WH, info)
    • R20.5 canary across 38 PIDs (drift expected = 0; PHP-only edit, no postmeta touched)
    • Bus receipt with verification table
  3. 10.3 πŸ‘€ Claude bus-posts result table. You visually ACK on 2-3 sample pages (Claude provides URLs).
  4. 10.4 βœ… Phase I I2 closes. Header live across all 38 pages.
πŸ”„ Rollback if anything goes wrong: Pre-swap functions.php saved at /tmp/bricks-child/functions_pre_swap_105.php. Claude can restore in ~10 sec via install_child_safe + cache purge. Just say revert 619.
πŸ“š Why this is now extreme microsteps: earlier 11.6 was 11 macro-steps with embedded sub-bullets. Robert requested deeper granularity 2026-05-03 during live build. Each major step now has 4-35 numbered sub-steps with explicit UI labels, exact values, and decision points. Closes the methodology gap between "playbook level" and "screen-level guidance".

πŸ”Ž 11.7 β€” Verification ladder (mandatory for any API rebuild)

Layer Tool Pass criterion Failure means
1. Postmeta saveBSP plugin native_save_with_external_verifyok=True, count matchesPostmeta corruption (rare)
2. Postmeta read-backGET /wp-json/bsp/v2/db/meta-full?post_id={pid}Element count matches, names preservedSanitizer stripped names
3. Rendered HTMLcurl + grep for element labelsLabels appear in HTMLElement name not registered (PHP class missing)
4. DOM class verify πŸ”΄Playwright querySelector('.brxe-{element_name}')Count matches expected for that typeElement rendered as wrong class β†’ widget not active. This is what caught the dropdown bug.
5. Visual screenshot πŸ”΄Playwright full_page screenshot at desktop/tablet/mobileRobert eyeball ACKLayout broken β†’ CSS/positioning fix

Layers 4 + 5 are non-negotiable for header/nav/dropdown work. Skipping them is what burned May 2 session.

πŸ›‘οΈ 11.8 β€” Rollback procedure (30 seconds)

# 1. Edit /tmp/bricks-child/functions.php line 136:
#    bsp_render_bricks_template(551, 'header');  β†’  bsp_render_bricks_template(105, 'header');
# 2. Deploy via Snippet 67 BSP Theme Installer (POST /bsp/v2/theme/install-child)
# 3. Purge: /bsp/v2/cache/purge + Cloudflare API purge_cache
# 4. Verify: live homepage shows brxe-f5a4a5 (PID 105 root) within 10s

Working revert script: C:\Users\dovew\session_9_header_revert.py (used May 2 2026 at 14:27 to restore live site after broken PID 551 ship).

πŸ“ 11.9 β€” Lessons codified

  1. Postmeta accept β‰  element type valid. Always Playwright DOM-class verify after save.
  2. Perplexity guidance can hallucinate element names. Trust but verify against the actual install.
  3. The proven element type catalog (Β§11.2) is the source of truth. If a type isn't in the catalog, probe + DOM-class verify before using.
  4. Verification ladder Β§11.7 is mandatory. Layers 4 + 5 catch what 1-3 miss.
  5. Robert's UI-build path (Ξ³) is the highest-confidence approach. Bricks builder UI uses real element classes by definition β€” no guessing.

πŸ“š 11.10 β€” Cross-references