/** * BSPE Connect — frontend bar + welcome bubble. * * Mobile-only widget. Visibility above the configured breakpoint is killed * by an inline media query printed in wp_head (see Frontend::print_inline_css_vars). * * Color custom properties are also set inline from settings; the values * below are the brand defaults used in case the inline styles fail to load. */ .bspe-connect { --bspe-bar-bg: #351E28; --bspe-button-bg: #351E28; --bspe-button-fg: #FAF7F2; --bspe-bubble-bg: #FAF7F2; --bspe-bubble-fg: #351E28; --bspe-accent: #3AAFB9; --bspe-bar-h: 52px; --bspe-icon-size: 16px; --bspe-label-size: 12px; --bspe-label-weight: 500; --bspe-label-transform: uppercase; --bspe-button-padding-top: 6px; --bspe-button-padding-right: 4px; --bspe-button-padding-bottom: 6px; --bspe-button-padding-left: 4px; --bspe-icon-label-gap: 2px; --bspe-ease: cubic-bezier(0.16, 1, 0.3, 1); --bspe-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; position: fixed; left: 0; right: 0; bottom: 0; /* Sit above third-party bottom-corner widgets (live chat, accessibility toolbars) so our welcome bubble + bar are never buried under them. UserWay squats at the 32-bit max (2147483647), so we match it and let DOM order break the tie — the frontend JS re-appends this root as the last child so we win. This is the root stacking context; the bubble / modal keep their own smaller z-index for internal ordering. */ z-index: 2147483647; pointer-events: none; font-family: var(--bspe-font-family); } /* Anti-flash reveal. An inline `#bspe-connect { visibility: hidden }` rule in wp_head keeps the raw markup invisible while an optimization plugin (NitroPack etc.) defers this stylesheet — otherwise the bar flashes as unstyled stacked links with unloaded icon-font tofu. This selector is deliberately one class MORE specific (1,1,0 beats the inline head rule's 1,0,0) so the reveal wins no matter what order the optimizer injects styles in. Once this sheet is live the bar is fixed + translated off-screen until the show-delay, so the reveal itself never flashes. */ #bspe-connect.bspe-connect { visibility: visible; } .bspe-connect *, .bspe-connect *::before, .bspe-connect *::after { box-sizing: border-box; } /* ---------------------------------------------------------------------- */ /* Bar */ /* ---------------------------------------------------------------------- */ .bspe-connect__bar { display: flex; align-items: stretch; min-height: var(--bspe-bar-h); background: var(--bspe-bar-bg); pointer-events: auto; transform: translateY(110%); transition: transform 280ms var(--bspe-ease); will-change: transform; box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, 0.28); padding-bottom: env(safe-area-inset-bottom, 0px); } .bspe-connect__bar[data-bspe-state="visible"] { transform: translateY(0); } /* ---------------------------------------------------------------------- */ /* Buttons */ /* ---------------------------------------------------------------------- */ /* * NOTE: every