/* Skin "kupipolis" — the mem-bot web chat styled after https://kupipolis.ru/: a flat, corporate look with the bright blue #2e9cfe accent, the orange #ffa500 secondary accent, Lato typography, white header with the logo, near-square corners and bordered (not shadowed) cards. Serve it with WEBCHAT_SKIN=skins/kupipolis — see ../README.md for the skin contract. */ /* Lato carries only Latin glyphs; Cyrillic falls back to the system sans — exactly what the original site does. @import must precede every rule, hence the first line. */ @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap'); /* ===== Light theme ===== */ html:root { --app-font: 'Lato', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --page-bg: #fbfbfb; --surface-bg: #ffffff; --text-color: #3a3a3a; --muted-color: #6e6e6e; --border-color: #e7e7e7; --divider-color: #d8dde2; --bubble-user-bg: #e3f2ff; --bubble-bot-bg: #ffffff; --accent-color: #2e9cfe; --accent-btn-bg: #2e9cfe; --accent-btn-hover: #1489f2; --on-accent-color: #ffffff; --send-btn-bg: #ffa500; --highlight-bg: #fff3d6; --reaction-bg: #f0f2f4; --placeholder-bg: #f6f6f6; --header-bg: #ffffff; --bubble-radius: 4px; --brand-logo: url('/skin/logo.svg'); --brand-logo-display: block; --brand-logo-width: 118px; --brand-logo-height: 30px; /* PrimeVue (buttons, inputs, dialogs, menus): the same blue and the site's near-square corners. */ --p-primary-color: #2e9cfe; --p-primary-hover-color: #1489f2; --p-primary-active-color: #0e7ce4; --p-primary-contrast-color: #ffffff; --p-focus-ring-color: #2e9cfe; --p-button-border-radius: 2px; --p-form-field-border-radius: 2px; --p-inputtext-border-radius: 2px; --p-dialog-border-radius: 4px; --p-menu-border-radius: 4px; --p-message-border-radius: 2px; } /* ===== Dark theme (the app-dark class is toggled on by theme.js) ===== */ html.app-dark:root { --page-bg: #14181d; --surface-bg: #1c222a; --text-color: #e3e6e9; --muted-color: #96a0aa; --border-color: #303841; --divider-color: #3d4650; --bubble-user-bg: #16344f; --bubble-bot-bg: #20262e; --accent-color: #4da6fe; --accent-btn-bg: #2277cf; --accent-btn-hover: #3388e0; --send-btn-bg: #cf8b1e; --highlight-bg: #453714; --reaction-bg: #2b323b; --placeholder-bg: #1f252d; --header-bg: #1c222a; --p-primary-color: #4da6fe; --p-primary-hover-color: #63b2fe; --p-primary-active-color: #7abefe; --p-primary-contrast-color: #ffffff; --p-focus-ring-color: #4da6fe; } /* ===== Layout accents beyond the tokens. Component styles are scoped (specificity 0-2-0), so every rule here carries a leading html to win regardless of stylesheet order. ===== */ /* The site's signature blue rule under the white header (the underline of its hero heading). */ html .chat-screen .chat-header { border-bottom: 2px solid var(--accent-color); } /* The app title next to the logo, styled like the site's "ВСЕ О СТРАХОВАНИИ" caption. */ html .chat-screen .chat-title { font-size: 11px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-color); align-self: flex-end; padding-bottom: 3px; } /* Flat cards: kupipolis.ru separates surfaces with hairline borders, not shadows. */ html .chat-screen .bubble { border: 1px solid var(--border-color); box-shadow: none; } html .auth-screen .auth-card { border: 1px solid var(--border-color); border-radius: 4px; box-shadow: none; } html .auth-screen .auth-tabs button { border-radius: 2px; }