/* ============================================================================= Proofox v2 stylesheet — uses tokens.css as single source of truth. Loaded AFTER bootstrap + tokens + style.css when feature.new_design is on. Class prefix: px-* (avoids collision with v1 .ree-* and Bootstrap .btn-*) ============================================================================= */ /* --- 1. Reset & body --------------------------------------------------------- */ /* Override v1 style.css `body { font-size: 19px }` so v2 uses a modern 16px base. */ .px-body { font-family: var(--px-font-sans); font-size: var(--px-text-base); color: var(--px-text-primary); background: var(--px-bg-page); line-height: var(--px-leading-normal); -webkit-font-smoothing: antialiased; } .px-body * { box-sizing: border-box; } .px-body img { max-width: 100%; height: auto; } .px-body a { color: inherit; text-decoration: none; } /* :where() drops specificity to 0, so any class on the button (e.g. .px-nav__link) reliably overrides these defaults. font: inherit pulls font-size from .px-body (16px), not from (which v1 sets to 19px). */ :where(.px-body button) { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; } .px-body h1, .px-body h2, .px-body h3, .px-body h4 { color: var(--px-text-primary); font-weight: var(--px-weight-bold); line-height: var(--px-leading-tight); margin: 0 0 var(--px-space-4); } .px-body p { margin: 0 0 var(--px-space-4); color: var(--px-text-secondary); } .px-body ul, .px-body ol { margin: 0; padding: 0; list-style: none; } .px-main { display: block; min-height: 50vh; } .px-container { max-width: var(--px-container-xl); margin: 0 auto; padding: 0 var(--px-space-5); } /* --- 2. Type & utilities ----------------------------------------------------- */ .px-eyebrow { display: inline-block; font-size: var(--px-text-sm); font-weight: var(--px-weight-semibold); color: var(--px-brand-primary); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: var(--px-space-3); } .px-text-gradient { background: var(--px-brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .px-link { display: inline-flex; align-items: center; gap: var(--px-space-2); color: var(--px-brand-primary); font-weight: var(--px-weight-semibold); transition: gap var(--px-duration) var(--px-ease-out); } .px-link:hover { gap: var(--px-space-3); } .px-section-head { max-width: 720px; margin: 0 auto var(--px-space-8); text-align: center; } .px-section-head h2 { font-size: clamp(var(--px-text-3xl), 4vw, var(--px-text-5xl)); } .px-section-head p { font-size: var(--px-text-lg); color: var(--px-text-secondary); } .px-section-head--row { display: flex; align-items: end; justify-content: space-between; text-align: left; gap: var(--px-space-6); flex-wrap: wrap; } .px-section-head--row > * { margin: 0; } /* --- 3. Buttons -------------------------------------------------------------- */ .px-btn { display: inline-flex; align-items: center; gap: var(--px-space-2); padding: var(--px-space-3) var(--px-space-5); border-radius: var(--px-radius-full); font-weight: var(--px-weight-semibold); font-size: var(--px-text-sm); transition: all var(--px-duration) var(--px-ease-out); white-space: nowrap; cursor: pointer; } .px-btn--lg { padding: var(--px-space-4) var(--px-space-6); font-size: var(--px-text-base); } .px-btn--primary { background: var(--px-brand-gradient); color: var(--px-text-on-brand); box-shadow: var(--px-shadow-md); } .px-btn--primary:hover { transform: translateY(-1px); box-shadow: var(--px-shadow-lg); color: var(--px-text-on-brand); } .px-btn--ghost { background: var(--px-bg-surface); color: var(--px-text-primary); border: 1px solid var(--px-border-subtle); } .px-btn--ghost:hover { border-color: var(--px-brand-primary); color: var(--px-brand-primary); } /* --- 4. Announcement bar ----------------------------------------------------- */ .px-announce { background: var(--px-gray-900); color: var(--px-gray-100); font-size: var(--px-text-sm); text-align: center; padding: 10px var(--px-space-5); line-height: 1.4; } .px-announce__inner { max-width: var(--px-container-xl); margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: var(--px-space-3); flex-wrap: wrap; } .px-announce__pill { display: inline-flex; align-items: center; background: var(--px-brand-gradient); color: var(--px-white); padding: 2px 10px; border-radius: var(--px-radius-full); font-size: 11px; font-weight: var(--px-weight-bold); text-transform: uppercase; letter-spacing: 0.08em; } .px-announce__text { color: var(--px-gray-200); } .px-announce__link { color: var(--px-white); font-weight: var(--px-weight-semibold); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.4); transition: text-decoration-color var(--px-duration); } .px-announce__link:hover { text-decoration-color: var(--px-white); color: var(--px-white); } .px-announce__link i { font-size: 10px; margin-left: 4px; } @media (max-width: 640px) { .px-announce { font-size: var(--px-text-xs); } } /* --- 4b. Header -------------------------------------------------------------- */ .px-header { position: sticky; top: 0; z-index: var(--px-z-sticky); background: rgba(255,255,255,0.85); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--px-border-subtle); } .px-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--px-space-5); padding: var(--px-space-3) var(--px-space-5); max-width: var(--px-container-xl); margin: 0 auto; } .px-logo img { height: 36px; width: auto; display: block; } .px-nav { display: none; } .px-nav__list { display: flex; gap: var(--px-space-4); } .px-nav__item { position: relative; } .px-nav__link { display: inline-flex; align-items: center; gap: var(--px-space-1); padding: var(--px-space-2) var(--px-space-3); color: var(--px-text-primary); font-size: var(--px-text-sm); font-weight: var(--px-weight-medium); border-radius: var(--px-radius); transition: color var(--px-duration); } .px-nav__link:hover, .px-nav__item.px-is-current > .px-nav__link { color: var(--px-brand-primary); } /* --- Megamenu (4-column, no featured panel, tight) --------------------- */ .px-nav__item--has-menu:hover .px-megamenu, .px-nav__item--has-menu:focus-within .px-megamenu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; } /* Invisible hover bridge — makes the gap between trigger and megamenu part of the hoverable area, so cursor can move from trigger to menu without closing. */ .px-nav__item--has-menu::after { content: ''; position: absolute; top: 100%; left: -8px; right: -8px; height: 16px; z-index: 1; } .px-megamenu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-8px); width: max-content; max-width: calc(100vw - 32px); min-width: 220px; max-height: calc(100vh - 100px); overflow-y: auto; background: var(--px-bg-surface); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius-lg); box-shadow: 0 24px 50px -16px rgba(15, 23, 42, 0.18), 0 4px 12px -4px rgba(15, 23, 42, 0.06); padding: var(--px-space-2); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--px-duration) var(--px-ease-out), transform var(--px-duration) var(--px-ease-out), visibility var(--px-duration); z-index: var(--px-z-dropdown); } /* Custom scrollbar for tall dropdowns (Firefox + WebKit) */ .px-megamenu { scrollbar-width: thin; scrollbar-color: var(--px-gray-300) transparent; } .px-megamenu::-webkit-scrollbar { width: 6px; } .px-megamenu::-webkit-scrollbar-track { background: transparent; } .px-megamenu::-webkit-scrollbar-thumb { background: var(--px-gray-300); border-radius: var(--px-radius-full); } /* Bridge the gap so cursor doesn't leave between trigger and menu */ .px-megamenu::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; } /* Wide menus (e.g. Services with 4 categories) — 4 columns side-by-side */ .px-megamenu--wide { width: 920px; padding: var(--px-space-5); } .px-megamenu__cols { display: grid; gap: var(--px-space-5); grid-template-columns: 1fr; } .px-megamenu--wide .px-megamenu__cols { grid-template-columns: repeat(4, 1fr); } .px-megamenu__col-heading { font-size: 11px; font-weight: var(--px-weight-bold); color: var(--px-text-muted); text-transform: uppercase; letter-spacing: 0.1em; padding: 0 var(--px-space-2) var(--px-space-2); margin-bottom: var(--px-space-1); } .px-megamenu__items { display: grid; gap: 1px; } .px-megamenu__item { display: flex; align-items: center; gap: var(--px-space-3); padding: 8px var(--px-space-2); border-radius: var(--px-radius); transition: background-color var(--px-duration); color: var(--px-text-primary); } .px-megamenu__item:hover { background: var(--px-bg-muted); color: var(--px-text-primary); } .px-megamenu__item:hover .px-megamenu__item-icon { background: var(--px-brand-gradient); color: var(--px-white); } .px-megamenu__item:hover .px-megamenu__item-title { color: var(--px-brand-primary); } .px-megamenu__item-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 6px; background: var(--px-bg-muted); color: var(--px-brand-primary); display: grid; place-items: center; font-size: var(--px-text-xs); transition: all var(--px-duration) var(--px-ease-out); } .px-megamenu__item-text { display: flex; flex-direction: column; gap: 0; min-width: 0; } .px-megamenu__item-title { font-size: var(--px-text-sm); font-weight: var(--px-weight-medium); color: var(--px-text-primary); line-height: var(--px-leading-snug); transition: color var(--px-duration); } .px-megamenu__item-desc { font-size: 11px; color: var(--px-text-muted); line-height: var(--px-leading-snug); } /* Standalone tiles (used when category has no grandchildren — e.g. Cities, Product) */ .px-megamenu__item--standalone { padding: 6px var(--px-space-2); } /* Items without icons (e.g. unknown URLs) — no left padding for icon */ .px-megamenu__item--no-icon { padding-left: var(--px-space-3); } .px-megamenu__item--no-icon .px-megamenu__item-title { font-weight: var(--px-weight-medium); } /* Responsive */ @media (max-width: 1100px) { .px-megamenu--wide { width: 720px; } .px-megamenu--wide .px-megamenu__cols { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .px-megamenu, .px-megamenu--wide { width: calc(100vw - 32px); } .px-megamenu--wide .px-megamenu__cols { grid-template-columns: 1fr; } } .px-header__cta { display: none; } .px-mobile-toggle { display: flex; flex-direction: column; gap: 4px; padding: var(--px-space-2); } .px-mobile-toggle span { width: 22px; height: 2px; background: var(--px-text-primary); border-radius: 2px; transition: transform var(--px-duration); } .px-mobile-drawer { position: fixed; inset: 64px 0 0 0; background: var(--px-bg-surface); padding: var(--px-space-5); overflow-y: auto; z-index: var(--px-z-fixed); border-top: 1px solid var(--px-border-subtle); } .px-mobile-drawer__list { display: grid; gap: var(--px-space-2); } .px-mobile-drawer__list a, .px-mobile-drawer__expand { display: block; width: 100%; text-align: left; padding: var(--px-space-3); border-radius: var(--px-radius); font-weight: var(--px-weight-medium); color: var(--px-text-primary); } .px-mobile-drawer__list a:hover, .px-mobile-drawer__expand:hover { background: var(--px-bg-muted); } .px-mobile-drawer__sublist { padding-left: var(--px-space-4); margin-top: var(--px-space-1); } .px-mobile-drawer__expand { display: flex; justify-content: space-between; align-items: center; } .px-mobile-drawer__cta { margin-top: var(--px-space-4); } @media (min-width: 992px) { .px-nav { display: block; } .px-header__cta { display: block; } .px-mobile-toggle { display: none; } .px-mobile-drawer { display: none !important; } } /* --- 5. Hero ----------------------------------------------------------------- */ .px-hero { position: relative; padding: var(--px-space-8) var(--px-space-5) var(--px-space-10); background: var(--px-bg-page); overflow: hidden; } /* Decorative background — soft mesh + dot grid */ .px-hero::before { content: ''; position: absolute; inset: -10% -5%; background: radial-gradient(40% 40% at 12% 8%, rgba(108,92,231,0.18), transparent 60%), radial-gradient(35% 35% at 88% 18%, rgba(0,206,201,0.16), transparent 60%), radial-gradient(45% 45% at 78% 92%, rgba(108,92,231,0.10), transparent 60%); pointer-events: none; z-index: 0; } .px-hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(15, 23, 42, 0.08) 1px, transparent 1px); background-size: 22px 22px; mask-image: radial-gradient(circle at 50% 50%, black 30%, transparent 75%); -webkit-mask-image: radial-gradient(circle at 50% 50%, black 30%, transparent 75%); opacity: 0.45; pointer-events: none; z-index: 0; } .px-hero__inner { position: relative; z-index: 1; max-width: var(--px-container-xl); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: var(--px-space-10); align-items: center; } .px-hero__title { font-size: clamp(2rem, 5vw, var(--px-text-6xl)); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: var(--px-space-5); } .px-hero__subtitle { font-size: var(--px-text-lg); color: var(--px-text-secondary); max-width: 520px; margin-bottom: var(--px-space-6); } .px-hero__cta { display: flex; gap: var(--px-space-3); flex-wrap: wrap; margin-bottom: var(--px-space-8); } .px-hero__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--px-space-5); padding-top: var(--px-space-6); border-top: 1px solid var(--px-border-subtle); } .px-stat__value { font-size: var(--px-text-3xl); font-weight: var(--px-weight-bold); color: var(--px-brand-primary); line-height: 1; } .px-stat__label { font-size: var(--px-text-sm); color: var(--px-text-muted); margin-top: var(--px-space-2); } /* Visual side — single dashboard card with floating badges */ .px-hero__visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 460px; } .px-dashboard { width: 100%; max-width: 520px; background: var(--px-bg-surface); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius-xl); box-shadow: 0 32px 60px -20px rgba(15, 23, 42, 0.18), 0 8px 16px -8px rgba(15, 23, 42, 0.08); overflow: hidden; transform: rotate(-1deg); transition: transform var(--px-duration-slow) var(--px-ease-out); } .px-hero__visual:hover .px-dashboard { transform: rotate(0deg); } .px-dashboard__topbar { display: flex; align-items: center; gap: var(--px-space-2); padding: var(--px-space-3) var(--px-space-4); background: var(--px-bg-muted); border-bottom: 1px solid var(--px-border-subtle); } .px-dashboard__dot { width: 10px; height: 10px; border-radius: 50%; background: #fb6d6d; } .px-dashboard__dot--amber { background: #fdba74; } .px-dashboard__dot--green { background: #84cc8a; } .px-dashboard__url { margin-left: var(--px-space-3); font-size: var(--px-text-xs); color: var(--px-text-muted); font-family: var(--px-font-mono); } .px-dashboard__body { padding: var(--px-space-5); display: flex; flex-direction: column; gap: var(--px-space-5); } .px-dashboard__eyebrow { font-size: var(--px-text-xs); color: var(--px-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--px-weight-semibold); margin-bottom: var(--px-space-2); } .px-dashboard__metric-row { display: flex; align-items: flex-end; gap: var(--px-space-4); } .px-dashboard__metric-row > div:first-child { flex: 1; } .px-dashboard__big { display: flex; align-items: baseline; gap: var(--px-space-3); } .px-dashboard__big-num { font-size: var(--px-text-4xl); font-weight: var(--px-weight-bold); color: var(--px-success); line-height: 1; letter-spacing: -0.02em; } .px-dashboard__big-pill { background: rgba(22, 163, 74, 0.1); color: var(--px-success); font-size: var(--px-text-xs); font-weight: var(--px-weight-semibold); padding: 4px 10px; border-radius: var(--px-radius-full); } .px-dashboard__chart { width: 140px; height: 70px; flex-shrink: 0; } .px-dashboard__rankings { padding-top: var(--px-space-4); border-top: 1px solid var(--px-border-subtle); } .px-dashboard__rankings-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--px-space-3); } .px-dashboard__sublabel { font-size: var(--px-text-xs); color: var(--px-text-muted); } .px-dashboard__rank-list { display: grid; gap: var(--px-space-3); } .px-dashboard__rank-list li { display: grid; grid-template-columns: 1fr 80px auto; gap: var(--px-space-3); align-items: center; } .px-dashboard__rank-keyword { font-size: var(--px-text-xs); color: var(--px-text-secondary); font-family: var(--px-font-mono); } .px-dashboard__rank-bar { display: block; height: 8px; background: var(--px-bg-muted); border-radius: var(--px-radius-full); overflow: hidden; position: relative; } .px-dashboard__rank-bar i { display: block; height: 100%; width: var(--w, 0); background: var(--px-brand-gradient); border-radius: var(--px-radius-full); } .px-dashboard__rank-pos { font-size: var(--px-text-sm); font-weight: var(--px-weight-bold); color: var(--px-brand-primary); } .px-dashboard__quote { margin: 0; padding: var(--px-space-4); background: linear-gradient(135deg, rgba(108,92,231,0.08), rgba(0,206,201,0.08)); border-radius: var(--px-radius); color: var(--px-text-primary); position: relative; } .px-dashboard__quote svg { color: var(--px-brand-primary); margin-bottom: var(--px-space-2); } .px-dashboard__quote p { margin: 0 0 var(--px-space-2); font-size: var(--px-text-sm); font-weight: var(--px-weight-medium); line-height: var(--px-leading-snug); color: var(--px-text-primary); } .px-dashboard__quote footer { font-size: var(--px-text-xs); color: var(--px-text-muted); } /* Floating badges */ .px-hero__badge { position: absolute; background: var(--px-bg-surface); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius-lg); padding: var(--px-space-3) var(--px-space-4); box-shadow: var(--px-shadow-lg); display: flex; align-items: center; gap: var(--px-space-3); z-index: 2; } .px-hero__badge--top { top: 0; right: -10px; transform: rotate(3deg); } .px-hero__badge--bottom { bottom: 10px; left: -20px; transform: rotate(-2deg); } .px-hero__badge strong { display: block; font-size: var(--px-text-xl); color: var(--px-text-primary); line-height: 1; letter-spacing: -0.02em; } .px-hero__badge small { display: block; font-size: 11px; color: var(--px-text-muted); margin-top: 2px; } .px-hero__badge-icon { width: 36px; height: 36px; border-radius: var(--px-radius); display: grid; place-items: center; background: var(--px-brand-gradient); color: var(--px-white); flex-shrink: 0; } .px-hero__badge-icon--alt { background: linear-gradient(135deg, #16a34a, #65a30d); } @media (max-width: 991px) { .px-hero__badge { display: none; } .px-hero__visual { min-height: 380px; } } @media (min-width: 992px) { .px-hero { padding: var(--px-space-10) var(--px-space-5) var(--px-space-12); } .px-hero__inner { grid-template-columns: 1.05fr 1fr; } } /* --- 6. Trust bar ------------------------------------------------------------ */ .px-trust { padding: var(--px-space-8) var(--px-space-5); background: var(--px-bg-surface); border-top: 1px solid var(--px-border-subtle); border-bottom: 1px solid var(--px-border-subtle); } .px-trust__label { text-align: center; font-size: var(--px-text-sm); color: var(--px-text-muted); margin-bottom: var(--px-space-5); text-transform: uppercase; letter-spacing: 0.05em; font-weight: var(--px-weight-semibold); } .px-trust__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--px-space-8); opacity: 0.7; } .px-trust__logo img { height: 36px; width: auto; max-width: 140px; object-fit: contain; filter: grayscale(100%); transition: filter var(--px-duration); } .px-trust__logo:hover img { filter: grayscale(0%); } /* --- 7. Services grid -------------------------------------------------------- */ .px-services { padding: var(--px-space-12) var(--px-space-5); } .px-services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--px-space-5); } .px-service-card { display: flex; flex-direction: column; padding: var(--px-space-6); background: var(--px-bg-surface); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius-lg); transition: all var(--px-duration) var(--px-ease-out); position: relative; overflow: hidden; } .px-service-card::after { content: ''; position: absolute; inset: 0; background: var(--px-brand-gradient); opacity: 0; transition: opacity var(--px-duration); pointer-events: none; } .px-service-card:hover { transform: translateY(-4px); box-shadow: var(--px-shadow-xl); border-color: var(--px-brand-primary); } .px-service-card__icon { width: 48px; height: 48px; border-radius: var(--px-radius); background: var(--px-bg-muted); color: var(--px-brand-primary); display: grid; place-items: center; font-size: var(--px-text-xl); margin-bottom: var(--px-space-4); } .px-service-card h3 { font-size: var(--px-text-xl); margin-bottom: var(--px-space-3); } .px-service-card p { color: var(--px-text-secondary); margin-bottom: var(--px-space-4); flex: 1; } /* --- 8. Process / Methodology ------------------------------------------------ */ .px-process { padding: var(--px-space-12) var(--px-space-5); background: var(--px-bg-surface); } .px-process__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--px-space-5); counter-reset: process; } .px-process-step { padding: var(--px-space-5); border-left: 2px solid var(--px-border-subtle); position: relative; } .px-process-step__num { font-size: var(--px-text-sm); font-weight: var(--px-weight-bold); color: var(--px-brand-primary); margin-bottom: var(--px-space-3); letter-spacing: 0.05em; } .px-process-step h3 { font-size: var(--px-text-xl); margin-bottom: var(--px-space-2); } .px-process-step p { color: var(--px-text-secondary); } /* --- 9. Outcomes band (light, with subtle border + brand accents) ----------- */ .px-outcomes { padding: var(--px-space-10) var(--px-space-5); background: var(--px-bg-surface); color: var(--px-text-primary); border-top: 1px solid var(--px-border-subtle); border-bottom: 1px solid var(--px-border-subtle); } .px-outcomes .px-container { max-width: var(--px-container-xl); margin: 0 auto; } .px-outcomes__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--px-space-6); margin-bottom: var(--px-space-5); } .px-outcome { text-align: center; padding: var(--px-space-4); } .px-outcome__metric { font-size: var(--px-text-5xl); font-weight: var(--px-weight-bold); background: var(--px-brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; margin-bottom: var(--px-space-2); letter-spacing: -0.02em; } .px-outcome__label { font-size: var(--px-text-sm); color: var(--px-text-secondary); } .px-outcomes__disclaimer { text-align: center; color: var(--px-text-muted); font-size: var(--px-text-xs); } /* --- 10. Included grid (service page) --------------------------------------- */ .px-included { padding: var(--px-space-12) var(--px-space-5); } .px-included__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--px-space-5); } .px-included-card { padding: var(--px-space-6); background: var(--px-bg-surface); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius-lg); } .px-included-card h3 { font-size: var(--px-text-lg); margin-bottom: var(--px-space-4); display: flex; align-items: center; gap: var(--px-space-3); } .px-included-card h3 i { color: var(--px-brand-primary); } .px-included-card ul { display: grid; gap: var(--px-space-3); } .px-included-card ul li { padding-left: var(--px-space-5); position: relative; color: var(--px-text-secondary); font-size: var(--px-text-sm); } .px-included-card ul li::before { content: '✓'; position: absolute; left: 0; color: var(--px-success); font-weight: var(--px-weight-bold); } /* --- 11. Testimonials -------------------------------------------------------- */ .px-testimonials { padding: var(--px-space-12) var(--px-space-5); background: var(--px-bg-surface); } .px-testimonials__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--px-space-5); } .px-testimonial-card { padding: var(--px-space-6); background: var(--px-bg-page); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius-lg); } .px-testimonial-card__quote { font-size: var(--px-text-base); color: var(--px-text-primary); line-height: var(--px-leading-normal); margin-bottom: var(--px-space-5); } .px-testimonial-card__person { display: flex; align-items: center; gap: var(--px-space-3); } .px-testimonial-card__person img { width: 48px; height: 48px; border-radius: var(--px-radius-full); object-fit: cover; } .px-testimonial-card__name { font-size: var(--px-text-sm); font-weight: var(--px-weight-semibold); } .px-testimonial-card__role { font-size: var(--px-text-xs); color: var(--px-text-muted); } /* --- 12. Blog strip ---------------------------------------------------------- */ .px-blog-strip { padding: var(--px-space-12) var(--px-space-5); } .px-blog-strip__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--px-space-5); } .px-blog-card { display: flex; flex-direction: column; background: var(--px-bg-surface); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius-lg); overflow: hidden; transition: all var(--px-duration) var(--px-ease-out); } .px-blog-card:hover { transform: translateY(-4px); box-shadow: var(--px-shadow-xl); } .px-blog-card__image { aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, var(--px-bg-muted) 0%, #fff 100%); display: flex; align-items: center; justify-content: center; } .px-blog-card__image img { width: 100%; height: 100%; object-fit: contain; } .px-blog-card__body { padding: var(--px-space-5); display: flex; flex-direction: column; gap: var(--px-space-3); flex: 1; } .px-blog-card__category { font-size: var(--px-text-xs); font-weight: var(--px-weight-semibold); color: var(--px-brand-primary); text-transform: uppercase; letter-spacing: 0.05em; } .px-blog-card h3 { font-size: var(--px-text-lg); margin: 0; } .px-blog-card p { font-size: var(--px-text-sm); color: var(--px-text-secondary); margin: 0; } /* --- 13. FAQ ----------------------------------------------------------------- */ .px-faq { padding: var(--px-space-12) var(--px-space-5); background: var(--px-bg-surface); } .px-faq__list { max-width: 820px; margin: 0 auto; display: grid; gap: var(--px-space-3); } .px-faq-item { background: var(--px-bg-page); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius); overflow: hidden; transition: border-color var(--px-duration); } .px-faq-item[open] { border-color: var(--px-brand-primary); } .px-faq-item summary { display: flex; justify-content: space-between; align-items: center; padding: var(--px-space-4) var(--px-space-5); cursor: pointer; font-weight: var(--px-weight-semibold); list-style: none; } .px-faq-item summary::-webkit-details-marker { display: none; } .px-faq-item__icon { width: 24px; height: 24px; border-radius: var(--px-radius-full); background: var(--px-bg-muted); display: grid; place-items: center; font-size: var(--px-text-lg); color: var(--px-brand-primary); transition: transform var(--px-duration); } .px-faq-item[open] .px-faq-item__icon { transform: rotate(45deg); } .px-faq-item__body { padding: 0 var(--px-space-5) var(--px-space-5); color: var(--px-text-secondary); line-height: var(--px-leading-normal); } .px-faq-item__body :first-child { margin-top: 0; } /* --- 14. CTA banner ---------------------------------------------------------- */ .px-cta-banner { padding: var(--px-space-12) var(--px-space-5); background: var(--px-brand-gradient); color: var(--px-white); text-align: center; } .px-cta-banner h2 { color: var(--px-white); font-size: clamp(var(--px-text-2xl), 4vw, var(--px-text-4xl)); } .px-cta-banner p { color: rgba(255,255,255,0.9); max-width: 600px; margin: 0 auto var(--px-space-6); font-size: var(--px-text-lg); } .px-cta-banner .px-btn--primary { background: var(--px-white); color: var(--px-brand-primary); } .px-cta-banner .px-btn--primary:hover { background: var(--px-gray-100); color: var(--px-brand-primary-dark); } /* --- 15. Footer -------------------------------------------------------------- */ .px-footer { background: var(--px-gray-900); color: var(--px-gray-300); position: relative; overflow: hidden; } /* Decorative gradient blobs */ .px-footer::before { content: ''; position: absolute; top: -10%; right: -5%; width: 480px; height: 480px; background: radial-gradient(circle, rgba(108,92,231,0.15), transparent 60%); pointer-events: none; } .px-footer::after { content: ''; position: absolute; bottom: -15%; left: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(0,206,201,0.10), transparent 60%); pointer-events: none; } /* --- CTA card on top of footer --- */ .px-footer__cta { max-width: var(--px-container-xl); margin: 0 auto; padding: var(--px-space-10) var(--px-space-5) 0; position: relative; z-index: 1; } .px-footer__cta-inner { background: linear-gradient(135deg, #1a2342 0%, #2d3748 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--px-radius-xl); padding: var(--px-space-8); display: grid; grid-template-columns: 1fr; gap: var(--px-space-5); align-items: center; position: relative; overflow: hidden; } .px-footer__cta-inner::before { content: ''; position: absolute; top: -80px; right: -80px; width: 240px; height: 240px; background: var(--px-brand-gradient); opacity: 0.18; border-radius: 50%; pointer-events: none; } .px-footer__cta-text { position: relative; } .px-footer__cta-eyebrow { display: inline-block; font-size: var(--px-text-xs); font-weight: var(--px-weight-bold); color: var(--px-secondary, var(--px-brand-secondary)); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--px-space-3); padding: 4px 10px; background: rgba(0, 206, 201, 0.1); border: 1px solid rgba(0, 206, 201, 0.25); border-radius: var(--px-radius-full); } .px-footer__cta-text h2 { color: var(--px-white); font-size: clamp(var(--px-text-2xl), 3vw, var(--px-text-3xl)); margin-bottom: var(--px-space-3); line-height: var(--px-leading-tight); } .px-footer__cta-text p { color: var(--px-gray-300); margin: 0; } .px-footer__cta-actions { display: flex; gap: var(--px-space-3); flex-wrap: wrap; position: relative; } .px-btn--ghost-on-dark { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: var(--px-white); } .px-btn--ghost-on-dark:hover { border-color: var(--px-white); background: rgba(255,255,255,0.05); color: var(--px-white); } @media (min-width: 900px) { .px-footer__cta-inner { grid-template-columns: 1.4fr 1fr; padding: var(--px-space-10); gap: var(--px-space-8); } } /* --- Main grid --- */ .px-footer__main { padding: var(--px-space-10) var(--px-space-5) var(--px-space-8); position: relative; z-index: 1; } .px-footer__grid { max-width: var(--px-container-xl); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: var(--px-space-8); } @media (min-width: 768px) { .px-footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--px-space-6) var(--px-space-5); } } @media (min-width: 1024px) { .px-footer__grid { grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--px-space-6); } } .px-footer__brand { max-width: 360px; } .px-footer__logo { display: inline-block; margin-bottom: var(--px-space-4); } .px-footer__logo img { filter: brightness(0) invert(1); } .px-footer__tagline { color: var(--px-gray-400); font-size: var(--px-text-sm); line-height: var(--px-leading-normal); margin: 0 0 var(--px-space-5); } .px-footer__contact { display: grid; gap: var(--px-space-3); margin-bottom: var(--px-space-5); } .px-footer__contact li { display: flex; align-items: flex-start; gap: var(--px-space-3); font-size: var(--px-text-sm); line-height: var(--px-leading-normal); } .px-footer__contact i { flex-shrink: 0; width: 28px; height: 28px; border-radius: 6px; background: rgba(255,255,255,0.06); color: var(--px-brand-secondary); display: grid; place-items: center; font-size: var(--px-text-xs); margin-top: 2px; } .px-footer__contact a { color: var(--px-gray-200); transition: color var(--px-duration); } .px-footer__contact a:hover { color: var(--px-white); } .px-footer__contact address { font-style: normal; color: var(--px-gray-300); line-height: var(--px-leading-snug); } .px-footer__heading { font-size: var(--px-text-sm); font-weight: var(--px-weight-bold); color: var(--px-white); margin: 0 0 var(--px-space-4); } .px-footer__list { display: grid; gap: 10px; } .px-footer__list a { color: var(--px-gray-400); font-size: var(--px-text-sm); transition: color var(--px-duration), padding-left var(--px-duration); } .px-footer__list a:hover { color: var(--px-white); padding-left: 4px; } /* Social icons (in brand column) */ .px-footer__social { display: flex; gap: var(--px-space-2); flex-wrap: wrap; } .px-footer__social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--px-radius-full); background: rgba(255,255,255,0.06); color: var(--px-gray-300); transition: all var(--px-duration); } .px-footer__social a:hover { background: var(--px-brand-gradient); color: var(--px-white); transform: translateY(-2px); } /* --- Bottom bar --- */ .px-footer__bottom { padding: var(--px-space-5); border-top: 1px solid rgba(255,255,255,0.08); position: relative; z-index: 1; } .px-footer__bottom-inner { max-width: var(--px-container-xl); margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--px-space-4); justify-content: space-between; align-items: center; } .px-footer__copyright { color: var(--px-gray-400); font-size: var(--px-text-xs); } .px-footer__legal { display: flex; gap: var(--px-space-5); flex-wrap: wrap; } .px-footer__legal a { color: var(--px-gray-400); font-size: var(--px-text-xs); transition: color var(--px-duration); } .px-footer__legal a:hover { color: var(--px-white); } /* --- Floating WhatsApp button --- */ .px-floating-wa { position: fixed; bottom: 20px; right: 20px; width: 56px; height: 56px; border-radius: var(--px-radius-full); background: #25d366; color: var(--px-white); display: grid; place-items: center; font-size: var(--px-text-2xl); box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4); z-index: var(--px-z-sticky); transition: all var(--px-duration); } .px-floating-wa:hover { transform: scale(1.08); color: var(--px-white); box-shadow: 0 12px 32px rgba(37, 211, 102, 0.5); } .px-floating-wa::before { content: ''; position: absolute; inset: 0; border-radius: var(--px-radius-full); background: #25d366; z-index: -1; animation: px-wa-pulse 2s ease-out infinite; } @keyframes px-wa-pulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.5); opacity: 0; } } /* --- 16. Service hero (service page) ---------------------------------------- */ .px-service-hero { padding: var(--px-space-10) 0 var(--px-space-12); background: linear-gradient(180deg, var(--px-bg-page) 0%, var(--px-bg-surface) 100%); position: relative; overflow: hidden; } .px-service-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 70% 20%, rgba(108,92,231,0.08), transparent 50%); pointer-events: none; } .px-breadcrumbs { display: flex; gap: var(--px-space-2); align-items: center; font-size: var(--px-text-sm); color: var(--px-text-muted); margin-bottom: var(--px-space-5); position: relative; z-index: 1; } .px-breadcrumbs a { color: var(--px-brand-primary); } .px-service-hero__inner { display: grid; grid-template-columns: 1fr; gap: var(--px-space-8); align-items: center; position: relative; z-index: 1; } .px-service-hero__copy h1 { font-size: clamp(var(--px-text-3xl), 5vw, var(--px-text-5xl)); margin-bottom: var(--px-space-4); } .px-service-hero__subtitle { font-size: var(--px-text-lg); color: var(--px-text-secondary); margin-bottom: var(--px-space-6); max-width: 540px; } .px-service-hero__cta { display: flex; gap: var(--px-space-3); flex-wrap: wrap; margin-bottom: var(--px-space-6); } .px-service-hero__bullets { display: grid; gap: var(--px-space-2); } .px-service-hero__bullets div { display: flex; gap: var(--px-space-2); align-items: center; font-size: var(--px-text-sm); color: var(--px-text-secondary); } .px-service-hero__bullets i { color: var(--px-success); } .px-rank-card { background: var(--px-bg-surface); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius-lg); padding: var(--px-space-6); box-shadow: var(--px-shadow-lg); } .px-rank-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--px-space-5); padding-bottom: var(--px-space-4); border-bottom: 1px solid var(--px-border-subtle); font-size: var(--px-text-sm); color: var(--px-text-muted); } .px-rank-card__delta { color: var(--px-success); font-weight: var(--px-weight-semibold); } .px-rank-card__list { display: grid; gap: var(--px-space-4); } .px-rank-card__list li { display: flex; justify-content: space-between; align-items: center; } .px-rank-card__list span { font-size: var(--px-text-sm); color: var(--px-text-secondary); } .px-rank-card__list b { font-size: var(--px-text-xl); font-weight: var(--px-weight-bold); color: var(--px-brand-primary); } @media (min-width: 992px) { .px-service-hero__inner { grid-template-columns: 1.2fr 1fr; } } /* --- 17a. About section ------------------------------------------------------ */ .px-about { padding: var(--px-space-12) var(--px-space-5); background: var(--px-bg-surface); } .px-about__grid { max-width: var(--px-container-xl); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: var(--px-space-8); align-items: center; } .px-about__copy h2 { font-size: clamp(var(--px-text-2xl), 3vw, var(--px-text-4xl)); margin-bottom: var(--px-space-4); } .px-about__copy p { font-size: var(--px-text-base); color: var(--px-text-secondary); margin-bottom: var(--px-space-4); } .px-about__copy .px-btn { margin-top: var(--px-space-4); } .px-about__visual img { border-radius: var(--px-radius-lg); box-shadow: var(--px-shadow-lg); width: 100%; height: auto; } @media (min-width: 992px) { .px-about__grid { grid-template-columns: 1.1fr 1fr; gap: var(--px-space-10); } } /* --- 17b. Counters band (light theme) --------------------------------------- */ .px-counters { padding: var(--px-space-8) var(--px-space-5); background: var(--px-bg-surface); color: var(--px-text-primary); border-top: 1px solid var(--px-border-subtle); border-bottom: 1px solid var(--px-border-subtle); } .px-counters__grid { max-width: var(--px-container-xl); margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--px-space-5); } @media (min-width: 768px) { .px-counters__grid { grid-template-columns: repeat(4, 1fr); } } .px-counter { text-align: center; padding: var(--px-space-3); } .px-counter__num { font-size: clamp(var(--px-text-3xl), 5vw, var(--px-text-5xl)); font-weight: var(--px-weight-bold); background: var(--px-brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; letter-spacing: -0.02em; } .px-counter__num span { font-size: 0.6em; vertical-align: super; } .px-counter__label { font-size: var(--px-text-sm); color: var(--px-text-secondary); margin-top: var(--px-space-2); } /* --- 17c. Generic feature grid (used by Why / Stand-out / Benefits sections) - */ .px-why, .px-stand-out, .px-benefits { padding: var(--px-space-12) var(--px-space-5); background: var(--px-bg-page); } .px-stand-out { background: var(--px-bg-surface); } .px-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--px-space-4); max-width: var(--px-container-xl); margin: 0 auto; } .px-feature-card { background: var(--px-bg-surface); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius-lg); padding: var(--px-space-5); transition: all var(--px-duration) var(--px-ease-out); } .px-feature-card:hover { transform: translateY(-2px); box-shadow: var(--px-shadow-md); border-color: var(--px-brand-primary); } .px-feature-card__icon { width: 44px; height: 44px; border-radius: var(--px-radius); background: var(--px-bg-muted); color: var(--px-brand-primary); display: grid; place-items: center; font-size: var(--px-text-lg); margin-bottom: var(--px-space-4); } .px-feature-card h3 { font-size: var(--px-text-base); font-weight: var(--px-weight-semibold); margin-bottom: var(--px-space-2); line-height: var(--px-leading-snug); } .px-feature-card p { font-size: var(--px-text-sm); color: var(--px-text-secondary); margin: 0; line-height: var(--px-leading-normal); } .px-section-cta { text-align: center; margin-top: var(--px-space-8); } /* --- 17d. Industries grid ---------------------------------------------------- */ .px-industries { padding: var(--px-space-12) var(--px-space-5); background: var(--px-bg-surface); } .px-industry-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--px-space-5); max-width: var(--px-container-xl); margin: 0 auto; } .px-industry-card { background: var(--px-bg-page); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius-lg); padding: var(--px-space-5); display: flex; flex-direction: column; transition: all var(--px-duration); } .px-industry-card:hover { transform: translateY(-2px); box-shadow: var(--px-shadow-md); } .px-industry-card__icon { width: 48px; height: 48px; border-radius: var(--px-radius); background: var(--px-brand-gradient); color: var(--px-white); display: grid; place-items: center; font-size: var(--px-text-lg); margin-bottom: var(--px-space-4); } .px-industry-card h3 { font-size: var(--px-text-lg); margin-bottom: var(--px-space-3); } .px-industry-card ul { display: grid; gap: var(--px-space-2); margin-bottom: var(--px-space-5); flex: 1; } .px-industry-card ul li { padding-left: var(--px-space-5); position: relative; font-size: var(--px-text-sm); color: var(--px-text-secondary); line-height: var(--px-leading-snug); } .px-industry-card ul li::before { content: '✓'; position: absolute; left: 0; color: var(--px-success); font-weight: var(--px-weight-bold); } .px-industry-card .px-btn { align-self: flex-start; } /* --- 17e. Solutions group (Websites / SEO Rank / ROI thumbnails) ------------- */ .px-solutions { padding: var(--px-space-12) var(--px-space-5); background: var(--px-bg-page); } .px-solutions__group { max-width: var(--px-container-xl); margin: 0 auto var(--px-space-8); } .px-solutions__head { text-align: center; margin-bottom: var(--px-space-5); } .px-solutions__head p { color: var(--px-text-secondary); margin: var(--px-space-2) 0 0; } .px-thumb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--px-space-4); } .px-thumb-card { display: block; background: var(--px-bg-surface); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius); overflow: hidden; transition: all var(--px-duration); } .px-thumb-card:hover { transform: translateY(-2px); box-shadow: var(--px-shadow-md); } .px-thumb-card img { width: 100%; height: 180px; object-fit: cover; display: block; } .px-thumb-card__caption { padding: var(--px-space-3); font-size: var(--px-text-sm); } .px-thumb-card__caption strong { display: block; color: var(--px-text-primary); margin-bottom: var(--px-space-1); } .px-thumb-card__caption p { margin: 0; color: var(--px-text-muted); font-size: var(--px-text-xs); } /* --- 17f. Awards ------------------------------------------------------------- */ .px-awards { padding: var(--px-space-10) var(--px-space-5); background: var(--px-bg-surface); } .px-awards__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--px-space-6); max-width: var(--px-container-xl); margin: 0 auto; } .px-awards__logo { padding: var(--px-space-3); } .px-awards__logo img { height: 64px; width: auto; max-width: 140px; object-fit: contain; opacity: 0.85; transition: opacity var(--px-duration); } .px-awards__logo:hover img { opacity: 1; } /* --- 17g. Technology grid ---------------------------------------------------- */ .px-tech { padding: var(--px-space-10) var(--px-space-5); background: var(--px-bg-page); } .px-tech__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--px-space-4); max-width: var(--px-container-xl); margin: 0 auto; } .px-tech__item { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--px-space-3); background: var(--px-bg-surface); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius); transition: all var(--px-duration); } .px-tech__item:hover { transform: translateY(-2px); box-shadow: var(--px-shadow); border-color: var(--px-brand-primary); } .px-tech__item img { width: 48px; height: 48px; object-fit: contain; margin-bottom: var(--px-space-2); } .px-tech__item p { font-size: var(--px-text-xs); color: var(--px-text-muted); margin: 0; } /* --- 17h. Tools / sponsors logo strip ---------------------------------------- */ .px-tools { padding: var(--px-space-8) var(--px-space-5); background: var(--px-bg-surface); border-top: 1px solid var(--px-border-subtle); border-bottom: 1px solid var(--px-border-subtle); } .px-section-head--small h3 { font-size: var(--px-text-base); font-weight: var(--px-weight-semibold); color: var(--px-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 var(--px-space-5); text-align: center; } .px-tools__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--px-space-6); max-width: var(--px-container-xl); margin: 0 auto; opacity: 0.7; } .px-tools__logo img { height: 40px; width: auto; max-width: 120px; object-fit: contain; filter: grayscale(100%); transition: filter var(--px-duration); } .px-tools__logo:hover img { filter: grayscale(0%); } /* --- 17i. Products (sister brands) ------------------------------------------ */ .px-products { padding: var(--px-space-12) var(--px-space-5); background: var(--px-bg-page); } .px-products__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--px-space-5); max-width: var(--px-container-xl); margin: 0 auto; } .px-product-card { background: var(--px-bg-surface); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius-lg); padding: var(--px-space-5); transition: all var(--px-duration); display: block; color: inherit; } .px-product-card:hover { transform: translateY(-3px); box-shadow: var(--px-shadow-lg); border-color: var(--px-brand-primary); } .px-product-card img { height: 40px; width: auto; max-width: 160px; object-fit: contain; margin-bottom: var(--px-space-4); } .px-product-card h3 { font-size: var(--px-text-lg); font-weight: var(--px-weight-bold); margin-bottom: var(--px-space-2); } .px-product-card p { font-size: var(--px-text-sm); color: var(--px-text-secondary); margin-bottom: var(--px-space-4); } /* --- 17j. Cities --------------------------------------------------------- */ .px-cities { padding: var(--px-space-12) var(--px-space-5); background: var(--px-bg-surface); } .px-cities__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--px-space-4); max-width: 880px; margin: 0 auto; } @media (min-width: 768px) { .px-cities__grid { grid-template-columns: repeat(5, 1fr); } } @media (min-width: 1024px) { .px-cities__grid { grid-template-columns: repeat(9, 1fr); } } .px-city { display: flex; flex-direction: column; align-items: center; gap: var(--px-space-2); transition: transform var(--px-duration); } .px-city:hover { transform: translateY(-2px); color: var(--px-brand-primary); } .px-city img { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; border: 2px solid var(--px-border-subtle); transition: border-color var(--px-duration); } .px-city:hover img { border-color: var(--px-brand-primary); } .px-city p { margin: 0; font-size: var(--px-text-sm); font-weight: var(--px-weight-medium); color: var(--px-text-primary); } /* --- 17k. Contact ------------------------------------------------------------ */ .px-contact { padding: var(--px-space-12) var(--px-space-5); background: var(--px-bg-page); } .px-contact__grid { max-width: var(--px-container-xl); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: var(--px-space-8); align-items: start; } @media (min-width: 992px) { .px-contact__grid { grid-template-columns: 1fr 1.2fr; } } .px-contact__info h2 { font-size: clamp(var(--px-text-2xl), 3vw, var(--px-text-4xl)); margin-bottom: var(--px-space-4); } .px-contact__rows { display: grid; gap: var(--px-space-4); margin-top: var(--px-space-6); } .px-contact__row { display: grid; grid-template-columns: 80px 1fr; gap: var(--px-space-4); align-items: center; padding: var(--px-space-3) 0; border-top: 1px solid var(--px-border-subtle); } .px-contact__label { font-size: var(--px-text-xs); font-weight: var(--px-weight-semibold); color: var(--px-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .px-contact__value { color: var(--px-text-primary); font-weight: var(--px-weight-medium); display: inline-flex; align-items: center; gap: var(--px-space-2); } .px-contact__value:hover { color: var(--px-brand-primary); } .px-contact__reviews { display: flex; flex-wrap: wrap; gap: var(--px-space-3); align-items: center; } .px-contact__form { background: var(--px-bg-surface); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius-lg); padding: var(--px-space-6); box-shadow: var(--px-shadow); } .px-contact__form h3 { font-size: var(--px-text-lg); margin-bottom: var(--px-space-4); } .px-contact__form input, .px-contact__form textarea, .px-contact__form select { width: 100%; padding: var(--px-space-3); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius); background: var(--px-bg-page); font: inherit; margin-bottom: var(--px-space-3); } .px-contact__form input:focus, .px-contact__form textarea:focus, .px-contact__form select:focus { outline: 0; border-color: var(--px-brand-primary); box-shadow: 0 0 0 3px rgba(108,92,231,0.12); } /* --- 18. Generic page-hero (about/contact/career/blogs/custom-page/industry/city) -- */ .px-page-hero { padding: var(--px-space-8) var(--px-space-5) var(--px-space-10); background: var(--px-bg-page); position: relative; overflow: hidden; } .px-page-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(40% 35% at 15% 0%, rgba(108,92,231,0.10), transparent 60%), radial-gradient(30% 30% at 85% 25%, rgba(0,206,201,0.09), transparent 60%); pointer-events: none; } .px-page-hero .px-container { position: relative; } .px-page-hero__inner { display: grid; grid-template-columns: 1fr; gap: var(--px-space-8); align-items: center; } @media (min-width: 992px) { .px-page-hero__inner { grid-template-columns: 1.1fr 1fr; gap: var(--px-space-10); } } .px-page-hero__copy h1 { font-size: clamp(var(--px-text-3xl), 5vw, var(--px-text-5xl)); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: var(--px-space-4); } .px-page-hero__lead { font-size: var(--px-text-lg); color: var(--px-text-secondary); max-width: 580px; margin-bottom: var(--px-space-5); } .px-page-hero__lead :first-child { margin-top: 0; } .px-page-hero__lead :last-child { margin-bottom: 0; } .px-page-hero__cta { display: flex; gap: var(--px-space-3); flex-wrap: wrap; } .px-page-hero__center { max-width: 720px; margin: 0 auto; text-align: center; } .px-page-hero__center h1 { font-size: clamp(var(--px-text-3xl), 5vw, var(--px-text-5xl)); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: var(--px-space-4); } .px-page-hero__visual img { border-radius: var(--px-radius-lg); box-shadow: var(--px-shadow-lg); } .px-page-hero__chips { display: flex; flex-wrap: wrap; gap: var(--px-space-2); margin-top: var(--px-space-6); } .px-page-hero__chips li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: var(--px-bg-surface); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius-full); font-size: var(--px-text-xs); color: var(--px-text-secondary); } .px-page-hero__chips i { color: var(--px-brand-primary); font-size: 10px; } /* Newsletter (in blogs hero) */ .px-newsletter { background: linear-gradient(135deg, var(--px-bg-surface) 0%, var(--px-bg-page) 100%); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius-xl); padding: var(--px-space-6); box-shadow: var(--px-shadow); } .px-newsletter h2 { font-size: var(--px-text-xl); margin-bottom: var(--px-space-2); } .px-newsletter p { font-size: var(--px-text-sm); color: var(--px-text-muted); margin: 0 0 var(--px-space-4); } .px-newsletter__form { display: flex; gap: var(--px-space-2); } .px-newsletter__input { flex: 1; padding: 12px var(--px-space-3); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius-full); font: inherit; } .px-newsletter__input:focus { outline: 0; border-color: var(--px-brand-primary); } .px-newsletter__msg { color: var(--px-success); font-size: var(--px-text-sm); margin-top: var(--px-space-3); } /* --- 19. About page sections ------------------------------------------------- */ .px-why-us { padding: var(--px-space-12) var(--px-space-5); background: var(--px-bg-surface); } .px-why-us__grid { max-width: var(--px-container-xl); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: var(--px-space-8); align-items: center; } @media (min-width: 992px) { .px-why-us__grid { grid-template-columns: 1.2fr 1fr; gap: var(--px-space-10); } } .px-why-us__sub { color: var(--px-brand-primary); font-size: var(--px-text-lg); font-weight: var(--px-weight-semibold); margin-bottom: var(--px-space-4); } .px-why-us__body { color: var(--px-text-secondary); } .px-why-us__body p, .px-why-us__body ul { margin-bottom: var(--px-space-4); } .px-why-us__visual img { border-radius: var(--px-radius-lg); width: 100%; height: auto; } .px-why-us__counters { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--px-space-4); margin-top: var(--px-space-8); padding-top: var(--px-space-8); border-top: 1px solid var(--px-border-subtle); } @media (min-width: 768px) { .px-why-us__counters { grid-template-columns: repeat(4, 1fr); } } .px-counter--light .px-counter__num { background: var(--px-brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .px-counter--light .px-counter__label { color: var(--px-text-muted); } /* Mission / Vision / Commitment / Core Values ────────────────────────────────────────────────────────────────── 2×2 grid on desktop (4 cards × ~580px reads beautifully on a 1280 viewport), single column on mobile. Was 4-across, which crammed the body copy into a 6-words-per-line strip. */ .px-mission { padding: var(--px-space-12) var(--px-space-5); background: var(--px-bg-page); } .px-mission__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 22px; max-width: 1200px; margin: 0 auto; } @media (max-width: 900px) { .px-mission__grid { grid-template-columns: 1fr; max-width: 640px; } } .px-mission-card { background: var(--px-bg-surface); border: 1px solid var(--px-border-subtle); border-radius: 18px; padding: 32px 30px 28px; transition: transform .15s ease, box-shadow .25s ease, border-color .15s ease; position: relative; overflow: hidden; } .px-mission-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--px-brand-primary) 0%, #06b6d4 100%); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .px-mission-card:hover { transform: translateY(-4px); box-shadow: 0 28px 48px -22px rgba(15, 23, 42, .14); border-color: rgba(91, 61, 245, .35); } .px-mission-card:hover::before { transform: scaleX(1); } .px-mission-card__icon { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, var(--px-brand-primary) 0%, #06b6d4 100%); color: var(--px-white); display: grid; place-items: center; font-size: 1.4rem; margin-bottom: 22px; box-shadow: 0 10px 24px -8px rgba(91, 61, 245, .45); } .px-mission-card h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em; color: var(--px-text-primary); margin: 0 0 14px; } .px-mission-card__body { font-size: .95rem; color: var(--px-text-secondary); line-height: 1.65; } .px-mission-card__body p { margin: 0 0 .9em; } .px-mission-card__body p:last-child { margin-bottom: 0; } .px-mission-card__body br + br { display: none; } /* kill stacked-break gaps from pasted content */ .px-transparency { padding: var(--px-space-12) var(--px-space-5); background: var(--px-bg-surface); } .px-career-cta { padding: var(--px-space-12) var(--px-space-5); background: var(--px-bg-page); } .px-career-cta__inner { max-width: var(--px-container-xl); margin: 0 auto; padding: var(--px-space-8); background: linear-gradient(135deg, var(--px-gray-900) 0%, var(--px-gray-800) 100%); border-radius: var(--px-radius-xl); display: grid; grid-template-columns: 1fr; gap: var(--px-space-6); align-items: center; color: var(--px-white); position: relative; overflow: hidden; } .px-career-cta__inner::before { content: ''; position: absolute; top: -100px; right: -100px; width: 300px; height: 300px; background: var(--px-brand-gradient); opacity: 0.18; border-radius: 50%; } .px-career-cta__copy { position: relative; } .px-career-cta__copy h2 { color: var(--px-white); margin-bottom: var(--px-space-3); } .px-career-cta__copy p { color: var(--px-gray-300); margin-bottom: var(--px-space-5); } .px-career-cta__visual img { border-radius: var(--px-radius-lg); } @media (min-width: 768px) { .px-career-cta__inner { grid-template-columns: 1.5fr 1fr; padding: var(--px-space-10); } } /* --- 20. Career / jobs ------------------------------------------------------- */ .px-culture { padding: var(--px-space-12) var(--px-space-5); background: var(--px-bg-surface); } .px-jobs { padding: var(--px-space-12) var(--px-space-5); background: var(--px-bg-page); } .px-jobs__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--px-space-5); max-width: var(--px-container-xl); margin: 0 auto; } .px-job-card { background: var(--px-bg-surface); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius-lg); padding: var(--px-space-5); display: flex; flex-direction: column; transition: all var(--px-duration); } .px-job-card:hover { border-color: var(--px-brand-primary); box-shadow: var(--px-shadow-md); transform: translateY(-2px); } .px-job-card__head { display: flex; justify-content: space-between; align-items: start; gap: var(--px-space-3); margin-bottom: var(--px-space-4); } .px-job-card__head h3 { font-size: var(--px-text-lg); margin: 0; } .px-job-card__badge { background: var(--px-bg-muted); color: var(--px-brand-primary); font-size: var(--px-text-xs); padding: 4px 10px; border-radius: var(--px-radius-full); font-weight: var(--px-weight-semibold); white-space: nowrap; flex-shrink: 0; } .px-job-card__meta { display: grid; gap: var(--px-space-3); margin: 0 0 var(--px-space-5); padding-top: var(--px-space-4); border-top: 1px solid var(--px-border-subtle); flex: 1; } .px-job-card__meta li { display: flex; justify-content: space-between; align-items: center; gap: var(--px-space-3); font-size: var(--px-text-sm); } .px-job-card__meta-label { color: var(--px-text-muted); font-weight: var(--px-weight-medium); } .px-job-card__meta li > :last-child { color: var(--px-text-primary); text-align: right; } .px-job-card__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--px-space-3); padding-top: var(--px-space-4); border-top: 1px solid var(--px-border-subtle); } .px-job-card__posted { font-size: var(--px-text-xs); color: var(--px-text-muted); } .px-jobs__empty { text-align: center; padding: var(--px-space-10); background: var(--px-bg-surface); border-radius: var(--px-radius-lg); } /* --- 21. Blog list + pagination --------------------------------------------- */ .px-blogs { padding: var(--px-space-10) var(--px-space-5); } .px-blogs__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--px-space-5); max-width: var(--px-container-xl); margin: 0 auto; } .px-blog-card__meta { display: flex; gap: var(--px-space-4); font-size: var(--px-text-xs); color: var(--px-text-muted); margin: 0; } .px-blog-card__meta i { margin-right: 4px; } .px-blogs__pagination { max-width: var(--px-container-xl); margin: var(--px-space-8) auto 0; display: flex; justify-content: center; } .px-blogs__pagination .pagination, .px-blogs__pagination ul { display: flex; gap: var(--px-space-2); list-style: none; padding: 0; } .px-blogs__pagination .page-item .page-link, .px-blogs__pagination ul a, .px-blogs__pagination ul span { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 var(--px-space-3); border-radius: var(--px-radius); background: var(--px-bg-surface); border: 1px solid var(--px-border-subtle); color: var(--px-text-primary); font-size: var(--px-text-sm); font-weight: var(--px-weight-medium); transition: all var(--px-duration); } .px-blogs__pagination .page-item.active .page-link { background: var(--px-brand-gradient); color: var(--px-white); border-color: transparent; } .px-blogs__pagination .page-link:hover, .px-blogs__pagination ul a:hover { border-color: var(--px-brand-primary); color: var(--px-brand-primary); } /* --- 22. Blog detail (article + sidebar) ------------------------------------ */ .px-container--narrow { max-width: 920px !important; } .px-article-header { padding: var(--px-space-8) var(--px-space-5) var(--px-space-6); background: var(--px-bg-page); } .px-article-header__category { display: inline-block; background: var(--px-bg-muted); color: var(--px-brand-primary); font-size: var(--px-text-xs); font-weight: var(--px-weight-semibold); padding: 4px 12px; border-radius: var(--px-radius-full); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--px-space-4); } .px-article-header__title { font-size: clamp(var(--px-text-3xl), 5vw, var(--px-text-5xl)); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: var(--px-space-4); } .px-article-header__meta { display: flex; flex-wrap: wrap; gap: var(--px-space-5); font-size: var(--px-text-sm); color: var(--px-text-muted); } .px-article-header__meta i { margin-right: 6px; } .px-article { padding: var(--px-space-6) var(--px-space-5) var(--px-space-12); background: var(--px-bg-page); } .px-article__layout { display: grid; grid-template-columns: 1fr; gap: var(--px-space-8); max-width: var(--px-container-xl); margin: 0 auto; } @media (min-width: 992px) { .px-article__layout { grid-template-columns: minmax(0, 720px) 320px; gap: var(--px-space-8); justify-content: center; } } .px-article__hero-image { margin: 0 0 var(--px-space-6); } .px-article__hero-image img { border-radius: var(--px-radius-lg); width: 100%; height: auto; } .px-article__prose { font-size: var(--px-text-base); line-height: var(--px-leading-normal); color: var(--px-text-primary); } .px-article__prose h2 { font-size: var(--px-text-2xl); margin: var(--px-space-6) 0 var(--px-space-3); line-height: 1.2; } .px-article__prose h3 { font-size: var(--px-text-xl); margin: var(--px-space-5) 0 var(--px-space-3); } .px-article__prose p { margin-bottom: var(--px-space-4); color: var(--px-text-secondary); } .px-article__prose ul, .px-article__prose ol { padding-left: var(--px-space-5); margin-bottom: var(--px-space-4); list-style: disc; } .px-article__prose ol { list-style: decimal; } .px-article__prose li { margin-bottom: var(--px-space-2); color: var(--px-text-secondary); } .px-article__prose img { max-width: 100%; height: auto; border-radius: var(--px-radius); margin: var(--px-space-4) 0; } .px-article__prose blockquote { border-left: 3px solid var(--px-brand-primary); padding: var(--px-space-3) var(--px-space-4); background: var(--px-bg-muted); margin: var(--px-space-4) 0; border-radius: var(--px-radius); } .px-article__prose a { color: var(--px-brand-primary); text-decoration: underline; text-underline-offset: 2px; } .px-article__share { margin: var(--px-space-8) 0 var(--px-space-5); padding: var(--px-space-4); background: var(--px-bg-surface); border-radius: var(--px-radius); display: flex; align-items: center; gap: var(--px-space-4); flex-wrap: wrap; } .px-article__share span { font-weight: var(--px-weight-semibold); } .px-article__share ul { display: flex; gap: var(--px-space-2); } .px-article__share a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--px-radius-full); background: var(--px-bg-muted); color: var(--px-text-secondary); transition: all var(--px-duration); } .px-article__share a:hover { background: var(--px-brand-gradient); color: var(--px-white); transform: translateY(-2px); } .px-article__back { margin-top: var(--px-space-5); } .px-article__sidebar { display: grid; gap: var(--px-space-4); } .px-sidebar-card { background: var(--px-bg-surface); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius-lg); padding: var(--px-space-5); } .px-sidebar-card h3 { font-size: var(--px-text-base); margin-bottom: var(--px-space-4); } .px-sidebar-list { display: grid; gap: var(--px-space-3); } .px-sidebar-item { display: flex; gap: var(--px-space-3); align-items: start; transition: opacity var(--px-duration); } .px-sidebar-item:hover { opacity: 0.85; } .px-sidebar-item img { width: 64px; height: 48px; object-fit: cover; border-radius: var(--px-radius-sm); flex-shrink: 0; } .px-sidebar-date { display: block; font-size: var(--px-text-xs); color: var(--px-text-muted); margin-bottom: 2px; } .px-sidebar-title { font-size: var(--px-text-sm); color: var(--px-text-primary); line-height: var(--px-leading-snug); } .px-sidebar-categories { display: grid; gap: var(--px-space-2); } .px-sidebar-categories a { display: flex; justify-content: space-between; padding: 8px 0; font-size: var(--px-text-sm); color: var(--px-text-secondary); transition: color var(--px-duration); } .px-sidebar-categories a:hover { color: var(--px-brand-primary); } .px-sidebar-count { background: var(--px-bg-muted); color: var(--px-text-muted); padding: 2px 8px; border-radius: var(--px-radius-full); font-size: var(--px-text-xs); font-weight: var(--px-weight-semibold); } .px-sidebar-card--cta { background: var(--px-brand-gradient); color: var(--px-white); } .px-sidebar-card--cta h3, .px-sidebar-card--cta p { color: var(--px-white); } .px-sidebar-card--cta p { font-size: var(--px-text-sm); margin-bottom: var(--px-space-3); } .px-sidebar-card--cta .px-btn { background: var(--px-white); color: var(--px-brand-primary); } /* --- 23. Custom-page (privacy/terms/refund) prose --------------------------- */ .px-prose-page { padding: var(--px-space-8) var(--px-space-5) var(--px-space-12); background: var(--px-bg-page); } .px-prose { font-size: var(--px-text-base); color: var(--px-text-primary); line-height: var(--px-leading-normal); } .px-prose h2, .px-prose h3, .px-prose h4 { line-height: 1.2; margin: var(--px-space-5) 0 var(--px-space-3); } .px-prose h2 { font-size: var(--px-text-2xl); } .px-prose h3 { font-size: var(--px-text-xl); } .px-prose p { margin-bottom: var(--px-space-4); color: var(--px-text-secondary); } .px-prose ul, .px-prose ol { padding-left: var(--px-space-5); margin-bottom: var(--px-space-4); list-style: disc; } .px-prose ol { list-style: decimal; } .px-prose li { margin-bottom: var(--px-space-2); color: var(--px-text-secondary); } .px-prose a { color: var(--px-brand-primary); text-decoration: underline; } .px-prose-page__nav { display: flex; gap: var(--px-space-3); flex-wrap: wrap; padding-top: var(--px-space-6); margin-top: var(--px-space-8); border-top: 1px solid var(--px-border-subtle); } .px-prose-page__link { padding: 8px var(--px-space-3); background: var(--px-bg-surface); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius-full); font-size: var(--px-text-sm); color: var(--px-text-secondary); transition: all var(--px-duration); } .px-prose-page__link:hover { border-color: var(--px-brand-primary); color: var(--px-brand-primary); } /* --- 24. Service hero icon-card (when no per-page visual exists) ------------ */ .px-service-hero__icon-card { background: var(--px-bg-surface); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius-xl); padding: var(--px-space-6); text-align: center; box-shadow: var(--px-shadow-lg); } .px-service-hero__big-icon { width: 80px; height: 80px; margin: 0 auto var(--px-space-4); border-radius: var(--px-radius-lg); background: var(--px-brand-gradient); color: var(--px-white); display: grid; place-items: center; font-size: 36px; } .px-service-hero__icon-card h3 { font-size: var(--px-text-lg); margin-bottom: var(--px-space-4); } .px-service-hero__stats { display: grid; gap: var(--px-space-3); padding-top: var(--px-space-4); border-top: 1px solid var(--px-border-subtle); } .px-service-hero__stats li { display: flex; justify-content: space-between; align-items: baseline; } .px-service-hero__stats strong { font-size: var(--px-text-xl); font-weight: var(--px-weight-bold); color: var(--px-brand-primary); } .px-service-hero__stats span { font-size: var(--px-text-sm); color: var(--px-text-muted); } /* --- 25. Location / Map ------------------------------------------------------ */ .px-location { padding: var(--px-space-12) var(--px-space-5); background: var(--px-bg-page); } .px-location__map { max-width: var(--px-container-xl); margin: 0 auto; border-radius: var(--px-radius-lg); overflow: hidden; box-shadow: var(--px-shadow); } .px-location__map iframe { display: block; width: 100%; } /* --- 26. Sub-section header variant ------------------------------------------- */ .px-section-head--small { margin-bottom: var(--px-space-5); } /* --- 27. Service hero with side-by-side form (SEO-style hero) ---------------- */ .px-svc-hero { padding: var(--px-space-10) var(--px-space-5); background: var(--px-bg-page); color: var(--px-text-primary); position: relative; overflow: hidden; } /* Soft gradient mesh + dot grid (mirrors the home hero treatment) */ .px-svc-hero::before { content: ''; position: absolute; inset: -10% -5%; background: radial-gradient(40% 40% at 12% 8%, rgba(108,92,231,0.18), transparent 60%), radial-gradient(35% 35% at 88% 18%, rgba(0,206,201,0.16), transparent 60%), radial-gradient(45% 45% at 78% 92%, rgba(108,92,231,0.10), transparent 60%); pointer-events: none; z-index: 0; } .px-svc-hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(15, 23, 42, 0.08) 1px, transparent 1px); background-size: 22px 22px; mask-image: radial-gradient(circle at 50% 50%, black 30%, transparent 75%); -webkit-mask-image: radial-gradient(circle at 50% 50%, black 30%, transparent 75%); opacity: 0.45; pointer-events: none; z-index: 0; } .px-svc-hero .px-container { position: relative; z-index: 1; } .px-breadcrumbs--on-dark { color: var(--px-text-muted); margin-bottom: var(--px-space-5); } .px-breadcrumbs--on-dark a { color: var(--px-brand-primary); } .px-breadcrumbs--on-dark span[aria-current] { color: var(--px-text-secondary); } .px-svc-hero__inner { display: grid; grid-template-columns: 1fr; gap: var(--px-space-8); align-items: start; } @media (min-width: 992px) { .px-svc-hero__inner { grid-template-columns: 1.2fr 1fr; gap: var(--px-space-10); } } .px-eyebrow--bright { color: var(--px-brand-primary); } .px-svc-hero__title { color: var(--px-text-primary); font-size: clamp(var(--px-text-3xl), 5vw, var(--px-text-5xl)); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: var(--px-space-4); } .px-svc-hero__copy p { color: var(--px-text-secondary); font-size: var(--px-text-base); margin-bottom: var(--px-space-4); } .px-svc-hero__copy b { color: var(--px-text-primary); font-weight: var(--px-weight-semibold); } .px-svc-hero__bullets { display: grid; gap: var(--px-space-2); margin-top: var(--px-space-5); } .px-svc-hero__bullets li { display: flex; align-items: center; gap: var(--px-space-2); color: var(--px-text-secondary); font-size: var(--px-text-sm); } .px-svc-hero__bullets i { color: var(--px-success); } /* Hero form card (white card on dark background) */ .px-form-card { background: var(--px-bg-surface); border-radius: var(--px-radius-xl); padding: var(--px-space-6); box-shadow: 0 24px 50px -16px rgba(0,0,0,0.4), 0 4px 12px -4px rgba(0,0,0,0.2); color: var(--px-text-primary); } .px-form-card h3 { font-size: var(--px-text-xl); margin-bottom: var(--px-space-4); color: var(--px-text-primary); } .px-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--px-space-3); margin-bottom: var(--px-space-3); } .px-form-row--full { display: block; margin-bottom: var(--px-space-3); } @media (max-width: 540px) { .px-form-row { grid-template-columns: 1fr; } } .px-form-card label { display: block; font-size: var(--px-text-xs); } .px-form-card label > span { display: block; font-size: var(--px-text-xs); font-weight: var(--px-weight-semibold); color: var(--px-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; } .px-form-card input, .px-form-card select, .px-form-card textarea { width: 100%; padding: 10px var(--px-space-3); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius); font: inherit; font-size: var(--px-text-sm); background: var(--px-bg-page); color: var(--px-text-primary); } .px-form-card input:focus, .px-form-card select:focus, .px-form-card textarea:focus { outline: 0; border-color: var(--px-brand-primary); box-shadow: 0 0 0 3px rgba(108,92,231,0.12); } .px-form-msg { color: var(--px-success); font-size: var(--px-text-sm); min-height: 1.5em; margin-bottom: var(--px-space-2); } .px-btn--block { width: 100%; justify-content: center; } .px-form-trust { font-size: var(--px-text-xs); color: var(--px-text-muted); margin-top: var(--px-space-3); display: flex; align-items: center; gap: 6px; } /* --- 28. Service about (split image/text section) --------------------------- */ .px-svc-about { padding: var(--px-space-12) var(--px-space-5); background: var(--px-bg-surface); } .px-svc-about--alt { background: var(--px-bg-page); } .px-svc-about__grid { max-width: var(--px-container-xl); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: var(--px-space-8); align-items: center; } @media (min-width: 992px) { .px-svc-about__grid { grid-template-columns: 1.2fr 1fr; gap: var(--px-space-10); } } .px-svc-about--alt .px-svc-about__grid { grid-template-columns: 1fr 1.2fr; } .px-svc-about__copy h2 { font-size: clamp(var(--px-text-2xl), 4vw, var(--px-text-4xl)); margin-bottom: var(--px-space-4); line-height: 1.2; } .px-svc-about__copy p { font-size: var(--px-text-base); color: var(--px-text-secondary); margin-bottom: var(--px-space-4); } .px-svc-about__visual img { border-radius: var(--px-radius-lg); box-shadow: var(--px-shadow-lg); width: 100%; height: auto; } /* Reasons-tile grid — used on city pages, service pages, thank-you, etc. Single rule supports two HTML shapes: 1.

Title: Description

— title + body 2.

Plain bullet text

— single line The / child is promoted to block-level so the card reads as "Title \n Description" rather than one long sentence. */ .px-checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; padding: 0; list-style: none; margin-top: var(--px-space-5); } .px-checklist li { position: relative; display: block; padding: 22px 22px 22px 72px; background: var(--px-bg-surface); border: 1px solid var(--px-border-subtle); border-radius: 16px; font-size: 0.92rem; line-height: 1.55; color: var(--px-text-secondary); font-weight: var(--px-weight-regular); box-shadow: 0 1px 2px rgba(15, 23, 42, .03); transition: transform .15s ease, box-shadow .25s ease, border-color .15s ease; } .px-checklist li:hover { transform: translateY(-3px); box-shadow: 0 18px 32px -16px rgba(15, 23, 42, .14); border-color: var(--px-brand-primary); } .px-checklist li::before { content: '✓'; position: absolute; top: 22px; left: 22px; width: 34px; height: 34px; border-radius: 10px; background: var(--px-brand-gradient); color: var(--px-white); display: grid; place-items: center; font-size: 1rem; font-weight: var(--px-weight-bold); box-shadow: 0 6px 14px -6px rgba(91, 61, 245, .45); } /* Promote inline / to a card-title — works without changing any HTML. */ .px-checklist li b, .px-checklist li strong { display: block; color: var(--px-text-primary); font-size: 1rem; font-weight: var(--px-weight-bold); margin-bottom: 4px; letter-spacing: -.01em; line-height: 1.3; } @media (max-width: 600px) { .px-checklist { grid-template-columns: 1fr; } .px-checklist li { padding: 18px 18px 18px 64px; } } /* --- 28b. Helpers for service / city body content --- */ .px-list-disc { margin-top: var(--px-space-3); padding-left: var(--px-space-5); list-style: disc; } .px-list-disc li { color: var(--px-text-secondary); font-size: var(--px-text-sm); line-height: var(--px-leading-normal); margin-bottom: var(--px-space-2); } .px-list-disc li b { color: var(--px-text-primary); } .px-testimonial-card__avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--px-brand-gradient); color: var(--px-white); display: grid; place-items: center; font-size: var(--px-text-base); flex-shrink: 0; } /* --- 29. Why Proofox stat tiles ---------------------------------------------- */ .px-why-proofox { padding: var(--px-space-12) var(--px-space-5); background: var(--px-bg-surface); } .px-why-proofox__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--px-space-4); max-width: var(--px-container-xl); margin: 0 auto; } @media (min-width: 768px) { .px-why-proofox__grid { grid-template-columns: repeat(4, 1fr); } } .px-stat-tile { background: var(--px-bg-page); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius-lg); padding: var(--px-space-5); text-align: center; transition: all var(--px-duration); } .px-stat-tile:hover { transform: translateY(-3px); box-shadow: var(--px-shadow-md); border-color: var(--px-brand-primary); } .px-stat-tile__icon { width: 56px; height: 56px; margin: 0 auto var(--px-space-3); border-radius: var(--px-radius); background: var(--px-brand-gradient); color: var(--px-white); display: grid; place-items: center; font-size: var(--px-text-xl); } .px-stat-tile h3 { font-size: var(--px-text-lg); font-weight: var(--px-weight-bold); margin-bottom: var(--px-space-2); } .px-stat-tile p { font-size: var(--px-text-sm); color: var(--px-text-secondary); margin: 0; } /* ============================================================================= v2 OVERRIDES FOR LEGACY v1 CLASSES ----------------------------------------------------------------------------- When a v1 service / city / industry page renders with the v2 layout, its markup still uses v1 classes (.course-sec, .dc-box, .box-course, .bx-head, .ree-card-img, .stats-box, .city-link, .benefits-bx, etc.). Instead of hand-rewriting 40+ blades, we restyle those classes here so v1 content is served unchanged but renders in v2 design language. Scoped to `.px-body` so v1 admin / login / etc. is not affected. ============================================================================= */ /* --- v1 sections → light backgrounds matching home hero --- */ .px-body .home-about, .px-body .home-about.dark-sec { padding: var(--px-space-12) var(--px-space-5); background: var(--px-bg-page); color: var(--px-text-primary); position: relative; overflow: hidden; } .px-body .home-about.dark-sec::before { content: ''; position: absolute; inset: -10% -5%; background: radial-gradient(40% 40% at 12% 8%, rgba(108,92,231,0.16), transparent 60%), radial-gradient(35% 35% at 88% 18%, rgba(0,206,201,0.14), transparent 60%); pointer-events: none; z-index: 0; } .px-body .home-about > .container { position: relative; z-index: 1; } .px-body .home-about.dark-sec h1, .px-body .home-about.dark-sec h2, .px-body .home-about.dark-sec h3 { color: var(--px-text-primary); } .px-body .home-about .text-white, .px-body .home-about .text-white * { color: var(--px-text-secondary) !important; } .px-body .home-about .text-white b { color: var(--px-text-primary) !important; } .px-body .home-about .sub-heading { color: var(--px-brand-primary); font-weight: var(--px-weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; } .px-body .home-about h1 { font-size: clamp(var(--px-text-3xl), 5vw, var(--px-text-5xl)); line-height: 1.1; margin-bottom: var(--px-space-4); color: var(--px-text-primary); } .px-body .course-sec, .px-body .ser-d, .px-body .sec-pad { padding: var(--px-space-10) var(--px-space-5); background: var(--px-bg-page); } .px-body .sec-bg, .px-body .reebgd, .px-body .r-bg-x, .px-body .r-bg-c { background: var(--px-bg-surface); } .px-body .Digital-Marketing-Solutions { padding: var(--px-space-12) var(--px-space-5); } .px-body .home-partners-block { padding: var(--px-space-10) var(--px-space-5); background: var(--px-bg-surface); } /* --- v1 section headings --- */ .px-body .section-heading { margin-bottom: var(--px-space-6); } .px-body .section-heading h2, .px-body .ser-r-head { font-size: clamp(var(--px-text-2xl), 4vw, var(--px-text-4xl)); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: var(--px-space-3); } .px-body .section-heading h2 span, .px-body .ser-r-head span { background: var(--px-brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .px-body .section-heading p, .px-body .sec-heading p { color: var(--px-text-secondary); font-size: var(--px-text-base); } .px-body .section-heading > img { margin-bottom: var(--px-space-3); } .px-body .sub-heading { color: var(--px-brand-primary); font-weight: var(--px-weight-semibold); font-size: var(--px-text-sm); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--px-space-3); display: inline-block; } /* --- v1 cards (.dc-box) — used in feature grids --- */ .px-body .dc-box { background: var(--px-bg-surface); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius-lg); padding: var(--px-space-5); transition: all var(--px-duration) var(--px-ease-out); display: flex; flex-direction: column; gap: var(--px-space-3); height: 100%; text-align: left; } .px-body .dc-box:hover { transform: translateY(-2px); box-shadow: var(--px-shadow-md); border-color: var(--px-brand-primary); } .px-body .dc-box img { width: 56px; height: 56px; object-fit: contain; padding: 10px; background: var(--px-bg-muted); border-radius: var(--px-radius); } .px-body .dc-box .bx-head { font-size: var(--px-text-base); font-weight: var(--px-weight-semibold); color: var(--px-text-primary); margin-bottom: var(--px-space-2); line-height: var(--px-leading-snug); } .px-body .dc-box p, .px-body .dc-box .flx p { color: var(--px-text-secondary); font-size: var(--px-text-sm); margin: 0; line-height: var(--px-leading-normal); } /* --- v1 service grid cards (.box-course) --- */ .px-body .box-course { background: var(--px-bg-surface); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius-lg); padding: var(--px-space-5); transition: all var(--px-duration) var(--px-ease-out); height: 100%; text-align: left; display: flex; flex-direction: column; } .px-body .box-course:hover { transform: translateY(-3px); box-shadow: var(--px-shadow-lg); border-color: var(--px-brand-primary); } .px-body .box-course .goal-img, .px-body .box-course > a > img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--px-radius); margin-bottom: var(--px-space-4); } .px-body .box-course .c-name { font-size: var(--px-text-lg); font-weight: var(--px-weight-bold); color: var(--px-text-primary); line-height: var(--px-leading-snug); margin-bottom: var(--px-space-2); } .px-body .box-course .c-name a { color: inherit; } .px-body .box-course .c-name a:hover { color: var(--px-brand-primary); } .px-body .box-course p { color: var(--px-text-secondary); font-size: var(--px-text-sm); margin: 0; } .px-body .box-course .ins-ul { display: grid; gap: var(--px-space-2); margin: var(--px-space-3) 0; padding: 0; list-style: none; } .px-body .box-course .ins-ul li { padding-left: var(--px-space-5); position: relative; font-size: var(--px-text-sm); color: var(--px-text-secondary); line-height: var(--px-leading-snug); } .px-body .box-course .ins-ul li::before { content: '✓'; position: absolute; left: 0; color: var(--px-success); font-weight: var(--px-weight-bold); } /* --- v1 benefits cards (.ree-card-img / .ree-card-content) --- */ .px-body .benefits-bx { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--px-space-4); } .px-body .benefits-bx > [class*='col-'] { width: auto !important; max-width: none !important; flex: 0 0 auto !important; padding: 0 !important; } .px-body .benefits-bx .hero-content-a { background: var(--px-bg-surface); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius-lg); padding: var(--px-space-5); height: 100%; transition: all var(--px-duration); } .px-body .benefits-bx .hero-content-a:hover { transform: translateY(-2px); box-shadow: var(--px-shadow-md); border-color: var(--px-brand-primary); } .px-body .ree-card-img { width: 48px; height: 48px; border-radius: var(--px-radius); background: var(--px-bg-muted); display: grid; place-items: center; margin-bottom: var(--px-space-4); overflow: hidden; } .px-body .ree-card-img img { width: 30px; height: 30px; object-fit: contain; } .px-body .ree-card-content h3 { font-size: var(--px-text-lg); font-weight: var(--px-weight-semibold); margin-bottom: var(--px-space-2); } .px-body .ree-card-content h3 a { color: var(--px-text-primary); } .px-body .ree-card-content h3 a:hover { color: var(--px-brand-primary); } .px-body .ree-card-content p { color: var(--px-text-secondary); font-size: var(--px-text-sm); margin: 0; } /* --- v1 stats / why-choose cards (.stats-box) --- */ .px-body .what-youget { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--px-space-4); } .px-body .what-youget > [class*='col-'] { width: auto !important; max-width: none !important; flex: 0 0 auto !important; padding: 0 !important; margin: 0 !important; } .px-body .stats-box { background: var(--px-bg-surface); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius-lg); padding: var(--px-space-5); text-align: center; height: 100%; transition: all var(--px-duration); } .px-body .stats-box:hover { transform: translateY(-2px); box-shadow: var(--px-shadow-md); border-color: var(--px-brand-primary); } .px-body .stats-box img { width: 56px; height: 56px; object-fit: contain; margin-bottom: var(--px-space-3); } .px-body .stats-box h3 { font-size: var(--px-text-lg); font-weight: var(--px-weight-bold); margin-bottom: var(--px-space-2); } .px-body .stats-box p { color: var(--px-text-secondary); font-size: var(--px-text-sm); margin: 0; } /* --- v1 list-check / list-icon (bullet checkmarks) --- */ .px-body .list-check, .px-body .list-icon { padding: 0; list-style: none; } .px-body .list-check li, .px-body .list-icon li { padding: var(--px-space-2) 0 var(--px-space-2) var(--px-space-6); position: relative; color: var(--px-text-secondary); line-height: var(--px-leading-normal); } .px-body .list-check li::before, .px-body .list-icon li::before { content: '✓'; position: absolute; left: 0; top: var(--px-space-2); width: 22px; height: 22px; border-radius: 50%; background: var(--px-brand-gradient); color: var(--px-white); display: grid; place-items: center; font-size: var(--px-text-xs); font-weight: var(--px-weight-bold); } /* --- v1 city tiles (.city-link) --- */ .px-body .serve-across { padding: var(--px-space-12) var(--px-space-5); background: var(--px-bg-surface); } .px-body .city-link { display: flex; flex-direction: column; align-items: center; gap: var(--px-space-2); transition: transform var(--px-duration); padding: var(--px-space-3); } .px-body .city-link:hover { transform: translateY(-3px); color: var(--px-brand-primary); } .px-body .city-link a { display: flex; flex-direction: column; align-items: center; gap: var(--px-space-2); color: var(--px-text-primary); } .px-body .city-link a:hover { color: var(--px-brand-primary); } .px-body .city-link img { width: 80px; height: 80px; object-fit: cover; border-radius: 50%; border: 2px solid var(--px-border-subtle); transition: border-color var(--px-duration); } .px-body .city-link a:hover img { border-color: var(--px-brand-primary); } .px-body .city-link p { margin: 0; font-size: var(--px-text-sm); font-weight: var(--px-weight-medium); } /* --- v1 sponsors slider — flat row, no animation --- */ .px-body .sponser { padding: var(--px-space-8) var(--px-space-5); background: var(--px-bg-surface); border-top: 1px solid var(--px-border-subtle); border-bottom: 1px solid var(--px-border-subtle); } .px-body .sponser h3 { font-size: var(--px-text-base); font-weight: var(--px-weight-semibold); color: var(--px-text-muted); text-transform: uppercase; letter-spacing: 0.05em; text-align: center; margin-bottom: var(--px-space-5); } .px-body .sponser .slide-track { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--px-space-6); width: 100%; max-width: var(--px-container-xl); margin: 0 auto; opacity: 0.7; animation: none !important; } .px-body .sponser .slide-track img { height: 40px; width: auto; max-width: 120px; object-fit: contain; filter: grayscale(100%); transition: filter var(--px-duration); } .px-body .sponser .slide-track .slide:hover img { filter: grayscale(0%); } /* --- v1 buttons (.ree-btn) → v2 button styling --- */ .px-body .ree-btn, .px-body a.ree-btn { display: inline-flex !important; align-items: center !important; gap: var(--px-space-2) !important; padding: var(--px-space-3) var(--px-space-5) !important; border-radius: var(--px-radius-full) !important; font-weight: var(--px-weight-semibold) !important; font-size: var(--px-text-sm) !important; transition: all var(--px-duration) var(--px-ease-out) !important; text-decoration: none !important; background: var(--px-brand-gradient) !important; color: var(--px-white) !important; border: 0 !important; box-shadow: var(--px-shadow) !important; } .px-body .ree-btn:hover { transform: translateY(-1px); box-shadow: var(--px-shadow-lg) !important; } .px-body .ree-btn-grdt2 { background: var(--px-bg-surface) !important; color: var(--px-text-primary) !important; border: 1px solid var(--px-border-subtle) !important; box-shadow: none !important; } .px-body .ree-btn-grdt2:hover { border-color: var(--px-brand-primary) !important; color: var(--px-brand-primary) !important; } .px-body .ree-btn .fa-btn { font-size: 11px; } /* --- v1 form (.form-block / .form-contact-hom) — used on service pages --- */ .px-body .form-contact-hom { background: transparent; } .px-body .form-block, .px-body .form-block.bg-w { background: var(--px-bg-surface); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius-lg); padding: var(--px-space-6); box-shadow: var(--px-shadow); } .px-body .form-head h3 { font-size: var(--px-text-xl); margin-bottom: var(--px-space-4); } .px-body .form-body input, .px-body .form-body select, .px-body .form-body textarea { width: 100%; padding: 12px var(--px-space-3); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius); font: inherit; background: var(--px-bg-page); margin-bottom: var(--px-space-3); } .px-body .form-body input:focus, .px-body .form-body select:focus, .px-body .form-body textarea:focus { outline: 0; border-color: var(--px-brand-primary); box-shadow: 0 0 0 3px rgba(108,92,231,0.12); } .px-body .small-label { font-size: var(--px-text-xs); font-weight: var(--px-weight-semibold); color: var(--px-text-muted); text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 4px; } /* --- v1 FAQ accordion (.faq-section / .card / .faq-title) --- */ .px-body .faq-section { padding: var(--px-space-12) var(--px-space-5); background: var(--px-bg-surface); } .px-body .faq { display: grid; gap: var(--px-space-3); max-width: 820px; margin: 0 auto; } .px-body .faq .card { background: var(--px-bg-page); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius); overflow: hidden; } .px-body .faq .card:hover { border-color: var(--px-brand-primary); } .px-body .faq .card-header { background: transparent; padding: 0; border: 0; } .px-body .faq-title { display: flex !important; justify-content: space-between; align-items: center; padding: var(--px-space-4) var(--px-space-5); cursor: pointer; font-weight: var(--px-weight-semibold); color: var(--px-text-primary); margin: 0; line-height: var(--px-leading-snug); } .px-body .faq-title .badge { background: var(--px-brand-gradient); color: var(--px-white); border-radius: 50%; width: 28px; height: 28px; display: inline-grid; place-items: center; font-size: var(--px-text-xs); margin-right: var(--px-space-3); flex-shrink: 0; } .px-body .faq .card-body { padding: 0 var(--px-space-5) var(--px-space-5); } .px-body .faq .card-body p { color: var(--px-text-secondary); margin: 0; line-height: var(--px-leading-normal); } /* --- v1 testimonials (.review-text / .ree-card / .trust-review) --- */ .px-body .reebgd { background: var(--px-bg-page); padding: var(--px-space-12) var(--px-space-5); } .px-body .ree-card.trust-review { background: var(--px-bg-surface); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius-lg); padding: var(--px-space-5); box-shadow: var(--px-shadow); } .px-body .review-text p { font-size: var(--px-text-base); line-height: var(--px-leading-normal); color: var(--px-text-primary); margin-bottom: var(--px-space-5); font-style: italic; } .px-body .ree-row-set { display: flex; align-items: center; gap: var(--px-space-3); margin-top: var(--px-space-4); padding-top: var(--px-space-4); border-top: 1px solid var(--px-border-subtle); } .px-body .ree-icon-set img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .px-body .user-info .h5 { font-size: var(--px-text-sm); font-weight: var(--px-weight-semibold); margin: 0; } .px-body .user-info p { font-size: var(--px-text-xs); color: var(--px-text-muted); margin: 0; } /* --- v1 page heading (.page-heading-sec) --- */ .px-body .page-heading-sec, .px-body .header-title { padding: var(--px-space-12) var(--px-space-5) var(--px-space-8); background: var(--px-bg-page); position: relative; overflow: hidden; } .px-body .page-heading-sec h1, .px-body .header-title h2 { font-size: clamp(var(--px-text-3xl), 5vw, var(--px-text-5xl)); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: var(--px-space-3); } .px-body .page-heading h1 { font-size: clamp(var(--px-text-3xl), 5vw, var(--px-text-5xl)); line-height: 1.1; margin-bottom: var(--px-space-3); } .px-body .page-headings { text-align: center; } .px-body .breadcrus { display: inline-flex; gap: var(--px-space-2); font-size: var(--px-text-sm); list-style: none; padding: 0; margin-bottom: var(--px-space-4); } .px-body .breadcrus li { color: var(--px-text-muted); } .px-body .breadcrus li a { color: var(--px-brand-primary); } /* --- v1 counters block (.counters / .count-box) — light theme --- */ .px-body .counters { padding: var(--px-space-8) var(--px-space-5); background: var(--px-bg-surface); color: var(--px-text-primary); border-top: 1px solid var(--px-border-subtle); border-bottom: 1px solid var(--px-border-subtle); } .px-body .counters .c-bx { max-width: var(--px-container-xl); margin: 0 auto; } .px-body .counters .count-box { text-align: center; padding: var(--px-space-3); } .px-body .counters .no-co { font-size: clamp(var(--px-text-3xl), 5vw, var(--px-text-5xl)); font-weight: var(--px-weight-bold); background: var(--px-brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; } .px-body .counters .count-box p { font-size: var(--px-text-sm); color: var(--px-text-secondary); margin-top: var(--px-space-2); } /* --- v1 owl carousel inside services — flatten to grid --- */ .px-body .owl-carousel.full-work-block { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--px-space-4); } .px-body .owl-carousel.full-work-block .owl-stage-outer { display: contents; } .px-body .owl-carousel.full-work-block .owl-stage { display: contents; } .px-body .fwb-main-x { background: var(--px-bg-surface); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius); padding: var(--px-space-3); transition: all var(--px-duration); } .px-body .fwb-main-x:hover { transform: translateY(-2px); box-shadow: var(--px-shadow); } .px-body .fwb-main-x img { width: 100%; height: auto; object-fit: cover; border-radius: var(--px-radius-sm); } .px-body .work-thumbnails { margin-bottom: var(--px-space-3); } .px-body .work-details p { font-size: var(--px-text-sm); color: var(--px-text-muted); margin-bottom: var(--px-space-2); } .px-body .work-details .h4 { font-size: var(--px-text-base); } /* --- v1 award/clients logos --- */ .px-body .clients-logos ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--px-space-6); list-style: none; padding: 0; } .px-body .clients-logos ul li { padding: var(--px-space-3); } .px-body .clients-logos .award-logo { height: 64px; width: auto; max-width: 140px; object-fit: contain; opacity: 0.85; transition: opacity var(--px-duration); } .px-body .clients-logos li:hover .award-logo { opacity: 1; } /* --- v1 technology grid (.icon-with-title) --- */ .px-body .icon-with-title { display: flex; flex-direction: column; align-items: center; padding: var(--px-space-3); background: var(--px-bg-surface); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius); margin-bottom: var(--px-space-3); transition: all var(--px-duration); } .px-body .icon-with-title:hover { border-color: var(--px-brand-primary); transform: translateY(-2px); box-shadow: var(--px-shadow); } .px-body .icon-with-title .iwt-icon img { width: 48px; height: 48px; object-fit: contain; margin-bottom: var(--px-space-2); } .px-body .icon-with-title .iwt-content p { font-size: var(--px-text-xs); color: var(--px-text-muted); margin: 0; text-align: center; } /* --- v1 contact section (.home-contact) --- */ .px-body .home-contact { padding: var(--px-space-12) var(--px-space-5); background: var(--px-bg-page); } .px-body .home-contact .c-infot a, .px-body .home-contact .c-infot span { color: var(--px-text-primary); font-weight: var(--px-weight-medium); display: inline-flex; align-items: center; gap: var(--px-space-2); } .px-body .home-contact .c-infot a:hover { color: var(--px-brand-primary); } .px-body .home-contact .c-infot span { color: var(--px-text-muted); display: block; font-size: var(--px-text-xs); text-transform: uppercase; letter-spacing: 0.05em; font-weight: var(--px-weight-semibold); margin-bottom: 4px; } /* --- Hide v1 onloadpage preloader (in case it's still in markup somewhere) --- */ .px-body .onloadpage { display: none !important; } /* --- v1 mega menu / megamenu legacy / nav-list — hide v1's nav inside v2 layout --- */ /* Our v2 layout already provides its own header; if a v1 page tries to include the v1 ree-header, hide it. (Currently main.blade.php uses our v2 header only when the v2 path is prepended — this is a defensive safeguard.) */ .px-body .ree-header { display: none; } /* --- 17. Related-content section (existing partial styled for v2) ------------ */ .px-body .related-content { padding: var(--px-space-12) var(--px-space-5); background: var(--px-bg-surface); border-top: 1px solid var(--px-border-subtle); } .px-body .related-card { background: var(--px-bg-page); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius-lg); padding: var(--px-space-5); transition: all var(--px-duration); } .px-body .related-card:hover { transform: translateY(-2px); box-shadow: var(--px-shadow-md); } .px-body .related-blog-card { background: var(--px-bg-page); border: 1px solid var(--px-border-subtle); border-radius: var(--px-radius-lg); transition: all var(--px-duration); } .px-body .related-blog-card:hover { transform: translateY(-2px); box-shadow: var(--px-shadow-md); }