/* ============================================================================
Outscore x Chatwoot - staff case surface theme
Spec: docs/outscore-chatwoot-spec.md v1.3
Target: Chatwoot v4.16.2 (digest f9b071ff...8211b2) at cases.outscore.com
Delivery: nginx sub_filter injects before (spec 10.3 option 1)
EVERY selector below was verified against the INSTALLED bundle (spec 10.4),
not against upstream source or a different version:
- token names + RGB-triple format ..... grepped from v3app-afpB-s2b.css
- .i-woot-priority-{empty,low,medium,high,urgent} .. all 5 confirmed
- .chat-bubble + .user / .agent modifiers .......... confirmed
- .user-thumbnail-box, .is-private, .unread ....... confirmed
- six n-brand utilities ........................... confirmed, 88 uses
Re-run that verification after any Chatwoot upgrade before trusting this file.
FORMAT WARNING: Chatwoot stores scale colors as SPACE-SEPARATED RGB TRIPLES
consumed as rgb(var(--blue-9) / ). Writing hex into these properties
silently breaks every translucent use. Triples only.
========================================================================== */
/* ---------------------------------------------------------------- 1. fonts */
/* Self-hosted from Fontshare. Satoshi ships 300/400/500/700/900 - there is no
600 weight, so headings use 700 and the spec's "600" maps to 500. */
@font-face { font-family: 'Satoshi'; src: url('/outscore-theme/fonts/Satoshi-400.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/outscore-theme/fonts/Satoshi-500.woff2') format('woff2');
font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/outscore-theme/fonts/Satoshi-700.woff2') format('woff2');
font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('/outscore-theme/fonts/GeneralSans-400.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('/outscore-theme/fonts/GeneralSans-500.woff2') format('woff2');
font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('/outscore-theme/fonts/GeneralSans-600.woff2') format('woff2');
font-weight: 600; font-style: normal; font-display: swap; }
/* ------------------------------------------------- 2. light theme (:root) */
:root {
/* blue = Chatwoot's BRAND hue (its hardcoded #2781f6 is exactly --blue-9).
Remapped to the Outscore indigo ramp. */
--blue-1: 253 253 255; --blue-2: 248 247 255; --blue-3: 243 241 255;
--blue-4: 227 221 255; --blue-5: 212 207 250; --blue-6: 190 184 248;
--blue-7: 170 165 248; --blue-8: 128 120 245; --blue-9: 42 26 240;
--blue-10: 37 24 208; --blue-11: 37 24 208; --blue-12: 26 18 128;
/* iris = secondary accent. Same family, one step lighter at the solids so
secondary emphasis stays distinguishable from primary. */
--iris-1: 253 253 255; --iris-2: 248 248 255; --iris-3: 243 241 255;
--iris-4: 233 228 255; --iris-5: 219 213 252; --iris-6: 200 193 250;
--iris-7: 178 172 249; --iris-8: 146 138 247; --iris-9: 85 72 242;
--iris-10: 74 62 226; --iris-11: 68 56 210; --iris-12: 32 22 110;
/* slate = cool neutral ramp, Mist -> Ink */
--slate-1: 252 252 253; --slate-2: 246 247 251; --slate-3: 239 240 246;
--slate-4: 232 234 242; --slate-5: 228 230 239; --slate-6: 217 220 232;
--slate-7: 201 204 218; --slate-8: 174 178 196; --slate-9: 107 112 128;
--slate-10: 95 100 116; --slate-11: 42 46 59; --slate-12: 11 11 15;
/* status accents */
--teal-9: 5 150 105; --teal-11: 4 120 87; /* success #059669 */
--amber-9: 245 158 11; --amber-11:180 83 9; /* warning #F59E0B / AA text */
--ruby-9: 220 38 38; --ruby-11: 185 28 28; /* alert #DC2626 */
/* semantic tokens - these do most of the surface work */
--background-color: 246 247 251; /* Mist */
--card-color: 255 255 255;
--surface-1: 255 255 255;
--surface-2: 246 247 251;
--surface-active: 243 241 255;
--border-container: 228 230 239;
--border-strong: 201 204 218;
--border-weak: 240 241 247;
--label-background: 243 241 255;
--solid-blue: 42 26 240;
--solid-iris: 85 72 242;
--solid-purple: 128 120 245;
--text-blue: 37 24 208;
--text-purple: 26 18 128;
--button-color: 255 255 255;
}
/* -------------------------------------------------- 3. dark theme (.dark) */
/* Pilot Indigo #2A1AF0 fails contrast on dark, so the dark solids/text step up
to #5548F2 / #8078F5 / #AAA5F8 per spec 10.4. */
.dark {
--blue-1: 11 11 15; --blue-2: 19 19 30; --blue-3: 32 30 61;
--blue-4: 35 32 87; --blue-5: 45 41 108; --blue-6: 58 53 133;
--blue-7: 76 70 165; --blue-8: 99 92 205; --blue-9: 85 72 242;
--blue-10: 106 95 245; --blue-11: 128 120 245; --blue-12: 224 223 254;
--iris-1: 19 19 30; --iris-2: 23 22 42; --iris-3: 35 32 87;
--iris-4: 43 39 112; --iris-5: 54 49 137; --iris-6: 68 62 160;
--iris-7: 86 79 186; --iris-8: 110 102 216; --iris-9: 128 120 245;
--iris-10: 146 138 247; --iris-11: 170 165 248; --iris-12: 230 228 255;
--slate-1: 11 11 15; --slate-2: 20 21 28; --slate-3: 27 29 39;
--slate-4: 33 35 46; --slate-5: 38 40 56; --slate-6: 47 49 66;
--slate-7: 61 64 84; --slate-8: 85 89 112; --slate-9: 125 129 148;
--slate-10:143 147 165; --slate-11:185 188 203; --slate-12:244 244 248;
--teal-9: 16 185 129; --teal-11: 52 211 153;
--amber-9: 251 191 36; --amber-11:252 211 77;
--ruby-9: 248 113 113; --ruby-11: 252 165 165;
--background-color: 11 11 15; /* Ink */
--card-color: 20 21 28;
--surface-1: 20 21 28;
--surface-2: 27 29 39;
--surface-active: 32 30 61;
--border-container: 38 40 56;
--border-strong: 54 57 77;
--border-weak: 30 32 45;
--label-background: 35 32 87;
--solid-blue: 85 72 242;
--solid-iris: 128 120 245;
--solid-purple: 170 165 248;
--text-blue: 170 165 248;
--text-purple: 212 207 250;
}
/* ------------------------- 4. the six hardcoded n-brand utilities (10.3.1) */
/* These compile #2781f6 directly with NO custom property behind them, so they
are the one sanctioned exception to "never chase utility classes". Tying
them back to --blue-9 means all future brand changes flow from the tokens
above, and both themes are handled automatically. */
.bg-n-brand { background-color: rgb(var(--blue-9)) !important; }
.text-n-brand { color: rgb(var(--blue-9)) !important; }
.border-n-brand,
.border-t-n-brand { border-color: rgb(var(--blue-9)) !important; }
.outline-n-brand { outline-color: rgb(var(--blue-9)) !important; }
.ring-n-brand { --tw-ring-color: rgb(var(--blue-9)) !important; }
/* ----------------------------------------------------------- 5. typography */
body, .app-wrapper, input, textarea, select, button {
font-family: 'General Sans', Inter, system-ui, -apple-system, sans-serif;
}
h1, h2, h3, .page-title { font-family: 'Satoshi', Inter, system-ui, sans-serif; }
h1, .page-title { font-weight: 700; font-size: 20px; }
h2 { font-weight: 700; font-size: 16px; }
/* Phone numbers, amounts and IDs must align in columns. */
.conversation--meta, .user-thumbnail-box + div time, time,
[class*="tabular"], .contact-phone, .conversation--details time {
font-variant-numeric: tabular-nums;
}
/* ------------------------------------- 6. priority (spec 7, core requirement) */
/* All five icon classes confirmed present in the installed bundle. */
.i-woot-priority-urgent { color: rgb(var(--ruby-9)) !important; }
.i-woot-priority-high { color: rgb(var(--amber-11)) !important; }
.i-woot-priority-medium { color: rgb(var(--blue-9)) !important; }
.i-woot-priority-low { color: rgb(var(--slate-9)) !important; }
.i-woot-priority-empty { color: rgb(var(--slate-8)) !important; }
/* Urgent gets a 3px red left edge on the whole card, via :has() - no new DOM.
This is what makes an urgent case findable in under a second in a long list. */
.conversation:has(.i-woot-priority-urgent),
.conversation--container:has(.i-woot-priority-urgent) {
box-shadow: inset 3px 0 0 rgb(var(--ruby-9));
}
/* ------------------------------------------------- 7. message bubbles (7) */
/* .chat-bubble carries a `user` (client, incoming) or `agent` (staff, outgoing)
modifier - both confirmed in the built chunks. Outgoing is lavender, NOT
solid indigo: long financial replies have to stay readable. */
.chat-bubble.user {
background-color: rgb(var(--surface-1)) !important;
border: 1px solid rgb(var(--border-container)) !important;
color: rgb(var(--slate-12)) !important;
}
.chat-bubble.agent {
background-color: #E3DDFF !important;
color: #0B0B0F !important;
}
.dark .chat-bubble.agent {
background-color: rgb(var(--blue-4)) !important;
color: rgb(var(--slate-12)) !important;
}
/* Private notes: amber-tinted so they never read as client-visible. */
.is-private .chat-bubble, .chat-bubble.is-private {
background-color: #FFFBEB !important;
border: 1px solid #FDE68A !important;
color: #0B0B0F !important;
}
.dark .is-private .chat-bubble, .dark .chat-bubble.is-private {
background-color: rgb(var(--amber-9) / .12) !important;
border-color: rgb(var(--amber-9) / .35) !important;
color: rgb(var(--slate-12)) !important;
}
/* Message text at full size - a voicemail transcript is primary content,
never a caption (spec 7, acceptance checklist). */
.chat-bubble .prose-bubble, .chat-bubble p { font-size: 15px; line-height: 1.5; }
/* --------------------------------------------------------- 8. avatars (6) */
/* Replaces Chatwoot's random/magenta avatar hues with one brand pair. */
.user-thumbnail-box {
background-color: #E3DDFF !important;
color: #1A1280 !important;
}
.dark .user-thumbnail-box {
background-color: rgb(var(--blue-4)) !important;
color: rgb(var(--blue-12)) !important;
}
/* Never tint a real uploaded photo. */
.user-thumbnail-box img { background: none !important; }
/* ------------------------------------------------------ 9. unread emphasis */
.unread, .has-unread-messages, .unread-messages { font-weight: 600; }
.unread-notification, .conversation-count-item {
background-color: #E3DDFF !important;
color: #1A1280 !important;
}
.dark .unread-notification, .dark .conversation-count-item {
background-color: rgb(var(--blue-4)) !important;
color: rgb(var(--blue-12)) !important;
}
/* ------------------------------------------------ 10. shape and elevation */
button, input, select, textarea, .button { border-radius: 8px; }
.card { border-radius: 12px; }
/* Spec 4 says "no gradients anywhere". That means do not ADD any - NOT a
universal `background-image: none`, which would also strip icon sprites and
uploaded imagery. Nothing in this file introduces a gradient; that satisfies
the rule without collateral damage. */
/* --------------------------------------------- 11. focus visibility (AA) */
:focus-visible {
outline: 2px solid #8078F5 !important;
outline-offset: 1px !important;
}