/* Self Mark branding layer for the Chatwoot desk. Loaded last in by the Dockerfile layout patch, so every rule below ties or beats Chatwoot's specificity and wins on source order. Checked against Chatwoot v4.18.0. */ /* Block 0: our own tokens, prefixed sm- so nothing collides with Chatwoot's. */ :root { --sm-light: #f5f5f7; --sm-white: #fff; --sm-ink: #1d1d1f; --sm-ink-inv: #f5f5f7; --sm-muted: #6e6e73; --sm-muted-dark: #86868b; --sm-hair: #d2d2d7; --sm-panel-edge: #e3e3e6; --sm-tile: #f7f7f9; --sm-blue: #0071e3; --sm-blue-hover: #0077ed; --sm-blue-wash: rgba(0, 113, 227, .05); --sm-link: #2997ff; --sm-alert: #d70015; --sm-good: #1d7d3f; --sm-stage: #0a0a0b; --sm-bar: #0e0e10; --sm-edge: rgba(255, 255, 255, .08); --sm-lift-2: rgba(255, 255, 255, .04); --sm-lift-3: rgba(255, 255, 255, .06); --sm-font: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; } /* Block 1: Chatwoot's own colour tokens remapped, light. Space separated RGB triples, consumed as rgb(var(--x) / alpha). Names checked against app/javascript/dashboard/assets/scss/_next-colors.scss at v4.18.0. */ :root { --background-color: 245 245 247; --solid-1: 255 255 255; --solid-2: 255 255 255; --solid-3: 247 247 249; --card-color: 255 255 255; --border-container: 227 227 230; --border-weak: 227 227 230; --border-strong: 210 210 215; --border-blue-strong: 0 113 227; --slate-12: 29 29 31; --slate-11: 110 110 115; --slate-10: 134 134 139; --slate-9: 161 161 166; --slate-8: 186 186 190; --slate-7: 210 210 215; --slate-6: 210 210 215; --slate-5: 227 227 230; --slate-4: 235 235 238; --slate-3: 245 245 247; --slate-2: 247 247 249; --slate-1: 255 255 255; --blue-9: 0 113 227; --blue-10: 0 119 237; --blue-11: 0 113 227; --button-color: 255 255 255; } /* Block 1 dark: the Linear style shell. Luminance steps, no borders. Bare .dark so it matches both html.dark and body.dark. */ .dark { --background-color: 14 14 16; --solid-1: 10 10 11; --solid-2: 20 20 23; --solid-3: 26 26 30; --card-color: 20 20 23; --border-container: 31 31 35; --border-weak: 31 31 35; --border-strong: 44 44 49; --border-blue-strong: 41 151 255; --slate-12: 245 245 247; --slate-11: 134 134 139; --slate-10: 110 110 115; --slate-9: 92 92 97; --slate-8: 68 68 73; --slate-7: 44 44 49; --slate-6: 38 38 42; --slate-5: 31 31 35; --slate-4: 26 26 30; --slate-3: 20 20 23; --slate-2: 14 14 16; --slate-1: 10 10 11; --blue-9: 0 113 227; --blue-10: 0 119 237; --blue-11: 41 151 255; } /* Block 2: font. Tailwind's font-sans stack ends in sans-serif !important (tailwind.config.js:18), so this has to be !important to land. */ html, body, button, input, select, textarea, .font-sans { font-family: var(--sm-font) !important; } body { -webkit-font-smoothing: antialiased; color: var(--sm-ink); } .dark body { color: var(--sm-ink-inv); } /* Block 3: brand blue by selector. theme/colors.js:229 is brand: '#2781F6', a literal, so no variable can move it. Class list taken from the live v3app and dashboard bundles at v4.18.0. */ .bg-n-brand, .hover\:bg-n-brand:hover, .group:hover .group-hover\:bg-n-brand, .checked\:bg-n-brand:checked, .dark\:checked\:bg-n-brand:checked:is(.dark *), .indeterminate\:bg-n-brand:indeterminate, .after\:bg-n-brand:after, .before\:bg-n-brand:before, .bg-n-blue-9, .bg-\[\#2781F6\] { background-color: var(--sm-blue); } .bg-n-brand\/5 { background-color: rgba(0, 113, 227, .05); } .bg-n-brand\/10, .hover\:bg-n-brand\/10:hover, .dark\:bg-n-brand\/10:is(.dark *) { background-color: rgba(0, 113, 227, .1); } .bg-n-brand\/20, .hover\:enabled\:bg-n-brand\/20:enabled:hover, .focus-visible\:bg-n-brand\/20:focus-visible { background-color: rgba(0, 113, 227, .2); } .hover\:bg-n-brand\/80:hover { background-color: rgba(0, 113, 227, .8); } .hover\:enabled\:bg-n-blue-border:enabled:hover { background-color: rgba(0, 113, 227, .2); } .text-n-brand, .hover\:text-n-brand:hover, .dark\:hover\:text-n-brand:hover:is(.dark *), .group:hover .group-hover\:text-n-brand, .group:focus-within .group-focus-within\:text-n-brand, .text-n-blue-9, .text-link { color: var(--sm-blue); } .dark .text-link { color: var(--sm-link); } .fill-n-blue-9 { fill: var(--sm-blue); } .border-n-brand, .hover\:border-n-brand:hover, .focus\:border-n-brand:focus, .focus-visible\:border-n-brand:focus-visible, .checked\:border-n-brand:checked, .indeterminate\:border-n-brand:indeterminate, .dark\:border-n-brand:is(.dark *), .dark\:checked\:border-n-brand:checked:is(.dark *), .hover\:enabled\:border-n-blue-9:enabled:hover, .border-n-blue-border { border-color: var(--sm-blue); } .border-n-brand\/50 { border-color: rgba(0, 113, 227, .5); } .border-t-n-brand { border-top-color: var(--sm-blue); } .before\:\!border-t-n-brand:before { border-top-color: var(--sm-blue) !important; } .outline-n-brand, .outline-n-blue-9, .focus\:outline-n-brand:focus, .focus\:outline-n-blue-9:focus, .focus-visible\:outline-n-brand:focus-visible, .focus-visible\:outline-n-blue-9:focus-visible, .focus-within\:outline-n-brand:focus-within, .has-\[\:focus\]\:outline-n-brand:has(:focus), .dark\:focus\:outline-n-brand:focus:is(.dark *), .dark\:focus-within\:outline-n-brand:focus-within:is(.dark *), .dark\:has-\[\:focus\]\:outline-n-brand:has(:focus):is(.dark *) { outline-color: var(--sm-blue); } .\!outline-n-brand, .dark\:\!outline-n-brand:is(.dark *) { outline-color: var(--sm-blue) !important; } /* Block 4: the login page, v3 pack, pages grammar. Selectors qualified with main.min-h-screen so they tie or beat Chatwoot's single class utilities. Element tree checked against /app/login at v4.18.0. */ main.min-h-screen { background: var(--sm-light); } .dark main.min-h-screen { background: var(--sm-stage); background-image: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, .07), transparent 60%); } main.min-h-screen img { height: 56px; } main.min-h-screen h2 { font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -.015em; color: var(--sm-ink); margin-top: 24px; } .dark main.min-h-screen h2 { color: var(--sm-ink-inv); } main.min-h-screen section.p-11 { background: var(--sm-white); border: 1px solid var(--sm-hair); border-radius: 20px; box-shadow: none; padding: 40px; margin-top: 32px; max-width: 440px; } .dark main.min-h-screen section.p-11 { background: #141417; border-color: var(--sm-edge); } @media (max-width: 639px) { main.min-h-screen section.p-11 { box-sizing: border-box; width: calc(100% - 44px); margin-inline: auto; padding: 22px; border-width: 1px; border-radius: 20px; } } main.min-h-screen label { font-size: 14px; font-weight: 600; color: var(--sm-ink); margin-bottom: 8px; } .dark main.min-h-screen label { color: var(--sm-ink-inv); } main.min-h-screen input[type="email"], main.min-h-screen input[type="password"], main.min-h-screen input[type="text"] { height: 44px; padding: 0 14px; font-size: 17px; border-radius: 12px; background: var(--sm-white); outline: 1px solid var(--sm-hair); box-shadow: none; color: var(--sm-ink); } /* Keep the room Chatwoot reserves for the password visibility button. */ main.min-h-screen input.pr-10 { padding-right: 2.5rem; } main.min-h-screen input::placeholder { color: #a1a1a6; } main.min-h-screen input[type="email"]:hover, main.min-h-screen input[type="password"]:hover, main.min-h-screen input[type="text"]:hover { outline-color: #a1a1a6; } main.min-h-screen input[type="email"]:focus, main.min-h-screen input[type="password"]:focus, main.min-h-screen input[type="text"]:focus { outline: 1px solid var(--sm-blue); box-shadow: 0 0 0 3px rgba(0, 113, 227, .16); } .dark main.min-h-screen input[type="email"], .dark main.min-h-screen input[type="password"], .dark main.min-h-screen input[type="text"] { background: var(--sm-lift-2); outline-color: var(--sm-edge); color: var(--sm-ink-inv); } .dark main.min-h-screen input[type="email"]:focus, .dark main.min-h-screen input[type="password"]:focus, .dark main.min-h-screen input[type="text"]:focus { outline: 1px solid var(--sm-blue); box-shadow: 0 0 0 3px rgba(0, 113, 227, .16); } /* Placed after every neutral input rule so the cascade keeps it. Invalid fields keep their signal: Chatwoot marks them with the .error class and outline-n-ruby-8; the contract's alert red replaces ruby. */ main.min-h-screen input.error, main.min-h-screen input.error:hover, main.min-h-screen input.error:focus, .dark main.min-h-screen input.error, .dark main.min-h-screen input.error:hover, .dark main.min-h-screen input.error:focus { outline: 1px solid var(--sm-alert); } main.min-h-screen input.error:focus, .dark main.min-h-screen input.error:focus { box-shadow: 0 0 0 3px rgba(215, 0, 21, .16); } main.min-h-screen input.error:focus-visible, .dark main.min-h-screen input.error:focus-visible { outline: 1px solid var(--sm-alert) !important; } main.min-h-screen label.text-n-ruby-12, .dark main.min-h-screen label.text-n-ruby-12 { color: var(--sm-alert); } main.min-h-screen div.text-n-ruby-9, .dark main.min-h-screen div.text-n-ruby-9 { color: var(--sm-alert); } main.min-h-screen button:not([type="submit"]) { color: var(--sm-muted); } .dark main.min-h-screen button:not([type="submit"]) { color: var(--sm-muted-dark); } main.min-h-screen button[type="submit"] { height: 44px; border-radius: 980px; background: var(--sm-blue); color: #fff; font-size: 17px; font-weight: 500; letter-spacing: -.01em; transition: background .18s, transform .12s; } main.min-h-screen button[type="submit"]:hover:enabled { background: var(--sm-blue-hover); filter: none; } main.min-h-screen button[type="submit"]:active:enabled { transform: scale(.985); } main.min-h-screen button[type="submit"]:disabled { background: var(--sm-hair); color: var(--sm-white); } .dark main.min-h-screen button[type="submit"]:disabled { background: var(--sm-lift-3); color: var(--sm-muted-dark); } main.min-h-screen a.text-link { font-size: 14px; color: var(--sm-blue); } main.min-h-screen a.text-link:hover { text-decoration: underline; } .dark main.min-h-screen a.text-link { color: var(--sm-link); } main.min-h-screen p { font-size: 13px; color: var(--sm-muted); } .dark main.min-h-screen p { color: var(--sm-muted-dark); } /* Block 5: dashboard chrome, dashboard pack, light touch. Colour, radius, font and focus only. No height changes inside the conversation view. Class names taken from the live dashboard bundle at v4.18.0. */ aside[class], [class*="sidebar"] { border-right-color: var(--sm-hair); } button.bg-n-brand, a.bg-n-brand, .rounded-lg.bg-n-brand { border-radius: 6px; } [class*="settings"] .shadow, [class*="settings"] .shadow-md, [class*="settings"] .shadow-lg { box-shadow: none; border: 1px solid var(--sm-panel-edge); } .text-n-blue-text { color: var(--sm-blue); } .dark .text-n-blue-text { color: var(--sm-link); } .bg-n-blue-text { background-color: var(--sm-blue); } .dark .bg-n-blue-text { background-color: var(--sm-link); } /* Block 6: global focus ring. !important because Tailwind's outline-none utilities win otherwise. Checked against v4.18.0. */ :focus-visible { outline: 3px solid var(--sm-blue) !important; outline-offset: 2px; border-radius: 4px; } /* Fields keep the contract's own focus: a 1px blue edge plus the 3px ring, not the button ring on top of it. */ main.min-h-screen input:focus-visible, .dark main.min-h-screen input:focus-visible { outline: 1px solid var(--sm-blue) !important; outline-offset: 0; border-radius: 12px; } /* Block 7: reduced motion. */ @media (prefers-reduced-motion: reduce) { * { transition-duration: 0s !important; } } /* Block 8: the two Chatwoot tells left inside the desk. Checked against v4.18.0. The account badge already loads LOGO_THUMBNAIL but at 16px; the empty conversation view draws Chatwoot's stock illustration. */ aside div.grid.place-content-center.size-6 img.size-4 { width: 22px; height: 22px; } img[src*="/no-chat-"] { content: url("https://selfmark.fly.dev/assets/logo/selfmark-mark.svg"); width: 72px; height: 72px; margin: 24px auto; opacity: .9; } .dark img[src*="/no-chat-"] { content: url("https://selfmark.fly.dev/assets/logo/selfmark-mark.svg"); }