/* ═══════════════════════════════════════════════════════════════════ APAC THEME OVERRIDE — P2B Services Version: 1.0 | 2026 ───────────────────────────────────────────────────────────────── HOW TO USE: Add this single line to the of EVERY page, AFTER your existing css/style.css link: That's it. This file overrides all colours, gradients, buttons, hero banners, stats strips, CTAs, sidebar widgets, FAQs, and typography to the APAC Navy/Purple + Hot-Pink theme. No other files need to change. ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ 1. ROOT VARIABLES — Override all original colour tokens Original values → New APAC values: #0e2743 (navy) → #1a1464 (APAC deep navy-purple) #1a56db (blue) → #2d2d8f (APAC purple-navy) #2AB4EF (cyan) → #E91E8C (APAC hot-pink) #0a1e3d → #1a1464 #1a3a70 → #2d2d8f ═══════════════════════════════════════════════════════════════════ */ :root { --navy: #1a1464 !important; --blue: #2d2d8f !important; --cyan: #E91E8C !important; --primary: #1a1464 !important; --primary-light: #2d2d8f !important; --pink: #E91E8C !important; --pink-light: #ff4db8 !important; --pink-dark: #c4176f !important; --light: #f8f4fb !important; --border: #e8e0f0 !important; /* Gradient tokens — used throughout */ --gradient-hero: linear-gradient(135deg, #1a1464 0%, #2d2d8f 60%, #E91E8C 100%) !important; --gradient-pink: linear-gradient(135deg, #E91E8C 0%, #c4176f 100%) !important; --gradient-card: linear-gradient(135deg, #f8f4fb 0%, #f0e8f8 100%) !important; } /* ═══════════════════════════════════════════════════════════════════ 2. GOOGLE FONTS — APAC Typography Sora (headings) + DM Sans (body) Replaces Poppins + Roboto ═══════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap'); body, p, li, td, input, textarea, select, label, .blog_details p, .faq-answer-inner { font-family: 'DM Sans', sans-serif !important; } h1, h2, h3, h4, h5, h6, .lg-hero h1, .ilg-hero h1, .lg-content h2, .lg-content h3, .lg-content h4, .faq-btn, .s-num, .r-val, .m-val, .p-num, .btn-hero-primary, .btn-hero-outline, .btn-cb, .btn-final-p, .btn-final-o, .sidebar-trust h4, .widget_title, .t-name, .svc-type-card h3, .p-body h4, .cta-strip h3, .conversion-box h3, .final-cta h3, .region-card .rg-name { font-family: 'Sora', sans-serif !important; } /* ═══════════════════════════════════════════════════════════════════ 3. URGENCY / ANNOUNCEMENT BAR ═══════════════════════════════════════════════════════════════════ */ .urgency-bar { background: linear-gradient(135deg, #1a1464 0%, #2d2d8f 60%, #E91E8C 100%) !important; padding: 10px 0 !important; } .urgency-bar p { color: #fff !important; font-family: 'Sora', sans-serif !important; font-weight: 600 !important; } .urgency-bar a { color: #ff4db8 !important; } /* ═══════════════════════════════════════════════════════════════════ 4. HERO BANNER — All page hero variants Targets: .lg-hero, .ilg-hero, .hero, .page-hero, .inner-banner, .breadcrumb-area, .banner_area ═══════════════════════════════════════════════════════════════════ */ /* Main lead-gen hero & all page heroes */ .lg-hero, .ilg-hero, .hero, .page-hero, .inner-banner, .banner_area, .breadcrumb-area, .hero-section, section[class*="hero"], div[class*="hero-banner"] { background: linear-gradient(135deg, #1a1464 0%, #2d2d8f 60%, #E91E8C 100%) !important; position: relative; overflow: hidden; } /* Hero background pattern overlay */ .lg-hero::before, .ilg-hero::before { content: '' !important; position: absolute !important; inset: 0 !important; background: radial-gradient(ellipse at 20% 50%, rgba(233,30,140,.15) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(45,45,143,.2) 0%, transparent 50%), url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important; z-index: 0 !important; } /* White wave clip at bottom of hero */ .lg-hero::after, .ilg-hero::after { content: '' !important; position: absolute !important; bottom: -1px !important; left: 0 !important; right: 0 !important; height: 60px !important; background: #fff !important; clip-path: ellipse(55% 100% at 50% 100%) !important; z-index: 1 !important; } /* Hero inner container must sit above overlays */ .lg-hero .container, .ilg-hero .container, .banner_area .container, .inner-banner .container { position: relative !important; z-index: 2 !important; } /* Hero headings */ .lg-hero h1, .ilg-hero h1, .banner_area h1, .inner-banner h1, .page-hero h1 { color: #ffffff !important; font-family: 'Sora', sans-serif !important; font-weight: 800 !important; } /* Hero h1 highlight span */ .lg-hero h1 span, .ilg-hero h1 span, .banner_area h1 span { color: #ff4db8 !important; -webkit-text-fill-color: #ff4db8 !important; background: none !important; } /* Hero sub-paragraph */ .lg-hero .hero-sub, .ilg-hero .hero-sub, .banner_area p, .inner-banner p { color: rgba(255, 255, 255, 0.88) !important; } /* Hero badge pills */ .badge-pill, .lg-hero .badge-pill, .ilg-hero .badge-pill, .hero-badges .badge-pill { background: rgba(255, 255, 255, .10) !important; border: 1px solid rgba(255, 255, 255, .22) !important; color: rgba(255, 255, 255, 0.92) !important; border-radius: 50px !important; font-family: 'Sora', sans-serif !important; } .badge-pill span, .lg-hero .badge-pill span { color: #ff4db8 !important; } /* Hero breadcrumb text inside banner */ .banner_area .breadcrumb li, .banner_area .breadcrumb-item, .inner-banner .breadcrumb li { color: rgba(255,255,255,0.8) !important; } .banner_area .breadcrumb a, .inner-banner .breadcrumb a { color: #ff4db8 !important; } /* ═══════════════════════════════════════════════════════════════════ 5. HERO BUTTONS ═══════════════════════════════════════════════════════════════════ */ /* Primary filled button */ .btn-hero-primary, .hero-btn-group .btn-hero-primary { background: linear-gradient(135deg, #E91E8C 0%, #c4176f 100%) !important; color: #fff !important; border: none !important; border-radius: 50px !important; box-shadow: 0 6px 24px rgba(233,30,140,.50) !important; font-family: 'Sora', sans-serif !important; font-weight: 700 !important; transition: transform .2s, box-shadow .2s !important; } .btn-hero-primary:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 32px rgba(233,30,140,.65) !important; color: #fff !important; } /* Outline button — solid visible border on dark bg */ .btn-hero-outline, .hero-btn-group .btn-hero-outline { border: 2px solid rgba(255, 255, 255, .55) !important; color: #fff !important; border-radius: 50px !important; background: transparent !important; font-family: 'Sora', sans-serif !important; font-weight: 600 !important; transition: all .2s !important; } .btn-hero-outline:hover { background: rgba(255, 255, 255, .15) !important; color: #fff !important; } /* ═══════════════════════════════════════════════════════════════════ 6. STATS / NUMBERS STRIP ═══════════════════════════════════════════════════════════════════ */ .lg-stats, .ilg-stats, .stats-bar, .stat-strip { background: #1a1464 !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; } .lg-stats .s-num, .ilg-stats .s-num, .stats-bar .s-num { color: #ff4db8 !important; font-family: 'Sora', sans-serif !important; } .lg-stats .s-label, .ilg-stats .s-label { color: rgba(255,255,255,.65) !important; } /* ═══════════════════════════════════════════════════════════════════ 7. BREADCRUMB NAV (below hero) ═══════════════════════════════════════════════════════════════════ */ .lg-breadcrumb, .ilg-breadcrumb, .breadcrumb-nav { background: #f8f4fb !important; border-bottom: 1px solid #e8e0f0 !important; } .lg-breadcrumb a, .ilg-breadcrumb a, .breadcrumb-nav a { color: #E91E8C !important; font-weight: 500 !important; } .lg-breadcrumb span, .ilg-breadcrumb span { color: #c4b5d4 !important; } /* ═══════════════════════════════════════════════════════════════════ 8. SECTION HEADINGS ═══════════════════════════════════════════════════════════════════ */ .lg-content h2, .ilg-content h2, .blog_details h2, .section-title h2, .section_title h2 { color: #1a1464 !important; font-family: 'Sora', sans-serif !important; } .lg-content h3, .ilg-content h3, .blog_details h3 { color: #1a1464 !important; font-family: 'Sora', sans-serif !important; } .lg-content h4, .ilg-content h4, .p-body h4 { color: #1a1464 !important; font-family: 'Sora', sans-serif !important; } /* ═══════════════════════════════════════════════════════════════════ 9. INTRO HIGHLIGHT BOX ═══════════════════════════════════════════════════════════════════ */ .intro-highlight { background: linear-gradient(135deg, #f8f4fb 0%, #f0e8f8 100%) !important; border-left-color: #E91E8C !important; } .intro-highlight p, .intro-highlight strong { color: #1a1464 !important; } /* ═══════════════════════════════════════════════════════════════════ 10. SERVICE TYPE CARDS ═══════════════════════════════════════════════════════════════════ */ .svc-type-card::after, .service-card::after { background: linear-gradient(135deg, #E91E8C 0%, #c4176f 100%) !important; } .svc-type-card:hover, .service-card:hover { box-shadow: 0 10px 36px rgba(233,30,140,.15) !important; } .svc-type-card h3, .service-card h3 { color: #1a1464 !important; font-family: 'Sora', sans-serif !important; } .svc-type-card .card-link, .service-card .card-link { color: #E91E8C !important; } .svc-type-card .card-link:hover, .service-card .card-link:hover { color: #c4176f !important; } /* ═══════════════════════════════════════════════════════════════════ 11. PROCESS TIMELINE NUMBERS ═══════════════════════════════════════════════════════════════════ */ .p-num { background: linear-gradient(135deg, #E91E8C 0%, #c4176f 100%) !important; box-shadow: 0 4px 14px rgba(233,30,140,.35) !important; font-family: 'Sora', sans-serif !important; } .p-body h4 { color: #1a1464 !important; } /* ═══════════════════════════════════════════════════════════════════ 12. DATA / ACCURACY TABLE ═══════════════════════════════════════════════════════════════════ */ .accuracy-table thead th, .ind-table thead th, table.styled-table thead th { background: #1a1464 !important; font-family: 'Sora', sans-serif !important; } .accuracy-table tbody tr:nth-child(even) td, .ind-table tbody tr:nth-child(even) td { background: #f8f4fb !important; } .accuracy-table tbody td:first-child, .ind-table tbody td:first-child { color: #1a1464 !important; } /* ═══════════════════════════════════════════════════════════════════ 13. INDUSTRY TAG PILLS ═══════════════════════════════════════════════════════════════════ */ .ind-tag { background: #f8f4fb !important; border-color: #e8e0f0 !important; color: #1a1464 !important; } .ind-tag .dot { background: #E91E8C !important; } /* ═══════════════════════════════════════════════════════════════════ 14. RESULTS / METRICS CARDS ═══════════════════════════════════════════════════════════════════ */ .r-card .r-val, .m-card .m-val { color: #E91E8C !important; font-family: 'Sora', sans-serif !important; } .m-card { background: linear-gradient(135deg, #f8f4fb 0%, #f0e8f8 100%) !important; border-color: #e8e0f0 !important; } .m-card .m-label { color: #1a1464 !important; font-family: 'Sora', sans-serif !important; } /* ═══════════════════════════════════════════════════════════════════ 15. MID-PAGE CTA STRIP ═══════════════════════════════════════════════════════════════════ */ .cta-strip { background: linear-gradient(135deg, #1a1464 0%, #2d2d8f 60%, #E91E8C 100%) !important; border-radius: 14px !important; } .cta-strip h3 { color: #fff !important; font-family: 'Sora', sans-serif !important; } .cta-strip p { color: rgba(255,255,255,.78) !important; } /* CTA strip button — bright pink so it pops on dark background */ .cta-strip a, .cta-strip .btn { background: linear-gradient(135deg, #E91E8C 0%, #c4176f 100%) !important; color: #fff !important; border: none !important; border-radius: 50px !important; box-shadow: 0 4px 20px rgba(233,30,140,.45) !important; font-family: 'Sora', sans-serif !important; font-weight: 700 !important; transition: all .2s !important; } .cta-strip a:hover, .cta-strip .btn:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 30px rgba(233,30,140,.60) !important; color: #fff !important; } /* ═══════════════════════════════════════════════════════════════════ 16. CONVERSION / GET-STARTED BOX ═══════════════════════════════════════════════════════════════════ */ .conversion-box { border-color: #E91E8C !important; } .conversion-box::before { background: linear-gradient(135deg, #E91E8C 0%, #c4176f 100%) !important; } .cb-tag { background: rgba(233,30,140,.10) !important; color: #c4176f !important; } .conversion-box h3 { color: #1a1464 !important; font-family: 'Sora', sans-serif !important; } .cs-num { background: #1a1464 !important; } .cb-arrow { color: #c4b5d4 !important; } /* Main conversion button */ .btn-cb { background: linear-gradient(135deg, #E91E8C 0%, #c4176f 100%) !important; color: #fff !important; border-radius: 50px !important; border: none !important; box-shadow: 0 6px 24px rgba(233,30,140,.40) !important; font-family: 'Sora', sans-serif !important; font-weight: 700 !important; transition: all .2s !important; } .btn-cb:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 32px rgba(233,30,140,.55) !important; color: #fff !important; } /* ═══════════════════════════════════════════════════════════════════ 17. FINAL CTA SECTION ═══════════════════════════════════════════════════════════════════ */ .final-cta { background: linear-gradient(135deg, #1a1464 0%, #2d2d8f 60%, #E91E8C 100%) !important; border-radius: 18px !important; } .final-cta h3 { color: #fff !important; font-family: 'Sora', sans-serif !important; } .final-cta p { color: rgba(255,255,255,.82) !important; } /* Primary white button — dark text, clearly readable */ .btn-final-p { background: #fff !important; color: #1a1464 !important; border: none !important; border-radius: 50px !important; font-family: 'Sora', sans-serif !important; font-weight: 700 !important; transition: all .2s !important; } .btn-final-p:hover { background: #ff4db8 !important; color: #fff !important; transform: translateY(-2px) !important; } /* Secondary button — solid pink so it's visible on dark bg (NOT transparent outline) */ .btn-final-o { background: linear-gradient(135deg, #E91E8C 0%, #c4176f 100%) !important; color: #fff !important; border: none !important; border-radius: 50px !important; box-shadow: 0 4px 18px rgba(233,30,140,.45) !important; font-family: 'Sora', sans-serif !important; font-weight: 700 !important; transition: all .2s !important; } .btn-final-o:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 28px rgba(233,30,140,.60) !important; color: #fff !important; } /* ═══════════════════════════════════════════════════════════════════ 18. INTERNAL LINK CHIPS / TAG PILLS ═══════════════════════════════════════════════════════════════════ */ .link-chip { background: rgba(233,30,140,.08) !important; color: #c4176f !important; border-color: rgba(233,30,140,.20) !important; border-radius: 50px !important; } .link-chip:hover { background: linear-gradient(135deg, #E91E8C 0%, #c4176f 100%) !important; color: #fff !important; border-color: transparent !important; } /* ═══════════════════════════════════════════════════════════════════ 19. TESTIMONIAL CARDS ═══════════════════════════════════════════════════════════════════ */ .testimonial-card::before { color: rgba(233,30,140,.12) !important; } .t-avatar { background: linear-gradient(135deg, #E91E8C 0%, #c4176f 100%) !important; } .t-name { color: #1a1464 !important; font-family: 'Sora', sans-serif !important; } .stars { color: #f59e0b !important; } /* ═══════════════════════════════════════════════════════════════════ 20. FAQ ACCORDION ═══════════════════════════════════════════════════════════════════ */ .faq-btn { color: #1a1464 !important; font-family: 'Sora', sans-serif !important; } .faq-btn:hover { background: #f8f4fb !important; } .faq-icon { color: #E91E8C !important; } .faq-answer-inner a { color: #E91E8C !important; } /* ═══════════════════════════════════════════════════════════════════ 21. SIDEBAR WIDGETS ═══════════════════════════════════════════════════════════════════ */ /* Widget title underline accent */ .blog_right_sidebar .widget_title, .single_sidebar_widget .widget_title { color: #1a1464 !important; border-bottom-color: #E91E8C !important; font-family: 'Sora', sans-serif !important; } /* Trust/dark sidebar widget */ .sidebar-trust { background: linear-gradient(135deg, #1a1464 0%, #2d2d8f 60%, #E91E8C 100%) !important; border-radius: 14px !important; } .sidebar-trust h4 { color: #fff !important; font-family: 'Sora', sans-serif !important; border-bottom-color: rgba(255,255,255,.15) !important; } .sidebar-trust ul li { color: rgba(255,255,255,.82) !important; } .sidebar-trust ul li span { color: #ff4db8 !important; } /* Sidebar CTA button — always visible, pink on dark bg */ .sidebar-trust a { background: linear-gradient(135deg, #E91E8C 0%, #c4176f 100%) !important; color: #fff !important; border-radius: 50px !important; border: none !important; box-shadow: 0 4px 16px rgba(233,30,140,.40) !important; font-family: 'Sora', sans-serif !important; font-weight: 700 !important; } .sidebar-trust a:hover { box-shadow: 0 8px 24px rgba(233,30,140,.55) !important; transform: translateY(-1px) !important; color: #fff !important; } /* Sidebar nav list arrow icons */ .post_category_widget .list li a i, .cat-list li a i, .list.cat-list li a .fa-arrow-right { color: #E91E8C !important; } .post_category_widget .list li a:hover, .cat-list li a:hover { color: #E91E8C !important; } /* ═══════════════════════════════════════════════════════════════════ 22. SOCIAL PROOF STRIP ═══════════════════════════════════════════════════════════════════ */ .social-proof-strip { background: #f8f4fb !important; border-color: #e8e0f0 !important; border-radius: 14px !important; } .sp-item strong { color: #1a1464 !important; font-family: 'Sora', sans-serif !important; } /* ═══════════════════════════════════════════════════════════════════ 23. REGION / COUNTRY CARDS (APAC pages) ═══════════════════════════════════════════════════════════════════ */ .region-card:hover { border-color: #E91E8C !important; box-shadow: 0 8px 32px rgba(233,30,140,.12) !important; } .region-card .rg-name { color: #1a1464 !important; font-family: 'Sora', sans-serif !important; } .country-tag.featured { background: linear-gradient(135deg, #E91E8C 0%, #c4176f 100%) !important; color: #fff !important; border-color: transparent !important; } .rg-link { color: #E91E8C !important; } .rg-link:hover { color: #c4176f !important; } /* ═══════════════════════════════════════════════════════════════════ 24. ENGAGE / FEATURE CARDS ═══════════════════════════════════════════════════════════════════ */ .engage-card:hover, .svc-card:hover { border-color: #E91E8C !important; box-shadow: 0 8px 28px rgba(233,30,140,.15) !important; } .engage-card h4, .svc-card h4 { color: #1a1464 !important; font-family: 'Sora', sans-serif !important; } .engage-card .eg-stat { color: #059669 !important; background: #f0fdf4 !important; } .p-tag { background: rgba(233,30,140,.08) !important; color: #c4176f !important; border-color: rgba(233,30,140,.20) !important; } /* ═══════════════════════════════════════════════════════════════════ 25. GEO DARK BOX (APAC regional highlight) ═══════════════════════════════════════════════════════════════════ */ .geo-dark { background: linear-gradient(135deg, #1a1464 0%, #2d2d8f 60%, #E91E8C 100%) !important; border-radius: 14px !important; } .geo-chip.hot { background: rgba(233,30,140,.35) !important; border-color: #ff4db8 !important; color: #fff !important; } /* ═══════════════════════════════════════════════════════════════════ 26. RELATED BLOG CARDS ═══════════════════════════════════════════════════════════════════ */ .related-blog-card:hover { box-shadow: 0 4px 16px rgba(233,30,140,.10) !important; } .related-blog-card a:hover { color: #E91E8C !important; } .related-blog-card .r-tag, .r-tag { background: rgba(233,30,140,.10) !important; color: #c4176f !important; } /* ═══════════════════════════════════════════════════════════════════ 27. GLOBAL PRIMARY BUTTON (site-wide .btn, .primary-bg, .button) ═══════════════════════════════════════════════════════════════════ */ .primary-bg, .btn_1, .btn_4, .button.primary-bg, a.primary-bg { background: linear-gradient(135deg, #E91E8C 0%, #c4176f 100%) !important; border-color: #E91E8C !important; color: #fff !important; font-family: 'Sora', sans-serif !important; } .primary-bg:hover, .btn_1:hover, .btn_4:hover { background: #c4176f !important; color: #fff !important; } /* Generic blue/navy coloured elements site-wide */ .text-primary, a.text-primary { color: #E91E8C !important; } /* ═══════════════════════════════════════════════════════════════════ 28. STICKY MOBILE CTA BAR ═══════════════════════════════════════════════════════════════════ */ .sticky-cta-bar { background: #1a1464 !important; box-shadow: 0 -4px 24px rgba(26,20,100,.30) !important; } .sticky-cta-bar p strong { color: #fff !important; font-family: 'Sora', sans-serif !important; } .sticky-cta-bar a { background: linear-gradient(135deg, #E91E8C 0%, #c4176f 100%) !important; color: #fff !important; border-radius: 50px !important; font-family: 'Sora', sans-serif !important; font-weight: 700 !important; } /* ═══════════════════════════════════════════════════════════════════ 29. FOOTER (if it uses the old navy/blue) ═══════════════════════════════════════════════════════════════════ */ .footer-area, footer.footer-area { background: #1a1464 !important; } .footer-area h4, .footer-area .footer_title { color: #fff !important; font-family: 'Sora', sans-serif !important; } .footer-area a:hover { color: #ff4db8 !important; } .footer-area .footer-bottom, .footer_bottom { background: #110e50 !important; border-top-color: rgba(255,255,255,.08) !important; } /* ═══════════════════════════════════════════════════════════════════ 30. FORMS — Subscribe / Enquiry inputs ═══════════════════════════════════════════════════════════════════ */ .form-control:focus, input[type="text"]:focus, input[type="email"]:focus, textarea:focus, select:focus { border-color: #E91E8C !important; box-shadow: 0 0 0 3px rgba(233,30,140,.12) !important; outline: none !important; } /* ═══════════════════════════════════════════════════════════════════ 31. LIGHT BACKGROUND SECTIONS ═══════════════════════════════════════════════════════════════════ */ .bg-light, .section-bg, .gray-bg, .light-bg { background: #f8f4fb !important; } /* ═══════════════════════════════════════════════════════════════════ 32. MOBILE RESPONSIVENESS FIXES ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 576px) { .lg-hero h1, .ilg-hero h1 { font-size: 26px !important; } .lg-hero .hero-sub, .ilg-hero .hero-sub { font-size: 14px !important; } .cta-strip { padding: 28px 20px !important; } .cta-strip h3 { font-size: 18px !important; } .final-cta { padding: 36px 20px !important; } .final-cta h3 { font-size: 22px !important; } .btn-final-p, .btn-final-o { width: 100% !important; text-align: center !important; display: block !important; } }