/* Artistic Sticky CTA Button — frontend styles */ .ascb-wrapper { width: 100%; } .ascb-wrapper.ascb-sticky { position: fixed !important; left: 0 !important; bottom: 0 !important; top: auto !important; right: auto !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* Once JS moves the bar to , it is a direct child — this selector guarantees the rule still applies even if a theme stylesheet targets "body > div" or similar generic wrappers with conflicting positioning. */ body > .ascb-wrapper.ascb-sticky { position: fixed !important; bottom: 0 !important; left: 0 !important; } .ascb-bar { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; background-color: #0B1230; min-height: 76px; padding: 10px 18px; overflow: hidden; box-sizing: border-box; } /* Arrow tracks either side of the center button */ .ascb-arrows { flex: 1 1 0; display: flex; align-items: center; gap: 18px; min-width: 0; position: relative; } .ascb-arrows-left { justify-content: flex-end; padding-right: 14px; } .ascb-arrows-right { justify-content: flex-start; padding-left: 14px; } /* Base arrow element */ .ascb-arrow { display: inline-block; width: 12px; height: 12px; color: #F5B300; opacity: 0; flex: none; animation-duration: 1.4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } /* Chevron shape ( > and < ) */ .ascb-arrow--chevron { border-top: 3px solid currentColor; border-right: 3px solid currentColor; border-radius: 1px; } .ascb-arrow--chevron.ascb-arrow-right-facing { transform: rotate(45deg); animation-name: ascb-converge-right-chevron; } .ascb-arrow--chevron.ascb-arrow-left-facing { transform: rotate(225deg); animation-name: ascb-converge-left-chevron; } /* Dot shape */ .ascb-arrow--dot { border-radius: 50%; background-color: currentColor; } .ascb-arrow--dot.ascb-arrow-right-facing { animation-name: ascb-converge-right-dot; } .ascb-arrow--dot.ascb-arrow-left-facing { animation-name: ascb-converge-left-dot; } /* Solid triangle arrow shape */ .ascb-arrow--arrow { background-color: currentColor; } .ascb-arrow--arrow.ascb-arrow-right-facing { clip-path: polygon(0 0, 100% 50%, 0 100%); animation-name: ascb-converge-right-dot; } .ascb-arrow--arrow.ascb-arrow-left-facing { clip-path: polygon(100% 0, 0 50%, 100% 100%); animation-name: ascb-converge-left-dot; } /* Chevron travels toward the button while fading in and out */ @keyframes ascb-converge-right-chevron { 0% { opacity: 0; transform: rotate(45deg) translate(-14px, 14px); } 50% { opacity: 1; transform: rotate(45deg) translate(0, 0); } 100% { opacity: 0; transform: rotate(45deg) translate(10px, -10px); } } @keyframes ascb-converge-left-chevron { 0% { opacity: 0; transform: rotate(225deg) translate(-14px, 14px); } 50% { opacity: 1; transform: rotate(225deg) translate(0, 0); } 100% { opacity: 0; transform: rotate(225deg) translate(10px, -10px); } } @keyframes ascb-converge-right-dot { 0% { opacity: 0; transform: translateX(-16px); } 50% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(16px); } } @keyframes ascb-converge-left-dot { 0% { opacity: 0; transform: translateX(16px); } 50% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-16px); } } /* Center CTA Button */ .ascb-cta-button { --ascb-glow-color: rgba(245, 179, 0, 0.6); position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; background-color: #F5B300; color: #0B1230; padding: 14px 46px; border-radius: 50px; font-weight: 700; letter-spacing: 0.5px; transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease; z-index: 2; } .ascb-cta-button:hover { transform: translateY(-2px); } .ascb-cta-button.ascb-pulse { animation: ascb-pulse-glow 2s ease-in-out infinite; } @keyframes ascb-pulse-glow { 0% { box-shadow: 0 0 0 0 var(--ascb-glow-color); } 70% { box-shadow: 0 0 0 14px rgba(0, 0, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } } .ascb-cta-text { display: inline-block; line-height: 1; } /* Visibility helpers */ @media (min-width: 1025px) { .ascb-hide-desktop { display: none !important; } } @media (min-width: 768px) and (max-width: 1024px) { .ascb-hide-tablet { display: none !important; } } @media (max-width: 767px) { .ascb-hide-mobile { display: none !important; } .ascb-bar { padding: 8px 12px; } .ascb-arrows { gap: 10px; } .ascb-cta-button { padding: 12px 30px; } } /* ========================================================= * POPUP LEAD FORM * ========================================================= */ body.ascb-popup-locked { overflow: hidden !important; } .ascb-popup-overlay { position: fixed; inset: 0; width: 100%; height: 100%; background-color: rgba(10, 16, 40, 0.6); display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; z-index: 999999; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .ascb-popup-overlay.ascb-open { opacity: 1; visibility: visible; } .ascb-popup-card { position: relative; background-color: #ffffff; width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto; border-radius: 18px; padding: 44px 34px 34px; box-sizing: border-box; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35); transform: translateY(16px) scale(0.98); transition: transform 0.25s ease; } .ascb-popup-overlay.ascb-open .ascb-popup-card { transform: translateY(0) scale(1); } .ascb-popup-close { position: absolute; top: 16px; right: 18px; background: none; border: none; font-size: 22px; line-height: 1; color: #1a1a2e; cursor: pointer; padding: 4px; } .ascb-popup-heading { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 26px; font-size: 19px; font-weight: 800; letter-spacing: 0.5px; color: #0B1230; text-align: center; text-transform: uppercase; } .ascb-popup-heading .ascb-dash { flex: 1 1 auto; max-width: 34px; height: 2px; background-color: #F5B300; } .ascb-field { position: relative; display: flex; align-items: center; margin-bottom: 14px; border: 1px solid #E2E4EC; border-radius: 10px; padding: 0 14px; background-color: #fff; transition: border-color 0.2s ease; } .ascb-field:focus-within { border-color: #F5B300; } .ascb-field-icon { display: flex; align-items: center; justify-content: center; color: #0B1230; margin-right: 10px; flex: none; } .ascb-field-icon svg { width: 16px; height: 16px; display: block; } .ascb-field input { flex: 1 1 auto; border: none; outline: none; background: transparent; padding: 14px 0; font-size: 14px; color: #1a1a2e; min-width: 0; } .ascb-field input::placeholder { color: #8b8fa3; } .ascb-field select { flex: 1 1 auto; border: none; outline: none; background: transparent; padding: 14px 24px 14px 0; font-size: 14px; color: #1a1a2e; min-width: 0; appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; } .ascb-field select:invalid { color: #8b8fa3; } .ascb-field-select { position: relative; } .ascb-field-select::after { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; border-right: 2px solid #8b8fa3; border-bottom: 2px solid #8b8fa3; transform: translateY(-70%) rotate(45deg); pointer-events: none; } .ascb-field-readonly { background-color: #F7F8FB; } .ascb-field-readonly input { color: #4a4d5e; cursor: default; } .ascb-field-readonly select { color: #4a4d5e; cursor: default; } .ascb-field-readonly.ascb-field-select::after { display: none; } .ascb-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .ascb-consent { display: flex; align-items: flex-start; gap: 9px; margin: 4px 0 18px; cursor: pointer; } .ascb-consent input[type="checkbox"] { margin-top: 3px; flex: none; width: 16px; height: 16px; accent-color: #0B1230; } .ascb-consent span { font-size: 12.5px; line-height: 1.5; color: #5a5d70; } .ascb-popup-submit { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; border: none; cursor: pointer; padding: 15px 20px; border-radius: 10px; font-size: 15px; font-weight: 800; letter-spacing: 0.3px; color: #0B1230; background: linear-gradient(180deg, #FFB94D 0%, #F5820B 100%); transition: filter 0.2s ease, opacity 0.2s ease; } .ascb-popup-submit:hover { filter: brightness(1.05); } .ascb-popup-submit:disabled, .ascb-popup-submit.ascb-loading { opacity: 0.7; cursor: not-allowed; } .ascb-popup-submit svg { width: 15px; height: 15px; } .ascb-form-message { margin-top: 12px; font-size: 13px; text-align: center; min-height: 16px; } .ascb-form-message.ascb-msg-success { color: #1a7d3c; } .ascb-form-message.ascb-msg-error { color: #c0392b; } @media (max-width: 480px) { .ascb-popup-card { padding: 36px 22px 26px; border-radius: 14px; } }