/*
* terapage-fixes.css
* Shared responsive + UI consistency fixes for all Terapage pages.
* Injected via in every page AFTER app.css.
* Do NOT remove — this file is the single source of truth for:
* 1. Loader speed fix
* 2. Mobile viewport / overflow
* 3. Banner hero responsive stacking
* 4. Image overlap prevention
* 5. Button consistency
* 6. Section spacing consistency
* 7. Typography scaling
* 8. WOW.js animation speed
*/
/* ─────────────────────────────────────────────
1. LOADER — never stay on screen more than 2s
The JS hides it on window.load but that waits
for every image. This CSS forces it out fast.
───────────────────────────────────────────── */
.page-loader {
-webkit-animation: tp-loader-timeout 2s forwards;
animation: tp-loader-timeout 2s forwards;
animation-delay: 1.8s;
}
@keyframes tp-loader-timeout {
to { opacity: 0; pointer-events: none; visibility: hidden; }
}
/* ─────────────────────────────────────────────
2. GLOBAL — prevent horizontal scroll
───────────────────────────────────────────── */
html,
body {
overflow-x: hidden;
max-width: 100%;
}
/* ─────────────────────────────────────────────
3. BANNER HERO — responsive column stacking
Overrides inline display:flex that prevented
Bootstrap cols from wrapping on mobile.
───────────────────────────────────────────── */
@media (max-width: 991px) {
.banner.banner-five .row {
display: flex !important;
flex-wrap: wrap !important;
}
.banner.banner-five .col-lg-6 {
flex: 0 0 100% !important;
max-width: 100% !important;
}
.banner.banner-five .banner-content {
max-width: 100% !important;
padding: 0 !important;
}
/* Hero image: remove any negative margin overrides */
.banner.banner-five .promo-mockup-five {
margin-top: 24px !important;
}
.banner.banner-five .animate-element-five li {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Decorative shapes overflow viewport on mobile */
.animate-shape,
.animate-shape.wow.pixFadeDown,
.scroll-circle,
.banner-right-shape .shape-circle {
display: none !important;
}
}
/* ─────────────────────────────────────────────
4. IMAGES — never overflow their container
───────────────────────────────────────────── */
img {
max-width: 100%;
height: auto;
}
.elm-mass,
.mass-img,
.elm-four {
max-width: 100%;
height: auto;
display: block;
}
/* Remove hard-coded negative top margins that cause overlaps */
@media (max-width: 991px) {
[style*="margin-top:-"],
[style*="margin-top: -"] {
margin-top: 0 !important;
}
.editure-feature-image-two {
margin-bottom: 24px;
}
}
/* ─────────────────────────────────────────────
5. BUTTON CONSISTENCY
All .pix-btn.color-two buttons: same size,
same margin-top, consistent positioning.
───────────────────────────────────────────── */
.pix-btn.color-two {
padding: 10px 30px;
font-size: 15px;
font-weight: 600;
border-radius: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
transition: background 0.25s ease, box-shadow 0.25s ease;
}
/* Ensure buttons that are direct children of section-title
or genera-informes-content have consistent top spacing */
.section-title + .pix-btn,
.section-title + a.pix-btn,
.genera-informes-content > .pix-btn,
.genera-informes-content > a.pix-btn,
.editor-content .description > a.pix-btn,
.description > a.pix-btn {
margin-top: 20px;
}
/* On mobile: buttons full-width for easier tapping */
@media (max-width: 480px) {
.pix-btn.color-two {
width: 100%;
text-align: center;
justify-content: center;
}
}
/* ─────────────────────────────────────────────
6. SECTION SPACING — consistent vertical rhythm
Replaces scattered
tags with CSS spacing.
───────────────────────────────────────────── */
section {
padding-top: 60px;
padding-bottom: 60px;
}
/* Banner has its own larger padding — don't override */
section.banner {
padding-top: 120px;
padding-bottom: 80px;
}
@media (max-width: 768px) {
section {
padding-top: 40px;
padding-bottom: 40px;
}
section.banner {
padding-top: 80px;
padding-bottom: 40px;
}
/* Hide
spacers used between sections */
section + br,
br + section,
.container + br {
display: none;
}
}
/* ─────────────────────────────────────────────
7. TYPOGRAPHY SCALING
Headings gracefully scale down on mobile.
───────────────────────────────────────────── */
@media (max-width: 991px) {
.banner-title {
font-size: 32px !important;
line-height: 1.25 !important;
}
.section-title .title,
h2.title {
font-size: 28px !important;
line-height: 1.3 !important;
}
}
@media (max-width: 768px) {
.banner-title {
font-size: 26px !important;
}
.section-title .title,
h2.title {
font-size: 23px !important;
}
.description p,
.section-title p {
font-size: 15px !important;
line-height: 1.6 !important;
}
}
@media (max-width: 480px) {
.banner-title {
font-size: 22px !important;
}
.section-title .title,
h2.title {
font-size: 20px !important;
}
}
/* ─────────────────────────────────────────────
8. WOW.JS — faster reveal animation
Default is 1s which feels sluggish.
───────────────────────────────────────────── */
.wow,
.animated {
animation-duration: 0.4s !important;
}
/* ─────────────────────────────────────────────
9. LAYOUT CONSISTENCY — editor + genera rows
Fix image/text overlap when columns don't
have enough breathing room.
───────────────────────────────────────────── */
@media (max-width: 991px) {
.editure-feature-image-two,
.genera-informes-content,
.editor-content {
width: 100%;
max-width: 100%;
}
/* Stack all two-col content sections */
section > .container > .row.align-items-center,
section > .container > .row {
flex-wrap: wrap;
}
section > .container > .row > .col-lg-6 {
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 24px;
}
/* pix-order-two: text first, image below on mobile */
.pix-order-two {
order: 1 !important;
}
.pix-order-two + .col-lg-6,
.col-lg-6:not(.pix-order-two) ~ .col-lg-6 {
order: 2 !important;
}
}
/* ─────────────────────────────────────────────
10. TESTIMONIAL BIO — prevent overlap on mobile
───────────────────────────────────────────── */
@media (max-width: 600px) {
.testimonial-two .testimonial-bio {
flex-direction: column !important;
align-items: flex-start !important;
gap: 12px !important;
}
}
/* ─────────────────────────────────────────────
11. MINI-KPI GRIDS (telephone/incentive pages)
───────────────────────────────────────────── */
@media (max-width: 767px) {
.mini-kpis {
grid-template-columns: 1fr 1fr !important;
}
}
@media (max-width: 420px) {
.mini-kpis {
grid-template-columns: 1fr !important;
}
}
/* ─────────────────────────────────────────────
12. TRUSTED-BY & INTEGRATION CAROUSELS
───────────────────────────────────────────── */
.trusted-logo-carousel .swiper-slide img,
#brand-logo .integration-logo {
max-width: 100%;
height: auto;
object-fit: contain;
}
@media (max-width: 480px) {
.trusted-logo-carousel .swiper-slide img {
max-width: 100px;
max-height: 32px;
}
}
/* ─────────────────────────────────────────────
13. NAVBAR — prevent overflow on small screens
───────────────────────────────────────────── */
@media (max-width: 991px) {
.site-header {
overflow: visible;
}
.site-header .container {
max-width: 100%;
padding-left: 15px;
padding-right: 15px;
}
}
/* ─────────────────────────────────────────────
14. FEATURED CARDS (platform features grid)
───────────────────────────────────────────── */
@media (max-width: 767px) {
.saaspik-icon-box-wrapper.style-seven {
margin-bottom: 20px;
}
.inspect-tab-image img {
max-width: 100%;
height: auto;
}
}
/* ─────────────────────────────────────────────
15. CTA STRIP
───────────────────────────────────────────── */
@media (max-width: 767px) {
.cta-container {
padding: 30px 16px !important;
margin-bottom: 30px !important;
}
}
/* ─────────────────────────────────────────────
16. FOOTER — stack properly on mobile
───────────────────────────────────────────── */
@media (max-width: 767px) {
.site-footer .col-sm-6,
.site-footer .col-lg-3 {
margin-bottom: 24px;
}
}
/* ─────────────────────────────────────────────
17. INTEGRATION LOGO CAROUSEL
Full-colour logos, consistent height
───────────────────────────────────────────── */
#brand-logo {
padding: 40px 0 50px;
}
#brand-logo .swiper-slide {
display: flex !important;
align-items: center;
justify-content: center;
}
/* ─────────────────────────────────────────────
18. TELEPHONE / INCENTIVE PAGE — section images
Consistent border-radius and shadow on all
product screenshots.
───────────────────────────────────────────── */
.cati-page img,
.incentive-page img {
border-radius: 18px;
box-shadow: 0 12px 36px rgba(20, 20, 70, 0.10);
}
/* note-box (telephone page) */
.note-box {
background: #f7f4ff;
border-left: 4px solid #7513ff;
padding: 20px 22px;
border-radius: 12px;
margin-top: 18px;
font-size: 15px;
line-height: 1.6;
}
/* mini-kpi grid (telephone page) */
.mini-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin: 28px 0 8px;
}
.mini-kpi {
background: #fff;
border: 1px solid #e8e4ff;
border-radius: 16px;
padding: 18px 16px;
box-shadow: 0 6px 20px rgba(21,17,64,.06);
}
.mini-kpi strong {
display: block;
color: #7513ff;
font-size: 22px;
font-weight: 700;
margin-bottom: 4px;
}
.mini-kpi span {
font-size: 14px;
color: #555;
line-height: 1.45;
}
/* pill tags (telephone page) */
.pill {
display: inline-block;
padding: 6px 14px;
border-radius: 999px;
background: #f1edff;
color: #3314b8;
font-weight: 600;
font-size: 13px;
margin: 0 6px 8px 0;
}
/* feature-list (telephone page) */
.feature-list {
padding-left: 20px;
margin: 12px 0 0;
}
.feature-list li {
margin-bottom: 10px;
line-height: 1.65;
color: #333;
}
/* sub-title (banner eyebrow text) */
.sub-title {
font-size: 14px;
font-weight: 600;
color: #7513ff;
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 12px;
}