/* Lightmorphic style - see docs/lightmorphic-style.html for the guide. A neutral grey scale for surfaces/borders/text (not a colored/tinted neutral), flat 1px borders instead of colored elevation, softly rounded corners (not full-pill buttons), and a single accent color used sparingly for primary actions/focus rings. The accent itself still comes from the same primary/on-primary/container role pairs as before (and the same 16-color picker) - only the neutral foundation and shape language changed. Same token system as domain-scout (--ds-) and Lightmorphic Portal (--sm-), just with an --aw- prefix, so the product family looks like one thing. Two independent overrides, Inbox-only (never set on the public widget/ conversation pages - visitors get automatic prefers-color-scheme only, no cookies/localStorage for them, ever): a manual light/dark toggle via [data-theme] on , and a choice of 16 accent colors via [data-accent] - see app/inbox/static/js/theme.js for how those attributes get set, and inbox/base.html for the picker UI. Every color below is a precomputed hex value (not color-mix()), deliberately - this stylesheet is also loaded by the public conversation page, and an unsupported color function there would silently break real visitors' pages, not just an operator's own admin screen. Type is Manrope (SIL OFL, vendored under static/fonts/manrope/ - see LICENSE.txt there), self-hosted, no remote font requests anywhere - same variable-font setup used in the outbound HTML emails too (app/templates/email/base.html), with a system-font fallback stack for the email clients that strip @font-face or don't support it. */ @font-face { font-family: "Manrope"; src: url("../fonts/manrope/Manrope-Variable.woff2") format("woff2-variations"), url("../fonts/manrope/Manrope-Variable.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; } :root { color-scheme: light dark; /* Accent raw tones (light/dark pairs) - the default is the original the default accent. [data-accent="..."] rules further down only ever override these eight values; --aw-primary etc themselves are resolved generically right after this block, the same way regardless of which accent is active. Kept identical in light and dark mode (unlike the 15 picker accents below) - it's bright enough to read clearly against both a light and a near-black background without needing a separate dark-mode tone. */ --aw-primary-light: #fbc711; --aw-primary-hover-light: #e0b10e; --aw-primary-container-light: #fff6d6; --aw-on-primary-container-light: #5c4700; --aw-primary-dark: #fbc711; --aw-primary-hover-dark: #e0b10e; --aw-primary-container-dark: #4a3900; --aw-on-primary-container-dark: #ffe58a; /* Dark text, not white: the default accent is a light, high-luminance yellow, and white text on it fails contrast badly (~1.5:1, nowhere near the 4.5:1 minimum) - unlike the 15 deliberately darker accent picker hues below, which all default to --aw-on-primary: #ffffff via their own override (see the accent block comment further down). */ --aw-on-primary: #1c1300; /* Aliases onto the shared accent system (static/css/accents.css), which resolves light/dark for the whole app - keeping these names means none of the CSS below had to change. */ --aw-primary: var(--accent); --aw-primary-hover: var(--accent-hover); --aw-primary-container: var(--accent-container); --aw-on-primary-container: var(--on-accent-container); --aw-on-primary: var(--on-accent); /* Surface / neutral roles - a plain grey, deliberately not tinted towards the accent, so switching accent never shifts the whole UI's temperature. --aw-background is the page canvas (a hair off-white); --aw-surface is the card/input white sitting on it. */ --aw-surface: #ffffff; --aw-surface-variant: #f4f4f5; --aw-on-surface-variant: #71717a; --aw-background: #fafafa; --aw-text: #18181b; --aw-text-muted: #71717a; --aw-border: #e4e4e7; --aw-outline: #d4d4d8; --aw-outline-variant: #e4e4e7; /* Error / success / warning - standard Tailwind 600-weight hues on 50-weight backgrounds, kept deliberately muted rather than saturated to match the rest of the neutral-first palette. */ --aw-error: #cc372d; --aw-error-bg: #fef2f1; --aw-success: #38813a; --aw-success-bg: #f2f9f3; --aw-warning: #8f6c03; --aw-warning-bg: #fffbee; /* Brand navy - identity, alongside brand yellow. */ --aw-brand-navy: #111827; --aw-radius: 8px; /* Flat/subtle by default - a panel leans on its 1px border for definition, not a colored shadow; this is a hairline lift. */ --aw-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.04); } @media (prefers-color-scheme: dark) { /* Automatic - applies whenever the OS/browser says dark AND the operator hasn't explicitly picked a theme (a plain :root here has LOWER specificity than :root[data-theme], so an explicit choice below always wins regardless of source order). */ :root { --aw-surface: #18181b; --aw-surface-variant: #27272a; --aw-on-surface-variant: #a1a1aa; --aw-background: #09090b; --aw-text: #fafafa; --aw-text-muted: #a1a1aa; --aw-border: #27272a; --aw-outline: #3f3f46; --aw-outline-variant: #27272a; --aw-error: #f34236; --aw-error-bg: #350f0c; --aw-success: #4bae4f; --aw-success-bg: #102611; --aw-warning: #ffc006; --aw-warning-bg: #382a01; --aw-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.3); } } /* Explicit manual override (Inbox only). :root[data-theme] has higher specificity than a plain :root, including inside the media query above, so once the operator has picked a theme on their device it always wins over their OS/browser setting. */ :root[data-theme="dark"] { --aw-surface: #18181b; --aw-surface-variant: #27272a; --aw-on-surface-variant: #a1a1aa; --aw-background: #09090b; --aw-text: #fafafa; --aw-text-muted: #a1a1aa; --aw-border: #27272a; --aw-outline: #3f3f46; --aw-outline-variant: #27272a; --aw-error: #f34236; --aw-error-bg: #350f0c; --aw-success: #4bae4f; --aw-success-bg: #102611; --aw-warning: #ffc006; --aw-warning-bg: #382a01; --aw-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.3); } :root[data-theme="light"] { --aw-surface: #ffffff; --aw-surface-variant: #f4f4f5; --aw-on-surface-variant: #71717a; --aw-background: #fafafa; --aw-text: #18181b; --aw-text-muted: #71717a; --aw-border: #e4e4e7; --aw-outline: #d4d4d8; --aw-outline-variant: #e4e4e7; --aw-error: #cc372d; --aw-error-bg: #fef2f1; --aw-success: #38813a; --aw-success-bg: #f2f9f3; --aw-warning: #8f6c03; --aw-warning-bg: #fffbee; --aw-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.04); } /* Accent choices (Inbox only) - each overrides the eight raw -light/-dark values above, plus --aw-on-primary. 15 of these 16 are deliberately darker/more saturated hues that need white text, so they set --aw-on-primary: #ffffff (the base :root default above is dark text, correct only for the bright brand yellow itself). --aw-primary etc resolve automatically to whichever one applies in the active theme. Yellow's values here are identical to the un-overridden :root default above (it's the actual brand color) - kept as its own explicit block anyway so every swatch in the picker (app/inbox/static/js/theme.js) behaves the same way, rather than one of them secretly meaning "no preference set". Blue (the brand color before the Lightmorphic rebrand) is kept as a regular selectable option so operators who preferred it don't lose it - both sit alongside the other 14 hues, deliberately spread across the whole wheel so adjacent choices are easy to tell apart at a glance. */ /* Swatch colors as real CSS rules keyed off the same data attribute, rather than inline styles on each button - avoids any doubt about inline-style precedence and keeps the picker markup free of per-button color logic (see inbox/_theme_picker.html). */ * { box-sizing: border-box; } body { margin: 0; background: var(--aw-background); color: var(--aw-text); font: 400 15px/1.5 "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } h1, h2, h3, .aw-card h1, .aw-card h2 { font-weight: 700; letter-spacing: -0.01em; } .aw-card { background: var(--aw-surface); border: 1px solid var(--aw-border); border-radius: var(--aw-radius); box-shadow: var(--aw-elevation-1); } /* The hosted /c/ conversation page - one self-contained widget-style panel (colored header, scrollable message list, pinned compose bar) rather than three separate stacked cards, so it actually reads as "a chat" at a glance instead of a plain webpage. Role is still labeled (a small caption above the bubble text), not just implied by side/color: a visitor should always be able to tell whether they're reading an auto-reply or a message from a person. Fixed at 80% of the viewport height on every screen size, not just mobile - a plain 100vh on phones is famously wrong (mobile browser chrome, like the address bar, isn't included in 100vh, so a full-height box gets pushed off-screen and the compose box becomes unreachable); 80vh/80dvh leaves enough slack that this can't happen, and it reads consistently as "a contained widget" rather than "a webpage" on desktop too. :has() centers the panel only on this page, without touching the shared body/main layout every other page also uses. */ main:has(.aw-chat) { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 0 12px; box-sizing: border-box; } .aw-chat { width: 100%; max-width: 480px; height: 80vh; height: 80dvh; max-height: 760px; display: flex; flex-direction: column; background: var(--aw-surface); border: 1px solid var(--aw-border); border-radius: calc(var(--aw-radius) * 1.5); box-shadow: var(--aw-elevation-1); overflow: hidden; } .aw-chat-brand { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 10px 20px 0; } .aw-chat-brand img { height: 16px; width: auto; display: block; } .aw-chat-brand img.aw-logo-dark { display: none; } .aw-chat-brand span { font-size: 12px; color: var(--aw-text-muted); font-weight: 500; } @media (prefers-color-scheme: dark) { .aw-chat-brand img.aw-logo-light { display: none; } .aw-chat-brand img.aw-logo-dark { display: block; } } /* The same logo + "chat" mark, standalone - login page and anywhere else that wants the brand header without also being the conversation panel. */ .aw-brand { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 20px; } .aw-brand img { height: 28px; width: auto; display: block; } .aw-brand img.aw-logo-dark { display: none; } .aw-brand span { font-size: 16px; color: var(--aw-text-muted); font-weight: 500; } @media (prefers-color-scheme: dark) { .aw-brand img.aw-logo-light { display: none; } .aw-brand img.aw-logo-dark { display: block; } } .aw-chat-header { flex-shrink: 0; background: var(--aw-primary); color: var(--aw-on-primary); padding: 12px 20px 16px; } .aw-chat-header h1 { margin: 0; font-size: 16px; } .aw-chat-back { display: inline-block; margin-top: 2px; color: var(--aw-on-primary); opacity: 0.8; font-size: 12px; text-decoration: none; } .aw-chat-back:hover { opacity: 1; text-decoration: underline; } .aw-chat-messages { flex: 1; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; } .aw-chat-empty { margin: auto; text-align: center; color: var(--aw-text-muted); font-size: 14px; } .aw-chat-compose { flex-shrink: 0; display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--aw-outline-variant); } .aw-chat-compose textarea { flex: 1; resize: none; font: inherit; padding: 10px 14px; max-height: 100px; border: 1px solid var(--aw-border); border-radius: var(--aw-radius); background: var(--aw-surface); color: var(--aw-text); } .aw-chat-compose textarea:focus { outline: none; border-color: var(--aw-primary); box-shadow: 0 0 0 2px var(--aw-primary-container); } .aw-chat-compose button { flex-shrink: 0; width: 40px; height: 40px; border: none; border-radius: 50%; background: var(--aw-primary); color: var(--aw-on-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; } .aw-chat-compose button:hover { background: var(--aw-primary-hover); } /* Fully rounded on every corner, deliberately - an earlier "chat tail" design (one corner less rounded, pointing toward the sender) read as uneven/unfinished rather than a deliberate direction cue, so all four corners now match. */ .aw-turn { max-width: 78%; padding: 8px 14px 10px; border-radius: 16px; line-height: 1.45; display: flex; flex-direction: column; gap: 2px; } .aw-turn strong { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; } .aw-turn-visitor { align-self: flex-end; background: var(--aw-primary); color: var(--aw-on-primary); } .aw-turn-operator { align-self: flex-start; background: var(--aw-surface-variant); color: var(--aw-text); } .aw-turn-ai { align-self: flex-start; background: var(--aw-primary-container); color: var(--aw-on-primary-container); }