/* AUTOOL static contact widget (replaces 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. */ :root { --autool-sticky-bottom-responsive-trim: 0px; } .autool-contact-fab { position: fixed; left: 25px; bottom: 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 toggle stays 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; } /* Collapsed, the root's layout box (~146x218) is 90% invisible (channels are * opacity:0 but still laid out for GTranslate) yet swallowed every tap over it, * blocking the mobile gallery dots underneath. Let only the toggle hit-test * while collapsed; the whole widget while open. */ .autool-contact-fab:not(.is-open) { pointer-events: none; } .autool-contact-fab__toggle { pointer-events: auto; } .autool-contact-fab.is-open { pointer-events: auto; } .autool-contact-fab__toggle { width: 54px; height: 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; 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); } .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.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; } .autool-contact-fab__icon { width: 46px; height: 46px; 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; 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__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); } /* 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 { 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 { left: 16px; bottom: 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); } } @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 { transition: none; } }