/* ============================================================================ Tròn House — Chatwoot agent dashboard brand theme. Source of truth: tronhouse.com → Quicksand + Varela Round, brand yellow #f7ee23, dark ink (#1a1a1a) on yellow (never white — WCAG-AAA dark-on-yellow). Durable: bind-mounted at /app/public/tron-brand.css + linked from vueapp.html.erb. All rules use !important because Vite injects the app CSS into at runtime (after this static ), so we must win the cascade regardless of order. ========================================================================== */ /* ---- Typography: body = Varela Round (friendly/rounded); emphasis & headings = Quicksand ---- */ html, body, .font-sans, [class*="font-sans"], input, textarea, select, button, .button { font-family: 'Varela Round', 'Quicksand', -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important; } h1, h2, h3, h4, h5, h6, strong, b, .font-medium, .font-semibold, .font-bold, [class*="font-medium"], [class*="font-semibold"], [class*="font-bold"], button, .button, .text-lg, .text-xl, .text-2xl, .text-3xl, [class*="text-lg"], [class*="text-xl"], [class*="text-2xl"], [class*="text-3xl"] { font-family: 'Quicksand', 'Varela Round', -apple-system, system-ui, sans-serif !important; } /* keep code / monospace legible — do NOT override these */ code, pre, kbd, samp, .font-mono, [class*="font-mono"] { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace !important; } /* ---- Tròn yellow primary: filled brand surfaces get the yellow + forced dark ink ---- Chatwoot's primary ("woot") palette is blue #3b9eff used as a FILL with white text. Yellow needs dark text, so every yellow-filled surface forces near-black ink + icons. text-woot-* (links / active text on light backgrounds) is intentionally left blue — yellow text on white would be invisible (fails contrast). */ html body .bg-woot-400 { background-color: #f9f24e !important; } html body .bg-woot-500 { background-color: #f7ee23 !important; } html body .bg-woot-600, html body .hover\:bg-woot-600:hover { background-color: #efe40f !important; } html body .bg-woot-700, html body .hover\:bg-woot-700:hover { background-color: #d9cf06 !important; } html body .bg-woot-400, html body .bg-woot-400 *, html body .bg-woot-500, html body .bg-woot-500 *, html body .bg-woot-600, html body .bg-woot-600 *, html body .bg-woot-700, html body .bg-woot-700 * { color: #1a1a1a !important; fill: #1a1a1a !important; } /* primary borders / focus rings pair with brand yellow */ html body .border-woot-500, html body .border-woot-600 { border-color: #f7ee23 !important; } html body .ring-woot-500 { --tw-ring-color: #f7ee23 !important; } /* ---- Chatwoot v4 "next" design system: n-brand is the real primary (#2781f6 blue). Used as `bg-n-brand text-white` on the main buttons (login, Send, Resolve…). Make the FILL Tròn yellow and force dark ink (beats the element's own text-white via !important). Leave .text-n-brand (links/active text on light bg) as the readable accent. ---- */ html body .bg-n-brand { background-color: #f7ee23 !important; } html body .bg-n-brand, html body .bg-n-brand * { color: #1a1a1a !important; fill: #1a1a1a !important; } /* subtle selected/hover tints -> yellow tint instead of blue tint (text stays dark/default) */ html body .bg-n-brand\/10 { background-color: #f7ee231a !important; } html body .bg-n-brand\/5 { background-color: #f7ee230d !important; } /* brand borders / rings */ html body .border-n-brand { border-color: #f7ee23 !important; } html body .ring-n-brand { --tw-ring-color: #f7ee23 !important; } html body .outline-n-brand { outline-color: #f7ee23 !important; }