/* =================================================================================== * Theme Name: Quitox Child * Theme URI: https://www.webleanbd.net/wp/quitox/ * Author: Theme_Pure * Author URI: https://themeforest.net/user/theme_pure/portfolio * Description: Quitox – Software & IT Solutions Wordpress Theme * Version: 1.0.47 * Template: quitox * License: GNU General Public License version 3.0 * License URI: http://www.gnu.org/licenses/gpl-3.0.html * Tags: one-column, right-sidebar, left-sidebar, custom-menu, featured-images, post-formats, sticky-post, translation-ready * We encourage you to create Child theme for any modifications you will want to do. * Why use Child theme? * Because of future updates we may provide for this theme that will overwrite your * modifications and all your custom work. * If you are not familiar with Child Themes, you can read about it here: * http://codex.wordpress.org/Child_Themes * http://wp.tutsplus.com/tutorials/theme-development/child-themes-basics-and-creating-child-themes-in-wordpress/ ====================================================================================== */ /* Paramour knowledge-base posts (paste template from docs/templates/paramour-faq-post-template.html) */ .postbox__text:has(.paramour-kb-article) { margin-bottom: 0; padding-right: 0; } .paramour-kb-article { margin-top: 10px; } .paramour-kb-article .tp-skill-area { padding-top: 20px; } .paramour-kb-article .am-about-area { padding-top: 10px; padding-bottom: 10px; } /* Neutralize blog post typography inside KB articles */ .postbox__text .paramour-kb-article p { font-size: inherit; line-height: inherit; margin-bottom: 0; } .postbox__text .paramour-kb-article ul { margin: 0; padding: 0; list-style: none; } .postbox__text .paramour-kb-article .accordion-header { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; line-height: inherit; } .postbox__text .paramour-kb-article h3, .postbox__text .paramour-kb-article h4 { margin-top: 0; } /* Header — amaboutinfo */ .postbox__text .paramour-kb-article .amaboutinfo__client-info h4 { font-size: 30px; color: var(--tp-common-black); font-weight: 500; line-height: 1.3; margin-bottom: 0; } .postbox__text .paramour-kb-article .amaboutinfo__client-info span { font-size: 12px; color: var(--tp-theme-1); text-transform: uppercase; padding-bottom: 25px; display: inline-block; } .postbox__text .paramour-kb-article .amaboutinfo__client-info p { color: #8a90a2; font-size: 15px; font-family: inherit; font-weight: 400; padding-bottom: 25px; padding-right: 81px; line-height: 25px; margin-bottom: 0; } .postbox__text .paramour-kb-article .amaboutinfo__experience p { font-size: 16px; font-weight: 400; color: #8a90a2; line-height: 25px; margin-bottom: 8px; } .postbox__text .paramour-kb-article .amaboutinfo__experience p b { color: var(--tp-common-black); } @media (max-width: 900px) { .postbox__text .paramour-kb-article .amaboutinfo__client-info h4 { font-size: 24px; } .postbox__text .paramour-kb-article .amaboutinfo__client-info p { padding-right: 0; } .postbox__text .paramour-kb-article .amaboutinfo__experience p { font-size: 14px; } } /* Summary — amskill */ .postbox__text .paramour-kb-article .am-skill-title { font-size: 30px; color: var(--tp-common-black); font-weight: 500; padding-bottom: 25px; margin-bottom: 0; line-height: 1.3; } .postbox__text .paramour-kb-article .amskill__title p { font-size: 16px; line-height: 26px; color: #8a90a2; margin-bottom: 0; } .postbox__text .paramour-kb-article .pb-10 { padding-bottom: 10px; } /* Feature cards — amfeature */ .paramour-kb-article .amfeature { padding-top: 50px; } .postbox__text .paramour-kb-article .am-skill-sm-title { font-size: 24px; font-weight: 500; color: var(--tp-common-black); padding-bottom: 20px; margin-bottom: 0; line-height: 1.3; } .postbox__text .paramour-kb-article .amfeature__item p, .postbox__text .paramour-kb-article .am-p-space-1 { font-size: 15px; line-height: 26px; color: #8a90a2; padding-bottom: 25px; padding-right: 60px; margin-bottom: 0; } .postbox__text .paramour-kb-article .amfeature__list ul li { color: var(--tp-theme-1); font-size: 15px; font-weight: 500; position: relative; padding-left: 30px; padding-bottom: 10px; padding-top: 0; margin-bottom: 0; list-style: none; } .postbox__text .paramour-kb-article .amfeature__list ul li i { color: #726ffc; font-weight: 500; position: absolute; left: 0; top: 6px; } .paramour-kb-article .feature-bottom-space { padding-bottom: 90px; } @media (max-width: 1199px) { .postbox__text .paramour-kb-article .amfeature__item p, .postbox__text .paramour-kb-article .am-p-space-1 { padding-right: 20px; } } @media (max-width: 900px), (max-width: 767px) { .postbox__text .paramour-kb-article .amfeature__item p, .postbox__text .paramour-kb-article .am-p-space-1 { padding-right: 0; } } /* Contact footer */ .postbox__text .paramour-kb-article .am-contact-title { font-size: 24px; font-weight: 500; color: var(--tp-common-black); margin-bottom: 0; line-height: 1.3; } .paramour-kb-article .am-contact-info { margin-bottom: 35px; } .paramour-kb-article .contact-form { background-color: var(--tp-grey-2); border-radius: 20px; padding: 80px; } @media (max-width: 900px) { .paramour-kb-article .contact-form { padding: 30px; } } @media (max-width: 767px) { .paramour-kb-article .contact-form { padding: 10px; } } /* FAQ split block: accordion-3 + CTA sidebar */ .paramour-kb-article .paramour-kb-faq-split { margin-top: 20px; } .postbox__text .paramour-kb-article .tp-custom-accordio-3 .accordion-items { margin-bottom: 20px; border: 1px solid var(--tp-border-2); border-radius: 10px; } .postbox__text .paramour-kb-article .tp-custom-accordio-3 .accordion-buttons { position: relative; width: 100%; text-align: left; font-weight: 600; font-size: 20px; padding: 30px 20px; border-radius: 10px 10px 0 0; line-height: 1.4; margin-bottom: 0; border: 0; background: transparent; } .postbox__text .paramour-kb-article .tp-custom-accordio-3 .accordion-buttons.collapsed { border-radius: 10px; } .postbox__text .paramour-kb-article .tp-custom-accordio-3 .accordion-body { padding: 20px 20px; padding-top: 15px; font-size: 16px; line-height: 1.9; color: #8a90a2; } .postbox__text .paramour-kb-article .tp-faq__right-side { background-color: var(--tp-grey-2); padding: 70px 40px; border-radius: 10px; margin-left: 30px; } .postbox__text .paramour-kb-article .tp-faq__icon { padding-bottom: 40px; } .postbox__text .paramour-kb-article .tp-faq__icon a { height: 80px; width: 80px !important; line-height: 80px; border-radius: 50%; background-color: var(--tp-common-white); text-align: center; display: inline-block; } .postbox__text .paramour-kb-article .tp-faq__faq-sm-title { font-weight: 600; font-size: 22px; line-height: 22px; letter-spacing: -0.02em; padding-bottom: 15px; margin-bottom: 0; } .postbox__text .paramour-kb-article .tp-faq__content p { padding: 0 25px 75px; font-weight: 400; font-size: 16px; line-height: 1.8; text-align: center; letter-spacing: -0.02em; color: #62637d; margin-bottom: 0; } .postbox__text .paramour-kb-article .tp-faq__content a.tp-el-btn { width: 100%; display: inline-block; padding: 30px; background-color: var(--tp-common-sky); font-weight: 600; font-size: 16px; color: #ffffff; border-radius: 10px; text-decoration: none; } .postbox__text .paramour-kb-article .tp-faq__content a.tp-el-btn:hover { background-color: var(--tp-theme-2); color: #ffffff; } @media (max-width: 900px) { .postbox__text .paramour-kb-article .tp-faq__right-side { margin-left: 0; padding: 30px 20px; } .postbox__text .paramour-kb-article .tp-custom-accordio-3 .accordion-buttons { font-size: 16px; padding: 20px 15px; } .postbox__text .paramour-kb-article .tp-faq__content p { padding: 0 0 40px; } } @media (max-width: 767px) { .postbox__text .paramour-kb-article .tp-faq__right-side { padding: 20px; } .postbox__text .paramour-kb-article .tp-faq__content a.tp-el-btn { padding: 20px; } } /* * First main nav item — CTA clone of header tp-btn-blue-square. * Separate class so tp-header__black-menu / __menu-3 rules do not fight the button styles. * Keep CTA on the same row as other top-level menu items (not list-item / own row). */ .tp-header__main-menu > nav > ul { display: flex; flex-wrap: nowrap; align-items: center; } .tp-header__main-menu > nav > ul > li.paramour-menu-cta-item { display: inline-block; vertical-align: middle; align-self: center; float: none; } .tp-header__main-menu > nav > ul > li.paramour-menu-cta-item > a.paramour-menu-cta, .tp-header__right-two > a.paramour-mobile-header-cta.paramour-menu-cta { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; background-color: var(--tp-theme-2); color: var(--tp-common-white) !important; height: 55px; line-height: 1; padding: 0 35px !important; font-weight: 700; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 5px; position: relative; z-index: 1; overflow: hidden; transition: 0.3s; text-decoration: none; vertical-align: middle; } .tp-header__main-menu > nav > ul > li.paramour-menu-cta-item > a.paramour-menu-cta .paramour-menu-cta__label, .tp-header__right-two > a.paramour-mobile-header-cta.paramour-menu-cta .paramour-menu-cta__label { display: inline-block; color: var(--tp-common-white) !important; -webkit-text-fill-color: var(--tp-common-white) !important; z-index: 1; position: relative; line-height: 1.2; } .tp-header__main-menu > nav > ul > li.paramour-menu-cta-item > a.paramour-menu-cta::before, .tp-header__right-two > a.paramour-mobile-header-cta.paramour-menu-cta::before { animation: opacityFallbackOut 0.5s step-end forwards; backface-visibility: hidden; background-color: var(--tp-common-black); clip-path: polygon(-1% 0, 0 0, -25% 100%, -1% 100%); content: ""; height: 100%; left: 0; position: absolute; top: 0; transform: translateZ(0); transition: clip-path 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); width: 100%; z-index: 0; } .tp-header__main-menu > nav > ul > li.paramour-menu-cta-item:hover > a.paramour-menu-cta, .tp-header__main-menu > nav > ul > li.paramour-menu-cta-item > a.paramour-menu-cta:hover, .tp-header__right-two > a.paramour-mobile-header-cta.paramour-menu-cta:hover { color: var(--tp-common-white) !important; } .tp-header__main-menu > nav > ul > li.paramour-menu-cta-item > a.paramour-menu-cta:hover::before, .tp-header__right-two > a.paramour-mobile-header-cta.paramour-menu-cta:hover::before { animation: opacityFallbackIn 0s step-start forwards; clip-path: polygon(0 0, 101% 0, 101% 101%, 0 101%); } .tp-header__main-menu > nav > ul > li.paramour-menu-cta-item > a.paramour-menu-cta:hover .paramour-menu-cta__label, .tp-header__right-two > a.paramour-mobile-header-cta.paramour-menu-cta:hover .paramour-menu-cta__label { color: var(--tp-common-white) !important; -webkit-text-fill-color: var(--tp-common-white) !important; } @media only screen and (min-width: 1240px) and (max-width: 1366px) { .tp-header__main-menu > nav > ul > li.paramour-menu-cta-item > a.paramour-menu-cta, .tp-header__right-two > a.paramour-mobile-header-cta.paramour-menu-cta { padding: 0 30px !important; font-size: 13px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-header__main-menu > nav > ul > li.paramour-menu-cta-item > a.paramour-menu-cta, .tp-header__right-two > a.paramour-mobile-header-cta.paramour-menu-cta { height: 45px; padding: 0 15px !important; font-size: 12px; } } /* * Header utility icons — Account, Language (right to left). */ .tp-header__right-two { gap: 30px; } .tp-header__right-two .paramour-header-utilities { margin-left: 35px; gap: 12px; } @media only screen and (min-width: 1240px) and (max-width: 1366px) { .tp-header__right-two .paramour-header-utilities { margin-left: 15px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-header__right-two .paramour-header-utilities { margin-left: 10px; } } @media (max-width: 900px) { /* Keep sticky white bar (do not force transparent — that hid the reappear chrome). */ .mobile-menu li.paramour-menu-cta-item { display: none; } .tp-header__right-two { width: 100%; gap: 10px; } .tp-header__right-two > a.paramour-mobile-header-cta.paramour-menu-cta { flex-shrink: 0; margin-left: 0; margin-right: auto; } .tp-header__right-two .paramour-header-utilities { margin-left: 0; flex-shrink: 0; gap: 10px; } .tp-header__right-two > a.tp-header__bars { box-sizing: border-box; flex: 0 0 55px; width: 55px; min-width: 55px; max-width: 55px; height: 55px; min-height: 55px; max-height: 55px; margin-left: 0; padding: 0; line-height: 1; align-self: center; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; } } @media (max-width: 767px) { .tp-header__right-two .paramour-header-utilities .paramour-header-utility { font-size: 16px; } .tp-header__right-two > a.tp-header__bars { flex-basis: 45px; width: 45px; min-width: 45px; max-width: 45px; height: 45px; min-height: 45px; max-height: 45px; } } .tp-header__right-two .paramour-mobile-menu-logo { overflow: hidden; padding: 0; background-color: transparent !important; } .tp-header__right-two .paramour-mobile-menu-logo:hover, .tp-header__right-two .paramour-mobile-menu-logo:focus-visible { background-color: transparent !important; } .tp-header__right-two .paramour-mobile-menu-logo img { display: block; width: 100%; height: 100%; object-fit: cover; padding: 0; border-radius: inherit; } .tp-header__right-two .paramour-header-utilities .paramour-header-utility { display: inline-flex; align-items: center; justify-content: center; margin-left: 0; padding: 10px; background: #ffffff; border: 0; border-radius: 6px; box-shadow: none; color: var(--tp-common-black); font-size: 20px; line-height: 1; text-decoration: none; transition: color 0.3s ease, background-color 0.3s ease; } .tp-header__right-two .paramour-header-utilities .paramour-header-utility--account { box-sizing: border-box; width: 40px; height: 40px; padding: 4px; background: #0d6efd; color: #ffffff; font-size: 17px; } .tp-header__right-two .paramour-header-utilities .paramour-header-utility--language { background: #f2f1f9; } .tp-header__right-two .paramour-header-utilities .paramour-header-utility--language .paramour-header-utility__icon { display: block; width: 20px; height: 20px; object-fit: contain; } .tp-header__right-two .paramour-header-utilities .paramour-header-utility:hover, .tp-header__right-two .paramour-header-utilities .paramour-header-utility:focus-visible { color: var(--tp-theme-1); background: #ffffff; } .tp-header__right-two .paramour-header-utilities .paramour-header-utility--account:hover, .tp-header__right-two .paramour-header-utilities .paramour-header-utility--account:focus-visible { background: #ec4f6a; color: #ffffff; } .tp-header__right-two .paramour-header-utilities .paramour-header-utility--language:hover, .tp-header__right-two .paramour-header-utilities .paramour-header-utility--language:focus-visible { background: #f2f1f9; color: var(--tp-theme-1); } .tp-header__right-two .paramour-header-utilities .paramour-header-utility::before, .tp-header__right-two .paramour-header-utilities .paramour-header-utility::after { content: none; display: none; } .tp-header__logo img { width: unset; height: 80px; } /* Theme page-title / breadcrumb strip — hide; Entry pages already have their own heroes */ .breadcrumb__area { display: none !important; } /* Homepage brand banner — real logo (injected), hide text / old hero art */ #paramour-brand-banner .tp-paramour-banner__title, #paramour-brand-banner .tp-hero__title, #paramour-brand-banner .tp-paramour-banner__des, #paramour-brand-banner .ele-description, #paramour-brand-banner .tp-hero__thumb, #paramour-brand-banner .tp-hero__content > p { display: none !important; } #paramour-brand-banner .tp-hero__content { display: none !important; } #paramour-brand-banner .tp-hero__wrapper { padding-bottom: 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; } /* Landing banner wordmark — width-led so the lockup can breathe (natural height). */ #paramour-brand-banner .paramour-brand-banner__logo { display: block !important; width: 58% !important; height: auto !important; max-width: none !important; max-height: none !important; margin: 0 auto !important; object-fit: contain !important; } /* * Header at rest — in document flow so the bar pushes content down. * .header-sticky (after scroll) → fixed white bar that reappears. */ #header-sticky.tp-header__transparent:not(.header-sticky) { position: relative !important; left: auto; right: auto; top: auto; width: auto; z-index: 1000; background-color: transparent !important; box-shadow: none !important; } #header-sticky.header-sticky, #header-sticky.header-sticky.tp-header__transparent, #header-sticky.header-sticky.p-relative, #header-sticky.tp-header__space-3.header-sticky { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 999 !important; animation: 500ms ease-in-out 0s normal none 1 running fadeInDown; background-color: #fff !important; box-shadow: 0px 2px 55px rgba(168, 182, 218, 0.32) !important; } #header-sticky.header-sticky .tp-header__main-menu > nav > ul { padding-top: 0; } #paramour-brand-banner.tp-paramour-banner.tp-hero__bg, body.home #paramour-brand-banner.tp-paramour-banner.tp-hero__bg, body.page-id-7448 #paramour-brand-banner.tp-paramour-banner.tp-hero__bg { position: relative; z-index: 0; padding-top: 39px !important; padding-bottom: 42px !important; min-height: 0 !important; } /* Top-level nav: one row — CTA + links + no wrap under the lockup */ #header-sticky .tp-header__main-menu > nav > ul { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 0.15rem 0.35rem; } #header-sticky .tp-header__main-menu > nav > ul > li { float: none !important; display: inline-flex !important; align-items: center !important; white-space: nowrap; } #header-sticky .tp-header__main-menu > nav > ul > li.paramour-menu-cta-item { display: inline-flex !important; align-self: center !important; margin-right: 0.5rem !important; } #header-sticky .tp-header__main-menu > nav > ul > li.paramour-menu-cta-item > a.paramour-menu-cta { height: 42px !important; padding: 0 1.1rem !important; font-size: 14px !important; } /* Tablet desktop-chrome (901–1199): tighten spacing only — keep 14px/700 so menu stays bold. */ @media (max-width: 1199.98px) and (min-width: 901px) { #header-sticky .tp-header__main-menu > nav > ul > li.paramour-menu-cta-item > a.paramour-menu-cta { padding: 0 0.85rem !important; letter-spacing: 0.06em !important; font-size: 13px !important; } #header-sticky .tp-header__main-menu > nav > ul > li > a.nav-links { padding-left: 0.45rem !important; padding-right: 0.45rem !important; font-size: 14px !important; } } @media (max-width: 767px) { #paramour-brand-banner.tp-paramour-banner.tp-hero__bg, body.home #paramour-brand-banner.tp-paramour-banner.tp-hero__bg, body.page-id-7448 #paramour-brand-banner.tp-paramour-banner.tp-hero__bg { padding-top: 39px !important; padding-bottom: 42px !important; } #paramour-brand-banner .paramour-brand-banner__logo { width: 72% !important; height: auto !important; max-width: none !important; max-height: none !important; } } .tp-footer-bottom__social ul li a { background-color: #ec4f6a; } .tp-footer-bottom__border-top { border-top: 1px solid #ffffff; } .tp-footer-bottom__logo img { width: unset; height: 70px; } .mb-50 { margin-bottom: 50px; margin-top: 35px; } .tp-hero__bg { padding-top: 150px; } /* Spacing utility .pt-180 is 180px in Quitox spacing.css — too tall under absolute header. */ .tp-hero__area.pt-180, .tp-hero__area.pt-180.pb-100, .tp-hero__area.pt-180.ele-section, .ele-section.pt-180, .pt-180 { padding-top: 5% !important; } /* SaaS/feature heroes (tp-hero__bg-2): tight top padding */ .tp-hero__area.tp-hero__bg-2, .tp-hero__bg-2.ele-section, .tp-hero__bg-2 { padding-top: 1rem !important; } @media (max-width: 991.98px) { .tp-hero__area.tp-hero__bg-2, .tp-hero__bg-2.ele-section, .tp-hero__bg-2 { padding-top: 1rem !important; } } @media (max-width: 575.98px) { .tp-hero__area.tp-hero__bg-2, .tp-hero__bg-2.ele-section, .tp-hero__bg-2 { padding-top: 1rem !important; } } /* ============================================================ Paramour Blueprint HTML — LAYOUT SHELL (theme-native) Aggressive cream/system-ui skin removed 2026-07-17 so Quitox tp-* components (FAQ accordion, etc.) can render correctly. Grid/section structure kept; wireframe labels hidden on live. ============================================================ */ .pmb-preview-page { /* inherit Quitox body (Outfit / theme colors) — do not override */ font-family: inherit; line-height: inherit; color: inherit; background: transparent; padding: 0; } .pmb-preview-page * { box-sizing: border-box; } .pmb-preview-page > .pmb-preview-shell > .pmb-preview-section > h1, .pmb-preview-page > .pmb-preview-shell > .pmb-preview-section > h2, .pmb-preview-page > .pmb-preview-shell > .pmb-preview-section > h3, .pmb-preview-page > .pmb-preview-shell > .pmb-preview-section > h4 { margin-top: 0; line-height: 1.15; font-family: var(--tp-ff-heading, inherit); color: var(--tp-theme-1, #141774); } .pmb-preview-page:not([data-quitox-pack]) p { margin: 0 0 1rem; } .pmb-preview-shell { max-width: 1180px; margin: 0 auto; } .pmb-preview-section { position: relative; background: transparent; border: 0; border-radius: 0; padding: 2rem 0; margin: 0 0 1.5rem; box-shadow: none; } .pmb-preview-section.is-hero { padding: 2.5rem 0; border: 0; } /* Wireframe authoring labels — hide on live pages */ .pmb-preview-label { display: none !important; } .pmb-preview-note { display: block; margin: 0.75rem 0 1rem; padding: 0.85rem 1rem; border-left: 4px solid var(--tp-theme-2, #017EFA); background: var(--tp-grey-2, #E8F6FF); color: var(--tp-text-body, #62637D); font-size: 0.95rem; } .pmb-preview-grid { display: grid; gap: 1.5rem; width: 100%; box-sizing: border-box; } .pmb-preview-grid.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pmb-preview-grid.three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pmb-preview-column, .pmb-preview-card { border: 1px solid var(--tp-border-2, #EDF5FA); border-radius: 10px; padding: 1.25rem; background: var(--tp-common-white, #ffffff); min-width: min(100%, 14rem); max-width: 100%; box-sizing: border-box; overflow-wrap: break-word; } .pmb-preview-card { box-shadow: 0 1px 3px rgba(20, 23, 116, 0.04); } .pmb-preview-image-placeholder { min-height: 14rem; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; border: 1px dashed var(--tp-border-2, #EDF5FA); border-radius: 10px; background: var(--tp-grey-2, #E8F6FF); color: var(--tp-text-body, #62637D); font-weight: 600; } .pmb-preview-cta { display: inline-block; margin: 0.5rem 0.5rem 0.5rem 0; padding: 0.8rem 1.1rem; border-radius: 60px; background: var(--tp-theme-2, #017EFA); color: var(--tp-common-white, #ffffff); font-weight: 600; text-decoration: none; font-family: var(--tp-ff-heading, inherit); } .pmb-preview-cta.secondary { background: transparent; color: var(--tp-theme-1, #141774); border: 1px solid var(--tp-theme-1, #141774); } .pmb-preview-list { margin: 0; padding-left: 1.25rem; } .pmb-preview-list li { margin-bottom: 0.45rem; } .pmb-preview-card .pmb-preview-list { margin-top: 0.75rem; } .pmb-preview-card .pmb-preview-list li { margin-bottom: 0.35rem; } .pmb-preview-divider { height: 1px; background: var(--tp-border-2, #EDF5FA); margin: 1.5rem 0; } /* Quitox FAQ accordion inside marketing pages — force theme look */ .pmb-preview-page:not([data-quitox-pack]) .tp-custom-accordio-3 { margin-top: 12px; } .pmb-preview-page:not([data-quitox-pack]) .tp-custom-accordio-3 .accordion-items { margin-bottom: 20px; border: 1px solid var(--tp-border-2, #EDF5FA); border-radius: 10px; background: var(--tp-common-white, #ffffff); } .pmb-preview-page:not([data-quitox-pack]) .tp-custom-accordio-3 .accordion-header { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; border: 0; } .pmb-preview-page:not([data-quitox-pack]) .tp-custom-accordio-3 .accordion-buttons { position: relative; display: block; width: 100%; text-align: left; font-family: var(--tp-ff-heading, inherit); font-weight: 600; font-size: 20px; line-height: 1.4; color: var(--tp-theme-1, #141774); padding: 30px 48px 30px 20px; margin: 0; border: 0; border-radius: 10px; background: transparent; box-shadow: none; cursor: pointer; } .pmb-preview-page:not([data-quitox-pack]) .tp-custom-accordio-3 .accordion-buttons:not(.collapsed) { padding-bottom: 8px; border-radius: 10px 10px 0 0; } .pmb-preview-page:not([data-quitox-pack]) .tp-custom-accordio-3 .accordion-buttons::after { position: absolute; content: "\f00d"; font-family: "Font Awesome 5 Pro"; background-image: none; top: 50%; right: 20px; transform: translateY(-50%); color: var(--tp-theme-1, #141774); width: auto; height: auto; font-weight: 200; font-size: 16px; opacity: 1; } .pmb-preview-page:not([data-quitox-pack]) .tp-custom-accordio-3 .accordion-buttons.collapsed::after { content: "\f067"; } .pmb-preview-page:not([data-quitox-pack]) .tp-custom-accordio-3 .accordion-body { padding: 0 20px 24px; font-size: 16px; line-height: 1.9; color: var(--tp-text-body, #62637D); } .pmb-preview-page:not([data-quitox-pack]) .tp-custom-accordio-3 .accordion-body .pmb-preview-list { margin: 12px 0 0; } .pmb-preview-page:not([data-quitox-pack]) .tp-custom-accordio-3 .accordion-body .pmb-preview-note { margin-top: 12px; } @media (max-width: 780px) { .pmb-preview-page:not([data-quitox-pack]) { padding: 0; } .pmb-preview-section, .pmb-preview-section.is-hero { padding: 1.25rem 0; } .pmb-preview-grid.two-columns, .pmb-preview-grid.three-columns { grid-template-columns: 1fr; } .pmb-preview-page:not([data-quitox-pack]) .tp-custom-accordio-3 .accordion-buttons { font-size: 16px; padding: 20px 40px 20px 15px; } } /* remigrate layout guard 2026-07-17 */ .pmb-preview-grid > .pmb-preview-section { grid-column: 1 / -1; width: 100%; max-width: 100%; } .pmb-preview-section { min-width: 0; max-width: 100%; box-sizing: border-box; } /** * Header main-menu typography parity with paramour.me pre-app (audit 2026-06-04). * Append to quitox-child/style.css on paramour.services, or enqueue after child theme style. * * @package Paramour_Official_Website */ /* Top-level nav — Outfit, darker text, consistent rhythm. No antialiased/grayscale: those thin 700 on Windows/tablet DPI. Force dark over Quitox parent --tp-common-white-2 (#BDBEEC). CTA keeps its own white rules. */ .tp-header__main-menu > nav > ul > li > a.nav-links:not(.paramour-menu-cta), .tp-header__main-menu ul li a.nav-links:not(.paramour-menu-cta), .tp-header__main-menu ul li > a:not(.paramour-menu-cta) { font-family: "Outfit", sans-serif; font-weight: 700; font-size: 14px; line-height: 1.5; letter-spacing: normal; color: #151718 !important; -webkit-text-fill-color: #151718 !important; text-transform: uppercase; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .tp-header__black-menu ul li > a.nav-links, .tp-header__black-menu ul li a { color: #151718 !important; -webkit-text-fill-color: #151718 !important; } .tp-header__black-menu ul li:hover > a.nav-links, .tp-header__black-menu ul li:hover a { color: var(--tp-theme-1, #ec4f6a) !important; -webkit-text-fill-color: var(--tp-theme-1, #ec4f6a) !important; } /* Submenu — match pre-app (capitalize, #333, not --tp-text-body) */ .tp-header__main-menu ul li .submenu li a, .tp-header__main-menu ul li .submenu li a.dropdown-items { font-family: "Outfit", sans-serif; font-weight: 500; font-size: 14px; line-height: 1.5; letter-spacing: normal; color: #333; text-transform: capitalize; } .tp-header__main-menu ul li .submenu li:hover > a, .tp-header__main-menu ul li .submenu li a.dropdown-items:hover { color: var(--tp-theme-1, #ec4f6a); } /* Header chrome: drop Bootstrap container gutter (spacing is on #header-sticky). */ #header-sticky .container, #header-sticky .container-fluid, #header-sticky .container-sm, #header-sticky .container-md, #header-sticky .container-lg, #header-sticky .container-xl, #header-sticky .container-xxl { padding-left: 0 !important; padding-right: 0 !important; } /* Top-level nav links — pre-app parity (layout + typography; not CTA) */ .tp-header__main-menu > nav > ul > li > a.nav-links:not(.paramour-menu-cta), .tp-header__main-menu ul li a.nav-links:not(.paramour-menu-cta) { display: inline-block; place-content: center; padding: 35px 0; font-family: "Outfit", sans-serif; font-weight: 700; font-size: 14px; line-height: 1.5; color: #151718 !important; -webkit-text-fill-color: #151718 !important; text-decoration: none; text-transform: uppercase; letter-spacing: normal; transition: color 0.3s ease; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .tp-header__main-menu ul li:hover > a.nav-links:not(.paramour-menu-cta), .tp-header__main-menu ul li:focus-within > a.nav-links:not(.paramour-menu-cta) { color: var(--tp-theme-1, #ec4f6a) !important; -webkit-text-fill-color: var(--tp-theme-1, #ec4f6a) !important; } .tp-header__main-menu ul li > a.nav-links:not(.paramour-menu-cta):hover, .tp-header__main-menu ul li > a.nav-links:not(.paramour-menu-cta):focus-visible { color: var(--tp-theme-1, #ec4f6a) !important; -webkit-text-fill-color: var(--tp-theme-1, #ec4f6a) !important; text-decoration: none; } .tp-header__black-menu ul li > a.nav-links:not(.paramour-menu-cta), .tp-header__black-menu ul li a.nav-links:not(.paramour-menu-cta) { color: #151718 !important; -webkit-text-fill-color: #151718 !important; } .tp-header__black-menu ul li:hover > a.nav-links:not(.paramour-menu-cta), .tp-header__black-menu ul li:hover a.nav-links:not(.paramour-menu-cta) { color: var(--tp-theme-1, #ec4f6a) !important; -webkit-text-fill-color: var(--tp-theme-1, #ec4f6a) !important; } /** * For Clients header CTA — copy of quitox-child/style.css on paramour.services. * Pre-app: scoped under .paramour-pre-app-header-shell in pre-app-header.css. * Mobile stack: quitox-child-header-mobile-stack.css (also in pre-app-header.css). * * @package Paramour_Official_Website */ .tp-header__main-menu > nav > ul > li.paramour-menu-cta-item > a.paramour-menu-cta, .tp-header__right-two > a.paramour-mobile-header-cta.paramour-menu-cta { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; background-color: var(--tp-theme-2); color: var(--tp-common-white) !important; height: 55px; line-height: 1; padding: 0 35px !important; font-weight: 700; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 5px; position: relative; z-index: 1; overflow: hidden; transition: 0.3s; text-decoration: none; vertical-align: middle; } /* Mobile: hide For Clients CTA (header bar + desktop nav item). */ @media (max-width: 900px) { #header-sticky .tp-header__main-menu > nav > ul > li.paramour-menu-cta-item { display: none !important; } #header-sticky .tp-header__right-two > a.paramour-mobile-header-cta, #header-sticky .tp-header__right-two > a.paramour-mobile-header-cta.paramour-menu-cta, #header-sticky .paramour-pre-app-header__mobile-cta, #header-sticky .paramour-mobile-header-cta { display: none !important; visibility: hidden !important; height: 0 !important; max-height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; pointer-events: none !important; } } /** * Mobile header chrome stack — paramour.services Quitox (#header-sticky). * Append to quitox-child/style.css or enqueue after child theme style. * * DOM: utilities (language, account) → logo toggle. column-reverse → logo, account, language. * * @package Paramour_Official_Website */ @media (max-width: 900px) { #header-sticky .row.align-items-center > [class*="col-"]:last-child { display: flex !important; justify-content: flex-end !important; text-align: right; } #header-sticky .tp-header__main-menu > nav > ul > li.paramour-menu-cta-item, #header-sticky .tp-header__right-two > a.paramour-mobile-header-cta, #header-sticky .tp-header__right-two > a.paramour-mobile-header-cta.paramour-menu-cta { display: none !important; } #header-sticky .tp-header__right-two { flex-flow: column-reverse !important; flex-direction: column-reverse !important; flex-wrap: nowrap !important; align-items: flex-end !important; justify-content: flex-start !important; gap: 25px !important; } #header-sticky .tp-header__right-two .paramour-header-utilities, #header-sticky .tp-header__right-two .paramour-pre-app-header__utilities { flex-flow: column-reverse !important; flex-direction: column-reverse !important; flex-wrap: nowrap !important; align-items: flex-end !important; margin-left: 0 !important; gap: 15px; } } /** * Patch: right-align mobile header stack (Bootstrap .align-items-center + logo align-self). * Append once after quitox-child-header-mobile-stack.css block. * * @package Paramour_Official_Website */ @media (max-width: 900px) { #header-sticky .tp-header__right-two.align-items-center { align-items: flex-end !important; } #header-sticky .tp-header__right-two .paramour-header-utilities.align-items-center { align-items: flex-end !important; } #header-sticky .paramour-mobile-menu-logo, #header-sticky .tp-header__bars.paramour-mobile-menu-logo { align-self: flex-end !important; margin-left: auto; } } /** * Fix actions column stuck at 50% (Bootstrap col-md-6) between 768px and 900px. * * @package Paramour_Official_Website */ @media (max-width: 900px) { #header-sticky .row.align-items-center > .col-md-6, #header-sticky .row.align-items-center > .col-md-6.col-12, #header-sticky .row.align-items-center > [class*="col-"]:last-child { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; } } /** * Mobile header stack v2 — screen-right block, icons centered under logo. * Supersedes earlier appended stack/patch/utilities blocks on paramour.services. * * @package Paramour_Official_Website */ @media (max-width: 900px) { #header-sticky .row.align-items-center > .col-md-6, #header-sticky .row.align-items-center > .col-md-6.col-12, #header-sticky .row.align-items-center > [class*="col-"]:last-child { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; display: flex !important; justify-content: flex-end !important; } #header-sticky .tp-header__main-menu > nav > ul > li.paramour-menu-cta-item, #header-sticky .tp-header__right-two > a.paramour-mobile-header-cta, #header-sticky .tp-header__right-two > a.paramour-mobile-header-cta.paramour-menu-cta { display: none !important; } #header-sticky .tp-header__right-two, #header-sticky .tp-header__right-two.d-flex, #header-sticky .tp-header__right-two.align-items-center { flex-flow: column-reverse !important; flex-direction: column-reverse !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; width: max-content !important; max-width: 100%; margin-left: auto !important; margin-right: 1rem; gap: 25px !important; } #header-sticky .paramour-mobile-menu-logo, #header-sticky .tp-header__bars.paramour-mobile-menu-logo, #header-sticky .tp-header__right-two > a.tp-header__bars.paramour-mobile-menu-logo { box-sizing: border-box; flex: 0 0 60px !important; width: 60px !important; height: 60px !important; min-width: 60px !important; min-height: 60px !important; max-width: 60px !important; max-height: 60px !important; align-self: center !important; margin-left: 0; padding: 0; display: inline-flex !important; align-items: center; justify-content: center; } #header-sticky .paramour-mobile-menu-logo img, #header-sticky .tp-header__bars.paramour-mobile-menu-logo img { display: block; width: 100%; height: 100%; object-fit: cover; } #header-sticky .tp-header__right-two .paramour-header-utilities, #header-sticky .tp-header__right-two .paramour-header-utilities.d-flex, #header-sticky .tp-header__right-two .paramour-pre-app-header__utilities, #header-sticky .tp-header__right-two .paramour-header-utilities.align-items-center { flex-flow: column-reverse !important; flex-direction: column-reverse !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; align-self: center !important; width: auto; margin: 0 !important; gap: 15px; } } /* Purio floating chat — header stacking */ .listeo-ai-chat-header { z-index: 10; } /* ============================================================ FULL BLEED Quitox marketing (2026-07-17) Escape default page.php .container boxing for pack pages. ============================================================ */ .tp-full-bleed-area { width: 100%; max-width: 100%; padding: 0; margin: 0; overflow: visible; } .tp-full-bleed-area .pmb-preview-page, .pmb-preview-page[data-quitox-pack] { width: 100%; max-width: 100%; padding: 0; margin: 0; overflow: visible; } /* Fullscreen SaaS hero background */ .tp-hero-bleed { position: relative; width: 100%; overflow: visible; } .tp-hero-bleed .tp-header-bg { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 100vw; max-width: none; z-index: -1; pointer-events: none; } .tp-hero-bleed .tp-header-bg img { display: block; width: 100vw; max-width: none; height: auto; min-height: 100%; object-fit: cover; object-position: top center; } @media (max-width: 900px) { .tp-hero-bleed .tp-header-bg { top: 0; } } /* Band sections paint edge-to-edge; inner .container keeps type readable */ .pmb-preview-page[data-quitox-pack] .tp-feature__area, .pmb-preview-page[data-quitox-pack] .tp-platform__area, .pmb-preview-page[data-quitox-pack] .tp-faq__area, .pmb-preview-page[data-quitox-pack] .tp-cta__area, .pmb-preview-page[data-quitox-pack] .grey-bg { width: 100%; } /* ============================================================ PACK: Quitox-native (2026-07-17) No font-size / color / family overrides on tp-* components. Theme quitox-core.css owns typography. Helpers are layout-only. ============================================================ */ /* Pack type colors — Quitox BLUE_TONE_POOL (force). Soft var() rules lost to Bootstrap reboot (~#212529/#333) + fill inheritance. Variety: navy headlines, blue-grey body, electric links/kickers, white on fulltone. */ .pmb-preview-page[data-quitox-pack] { --tp-theme-1: #141774; --tp-theme-2: #017EFA; --tp-theme-3: #0B4DF5; --tp-text-body: #62637D; --tp-common-sky: #45CCFE; --tp-common-white: #ffffff; --tp-common-pink: #F85797; --tp-grey-1: #BDBEEC; --tp-grey-2: #E8F6FF; color: #62637D !important; } .pmb-preview-page[data-quitox-pack] :is( h1, h2, h3, h4, h5, h6, .tp-section-title, .tp-section-title-sm, .tp-section-title-md, .tp-feature__title-sm, .tp-app__title-sm, .tp-repeater-title, .accordion-buttons, .accordion-header ) { color: #141774 !important; -webkit-text-fill-color: #141774 !important; } .pmb-preview-page[data-quitox-pack] :is( p, li, .tp-el-box-desc, .tp-el-content, .tp-hero-lead, .tp-cta-lead, .accordion-body, .tp-repeater-desc, .tp-feature__content ) { color: #62637D !important; -webkit-text-fill-color: #62637D !important; } .pmb-preview-page[data-quitox-pack] :is(p, .tp-hero-lead) strong { color: #141774 !important; -webkit-text-fill-color: #141774 !important; font-weight: 600; } /* Electric blue accents — links, kickers, hero underline spans */ .pmb-preview-page[data-quitox-pack] .tp-hero-kicker, .pmb-preview-page[data-quitox-pack] .tp-hero__title-lg.theme-color span, .pmb-preview-page[data-quitox-pack] a:not([class*="tp-btn"]):not(.tp-el-box-btn):not(.accordion-buttons) { color: #017EFA !important; -webkit-text-fill-color: #017EFA !important; } .pmb-preview-page[data-quitox-pack] a:not([class*="tp-btn"]):not(.tp-el-box-btn):not(.accordion-buttons):hover { color: #0B4DF5 !important; -webkit-text-fill-color: #0B4DF5 !important; } /* Feature title links stay navy (readable cards); hover → electric */ .pmb-preview-page[data-quitox-pack] .tp-feature__title-sm a, .pmb-preview-page[data-quitox-pack] .tp-el-box-title a { color: #141774 !important; -webkit-text-fill-color: #141774 !important; } .pmb-preview-page[data-quitox-pack] .tp-feature__title-sm a:hover, .pmb-preview-page[data-quitox-pack] .tp-el-box-title a:hover { color: #017EFA !important; -webkit-text-fill-color: #017EFA !important; } /* Arrow / box buttons → electric */ .pmb-preview-page[data-quitox-pack] .tp-el-box-btn { color: #017EFA !important; -webkit-text-fill-color: #017EFA !important; } /* Light-hero titles (core forces white on .tp-hero__title) */ .pmb-preview-page[data-quitox-pack] .tp-hero__title.theme-color, .pmb-preview-page[data-quitox-pack] .tp-hero__title-lg.theme-color { color: #141774 !important; -webkit-text-fill-color: #141774 !important; } /* Fulltone navy / bright type */ .pmb-preview-page[data-quitox-pack] .theme-bg :is(h1, h2, h3, h4, h5, h6, p, li, strong), .pmb-preview-page[data-quitox-pack] .tp-cta__wrapper-2.theme-bg :is(h1, h2, h3, h4, p, li, strong), .pmb-preview-page[data-quitox-pack] .theme-bg .tp-check-list--on-dark li, .pmb-preview-page[data-quitox-pack] .text-white { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .pmb-preview-page[data-quitox-pack] .theme-bg a:not([class*="tp-btn"]), .pmb-preview-page[data-quitox-pack] .tp-cta__wrapper-2.theme-bg a:not([class*="tp-btn"]) { color: #45CCFE !important; -webkit-text-fill-color: #45CCFE !important; } .pmb-preview-page[data-quitox-pack] :is(.tp-btn-blue, .tp-btn-sky) span, .pmb-preview-page[data-quitox-pack] :is(.tp-btn-blue, .tp-btn-sky) { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .pmb-preview-page[data-quitox-pack] .tp-cta-on-dark { border-color: #ffffff !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Match secondary CTA height to tp-btn-blue (theme is 55px / 65px mix) */ .pmb-preview-page[data-quitox-pack] .tp-hero-cta-row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center; } .pmb-preview-page[data-quitox-pack] .tp-btn-border--match { height: 55px; line-height: 55px; padding: 0 35px; border-radius: 60px; } /* Pack-only helpers (not in Quitox) — no type restyling of tp-* */ .pmb-preview-page[data-quitox-pack] .tp-step-num { width: 48px; height: 48px; border-radius: 50%; background: var(--tp-theme-2); color: var(--tp-common-white); font-weight: 700; font-size: 18px; line-height: 48px; text-align: center; margin-bottom: 18px; } .pmb-preview-page[data-quitox-pack] .tp-timeline-item .tp-step-num { margin-left: auto; margin-right: auto; } .pmb-preview-page[data-quitox-pack] .tp-check-list, .pmb-preview-page[data-quitox-pack] .tp-link-list, .pmb-preview-page[data-quitox-pack] .tp-process-list { list-style: none; margin: 0; padding: 0; } .pmb-preview-page[data-quitox-pack] .tp-check-list li, .pmb-preview-page[data-quitox-pack] .tp-link-list li { position: relative; padding: 8px 0 8px 28px; } .pmb-preview-page[data-quitox-pack] .tp-check-list li::before, .pmb-preview-page[data-quitox-pack] .tp-link-list li::before { content: ""; position: absolute; left: 0; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--tp-theme-2); } .pmb-preview-page[data-quitox-pack] .tp-process-list { counter-reset: tp-step; } .pmb-preview-page[data-quitox-pack] .tp-process-list li { position: relative; counter-increment: tp-step; padding: 12px 0 12px 48px; border-bottom: 1px solid var(--tp-border-1); } .pmb-preview-page[data-quitox-pack] .tp-process-list li:last-child { border-bottom: 0; } .pmb-preview-page[data-quitox-pack] .tp-process-list li::before { content: counter(tp-step); position: absolute; left: 0; top: 10px; width: 32px; height: 32px; border-radius: 50%; background: var(--tp-theme-2); color: var(--tp-common-white); font-size: 13px; font-weight: 700; line-height: 32px; text-align: center; } .pmb-preview-page[data-quitox-pack] .tp-related-links { background: var(--tp-grey-2); border-radius: 10px; padding: 28px 32px; } .pmb-preview-page[data-quitox-pack] .tp-mini-pill { background: var(--tp-grey-2); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; } .pmb-preview-page[data-quitox-pack] .tp-feature__item--audience { border: 0; border-image: none; background: var(--tp-common-white); box-shadow: 0 10px 40px rgba(20, 23, 116, 0.06); min-height: 0; text-align: left; } /* Pointed punch marker — Quitox --tp-common-pink only (BLUE_TONE_POOL recipe F/E) */ .pmb-preview-page[data-quitox-pack] .tp-check-list--punch li::before { background: var(--tp-common-pink); } /* Fulltone navy lists — bright type + sky markers (BLUE_TONE_POOL recipe D) */ .pmb-preview-page[data-quitox-pack] .tp-check-list--on-dark li::before { background: var(--tp-common-sky); } /* App Landing hero kicker (For Providers) — color set in pack type block */ .pmb-preview-page[data-quitox-pack] .tp-hero-kicker { font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 14px; margin-bottom: 0; } /* Homepage / Entry — Knowledge Engine embed (classes from PKE; CSS via enqueue) */ .pmb-preview-page[data-quitox-pack] .ke-page--embed { max-width: none; margin: 0; padding: 0; } .pmb-preview-page[data-quitox-pack] .ke-page--embed .ke__hero h2 { font-family: var(--ke-font-heading, 'Poppins', sans-serif); font-size: clamp(1.6rem, 4vw, 2.25rem); color: var(--ke-heading, #151718); font-weight: 700; line-height: 1.3; margin: 0 0 0.75rem; } .pmb-preview-page[data-quitox-pack] .ke-page--embed .ke__aside .ke__links { list-style: none; margin: 0; padding: 0; } .pmb-preview-page[data-quitox-pack] .ke-page--embed .ke__aside .ke__links li { margin: 0 0 0.65rem; } .pmb-preview-page[data-quitox-pack] .ke-page--embed .ke__aside .ke__links a { color: var(--ke-accent-blue, #017EFA); font-weight: 600; text-decoration: none; } .pmb-preview-page[data-quitox-pack] .ke-page--embed .ke__aside .ke__links a:hover { text-decoration: underline; } /* KE embed visual figure (marketing pages) — matches ke card surface */ .pmb-preview-page[data-quitox-pack] .ke-page--embed .ke__visual { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin-bottom: 1.25rem; } .pmb-preview-page[data-quitox-pack] .ke-page--embed .ke__figure { margin: 0; padding: 0.75rem; background: var(--ke-surface, #ffffff); border: 1px solid var(--ke-border, #DCEDF9); border-radius: var(--ke-radius, 1rem); box-shadow: var(--ke-shadow-card, 0 2px 16px rgba(20, 23, 116, 0.09)); overflow: hidden; } .pmb-preview-page[data-quitox-pack] .ke-page--embed .ke__figure img { display: block; width: 100%; height: auto; border-radius: calc(var(--ke-radius, 1rem) - 0.35rem); } @media (max-width: 900px) { .pmb-preview-page[data-quitox-pack] .ke-page--embed .ke__visual { max-width: 28rem; margin-left: auto; margin-right: auto; } } /* KE banner mosaic — modern variant (not stereotype main+aside) */ .pmb-preview-page[data-quitox-pack] .ke-page--banner { max-width: none; } .pmb-preview-page[data-quitox-pack] .ke-banner { position: relative; overflow: hidden; border-radius: var(--ke-radius, 1rem); border: 1px solid var(--ke-border, #DCEDF9); background: linear-gradient(135deg, rgba(232, 246, 255, 0.95) 0%, rgba(255, 255, 255, 0.92) 48%, rgba(189, 190, 236, 0.35) 100%), var(--ke-surface, #ffffff); box-shadow: var(--ke-shadow, 0 4px 24px rgba(20, 23, 116, 0.07)); margin-bottom: 1.75rem; padding: 0; } .pmb-preview-page[data-quitox-pack] .ke-banner__mesh { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 80% at 100% 0%, rgba(1, 126, 250, 0.14), transparent 55%), radial-gradient(ellipse 50% 60% at 0% 100%, rgba(236, 79, 106, 0.10), transparent 50%); opacity: 1; } .pmb-preview-page[data-quitox-pack] .ke-banner__inner { position: relative; z-index: 1; padding: 2.75rem 2.5rem 2.25rem; max-width: 46rem; } .pmb-preview-page[data-quitox-pack] .ke-banner h2 { font-family: var(--ke-font-heading, "Poppins", sans-serif); font-size: clamp(1.55rem, 3.2vw, 2.15rem) !important; color: var(--ke-heading, #151718) !important; -webkit-text-fill-color: var(--ke-heading, #151718) !important; margin: 0 0 0.85rem; line-height: 1.25; } .pmb-preview-page[data-quitox-pack] .ke-banner__lead { font-size: 1.05rem !important; line-height: 1.7 !important; color: var(--ke-text, #62637D) !important; -webkit-text-fill-color: var(--ke-text, #62637D) !important; margin: 0 0 1.25rem; } .pmb-preview-page[data-quitox-pack] .ke-banner__punch { margin: 0 0 1.35rem; padding: 0.9rem 0 0.9rem 1.15rem; border-left: 3px solid var(--ke-accent, #ec4f6a); font-size: 0.975rem !important; line-height: 1.7 !important; font-weight: 500; color: var(--ke-heading-blue, #141774) !important; -webkit-text-fill-color: var(--ke-heading-blue, #141774) !important; background: transparent; } .pmb-preview-page[data-quitox-pack] .ke-banner__chips { margin-top: 0.25rem; } .pmb-preview-page[data-quitox-pack] .ke-banner__mosaic { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin-bottom: 1.5rem; } .pmb-preview-page[data-quitox-pack] .ke__cards--mosaic { grid-template-columns: repeat(2, 1fr); gap: 1.15rem; } .pmb-preview-page[data-quitox-pack] .ke__cards--mosaic .ke__card .ke__label { margin-bottom: 0.35rem; } .pmb-preview-page[data-quitox-pack] .ke__cards--mosaic .ke__card h3 { font-size: 1.05rem; margin: 0 0 0.4rem; } .pmb-preview-page[data-quitox-pack] .ke-banner__deeper { background: var(--ke-surface, #ffffff) !important; border: 1px solid var(--ke-border-light, #e8e4f4) !important; border-radius: var(--ke-radius, 1rem); box-shadow: var(--ke-shadow-card, 0 2px 16px rgba(20, 23, 116, 0.09)); padding: 1.35rem 1.5rem !important; } .pmb-preview-page[data-quitox-pack] .ke__links--inline { list-style: none; margin: 0.35rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.65rem 1.35rem; } .pmb-preview-page[data-quitox-pack] .ke__links--inline a { color: var(--ke-accent-blue, #017EFA) !important; font-weight: 600; text-decoration: none; } .pmb-preview-page[data-quitox-pack] .ke__links--inline a:hover { text-decoration: underline; } @media (max-width: 767px) { .pmb-preview-page[data-quitox-pack] .ke-banner__inner { padding: 1.75rem 1.35rem 1.5rem; } .pmb-preview-page[data-quitox-pack] .ke__cards--mosaic { grid-template-columns: 1fr; } } /* Homepage — original Elementor tp-banner brand lockup (Cooper Black Paramour.me) */ .pmb-preview-page[data-quitox-pack] .tp-paramour-banner { background-position: center center; background-repeat: no-repeat; background-size: cover; } .pmb-preview-page[data-quitox-pack] .tp-paramour-banner__title.ele-heading, .pmb-preview-page[data-quitox-pack] .tp-paramour-banner .ele-heading { font-family: "Cooper Black", Georgia, serif !important; color: #222222 !important; -webkit-text-fill-color: #222222 !important; background: transparent !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; } .pmb-preview-page[data-quitox-pack] .tp-paramour-banner .paramour-accent { color: #ec4f6a !important; -webkit-text-fill-color: #ec4f6a !important; } .pmb-preview-page[data-quitox-pack] .tp-paramour-banner__des.ele-description, .pmb-preview-page[data-quitox-pack] .tp-paramour-banner .ele-description { color: #333333 !important; -webkit-text-fill-color: #333333 !important; font-size: 18px; line-height: 1.55; max-width: 36em; margin-left: auto; margin-right: auto; } /* Homepage — Why This Matters contrast panels */ .pmb-preview-page[data-quitox-pack] .tp-why-panel { height: 100%; border-radius: 16px; padding: 40px 36px 36px; text-align: left; } .pmb-preview-page[data-quitox-pack] .tp-why-panel--friction { background: #ffffff; border: 1px solid var(--tp-border-2, #DCEDF9); box-shadow: 0 12px 40px rgba(20, 23, 116, 0.06); } .pmb-preview-page[data-quitox-pack] .tp-why-panel--resolve { background: var(--tp-grey-2, #E8F6FF); border: 1px solid transparent; box-shadow: 0 16px 48px rgba(1, 126, 250, 0.10); } .pmb-preview-page[data-quitox-pack] .tp-why-panel__eyebrow { color: #017EFA !important; -webkit-text-fill-color: #017EFA !important; font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 10px; } .pmb-preview-page[data-quitox-pack] .tp-why-panel--friction .tp-why-panel__eyebrow { color: #F85797 !important; -webkit-text-fill-color: #F85797 !important; } .pmb-preview-page[data-quitox-pack] .tp-why-panel__title { color: #141774 !important; -webkit-text-fill-color: #141774 !important; font-size: 28px; font-weight: 700; margin-bottom: 12px; line-height: 1.25; } .pmb-preview-page[data-quitox-pack] .tp-why-panel__lead { color: #62637D !important; -webkit-text-fill-color: #62637D !important; margin-bottom: 22px; font-size: 16px; line-height: 1.55; } .pmb-preview-page[data-quitox-pack] .tp-why-payoff { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: center; align-items: center; padding: 28px 32px; border-radius: 14px; background: var(--tp-theme-1, #141774); } .pmb-preview-page[data-quitox-pack] .tp-why-payoff span { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; } @media (max-width: 767px) { .pmb-preview-page[data-quitox-pack] .tp-why-panel { padding: 28px 22px; } .pmb-preview-page[data-quitox-pack] .tp-why-payoff { flex-direction: column; text-align: center; gap: 10px; } } /* ============================================================ Pricing page (page-id-90) — POINTED style only (recipe F) Keep Elementor layout + tp-pricing boxes. No full-page wash. Accents: wireframe cleanup, hero mist, CTA sky, active card, notes. ============================================================ */ .page-id-90 .pmb-preview-label, .page-id-90 .pmb-preview-image-placeholder { display: none !important; } .page-id-90 .pmb-preview-page { background: transparent !important; padding: 0 !important; color: var(--tp-text-body, #62637D); } .page-id-90 .pmb-preview-shell { max-width: 1140px; margin: 0 auto; padding: 0 15px; } /* One pointed hero wash — leave other sections mostly alone */ .page-id-90 .pmb-preview-section.is-hero { background: var(--tp-grey-2, #E8F6FF) !important; border: none !important; border-radius: 1rem !important; box-shadow: none !important; padding: 2.75rem 2rem !important; } .page-id-90 .pmb-preview-section.is-hero h1 { color: var(--tp-theme-1, #141774) !important; font-family: "Poppins", sans-serif !important; } /* Pointed CTAs only */ .page-id-90 .pmb-preview-cta { display: inline-block !important; margin: 0.35rem 0.5rem 0.35rem 0 !important; padding: 0.8rem 1.25rem !important; border-radius: 6px !important; background: var(--tp-theme-1, #141774) !important; color: #fff !important; font-weight: 600 !important; text-decoration: none !important; border: 1px solid transparent !important; } .page-id-90 .pmb-preview-cta.secondary { background: transparent !important; color: var(--tp-theme-2, #017EFA) !important; border-color: var(--tp-theme-2, #017EFA) !important; } .page-id-90 .pmb-preview-cta:hover { background: var(--tp-common-sky, #45CCFE) !important; border-color: var(--tp-common-sky, #45CCFE) !important; color: #fff !important; } /* Pointed note callout */ .page-id-90 .pmb-preview-note { border-left: 3px solid var(--tp-theme-2, #017EFA) !important; background: rgba(232, 246, 255, 0.65) !important; color: var(--tp-text-body, #62637D) !important; } /* Soften cream card chrome without re-skinning every block */ .page-id-90 .pmb-preview-section:not(.is-hero) { background: #fff !important; border-color: #EDF5FA !important; box-shadow: none !important; } .page-id-90 .pmb-preview-card, .page-id-90 .pmb-preview-column { border-color: #EDF5FA !important; background: #fff !important; border-style: solid !important; } /* Active price tier only — leave inactive boxes theme-default */ .page-id-90 .tp-price__active { border-color: var(--tp-common-sky, #45CCFE) !important; box-shadow: 0 18px 36px rgba(69, 204, 254, 0.18); } .page-id-90 .tp-price__active .tp-btn-border { background-color: var(--tp-common-sky, #45CCFE) !important; color: #fff !important; border-color: var(--tp-common-sky, #45CCFE) !important; } @media (max-width: 767px) { .page-id-90 .pmb-preview-section.is-hero { padding: 1.75rem 1.15rem !important; } } /* Pricing-style value / philosophy panels (templates, not Elementor tp-pricing boxes) */ .page-id-90 .tp-price__item--value, .pmb-preview-page[data-quitox-pack="saas-landing"] .tp-price__item--value { border: 1px solid #EDF5FA; height: 100%; } .page-id-90 .tp-price__item--value .tp-price__title, .pmb-preview-page[data-quitox-pack="saas-landing"] .tp-price__item--value .tp-price__title { font-size: 1.35rem; padding-bottom: 1rem; line-height: 1.35; color: var(--tp-theme-1, #141774); } .page-id-90 .tp-price__item--value .tp-price__icon, .pmb-preview-page[data-quitox-pack="saas-landing"] .tp-price__item--value .tp-price__icon { margin-bottom: 1.5rem; } .page-id-90 .tp-price__item--value > p, .page-id-90 .tp-price__item--value .tp-el-box-desc, .pmb-preview-page[data-quitox-pack="saas-landing"] .tp-price__item--value > p { color: var(--tp-text-body, #62637D); margin: 0; line-height: 1.7; } .page-id-90 .tp-price-note, .pmb-preview-page[data-quitox-pack="saas-landing"] .tp-price-note { margin-top: 1.25rem; padding: 0.85rem 1rem 0.85rem 1.1rem; border-left: 3px solid var(--tp-theme-2, #017EFA); background: rgba(232, 246, 255, 0.7); color: var(--tp-text-body, #62637D); font-size: 0.95rem; line-height: 1.55; border-radius: 0 0.5rem 0.5rem 0; } .page-id-90 .tp-price__item--value.tp-price__active .tp-price-note, .pmb-preview-page[data-quitox-pack="saas-landing"] .tp-price__item--value.tp-price__active .tp-price-note { border-left-color: var(--tp-common-sky, #45CCFE); } .page-id-90 [data-qx-template="pricing-value-3up"] .tp-section-title, .page-id-90 [data-qx-template="pricing-philosophy-2up"] .tp-section-title-sm, .pmb-preview-page[data-quitox-pack="saas-landing"] [data-qx-template] .tp-section-title, .pmb-preview-page[data-quitox-pack="saas-landing"] [data-qx-template] .tp-section-title-sm { color: var(--tp-theme-1, #141774); } /* Universal image proposal slots (Blueprint handover → fill with final art) */ .qx-image-slot { margin: 0 0 1.5rem; } .qx-image-slot__frame { position: relative; border-radius: 12px; overflow: hidden; background: var(--tp-grey-2, #E8F6FF); } .qx-image-slot--pending .qx-image-slot__frame { border: 2px dashed var(--tp-border-1, #EDF5FA); min-height: 280px; } .qx-image-slot--hero.qx-image-slot--pending .qx-image-slot__frame { min-height: 360px; } /* Landscape editorial / photo frames (default for non-UI) */ .qx-image-slot--landscape { max-width: 100%; width: 100%; } .qx-image-slot--landscape .qx-image-slot__frame { aspect-ratio: 16 / 10; min-height: 220px; width: 100%; border-radius: 12px; background: var(--tp-grey-2, #E8F6FF); } .qx-image-slot--landscape.qx-image-slot--pending .qx-image-slot__frame, .qx-image-slot--landscape.qx-image-slot--hero.qx-image-slot--pending .qx-image-slot__frame { min-height: 220px; } .qx-image-slot--landscape.qx-image-slot--hero .qx-image-slot__frame { min-height: 280px; } .qx-image-slot--landscape .qx-image-slot__dummy, .qx-image-slot--landscape .qx-image-slot__dummy--landscape { object-fit: cover; object-position: center; padding: 0; } /* Landscape pending: do not use phone-dummy ::before */ .qx-image-slot--landscape.qx-image-slot--pending .qx-image-slot__frame::before { display: none; } .qx-layout__landscape, .qx-layout__grid--landscapes { width: 100%; } .qx-layout__grid--landscapes > .qx-image-slot { max-width: none; margin: 0; } /* Never squeeze landscapes inside phone rows */ .qx-layout__phone-row > .qx-image-slot--landscape, .qx-layout__grid--phones > .qx-image-slot--landscape { flex: 1 1 100%; max-width: 100%; } /* Portrait phone mockups — UI / screenshot / interface proposals */ .qx-image-slot--phone, .qx-image-slot--portrait { max-width: 260px; width: 100%; margin-left: auto; margin-right: auto; } .qx-image-slot--phone .qx-image-slot__frame, .qx-image-slot--portrait .qx-image-slot__frame { aspect-ratio: 9 / 19.5; width: 100%; max-width: 240px; margin: 0 auto; min-height: 0 !important; border-radius: 28px; border-width: 2px; background: #0f1228; } .qx-image-slot--phone.qx-image-slot--pending .qx-image-slot__frame, .qx-image-slot--phone.qx-image-slot--hero.qx-image-slot--pending .qx-image-slot__frame, .qx-image-slot--portrait.qx-image-slot--pending .qx-image-slot__frame { min-height: 0 !important; } .qx-image-slot--phone .qx-image-slot__dummy, .qx-image-slot--portrait .qx-image-slot__dummy { object-fit: contain; padding: 8% 6%; } .qx-image-slot--phone .qx-image-slot__proposal, .qx-image-slot--portrait .qx-image-slot__proposal { font-size: 0.78rem; line-height: 1.4; max-height: 6.5em; overflow: hidden; } .qx-image-slot--phone .qx-image-slot__caption, .qx-image-slot--portrait .qx-image-slot__caption { font-size: 0.72rem; text-align: center; } /* Phone UI packs — always a horizontal row (not stacked column) */ .qx-layout__phone-row, .qx-layout__grid--phones { display: flex !important; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 1rem 1.25rem; width: 100%; grid-template-columns: none !important; } .qx-layout__phone-row > .qx-image-slot, .qx-layout__grid--phones > .qx-image-slot { flex: 0 1 220px; max-width: 240px; margin: 0; } .qx-layout__col--media .qx-layout__phone-row, .qx-layout__col--media .qx-layout__grid--phones, .tp-hero__thumb-3 .qx-layout__phone-row, .tp-hero__thumb-2 .qx-layout__phone-row { justify-content: center; } /* Default placeholder art (pending slots without a final image) */ .qx-image-slot--pending .qx-image-slot__frame::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url("/wp-content/uploads/system/phone-dummy.png") center center / contain no-repeat; pointer-events: none; } .qx-image-slot__frame:has(.qx-image-slot__dummy)::before { display: none; } .qx-image-slot__dummy { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; pointer-events: none; } .qx-image-slot__img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .qx-image-slot--phone .qx-image-slot__img, .qx-image-slot--portrait .qx-image-slot__img { object-fit: contain; } .qx-image-slot--pending .qx-image-slot__empty, .qx-image-slot--pending .qx-image-slot__labels { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin: 0; padding: 1rem 1.25rem; min-height: 0; background: transparent; color: var(--tp-text-body, #62637D); pointer-events: none; } .qx-image-slot--phone .qx-image-slot__labels, .qx-image-slot--portrait .qx-image-slot__labels { padding: 0.75rem 0.85rem; } .qx-image-slot--landscape .qx-image-slot__labels { background: linear-gradient(180deg, rgba(8, 10, 28, 0.72) 0%, rgba(8, 10, 28, 0.35) 70%, transparent 100%); padding-bottom: 2.5rem; } .qx-image-slot--landscape .qx-image-slot__proposal { color: #fff; background: rgba(8, 10, 28, 0.78); padding: 0.55rem 0.75rem; border-radius: 6px; max-width: 42rem; } .qx-image-slot__role { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background-color: rgba(20, 23, 116, 0.92); padding: 0.35rem 0.65rem; border-radius: 4px; line-height: 1.3; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); } .qx-image-slot__proposal { margin: 0; font-size: 0.9rem; line-height: 1.55; max-width: min(42rem, 100%); color: var(--tp-heading-primary, #03041C); background-color: rgba(255, 255, 255, 0.94); padding: 0.55rem 0.75rem; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); } .qx-image-slot__caption { margin-top: 0.65rem; font-size: 0.82rem; line-height: 1.5; color: var(--tp-text-body, #62637D); } .qx-image-slot--pending .qx-image-slot__caption { background-color: rgba(237, 245, 250, 0.96); padding: 0.55rem 0.75rem; border-radius: 6px; border: 1px solid var(--tp-border-1, #EDF5FA); } .qx-image-slot__caption-label { font-weight: 600; color: var(--tp-theme-1, #141774); background-color: rgba(20, 23, 116, 0.08); padding: 0.15rem 0.4rem; border-radius: 3px; } .qx-image-slot--filled .qx-image-slot__caption { font-size: 0.78rem; background: transparent; border: 0; padding: 0; } .qx-image-slot--filled .qx-image-slot__caption-label { display: none; } @media (max-width: 767px) { .qx-image-slot--pending .qx-image-slot__frame { min-height: 220px; } .qx-image-slot--hero.qx-image-slot--pending .qx-image-slot__frame { min-height: 280px; } .qx-image-slot--landscape.qx-image-slot--pending .qx-image-slot__frame, .qx-image-slot--phone.qx-image-slot--pending .qx-image-slot__frame { min-height: 0 !important; } .qx-image-slot--phone, .qx-image-slot--portrait { max-width: 200px; } .qx-image-slot--pending .qx-image-slot__empty, .qx-image-slot--pending .qx-image-slot__labels { padding: 0.75rem 1rem; } .qx-image-slot__proposal { font-size: 0.85rem; } .qx-layout__phone-row > .qx-image-slot, .qx-layout__grid--phones > .qx-image-slot { flex: 0 1 160px; max-width: 180px; } } /* Blueprint LAYOUT → functioning responsive flex/grid */ .qx-layout { position: relative; } .qx-layout-pill { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.65rem; margin: 0 0 1rem; max-width: 100%; padding: 0.35rem 0.75rem; border-radius: 999px; background: rgba(20, 23, 116, 0.92); color: #fff; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.35; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); z-index: 3; } .qx-layout-pill__key { opacity: 0.75; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.65rem; } .qx-layout-pill__val { font-weight: 700; } /* Horizontal row — text + media side by side (saves vertical space) */ .qx-layout__row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; width: 100%; } .qx-layout__row--split { flex-wrap: nowrap; } .qx-layout__col { flex: 1 1 0; min-width: 0; } .qx-layout__col--text { flex: 1 1 48%; } .qx-layout__col--media { flex: 1 1 48%; } .qx-layout__col--media .qx-image-slot { margin-bottom: 0; } .qx-layout__media { width: 100%; } /* Multi-image packs — CSS grid (side-by-side, not stacked) */ .qx-layout__grid { display: grid; gap: 1rem; width: 100%; align-items: stretch; } .qx-layout__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qx-layout__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .qx-layout__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .qx-layout__grid .qx-image-slot { margin: 0; height: 100%; display: flex; flex-direction: column; } .qx-layout__grid .qx-image-slot__frame { flex: 1 1 auto; min-height: 160px; } .qx-layout__grid .qx-image-slot--hero .qx-image-slot__frame, .qx-layout__grid .qx-image-slot--pending .qx-image-slot__frame { min-height: 160px; } .qx-layout__grid .qx-image-slot__proposal { font-size: 0.78rem; line-height: 1.4; max-height: 4.5em; overflow: hidden; } .qx-layout__grid .qx-image-slot__caption { font-size: 0.72rem; margin-top: 0.4rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Horizontal rail (swipeable card / image row) */ .qx-layout__grid.qx-layout__rail, .qx-layout-rail { display: flex; flex-wrap: nowrap; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem; } .qx-layout__grid.qx-layout__rail > .qx-image-slot, .qx-layout-rail > [class*="col-"], .qx-layout-rail__item { flex: 0 0 min(280px, 78vw); max-width: min(280px, 78vw); scroll-snap-align: start; } .qx-layout__cards-wrap .row { display: flex; flex-wrap: wrap; } /* Keep multi-col grids above phone; stack only below Bootstrap sm (576) */ @media (min-width: 576px) and (max-width: 900px) { .qx-layout__row--split { flex-wrap: nowrap; } .qx-layout__col--text, .qx-layout__col--media { flex: 1 1 48%; } .qx-layout__grid--3, .qx-layout__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .qx-layout__row--split { flex-wrap: wrap; } .qx-layout__col--text, .qx-layout__col--media { flex: 1 1 100%; } .qx-layout__grid--2, .qx-layout__grid--3, .qx-layout__grid--4 { grid-template-columns: 1fr; } .qx-layout-pill { border-radius: 8px; } } /* Pending image slots inside split media column */ .qx-layout__col--media .qx-image-slot--pending .qx-image-slot__frame { min-height: 260px; } .qx-layout__col--media .qx-image-slot--hero.qx-image-slot--pending .qx-image-slot__frame { min-height: 300px; } /* ============================================================ Homepage layout modernisation (page 7448 / home-story only) Product/support rhythm — scoped; does not restyle other pages. ============================================================ */ :root { --pm-surface: #f8fafc; --pm-border: #e2e8f0; --pm-border-lt: #f1f5f9; --pm-radius-sm: 6px; --pm-radius-md: 10px; --pm-radius-lg: 14px; --pm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04); } /* Prefer body.home / page-id when WP body classes present; also pmb pack wrapper */ body.home .tp-paramour-banner.tp-hero__bg, body.page-id-7448 .tp-paramour-banner.tp-hero__bg, .pmb-preview-page[data-quitox-rhythm="home-story"] .tp-paramour-banner.tp-hero__bg { padding-top: 39px !important; padding-bottom: 42px !important; min-height: unset !important; } body.home .tp-paramour-banner .tp-hero__content, body.page-id-7448 .tp-paramour-banner .tp-hero__content, .pmb-preview-page[data-quitox-rhythm="home-story"] .tp-paramour-banner .tp-hero__content { padding-bottom: 0 !important; } body.home #what-paramour-is, body.home #booking-flow, body.home #why-this-matters, body.home #ecosystem, body.home #trust, body.home #platform-identity, body.home #autonomy-trust, body.home #service-worlds, body.home #support-gateway, body.home #faq, body.page-id-7448 #what-paramour-is, body.page-id-7448 #booking-flow, body.page-id-7448 #why-this-matters, body.page-id-7448 #ecosystem, body.page-id-7448 #trust, body.page-id-7448 #platform-identity, body.page-id-7448 #autonomy-trust, body.page-id-7448 #service-worlds, body.page-id-7448 #support-gateway, body.page-id-7448 #faq, .pmb-preview-page[data-quitox-rhythm="home-story"] #what-paramour-is, .pmb-preview-page[data-quitox-rhythm="home-story"] #booking-flow, .pmb-preview-page[data-quitox-rhythm="home-story"] #why-this-matters, .pmb-preview-page[data-quitox-rhythm="home-story"] #ecosystem, .pmb-preview-page[data-quitox-rhythm="home-story"] #trust, .pmb-preview-page[data-quitox-rhythm="home-story"] #platform-identity, .pmb-preview-page[data-quitox-rhythm="home-story"] #autonomy-trust, .pmb-preview-page[data-quitox-rhythm="home-story"] #service-worlds, .pmb-preview-page[data-quitox-rhythm="home-story"] #support-gateway, .pmb-preview-page[data-quitox-rhythm="home-story"] #faq { padding-top: 72px !important; padding-bottom: 72px !important; } body.home #ecosystem.grey-bg, body.home #service-worlds.grey-bg, body.home #faq.grey-bg, body.page-id-7448 #ecosystem.grey-bg, body.page-id-7448 #service-worlds.grey-bg, body.page-id-7448 #faq.grey-bg, .pmb-preview-page[data-quitox-rhythm="home-story"] #ecosystem.grey-bg, .pmb-preview-page[data-quitox-rhythm="home-story"] #service-worlds.grey-bg, .pmb-preview-page[data-quitox-rhythm="home-story"] #faq.grey-bg { background: var(--pm-surface) !important; } /* Flat software-style feature cards (homepage feature grids only) */ body.home .tp-feature__item, body.page-id-7448 .tp-feature__item, .pmb-preview-page[data-quitox-rhythm="home-story"] .tp-feature__item { display: flex; flex-direction: column; padding: 24px !important; border: 1px solid var(--pm-border) !important; border-image: none !important; background: #fff !important; background-image: none !important; border-radius: var(--pm-radius-md) !important; box-shadow: none !important; transition: box-shadow 0.2s ease, border-color 0.2s ease; } body.home .tp-feature__item:hover, body.page-id-7448 .tp-feature__item:hover, .pmb-preview-page[data-quitox-rhythm="home-story"] .tp-feature__item:hover { box-shadow: var(--pm-shadow-md) !important; border-color: #cbd5e1 !important; transform: none !important; } body.home .tp-feature__content, body.page-id-7448 .tp-feature__content, .pmb-preview-page[data-quitox-rhythm="home-story"] .tp-feature__content { flex: 1; display: flex; flex-direction: column; } body.home .tp-feature__link, body.page-id-7448 .tp-feature__link, .pmb-preview-page[data-quitox-rhythm="home-story"] .tp-feature__link { margin-top: auto !important; padding-top: 14px !important; border-top: 1px solid var(--pm-border-lt); } /* Homepage section eyebrow pills — hide (redundant labels like “Platform definition”) Only display:none — do not leave badge (inline-flex) props that confuse DevTools/cache. */ body.home .tp-section-subtitle, body.page-id-7448 .tp-section-subtitle, .pmb-preview-page[data-quitox-rhythm="home-story"] .tp-section-subtitle, .pmb-preview-page[data-quitox-pack] .tp-section-subtitle { display: none !important; background: none !important; border: 0 !important; padding: 0 !important; } /* Why panels — clearer problem / resolve contrast */ body.home .tp-why-panel, body.page-id-7448 .tp-why-panel, .pmb-preview-page[data-quitox-rhythm="home-story"] .tp-why-panel { padding: 28px !important; border: 1px solid var(--pm-border) !important; border-radius: var(--pm-radius-md) !important; box-shadow: none !important; } body.home .tp-why-panel--friction, body.page-id-7448 .tp-why-panel--friction, .pmb-preview-page[data-quitox-rhythm="home-story"] .tp-why-panel--friction { background: #fff5f5 !important; border-color: #fed7d7 !important; } body.home .tp-why-panel--resolve, body.page-id-7448 .tp-why-panel--resolve, .pmb-preview-page[data-quitox-rhythm="home-story"] .tp-why-panel--resolve { background: rgba(1, 126, 250, 0.04) !important; border-color: rgba(1, 126, 250, 0.2) !important; } /* FAQ — one bordered list, divider rows */ body.home .tp-custom-accordio-3 .accordion, body.page-id-7448 .tp-custom-accordio-3 .accordion, .pmb-preview-page[data-quitox-rhythm="home-story"] .tp-custom-accordio-3 .accordion { border: 1px solid var(--pm-border); border-radius: var(--pm-radius-md); overflow: hidden; background: #fff; } body.home .tp-faq__area .accordion-items, body.page-id-7448 .tp-faq__area .accordion-items, .pmb-preview-page[data-quitox-rhythm="home-story"] .tp-faq__area .accordion-items { border: 0 !important; border-bottom: 1px solid var(--pm-border-lt) !important; border-radius: 0 !important; margin-bottom: 0 !important; } body.home .tp-faq__area .accordion-items:last-child, body.page-id-7448 .tp-faq__area .accordion-items:last-child, .pmb-preview-page[data-quitox-rhythm="home-story"] .tp-faq__area .accordion-items:last-child { border-bottom: 0 !important; } /* Buttons — slightly flatter, preserve dark CTA contrast */ body.home .tp-btn-blue, body.home .tp-btn-blue-square, body.home .tp-btn-border, body.home .tp-btn-sky, body.page-id-7448 .tp-btn-blue, body.page-id-7448 .tp-btn-blue-square, body.page-id-7448 .tp-btn-border, body.page-id-7448 .tp-btn-sky, .pmb-preview-page[data-quitox-rhythm="home-story"] .tp-btn-blue, .pmb-preview-page[data-quitox-rhythm="home-story"] .tp-btn-blue-square, .pmb-preview-page[data-quitox-rhythm="home-story"] .tp-btn-border, .pmb-preview-page[data-quitox-rhythm="home-story"] .tp-btn-sky { border-radius: var(--pm-radius-sm) !important; } body.home .tp-btn-border:not(.tp-cta-on-dark), body.page-id-7448 .tp-btn-border:not(.tp-cta-on-dark), .pmb-preview-page[data-quitox-rhythm="home-story"] .tp-btn-border:not(.tp-cta-on-dark) { border-color: var(--pm-border) !important; } body.home .tp-cta__item, body.page-id-7448 .tp-cta__item, .pmb-preview-page[data-quitox-rhythm="home-story"] .tp-cta__item { padding: 52px 40px !important; } body.home .tp-cta__wrapper-2, body.page-id-7448 .tp-cta__wrapper-2, .pmb-preview-page[data-quitox-rhythm="home-story"] .tp-cta__wrapper-2 { border-radius: var(--pm-radius-lg) !important; } @media (max-width: 767px) { body.home .tp-paramour-banner.tp-hero__bg, body.page-id-7448 .tp-paramour-banner.tp-hero__bg, .pmb-preview-page[data-quitox-rhythm="home-story"] .tp-paramour-banner.tp-hero__bg { padding-top: 39px !important; padding-bottom: 42px !important; } body.home .tp-feature__item, body.page-id-7448 .tp-feature__item, .pmb-preview-page[data-quitox-rhythm="home-story"] .tp-feature__item { padding: 18px !important; } body.home .tp-why-panel, body.page-id-7448 .tp-why-panel, .pmb-preview-page[data-quitox-rhythm="home-story"] .tp-why-panel { padding: 20px !important; } body.home .tp-cta__item, body.page-id-7448 .tp-cta__item, .pmb-preview-page[data-quitox-rhythm="home-story"] .tp-cta__item { padding: 36px 20px !important; } body.home .tp-hero-cta-row, body.page-id-7448 .tp-hero-cta-row, .pmb-preview-page[data-quitox-rhythm="home-story"] .tp-hero-cta-row { flex-direction: column !important; } body.home .tp-hero-cta-row a, body.page-id-7448 .tp-hero-cta-row a, .pmb-preview-page[data-quitox-rhythm="home-story"] .tp-hero-cta-row a { width: 100% !important; justify-content: center !important; } } /* ============================================================================= PARAMOUR SHARED SCREENVIEW BREAKPOINTS (aligned to paramour.me / Listeo) Source of truth: paramour.me themes/listeo/css/bootstrap-grid.css .container ≥768px → 750px ≥992px → 970px ≥1240px → 1090px ≥1367px → 1210px ≥1700px → 1360px Column grid on me: 768 / 992 / 1200 (no Bootstrap-5 576 or 1400 steps). This child layer remaps Quitox/Bootstrap-5 containers + tokens globally. ============================================================================= */ :root { --pm-bp-mobile-max: 575px; /* Bootstrap xs — phones only; not tablets */ --pm-bp-phone: 576px; /* Bootstrap sm — desktop rows/grids from here up */ --pm-bp-sm: 768px; /* Listeo container step (unchanged) */ --pm-bp-md: 992px; /* Listeo / Bootstrap container step — not chrome */ --pm-bp-chrome-mobile: 900px; /* paramour.me header: tablets stay desktop */ --pm-bp-lg-grid: 1200px; /* Listeo col-lg */ --pm-bp-lg: 1240px; /* Listeo container step */ --pm-bp-xl: 1367px; --pm-bp-xxl: 1700px; --pm-container-sm: 750px; --pm-container-md: 970px; --pm-container-lg: 1090px; --pm-container-xl: 1210px; --pm-container-xxl: 1360px; } /* Neutralize Quitox/Bootstrap-5 early container (576) — stay fluid until 768 like me */ @media (min-width: 576px) and (max-width: 767.98px) { .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: 100% !important; width: 100% !important; } } /* Match paramour.me Listeo container ladder Use width:100% + max-width only — fixed width:!important overflows parents and pushes choose-split / booking-flow outside the content box. */ @media (min-width: 768px) { .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { width: 100% !important; max-width: var(--pm-container-sm) !important; margin-left: auto !important; margin-right: auto !important; } } @media (min-width: 992px) { .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { width: 100% !important; max-width: var(--pm-container-md) !important; } } @media (min-width: 1240px) { .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { width: 100% !important; max-width: var(--pm-container-lg) !important; } } @media (min-width: 1367px) { .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { width: 100% !important; max-width: var(--pm-container-xl) !important; } } @media (min-width: 1700px) { .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { width: 100% !important; max-width: var(--pm-container-xxl) !important; } } /* Remap Bootstrap-5 xxl (1400) onto me ladder: 1400–1699 stays at xl width; 1700+ uses xxl above */ @media (min-width: 1400px) and (max-width: 1699.98px) { .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { width: 100% !important; max-width: var(--pm-container-xl) !important; } } /* ============================================================================= CHROME BREAKPOINT: 991/992 (Bootstrap lg) → 900 (paramour.me policy) Keep desktop header / nav on tablets; mobile chrome only ≤900px. meanmenu is patched in paramour-chrome-breakpoint.js; this covers d-lg-* markup. ============================================================================= */ @media (min-width: 901px) { /* Desktop nav columns Quitox hides with d-none d-lg-block below 992 */ #header-sticky .d-none.d-lg-block, #header-sticky .col-xl-2.d-none.d-lg-block, #header-sticky [class*="col-"].d-none.d-lg-block { display: block !important; } /* Mobile-only header controls (hamburger logo, mobile CTA) — Bootstrap d-lg-none */ #header-sticky .paramour-mobile-header-cta.d-lg-none, #header-sticky .paramour-mobile-menu-logo.d-lg-none, #header-sticky a.tp-header__bars.d-lg-none, #header-sticky .tp-header__bars.paramour-mobile-menu-logo.d-lg-none, #header-sticky .paramour-pre-app-header__mobile-cta.d-lg-none { display: none !important; } /* Desktop CTA stays inline with other top-level menu items */ #header-sticky .tp-header__main-menu > nav > ul { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; } #header-sticky .tp-header__main-menu > nav > ul > li.paramour-menu-cta-item { display: inline-block !important; vertical-align: middle !important; align-self: center !important; float: none !important; } /* Undo mobile stack layout if any parent rule leaked into 901–991 */ #header-sticky .tp-header__right-two { flex-direction: row !important; flex-flow: row nowrap !important; align-items: center !important; width: auto !important; } #header-sticky .tp-header__right-two .paramour-header-utilities, #header-sticky .tp-header__right-two .paramour-pre-app-header__utilities { flex-direction: row !important; flex-flow: row nowrap !important; align-items: center !important; } } /* ============================================================================= BOOTSTRAP LG/MD GRID → PHONE-ONLY STACK (<576) Standard: Bootstrap sm = 576px — portrait phones only below this. Tablets + landscape phones keep desktop rows/grids. Quitox markup often uses col-lg-* without col-md-* (lg starts at 992). ============================================================================= */ /* Keep .row horizontal from sm up — columns wrap by width, not flex-direction */ @media (min-width: 576px) { .row, .elementor-container > .elementor-row, .elementor-widget-html .row, .elementor-widget-shortcode .row, .tp-el-section .row, .pmb-preview-page .row { flex-direction: row !important; } } @media (min-width: 576px) and (max-width: 991.98px) { /* flex-lg-* only kicks in at 992 by default — mirror onto tablet */ .flex-lg-row { flex-direction: row !important; } .flex-lg-row-reverse { flex-direction: row-reverse !important; } .flex-lg-column { flex-direction: column !important; } .flex-lg-column-reverse { flex-direction: column-reverse !important; } .flex-lg-nowrap { flex-wrap: nowrap !important; } .flex-lg-wrap { flex-wrap: wrap !important; } .flex-lg-wrap-reverse { flex-wrap: wrap-reverse !important; } .col-lg { flex: 1 0 0%; } .row-cols-lg-auto > * { flex: 0 0 auto; width: auto; } .row-cols-lg-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-lg-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-lg-3 > * { flex: 0 0 auto; width: 33.3333333333%; } .row-cols-lg-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-lg-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-lg-6 > * { flex: 0 0 auto; width: 16.6666666667%; } .col-lg-auto { flex: 0 0 auto; width: auto; } .col-lg-1 { flex: 0 0 auto; width: 8.33333333%; max-width: 8.33333333%; } .col-lg-2 { flex: 0 0 auto; width: 16.66666667%; max-width: 16.66666667%; } .col-lg-3 { flex: 0 0 auto; width: 25%; max-width: 25%; } .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; max-width: 33.33333333%; } .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; max-width: 41.66666667%; } .col-lg-6 { flex: 0 0 auto; width: 50%; max-width: 50%; } .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; max-width: 58.33333333%; } .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; max-width: 66.66666667%; } .col-lg-9 { flex: 0 0 auto; width: 75%; max-width: 75%; } .col-lg-10 { flex: 0 0 auto; width: 83.33333333%; max-width: 83.33333333%; } .col-lg-11 { flex: 0 0 auto; width: 91.66666667%; max-width: 91.66666667%; } .col-lg-12 { flex: 0 0 auto; width: 100%; max-width: 100%; } .offset-lg-0 { margin-left: 0; } .offset-lg-1 { margin-left: 8.33333333%; } .offset-lg-2 { margin-left: 16.66666667%; } .offset-lg-3 { margin-left: 25%; } .offset-lg-4 { margin-left: 33.33333333%; } .offset-lg-5 { margin-left: 41.66666667%; } .offset-lg-6 { margin-left: 50%; } .offset-lg-7 { margin-left: 58.33333333%; } .offset-lg-8 { margin-left: 66.66666667%; } .offset-lg-9 { margin-left: 75%; } .offset-lg-10 { margin-left: 83.33333333%; } .offset-lg-11 { margin-left: 91.66666667%; } .order-lg-first { order: -1; } .order-lg-last { order: 6; } .order-lg-0 { order: 0; } .order-lg-1 { order: 1; } .order-lg-2 { order: 2; } .order-lg-3 { order: 3; } .order-lg-4 { order: 4; } .order-lg-5 { order: 5; } /* Custom qx layouts: keep split/grid on tablet */ .qx-layout__row--split { flex-wrap: nowrap; } .qx-layout__col--text, .qx-layout__col--media { flex: 1 1 48%; } .qx-layout__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qx-layout__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .qx-layout__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Phone only (<576): single-column qx layouts */ @media (max-width: 575.98px) { .qx-layout__row--split { flex-wrap: wrap; } .qx-layout__col--text, .qx-layout__col--media { flex: 1 1 100%; } .qx-layout__grid--2, .qx-layout__grid--3, .qx-layout__grid--4 { grid-template-columns: 1fr; } } /* Bootstrap md starts at 768 — extend col-md-* into 576–767 (large phones) */ @media (min-width: 576px) and (max-width: 767.98px) { .flex-md-row { flex-direction: row !important; } .flex-md-row-reverse { flex-direction: row-reverse !important; } .col-md { flex: 1 0 0%; } .col-md-auto { flex: 0 0 auto; width: auto; } .col-md-1 { flex: 0 0 auto; width: 8.33333333%; max-width: 8.33333333%; } .col-md-2 { flex: 0 0 auto; width: 16.66666667%; max-width: 16.66666667%; } .col-md-3 { flex: 0 0 auto; width: 25%; max-width: 25%; } .col-md-4 { flex: 0 0 auto; width: 33.33333333%; max-width: 33.33333333%; } .col-md-5 { flex: 0 0 auto; width: 41.66666667%; max-width: 41.66666667%; } .col-md-6 { flex: 0 0 auto; width: 50%; max-width: 50%; } .col-md-7 { flex: 0 0 auto; width: 58.33333333%; max-width: 58.33333333%; } .col-md-8 { flex: 0 0 auto; width: 66.66666667%; max-width: 66.66666667%; } .col-md-9 { flex: 0 0 auto; width: 75%; max-width: 75%; } .col-md-10 { flex: 0 0 auto; width: 83.33333333%; max-width: 83.33333333%; } .col-md-11 { flex: 0 0 auto; width: 91.66666667%; max-width: 91.66666667%; } .col-md-12 { flex: 0 0 auto; width: 100%; max-width: 100%; } .order-md-1 { order: 1; } .order-md-2 { order: 2; } } /* ============================================================================= PHONE DENSITY (<576) — save vertical space Lists tighter; hide decorative arrow CTAs in linked tiles (tp-feature__link). Section text CTAs (.tp-el-box-btn outside .tp-feature__link) stay visible. Body

: hide ~90% on phone; keep openers / marked keepers / structural copy. ============================================================================= */ @media (max-width: 575.98px) { /* --- Body paragraphs: hide by default; keep only selected --- Opt-in: class="pm-keep-phone" Auto-keep: hero kicker/lead, CTA lead, first p after section headings, accordion answers, image-slot/figcaption, CTA-wrapping p, KE answer copy. */ .pmb-preview-page[data-quitox-pack] p { display: none !important; } .pmb-preview-page[data-quitox-pack] p.pm-keep-phone, .pmb-preview-page[data-quitox-pack] p.tp-hero-lead, .pmb-preview-page[data-quitox-pack] p.tp-hero-kicker, .pmb-preview-page[data-quitox-pack] p.tp-cta-lead, .pmb-preview-page[data-quitox-pack] p.tp-why-panel__lead, .pmb-preview-page[data-quitox-pack] h1 + p, .pmb-preview-page[data-quitox-pack] h2 + p, .pmb-preview-page[data-quitox-pack] h3 + p, .pmb-preview-page[data-quitox-pack] .tp-section-title + p, .pmb-preview-page[data-quitox-pack] .tp-section-title-sm + p, .pmb-preview-page[data-quitox-pack] .tp-hero__title-lg + p, .pmb-preview-page[data-quitox-pack] .qx-image-slot p, .pmb-preview-page[data-quitox-pack] .qx-image-slot__proposal, .pmb-preview-page[data-quitox-pack] figcaption p, .pmb-preview-page[data-quitox-pack] .accordion-body p, .pmb-preview-page[data-quitox-pack] .accordion-body > p, .pmb-preview-page[data-quitox-pack] .ke__answer p, .pmb-preview-page[data-quitox-pack] .ke-page p, .pmb-preview-page[data-quitox-pack] p:has(> a[class*="tp-btn"]), .pmb-preview-page[data-quitox-pack] p:has(> .tp-btn-sky), .pmb-preview-page[data-quitox-pack] p:has(> .tp-btn-blue), .pmb-preview-page[data-quitox-pack] p:has(> .tp-btn-border) { display: block !important; } /* --- Lists: compact line-height + item padding --- */ .tp-check-list li, .tp-link-list li, .pmb-preview-page[data-quitox-pack] .tp-check-list li, .pmb-preview-page[data-quitox-pack] .tp-link-list li { padding: 3px 0 3px 24px !important; line-height: 1.35 !important; margin: 0 !important; } .tp-check-list li::before, .tp-link-list li::before, .pmb-preview-page[data-quitox-pack] .tp-check-list li::before, .pmb-preview-page[data-quitox-pack] .tp-link-list li::before { top: 0.55em !important; width: 8px !important; height: 8px !important; } .tp-process-list li, .pmb-preview-page[data-quitox-pack] .tp-process-list li { padding: 8px 0 8px 40px !important; line-height: 1.35 !important; } .tp-process-list li::before, .pmb-preview-page[data-quitox-pack] .tp-process-list li::before { width: 26px !important; height: 26px !important; line-height: 26px !important; font-size: 12px !important; top: 6px !important; } ul:not([class]) li, .elementor-widget-text-editor ul li, .elementor-widget-html ul:not(.tp-check-list):not(.tp-link-list):not(.tp-process-list) li { line-height: 1.35; margin-bottom: 0.15em; } /* --- Linked tiles: hide animated arrow CTA strip (redundant with title/card link) --- */ .tp-feature__link { display: none !important; } /* Section / body CTAs: keep label, drop trailing arrow SVG on phone */ a.tp-el-box-btn svg, .tp-btn-border svg, .tp-btn-sky svg, .tp-btn-blue-square svg { display: none !important; } /* --- Feature / step cards: less padding & min-height --- */ .tp-feature__item, .tp-step-card { min-height: 0 !important; padding: 18px 16px !important; margin-bottom: 12px !important; } .tp-feature__item.p-40 { padding: 18px 16px !important; } .tp-feature__icon { margin-bottom: 12px !important; } .tp-feature__icon img { width: 56px !important; height: 56px !important; } .tp-feature__title-sm { margin-bottom: 8px !important; font-size: 18px !important; line-height: 1.25 !important; } .tp-el-box-desc, .tp-feature__content p, .tp-feature__item > p { line-height: 1.4 !important; margin-bottom: 0 !important; } .tp-step-num { margin-bottom: 8px !important; } /* --- Section vertical rhythm --- */ .tp-feature__area, .tp-about__area, .tp-service__area, .tp-faq__area, .tp-cta__area, .tp-el-section { padding-top: 48px !important; padding-bottom: 40px !important; } .tp-feature__area.pt-90, .tp-feature__area.pt-100, .tp-feature__area.pt-110, .tp-about__area.pt-90, .tp-about__area.pt-100, .tp-about__area.pt-110, .tp-el-section.pt-90, .tp-el-section.pt-100, .tp-el-section.pt-110 { padding-top: 48px !important; } .tp-feature__area.pb-70, .tp-feature__area.pb-80, .tp-feature__area.pb-90, .tp-el-section.pb-70, .tp-el-section.pb-80, .tp-el-section.pb-90 { padding-bottom: 40px !important; } .row.mb-40, .row.mb-60, .row.mb-70 { margin-bottom: 1.25rem !important; } .tp-section-title, .tp-section-title-sm { margin-bottom: 0.65rem !important; line-height: 1.2 !important; } .tp-mini-pill, .pmb-preview-page[data-quitox-pack] .tp-mini-pill { padding: 10px 12px !important; margin-bottom: 10px !important; } .tp-related-links, .pmb-preview-page[data-quitox-pack] .tp-related-links { padding: 16px 18px !important; } /* Accordion density */ .accordion-buttons, .tp-custom-accordio-3 .accordion-buttons { padding: 14px 12px !important; font-size: 16px !important; line-height: 1.3 !important; } .accordion-body { padding: 0 12px 14px !important; line-height: 1.4 !important; } } /* ============================================================================= CHOOSE-SPLIT / booking-flow — keep 50/50 inside the container Prevent flex/column min-content from pushing the left column outside. ============================================================================= */ #booking-flow, .tp-choose__area[data-qx-layout="split_50"], .tp-choose__area { width: 100%; max-width: 100%; /* do NOT clip — outside list markers / wow transforms need room */ overflow-x: visible; } #booking-flow > .container, .tp-choose__area > .container { width: 100% !important; box-sizing: border-box !important; margin-left: auto !important; margin-right: auto !important; padding-left: 15px !important; padding-right: 15px !important; } #booking-flow .row, .tp-choose__area .row { max-width: none; } #booking-flow .row > [class*="col-"], .tp-choose__area .row > [class*="col-"] { min-width: 0; } #booking-flow .tp-choose__content, #booking-flow .tp-choose__thumb-box, .tp-choose__area .tp-choose__content, .tp-choose__area .tp-choose__thumb-box { max-width: 100%; min-width: 0; overflow-wrap: break-word; } #booking-flow .qx-image-slot, .tp-choose__area .qx-image-slot { max-width: min(260px, 100%); } /* Flex columns: allow shrink so 50/50 splits never blow past .container */ .row > [class*="col-"] { min-width: 0; } /* Full-bleed marketing pages: keep Bootstrap gutters (row negative margin needs them) */ .tp-full-bleed-area .container, .pmb-preview-page[data-quitox-pack] .container, .pmb-preview-page .container { padding-left: 15px !important; padding-right: 15px !important; box-sizing: border-box !important; } /* Choose lists: inside markers — default outside bullets hang past the gutter and get clipped / sit off-screen on mobile */ .tp-choose__list { list-style: none; margin: 0.75rem 0 1rem; padding: 0; } .tp-choose__list li { position: relative; margin: 0; padding: 0.35rem 0 0.35rem 1.15rem; line-height: 1.4; } .tp-choose__list li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 7px; height: 7px; border-radius: 50%; background: var(--tp-theme-2, #017EFA); } /* Phone: force full-width columns (never keep tablet 50% splits) */ @media (max-width: 575.98px) { .row > [class*="col-lg"], .row > [class*="col-xl"], .row > [class*="col-md"], .row > [class*="col-sm"], .row > [class*="col-"] { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; } .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { padding-left: 1rem !important; padding-right: 1rem !important; } .tp-choose__content .tp-btn-sky, .tp-choose__content .tp-btn-blue, .tp-choose__content a.tp-btn-sky, .tp-choose__content a.tp-btn-blue { display: inline-flex; max-width: 100%; margin-left: 0; } /* --- Pack pages: stacked-column formatting --- Split rows (col-xl/lg only) + align-items-center leave odd mid-align / off-center media once forced to one column. */ .pmb-preview-page[data-quitox-pack] .row.align-items-center, .pmb-preview-page[data-quitox-pack] .row.align-items-stretch { align-items: flex-start !important; } .pmb-preview-page[data-quitox-pack] .tp-choose__content, .pmb-preview-page[data-quitox-pack] .tp-choose__thumb-box { width: 100% !important; max-width: 100% !important; float: none !important; text-align: left; } .pmb-preview-page[data-quitox-pack] .tp-choose__thumb-box { display: flex !important; justify-content: center !important; margin-top: 1.25rem !important; margin-left: 0 !important; margin-right: 0 !important; } .pmb-preview-page[data-quitox-pack] .tp-choose__thumb-box .qx-image-slot, .pmb-preview-page[data-quitox-pack] #booking-flow .qx-image-slot, .pmb-preview-page[data-quitox-pack] .tp-choose__area .qx-image-slot { margin-left: auto !important; margin-right: auto !important; max-width: min(280px, 100%) !important; } .pmb-preview-page[data-quitox-pack] .tp-feature__item.text-center, .pmb-preview-page[data-quitox-pack] .tp-feature__item { text-align: left !important; } .pmb-preview-page[data-quitox-pack] .tp-why-panel { width: 100% !important; box-sizing: border-box !important; } .pmb-preview-page[data-quitox-pack] .tp-why-payoff { flex-wrap: wrap !important; justify-content: flex-start !important; text-align: left !important; gap: 0.5rem 1rem !important; } /* Home section padding: prefer phone density over 72px home-story bands */ body.home .tp-el-section, body.page-id-7448 .tp-el-section, .pmb-preview-page[data-quitox-rhythm="home-story"] .tp-el-section { padding-top: 48px !important; padding-bottom: 40px !important; } body.home .tp-el-section .row.mb-40, body.home .tp-el-section .row.mb-50, body.home .tp-el-section .row.mb-60, body.page-id-7448 .tp-el-section .row.mb-40, body.page-id-7448 .tp-el-section .row.mb-50, body.page-id-7448 .tp-el-section .row.mb-60, .pmb-preview-page[data-quitox-pack] .row.mb-40, .pmb-preview-page[data-quitox-pack] .row.mb-50, .pmb-preview-page[data-quitox-pack] .row.mb-60 { margin-bottom: 1rem !important; } } /* ============================================================================= STICKY HEADER — cascade tail (class-gated only; never fixed without .header-sticky) ============================================================================= */ #header-sticky:not(.header-sticky) { position: absolute !important; background-color: transparent !important; box-shadow: none !important; } #header-sticky.header-sticky { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 999 !important; background-color: #fff !important; box-shadow: 0px 2px 55px rgba(168, 182, 218, 0.32) !important; } /* ============================================================================= OFFCANVAS — restore original Quitox palette & white text inside the flyout ============================================================================= */ .tp-offcanvas-area { --tp-theme-1: #141774; --tp-theme-2: #017EFA; --tp-theme-3: #0B4DF5; } .tp-offcanvas-area .mean-container .mean-nav ul li a { color: #fff !important; -webkit-text-fill-color: #fff !important; } .tp-offcanvas-area .mean-container .mean-nav ul li a:hover { color: var(--tp-theme-3) !important; -webkit-text-fill-color: var(--tp-theme-3) !important; } .tp-offcanvas-area .mean-container .mean-nav ul li a.mean-expand:hover { color: var(--tp-theme-2) !important; -webkit-text-fill-color: var(--tp-theme-2) !important; } .tp-offcanvas-area .tpoffcanvas__text p, .tp-offcanvas-area .tpoffcanvas__info .offcanva-title { color: #fff !important; -webkit-text-fill-color: #fff !important; } .tp-offcanvas-area .tpoffcanvas__text { display: block !important; border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: 20px; } .tp-offcanvas-area .tpoffcanvas__info-address a, .tp-offcanvas-area .tpoffcanvas__info-address .paramour-protected-address { color: var(--tp-common-white-2, #BDBEEC) !important; -webkit-text-fill-color: var(--tp-common-white-2, #BDBEEC) !important; font-size: 18px; font-weight: 600; } .tp-offcanvas-area .tpoffcanvas__info-address a:hover { color: var(--tp-common-white-2, #BDBEEC) !important; -webkit-text-fill-color: var(--tp-common-white-2, #BDBEEC) !important; } .paramour-flyout-menu-source { display: none !important; }