/* ===== Close O Matic – Sticky Footer Ribbon ===== */ :root { --ribbon-height: 72px; } /* Create space ONLY on pages that have the ribbon (modern browsers) */ body:has(.sticky-footer-ribbon)::after { content: ""; display: block; height: var(--ribbon-height); } /* The ribbon itself */ .sticky-footer-ribbon { position: fixed !important; inset: auto 0 0 0 !important; /* pin to bottom full width */ min-height: var(--ribbon-height); background: #FB6D28 !important; /* Brand orange */ color: #fff !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 14px !important; padding: 12px 20px !important; font-weight: 700 !important; font-size: clamp(14px, 1.2vw + 0.4rem, 18px) !important; line-height: 1.2 !important; text-align: center !important; z-index: 2147483647 !important; /* stay above everything */ box-shadow: 0 -2px 10px rgba(0,0,0,0.18) !important; } .sticky-footer-ribbon span { margin: 0 !important; color: #fff !important; } .sticky-footer-ribbon a { background: #fff !important; color: #5274CE !important; /* Brand blue */ padding: 10px 18px !important; border-radius: 8px !important; text-decoration: none !important; font-weight: 800 !important; white-space: nowrap !important; transition: background .2s ease !important; } .sticky-footer-ribbon a:hover { background: #f2f2f2 !important; } /* Mobile: stack text above the button and increase spacer height */ @media (max-width: 640px) { .sticky-footer-ribbon { flex-direction: column !important; gap: 8px !important; padding: 10px 12px !important; } :root { --ribbon-height: 92px; } } /* ===== Optional fallback for old browsers without :has() ===== If needed, add class="has-ribbon" to on pages where the ribbon exists. Then uncomment the block below. */ /* body.has-ribbon { padding-bottom: var(--ribbon-height) !important; } */ /* ===== Inline Reminder (Free Setup banner) ===== */ .inline-reminder { background: #fff8f5; /* light orange tint */ border: 2px solid #FB6D28; color: #BE2C3C; text-align: center; padding: 15px 20px; margin: 20px auto; border-radius: 8px; font-weight: bold; font-size: 1.1em; max-width: 700px; width: fit-content; display: block; } .inline-reminder .banner-img { max-width: 100%; height: auto !important; display: block !important; margin: 0 auto !important; } /* Mobile adjustment for Free Setup banner */ @media (max-width: 640px) { .inline-reminder { max-width: 90% !important; width: 100% !important; } .inline-reminder .banner-img { max-width: 100% !important; height: auto !important; } } /* ===== Partnering Early Benefits Banner ===== */ .partner-banner { max-width: 900px; margin: 20px auto; /* single, consistent margin */ background: #F9F9F9; border: 2px solid #5274CE; /* brand blue border */ border-radius: 10px; padding: 25px 30px; color: #333; font-size: 1.1em; line-height: 1.6; box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .partner-banner + * { margin-top: 20px !important; } .partner-banner h3 { color: #5274CE; margin-bottom: 12px; font-size: 1.4em; } .partner-banner ul { list-style: none; padding: 0; margin: 0; } .partner-banner li { margin: 10px 0; padding-left: 28px; position: relative; } .partner-banner li::before { content: "✅"; position: absolute; left: 0; top: 0; color: #067E14; font-size: 1.2em; } /* ===== Modal ===== */ .modal { display: none; /* Hidden by default */ position: fixed; z-index: 99999; inset: 0; width: 100%; height: 100%; overflow: auto; background: rgba(0,0,0,0.6); } .modal-content { background: #fff; margin: 10% auto; padding: 25px; border-radius: 8px; max-width: 400px; text-align: left; box-shadow: 0 4px 12px rgba(0,0,0,0.25); position: relative; } .modal-content h2 { margin-top: 0; color: #5274CE; } .modal-content form { display: flex; flex-direction: column; gap: 12px; } .modal-content input { padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 1em; } .modal-content button { background: #FB6D28; color: #fff; padding: 12px; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; transition: background 0.2s; } .modal-content button:hover { background: #e65d18; } .hear-cta { margin-top: 15px; text-align: center; font-size: 1.05em; } .hear-cta a { color: #5274CE; font-weight: bold; text-decoration: underline; } /* Close button (X) */ .modal .close, #popupForm .close { position: absolute !important; top: 12px !important; right: 12px !important; font-size: 28px !important; line-height: 1 !important; background: transparent !important; border: 0 !important; color: #222 !important; opacity: .9 !important; z-index: 99999 !important; cursor: pointer !important; } .video-btn .openForm, .openForm, .modal button, .modal .close { cursor: pointer; } /* ===== Preloader: keep "CLOSE O MATIC" on one line ===== */ .loader-wrap .animation-preloader .txt-loading { display: flex !important; flex-wrap: nowrap !important; white-space: nowrap !important; justify-content: center !important; align-items: center !important; width: auto !important; max-width: 100%; padding: 0 12px; text-align: center !important; } .loader-wrap .animation-preloader .letters-loading { display: inline-block !important; line-height: 1 !important; font-size: clamp(18px, 7vw, 56px) !important; letter-spacing: 0.14em; } @media (max-width: 380px) { .loader-wrap .animation-preloader .letters-loading { font-size: clamp(18px, 6.4vw, 56px) !important; letter-spacing: 0.10em; } } /* Add equal gaps before "O" and "M" */ .loader-wrap .animation-preloader .txt-loading .letters-loading:nth-child(6), .loader-wrap .animation-preloader .txt-loading .letters-loading:nth-child(7) { margin-left: 0.25em; } @media (max-width: 380px) { .loader-wrap .animation-preloader .txt-loading .letters-loading:nth-child(6), .loader-wrap .animation-preloader .txt-loading .letters-loading:nth-child(7) { margin-left: 0.18em; } } /* Avoid clipping during scaling */ .loader-wrap .animation-preloader .txt-loading, .loader-wrap .animation-preloader .letters-loading { overflow: visible !important; } /* ===== Defensive: invisible overlays blocking taps ===== */ /* If an overlay/backdrop is not actively open, don't let it intercept clicks */ .loader-wrap, .handle-preloader, .preloader, .mobile-menu .menu-backdrop, .mobile-menu .backdrop, .search-popup, .search-popup .overlay, .sidebar-info__overlay, .sidebar-info, .offcanvas-overlay { pointer-events: none !important; } /* When components are actually open/visible, re-enable interaction */ .mobile-menu.open, .mobile-menu.active, .mobile-menu.open .menu-backdrop, .search-popup.active, .sidebar-info.active { pointer-events: auto !important; } /* When we mark the page loaded, get the preloader out of the way */ body.page-loaded .loader-wrap { display: none !important; opacity: 0 !important; visibility: hidden !important; } /* Defensive: fully transparent inline styles ignore pointer events */ [style*="opacity: 0"] { pointer-events: none !important; } /* ===== Floating CTA ===== */ .floating-cta { position: fixed; bottom: 20px; right: 20px; background: #5274CE; /* brand blue */ color: #fff; padding: 14px 22px; border-radius: 50px; font-weight: bold; text-decoration: none; box-shadow: 0 4px 10px rgba(0,0,0,0.25); z-index: 9999; transition: background 0.2s ease; white-space: nowrap; } .floating-cta:hover { background: #405cad; } @media (max-width: 640px) { .floating-cta { bottom: 15px; right: 50%; transform: translateX(50%); padding: 12px 18px; font-size: 0.95em; max-width: 90%; text-align: center; } } /* ===== Social icons (SVG) ===== */ .social-svg{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:999px; background:#1F2025; /* matches header */ color:#fff; text-decoration:none; line-height:1; } /* Robust centering for social badges across all pages */ .social-svg{ position: relative; display: inline-block; width: 44px; height: 44px; border-radius: 999px; background: #1F2025; color: #fff; text-decoration: none; vertical-align: middle; /* ignore surrounding line-height quirks */ } .social-svg svg{ position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; /* lock icon size */ transform: translate(-50%, -50%); /* true center */ transform-origin: center; display: block; } /* Optical nudges (applied after true centering) */ /* ---- Social icon alignment override (wins everywhere) ---- */ /* TikTok: move LEFT 1px, UP 2px from true center */ .header .social-svg.icon--tiktok svg, .main-header .social-svg.icon--tiktok svg, a[href*="tiktok.com"] .social-svg svg, a[href*="tiktok.com"] > svg { transform: translate(calc(-50% + 2px), calc(-50% + 0px)) scale(0.95) !important; transform-origin: center; } /* LinkedIn: raise 2px, keep current X */ .header .social-svg.icon--linkedin svg, .main-header .social-svg.icon--linkedin svg, a[href*="linkedin.com"] .social-svg svg, a[href*="linkedin.com"] > svg { transform: translate(calc(-50%), calc(-50% - 2px)) scale(0.92) !important; transform-origin: center; } /* TEMP DEBUG (uncomment to verify the rule is taking effect) .header .social-svg.icon--tiktok svg, .main-header .social-svg.icon--tiktok svg { outline: 1px dashed rgba(255,0,0,.4) !important; } .header .social-svg.icon--linkedin svg, .main-header .social-svg.icon--linkedin svg { outline: 1px dashed rgba(0,255,0,.4) !important; } */ /* Tabs toggle */ .com-tabs { display:inline-flex; gap:8px; margin:12px 0 6px; } .com-tab { padding:8px 12px; border:1px solid #ddd; background:#fff; cursor:pointer; } .com-tab.is-active { border-color:#FB6D28; } /* Show one section at a time */ .com-cards.is-hidden { display:none; } /* Grid */ .com-grid { display:grid; gap:14px; grid-template-columns: repeat(1, minmax(0,1fr)); } @media (min-width: 768px){ .com-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px){ .com-grid { grid-template-columns: repeat(3, 1fr); } } /* Cards */ .com-card { padding:14px 12px; border:1px solid #ececec; border-radius:14px; display:flex; flex-direction:column; } .com-card header { margin-bottom:8px; } .com-card h3 { margin:0 0 2px; font-size:16px; } .com-price { font-size:28px; margin:4px 0 0; } .com-setup { font-size:12px; opacity:.8; } .com-peek { margin:8px 0; padding-left:18px; } .com-peek li { margin:4px 0; font-size:13px; line-height:1.3; } .com-actions { margin-top:auto; display:flex; gap:8px; } .btn.solid { background:#FB6D28; color:#fff; padding:8px 12px; border-radius:6px; display:inline-block; } .btn.ghost { background:transparent; border:1px solid #ccc; padding:8px 12px; border-radius:6px; } /* Divider */ .com-divider { padding:8px 0 0; text-align:center; } .com-divider p { margin:0; font-size:14px; opacity:.9; } /* Modal (simple) */ .com-modal[hidden] { display:none; } .com-modal { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:20px; z-index:9999; } .com-modal__dialog { background:#fff; border-radius:12px; width:min(720px, 94vw); padding:16px; } .com-modal__close { position:absolute; right:20px; top:16px; font-size:22px; background:none; border:0; cursor:pointer; } /* ROI Proof Styling */ .roi-proof { background: #F9FAFB !important; /* light neutral backdrop */ border-left: 4px solid #FB6D28; /* brand orange accent */ padding: 18px 22px; /* slightly larger for balance */ margin: 32px 0; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: all 0.2s ease; } .roi-proof:hover { background: #ffffff; box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); } .roi-proof p { margin: 0; font-size: 17.5px; /* bumped up from 15.5px */ color: #111827; line-height: 1.65; } .roi-proof a { color: #5274CE; /* brand blue */ text-decoration: none; font-weight: 600; font-size: 17.5px; /* match paragraph size */ } .roi-proof a:hover { text-decoration: underline; } .roi-tagline { display: block; margin-top: 6px; color: #444; /* slightly darker for contrast */ font-size: 16.5px; /* up from 14.5px */ line-height: 1.6; } /* Product Showcase Section — perfectly matches .sec-title headings */ .product-showcase { background: linear-gradient(180deg, #F0F4FF 0%, #F9FAFB 100%); padding: 80px 0; margin: 70px 0; } .showcase-inner { max-width: 1180px; margin: 0 auto; background: #fff; border-radius: 14px; box-shadow: 0 4px 16px rgba(0,0,0,0.06); padding: 70px 40px; /* was 90px — reduced side padding */ text-align: left; transition: all 0.3s ease; } .showcase-inner:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.10); } /* H5 + H2 match .sec-title exactly */ .product-showcase h5 { display: block; font-size: 18px; line-height: 28px; font-weight: 500; text-transform: uppercase; margin-bottom: 15px; color: #5274CE !important; /* brand blue override */ -webkit-text-fill-color: #5274CE !important; filter: none !important; opacity: 1 !important; mix-blend-mode: normal !important; } .product-showcase h2 { display: block; font-size: 36px; line-height: 48px; font-weight: 600; margin-bottom: 14px; color: #111827; } /* Paragraph styling */ .product-showcase p { color: #374151; font-size: 17px; line-height: 1.8; max-width: 100%; /* allow full width inside box */ margin: 0; text-align: left; } /* Responsive adjustments */ @media (max-width: 900px) { .showcase-inner { padding: 50px 24px; } .product-showcase h2 { font-size: 26px; line-height: 38px; } .product-showcase p { font-size: 16px; line-height: 1.7; } } /* Final headline color correction */ .product-showcase .showcase-inner > h5 { color: #002a7d !important; -webkit-text-fill-color: #002a7d !important; font-weight: 500; opacity: 1 !important; mix-blend-mode: normal !important; } .author-thumb { position: relative; width: 80px; /* controls the visible size of the shape */ height: 80px; overflow: hidden; /* ensures nothing spills out of the shape */ } .author-thumb .shape { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; z-index: 1; } .author-thumb img { position: relative; z-index: 2; /* ensures Omni appears above the shape */ display: block; width: 55%; /* adjust until he fits nicely within shape */ height: auto; margin: 0 auto; /* centers horizontally */ object-fit: contain; transform: translateY(10%); /* nudges him slightly up or down if needed */ }