/* ═══════════════════════════════════════════════════════════ HOMEPAGE — GLOBAL ANIMATED GRID BACKGROUND Imported verbatim from /background.html. The canvas is fixed at viewport size with z-index:-1, so the entire page sits on top of one continuous animated grid. Sections that should KEEP their own backgrounds: • #homepage-rip-exact (.rip-section) — "WHO IT'S FOR" • #connected-data-layer — "CONNECTED DATA LAYER" • (rendered footer) — Footer Every other section is forced transparent so the global canvas shows through. ═══════════════════════════════════════════════════════════ */ :root { --ptx-bg-color: #fbfaff; --ptx-bg-minor: #fef08a; --ptx-bg-major: #e6e2fb; --ptx-bg-cross: #c8f4f9; --ptx-bg-highlight: #c8f4f9; --ptx-bg-minor-op: 0.35; --ptx-bg-major-op: 0.40; --ptx-bg-cross-op: 0.55; --ptx-bg-highlight-op: 0.10; } /* Base page colour lives on so can be transparent. This is essential: when has an opaque background, the bg COVERS a position:fixed child with z-index:-1. Making transparent lets the canvas show. */ html { background-color: var(--ptx-bg-color) !important; } body { background: transparent !important; background-color: transparent !important; } #ptx-bg-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; display: block; } /* ─── Strip backgrounds from every section that ISN'T protected ─── Protected (left alone — keep their own backgrounds): • #homepage-rip-exact, .rip-section — WHO IT'S FOR (purple) • #connected-data-layer — CONNECTED DATA LAYER (white) • .home-cta-wrapper, #home-cta-hero — CTA colorful gradient • rendered footer — Footer (dark) Everything else: transparent so the global canvas paints behind it. */ .edu-ops-stardust, .modules-section-wrap, .modules-section, .modules-columns, .acad-hero-stage, .acad-bigtext-area, .acad-about-area, .hp-faq, #homepage-faq, .partners-section, #impact-metrics, #impact-metrics > div, #academyship-signal-network, #academyship-signal-network > div, .wps6-section, #wps6Section, .wps6-sticky, #solution, #solution > div, #homepage-ds3-embed, #dss4-advanced, #dss4-advanced > div, #connected-data-layer { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* Kill the cream fade overlays inside the modules columns so the global grid is uninterrupted in that section. */ .modules-columns::before, .modules-columns::after { background: transparent !important; background-image: none !important; display: none !important; } /* DS8 ticker — KEEP its dark bar. #ds8-features itself stays transparent so the grid shows above/below the ticker, but the ticker bar itself paints its original near-black so its text stays legible. */ .ds8-ticker { background: #0d0a08 !important; } /* PURPLE SECTIONS — explicitly keep their backgrounds (user rule: any purple background stays). These would otherwise inherit nothing from the protected list but they're NOT in the transparency list above either — so their original CSS wins. Listed here for clarity: • #how-it-works — dark purple #3f0540 • #homepage-rip-exact .strategy-section — purple #3a0d38 • #homepage-rip-exact .rip-section — purple #3a0d38 (WHO IT'S FOR) */ /* The hero section itself stays transparent; its interactive lens canvas is layered ABOVE the global background. */ section.hero { background: transparent !important; } /* Old per-section grid replicas — no longer needed. */ .acad-bigtext-area::before, .acad-about-area::before { display: none !important; } /* The hero's local canvas is now redundant — the global canvas paints the same grid behind it, so the two were stacking and doubling up every gridline in the hero region. Hide the local one. */ #ptx-hero-bg-canvas { display: none !important; } /* The bg-glow soft halos can stay as a subtle accent — let them blend on top of the canvas at low z-index. */ .bg-glow-container { z-index: -1 !important; }