/* ========================================================================== site-overrides.css Single shared stylesheet for global tweaks across ALL pages. Linked in every page's via /assets/css/site-overrides.css. Add future header / global UI fixes HERE — never hand-edit pages. ========================================================================== */ /* "Founder-Led" badge card: keep the hyphenated title on one line */ .satisfied .item-title { white-space: nowrap; } .satisfied { min-width: 240px; } /* "Discover How … Connects" nav boxes -> colored gradient cards (white text). */ .pt-connect-grid .rbt-card { border: none !important; border-radius: 16px !important; box-shadow: 0 12px 30px rgba(20, 20, 43, 0.12); } .pt-connect-grid > [class*="col-"]:nth-child(4n+1) .rbt-card { background: linear-gradient(135deg, #4d63f0, #7b5cff) !important; } .pt-connect-grid > [class*="col-"]:nth-child(4n+2) .rbt-card { background: linear-gradient(135deg, #1fb673, #36c9a3) !important; } .pt-connect-grid > [class*="col-"]:nth-child(4n+3) .rbt-card { background: linear-gradient(135deg, #ff6a3d, #ff3d77) !important; } .pt-connect-grid > [class*="col-"]:nth-child(4n+4) .rbt-card { background: linear-gradient(135deg, #7c3aed, #a855f7) !important; } .pt-connect-grid .rbt-card .rbt-card-title, .pt-connect-grid .rbt-card .rbt-card-title a, .pt-connect-grid .rbt-card .rbt-list-style-2 a { color: #fff !important; } .pt-connect-grid .rbt-card .rbt-list-style-2 a { opacity: 0.95; } .pt-connect-grid .rbt-card .rbt-list-style-2 a:hover { opacity: 1; text-decoration: underline; } /* center all text inside the gradient connect nav-boxes */ .pt-connect-grid .rbt-card-body { text-align: center; } .pt-connect-grid .rbt-card-body .rbt-list-style-2 { padding-left: 0 !important; } .pt-connect-grid .rbt-card-body .rbt-list-style-2 li { padding-left: 0 !important; text-align: center; } .pt-connect-grid .rbt-card-body .rbt-list-style-2 li::before { display: none !important; } /* links as translucent pill chips (matches the suite cards) */ .pt-connect-grid .rbt-card-body .rbt-list-style-2 { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; } .pt-connect-grid .rbt-card-body .rbt-list-style-2 li { margin: 0 !important; } .pt-connect-grid .rbt-card-body .rbt-list-style-2 li a { display: inline-block; background: rgba(255, 255, 255, 0.18); padding: 7px 16px; border-radius: 100px; font-size: 14px; transition: background 0.2s ease; } .pt-connect-grid .rbt-card-body .rbt-list-style-2 li a:hover { background: rgba(255, 255, 255, 0.32); text-decoration: none !important; } /* ===== Unify ALL feature cards: rounded-square icon + title on one row, description on the next line. Covers every structure (icon in .inner, icon as a direct child, icon + .feature-content). CSS-only via display:contents. ===== */ /* Any icon box WITH a glyph (i / img / svg, direct OR nested) -> fixed 50px rounded square so it never stretches into a wide blob. `:not(:has(.rating))` skips the star-rating containers. Global so it covers icons outside cards too. */ .icon:has(> i), .icon:has(> img), .icon:has(> svg), .icon:has(> span > i), .icon:has(> span > svg) { width: 50px !important; height: 50px !important; min-width: 50px !important; flex: 0 0 50px; border-radius: 12px !important; display: inline-flex !important; align-items: center; justify-content: center; margin: 0 !important; } /* image-based icon glyphs must fit inside the 50px box */ .icon:has(> img) img { max-width: 60%; max-height: 60%; object-fit: contain; } /* faded glyph fix also for the bg-*-opacity variants WITHOUT the word "color" */ .icon.bg-primary-opacity i { color: var(--color-primary) !important; } .icon.bg-secondary-opacity i { color: var(--color-secondary) !important; } .icon.bg-coral-opacity i { color: var(--color-coral) !important; } .icon.bg-pink-opacity i { color: var(--color-pink) !important; } .icon.bg-violet-opacity i { color: var(--color-violet) !important; } .icon.bg-warning-opacity i { color: var(--color-warning) !important; } /* icon as an inline prefix inside the card heading -> tinted rounded square */ .rbt-feature-card :is(h2,h3,h4,h5,h6) > i[class*="feather"] { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; min-width: 42px; border-radius: 10px; background: color-mix(in srgb, currentColor 15%, transparent); margin-right: 12px !important; font-size: 20px; vertical-align: middle; } /* icon nested in .inner (.inner > .icon + .content) */ .rbt-feature-card .inner:has(> .icon) { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 16px; } .rbt-feature-card .inner:has(> .icon) > .content { display: contents; } .rbt-feature-card .inner:has(> .icon) > .content > :is(h2,h3,h4,h5,h6) { margin: 0; flex: 1 1 auto; } .rbt-feature-card .inner:has(> .icon) > .content > p { flex: 0 0 100%; width: 100%; margin-top: 14px; } /* icon as a direct child of the card (override the inline flex-direction:column) */ .rbt-feature-card:has(> .icon) { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; column-gap: 16px; } .rbt-feature-card:has(> .icon) > .feature-content { display: contents; } .rbt-feature-card:has(> .icon) > :is(h2,h3,h4,h5,h6), .rbt-feature-card:has(> .icon) > .feature-content > :is(h2,h3,h4,h5,h6) { margin: 0; flex: 1 1 auto; } .rbt-feature-card:has(> .icon) > p, .rbt-feature-card:has(> .icon) > .feature-content > p { flex: 0 0 100%; width: 100%; margin-top: 14px; } /* Suite product cards (variation-01, equal-height): push the CTA button to the bottom so they align across cards, and add bullet markers to the detail list. */ /* equal-height cards so the CTA buttons align at the bottom */ .row:has(> [class*="col-"] > .rbt-card.variation-01.h-100) { align-items: stretch; } .row:has(> [class*="col-"] > .rbt-card.variation-01.h-100) > [class*="col-"] { display: flex; } .rbt-card.variation-01.h-100 { display: flex; flex-direction: column; height: 100%; } .rbt-card.variation-01.h-100 .rbt-card-body { display: flex; flex-direction: column; flex: 1 1 auto; } .rbt-card.variation-01.h-100 .rbt-card-body .rbt-btn { margin-top: auto; align-self: center; } .rbt-card.variation-01.h-100 .rbt-list-style-2 { margin-top: 6px; } .rbt-card.variation-01.h-100 .rbt-list-style-2 li { position: relative; padding-left: 30px; margin-bottom: 14px; align-items: flex-start; } .rbt-card.variation-01.h-100 .rbt-list-style-2 li::before { content: "\2713"; /* checkmark */ position: absolute; left: 0; top: 3px; width: 19px; height: 19px; border-radius: 50%; background: #1fb673; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; line-height: 1; } /* Counter stat numbers: normalize to 36px across all pages (matches pixel-ecosystem, which had this as an inline override; other pages used the larger theme default). */ .rbt-counterup .inner .content .counter, .rbt-counterup .counter, .trust-counters .counter, h3.counter, h2.counter { font-size: 36px !important; } /* keep the counter number + suffix on ONE line (was wrapping digit-by-digit in narrow boxes) */ .rbt-counterup .counter, .rbt-counterup .counter .odometer, .counter, .counter .odometer { white-space: nowrap !important; } /* force the odometer's inner digit elements to sit inline (they were stacking vertically) */ .counter .odometer, .counter .odometer-inside, .counter .odometer-digit, .counter .odometer-value, .counter .odometer-formatting-mark, .counter > span { display: inline-block !important; vertical-align: baseline; white-space: nowrap !important; } /* number + suffix sit together, centered (was display:block which spread "10" and "+" apart) */ .counter { display: inline-flex !important; align-items: baseline; justify-content: center; gap: 3px; width: auto !important; } .counter .odometer { width: auto !important; } .counter .after-icon { margin-left: 0 !important; } /* stat boxes were sliding up / disappearing on scroll — neutralise SAL on counter cards */ .rbt-counterup, [data-sal]:has(> .rbt-counterup), [data-sal]:has(.rbt-counterup) { opacity: 1 !important; transform: none !important; } /* gradient headings: prevent the text from being clipped top/bottom (background-clip:text) */ .theme-gradient { line-height: 1.25 !important; padding-bottom: 0.08em; } /* counters that supply their own suffix via .after-icon (K+, %, +, x, sec…) must NOT also get the template's auto "+" ::after — that caused "50K++", "8++", "30%+". */ .rbt-counterup .inner .content .counter:has(.after-icon)::after, .counter:has(> .after-icon)::after, .counter:has(> span:not(.odometer))::after { content: "" !important; } /* Box every counter as a white card (matches the pixel-ecosystem stat boxes). Font/size unchanged — this only adds the card background/padding/shadow. */ .rbt-counterup, .rbt-counterup-inner { background: #fff !important; border-radius: 16px !important; padding: 34px 18px !important; box-shadow: 0 10px 30px rgba(20, 20, 43, 0.07) !important; text-align: center !important; height: 100%; display: flex; flex-direction: column; justify-content: center; } .rbt-counterup .inner, .rbt-counterup .inner .content, .rbt-counterup-inner .inner, .rbt-counterup-inner .inner .content { height: auto; width: 100%; } /* counter label (subtitle) size — normalize to 14px everywhere (was only on .trust-counters) */ .rbt-counterup .subtitle, .rbt-counterup .inner .content .subtitle { font-size: 14px !important; } /* make the counter row stretch all boxes to equal height */ .row:has(> [class*="col-"] > .rbt-counterup) { align-items: stretch; } /* Prevent horizontal page scroll caused by decorative / 100vw full-bleed elements. `clip` hides the overflow without making a scroll container, so the sticky header keeps working (unlike overflow-x:hidden). */ html, body { overflow-x: clip; } /* Stat feature boxes: markup uses `.inner` directly (no `.content` child), so the theme's `.inner .content` padding never applies and text sits flush to the box edges. Add padding to `.inner` so the boxes breathe (affects only the .inner variant). */ .rbt-splash-feature-box > .inner { padding: 40px; } /* guarantee clear vertical separation between rows of stat boxes (in case the grid's row gutter is being overridden) */ .row:has(> [class*="col-"] > .rbt-splash-feature-box) { row-gap: 1.5rem; } /* "20+ Years" stat card: widen card, keep number + "Years" on one line */ .since { min-width: 320px; } .since .title-wrap { min-width: 0; flex: 1; } .since .number, .since .number .odometer { white-space: nowrap; } .since .number .pt-num-suffix { font-size: 0.4em; font-weight: 700; margin-left: 4px; letter-spacing: 0.3px; white-space: nowrap; } /* Client logo grid: exactly 5 logos per row on desktop (accounts for 16px gap) */ @media (min-width: 992px) { #brands-section .brand-list > li { flex: 0 0 calc(20% - 13px) !important; max-width: calc(20% - 13px) !important; } } /* Client logo grid: make logos noticeably bigger */ #brands-section .brand-box { height: 110px !important; padding: 12px 18px !important; } #brands-section .brand-box img { max-height: 74px !important; max-width: 100% !important; } /* text-based client logos (placeholders until real artwork) */ #brands-section .brand-box .pt-text-logo { font-weight: 800; font-size: 21px; letter-spacing: 0.5px; color: #14142b; text-align: center; line-height: 1.15; } #brands-section .brand-box .pt-text-logo.sm { font-size: 15px; } /* Top bar: keep the phone number on a single line (was wrapping at the hyphen) */ .rbt-header-top .rbt-information-list li, .rbt-header-top .rbt-information-list a { white-space: nowrap; } /* Top bar: span full width like the main header (.container-fluid) so the left edge (phone) aligns with the logo and the right edge (Book a Call) aligns with Book Demo below. Both share the same gutter, so dropping the max-width is all that's needed. */ .rbt-header-top > .container { max-width: 100%; } /* ===== TEMPORARY: disable the auto contact popup (annoying during review) ===== Delete this block to restore the popup. !important beats the JS inline display:block. */ #popupcontact { display: none !important; } /* =============================================================================== */ /* Gradient CTA blocks (.rbt-buy-now-area.bg-gradient-8): white text for readability. Covers "Automate. Predict. Scale." (#features-section), "Ready to Transform Your Enterprise?", and any other gradient CTA using this component. */ .rbt-buy-now-area.bg-gradient-8 .title, .rbt-buy-now-area.bg-gradient-8 .subtitle, .rbt-buy-now-area.bg-gradient-8 .label-text { color: #fff; } /* Section-label pills: the theme only pills .subtitle inside .section-title. Many v2 headers use a plain "col text-center" wrapper instead, so labels like "AI Engine" lost their padding/radius and rendered as a tight highlight. Give every .subtitle carrying a bg-*-opacity color class the same pill shape so all section labels look consistent. Background/text color stay from the existing bg-*-opacity classes; values mirror the theme's pill exactly. */ .subtitle[class*="-opacity"] { display: inline-block; padding: 10px 20px; border-radius: 100px; font-size: 14px; line-height: 15px; font-weight: 500; text-transform: uppercase; margin-bottom: 15px; } /* Chevron deployment timeline (.pt-ctl): an arrow band of week-range segments with icon + title + description alternating above/below each segment. */ .pt-ctl { display: flex; gap: 8px; align-items: stretch; margin: 10px 0 0; } .pt-ctl .ctl-step { flex: 1 1 0; display: flex; flex-direction: column; min-width: 0; } .pt-ctl .ctl-above, .pt-ctl .ctl-below { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 10px; position: relative; } .pt-ctl .ctl-above { justify-content: flex-end; padding-bottom: 16px; } .pt-ctl .ctl-below { justify-content: flex-start; padding-top: 16px; } /* vertical connectors from the content to the band */ .pt-ctl .ctl-above:not(.is-empty)::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 16px; background: rgba(20, 20, 43, 0.18); } .pt-ctl .ctl-below:not(.is-empty)::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 16px; background: rgba(20, 20, 43, 0.18); } .pt-ctl .ctl-icon { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 10px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); } .pt-ctl .ctl-icon i { font-size: 22px; } .pt-ctl .ctl-step h5 { margin: 0 0 6px; } .pt-ctl .ctl-step p { font-size: 14px; line-height: 1.5; margin: 0; } /* the chevron/arrow band segment */ .pt-ctl .ctl-chev { flex: 0 0 auto; height: 52px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px; padding-left: 12px; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%); } .pt-ctl .ctl-step:first-child .ctl-chev { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); padding-left: 0; } .pt-ctl .c1 { background: var(--color-primary); } .pt-ctl .c2 { background: var(--color-secondary); } .pt-ctl .c3 { background: var(--color-pink); } .pt-ctl .c4 { background: var(--color-coral); } @media (max-width: 767px) { .pt-ctl { flex-direction: column; gap: 0; } .pt-ctl .ctl-above, .pt-ctl .ctl-below { padding: 14px 10px; } .pt-ctl .ctl-above.is-empty, .pt-ctl .ctl-below.is-empty { display: none; } .pt-ctl .ctl-above::after, .pt-ctl .ctl-below::before { display: none; } .pt-ctl .ctl-chev { clip-path: none !important; border-radius: 100px; padding-left: 0; } } /* Comparison table polish (.pt-compare-table): clean dividers + highlighted "Pixel Ecosystem" column (2nd) so the winning column stands out. */ .pt-compare-table { border-collapse: separate !important; border-spacing: 0; width: 100%; } .pt-compare-table > :not(caption) > * > * { border: 0 !important; box-shadow: none !important; background: transparent !important; } .pt-compare-table thead th { padding: 16px 22px; font-weight: 700; font-size: 16px !important; vertical-align: middle; border-bottom: 2px solid rgba(20, 20, 43, 0.10) !important; } .pt-compare-table tbody td { padding: 15px 22px; vertical-align: top; line-height: 1.55; font-size: 15px !important; border-bottom: 1px solid rgba(20, 20, 43, 0.07) !important; } /* keep nested text (bold labels, spans, links) at the same normalized size */ .pt-compare-table tbody td *, .pt-compare-table thead th * { font-size: inherit !important; } .pt-compare-table tbody tr:last-child td { border-bottom: 0 !important; } /* remove the theme's alternating grey row striping */ .pt-compare-table tbody tr, .pt-compare-table tbody tr:nth-child(odd), .pt-compare-table tbody tr:nth-child(even) { background: transparent !important; } .pt-compare-table td:first-child { font-weight: 600; color: var(--color-heading); } /* Winning column = 2nd (Pixel Ecosystem) */ /* highlighted "winning" column — column index set per table via .pt-win-N */ .pt-compare-table.pt-win-2 th:nth-child(2), .pt-compare-table.pt-win-2 td:nth-child(2), .pt-compare-table.pt-win-3 th:nth-child(3), .pt-compare-table.pt-win-3 td:nth-child(3), .pt-compare-table.pt-win-4 th:nth-child(4), .pt-compare-table.pt-win-4 td:nth-child(4), .pt-compare-table.pt-win-5 th:nth-child(5), .pt-compare-table.pt-win-5 td:nth-child(5), .pt-compare-table.pt-win-6 th:nth-child(6), .pt-compare-table.pt-win-6 td:nth-child(6), .pt-compare-table.pt-win-7 th:nth-child(7), .pt-compare-table.pt-win-7 td:nth-child(7) { background: rgba(47, 87, 239, 0.06) !important; } .pt-compare-table.pt-win-2 thead th:nth-child(2), .pt-compare-table.pt-win-3 thead th:nth-child(3), .pt-compare-table.pt-win-4 thead th:nth-child(4), .pt-compare-table.pt-win-5 thead th:nth-child(5), .pt-compare-table.pt-win-6 thead th:nth-child(6), .pt-compare-table.pt-win-7 thead th:nth-child(7) { border-top: 3px solid #2f57ef !important; } .pt-compare-table.pt-win-2 td:nth-child(2) strong, .pt-compare-table.pt-win-3 td:nth-child(3) strong, .pt-compare-table.pt-win-4 td:nth-child(4) strong, .pt-compare-table.pt-win-5 td:nth-child(5) strong, .pt-compare-table.pt-win-6 td:nth-child(6) strong, .pt-compare-table.pt-win-7 td:nth-child(7) strong { color: #2f57ef; } /* Verdict matrix: ✓ (Pixel) / ~ (partial) / ✗ (weak) icon chips */ .pt-compare-table tbody td:not(:first-child) { white-space: normal; } .pt-compare-table .pt-v { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; margin-right: 10px; margin-top: 1px; flex: 0 0 auto; float: left; /* media-object: icon left, text block beside it */ } .pt-compare-table .pt-v i { font-size: 13px; line-height: 1; } .pt-compare-table .pt-v.ok { background: rgba(34, 197, 94, 0.13); color: #16a34a; } .pt-compare-table .pt-v.mid { background: rgba(245, 158, 11, 0.15); color: #d97706; } .pt-compare-table .pt-v.no { background: rgba(239, 68, 68, 0.11); color: #ef4444; } .pt-compare-table .pt-c { display: block; overflow: hidden; } /* both lines align under each other */ /* Top bar: animated "Hiring" superscript badge on the Careers link */ #topbar-links a[href="/careers"] { position: relative; overflow: visible; } #topbar-links a[href="/careers"]::after { content: "Hiring"; display: inline-block; vertical-align: super; margin-left: 5px; padding: 2px 6px; font-size: 9px; font-weight: 700; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: linear-gradient(90deg, #ff5a3c, #ff2e63); border-radius: 9px; white-space: nowrap; animation: pt-hiring-pulse 1.8s ease-in-out infinite; } @keyframes pt-hiring-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 46, 99, 0.55); } 50% { transform: scale(1.09); box-shadow: 0 0 0 6px rgba(255, 46, 99, 0); } } @media (prefers-reduced-motion: reduce) { #topbar-links a[href="/careers"]::after { animation: none; } } /* Top bar: keep social icons on a single row (were wrapping) */ .rbt-header-top .social-share-transparent { display: flex; flex-wrap: nowrap; align-items: center; } .rbt-header-top .social-share-transparent li { flex: 0 0 auto; } /* ===== #1 CTA button pair (Book Your Free Demo / Contact Our Team) -> equal size ===== */ .rbt-callto-action .rbt-btn, .rbt-callto-action .rbt-btn.rbt-switch-btn { min-width: 240px; display: inline-flex; align-items: center; justify-content: center; text-align: center; } /* feature-card titles: normalize to 18px across all pages */ .rbt-feature-card .feature-title, .feature-title { font-size: 18px !important; } /* Checkmark-box feature list (Option B) — green check + blue label in a light card */ .pt-check-list { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 0; } .pt-check-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 15px; border-radius: 12px; background: rgba(47, 87, 239, 0.05); font-size: 14px; line-height: 1.5; } .pt-check-item .pt-check { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: #1fb673; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; line-height: 1; margin-top: 2px; } .pt-check-item > span:last-child { flex: 1 1 auto; min-width: 0; } .pt-check-item strong { color: var(--color-primary); } /* Feature lists -> checkmark boxes EVERYWHERE (Option B style) — cards and plain sections. Connect-grid pill lists are reset below so they keep their pill look. */ .rbt-list-style-2 { display: flex; flex-direction: column; gap: 10px; padding-left: 0; margin-top: 20px; } .rbt-list-style-2 li { display: block !important; /* override theme flex that split label from text */ position: relative; list-style: none; padding: 16px 20px 16px 54px; margin: 0; background: #fff; border: 1px solid rgba(20, 20, 43, 0.07); border-radius: 14px; box-shadow: 0 6px 18px rgba(20, 20, 43, 0.04); font-size: 14px; line-height: 1.6; font-weight: 400; text-align: left; transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease; } .rbt-list-style-2 li:hover { box-shadow: 0 12px 28px rgba(20, 20, 43, 0.09); transform: translateY(-2px); border-color: rgba(47, 87, 239, 0.25); } .rbt-list-style-2 li > span { display: inline; } .rbt-list-style-2 li strong { font-weight: 700; } .rbt-list-style-2 li::before { content: "\2713"; position: absolute; left: 18px; top: 16px; width: 24px; height: 24px; border-radius: 50%; background: #1fb673; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; line-height: 1; box-shadow: 0 3px 8px rgba(31, 182, 115, 0.35); } .rbt-list-style-2 li i { display: none; } /* hide theme's inline check icon */ .rbt-list-style-2 li strong { color: var(--color-primary); } /* keep gradient connect nav-box lists as pills (override the box) */ .pt-connect-grid .rbt-card-body .rbt-list-style-2 { flex-direction: row !important; flex-wrap: wrap; justify-content: center; gap: 8px; } .pt-connect-grid .rbt-card-body .rbt-list-style-2 li { background: transparent !important; padding: 0 !important; border-radius: 0 !important; font-size: 14px; } .pt-connect-grid .rbt-card-body .rbt-list-style-2 li::before { display: none !important; } .pt-connect-grid .rbt-card-body .rbt-list-style-2 li strong { color: #fff !important; } /* Faded icons: opacity-variant icon boxes use a white glyph (meant for solid bg), which is invisible on the light tint. Give the glyph its full color so it's clear. */ .icon.bg-color-primary-opacity i, .icon.bg-color-primary-opacity svg { color: var(--color-primary) !important; } .icon.bg-color-secondary-opacity i { color: var(--color-secondary) !important; } .icon.bg-color-coral-opacity i { color: var(--color-coral) !important; } .icon.bg-color-pink-opacity i { color: var(--color-pink) !important; } .icon.bg-color-violet-opacity i { color: var(--color-violet) !important; } .icon.bg-color-warning-opacity i { color: var(--color-warning) !important; } /* "Complete Guide" SEO sections -> grid of cards (was a plain stack of h3 + p) */ .pt-guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 30px; } .pt-guide-card { background: #fff; border: 1px solid rgba(20,20,43,0.06); border-radius: 16px; padding: 26px 28px; box-shadow: 0 10px 30px rgba(20,20,43,0.05); } .pt-guide-card h3 { margin: 0 0 10px; font-size: 20px; } .pt-guide-card p { margin: 0 0 10px; } .pt-guide-card p:last-child { margin-bottom: 0; } @media (max-width: 767px) { .pt-guide-grid { grid-template-columns: 1fr; } } /* Bare .rbt-badge-6 (no bg-* modifier) was rendering as a stretched solid blob with invisible text. Make it a proper fit-content pill with visible label. */ .rbt-badge-6:not([class*="bg-"]) { display: inline-block !important; width: auto !important; max-width: max-content; background: rgba(47, 87, 239, 0.10) !important; color: var(--color-primary) !important; -webkit-text-fill-color: var(--color-primary) !important; padding: 6px 16px !important; border-radius: 100px !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.3px; text-transform: uppercase; line-height: 1.4; } /* Card-body with an icon directly before its heading -> icon INLINE with the heading (title beside icon), description spans full width below (matches the feature-card look). */ .rbt-card-body:has(> .icon + :is(h3,h4,h5,h6)) { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; } .rbt-card-body:has(> .icon + :is(h3,h4,h5,h6)) > .icon { grid-column: 1; grid-row: 1; } .rbt-card-body:has(> .icon + :is(h3,h4,h5,h6)) > :is(h3,h4,h5,h6) { grid-column: 2; grid-row: 1; margin: 0; } .rbt-card-body:has(> .icon + :is(h3,h4,h5,h6)) > :not(.icon):not(h3):not(h4):not(h5):not(h6) { grid-column: 1 / -1; margin-top: 16px; } /* .rbt-splash-feature-box with empty "bg-" rendered as plain text (no card). Give the non-gradient ones a consistent white card; keep gradient variants as-is. */ .rbt-splash-feature-box:not([class*="gradient"]) { background: #fff !important; border: 1px solid rgba(20, 20, 43, 0.06); border-radius: 16px; padding: 28px 30px; box-shadow: 0 10px 30px rgba(20, 20, 43, 0.05); height: 100%; } .rbt-splash-feature-box h5 { margin-bottom: 12px; } .row:has(> [class*="col-"] > .rbt-splash-feature-box) { align-items: stretch; } /* Bare .icon (no bg-color modifier) with a glyph -> default light tinted box + colored glyph, so it matches the styled icon boxes everywhere (image 135 fix). */ .icon:not([class*="bg-"]):has(> i), .icon:not([class*="bg-"]):has(> span > i), .icon:not([class*="bg-"]):has(> svg) { background: rgba(47, 87, 239, 0.10) !important; } .icon:not([class*="bg-"]):has(> i) i, .icon:not([class*="bg-"]):has(> span > i) i { color: var(--color-primary) !important; } /* Stacked CTA buttons in a right-aligned column (separated by
) -> equal width, aligned */ .col-lg-4.text-lg-end:has(> .rbt-btn ~ .rbt-btn) .rbt-btn { display: flex; width: 100%; max-width: 340px; margin: 0 0 16px auto !important; justify-content: center; align-items: center; text-align: center; } .col-lg-4.text-lg-end:has(> .rbt-btn ~ .rbt-btn) br { display: none; } /* Bare feather glyph inside a splash-feature-box (no .icon wrapper) -> tinted box + colored glyph, matching the styled icon boxes (image 140 fix). */ .rbt-splash-feature-box :is(.feature-content, .inner) > i[class*="feather"], .rbt-splash-feature-box > i[class*="feather"] { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 12px; background: rgba(47, 87, 239, 0.10); color: var(--color-primary) !important; font-size: 24px !important; margin-bottom: 16px; } /* Broad fix: ANY bare feather immediately followed by a heading is a feature icon shown above its title -> give it a tinted rounded box + colored glyph (covers every page / wrapper, not just .icon or splash boxes). */ i[class*="feather"]:has(+ :is(h2,h3,h4,h5,h6)) { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 12px; background: rgba(47, 87, 239, 0.10); color: var(--color-primary) !important; font-size: 24px !important; margin-bottom: 16px; } /* Bare feather icon followed by a heading -> icon INLINE with the heading (not stacked), description full-width below. Matches the "Manufacturing"-style card layout. */ :is(.feature-content, .inner, .rbt-splash-feature-box):has(> i[class*="feather"] + :is(h2,h3,h4,h5,h6)) { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; } :is(.feature-content, .inner, .rbt-splash-feature-box):has(> i[class*="feather"] + :is(h2,h3,h4,h5,h6)) > i[class*="feather"] { grid-column: 1; grid-row: 1; margin-bottom: 0 !important; } :is(.feature-content, .inner, .rbt-splash-feature-box):has(> i[class*="feather"] + :is(h2,h3,h4,h5,h6)) > :is(h2,h3,h4,h5,h6) { grid-column: 2; grid-row: 1; margin: 0; } :is(.feature-content, .inner, .rbt-splash-feature-box):has(> i[class*="feather"] + :is(h2,h3,h4,h5,h6)) > :not(i):not(h2):not(h3):not(h4):not(h5):not(h6) { grid-column: 1 / -1; margin-top: 14px; } /* Icon-at-top feature-card grids (.rbt-card-top) that are 4-per-row (col-lg-3) -> 3 per row */ .row:has(> [class*="col-lg-3"] .rbt-card-top) > [class*="col-lg-3"] { flex: 0 0 33.3333% !important; max-width: 33.3333% !important; } @media (max-width: 991px) { .row:has(> [class*="col-lg-3"] .rbt-card-top) > [class*="col-lg-3"] { flex: 0 0 50% !important; max-width: 50% !important; } } @media (max-width: 575px) { .row:has(> [class*="col-lg-3"] .rbt-card-top) > [class*="col-lg-3"] { flex: 0 0 100% !important; max-width: 100% !important; } } /* Card-body with .rbt-card-top (icon wrapper) before its heading -> icon INLINE with the heading, description full-width below (image 141 "Lead Qualification" fix). */ .rbt-card-body:has(> .rbt-card-top > .icon) { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; } .rbt-card-body:has(> .rbt-card-top > .icon) > .rbt-card-top { grid-column: 1; grid-row: 1; margin: 0 !important; } .rbt-card-body:has(> .rbt-card-top > .icon) > :is(h3,h4,h5,h6) { grid-column: 2; grid-row: 1; margin: 0; } .rbt-card-body:has(> .rbt-card-top > .icon) > :not(.rbt-card-top):not(h3):not(h4):not(h5):not(h6) { grid-column: 1 / -1; margin-top: 14px; } /* .feature-content / .inner with a wrapped .icon before the heading -> icon INLINE with heading, description full-width below (Acoustic Environment / Modular Voice Engine fix). */ :is(.feature-content, .inner):has(> .icon + :is(h3,h4,h5,h6)) { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; } :is(.feature-content, .inner):has(> .icon + :is(h3,h4,h5,h6)) > .icon { grid-column: 1; grid-row: 1; } :is(.feature-content, .inner):has(> .icon + :is(h3,h4,h5,h6)) > :is(h3,h4,h5,h6) { grid-column: 2; grid-row: 1; margin: 0; } :is(.feature-content, .inner):has(> .icon + :is(h3,h4,h5,h6)) > :not(.icon):not(h3):not(h4):not(h5):not(h6) { grid-column: 1 / -1; margin-top: 14px; } /* connect-grid cards: make ALL text white (description + " — xxx" list text were dark on the gradient), and keep list items as pills (not the new white-card style). */ .pt-connect-grid .rbt-card .rbt-card-body, .pt-connect-grid .rbt-card .rbt-card-body p, .pt-connect-grid .rbt-card .rbt-card-body .rbt-card-text, .pt-connect-grid .rbt-card .rbt-card-body .rbt-list-style-2 li, .pt-connect-grid .rbt-card .rbt-card-body .rbt-list-style-2 span { color: #fff !important; } .pt-connect-grid .rbt-card .rbt-card-body .rbt-card-text { opacity: 0.9; margin-bottom: 16px; } .pt-connect-grid .rbt-card .rbt-list-style-2 li { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } .pt-connect-grid .rbt-card .rbt-list-style-2 li:hover { transform: none !important; box-shadow: none !important; } /* rbt-feature-card with a DIRECT icon + heading child -> icon inline beside title (grid is more robust than the earlier flex rule, which a theme rule was overriding). */ .rbt-feature-card:has(> .icon):has(> :is(h2,h3,h4,h5,h6)) { display: grid !important; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; } .rbt-feature-card:has(> .icon):has(> :is(h2,h3,h4,h5,h6)) > .icon { grid-column: 1; grid-row: 1; } .rbt-feature-card:has(> .icon):has(> :is(h2,h3,h4,h5,h6)) > :is(h2,h3,h4,h5,h6) { grid-column: 2; grid-row: 1; margin: 0; } .rbt-feature-card:has(> .icon):has(> :is(h2,h3,h4,h5,h6)) > :not(.icon):not(h2):not(h3):not(h4):not(h5):not(h6) { grid-column: 1 / -1; margin-top: 14px; } /* Solid bg-color icon boxes (not the -opacity tints) must have a WHITE glyph (some were rendering dark/invisible on the solid color). */ .icon[class*="bg-color-"]:not([class*="-opacity"]) i, .icon[class*="bg-color-"]:not([class*="-opacity"]) svg { color: #fff !important; } /* Badge variants the theme never styled (danger/success/info) rendered as stretched blue blobs with invisible text. Make them solid color-coded pills with white text. */ .rbt-badge-6.bg-danger-opacity, .rbt-badge-6.bg-success-opacity, .rbt-badge-6.bg-info-opacity { display: inline-block !important; width: auto !important; max-width: max-content; padding: 6px 16px !important; border-radius: 100px !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .3px; color: #fff !important; -webkit-text-fill-color: #fff !important; } .rbt-badge-6.bg-danger-opacity { background: var(--color-danger) !important; } .rbt-badge-6.bg-success-opacity { background: var(--color-success) !important; } .rbt-badge-6.bg-info-opacity { background: var(--color-info) !important; } /* Hero button groups were centered (theme default) while hero text is left-aligned — left-align them to match. Scoped to banner/hero areas so centered CTAs are unaffected. */ .rbt-banner-area .rbt-button-group, .rbt-banner-area-2 .rbt-button-group, [class*="rbt-banner"] .rbt-button-group { justify-content: flex-start !important; } /* Tab navs (.nav-tabs) — make them clean pills: inactive = light tint + colored text, active = blue gradient + WHITE text (was dark text on a blue bg = unreadable). */ .nav-tabs:not(.tab-button-list) { border-bottom: none !important; gap: 8px; flex-wrap: wrap; } .nav-tabs:not(.tab-button-list) .nav-link { border: none !important; border-radius: 100px !important; color: var(--color-primary) !important; background: rgba(47, 87, 239, 0.08) !important; font-weight: 600; padding: 10px 20px !important; } .nav-tabs:not(.tab-button-list) .nav-link i { color: var(--color-primary) !important; } .nav-tabs:not(.tab-button-list) .nav-link.active, .nav-tabs:not(.tab-button-list) .nav-item.show .nav-link { color: #fff !important; -webkit-text-fill-color: #fff !important; background: linear-gradient(135deg, #4d63f0, #7b5cff) !important; border: none !important; } .nav-tabs:not(.tab-button-list) .nav-link.active i { color: #fff !important; } /* hero buttons follow the hero's text alignment: centered heroes (.inner.text-center / any .text-center wrapper) -> center the button group (overrides the left-align default). */ .text-center .rbt-button-group, .inner.text-center .rbt-button-group, [class*="rbt-banner"] .text-center .rbt-button-group { justify-content: center !important; } /* Case-studies category filter (portfolio-style) */ .cs-filter { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:34px 0 6px; } .cs-filter-btn { border:1px solid rgba(20,20,43,.12); background:#fff; color:var(--color-primary); border-radius:100px; padding:9px 20px; font-weight:600; font-size:14px; cursor:pointer; transition:all .2s ease; } .cs-filter-btn:hover { border-color:var(--color-primary); } .cs-filter-btn.active { background:linear-gradient(135deg,#4d63f0,#7b5cff); color:#fff; border-color:transparent; } /* "Our Clientele" logo grid (store.pixelerp.ai style — grayscale logos in bordered cards) */ .pt-client-logo { background:#fff; border:1px solid rgba(20,20,43,.08); border-radius:14px; height:104px; display:flex; align-items:center; justify-content:center; padding:18px; transition:box-shadow .25s ease, transform .25s ease; } .pt-client-logo img { max-height:46px; max-width:100%; object-fit:contain; filter:grayscale(1); opacity:.6; transition:filter .25s ease, opacity .25s ease; } .pt-client-logo:hover { box-shadow:0 12px 28px rgba(20,20,43,.08); transform:translateY(-3px); } .pt-client-logo:hover img { filter:grayscale(0); opacity:1; } /* Section eyebrow (.subtitle) variants the theme never styled (success/danger/info) rendered as blue blobs with invisible text. Give them light tint + colored text. */ .subtitle.bg-success-opacity { background: rgba(62,183,94,.12) !important; color: var(--color-success) !important; -webkit-text-fill-color: var(--color-success) !important; } .subtitle.bg-danger-opacity { background: rgba(255,0,3,.10) !important; color: var(--color-danger) !important; -webkit-text-fill-color: var(--color-danger) !important; } .subtitle.bg-info-opacity { background: rgba(27,162,219,.12) !important; color: var(--color-info) !important; -webkit-text-fill-color: var(--color-info) !important; } /* Case-study product-screen gallery */ .pt-cs-shot { width:100%; border-radius:14px; border:1px solid rgba(20,20,43,.06); box-shadow:0 10px 30px rgba(20,20,43,.07); background:#fff; } /* Case-study "Walkthrough" — alternating image + feature side-by-side */ .pt-walk-row { margin-bottom: 54px; } .pt-walk-reverse { flex-direction: row-reverse; } .pt-walk-text { padding: 8px 24px; } .pt-walk-num { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; font-size:17px; font-weight:800; color:#fff; background:linear-gradient(135deg,#4d63f0,#7b5cff); border-radius:12px; margin-bottom:16px; } .pt-walk-text p { font-size:18px; line-height:1.7; margin:0; color:var(--color-body, #5b5b76); } @media (max-width:991px){ .pt-walk-reverse{ flex-direction:column; } .pt-walk-row{ margin-bottom:36px; } } /* Walkthrough: blue-check bullets + smaller images */ .pt-walk-text h4 { margin: 4px 0 0; } .pt-walk-list { list-style:none; padding:0; margin:16px 0 0; } .pt-walk-list li { position:relative; padding:7px 0 7px 34px; font-size:16px; line-height:1.55; } .pt-walk-list li::before { content:"\2713"; position:absolute; left:0; top:8px; width:22px; height:22px; border-radius:50%; background:var(--color-primary); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; line-height:1; } .pt-walk-row .pt-cs-shot { max-height:440px; width:auto; max-width:100%; margin:0 auto; display:inline-block; } /* Kill the scroll slide-up/fade animation everywhere (repeatedly reported as janky on counters). Elements just appear in place — no transform/opacity reveal. */ [data-sal] { opacity: 1 !important; transform: none !important; -webkit-transform: none !important; transition: none !important; animation: none !important; } /* Banner-8 product hero: keep the eyebrow/H1/description/buttons left-aligned (the description was indenting/centering on some product heroes e.g. Pixel CRM). */ .rbt-banner-8 .inner > .description, .rbt-banner-8 .inner .description { text-align: left !important; margin-left: 0 !important; padding-left: 0 !important; max-width: 620px; } .rbt-banner-8 .inner { text-align: left; } .rbt-banner-8 .inner .rbt-button-group { justify-content: flex-start !important; } /* Centered feature cards (icon + title + subtitle): the boxed feather icon was left-aligned (inline display:block) while text is centered — center the icon too. */ .rbt-card-body.text-center > i[class*="feather"], .rbt-card.variation-02 .rbt-card-body.text-center > i[class*="feather"] { display: block !important; margin-left: auto !important; margin-right: auto !important; }