/* ============================================================ Agratix — Service Pillar Colour System One cool spectrum anchored by the brand green and navy, so the five pillars stay distinguishable while reading as a family. Design & Build ...... green (create) Modernize & Migrate . teal Manage & Support .... navy (brand anchor) Growth & Scale ...... blue AI Solutions ........ indigo Applied via etc. NOTE: primary call-to-action buttons deliberately stay brand green on every pillar. Action colour should be learned once and stay constant; only identity/accent colour varies by pillar. ============================================================ */ body[data-pillar="design-build"] { --pillar-a: #489156; --pillar-b: #5da86a; --pillar-rgb: 72, 145, 86; } body[data-pillar="modernize-migrate"] { --pillar-a: #0d9488; --pillar-b: #2dd4bf; --pillar-rgb: 13, 148, 136; } body[data-pillar="manage-support"] { --pillar-a: #1c3765; --pillar-b: #3a5a9a; --pillar-rgb: 28, 55, 101; } body[data-pillar="growth-scale"] { --pillar-a: #3b82f6; --pillar-b: #60a5fa; --pillar-rgb: 59, 130, 246; } body[data-pillar="ai-solutions"] { --pillar-a: #6366f1; --pillar-b: #8b5cf6; --pillar-rgb: 99, 102, 241; } /* ---------- Icon tiles ---------- Overrides the per-card nth-child rainbow the pillar sheets used, so every icon on a pillar carries that pillar's colour. */ body[data-pillar] :is( .specialization-icon, .benefit-icon, .service-icon, .industry-icon, .philosophy-icon, .stack-icon, .approach-icon, .expertise-icon, .standard-icon, .solution-icon, .feature-icon ) { background: linear-gradient(135deg, var(--pillar-a), var(--pillar-b)) !important; color: #fff !important; } /* ---------- Gradient text (hero highlight, phase numbers) ---------- */ body[data-pillar] :is(.gradient-text, .phase-number) { background: linear-gradient(135deg, var(--pillar-a), var(--pillar-b)) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* ---------- Section tag pill ---------- */ body[data-pillar] .section-tag { background: linear-gradient(135deg, rgba(var(--pillar-rgb), 0.10), rgba(var(--pillar-rgb), 0.18)) !important; color: var(--pillar-a) !important; } /* ---------- Card hover accent ---------- */ body[data-pillar] :is( .specialization-card, .benefit-card, .service-card, .industry-card, .process-card, .philosophy-card, .expertise-card, .standard-card, .solution-card, .feature-card ):hover { border-color: rgba(var(--pillar-rgb), 0.35) !important; box-shadow: 0 18px 40px rgba(var(--pillar-rgb), 0.14) !important; } /* ---------- Trust band picks up the pillar tint ---------- */ body[data-pillar] .svc-trust-item i { color: var(--pillar-a); background: rgba(var(--pillar-rgb), 0.10); } /* ---------- Hero tag ---------- */ body[data-pillar] .hero-tag { background: rgba(var(--pillar-rgb), 0.10); color: var(--pillar-a); } /* ---------- FAQ accent ---------- */ body[data-pillar] .faq-item:hover { border-color: rgba(var(--pillar-rgb), 0.30); }