Full Game Plan

Complete architecture, technical stack, phased rollout plan, and current status.

Custom Proposal Guidelines (V2 Template)

This is the definitive reference for building V2 proposals at scale across 80+ industries. Every section, component, content rule, and formatting standard from the master template (Lookout Pest Control V2) is documented below. Follow this exactly when creating new proposals.

1. Page Structure & Layout

Overall Architecture

• Single-page HTML app. One file per proposal (index.html). No external JS frameworks.
• Fixed top bar (OA blue, #0c4da2) with OA white logo + refresh button.
• Fixed left sidebar (260px, #f3f3f6 background) with prospect logo and tab navigation.
• Main content area (margin-left: 260px) with white background.
• Tab-based navigation: clicking a sidebar item shows the corresponding <div class="tab-content"> and hides all others.
• Font: Inter (Google Fonts), weights 400/500/600/700/800.

Top Bar

• Background: #0c4da2 (solid OA blue). Fixed position, full width, z-index 200.
• Left: Hamburger button (hidden on desktop, visible on mobile). OA white logo image (36px height).
• Right: Refresh button (36x36px circle, white semi-transparent, SVG refresh icon, spin animation on click then location.reload(true)).
• Min-height: 56px. Accounts for iOS safe area inset (env(safe-area-inset-top)).

Sidebar

• Width: 260px. Background: #f3f3f6. Border-right: 1px solid #e2e8f0.
• Desktop: sidebar permanently visible. No collapse, no hamburger. transform: translateX(0).
• Mobile (<=768px): collapsible. Hamburger button appears. Sidebar slides in/out via transform: translateX(-100%). Overlay backdrop on open.
• Logo Area: White background, centered. Top: "A Custom Proposal Built For:" label (12px, bold, #1a1a2e). Below: prospect company logo (max-width 130px, height 50px, object-fit: contain). Bottom border: 2px solid #0a3270.

Sidebar Navigation Items

• Section Headers: Dark blue gradient bar (linear-gradient(135deg, #0a3270, #0c4da2)), white text, 12px uppercase, letter-spacing 1.5px, font-weight 700. Full-width (no margin). These are NOT clickable.
• Nav Items: 15px font, 500 weight, color #4a4a5a. Margin: 2px 10px, border-radius: 8px. Each has an inline SVG icon (16x16, fill: currentColor) + text label.
• Hover: background: rgba(59,125,216,0.12), rounded 8px.
• Active: Blue gradient (linear-gradient(135deg, #3b7dd8, #5a9be6, #3b7dd8)), white text, box-shadow: 0 2px 8px rgba(59,125,216,0.3), rounded 8px. NO border-left (button-style, not full-width highlight).
• "How Do I Get Started?" CTA button: Green gradient (#059669 to #10b981), white text, 15px bold, full-width, play icon SVG. Sits at the bottom of the nav section in its own padded container.

Sidebar Tab Structure (2 Sections + 2 Standalone + CTA)

• Section 1 "Overview & Introduction": Overview, About Your Local Market(s), Competitor Analysis
• Section 2 "How We Can Help": Sales, Lead Generation, Sales Operations, Service Operations, Vendor Management, Supply Chain, HR / Certification / Compliance
• Standalone (below sections): Custom Dashboard with ROI, Your Process Playbook
• CTA Button: "How Do I Get Started?"

2. Overview Tab

This is the default active tab. It introduces OA and sets the stage for the proposal. Content appears in this exact order:

2A. Hero Section

• CSS class: .hero. Dark blue gradient (#0a3270 to #0c4da2 to #1a2744), 16px border-radius, 40px/32px padding.
• Animated glow effects (radial gradients) behind content.
• Badge: "Custom Proposal for [Company Name]" in a pill badge (11px uppercase, 1.5px letter-spacing, semi-transparent blue background).
• H1: "Outsource Access" (28px, 800 weight, white). This is ALWAYS "Outsource Access" ... NOT the prospect company name.
• Subtitle: "Your growth partner specializing in the [industry] industry" (16px, white, 0.9 opacity). Industry-specific, written from OA's perspective.

2B. "We Get It" Card

• Standard card with <h2> header: "We Get It. Growing Is Exciting but Challenging."
• Opening paragraph addressing the prospect's growth pains. Use ellipsis (...) for pauses, not em dashes.
• 3 bullet points (<ul class="bullets">) explaining the value prop:
  (1) The faster the company grows, the harder it is to keep up with back-office work
  (2) A dedicated, full-time remote professional who learns your business inside and out
  (3) Managed by our operations team so your team doesn't have to
• Closing paragraph: "Starting at $12-$15/hr, fully managed." followed by "No long-term contracts. No overhead. No HR headaches. 40 hours a week, exclusively for [Company Name]."
• DO NOT include an "About [Company]" section. Removed per Brad directive. Go straight to "We Get It."

2C. "What We've Done for Companies Like Yours" Card

• Card with <h2> header. Inside: a 3-column .stats-bar grid showing real OA client results.
• Each .stat-card: white bg, #0a3270 border, 3px top accent bar. .value (22px bold, #0c4da2 color) + .label (11px uppercase, #4a4a5a).
• Stats should be relevant to the prospect's industry. Examples: "$500K+/yr Incremental Revenue Generated", "Full Routing Logistics Takeover", "100% Compliant Credentialing".
• Below stats: small centered note: "Results from real OA [industry] and field service clients." (14px, #4a4a5a).
• DO NOT include a stats bar at the top of the Overview tab. No revenue/employee count/review stats bar. The only stats appear inside this card.

2D. CEO Video Card

• Card with centered content, 32px padding. NO <h2>/<h3> header bar.
• Caption above video: "A Message from Brad Stevens, Founder & CEO" (17px, 600 weight).
• Video wrapper: max-width: 90%; margin: 0 auto. Inside: .video-container (60% width, 33.75% padding-bottom for 16:9). On mobile: 100% width, 56.25% padding-bottom.
• Vimeo iframe: https://player.vimeo.com/video/876258402
• Caption below video (bold, 15px, 700 weight): "Seven years in business, over 5 million hours delivered, 500+ team members across 85+ industries."

2E. "What Makes Us Different" Card

• Card with <h2> header. Content: <ul class="check-list"> with green checkmark SVGs.
• 4 items, each with a bold lead phrase + explanation:
  (1) Fully managed ... you don't manage the VA.
  (2) No long-term contracts ... month-to-month.
  (3) We document everything ... custom OA Playbook.
  (4) Strategic insights, not just task execution ... identifies opportunities.
• Checkmark SVG: 18x18, fill: var(--green) (#10b981).
• Each item wrapped in <div> for proper flex alignment. Use ellipsis (...) for pauses.

2F. "Explore What We Can Do" Card

• Card with <h2> header: "Explore What We Can Do for [Company Name]". Light border (1px solid #e0e0e0).
• Paragraph explaining that the sidebar contains 50+ specific tasks. Then a line listing all task categories separated by • characters.

2G. Company Website Card

• Card with <h2> header: "Your Company Website".
• .link-row: globe SVG icon + anchor link to the prospect's website. Link color: #0c4da2.
• DO NOT include a "Software Stack" section. Removed per Brad directive. Only re-add once confirmed software is known for a prospect.

3. About Your Local Market(s) Tab

3A. Market Introduction Card

• Card with <h2>: "Your Local Market: [City] & Greater [Metro], [State]"
• 1-2 paragraph overview of the local market opportunity. Research-backed, industry-specific.

3B. Market Stats Grid

• 4-column grid (.market-stat-grid). Each .market-stat: white bg, #0a3270 border, 3px bottom accent bar.
• .val: 32px, 800 weight, #0c4da2. .lbl: 13px, #4a4a5a.
• Standard 4 stats: Population, Population Growth %, Median Household Income, Homeownership Rate.
• Data must be verified from primary sources (Census, BLS, local government). Flag with [VERIFY] if uncertain.

3C. "Why This Matters" Checklist Card

• Card with <h3>: "Why This Matters for [Company Name]"
• <ul class="check-list"> with blue checkmark SVGs (20x20, fill: #0c4da2). 4-5 items.
• Each item: Bold lead phrase + colon, then explanation. Industry-specific, connecting market data to the prospect's opportunity.
• Last item should always connect back to OA: "That's where we come in."

3D. Growth Neighborhoods Card

• Card with <h3>: "Growth Neighborhoods to Watch"
• <ul class="growth-list"> with green upward-trend SVGs (18x18, fill: var(--green)).
• 3-5 specific neighborhoods/areas. Format: Neighborhood Name ... description of why it matters. Use ellipsis for pauses.
• Research real neighborhoods. Never fabricate location data.

3E. Seasonal Demand Pattern Card

• Card with <h3>: "Seasonal Demand Pattern ([Region])"
• <ul class="info-list"> with blue dot bullets (CSS ::before pseudo-element, 6px circle, #0c4da2).
• 3-4 seasonal entries with bold date ranges and industry-specific demand patterns.
• Final 1-2 items: insight about year-round consistency and how a VA maintains that.

4. Competitor Analysis Tab

4A. Introduction Card

• Card with <h2>: "Competitor Analysis: [Metro] & [Region]"
• 1-2 paragraphs explaining this is intelligence for competitive positioning, not just a list.

4B. Competitor Cards

• Each competitor: .competitor-card (white bg, #0a3270 border, rounded 12px, flex layout).
• Left side (.competitor-info): <h4> company name (17px, 600 weight), .detail line with city + website + brief description.
• Right side (.competitor-stats): scope indicator ("Local", "Regional", "National").
• Hover: border shifts to #0c4da2, subtle shadow, translateY(-1px).
• Include 4-8 real local competitors. Research actual businesses in the prospect's market. Never fabricate competitors.

5. Task Tabs (Sales, Lead Gen, Sales Ops, Service Ops, Vendor, Supply Chain, HR)

All 7 "How We Can Help" tabs follow the same structure. Each tab contains an intro card + a card wrapping multiple task blocks.

5A. Tab Introduction Card

• Card with <h2>: "[Category]: [Benefit-Oriented Tagline]"
• Examples: "Sales: Close More Deals, Faster" / "Lead Generation: Fill Your Pipeline Without Hiring a Marketing Team" / "Service Operations: Run a Tighter Ship Every Day"
• 1-2 sentences explaining the category's value proposition.

5B. Task Block Anatomy (CRITICAL -- follow exactly)

Each task block is a .task-block inside a parent .card. The parent card becomes transparent/borderless via CSS (.card:has(.task-block)). Multiple task blocks stack vertically inside the same card div.

5C. Task Block Content Rules

• Bullet points (2-3 per task): First bullet = what the VA does. Second bullet = why it matters / the business impact. Optional third for additional context.
• Example scenarios (1-2 per task): MUST be industry-specific, hyper-detailed, and tell a complete story. Include:
  • Specific day/time ("Wednesday afternoon", "Monday at 10:15 AM")
  • Real-sounding names ("Mrs. Garcia", "Tech Danny")
  • Real-sounding locations (use actual neighborhoods/streets from the prospect's market)
  • Specific dollar amounts and quantities
  • A clear before/after narrative showing the VA's impact
  • Reference to competitors by name where appropriate
  • The VA is always referred to as "the VA" or "[name] from [Company]"
• Some tasks may omit example scenarios (e.g., Referral Program, Appointment Confirmations). This is acceptable when the task is straightforward and the bullet points sufficiently explain it. But most tasks SHOULD have at least one detailed example.
• Meta tags: Every task MUST have hours and revenue tags. Software tag only when a specific tool is referenced.

5D. Standard Task Categories & Expected Task Count per Tab

• Sales (4 tasks): Speed-to-Lead Response, Quote Follow-Up Engine, Upsell/Cross-Sell Program, Renewal/Retention Calls
• Lead Generation (4 tasks): Google Review Generation, Social Media Management, Referral Program, Local SEO Optimization
• Sales Operations (3 tasks): CRM Data Cleanup, Daily KPI Dashboard, Pipeline Reporting
• Service Operations (4 tasks): Scheduling/Dispatch, Route Optimization, Appointment Confirmations, Post-Service Follow-Up
• Vendor Management (3 tasks): [Industry] Supplier Coordination, Insurance/License Tracking, Equipment/Fleet Vendors
• Supply Chain (3 tasks): Inventory/Reorder Management, Fleet/Vehicle Coordination, [Industry] Documentation (SDS, permits, etc.)
• HR / Certification / Compliance (4 tasks): Recruiting/Hiring Support, License/Cert Tracking, Safety Training/OSHA, New Employee Onboarding

5E. Industry Adaptation Rules

• Task names should be adapted to the industry. E.g., "Chemical Supplier Coordination" for pest control becomes "Materials Supplier Coordination" for construction, "Menu Vendor Coordination" for restaurants, etc.
• Example scenarios MUST reference industry-specific software (FieldRoutes for pest, ServiceTitan for HVAC, R365 for restaurants, etc.).
• Dollar amounts in examples should be realistic for the industry and company size.
• Regulatory references must be accurate: ADAI for Alabama pest control, OSHA for general, state licensing boards, etc.
• The 7 tab categories (Sales, Lead Gen, Sales Ops, Service Ops, Vendor, Supply Chain, HR) are STANDARD across all industries. Task blocks within each tab adapt to the industry, but the tabs themselves stay the same.

6. Custom Dashboard with ROI Tab

• Intro Card: <h2> "Your Client Dashboard: Full Visibility, Zero Guessing". Paragraph explaining every OA client gets a dedicated dashboard.
• Demo Screenshot: Centered <img> of the dashboard demo (client-dashboard-demo.jpg). Max-width 900px, rounded 12px, subtle shadow. Each proposal needs its own screenshot or uses the generic demo image.
• Interactive Demo Button: Blue gradient button (#0c4da2 to #48A7DB), "Click Here to Visit a Fully Interactive Client Demo Dashboard", links to https://marketing.outsourceaccess.com/client-dashboard-demo/. External link icon SVG.
• "What You'll See" Checklist Card: <h3> header, check-list with green checkmarks. 4 items: Real-time task tracking, Hours logged, Direct messaging, Performance metrics.

7. Your Process Playbook Tab

• Intro Card: <h2> "Your Process Playbook: Every Task Documented from Day One". Two paragraphs: first explains the playbook concept, second emphasizes it's custom-built for the prospect's company (not a generic template).
• Preview Image: Centered <img> of a playbook preview (playbook-preview.jpg). 60% width, max-width 400px, rounded, shadowed.
• "Why Clients Say" Checklist Card: <h3> header. check-list with green checkmarks. 5 items: You own it, Living document, Train future staff, Truly all processes documented, Included at no additional cost.
• Demo Link Card: Centered card with text "See what a real OA Process Playbook looks like:" and a blue button linking to the demo playbook Google Doc.

8. "How Do I Get Started?" Tab

This is the conversion page. Content appears in this order:

• CTA Section (top): .cta-section card. Green <h2> "Ready to Get Started?" (26px, 800 weight, #10b981). Description paragraph. Green gradient CTA button with pulsing animation linking to Summer's HubSpot booking link: https://meetings.hubspot.com/summer-baccay/meeting. Button text: "Book a 30-Minute Strategy Call".
• "Why Outsource Access?" Video Card: <h2> header. Brad's CEO video (same Vimeo embed as Overview). Brief description below.
• "The Outsource Access Difference" Card: <h3> header. Intro paragraph ("We're not a freelancer marketplace or a temp agency..."). check-list with 6 items: Dedicated full-time VA, Dedicated operations manager, Custom playbook, No long-term contracts, Inc. 5000 #326, Starting at $1,895/mo.
• "A Welcome from Summer" Card: <h3> header. Intro paragraph about Summer being the pest control specialist (adapt title to industry). .person-card with Summer's headshot (/assets/summer-baccay-headshot.png), name, and role. Summer's Vimeo welcome video below (60% width container, same pattern as CEO video).
• "Featured Resources" Card: <h3> header. 2 link rows: outsourceaccess.com and marketing.outsourceaccess.com.
• CTA Section (bottom): Identical to top CTA. Same booking link, same button text. Provides a second conversion point after reading all content.

9. Welcome Popover (Auto-Display on Load)

• Full-screen overlay (semi-transparent dark backdrop, z-index 10000). Centered white card (max-width 520px).
• Green accent bar at the top of the card (5px height, green gradient #1b5e20 to #43a047).
• OA black-text logo (not white, since card is white background).
• Green badge: "Custom Proposal" with checkmark SVG.
• Title: "Welcome to Your Custom Proposal" (22px, 700 weight).
• Content: "Here's what we built for you:" followed by a 3-item checklist with green checkmarks:
  (1) A quick overview of your business and local market
  (2) Section-by-section breakdown with specific examples
  (3) A demo of our client dashboard showing projected ROI
• Credibility line: "With 8 global and national awards and over 5 million hours of work delivered..."
• Navigation hint (icon + text): "Click the three lines in the top left to navigate each section."
• Green CTA button: "Got It, Let Me Explore".
• Close button: X in top-right corner (32px circle, light gray bg).
• Dismiss triggers: CTA button click, X button click, overlay background click. Fade-out animation (0.3s).
• Auto-displays on page load via an IIFE script at the bottom of the page. No localStorage persistence (shows every visit).
• Mobile sidebar auto-open: On mobile (<=768px), after a 300ms delay on DOMContentLoaded, the sidebar auto-opens. This happens BEHIND the welcome popover, so when the user dismisses the popover, they see the sidebar navigation immediately.

10. CSS & Styling Rules

Color Palette

• #0a3270 — Primary dark blue. Card headers, borders, bullet markers, section header bars.
• #0c4da2 — OA blue. Top bar, stat values, link text, accent backgrounds.
• #48A7DB — OA light blue. Buttons, hover states, tag backgrounds.
• #10b981 / var(--green) — Green. Checkmarks, CTA buttons, growth indicators.
• #f5c518 — Gold. Example scenario left border.
• #fffbe6 — Light yellow. Example scenario background.
• #1a1a2e — Near-black. Body text, headings in light backgrounds.
• #4a4a5a — Medium gray. Secondary text, descriptions, labels.
• #f3f3f6 / #f5f5f7 — Light gray. Page background, sidebar background.
• #ffffff — White. Cards, main content area, task block backgrounds.

Card Styling

• Background: white. Border: 1px solid #0a3270. Radius: 14px. Padding: 20px. Shadow: 0 2px 8px rgba(10,50,112,0.08).
• .card::before { display: none } — NO gradient blob overlays.
• <h2> and <h3> inside cards: negative margin to create full-width header bars. Background #0a3270, white text, top corners rounded.
• Hover: border shifts to #0c4da2, deeper shadow.

Typography

• Font: Inter, loaded from Google Fonts with weights 400, 500, 600, 700, 800.
• Body: 16px, line-height 1.7.
• Card paragraphs: 16px, line-height 1.8, color #1a1a2e.
• Task block bullets: 14px, line-height 1.6.
• Example scenarios: 14px, line-height 1.7.
• Meta tags: 12px, 600 weight.
• NEVER use light gray text. Minimum text color: #4a4a5a.

Responsive / Mobile Rules

• Breakpoint: 768px. Below this: sidebar hides, hamburger shows, main content goes full-width.
• Hero: padding shrinks to 28px/20px, h1 to 22px.
• Content: padding to 16px.
• Stats grid: 2 columns on mobile.
• Video container: 100% width, 56.25% padding-bottom on mobile (vs 60% width, 33.75% on desktop).
• Competitor cards: stack vertically (flex-direction: column).
• All containers: max-width: 100%; overflow-x: hidden to prevent horizontal scroll.
• Sidebar open/close: toggles body overflow, position fixed, and scroll preservation.

11. Content Rules & Writing Standards

• Audience-neutral language. Write for any industry. Replace pest-specific terms with industry-appropriate equivalents when adapting.
• No "About [Company]" section. Go straight from hero to "We Get It." Brad directive, permanent.
• No "Software Stack" section. Only include if the prospect's software is confirmed. Brad directive, permanent.
• No stats bar at top of Overview. No revenue/employee count/review bar above the hero. Stats only appear inside the "What We've Done" card.
• No cost comparison section. No side-by-side "Local Hire vs OA" cards. No savings banner. Removed per Brad directive.
• Hero H1 is always "Outsource Access." The badge says "Custom Proposal for [Company]." The subtitle says "Your growth partner specializing in the [industry] industry."
• Use ellipsis (...) for pauses, NEVER em dashes (---).
• All booking links go to Summer's HubSpot link: https://meetings.hubspot.com/summer-baccay/meeting. NEVER Brad's Calendly.
• Pricing language: "Starting at $12-$15/hr, fully managed" in the "We Get It" card. "$1,895/mo" in the Get Started checklist.
• Company references: Say "Outsource Access" (full name), not "OA." Exception: internal references in code/CSS class names.
• Example scenarios must feel real. Use actual street names, neighborhoods, and competitor names from the prospect's market. Never use placeholder text like "[Street Name]" or "[Competitor]" in the final proposal.
• Verify all data. Market stats, competitor info, regulatory references. Flag uncertain items with [VERIFY].
• Summer's title adapts to industry: "Pest Control Specialist" for pest, "Field Service Specialist" for HVAC/plumbing, etc. Her name and booking link stay the same.

12. Technical Setup & Deployment

• File location: /workspace/group/oa-proposals/public/{company-slug}v2/index.html
• Slug format: Lowercase company name, no spaces, no special characters. Append "v2". Examples: lookoutpestcontrolv2, corporate-facilities-managementv2.
• Deployment: Deploy to OA Cloudflare (account 79bf9918da35fa3f7d3a0bca83c0d0be), project oa-proposals. URL: proposals.outsourceaccess.com/{slug}/
• Meta tags required: og:title, og:description, og:image, og:url, og:type, og:site_name, twitter:card, twitter:title, twitter:description, twitter:image.
• OG image: Each proposal needs a custom 1200x630 PNG at {slug}/og-image.png.
• Favicon: Shared across all proposals at /favicon.ico.
• Apple touch icon: Shared at /oa-apple-touch-icon.png.
• Prospect logo: SVG preferred, hosted on sterling-media.pages.dev/prospect-logos/{company}.svg.
• Assets folder: Shared images (Summer headshot, dashboard demo, playbook preview) at /assets/.
• Title tag: "Custom Proposal for [Company Name] | Outsource Access"
• After creating a new proposal: Add a row to the Command Center overview table and the appropriate industry section table. Update proposal counts in stat cards.

13. Pre-Deploy Checklist

Every proposal must pass ALL items before going live:

• ☐ Hero badge says "Custom Proposal for [Company Name]" (not "Customized for")
• ☐ Hero H1 says "Outsource Access" (not the company name)
• ☐ No "About [Company]" section in Overview
• ☐ No stats bar at top of Overview (no revenue/employee count bar)
• ☐ No cost comparison cards or savings banner
• ☐ No "Software Stack" section (unless software confirmed)
• ☐ "We Get It" card present with correct bullet points and pricing
• ☐ CEO video present with bold caption below
• ☐ "What Makes Us Different" checklist present (4 items)
• ☐ "Explore What We Can Do" card present
• ☐ Company website link present
• ☐ Market tab has 4-stat grid with verified data
• ☐ Competitor tab has 4-8 real local competitors
• ☐ All 7 task tabs present with 3-4 task blocks each
• ☐ Every task block has: h4 header, bullets, example scenarios (where applicable), meta tags
• ☐ Example scenarios use real local names, streets, and competitors
• ☐ Dashboard tab has demo screenshot + interactive demo button + checklist
• ☐ Playbook tab has preview image + benefits checklist + demo link
• ☐ Get Started tab has 2 CTAs (top and bottom) linking to Summer's booking link
• ☐ Welcome popover present with green accent bar and 3-item checklist
• ☐ Sidebar section header says "Overview & Introduction" (not "Company Intel")
• ☐ All booking links point to Summer's HubSpot (not Brad's Calendly)
• ☐ OG image created and meta tags set
• ☐ Favicon and apple-touch-icon linked
• ☐ Refresh button present in top bar
• ☐ Mobile responsive: sidebar collapses, content full-width, video 100%
• ☐ No light gray text anywhere (minimum #4a4a5a)
• ☐ All prospect-specific text replaced (no "[Company Name]" placeholders remaining)
• ☐ Added to Command Center overview table