/* Ask Astra — HubSpot chat button (standalone) Drop-in styles for any website. Pair with ask-astra.js. Values mirror the app's AskAstraFloatingButton (rem converted to px @16px base). */ /* Hide HubSpot's default launcher/panel by default; reveal only while a chat is open (the hs-chat-open class on , toggled by ask-astra.js). visibility (not display:none) keeps the iframe laid out so widget.open() works. */ #hubspot-messages-iframe-container { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } body.hs-chat-open #hubspot-messages-iframe-container { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* When open on desktop, HubSpot still shows its launcher bubble (a close/minimize toggle) below the chat card. Shift the container down so that bubble drops off-screen while the chat card stays visible. Desktop only — on mobile the open chat is full-screen with no separate launcher. Tune the offset if the bubble still peeks (increase) or the card sits too low (decrease). */ @media (min-width: 769px) { body.hs-chat-open #hubspot-messages-iframe-container { bottom: -80px !important; } } /* Ask Astra floating button */ .askastra-button { position: fixed; right: 24px; bottom: 32px; z-index: 201; /* below HubSpot's chat panel so the panel opens over the button */ display: flex; align-items: center; justify-content: flex-start; width: 44px; height: 44px; padding-left: 10px; padding-right: 0; border: none; border-radius: 22px; background: linear-gradient(90deg, #fe47ed 0%, #532494 100%); color: #fff; cursor: pointer; box-shadow: 0 4px 12px rgba(83, 36, 148, 0.28); overflow: hidden; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s cubic-bezier(0.4, 0, 0.2, 1); animation: askAstraGlow 2.4s ease-in-out infinite; } .askastra-button:focus-visible { outline: 2px solid #fe47ed; outline-offset: 2px; } .askastra-button.askastra-expanded { width: 128px; padding-left: 14px; padding-right: 8px; } /* Pulsing glow halo — a second box-shadow ring that expands and fades out. */ @keyframes askAstraGlow { 0% { box-shadow: 0 4px 8px rgba(83, 36, 148, 0.28), 0 0 0 0 rgba(254, 71, 237, 0.5); } 70%, 100% { box-shadow: 0 4px 8px rgba(83, 36, 148, 0.28), 0 0 0 5px rgba(254, 71, 237, 0); } } .askastra-inner { display: flex; align-items: center; gap: 11px; flex-shrink: 0; white-space: nowrap; } .askastra-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; } /* Blinking diamond sparkle on the icon's top-right corner. */ .askastra-icon::after { content: ''; position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; background: #fff; clip-path: polygon( 50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39% ); pointer-events: none; animation: askAstraSparkle 1.8s ease-in-out infinite; } @keyframes askAstraSparkle { 0%, 100% { opacity: 0.35; transform: scale(0.7) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(20deg); } } .askastra-label { font-size: 16px; font-weight: 700; line-height: 24px; flex-shrink: 0; } @media (max-width: 768px) { .askastra-button { right: 16px; bottom: 28px; } } @media (prefers-reduced-motion: reduce) { .askastra-button { animation: none; } .askastra-icon::after { animation: none; opacity: 1; } }