Encabezado halloween solo para budypress

/* 🎃 Encabezado Halloween para BuddyPress / WordPress */ /* Pega este código en Apariencia → Personalizar → CSS adicional */ /* Fondo general del encabezado */ header.site-header { position: relative; background: linear-gradient(180deg, #1a0f1f 0%, #000 100%); background-image: url(‘https://wallpapers.com/images/hd/purple-halloween-ecek5wax31531mdy.jpg’); background-repeat: no-repeat; background-position: center top; background-size: cover; color: #f7d88a; overflow: hidden; z-index: 1; } /* Capa de nubes translúcidas en movimiento */ header.site-header::before { content: «»; position: absolute; top: 0; left: 0; width: 200%; height: 100%; background: url(‘https://peliculazo.site/wp-content/uploads/2025/10/pngwing.com_.png’) repeat-x; background-size: contain; opacity: 0.25; animation: moverNiebla 60s linear infinite; z-index: 0; } @keyframes moverNiebla { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Bruja volando en escoba */ header.site-header::after { content: «»; position: absolute; top: 20px; left: -150px; width: 100px; height: 100px; background: url(‘https://peliculazo.site/wp-content/uploads/2025/10/bruja.png’) no-repeat center; background-size: contain; animation: volarBruja 20s linear infinite; z-index: 2; } @keyframes volarBruja { 0% { transform: translateX(0) translateY(0) rotate(5deg); opacity: 1; } 25% { transform: translateX(25vw) translateY(-15px) rotate(-5deg); } 50% { transform: translateX(50vw) translateY(0) rotate(3deg); opacity: 0.9; } 75% { transform: translateX(75vw) translateY(15px) rotate(-3deg); } 100% { transform: translateX(100vw) translateY(0) rotate(5deg); opacity: 0.8; } } /* Título y descripción del sitio */ header.site-header .site-title, header.site-header .site-description { text-shadow: 2px 2px 4px #000; color: #f7d88a; } /* Efecto de iluminación suave al pasar el ratón */ header.site-header:hover { box-shadow: inset 0 -10px 40px rgba(255, 140, 0, 0.3); transition: box-shadow 0.8s ease-in-out; } /* No afectar el menú */ header.site-header nav, header.site-header .main-navigation { position: relative; z-index: 5; }