/** * SiteStaffr Neon Style * * A skin for the widget launcher and chat panel: a lit edge over a flat surface, * with a halo outside and in. Selected as a STYLE PRESET, and every color in it * belongs to the owner. * * Layered on top of sitestaffr-widget.css + sitestaffr-chat-panel.css. It only * re-declares design tokens those files already read, and adds glow. No markup * changes, no JS behavior changes. * * NOTHING about the palette is decided here. The surface is the section's own * background color, the glow is its own color control, and the ink is chosen from * the surface's luminance so a light background gets dark text instead of the * near-white this file used to assume. All of it arrives as custom properties from * SiteStaffr_Widget_Settings_Provider::get_neon_style_vars(). * * This is why the skin no longer forces a dark page: it never needed the page to * be dark, only its own surface to be darker than its own glow — and both of those * are now the owner's to set. * * Scope: `sitestaffr-theme-neon` is applied to each widget root. The launcher, * the landing card and the chat panel are three separate fixed elements appended * to , so each is classed independently rather than inheriting. * * @package SiteStaffr * @since 1.43.0 */ /* =========================== DERIVED PALETTE =========================== */ .sitestaffr-theme-neon { /* Every one of these is emitted per widget from the owner's own settings — see SiteStaffr_Widget_Settings_Provider::get_neon_style_vars(). The values below are FALLBACKS ONLY, for markup rendered before those vars existed. Nothing here is the design; the design is how they are combined. */ --neon-rgb: 31, 182, 204; --neon-strength: 60; --neon-surface: #0b1a24; --neon-surface-2: #122432; --neon-ink: #eef7fa; --neon-ink-muted: #9db3bd; --neon-hairline: rgba(238, 247, 250, 0.14); --neon: rgb(var(--neon-rgb)); --neon-line: rgba(var(--neon-rgb), 0.6); --neon-dim: rgba(var(--neon-rgb), 0.35); --neon-faint: rgba(var(--neon-rgb), 0.14); /* One 0-100 control drives every radius, so "more glow" stays one decision rather than four fields. At 60 these evaluate to the 12px/32px/12px the skin originally hardcoded, which is why 60 is the default. */ --neon-blur-near: calc(var(--neon-strength) * 0.2px); --neon-blur-far: calc(var(--neon-strength) * 0.5333px); --neon-spread-far: calc(var(--neon-strength) * 0.0667px); --neon-blur-inset: calc(var(--neon-strength) * 0.2px); } /* =========================== LAUNCHER BUTTON =========================== */ /* The tube: dark interior, glowing edge, halo outside and in. */ .sitestaffr-theme-neon .sitestaffr-widget-button, #sitestaffr-widget.sitestaffr-theme-neon .sitestaffr-widget-button { background-color: var(--neon-surface); /* The icon takes the owner's Icon color. It used to be hardwired to var(--neon), which silently made the Icon color picker a no-op under this preset -- and once the surface became the owner's choice too, the two could land on the same value and the glyph disappeared into the button. The glow remains the FALLBACK, so the stock preset looks identical to before. */ color: var(--widget-icon-color, var(--neon)); border: 2px solid var(--neon); box-shadow: 0 0 0 1px rgba(var(--neon-rgb), 0.25), 0 0 var(--neon-blur-near) 1px var(--neon-dim), 0 0 var(--neon-blur-far) var(--neon-spread-far) rgba(var(--neon-rgb), 0.22), inset 0 0 var(--neon-blur-inset) rgba(var(--neon-rgb), 0.28); } /* The icon reads as light rather than sitting flat on the fill. */ .sitestaffr-theme-neon .sitestaffr-icon, .sitestaffr-theme-neon .sitestaffr-button-icon { filter: drop-shadow(0 0 4px rgba(var(--neon-rgb), 0.9)) drop-shadow(0 0 10px rgba(var(--neon-rgb), 0.55)); } .sitestaffr-theme-neon .sitestaffr-widget-button:hover, #sitestaffr-widget.sitestaffr-theme-neon:not(.state-listening):not(.state-thinking):not(.state-speaking):not(.state-searching):not(.state-error) .sitestaffr-widget-button:hover { background-color: var(--neon-surface-2); color: var(--widget-hover-icon-color, var(--widget-icon-color, var(--neon-ink))); box-shadow: 0 0 0 1px rgba(var(--neon-rgb), 0.4), 0 0 calc(var(--neon-blur-near) * 1.33) 2px rgba(var(--neon-rgb), 0.5), 0 0 calc(var(--neon-blur-far) * 1.44) calc(var(--neon-spread-far) * 2) rgba(var(--neon-rgb), 0.3), inset 0 0 calc(var(--neon-blur-inset) * 1.33) rgba(var(--neon-rgb), 0.38); } .sitestaffr-theme-neon .sitestaffr-widget-button:focus { outline: 2px solid var(--neon); outline-offset: 3px; } /* Listening and error stay red — those are status, not brand, and the neon skin must not make an error look like the idle state. Only the glow is restyled. */ .sitestaffr-theme-neon.state-listening .sitestaffr-widget-button, .sitestaffr-theme-neon.state-error .sitestaffr-widget-button { border-color: #e74c3c !important; box-shadow: 0 0 12px 1px rgba(231, 76, 60, 0.45), inset 0 0 12px rgba(231, 76, 60, 0.3); } .sitestaffr-theme-neon .sitestaffr-pulse-ring { border-color: var(--neon); box-shadow: 0 0 10px var(--neon-dim); } .sitestaffr-theme-neon.state-listening .sitestaffr-pulse-ring { border-color: #e74c3c; box-shadow: 0 0 10px rgba(231, 76, 60, 0.5); } /* =========================== INLINE BUTTON ([sitestaffr_button]) =========================== */ /* The inline CTA is a text button, not a bubble, so it gets the same tube treatment applied to its own tokens — otherwise a bright brand-colored CTA would open a neon panel and the two would not look like one product. */ .sitestaffr-theme-neon .sitestaffr-button-widget { --btn-background: var(--neon-surface); --btn-hover-background: var(--neon-surface-2); --btn-text-color: var(--widget-icon-color, var(--neon)); --btn-icon-color: var(--widget-icon-color, var(--neon)); --btn-bdw: 2px; --btn-bds: solid; --btn-bdc: var(--neon); --btn-box-shadow: 0 0 var(--neon-blur-near) 1px var(--neon-dim), 0 0 var(--neon-blur-far) var(--neon-spread-far) rgba(var(--neon-rgb), 0.22), inset 0 0 var(--neon-blur-inset) rgba(var(--neon-rgb), 0.28); } .sitestaffr-theme-neon .sitestaffr-button-widget:hover { --btn-box-shadow: 0 0 calc(var(--neon-blur-near) * 1.33) 2px rgba(var(--neon-rgb), 0.5), 0 0 calc(var(--neon-blur-far) * 1.44) calc(var(--neon-spread-far) * 2) rgba(var(--neon-rgb), 0.3), inset 0 0 calc(var(--neon-blur-inset) * 1.33) rgba(var(--neon-rgb), 0.38); } .sitestaffr-theme-neon .sitestaffr-button-widget:focus { outline-color: var(--neon); } /* =========================== TOOLTIP =========================== */ .sitestaffr-theme-neon .sitestaffr-widget-tooltip { background-color: var(--neon-surface); color: var(--neon-ink); border: 1px solid var(--neon-dim); box-shadow: 0 0 14px rgba(var(--neon-rgb), 0.22); } .sitestaffr-theme-neon .sitestaffr-widget-tooltip::after { border-top-color: var(--neon-surface); } .sitestaffr-theme-neon.sitestaffr-tooltip--bottom .sitestaffr-widget-tooltip::after { border-top-color: transparent; border-bottom-color: var(--neon-surface); } /* =========================== PANEL + LANDING CARD TOKENS =========================== */ /* Everything below is a token override — the panel CSS already reads these. */ .sitestaffr-theme-neon.sitestaffr-chat-panel, .sitestaffr-theme-neon.sitestaffr-landing-card { --chat-primary: var(--neon); --chat-primary-hover: var(--neon); --chat-text-on-primary: #06222b; --chat-bg: var(--neon-surface); --chat-border: rgba(var(--neon-rgb), 0.22); --chat-text: var(--neon-ink); --chat-text-muted: var(--neon-ink-muted); --chat-visitor-bg: rgba(var(--neon-rgb), 0.16); --chat-visitor-text: var(--neon-ink); --chat-assistant-bg: var(--neon-surface-2); --chat-assistant-text: var(--neon-ink); --chat-input-bg: var(--neon-surface-2); --chat-input-border: rgba(var(--neon-rgb), 0.3); border: 1px solid var(--neon-line); box-shadow: 0 0 0 1px rgba(var(--neon-rgb), 0.18), 0 0 14px rgba(var(--neon-rgb), 0.4), 0 0 48px 6px rgba(var(--neon-rgb), 0.2), 0 20px 60px rgba(0, 0, 0, 0.6); } /* A glowing rule reads as neon; a solid bar of brand color reads as a toy. */ .sitestaffr-theme-neon .sitestaffr-chat-header { background: linear-gradient(180deg, rgba(var(--neon-rgb), 0.14), rgba(var(--neon-rgb), 0.03)); color: var(--neon-ink); border-bottom: 1px solid rgba(var(--neon-rgb), 0.35); box-shadow: 0 1px 12px rgba(var(--neon-rgb), 0.25); } .sitestaffr-theme-neon .sitestaffr-chat-header-title { text-shadow: 0 0 10px rgba(var(--neon-rgb), 0.55); } .sitestaffr-theme-neon .sitestaffr-chat-header-btn { color: var(--neon-ink); } /* Message bubbles */ .sitestaffr-theme-neon .sitestaffr-chat-message--visitor { border: 1px solid var(--neon-line); box-shadow: 0 0 10px rgba(var(--neon-rgb), 0.22), inset 0 0 var(--neon-blur-inset) rgba(var(--neon-rgb), 0.08); } .sitestaffr-theme-neon .sitestaffr-chat-message--assistant { border: 1px solid rgba(255, 255, 255, 0.07); } .sitestaffr-theme-neon .sitestaffr-chat-message--assistant code { background: rgba(var(--neon-rgb), 0.14); color: var(--neon); } .sitestaffr-theme-neon .sitestaffr-chat-message--assistant a { color: var(--neon); } .sitestaffr-theme-neon .sitestaffr-chat-messages::-webkit-scrollbar-thumb { background: rgba(var(--neon-rgb), 0.3); } .sitestaffr-theme-neon .sitestaffr-chat-typing { border: 1px solid rgba(255, 255, 255, 0.07); } .sitestaffr-theme-neon .sitestaffr-chat-typing-dot { background: var(--neon); box-shadow: 0 0 6px rgba(var(--neon-rgb), 0.7); } /* Input */ .sitestaffr-theme-neon .sitestaffr-chat-input-area { background: rgba(8, 20, 28, 0.9); border-top: 1px solid rgba(var(--neon-rgb), 0.22); } .sitestaffr-theme-neon .sitestaffr-chat-textarea { color: var(--neon-ink); } .sitestaffr-theme-neon .sitestaffr-chat-textarea::placeholder { color: var(--neon-ink-muted); } .sitestaffr-theme-neon .sitestaffr-chat-textarea:focus { border-color: var(--neon); box-shadow: 0 0 0 1px var(--neon-dim), 0 0 14px rgba(var(--neon-rgb), 0.28); } .sitestaffr-theme-neon.sitestaffr-chat-panel .sitestaffr-chat-send-btn { background: var(--neon); color: #06222b; box-shadow: 0 0 14px rgba(var(--neon-rgb), 0.55); } .sitestaffr-theme-neon.sitestaffr-chat-panel .sitestaffr-chat-send-btn:hover { box-shadow: 0 0 20px rgba(var(--neon-rgb), 0.75); } /* =========================== LANDING CARD TILES =========================== */ .sitestaffr-theme-neon .sitestaffr-landing-tile { background: var(--neon-surface-2); border: 1px solid rgba(var(--neon-rgb), 0.25); } .sitestaffr-theme-neon .sitestaffr-landing-tile:hover { background: rgba(var(--neon-rgb), 0.1); border-color: var(--neon); box-shadow: 0 0 18px rgba(var(--neon-rgb), 0.3); } .sitestaffr-theme-neon .sitestaffr-landing-tile-icon { background: rgba(var(--neon-rgb), 0.14); border: 1px solid var(--neon-line); color: var(--neon); box-shadow: inset 0 0 var(--neon-blur-inset) rgba(var(--neon-rgb), 0.2); } .sitestaffr-theme-neon .sitestaffr-landing-card-close { color: var(--neon-ink-muted); } /* =========================== CONTACT FORM =========================== */ .sitestaffr-theme-neon .sitestaffr-contact-input, .sitestaffr-theme-neon .sitestaffr-contact-textarea { background: var(--neon-surface-2); border-color: rgba(var(--neon-rgb), 0.3); color: var(--neon-ink); } .sitestaffr-theme-neon .sitestaffr-contact-input::placeholder, .sitestaffr-theme-neon .sitestaffr-contact-textarea::placeholder { color: var(--neon-ink-muted); } .sitestaffr-theme-neon .sitestaffr-contact-input:focus, .sitestaffr-theme-neon .sitestaffr-contact-textarea:focus { border-color: var(--neon); box-shadow: 0 0 var(--neon-blur-near) rgba(var(--neon-rgb), 0.25); } /* =========================== ACCESSIBILITY =========================== */ /* Glow is decoration. Drop it when the reader has asked for firmer edges, and lift the muted text so it still clears contrast without the halo. */ @media (prefers-contrast: more) { .sitestaffr-theme-neon .sitestaffr-widget-button, .sitestaffr-theme-neon.sitestaffr-chat-panel, .sitestaffr-theme-neon.sitestaffr-landing-card { box-shadow: none; } .sitestaffr-theme-neon .sitestaffr-icon, .sitestaffr-theme-neon .sitestaffr-button-icon { filter: none; } .sitestaffr-theme-neon { --neon-ink-muted: #d3e6ee; } }