/* ============================================================ Nora Webchat Theme Overrides ============================================================ PURPOSE ------- Best-effort CSS overrides for parts of the Botpress Webchat v3.7 widget that the configuration object doesn't expose directly. These rules target internal Botpress class names (.bpFab, .bpComposer, .bpMessage, .bpHeader) which may change in future Botpress releases without notice. CAVEATS ------- - If Botpress v3.7 renders inside a Shadow DOM root, these rules will NOT cross the boundary and must be re-applied via a runtime injection script. Test in dev (slc4) before production. - Selectors below are best-guess based on v2.x conventions plus v3.x public docs. If any rule does nothing at runtime, inspect the live webchat DOM with browser devtools and update the selector. - Do NOT rely on !important for structural changes — only color / typography. Structural overrides fight Botpress's own CSS and break on upgrade. THEME SOURCE ------------ All color and typography tokens below are extracted from the live sierralivingconcepts.com computed styles via Playwright on 2026-04-14. If the SLC site redesigns, re-extract and re-apply. Do not freestyle. Extracted values: Primary CTA bg rgb(175, 134, 47) #AF862F (burnished gold) Body text rgb(119, 119, 119) #777777 Heading/emphasis rgb(68, 68, 68) #444444 Link rgb(33, 33, 33) #212121 Background rgb(255, 255, 255) #FFFFFF Font (body) Nunito (self-hosted on slc4 + www) Font (display) "Bona Nova", "Antic Didone" (self-hosted) Button radius 0px (flat) Button weight 700 Button text-transform uppercase ============================================================ */ /* Root custom properties — anything that reads var(--nora-*) below can be adjusted in one place. */ :root { --nora-primary: #AF862F; /* Real SLC site CTA gold */ --nora-primary-hover: #8C6A20; /* Darker variant for hover */ --nora-primary-contrast: #FFFFFF; --nora-text-body: #444444; --nora-text-muted: #777777; --nora-text-link: #212121; --nora-bg: #FFFFFF; --nora-bg-soft: #FAF7F1; /* Warm off-white for bot messages */ --nora-bg-user: #F4E9D8; /* Wheat-ish for user messages */ --nora-border: #E5DDC9; --nora-border-strong: #AF862F; --nora-font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --nora-font-display: 'Bona Nova', 'Antic Didone', Georgia, serif; --nora-radius: 0; /* Flat — matches SLC site */ --nora-radius-bubble: 2px; /* Slightest softening on bubbles only */ --nora-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.06); --nora-shadow-fab: 0 4px 16px rgba(175, 134, 47, 0.35); } /* ------------------------------------------------------------ LAUNCHER (fab) — the floating "Ask Nora" button ------------------------------------------------------------ */ .bpFab, .bpFabButton, [class*="Fab__"] { background-color: var(--nora-primary) !important; color: var(--nora-primary-contrast) !important; border-radius: 50% !important; box-shadow: var(--nora-shadow-fab) !important; font-family: var(--nora-font-body) !important; font-weight: 700 !important; } .bpFab:hover, .bpFabButton:hover { background-color: var(--nora-primary-hover) !important; } /* ------------------------------------------------------------ HEADER — "Nora — AI Assistant" bar at the top of the panel ------------------------------------------------------------ */ .bpHeader, [class*="Header__"] { background-color: var(--nora-primary) !important; color: var(--nora-primary-contrast) !important; font-family: var(--nora-font-body) !important; border-radius: var(--nora-radius) !important; border-bottom: 2px solid var(--nora-primary-hover) !important; } .bpHeader h1, .bpHeader h2, [class*="Header__"] h1, [class*="Header__"] h2 { font-family: var(--nora-font-display) !important; font-weight: 700 !important; letter-spacing: 0.02em !important; } /* ------------------------------------------------------------ MESSAGE BUBBLES Bot (incoming) bubbles use the warm off-white fill so they sit on white page background without shouting. User bubbles use the wheat tint so they're clearly differentiated. ------------------------------------------------------------ */ .bpMessage, [class*="Message__"] { font-family: var(--nora-font-body) !important; color: var(--nora-text-body) !important; border-radius: var(--nora-radius-bubble) !important; } .bpMessage--bot, .bpMessageBot, [class*="Message__"][class*="bot"], [class*="Message__"][class*="incoming"] { background-color: var(--nora-bg-soft) !important; border: 1px solid var(--nora-border) !important; } .bpMessage--user, .bpMessageUser, [class*="Message__"][class*="user"], [class*="Message__"][class*="outgoing"] { background-color: var(--nora-bg-user) !important; border: 1px solid var(--nora-border) !important; color: var(--nora-text-body) !important; } /* Message text links */ .bpMessage a, [class*="Message__"] a { color: var(--nora-primary-hover) !important; text-decoration: underline !important; font-weight: 600 !important; } /* ------------------------------------------------------------ COMPOSER — the input area at the bottom ------------------------------------------------------------ */ .bpComposer, [class*="Composer__"] { background-color: var(--nora-bg) !important; font-family: var(--nora-font-body) !important; color: var(--nora-text-body) !important; border-top: 1px solid var(--nora-border) !important; border-radius: var(--nora-radius) !important; } .bpComposer input, .bpComposer textarea, [class*="Composer__"] input, [class*="Composer__"] textarea { font-family: var(--nora-font-body) !important; color: var(--nora-text-body) !important; } .bpComposer input::placeholder, .bpComposer textarea::placeholder { color: var(--nora-text-muted) !important; font-style: italic; } /* Send button */ .bpComposer button[type="submit"], .bpComposerSendButton, [class*="Composer__"] button[type="submit"] { background-color: var(--nora-primary) !important; color: var(--nora-primary-contrast) !important; border: 0 !important; border-radius: var(--nora-radius) !important; text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; } .bpComposer button[type="submit"]:hover { background-color: var(--nora-primary-hover) !important; } /* ------------------------------------------------------------ QUICK REPLY BUTTONS — the chip-style "Show me furniture" buttons ------------------------------------------------------------ */ .bpQuickReply, .bpQuickReplyButton, [class*="QuickReply__"] { background-color: var(--nora-bg) !important; color: var(--nora-primary) !important; border: 1px solid var(--nora-primary) !important; border-radius: var(--nora-radius) !important; font-family: var(--nora-font-body) !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.5rem 1rem; } .bpQuickReply:hover, .bpQuickReplyButton:hover { background-color: var(--nora-primary) !important; color: var(--nora-primary-contrast) !important; } /* ------------------------------------------------------------ ACCESSIBILITY — focus rings, contrast minimums WCAG 2.1 AA: keyboard focus ring 3:1 contrast, visible always ------------------------------------------------------------ */ .bpFab:focus-visible, .bpComposer button:focus-visible, .bpQuickReply:focus-visible, [class*="Fab__"]:focus-visible, [class*="QuickReply__"]:focus-visible { outline: 3px solid var(--nora-primary-hover) !important; outline-offset: 2px !important; } /* Respect user's reduced-motion preference */ @media (prefers-reduced-motion: reduce) { .bpFab, .bpFabButton, [class*="Fab__"], [class*="Message__"] { transition: none !important; animation: none !important; } } /* ============================================================ Zoho SalesIQ float-button hide ============================================================ Nora is the primary chat entry point. Zoho's orange float button is hidden by default so customers see only Nora's gold FAB. This CSS fires BEFORE the JS hide in embed-snippet.html, preventing the orange-button flash during page load. When Nora escalates to a live agent, the JS at embed-snippet.html:launchZohoHandoff() calls window.$zoho.salesiq.floatbutton.visible("show") which applies an inline style="display:block!important" that overrides this rule. So the button reappears exactly when needed. The embed snippet also injects