Easter's Lock — Gate 2: Brand & CSS Preview
Prepared by RC Digital Consultancy · Visibility Engine

The Look + Feel of Your New Pages

Brand palette extracted directly from easterslock.com. CSS built with all 10 WordPress fixes baked in. Three sample pages show how the hub, city, and PAA blog page types will render across all 1,481 new pages. Sample content is illustrative — Bob's actual pages will have unique location data + expert quotes.

Brand Palette (Extracted from easterslock.com)

#C62121
Primary Red
#911A1D
Accent (Hover)
#18242E
Dark Navy / Text
#4C4C4C
Mid Gray
#D8D8D8
Light Border
#FAF8F4
Cream Surface

Fonts: IBM Plex Sans for body + UI · EB Garamond for display + H1/H2 headings + step numbers. Both fonts already in use on easterslock.com, so new VE pages match the existing site visually.

Click Through the 3 Sample Pages

H
Hub Page · 2,000+ words
Residential Locksmith Hub
Top-of-funnel service hub. Trust bar · TOC · process steps · price comparison · expert quote · FAQ · CTA. The template every state + city + 24 other hubs follow.
C
City Page · 1,500+ words
Residential Locksmith Towson MD
Location-specific page. Local landmarks · neighborhood-specific examples · service area pricing · related services in the same city · neighbor city cross-links · FAQ + CTA.
P
PAA Blog · 1,200+ words
How Much Does Rekeying Cost in Maryland?
AI-citable blog. Answer capsule · pricing table · comparison table · expert quote · 5-mistake list · DIY comparison · related-reading · 3-question FAQ. Optimized for AI Overviews.

10 WordPress Fixes Baked Into the CSS

  1. CSS minified to a single line — WordPress's wpautop filter would otherwise inject <br> tags between rules
  2. Whitespace collapsed before publish — no blank lines between HTML tags (avoids <br> insertion)
  3. Every selector scoped under .preview-wrapper / .city-content / etc. — no bare global resets that would destroy the WordPress theme
  4. FAQ accordion uses inline !important styles on every element — theme combined CSS would otherwise override the button alignment
  5. TOC, mistakes list, and numbered lists use <div>, never <ol>/<li> — WordPress / Salient otherwise renders double numbers
  6. CTA button hover color fixed — theme would otherwise make hover invisible (white text on white)
  7. No visible breadcrumb in HTML — schema-only via JSON-LD (breadcrumbs look broken with theme styling)
  8. Conservative margins — 24px max on section dividers (not 60px) because WordPress adds its own spacing
  9. All tables wrapped in .table-scroll + matching CSS rule — prevents mobile overflow without breaking column alignment
  10. Process-step numbered circles have explicit width on mobile (not just min-width) — otherwise they stretch into oblongs

Approve or send back changes

Look at the 3 sample pages. If the look + feel is right, reply "Gate 2 approved" and we move to Gate 3 (page structure — 3 layout options for each page type).

If anything's off (color, font, spacing, section order, button copy, anything), tell me what needs to change and I'll re-render.