/* AUTOOL Contact Widget (standalone plugin; successor of the header-elements * ContactWidget module, which replaced chaty-pro). * Visual language: squared industrial glass — charcoal (#111214) translucent * panels, blur(14px) saturate(1.12) (site glass idiom), 4px corners (theme * radius is 0), amber #FEB511 accent, per-channel color tints. * Collapse uses opacity/transform ONLY — never display:none/visibility:hidden, * or GTranslate permanently skips the labels (hidden-subtree trap). * --autool-sticky-bottom-lift is set on by the widget's inline script * whenever a fixed bottom bar (sticky add-to-cart etc.) is visible; the FAB * and Blocksy's back-to-top ride above it. * Geometry (--autool-fab-offset-*, --autool-fab-size) and accent come from the * settings screen as inline custom properties on the root element. */ :root { --autool-sticky-bottom-responsive-trim: 0px; } .autool-contact-fab { position: fixed; bottom: var(--autool-fab-offset-y, 25px); z-index: 120; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-family: inherit; --autool-fab-radius: 4px; --autool-fab-glass: rgba(17, 18, 20, 0.62); --autool-fab-border: rgba(255, 255, 255, 0.16); --autool-fab-blur: blur(14px) saturate(1.12); --autool-fab-accent: var(--theme-palette-color-1, #feb511); /* The site's global radius-zero reset does * `:where(button,...){border-radius:var(--theme-border-radius)!important}`; * feed it our radius so the buttons stay squared, not reset to 0. */ --theme-border-radius: var(--autool-fab-radius); transform: translateY(calc(-1 * max(0px, var(--autool-sticky-bottom-lift, 0px) - var(--autool-sticky-bottom-responsive-trim)))); transition: transform 0.2s ease; } .autool-contact-fab--left { left: var(--autool-fab-offset-x, 25px); } .autool-contact-fab--right { right: var(--autool-fab-offset-x, 25px); align-items: flex-end; } /* Collapsed, the root's layout box is mostly invisible (channels are * opacity:0 but still laid out for GTranslate) yet would swallow every tap * over it. Let only the toggle row hit-test while collapsed. */ .autool-contact-fab:not(.is-open) { pointer-events: none; } .autool-contact-fab__toggle, .autool-contact-fab.is-open { pointer-events: auto; } .autool-contact-fab__row { display: flex; align-items: center; gap: 12px; } .autool-contact-fab--right .autool-contact-fab__row { flex-direction: row-reverse; } .autool-contact-fab__toggle { width: var(--autool-fab-size, 54px); height: var(--autool-fab-size, 54px); padding: 0; border: 1px solid var(--autool-fab-border); border-radius: var(--autool-fab-radius); background: linear-gradient(165deg, rgba(30, 32, 36, 0.55), rgba(13, 14, 16, 0.68)); background-color: var(--autool-fab-glass); backdrop-filter: var(--autool-fab-blur); -webkit-backdrop-filter: var(--autool-fab-blur); color: var(--autool-fab-accent); display: flex; align-items: center; justify-content: center; position: relative; flex: 0 0 auto; cursor: pointer; box-shadow: 0 10px 24px rgba(17, 18, 20, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .autool-contact-fab__toggle:hover { border-color: color-mix(in srgb, var(--autool-fab-accent) 55%, transparent); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(17, 18, 20, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .autool-contact-fab__toggle:focus-visible { outline: 2px solid var(--autool-fab-accent); outline-offset: 2px; } .autool-contact-fab__toggle-icon { display: flex; align-items: center; justify-content: center; position: absolute; transition: opacity 0.18s ease, transform 0.18s ease; } .autool-contact-fab__toggle-icon--close { opacity: 0; transform: rotate(-45deg); } .autool-contact-fab.is-open .autool-contact-fab__toggle-icon--open { opacity: 0; transform: rotate(45deg); } .autool-contact-fab.is-open .autool-contact-fab__toggle-icon--close { opacity: 1; transform: rotate(0); } /* ---- Nudge bubble ("Get Better Price") ---------------------------------- */ /* Starts inert but rendered (GTranslate hidden-subtree trap: opacity only). */ .autool-contact-fab__nudge { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: rgba(17, 18, 20, 0.78); backdrop-filter: blur(10px) saturate(1.12); -webkit-backdrop-filter: blur(10px) saturate(1.12); border: 1px solid color-mix(in srgb, var(--autool-fab-accent) 45%, rgba(255, 255, 255, 0.12)); border-radius: var(--autool-fab-radius); box-shadow: 0 10px 24px rgba(17, 18, 20, 0.28); color: #fff; cursor: pointer; white-space: nowrap; position: relative; opacity: 0; transform: translateX(-6px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } .autool-contact-fab--right .autool-contact-fab__nudge { transform: translateX(6px); } .autool-contact-fab.is-nudge-visible .autool-contact-fab__nudge { opacity: 1; transform: translateX(0); pointer-events: auto; } /* Hide the bubble while the channel stack is open — it would overlap. */ .autool-contact-fab.is-open .autool-contact-fab__nudge { opacity: 0; pointer-events: none; } .autool-contact-fab__nudge-text { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; line-height: 1; color: var(--autool-fab-accent); } .autool-contact-fab__nudge-close { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.8); cursor: pointer; } .autool-contact-fab__nudge-close:hover { background: rgba(255, 255, 255, 0.22); color: #fff; } /* ---- Channel stack ------------------------------------------------------ */ .autool-contact-fab__channels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; /* collapsed: kept visible to the DOM/GTranslate, inert to users */ opacity: 0; transform: translateY(12px) scale(0.96); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .autool-contact-fab--right .autool-contact-fab__channels { align-items: flex-end; } .autool-contact-fab.is-open .autool-contact-fab__channels { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .autool-contact-fab__item { margin: 0; } .autool-contact-fab__link { display: flex; align-items: center; gap: 10px; text-decoration: none; /* button reset for the quote channel */ background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; } .autool-contact-fab--right .autool-contact-fab__link { flex-direction: row-reverse; } .autool-contact-fab__icon { width: calc(var(--autool-fab-size, 54px) - 8px); height: calc(var(--autool-fab-size, 54px) - 8px); border-radius: var(--autool-fab-radius); border: 1px solid rgba(255, 255, 255, 0.14); border-color: color-mix(in srgb, var(--autool-contact-color, #fff) 38%, rgba(255, 255, 255, 0.1)); background: var(--autool-fab-glass); background: color-mix(in srgb, var(--autool-contact-color, #333) 16%, rgba(15, 16, 18, 0.6)); backdrop-filter: var(--autool-fab-blur); -webkit-backdrop-filter: var(--autool-fab-blur); color: var(--autool-contact-color, #fff); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; box-shadow: 0 8px 20px rgba(17, 18, 20, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.07); transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .autool-contact-fab__link:hover .autool-contact-fab__icon, .autool-contact-fab__link:focus-visible .autool-contact-fab__icon { background: var(--autool-contact-color, #333); border-color: var(--autool-contact-color, #333); color: #fff; transform: translateY(-1px); } .autool-contact-fab__link:focus-visible { outline: none; } .autool-contact-fab__label { background: rgba(17, 18, 20, 0.72); backdrop-filter: blur(10px) saturate(1.12); -webkit-backdrop-filter: blur(10px) saturate(1.12); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; line-height: 1; padding: 8px 12px; border-radius: var(--autool-fab-radius); white-space: nowrap; opacity: 0; transform: translateX(-4px); transition: opacity 0.15s ease, transform 0.15s ease; } .autool-contact-fab--right .autool-contact-fab__label { transform: translateX(4px); } .autool-contact-fab__link:hover .autool-contact-fab__label, .autool-contact-fab__link:focus-visible .autool-contact-fab__label { opacity: 1; transform: translateX(0); } /* Back-to-top keeps Blocksy's native visual styling and rides only the same * responsive lift. Blocksy animates its --transform variable, so its native * show/hide transition remains intact. */ html body .ct-back-to-top.ct-show { --transform: translate3d(0, calc(-1 * max(0px, var(--autool-sticky-bottom-lift, 0px) - var(--autool-sticky-bottom-responsive-trim))), 0); } /* ---- Quote popup modal ---------------------------------------------------- * Mirrors the single-product modal idiom (autool-single-product-runtime.css): * light layered backdrop with a faint amber wash — deliberately NO * backdrop-filter: scrolling content above a backdrop-filtered layer forces * per-frame blur recomposition in Chromium and reads as laggy/blocked scroll * (the product modal's blur "glass" variant was rolled back for related * reasons). The PANEL is the scroll container with a sticky header, exactly * like .autool-product-modal-panel, so wheel/touch anywhere over the dialog * scrolls the form. */ .autool-cw-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(243, 244, 246, 0.96) 100%), linear-gradient(120deg, color-mix(in srgb, var(--theme-palette-color-1, #feb511) 14%, transparent) 0%, transparent 48%), rgba(18, 20, 23, 0.7); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } .autool-cw-modal.is-open { opacity: 1; visibility: visible; } html.autool-cw-modal-open { overflow: hidden; } .autool-cw-modal__panel { width: min(100%, 720px); max-height: min(90vh, 920px); overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; border: 1px solid var(--theme-border-color, #d1d5db); border-radius: 8px; background: #fff; box-shadow: 0 24px 64px rgba(17, 18, 20, 0.26), 0 4px 16px rgba(17, 18, 20, 0.12); transform: translateY(16px) scale(0.985); transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); } .autool-cw-modal__panel::-webkit-scrollbar { width: 10px; } .autool-cw-modal__panel::-webkit-scrollbar-track { background: transparent; } .autool-cw-modal__panel::-webkit-scrollbar-thumb { background: #d3d6db; border-radius: 8px; border: 2px solid #fff; } .autool-cw-modal.is-open .autool-cw-modal__panel { transform: none; } .autool-cw-modal__header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 0 20px; border-bottom: 2px solid var(--theme-palette-color-1, #feb511); background: linear-gradient(180deg, #fff 0%, #f9fafb 100%); } .autool-cw-modal__title-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; } .autool-cw-modal__title-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--theme-palette-color-1, #feb511) 30%, transparent); background: color-mix(in srgb, var(--theme-palette-color-1, #feb511) 14%, #fff); color: var(--theme-palette-color-2, #d4960d); } .autool-cw-modal__title-icon svg { width: 18px; height: 18px; } .autool-cw-modal__title { margin: 0; overflow: hidden; color: var(--theme-headings-color, #1a1c1f); font-size: 20px; font-weight: 800; line-height: 1.1; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; } .autool-cw-modal__title span { color: var(--theme-palette-color-2, #d4960d); } .autool-cw-modal__close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-width: 36px; padding: 0; border: 1px solid var(--theme-border-color, #d1d5db); border-radius: 4px; background: #fff; color: var(--theme-headings-color, #1a1c1f); line-height: 1; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .autool-cw-modal__close:hover { border-color: var(--theme-palette-color-1, #feb511); background: color-mix(in srgb, var(--theme-palette-color-1, #feb511) 14%, #fff); color: var(--theme-palette-color-2, #d4960d); } .autool-cw-modal__close:focus-visible { outline: 2px solid var(--theme-palette-color-1, #feb511); outline-offset: 2px; } .autool-cw-modal__body { padding: 20px 24px 28px; } .autool-cw-modal__status { margin: 24px 0; text-align: center; color: #555; } /* Textless spinner for the rare cold click (prefetch usually preempts it). */ .autool-cw-modal__spinner { display: block; width: 34px; height: 34px; margin: 48px auto; border: 3px solid rgba(17, 18, 20, 0.12); border-top-color: var(--theme-palette-color-1, #feb511); border-radius: 50%; animation: autool-cw-spin 0.7s linear infinite; } @keyframes autool-cw-spin { to { transform: rotate(360deg); } } .autool-cw-modal__status--error { color: #c0392b; } /* Glass needs backdrop support; otherwise go (almost) opaque for legibility. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .autool-contact-fab__toggle, .autool-contact-fab__icon { background: rgba(17, 18, 20, 0.94); } .autool-contact-fab__label, .autool-contact-fab__nudge { background: rgba(17, 18, 20, 0.96); } } @media (max-width: 1024px) { :root { --autool-sticky-bottom-responsive-trim: 14px; } } @media (max-width: 768px) { .autool-contact-fab { bottom: var(--autool-fab-offset-y-m, 16px); } .autool-contact-fab--left { left: var(--autool-fab-offset-x-m, 16px); } .autool-contact-fab--right { right: var(--autool-fab-offset-x-m, 16px); } /* On touch there is no hover: show labels whenever the stack is open. */ .autool-contact-fab.is-open .autool-contact-fab__label { opacity: 1; transform: translateX(0); } .autool-cw-modal { padding: 0; align-items: flex-end; } .autool-cw-modal__panel { width: 100%; max-height: 92vh; border-radius: 12px 12px 0 0; border-bottom: 0; } /* Bottom-sheet grab handle. */ .autool-cw-modal__header::before { content: ""; position: absolute; top: 7px; left: 50%; width: 40px; height: 4px; transform: translateX(-50%); border-radius: 2px; background: #d1d5db; } .autool-cw-modal__body { padding: 16px 16px 28px; } } @media (prefers-reduced-motion: reduce) { .autool-contact-fab, .autool-contact-fab__toggle, .autool-contact-fab__toggle-icon, .autool-contact-fab__channels, .autool-contact-fab__icon, .autool-contact-fab__label, .autool-contact-fab__nudge, .autool-cw-modal, .autool-cw-modal__panel { transition: none; } }