/* ================================================================ PAGE THEMES — Unique Visual Identity Per Service Category Each page gets: different font pairing, accent colors, card styles, backgrounds, and decorative patterns. Add class to : body.theme-flutter — Flutter / Mobile Apps body.theme-hrms — HRMS & Payroll body.theme-idempiere — iDempiere ERP body.theme-sap — SAP Consulting body.theme-webapp — Custom Web Apps body.theme-erp — ERP Solutions body.theme-ecommerce — eCommerce & Integrations body.theme-pharma — ePharma CRM body.theme-about — About Us ================================================================ */ /* ================================================================ SHARED THEME OVERRIDES — GLOBAL FONT SIZE BOOST ================================================================ */ /* ----- Base body text ----- */ [class*="theme-"] { font-size: 17px; line-height: 1.8; } /* ----- Page Title / Hero ----- */ [class*="theme-"] .page-title h1 { font-size: 48px; letter-spacing: -0.02em; line-height: 1.2; } @media (max-width: 768px) { [class*="theme-"] .page-title h1 { font-size: 32px; } } /* ----- Breadcrumbs ----- */ [class*="theme-"] .bread-crumb li, [class*="theme-"] .bread-crumb li a { font-size: 15px; } /* ----- Section Headings ----- */ [class*="theme-"] h2, [class*="theme-"] .section-head h2 { font-size: 40px; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; } [class*="theme-"] h3 { font-size: 26px; font-weight: 700; line-height: 1.35; } [class*="theme-"] h4 { font-size: 21px; font-weight: 700; line-height: 1.4; } [class*="theme-"] h5 { font-size: 18px; font-weight: 700; } @media (max-width: 768px) { [class*="theme-"] h2, [class*="theme-"] .section-head h2 { font-size: 30px; } [class*="theme-"] h3 { font-size: 22px; } [class*="theme-"] h4 { font-size: 19px; } } /* ----- Section descriptions / subtitles ----- */ [class*="theme-"] .section-head p, [class*="theme-"] .idp-services .section-head p, [class*="theme-"] .outsource-header p { font-size: 18px; line-height: 1.75; } /* ----- Intro / Lead text ----- */ [class*="theme-"] .idp-intro .intro-lead { font-size: 22px; line-height: 1.7; } [class*="theme-"] .idp-intro .intro-columns p { font-size: 17px; line-height: 1.8; } /* ----- Service cards ----- */ [class*="theme-"] .idp-svc-card h3 { font-size: 22px; margin-bottom: 10px; } [class*="theme-"] .idp-svc-card p, [class*="theme-"] .idp-svc-card li { font-size: 16px; line-height: 1.75; } /* ----- Feature cards ----- */ [class*="theme-"] .idp-feat-card h4 { font-size: 19px; } [class*="theme-"] .idp-feat-card p { font-size: 16px; line-height: 1.7; } /* ----- Bento cards ----- */ [class*="theme-"] .idp-bento-card h4 { font-size: 20px; } [class*="theme-"] .idp-bento-card p { font-size: 16px; line-height: 1.7; } /* ----- Module section ----- */ [class*="theme-"] .idp-modules h2 { font-size: 38px; } [class*="theme-"] .idp-modules p, [class*="theme-"] .idp-modules li { font-size: 17px; line-height: 1.8; } /* ----- Commitment / Promise glass card ----- */ [class*="theme-"] .idp-commitment h2, [class*="theme-"] .glass-card h2 { font-size: 34px; line-height: 1.3; } [class*="theme-"] .idp-commitment p, [class*="theme-"] .glass-card p { font-size: 18px; line-height: 1.8; } /* ----- FAQ section ----- */ [class*="theme-"] .idp-faq summary, [class*="theme-"] .idp-faq-item summary { font-size: 18px; font-weight: 600; } [class*="theme-"] .idp-faq-item p, [class*="theme-"] .idp-faq details p { font-size: 16px; line-height: 1.8; } /* ----- CTA sections ----- */ [class*="theme-"] .idp-cta h2 { font-size: 36px; } [class*="theme-"] .idp-cta p { font-size: 18px; line-height: 1.7; } [class*="theme-"] .idp-cta a, [class*="theme-"] .idp-poc a { font-size: 17px; padding: 16px 34px; } /* ----- Industry tiles ----- */ [class*="theme-"] .idp-ind-tile h4 { font-size: 17px; } [class*="theme-"] .idp-ind-tile p { font-size: 14px; } /* ----- Why / Bento section ----- */ [class*="theme-"] .idp-why h2 { font-size: 38px; } /* ----- POC section ----- */ [class*="theme-"] .idp-poc h2 { font-size: 36px; } [class*="theme-"] .idp-poc p, [class*="theme-"] .poc-desc { font-size: 18px; line-height: 1.75; } [class*="theme-"] .poc-pills li { font-size: 16px; } /* ----- Tags / Badges / Pills ----- */ [class*="theme-"] .section-tag, [class*="theme-"] .deco-section-tag-pill { font-size: 13px; letter-spacing: 2px; padding: 8px 22px; } /* ----- General paragraphs & lists ----- */ [class*="theme-"] p { font-size: 17px; line-height: 1.8; } [class*="theme-"] li { font-size: 16px; line-height: 1.75; } /* ----- Navigation (keep normal) ----- */ [class*="theme-"] .navigation > li > a { font-size: 15px; } [class*="theme-"] .main-menu .navigation > li > ul > li > a { font-size: 14px; } /* ----- Footer (keep reasonable) ----- */ [class*="theme-"] .ft p, [class*="theme-"] .ft a { font-size: 15px; } [class*="theme-"] .ft h4 { font-size: 18px; } /* ----- Card transitions ----- */ [class*="theme-"] .idp-svc-card, [class*="theme-"] .idp-feat-card, [class*="theme-"] .idp-bento-card { transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease; } /* ================================================================ 1. FLUTTER / MOBILE APPS — Bold, Modern, Tech-forward Font: Space Grotesk (headings) + DM Sans (body) Colors: Electric Blue #027DFD + Violet #6C3EC1 + Sky #E0F2FE ================================================================ */ body.theme-flutter { font-family: 'DM Sans', 'Inter', sans-serif; color: #334155; } body.theme-flutter h1, body.theme-flutter h2, body.theme-flutter h3, body.theme-flutter h4, body.theme-flutter h5 { font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif; color: #0f172a; } body.theme-flutter .page-title { background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0c4a6e 100%); } body.theme-flutter .page-title h1 { color: #fff; text-shadow: 0 2px 20px rgba(2,125,253,0.3); } body.theme-flutter .page-title .bread-crumb li, body.theme-flutter .page-title .bread-crumb li a { color: rgba(255,255,255,0.7); } body.theme-flutter .idp-intro { background: #f8fafc; } body.theme-flutter .idp-intro .intro-accent-bar { background: linear-gradient(180deg, #027DFD, #6C3EC1); } body.theme-flutter .idp-services { background: linear-gradient(180deg, #eff6ff 0%, #f8fafc 100%); } body.theme-flutter .idp-svc-card { border-radius: 16px; border: 1px solid #e0e7ff; background: #fff; } body.theme-flutter .idp-svc-card:hover { border-color: #027DFD; box-shadow: 0 20px 50px rgba(2,125,253,0.12); } body.theme-flutter .idp-modules { background: #fff; } body.theme-flutter .idp-commitment { background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%); } body.theme-flutter .idp-features { background: #f0f9ff; } body.theme-flutter .idp-feat-card { border-left: 4px solid #027DFD; border-radius: 0 12px 12px 0; } body.theme-flutter .idp-feat-card:nth-child(even) { border-left-color: #6C3EC1; } body.theme-flutter .idp-bento-card { background: #fff; border: 1px solid #e0e7ff; border-radius: 20px; } body.theme-flutter .idp-bento-card:hover { border-color: #027DFD; box-shadow: 0 16px 40px rgba(2,125,253,0.1); } body.theme-flutter .idp-cta { background: linear-gradient(135deg, #027DFD 0%, #6C3EC1 100%); } body.theme-flutter .idp-faq { background: #f8fafc; } body.theme-flutter .section-head h2 span, body.theme-flutter .accent-blue { color: #027DFD; } /* ================================================================ 2. HRMS & PAYROLL — Clean, Corporate, Trustworthy Font: Urbanist (headings) + Source Sans 3 (body) Colors: Teal #0d9488 + Emerald #059669 + Warm Grey #f5f5f4 ================================================================ */ body.theme-hrms { font-family: 'Source Sans 3', 'Inter', sans-serif; color: #3f3f46; } body.theme-hrms h1, body.theme-hrms h2, body.theme-hrms h3, body.theme-hrms h4, body.theme-hrms h5 { font-family: 'Urbanist', 'Plus Jakarta Sans', sans-serif; color: #18181b; } body.theme-hrms .page-title { background: linear-gradient(135deg, #042f2e 0%, #134e4a 50%, #115e59 100%); } body.theme-hrms .page-title h1 { color: #fff; text-shadow: 0 2px 20px rgba(13,148,136,0.3); } body.theme-hrms .page-title .bread-crumb li, body.theme-hrms .page-title .bread-crumb li a { color: rgba(255,255,255,0.7); } body.theme-hrms .idp-intro { background: #fafaf9; } body.theme-hrms .idp-intro .intro-accent-bar { background: linear-gradient(180deg, #0d9488, #059669); } body.theme-hrms .idp-services { background: linear-gradient(180deg, #f0fdfa 0%, #fafaf9 100%); } body.theme-hrms .idp-svc-card { border-radius: 14px; border: 1px solid #d4d4d8; background: #fff; border-top: 3px solid #0d9488; } body.theme-hrms .idp-svc-card:nth-child(even) { border-top-color: #059669; } body.theme-hrms .idp-svc-card:hover { border-top-color: #0d9488; box-shadow: 0 16px 40px rgba(13,148,136,0.1); } body.theme-hrms .idp-modules { background: #fff; } body.theme-hrms .idp-commitment { background: linear-gradient(135deg, #042f2e 0%, #064e3b 100%); } body.theme-hrms .idp-features { background: #f0fdfa; } body.theme-hrms .idp-feat-card { border-left: 4px solid #0d9488; border-radius: 0 10px 10px 0; } body.theme-hrms .idp-feat-card:nth-child(even) { border-left-color: #059669; } body.theme-hrms .idp-bento-card { background: #fff; border: 1px solid #d4d4d8; border-radius: 16px; } body.theme-hrms .idp-bento-card:hover { border-color: #0d9488; box-shadow: 0 12px 32px rgba(13,148,136,0.1); } body.theme-hrms .idp-cta { background: linear-gradient(135deg, #0d9488 0%, #059669 100%); } body.theme-hrms .idp-faq { background: #fafaf9; } /* ================================================================ 3. iDEMPIERE ERP — Deep, Enterprise, Professional Font: Sora (headings) + Nunito Sans (body) Colors: Deep Indigo #312e81 + Royal Blue #4338ca + Gold #d97706 ================================================================ */ body.theme-idempiere { font-family: 'Nunito Sans', 'Inter', sans-serif; color: #374151; } body.theme-idempiere h1, body.theme-idempiere h2, body.theme-idempiere h3, body.theme-idempiere h4, body.theme-idempiere h5 { font-family: 'Sora', 'Plus Jakarta Sans', sans-serif; color: #1e1b4b; } body.theme-idempiere .page-title { background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #3730a3 100%); } body.theme-idempiere .page-title h1 { color: #fff; text-shadow: 0 2px 20px rgba(67,56,202,0.3); } body.theme-idempiere .page-title .bread-crumb li, body.theme-idempiere .page-title .bread-crumb li a { color: rgba(255,255,255,0.7); } body.theme-idempiere .idp-intro { background: #faf5ff; } body.theme-idempiere .idp-intro .intro-accent-bar { background: linear-gradient(180deg, #4338ca, #d97706); } body.theme-idempiere .idp-services { background: linear-gradient(180deg, #eef2ff 0%, #faf5ff 100%); } body.theme-idempiere .idp-svc-card { border-radius: 18px; border: 1px solid #e0e7ff; background: #fff; position: relative; overflow: hidden; } body.theme-idempiere .idp-svc-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #4338ca, #d97706); } body.theme-idempiere .idp-svc-card:hover { box-shadow: 0 20px 50px rgba(67,56,202,0.12); border-color: #4338ca; } body.theme-idempiere .idp-modules { background: #fff; } body.theme-idempiere .idp-commitment { background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%); } body.theme-idempiere .idp-features { background: #eef2ff; } body.theme-idempiere .idp-feat-card { border-left: 4px solid #4338ca; border-radius: 0 14px 14px 0; background: #fff; } body.theme-idempiere .idp-feat-card:nth-child(3n+2) { border-left-color: #d97706; } body.theme-idempiere .idp-feat-card:nth-child(3n) { border-left-color: #7c3aed; } body.theme-idempiere .idp-bento-card { background: #fff; border: 1px solid #e0e7ff; border-radius: 20px; } body.theme-idempiere .idp-bento-card:hover { border-color: #4338ca; box-shadow: 0 16px 40px rgba(67,56,202,0.1); } body.theme-idempiere .idp-cta { background: linear-gradient(135deg, #312e81 0%, #4338ca 50%, #6366f1 100%); } body.theme-idempiere .idp-faq { background: #faf5ff; } /* ================================================================ 4. SAP CONSULTING — Corporate, Premium, Enterprise-grade Font: Manrope (headings) + IBM Plex Sans (body) Colors: SAP Blue #0070f3 + Dark Steel #1e293b + Orange #ea580c ================================================================ */ body.theme-sap { font-family: 'IBM Plex Sans', 'Inter', sans-serif; color: #334155; } body.theme-sap h1, body.theme-sap h2, body.theme-sap h3, body.theme-sap h4, body.theme-sap h5 { font-family: 'Manrope', 'Plus Jakarta Sans', sans-serif; color: #0f172a; letter-spacing: -0.01em; } body.theme-sap .page-title { background: linear-gradient(135deg, #0c1929 0%, #172554 50%, #1e3a5f 100%); } body.theme-sap .page-title h1 { color: #fff; text-shadow: 0 2px 20px rgba(0,112,243,0.3); } body.theme-sap .page-title .bread-crumb li, body.theme-sap .page-title .bread-crumb li a { color: rgba(255,255,255,0.7); } body.theme-sap .idp-intro { background: #f8fafc; border-bottom: 1px solid #e2e8f0; } body.theme-sap .idp-intro .intro-accent-bar { background: linear-gradient(180deg, #0070f3, #ea580c); } body.theme-sap .idp-services { background: linear-gradient(180deg, #f1f5f9 0%, #f8fafc 100%); } body.theme-sap .idp-svc-card { border-radius: 10px; border: 1px solid #cbd5e1; background: #fff; border-left: 5px solid #0070f3; } body.theme-sap .idp-svc-card:nth-child(even) { border-left-color: #ea580c; } body.theme-sap .idp-svc-card:hover { box-shadow: 0 12px 36px rgba(0,112,243,0.1); border-left-width: 5px; } body.theme-sap .idp-modules { background: #fff; } body.theme-sap .idp-commitment { background: linear-gradient(135deg, #0c1929 0%, #172554 100%); } body.theme-sap .idp-features { background: #f1f5f9; } body.theme-sap .idp-feat-card { border-left: 4px solid #0070f3; border-radius: 0 8px 8px 0; background: #fff; } body.theme-sap .idp-feat-card:nth-child(even) { border-left-color: #ea580c; } body.theme-sap .idp-bento-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; } body.theme-sap .idp-bento-card:hover { border-color: #0070f3; box-shadow: 0 12px 32px rgba(0,112,243,0.08); } body.theme-sap .idp-cta { background: linear-gradient(135deg, #172554 0%, #0070f3 100%); } body.theme-sap .idp-faq { background: #f8fafc; } /* ================================================================ 5. CUSTOM WEB APPS — Creative, Modern SaaS feel Font: Outfit (headings) + Poppins (body) Colors: Cyan #0891b2 + Purple #7c3aed + Slate #0f172a ================================================================ */ body.theme-webapp { font-family: 'Poppins', 'Inter', sans-serif; color: #475569; } body.theme-webapp h1, body.theme-webapp h2, body.theme-webapp h3, body.theme-webapp h4, body.theme-webapp h5 { font-family: 'Outfit', sans-serif; color: #0f172a; } body.theme-webapp .page-title { background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0e7490 100%); } body.theme-webapp .page-title h1 { color: #fff; text-shadow: 0 2px 20px rgba(8,145,178,0.3); } body.theme-webapp .page-title .bread-crumb li, body.theme-webapp .page-title .bread-crumb li a { color: rgba(255,255,255,0.7); } body.theme-webapp .idp-intro { background: #f0fdfa; } body.theme-webapp .idp-intro .intro-accent-bar { background: linear-gradient(180deg, #0891b2, #7c3aed); } body.theme-webapp .idp-services { background: linear-gradient(180deg, #ecfdf5 0%, #f0fdfa 100%); } body.theme-webapp .idp-svc-card { border-radius: 20px; border: 1px solid #ccfbf1; background: #fff; } body.theme-webapp .idp-svc-card:hover { border-color: #0891b2; box-shadow: 0 20px 50px rgba(8,145,178,0.1); transform: translateY(-8px); } body.theme-webapp .idp-commitment { background: linear-gradient(135deg, #0f172a 0%, #164e63 100%); } body.theme-webapp .idp-features { background: #f0fdfa; } body.theme-webapp .idp-feat-card { border-left: 4px solid #0891b2; border-radius: 0 16px 16px 0; } body.theme-webapp .idp-feat-card:nth-child(even) { border-left-color: #7c3aed; } body.theme-webapp .idp-cta { background: linear-gradient(135deg, #0891b2 0%, #7c3aed 100%); } body.theme-webapp .idp-faq { background: #f0fdfa; } /* ================================================================ 6. ERP SOLUTIONS — Solid, Industrial, Reliable Font: Lexend (headings) + Work Sans (body) Colors: Forest #166534 + Amber #b45309 + Warm White #fffbeb ================================================================ */ body.theme-erp { font-family: 'Work Sans', 'Inter', sans-serif; color: #3f3f46; } body.theme-erp h1, body.theme-erp h2, body.theme-erp h3, body.theme-erp h4, body.theme-erp h5 { font-family: 'Lexend', 'Plus Jakarta Sans', sans-serif; color: #14532d; } body.theme-erp .page-title { background: linear-gradient(135deg, #14532d 0%, #166534 50%, #15803d 100%); } body.theme-erp .page-title h1 { color: #fff; } body.theme-erp .page-title .bread-crumb li, body.theme-erp .page-title .bread-crumb li a { color: rgba(255,255,255,0.7); } body.theme-erp .idp-intro .intro-accent-bar { background: linear-gradient(180deg, #166534, #b45309); } body.theme-erp .idp-services { background: linear-gradient(180deg, #f0fdf4 0%, #fefce8 100%); } body.theme-erp .idp-svc-card { border-radius: 12px; border: 1px solid #bbf7d0; border-top: 4px solid #166534; background: #fff; } body.theme-erp .idp-svc-card:nth-child(even) { border-top-color: #b45309; } body.theme-erp .idp-svc-card:hover { box-shadow: 0 16px 40px rgba(22,101,52,0.1); } body.theme-erp .idp-commitment { background: linear-gradient(135deg, #14532d 0%, #1a3c2b 100%); } body.theme-erp .idp-cta { background: linear-gradient(135deg, #166534 0%, #b45309 100%); } body.theme-erp .idp-faq { background: #fefce8; } /* ================================================================ 7. ePHARMA CRM — Medical, Clean, Professional Font: Figtree (headings) + Karla (body) Colors: Rose #e11d48 + Dark Slate #1e293b + Blush #fff1f2 ================================================================ */ body.theme-pharma { font-family: 'Karla', 'Inter', sans-serif; color: #334155; } body.theme-pharma h1, body.theme-pharma h2, body.theme-pharma h3, body.theme-pharma h4, body.theme-pharma h5 { font-family: 'Figtree', 'Plus Jakarta Sans', sans-serif; color: #0f172a; } body.theme-pharma .page-title { background: linear-gradient(135deg, #1c1917 0%, #44403c 50%, #881337 100%); } body.theme-pharma .page-title h1 { color: #fff; } body.theme-pharma .page-title .bread-crumb li, body.theme-pharma .page-title .bread-crumb li a { color: rgba(255,255,255,0.7); } body.theme-pharma .idp-intro .intro-accent-bar { background: linear-gradient(180deg, #e11d48, #f97316); } body.theme-pharma .idp-services { background: linear-gradient(180deg, #fff1f2 0%, #fafaf9 100%); } body.theme-pharma .idp-svc-card { border-radius: 14px; border: 1px solid #fecdd3; background: #fff; border-top: 3px solid #e11d48; } body.theme-pharma .idp-svc-card:hover { box-shadow: 0 16px 40px rgba(225,29,72,0.1); } body.theme-pharma .idp-commitment { background: linear-gradient(135deg, #1c1917 0%, #881337 100%); } body.theme-pharma .idp-cta { background: linear-gradient(135deg, #e11d48 0%, #f97316 100%); } /* ================================================================ 8. eCOMMERCE & INTEGRATIONS — Dynamic, Connected Font: Albert Sans (headings) + Rubik (body) Colors: Amber #d97706 + Navy #1e3a5f + Warm #fffbeb ================================================================ */ body.theme-ecommerce { font-family: 'Rubik', 'Inter', sans-serif; color: #44403c; } body.theme-ecommerce h1, body.theme-ecommerce h2, body.theme-ecommerce h3, body.theme-ecommerce h4, body.theme-ecommerce h5 { font-family: 'Albert Sans', 'Plus Jakarta Sans', sans-serif; color: #1c1917; } body.theme-ecommerce .page-title { background: linear-gradient(135deg, #1c1917 0%, #78350f 50%, #92400e 100%); } body.theme-ecommerce .page-title h1 { color: #fff; } body.theme-ecommerce .page-title .bread-crumb li, body.theme-ecommerce .page-title .bread-crumb li a { color: rgba(255,255,255,0.7); } body.theme-ecommerce .idp-intro .intro-accent-bar { background: linear-gradient(180deg, #d97706, #0f172a); } body.theme-ecommerce .idp-services { background: linear-gradient(180deg, #fffbeb 0%, #fefce8 100%); } body.theme-ecommerce .idp-svc-card { border-radius: 16px; border: 1px solid #fde68a; background: #fff; } body.theme-ecommerce .idp-svc-card:hover { border-color: #d97706; box-shadow: 0 16px 40px rgba(217,119,6,0.12); } body.theme-ecommerce .idp-commitment { background: linear-gradient(135deg, #1c1917 0%, #78350f 100%); } body.theme-ecommerce .idp-cta { background: linear-gradient(135deg, #d97706 0%, #ea580c 100%); } /* ================================================================ 9. ABOUT US — Warm, Human, Trustworthy Font: Playfair Display (headings) + Lato (body) Colors: Warm Navy #1e293b + Gold #ca8a04 + Cream #fefce8 ================================================================ */ body.theme-about { font-family: 'Lato', 'Inter', sans-serif; color: #374151; } body.theme-about h1, body.theme-about h2, body.theme-about h3 { font-family: 'Playfair Display', Georgia, serif; color: #1e293b; letter-spacing: -0.01em; } body.theme-about h4, body.theme-about h5 { font-family: 'Lato', sans-serif; font-weight: 700; color: #1e293b; } body.theme-about .page-title { background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%); } body.theme-about .page-title h1 { color: #fff; font-family: 'Playfair Display', Georgia, serif; } body.theme-about .page-title .bread-crumb li, body.theme-about .page-title .bread-crumb li a { color: rgba(255,255,255,0.7); }