Visual Consistency — Hard Requirement

Rule

The published static site, the dashboard preview, and the client portal MUST look identical. They are the same website viewed through different delivery mechanisms.

Architecture

All three render paths use the same CSS from shared/site-css.ts:

shared/site-css.ts (CSS, NAV_CSS, CHAT_CSS, DARK_MODE_CSS)
       ↓                    ↓                        ↓
Published site           Dashboard preview         Portal (React SPA)
(template.ts)            (SitePreview.tsx)          (Portal.tsx)

Published Static Site

• shared/site-renderer.ts generates full HTML
• CSS injected via <style> tags
• Served from GCS as static .html files

Dashboard Preview

• SitePreview.tsx calls renderLandingPage() from shared
• Injects the resulting HTML + CSS into a scoped container
• Navigation intercepted via React click handlers

Client Portal

• Portal.tsx imports CSS, NAV_CSS, getThemeCss() from shared
• Injects the same CSS via <style> tags
• Uses the same CSS class names (.header, .site-nav, .chat-btn, .footer, etc.)
• Theme and color mode applied from business settings

When Adding New Styles

1. Add CSS to shared/site-css.ts
2. Use the class names in shared/site-renderer.ts (for published site + preview)
3. Use the same class names in Portal.tsx (for portal)
4. Never add Tailwind classes in Portal.tsx for elements that should match the published site — use the shared CSS class names instead

When Adding New Sections

1. Add HTML generation to shared/site-renderer.ts
2. The preview automatically picks it up (same renderer)
3. If the section needs to appear in the portal, use the same class names in Portal.tsx

Themes and Dark Mode

• Themes are CSS variable overrides from getThemeCss() in shared/site-helpers.ts
• Dark mode is from getColorModeCss() — returns CSS + a JS snippet
• All three paths apply these the same way
• The portal receives theme and colorMode from /api/portal/resolve

Testing Consistency

Before shipping changes to the website template:

1. Check the published site (republish)
2. Check the dashboard preview (Website tab)
3. Check the portal (/portal/{slug})
4. Check a portal sub-page (/portal/{slug}/{page})
5. Check mobile view in all three

If any of these look different, the change is not ready.