/** * FASTCALL – Frontend Styles v2.0 * High-specificity selectors beat theme overrides. * Font inherits from the active WordPress theme. */ /* ── CSS Variables ─────────────────────────────────────────────────────────── */ .fc-wrapper { --fc-bg: #25D366; --fc-icon-color: #ffffff; --fc-size: 56px; --fc-item-size: 46px; --fc-gap: 10px; --fc-offset-x: 24px; --fc-offset-y: 24px; --fc-shadow: 0 4px 16px rgba(0,0,0,.26); --fc-dur: 0.27s; --fc-ease: cubic-bezier(.4,0,.2,1); --fc-label-width: 120px; /* fixed equal width for all labels */ } /* ── Wrapper ───────────────────────────────────────────────────────────────── */ .fc-wrapper { position: fixed !important; z-index: 99999 !important; display: flex !important; flex-direction: column-reverse; /* toggle 1st in DOM → bottom; menu → above */ align-items: flex-end; gap: var(--fc-gap); transition: opacity .4s ease, transform .4s ease; /* Reset any theme box-model interference */ margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; /* Force physical LTR box model: align-items/flex-direction/justify-content below are logical (direction-aware), so inheriting dir="rtl" from the host would silently flip them and desync the toggle button from the item icons above it. Position classes (fc-pos-*) are the single source of truth for left/right placement. */ direction: ltr !important; } .fc-wrapper.fc-hidden { opacity: 0; pointer-events: none; transform: scale(.85); } .fc-wrapper.fc-visible { opacity: 1; pointer-events: auto; transform: scale(1); } /* ── Positions ─────────────────────────────────────────────────────────────── */ .fc-wrapper.fc-pos-bottom-right { bottom:var(--fc-offset-y); right:var(--fc-offset-x); left:auto; top:auto; align-items:flex-end; } /* btn right-edges align */ .fc-wrapper.fc-pos-bottom-left { bottom:var(--fc-offset-y); left:var(--fc-offset-x); right:auto; top:auto; align-items:flex-start; } .fc-wrapper.fc-pos-top-right { top:var(--fc-offset-y); right:var(--fc-offset-x); bottom:auto;left:auto; align-items:flex-end; flex-direction:column; } .fc-wrapper.fc-pos-top-left { top:var(--fc-offset-y); left:var(--fc-offset-x); bottom:auto;right:auto;align-items:flex-start; flex-direction:column; } /* ── Horizontal layout ─────────────────────────────────────────────────────── */ .fc-wrapper.fc-layout-horizontal { flex-direction:row-reverse; align-items:center; } .fc-wrapper.fc-layout-horizontal.fc-pos-bottom-left, .fc-wrapper.fc-layout-horizontal.fc-pos-top-left { flex-direction:row; } .fc-wrapper.fc-layout-horizontal .fc-menu { flex-direction:row; align-items:center; } /* ── Toggle Button ─────────────────────────────────────────────────────────── */ /* High specificity + !important to override any theme button styles */ .fc-wrapper.fc-pos-bottom-right .fc-toggle, .fc-wrapper.fc-pos-top-right .fc-toggle { align-self: flex-end !important; } .fc-wrapper.fc-pos-bottom-left .fc-toggle, .fc-wrapper.fc-pos-top-left .fc-toggle { align-self: flex-start !important; } .fc-wrapper .fc-toggle { display: flex !important; align-items: center !important; justify-content: center !important; width: var(--fc-size) !important; height: var(--fc-size) !important; min-width: var(--fc-size) !important; min-height: var(--fc-size) !important; padding: 0 !important; margin: 0 !important; border: none !important; border-radius: 50% !important; background: var(--fc-bg) !important; color: var(--fc-icon-color) !important; cursor: pointer; position: relative; overflow: hidden; flex-shrink: 0; box-shadow: var(--fc-shadow); outline-offset: 3px; -webkit-tap-highlight-color: transparent; transition: transform var(--fc-dur) var(--fc-ease), box-shadow var(--fc-dur) var(--fc-ease); /* Reset theme text styles */ font-size: 0 !important; line-height: 1 !important; text-decoration: none !important; } .fc-wrapper .fc-toggle:hover { transform:scale(1.08); box-shadow:0 6px 22px rgba(0,0,0,.3); } .fc-wrapper .fc-toggle:focus-visible { outline:3px solid var(--fc-bg); } /* ── Icon States (open / close) ────────────────────────────────────────────── */ .fc-wrapper .fc-icon-state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: opacity var(--fc-dur) var(--fc-ease), transform var(--fc-dur) var(--fc-ease); } .fc-wrapper .fc-icon-state svg, .fc-wrapper .fc-icon-state img { width: 28px !important; height: 28px !important; display: block; fill: currentColor; object-fit: contain; flex-shrink: 0; } .fc-wrapper .fc-icon-open { opacity:1; transform:rotate(0) scale(1); } .fc-wrapper .fc-icon-close { opacity:0; transform:rotate(-90deg) scale(.6); } .fc-wrapper.fc-open .fc-icon-open { opacity:0; transform:rotate(90deg) scale(.6); } .fc-wrapper.fc-open .fc-icon-close { opacity:1; transform:rotate(0) scale(1); } /* ── Menu ──────────────────────────────────────────────────────────────────── */ .fc-wrapper .fc-menu { display: flex; flex-direction: column; gap: var(--fc-gap); align-items: flex-end; /* reset */ margin:0; padding:0; list-style:none; background:transparent; border:none; } .fc-wrapper.fc-pos-bottom-right .fc-menu, .fc-wrapper.fc-pos-top-right .fc-menu { align-items:flex-end; } .fc-wrapper.fc-pos-bottom-left .fc-menu, .fc-wrapper.fc-pos-top-left .fc-menu { align-items:flex-start; } /* ── Item row ──────────────────────────────────────────────────────────────── */ .fc-wrapper .fc-item { display: flex; align-items: center; gap: 10px; } /* Right-side: label LEFT of button */ .fc-wrapper.fc-pos-bottom-right .fc-item, .fc-wrapper.fc-pos-top-right .fc-item { flex-direction:row; } /* Left-side: label RIGHT of button */ .fc-wrapper.fc-pos-bottom-left .fc-item, .fc-wrapper.fc-pos-top-left .fc-item { flex-direction:row-reverse; } /* ── Item Button — perfect circle ──────────────────────────────────────────── */ .fc-wrapper .fc-item-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: var(--fc-item-size) !important; height: var(--fc-item-size) !important; min-width: var(--fc-item-size) !important; min-height: var(--fc-item-size) !important; padding: 0 !important; border-radius: 50% !important; background: var(--fc-bg) !important; color: var(--fc-icon-color) !important; border: none !important; box-shadow: var(--fc-shadow); text-decoration: none !important; flex-shrink: 0; overflow: hidden; -webkit-tap-highlight-color: transparent; transition: transform .2s ease, box-shadow .2s ease; } .fc-wrapper .fc-item-btn:hover { transform:scale(1.12); box-shadow:0 6px 18px rgba(0,0,0,.28); } .fc-wrapper .fc-item-btn:focus-visible { outline:3px solid rgba(255,255,255,.8); } .fc-wrapper .fc-item-icon { width: 24px; height: 24px; display:flex; align-items:center; justify-content:center; pointer-events:none; flex-shrink:0; } .fc-wrapper .fc-item-icon svg, .fc-wrapper .fc-item-icon img { width:24px !important; height:24px !important; fill:currentColor; object-fit:contain; display:block; } /* ── Item Label ────────────────────────────────────────────────────────────── */ .fc-wrapper .fc-item-label { /* Equal width */ width: var(--fc-label-width); min-width: 72px; /* Visual */ background: #ffffff; color: #1a1a1a; font-weight: 700; font-size: 0.85rem; font-family: inherit; line-height: 1.35; white-space: nowrap; padding: 7px 16px; border-radius: 12px; box-shadow: 0 3px 14px rgba(0,0,0,.16); flex-shrink: 0; /* Use display:flex so justify-content controls text position reliably */ display: flex !important; align-items: center !important; justify-content: center !important; /* overridden by position rules below */ /* Hidden until menu opens */ opacity: 0; pointer-events: none; transition: opacity var(--fc-dur) var(--fc-ease), transform var(--fc-dur) var(--fc-ease); } /* Right side: slide from right */ .fc-wrapper.fc-pos-bottom-right .fc-item-label, .fc-wrapper.fc-pos-top-right .fc-item-label { transform: translateX(10px); justify-content: flex-end !important; /* text to RIGHT */ text-align: right !important; } /* Left side: slide from left */ .fc-wrapper.fc-pos-bottom-left .fc-item-label, .fc-wrapper.fc-pos-top-left .fc-item-label { transform: translateX(-10px); justify-content: flex-start !important; /* text to LEFT */ text-align: left !important; } /* Reveal on open */ .fc-wrapper.fc-open .fc-item-label { opacity:1; transform:translateX(0) !important; } /* Stagger labels */ .fc-wrapper.fc-open .fc-item:nth-child(1) .fc-item-label { transition-delay:.05s; } .fc-wrapper.fc-open .fc-item:nth-child(2) .fc-item-label { transition-delay:.09s; } .fc-wrapper.fc-open .fc-item:nth-child(3) .fc-item-label { transition-delay:.13s; } .fc-wrapper.fc-open .fc-item:nth-child(4) .fc-item-label { transition-delay:.17s; } .fc-wrapper.fc-open .fc-item:nth-child(5) .fc-item-label { transition-delay:.21s; } .fc-wrapper.fc-open .fc-item:nth-child(6) .fc-item-label { transition-delay:.25s; } /* ── Animations ────────────────────────────────────────────────────────────── */ .fc-wrapper.fc-anim-scale .fc-item { opacity:0; transform:scale(.4) translateY(14px); pointer-events:none; transition: opacity var(--fc-dur) var(--fc-ease), transform var(--fc-dur) var(--fc-ease); } .fc-wrapper.fc-anim-scale.fc-open .fc-item { opacity:1; transform:scale(1) translateY(0); pointer-events:auto; } .fc-wrapper.fc-anim-slide .fc-item { opacity:0; transform:translateY(18px); pointer-events:none; transition: opacity var(--fc-dur) var(--fc-ease), transform var(--fc-dur) var(--fc-ease); } .fc-wrapper.fc-anim-slide.fc-open .fc-item { opacity:1; transform:translateY(0); pointer-events:auto; } .fc-wrapper.fc-anim-fade .fc-item { opacity:0; pointer-events:none; transition: opacity var(--fc-dur) var(--fc-ease); } .fc-wrapper.fc-anim-fade.fc-open .fc-item { opacity:1; pointer-events:auto; } /* Stagger items */ .fc-wrapper.fc-open .fc-item:nth-child(1) { transition-delay:.03s; } .fc-wrapper.fc-open .fc-item:nth-child(2) { transition-delay:.06s; } .fc-wrapper.fc-open .fc-item:nth-child(3) { transition-delay:.09s; } .fc-wrapper.fc-open .fc-item:nth-child(4) { transition-delay:.12s; } .fc-wrapper.fc-open .fc-item:nth-child(5) { transition-delay:.15s; } .fc-wrapper.fc-open .fc-item:nth-child(6) { transition-delay:.18s; } .fc-wrapper.fc-open .fc-item:nth-child(7) { transition-delay:.21s; } .fc-wrapper.fc-open .fc-item:nth-child(8) { transition-delay:.24s; } /* ── Attention Effects ─────────────────────────────────────────────────────── */ /* PULSE — expanding ring via ::before pseudo-element */ .fc-wrapper .fc-toggle.fc-attention-pulse::before { content:''; position:absolute; inset:0; border-radius:50%; background: var(--fc-bg); opacity:.55; animation: fc-pulse-ring 2s ease-out infinite; z-index:-1; } @keyframes fc-pulse-ring { 0% { transform:scale(1); opacity:.55; } 100% { transform:scale(1.8); opacity:0; } } /* BLINK */ .fc-wrapper .fc-toggle.fc-attention-blink { animation: fc-blink 1.5s step-end infinite; } @keyframes fc-blink { 0%,100%{opacity:1;} 50%{opacity:.35;} } /* SHAKE */ .fc-wrapper .fc-toggle.fc-attention-shake { animation: fc-shake 3s ease infinite; } @keyframes fc-shake { 0%,88%,100% {transform:rotate(0);} 90%{transform:rotate(-9deg);} 92%{transform:rotate(9deg);} 94%{transform:rotate(-6deg);} 96%{transform:rotate(6deg);} 98%{transform:rotate(-3deg);} } /* BOUNCE */ .fc-wrapper .fc-toggle.fc-attention-bounce { animation: fc-bounce 2.2s ease infinite; } @keyframes fc-bounce { 0%,100%{transform:translateY(0);} 30%{transform:translateY(-12px);} 50%{transform:translateY(-6px);} 70%{transform:translateY(-9px);} } /* Pause when open */ .fc-wrapper.fc-open .fc-toggle, .fc-wrapper.fc-open .fc-toggle::before { animation:none !important; } /* ── RTL ───────────────────────────────────────────────────────────────────── Positions (left/right) are PHYSICAL — bottom-left ALWAYS means physical left, on both RTL and LTR host pages. .fc-wrapper forces direction:ltr above, so the position-based rules already in this file (.fc-pos-* / .fc-item / .fc-item-label) resolve consistently without needing host-page [dir="rtl"] overrides here. ──────────────────────────────────────────────────────────────────────────── */ /* ── Reduced Motion ────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce) { .fc-wrapper .fc-toggle, .fc-wrapper .fc-toggle::before, .fc-wrapper .fc-item, .fc-wrapper .fc-icon-state, .fc-wrapper { animation:none !important; transition:none !important; } } /* ── Contact Request Modal ─────────────────────────────────────────────────── */ /* ── Contact Request Popup ─────────────────────────────────────────────────── */ .cn-req-overlay { position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: opacity .25s ease; } .cn-req-overlay.open { opacity: 1; pointer-events: auto; } /* Popup card — positioned dynamically via .cn-req-right / .cn-req-left. `bottom` here is only a pre-JS fallback; frontend.js sets an inline bottom that clears the full toggle+menu stack (see positionReqModalAboveStack). */ .cn-req-box { position: fixed; z-index: 100001; bottom: 110px; width: 290px; max-width: calc(100vw - 36px); background: #fff; border-radius: 16px; padding: 20px 18px 16px; box-shadow: 0 8px 40px rgba(0,0,0,.18), 0 2px 12px rgba(0,0,0,.10); font-family: inherit; transform: translateY(16px) scale(.96); opacity: 0; pointer-events: none; transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .22s ease; } /* Right-side widget: popup on right */ .cn-req-box.cn-req-right { right: 16px; left: auto; } /* Left-side widget: popup on left */ .cn-req-box.cn-req-left { left: 16px; right: auto; } /* Fallback when no side class yet */ .cn-req-box:not(.cn-req-left):not(.cn-req-right) { right: 16px; left: auto; } .cn-req-box.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; } /* Arrow pointing down toward the button */ .cn-req-box::after { content: ''; position: absolute; bottom: -9px; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 9px solid #fff; filter: drop-shadow(0 2px 4px rgba(0,0,0,.10)); } .cn-req-box.cn-req-right::after { right: 24px; left: auto; } .cn-req-box.cn-req-left::after { left: 24px; right: auto; } .cn-req-box:not(.cn-req-left):not(.cn-req-right)::after { right: 24px; } .cn-req-title { font-size: 14px; font-weight: 700; color: #1E1B39; margin-bottom: 3px; line-height: 1.3; } .cn-req-subtitle { font-size: 12px; color: #8884A0; margin-bottom: 12px; line-height: 1.5; } .cn-req-input { width: 100%; padding: 10px 12px; border: 1.5px solid #E5E4F0; border-radius: 10px; font-size: 15px; font-family: inherit; direction: ltr; text-align: center; letter-spacing: .5px; transition: border-color .15s, box-shadow .15s; outline: none; box-sizing: border-box; } .cn-req-input:focus { border-color: #22C55E; box-shadow: 0 0 0 3px #F0FDF4; } .cn-req-msg { text-align: center; padding: 8px 0 2px; font-size: 12px; font-weight: 600; color: #16A34A; display: none; line-height: 1.4; } .cn-req-msg.error { color: #DC2626; } /* Button row */ .cn-req-actions { display: flex; gap: 8px; margin-top: 10px; } .cn-req-submit { flex: 1; padding: 10px 14px; background: #22C55E; color: #fff; border: none; border-radius: 12px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; transition: background .15s, transform .1s; } .cn-req-submit:hover { background: #16A34A; } .cn-req-submit:active { transform: scale(.97); } .cn-req-submit:disabled { background: #9CA3AF; cursor: not-allowed; } .cn-req-cancel { flex: none; padding: 10px 14px; background: transparent; color: #EF4444; border: 1.5px solid #EF4444; border-radius: 12px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background .15s; } .cn-req-cancel:hover { background: #FEF2F2; } /* Mobile: full-width bottom sheet */ @media (max-width: 520px) { .cn-req-box { bottom:0 !important; right:0 !important; left:0 !important; width:100% !important; max-width:100% !important; border-radius:18px 18px 0 0; padding:20px 18px 28px; } .cn-req-box::after { display:none; } }