/** * Perla Comps — atmospheric background + section banding * * Layer 1 (orbs + specks): bright pink-magenta glow; specks match orb mood. * Rendered by perla_comps_render_bg_orbs() on * wp_body_open. @keyframes names are prefixed (perla-orbs-*) to avoid clashes. * * Layer 2 (section banding): per-section overrides from the same mockup. * * Brand tokens come from child-brand.css (enqueued first). */ /* ========================================================================= 1. Animated orbs + specks (bright pink glow) ========================================================================= */ .bg-orbs { position: fixed; inset: 0; pointer-events: none; /* Behind #page (z-index:1 in child main.css) — true background, not over cards/chrome */ z-index: 0; mix-blend-mode: screen; } /* Defeat any broad `body > *` rules from the child Vite bundle once `perla-comps-loaded` is on — keep the orb layer fixed behind content. */ html.perla-comps-loaded .bg-orbs { position: fixed !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; mix-blend-mode: screen !important; } .bg-orb { position: absolute; border-radius: 50%; } .bg-orb-1 { width: 700px; height: 700px; background: radial-gradient( circle, rgba(255, 70, 175, 0.58) 0%, rgba(255, 70, 175, 0) 70% ); top: -100px; left: -100px; animation: perla-orbs-orb1 16s ease-in-out infinite alternate; } .bg-orb-2 { width: 600px; height: 600px; background: radial-gradient( circle, rgba(200, 45, 165, 0.52) 0%, rgba(200, 45, 165, 0) 70% ); bottom: -80px; right: -80px; animation: perla-orbs-orb2 20s ease-in-out infinite alternate; } .bg-orb-3 { width: 500px; height: 500px; background: radial-gradient( circle, rgba(240, 90, 195, 0.48) 0%, rgba(240, 90, 195, 0) 70% ); top: 30%; left: 20%; animation: perla-orbs-orb3 24s ease-in-out infinite alternate; } .bg-orb-4 { width: 400px; height: 400px; background: radial-gradient( circle, rgba(255, 130, 200, 0.38) 0%, rgba(255, 130, 200, 0) 70% ); top: 10%; right: 10%; animation: perla-orbs-orb4 18s ease-in-out infinite alternate; } .bg-orb-5 { width: 450px; height: 450px; background: radial-gradient( circle, rgba(220, 60, 210, 0.5) 0%, rgba(220, 60, 210, 0) 70% ); bottom: 10%; left: 5%; animation: perla-orbs-orb5 22s ease-in-out infinite alternate; } @keyframes perla-orbs-orb1 { from { transform: translate(0, 0); } to { transform: translate(220px, 180px); } } @keyframes perla-orbs-orb2 { from { transform: translate(0, 0); } to { transform: translate(-200px, -160px); } } @keyframes perla-orbs-orb3 { from { transform: translate(0, 0); } to { transform: translate(160px, -120px); } } @keyframes perla-orbs-orb4 { from { transform: translate(0, 0); } to { transform: translate(-100px, 140px); } } @keyframes perla-orbs-orb5 { from { transform: translate(0, 0); } to { transform: translate(130px, -100px); } } /* Pink-tinted specks — matches brighter orb glow */ .bg-speck { position: absolute; border-radius: 50%; background: rgba(255, 160, 190, 0.55); animation: perla-orbs-speck-flicker linear infinite alternate; } @keyframes perla-orbs-speck-flicker { from { opacity: 0.1; transform: scale(0.6); } to { opacity: 0.8; transform: scale(1.2); } } /* Mobile: scale down orbs; hide lower-priority specks */ @media (max-width: 768px) { .bg-orb-1 { width: 420px; height: 420px; } .bg-orb-2 { width: 380px; height: 380px; } .bg-orb-3 { width: 320px; height: 320px; } .bg-orb-4, .bg-orb-5 { width: 300px; height: 300px; } .bg-speck:nth-child(n + 16) { display: none; } } /* Respect reduced-motion preference */ @media (prefers-reduced-motion: reduce) { .bg-orb, .bg-speck { animation: none !important; } } /* Structural wrappers: position only (no z-index). #page gets z-index:1 from child main.css so content stacks above .bg-orbs (z-index:0). Sticky header z-50 / perla-sections rules resolve inside #page above main content. */ body > #page, body > #site-header, body > #site-main, body > #site-footer, body > header, body > main, body > footer, body > .site-header, body > .site-main, body > .site-content, body > .site-footer, body > .ast-container, body > .wp-site-blocks { position: relative; } /* ========================================================================= 2. Section banding — exact gradients from perla-comps-v1.2-dev.html Mapping (parent template-part → mockup #section): .ncs-hero / .hero-section → #hero (transparent + ::after-style radial) .credibility-section, .stats-* → #trust-bar (rgba(28,21,56,0.85)) #categories-competitions → #competitions (band 0.45) .ending-soon-section → #ending-soon (band 0.4) .promo-banner-section → #social-banner (135deg secondary gradient + ::before gold radial) .stories-section → #winner-stories (transparent) .quick-guide-section → #live-draws (transparent — NO band) .faq-section → #faq (transparent) .about-section-premium → #trust-compliance (band 0.5) #site-header → #nav (rgba(16,12,32,0.9) + blur) #site-footer → #footer (var(--color-surface)) ========================================================================= */ /* ---- HERO → #hero ------------------------------------------------------- */ /* Mockup: background: transparent; ::after radials at 70% 50% (gold 0.07) + 10% 90% (magenta 0.15) Parent hero uses `bg-gradient-to-br from-white via-gray-50 to-secondary` so we must kill both background-color AND background-image. */ body .ncs-hero, body section.hero-section { background-color: transparent !important; background-image: radial-gradient( ellipse 70% 80% at 70% 50%, rgba(201, 168, 76, 0.07) 0%, transparent 60% ), radial-gradient( ellipse 50% 60% at 10% 90%, rgba(120, 20, 100, 0.15) 0%, transparent 60% ) !important; } /* Hero image fallback: swap grey → surface→secondary dark gradient */ body .ncs-hero [class*='from-gray-200'][class*='to-gray-300'] { background-image: linear-gradient( 135deg, var(--color-surface) 0%, var(--color-secondary) 100% ); } /* ---- TRUST BAR → #trust-bar -------------------------------------------- */ /* Mockup: rgba(28,21,56,0.85) strip with dim top/bottom borders */ body .credibility-section, body .stats-section { background-color: rgba(28, 21, 56, 0.85) !important; background-image: none !important; border-top: 1px solid var(--perla-border-dim); border-bottom: 1px solid var(--perla-border-dim) !important; backdrop-filter: blur(8px); } /* ---- COMPETITIONS → #competitions (soft purple band 0.45) -------------- */ body #categories-competitions { background-color: transparent !important; background-image: linear-gradient( 180deg, transparent 0%, rgba(28, 21, 56, 0.45) 50%, transparent 100% ) !important; } /* Categories competitions: lighten the `via-gray-300` divider inside the subtitle row so it doesn't print as a hard grey line on dark canvas. */ body #categories-competitions [class*='via-gray-300'] { background-image: linear-gradient( to right, transparent, var(--perla-border), transparent ); } /* ---- ENDING SOON → #ending-soon (band 0.4) ----------------------------- */ body #ending-soon, body .ending-soon-section { background-color: transparent !important; background-image: linear-gradient( 180deg, transparent 0%, rgba(28, 21, 56, 0.4) 50%, transparent 100% ) !important; } /* ---- PROMO BANNER → #social-banner ------------------------------------- */ /* Mockup #social-banner: full-bleed strip, linear gradient + ::before gold radial */ body .promo-banner-section { position: relative; overflow: hidden; background-color: transparent !important; background-image: linear-gradient( 135deg, var(--color-secondary) 0%, #140c28 50%, var(--color-secondary) 100% ) !important; border-top: 1px solid var(--perla-border-dim); border-bottom: 1px solid var(--perla-border-dim); } body .promo-banner-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient( ellipse 70% 70% at 50% 50%, rgba(201, 168, 76, 0.08) 0%, transparent 70% ); pointer-events: none; } /* ---- TESTIMONIALS / WINNER STORIES → #winner-stories (transparent) ----- */ body .stories-section { background-color: transparent !important; background-image: none !important; } /* ---- QUICK GUIDE → #live-draws (transparent in mockup — NO band) ------- */ /* Parent uses `bg-gradient-to-b from-white to-gray-50`; beat both layers. */ body .quick-guide-section, body .how-it-works-section { background-color: transparent !important; background-image: none !important; } /* ---- ABOUT → mockup #trust-compliance (soft purple band 0.5) ---------- */ body .about-section-premium { background-color: transparent !important; background-image: linear-gradient( 180deg, transparent 0%, rgba(28, 21, 56, 0.5) 50%, transparent 100% ) !important; } body .about-section-premium > .absolute.inset-0 { background-color: transparent !important; } /* Full-bleed sections: no extra canvas tint behind gradients (mockup reads on #100c20) */ body main#main.nera-homepage, body #main.nera-homepage { background-color: transparent !important; background-image: none !important; } /* ---- FAQ → #faq (transparent in mockup) -------------------------------- */ body .faq-section { background-color: transparent !important; background-image: none !important; } /* ========================================================================= 3. SITE HEADER → #nav Mockup: rgba(16,12,32,0.9) + blur(20px) saturate(160%) + dim bottom border ========================================================================= */ body #site-header, body .site-header { background-color: rgba(16, 12, 32, 0.9) !important; backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid var(--perla-border-dim) !important; } /* ========================================================================= 4. SITE FOOTER → #footer Mockup: solid var(--color-surface) with dim top border. ========================================================================= */ body #site-footer, body .site-footer, body footer.site-footer { background-color: var(--color-surface) !important; border-top: 1px solid var(--perla-border-dim) !important; }