/** * CorLayers — Quick Menu (Floating Action Button) Widget CSS * * JS moves .cl-qm-wrapper.cl-qm-fixed to on init to escape any * CSS transform contexts applied by Elementor widget wrappers (which break * position:fixed on children). All item positioning uses CSS custom * properties set by JS after the wrapper is in the correct DOM position. * * @package CorLayers */ /* ─── Elementor widget wrapper — must not clip or constrain ────────────── */ /* * Both the outer widget div AND the inner widget-container must be * overflow: visible. In inline mode, items are position:absolute and extend * outside the widget bounds — the inner container clips them by default. */ .elementor-widget-cl-quick-menu, .elementor-widget-cl-quick-menu .elementor-widget-container { overflow: visible !important; } /* ─── Root wrapper ──────────────────────────────────────────────────────── */ .cl-qm-wrapper { position: relative; z-index: 100; /* establish stacking context so absolute items aren't clipped by siblings */ display: inline-flex; align-items: center; justify-content: center; overflow: visible; flex-shrink: 0; /* prevent compression when placed inside a flex/grid container */ } .cl-qm-wrapper.cl-qm-fixed { position: fixed; z-index: 9999; } .cl-qm-wrapper.cl-qm-fixed.cl-qm-pos--bottom-right { bottom: var(--cl-qm-offset-y, 24px); right: var(--cl-qm-offset-x, 24px); } .cl-qm-wrapper.cl-qm-fixed.cl-qm-pos--bottom-left { bottom: var(--cl-qm-offset-y, 24px); left: var(--cl-qm-offset-x, 24px); } .cl-qm-wrapper.cl-qm-fixed.cl-qm-pos--top-right { top: var(--cl-qm-offset-y, 24px); right: var(--cl-qm-offset-x, 24px); } .cl-qm-wrapper.cl-qm-fixed.cl-qm-pos--top-left { top: var(--cl-qm-offset-y, 24px); left: var(--cl-qm-offset-x, 24px); } /* ─── Trigger button ────────────────────────────────────────────────────── */ .cl-qm-trigger { position: relative; z-index: 10; /* Dimensions use !important so theme button styles can't win. The inline style="" on the element is the source of truth; these rules are a CSS-layer safety net. */ width: var(--cl-qm-trigger-size, 60px) !important; height: var(--cl-qm-trigger-size, 60px) !important; min-width: var(--cl-qm-trigger-size, 60px) !important; min-height: var(--cl-qm-trigger-size, 60px) !important; border-radius: 50% !important; background: var(--cl-qm-trigger-bg, #6366f1) !important; color: var(--cl-qm-trigger-color, #ffffff) !important; border: none !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; -webkit-appearance: none !important; appearance: none !important; cursor: pointer; display: flex !important; align-items: center !important; justify-content: center !important; font-size: calc(var(--cl-qm-trigger-size, 60px) * 0.38) !important; line-height: 1 !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28); transition: transform 0.3s ease, box-shadow 0.3s ease; flex-shrink: 0; outline-offset: 3px; text-decoration: none !important; } .cl-qm-trigger:hover { box-shadow: 0 6px 28px rgba(0, 0, 0, 0.38); transform: scale(1.06); } /* ─── Trigger icon open/close swap ─────────────────────────────────────── */ .cl-qm-trigger-icon-open, .cl-qm-trigger-icon-close { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; line-height: 1; transition: transform 0.3s ease, opacity 0.3s ease; } .cl-qm-trigger-icon-open { opacity: 1; transform: rotate(0deg) scale(1); } .cl-qm-trigger-icon-close { opacity: 0; transform: rotate(-90deg) scale(0.5); } .cl-qm-wrapper.is-open .cl-qm-trigger-icon-open { opacity: 0; transform: rotate(90deg) scale(0.5); } .cl-qm-wrapper.is-open .cl-qm-trigger-icon-close { opacity: 1; transform: rotate(0deg) scale(1); } /* ─── Items container ───────────────────────────────────────────────────── */ /* * Zero-dimension anchor at the trigger centre. * Items are absolutely positioned from this point using CSS custom * properties --cl-qm-tx / --cl-qm-ty set by JS. */ .cl-qm-items { position: absolute; top: 50%; left: 50%; width: 0; height: 0; overflow: visible; pointer-events: none; z-index: 5; } /* ─── Individual items ──────────────────────────────────────────────────── */ .cl-qm-item { position: absolute; top: 0; left: 0; /* !important on these properties defeats theme a { } rules */ width: var(--cl-qm-item-size, 48px) !important; height: var(--cl-qm-item-size, 48px) !important; min-width: var(--cl-qm-item-size, 48px) !important; min-height: var(--cl-qm-item-size, 48px) !important; border-radius: 50% !important; background: var(--cl-qm-bg, #6366f1) !important; color: var(--cl-qm-icon-color, #ffffff) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; font-size: calc(var(--cl-qm-item-size, 48px) * 0.4) !important; line-height: 1 !important; text-decoration: none !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); /* * Default (closed) state: centered on trigger, invisible. * translate(-50%,-50%) centres item on the items-container origin. * translate(0,0) — JS will set --cl-qm-tx/ty. * scale(0) hides item. */ transform: translate(-50%, -50%) translate(0px, 0px) scale(0); opacity: 0; pointer-events: none; will-change: transform, opacity; /* promote to GPU compositing layer */ transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease; transition-delay: var(--cl-qm-delay, 0ms); } /* Open state — JS sets --cl-qm-tx/ty before toggling is-open */ .cl-qm-wrapper.is-open .cl-qm-item { transform: translate(-50%, -50%) translate(var(--cl-qm-tx, 0px), var(--cl-qm-ty, 0px)) scale(1); opacity: 1; pointer-events: auto; } /* Close: no stagger delay — all collapse at once */ .cl-qm-wrapper:not(.is-open) .cl-qm-item { transition-delay: 0ms !important; } /* * Icon constraints — Font Awesome may render as (CSS font) or * (SVG injection). SVGs can carry explicit width/height attributes that * ignore font-size. Force them to 1em × 1em and never overflow the button. */ .cl-qm-item i, .cl-qm-item svg, .cl-qm-trigger-icon-open i, .cl-qm-trigger-icon-open svg, .cl-qm-trigger-icon-close svg { width: 1em !important; height: 1em !important; max-width: 1em !important; max-height: 1em !important; display: inline-block; flex-shrink: 0; pointer-events: none; vertical-align: middle; overflow: visible; color: inherit !important; fill: currentColor !important; } .cl-qm-item i::before, .cl-qm-item svg path, .cl-qm-trigger-icon-open i::before, .cl-qm-trigger-icon-open svg path, .cl-qm-trigger-icon-close svg path { color: inherit !important; fill: currentColor !important; } .cl-qm-item:hover { filter: brightness(1.15); } @media (prefers-reduced-motion: no-preference) and (hover: hover) { .cl-qm-item:hover { transform: translate(-50%, -50%) translate(var(--cl-qm-tx, 0px), var(--cl-qm-ty, 0px)) scale(1.12) !important; } } /* ─── Idle animations — trigger ─────────────────────────────────────────── */ @media (prefers-reduced-motion: no-preference) { .cl-qm-idle--pulse .cl-qm-trigger::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; /* * Use the trigger background colour (not currentColor / icon colour). * currentColor inherits the icon colour (often white) which washes out * against light backgrounds. The trigger bg var is always set inline. */ background: var(--cl-qm-trigger-bg, #6366f1); opacity: 0.4; animation: cl-qm-pulse 2s ease-out infinite; z-index: -1; pointer-events: none; } .cl-qm-idle--spin .cl-qm-trigger-icon-open { animation: cl-qm-spin 5s linear infinite; } .cl-qm-idle--bounce .cl-qm-trigger { animation: cl-qm-bounce 2.5s ease-in-out infinite; } .cl-qm-idle--wiggle .cl-qm-trigger { animation: cl-qm-wiggle 3s ease-in-out infinite; } /* Cancel all trigger idle animations when open */ .cl-qm-wrapper.is-open .cl-qm-trigger, .cl-qm-wrapper.is-open .cl-qm-trigger::before, .cl-qm-wrapper.is-open .cl-qm-trigger-icon-open { animation: none !important; } /* ─── Item idle animations (only when open) ──── */ /* * Float, orbit, and pulse-seq all animate the `transform` property. * CSS animation always beats CSS transition on the same property, so if * these animations start immediately on open they kill the springy scale-in * entry transition. Fix: delay each idle animation until after the entry * transition has finished (~380ms) plus the item's own stagger offset. * animation-fill-mode defaults to `none` so the element is controlled by * the transition during the delay window — the handoff is seamless. */ .cl-qm-wrapper.is-open.cl-qm-item-anim--float .cl-qm-item { animation: cl-qm-item-float 2.4s ease-in-out infinite alternate; animation-delay: calc(0.42s + var(--cl-qm-delay, 0ms)); animation-fill-mode: none; } .cl-qm-wrapper.is-open.cl-qm-item-anim--orbit .cl-qm-items { animation: cl-qm-items-rotate 7s linear infinite; animation-delay: 0.45s; } .cl-qm-wrapper.is-open.cl-qm-item-anim--orbit .cl-qm-item { animation: cl-qm-item-counter-rotate 7s linear infinite; animation-delay: 0.45s; animation-fill-mode: none; } .cl-qm-wrapper.is-open.cl-qm-item-anim--pulse-seq .cl-qm-item { animation: cl-qm-item-pulse 1.8s ease-in-out infinite; animation-delay: calc(0.42s + var(--cl-qm-delay, 0ms)); animation-fill-mode: none; } .cl-qm-wrapper.is-open.cl-qm-item-anim--spin-icon .cl-qm-item i, .cl-qm-wrapper.is-open.cl-qm-item-anim--spin-icon .cl-qm-item svg { animation: cl-qm-spin 3s linear infinite; animation-delay: var(--cl-qm-delay, 0ms); } } /* ─── Keyframes ─────────────────────────────────────────────────────────── */ @keyframes cl-qm-pulse { 0% { transform: scale(1); opacity: 0.3; } 100% { transform: scale(2); opacity: 0; } } @keyframes cl-qm-spin { to { transform: rotate(360deg); } } @keyframes cl-qm-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes cl-qm-wiggle { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-10deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(5deg); } } @keyframes cl-qm-item-float { from { transform: translate(-50%, -50%) translate(var(--cl-qm-tx, 0px), var(--cl-qm-ty, 0px)) scale(1) translateY(0px); } to { transform: translate(-50%, -50%) translate(var(--cl-qm-tx, 0px), var(--cl-qm-ty, 0px)) scale(1) translateY(-5px); } } @keyframes cl-qm-items-rotate { to { transform: rotate(360deg); } } @keyframes cl-qm-item-counter-rotate { from { transform: translate(-50%, -50%) translate(var(--cl-qm-tx, 0px), var(--cl-qm-ty, 0px)) scale(1) rotate(0deg); } to { transform: translate(-50%, -50%) translate(var(--cl-qm-tx, 0px), var(--cl-qm-ty, 0px)) scale(1) rotate(-360deg); } } @keyframes cl-qm-item-pulse { 0%, 100% { transform: translate(-50%, -50%) translate(var(--cl-qm-tx, 0px), var(--cl-qm-ty, 0px)) scale(1); } 50% { transform: translate(-50%, -50%) translate(var(--cl-qm-tx, 0px), var(--cl-qm-ty, 0px)) scale(1.14); } } /* ─── Tooltip labels ────────────────────────────────────────────────────── */ .cl-qm-label { position: absolute; white-space: nowrap; font-size: 12px; font-weight: 600; background: rgba(15, 15, 15, 0.82); color: #ffffff; padding: 5px 10px; border-radius: 5px; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; z-index: 1; } .cl-qm-item:hover .cl-qm-label { opacity: 1; } /* Always show labels on touch devices where hover is unreliable */ @media (pointer: coarse) { .cl-qm-wrapper.is-open .cl-qm-label { opacity: 1; } } .cl-qm-label--left { right: calc(100% + 10px); top: 50%; transform: translateY(-50%); } .cl-qm-label--right { left: calc(100% + 10px); top: 50%; transform: translateY(-50%); } .cl-qm-label--top { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); } .cl-qm-label--bottom { top: calc(100% + 8px); left: 50%; transform: translateX(-50%); } /* ─── Backdrop ──────────────────────────────────────────────────────────── */ .cl-qm-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); opacity: 0; pointer-events: none; cursor: pointer; /* iOS Safari requires cursor:pointer for click events on divs */ transition: opacity 0.3s ease; /* * z-index: 1 (not 9998) keeps the backdrop BELOW the trigger (z-index: 10) * and items (z-index: 10+). All three are within the wrapper stacking * context (z-index: 9999), so the backdrop still appears above page content * globally but underneath FAB items locally. */ z-index: 1; } .cl-qm-wrapper.is-open .cl-qm-backdrop { opacity: 1; pointer-events: auto; } /* ─── Reduced motion ────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .cl-qm-item, .cl-qm-trigger, .cl-qm-trigger-icon-open, .cl-qm-trigger-icon-close, .cl-qm-backdrop { transition: none !important; animation: none !important; } } /* ─── Elementor editor preview ──────────────────────────────────────────── */ /* * JS adds `cl-qm-editor` class in the editor (alongside `is-open`) so the * user can see item layout without clicking. We keep the OPEN trigger icon * visible (not the X/close icon) so it's clear this is a preview state. */ .cl-qm-wrapper.cl-qm-editor .cl-qm-trigger-icon-open { opacity: 1 !important; transform: rotate(0deg) scale(1) !important; } .cl-qm-wrapper.cl-qm-editor .cl-qm-trigger-icon-close { opacity: 0 !important; transform: rotate(-90deg) scale(0.5) !important; } /* Slightly reduced opacity signals these are in preview, not live */ .cl-qm-wrapper.cl-qm-editor .cl-qm-item { opacity: 0.8; } /* Cancel idle animations in editor so positions are stable for editing */ .cl-qm-wrapper.cl-qm-editor .cl-qm-trigger, .cl-qm-wrapper.cl-qm-editor .cl-qm-trigger::before, .cl-qm-wrapper.cl-qm-editor .cl-qm-trigger-icon-open, .cl-qm-wrapper.cl-qm-editor .cl-qm-item, .cl-qm-wrapper.cl-qm-editor .cl-qm-item i, .cl-qm-wrapper.cl-qm-editor .cl-qm-item svg { animation: none !important; }