/* /css/site.css */ /* ------------------------- Watermark (logo fantasma) ------------------------- */ .bg-watermark { position: fixed; inset: 0; z-index: -20; pointer-events: none; opacity: 0.08; background-image: url("/assets/logo.webp"); /* ajustá ruta */ background-repeat: no-repeat; background-position: center; background-size: min(720px, 70vw); filter: drop-shadow(0 0 22px rgba(255, 46, 166, 0.15)); } /* ------------------------- Blobs (luces / glow) ------------------------- */ .bg-blobs { position: fixed; inset: 0; z-index: -15; pointer-events: none; } .blob { position: absolute; width: 520px; height: 520px; border-radius: 9999px; filter: blur(58px); opacity: 0.55; transform: translateZ(0); } .blob-1 { top: -140px; left: -180px; background: rgba(255, 46, 166, 0.22); } .blob-2 { bottom: -180px; right: -170px; background: rgba(34, 211, 238, 0.18); } .blob-3 { top: 20%; right: 12%; background: rgba(139, 92, 246, 0.16); } /* ------------------------- Modo Navidad (activable) - activá poniendo class="theme-xmas" en ------------------------- */ .theme-xmas { --xmas-red: rgba(239, 68, 68, .22); --xmas-green: rgba(34, 197, 94, .20); --xmas-gold: rgba(250, 204, 21, .22); --xmas-cyan: rgba(34, 211, 238, .20); --xmas-violet: rgba(168, 85, 247, .20); } /* Luces superiores (si tu header es position:relative) */ .theme-xmas header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: linear-gradient(90deg, rgba(250, 204, 21, .9), rgba(239, 68, 68, .9), rgba(34, 197, 94, .9), rgba(34, 211, 238, .9), rgba(168, 85, 247, .9)); filter: blur(.3px); opacity: .9; pointer-events: none; } /* Nieve */ .snow { position: fixed; inset: 0; z-index: -12; pointer-events: none; opacity: .55; background-image: radial-gradient(circle, rgba(255, 255, 255, .85) 1px, transparent 2px), radial-gradient(circle, rgba(255, 255, 255, .65) 1px, transparent 2px), radial-gradient(circle, rgba(255, 255, 255, .45) 1px, transparent 2px); background-size: 140px 140px, 220px 220px, 320px 320px; background-position: 0 0, 40px 80px, 120px 40px; animation: snowFall 16s linear infinite; filter: drop-shadow(0 0 2px rgba(255, 255, 255, .35)); } @keyframes snowFall { from { transform: translateY(-40px); } to { transform: translateY(260px); } } /* Blobs “guirnalda” en navidad */ .theme-xmas .blob-1, .theme-xmas .blob-2, .theme-xmas .blob-3 { animation: blobLights 3.2s ease-in-out infinite; will-change: background-color, opacity, filter, transform; } .theme-xmas .blob-2 { animation-delay: .5s; } .theme-xmas .blob-3 { animation-delay: 1s; } @keyframes blobLights { 0% { background-color: var(--xmas-gold); opacity: .55; filter: blur(58px) saturate(120%); transform: scale(1); } 20% { background-color: var(--xmas-red); opacity: .75; filter: blur(52px) saturate(150%); transform: scale(1.03); } 40% { background-color: var(--xmas-green); opacity: .50; filter: blur(60px) saturate(130%); transform: scale(.99); } 60% { background-color: var(--xmas-cyan); opacity: .70; filter: blur(50px) saturate(160%); transform: scale(1.02); } 80% { background-color: var(--xmas-violet); opacity: .55; filter: blur(62px) saturate(135%); transform: scale(1); } 100% { background-color: var(--xmas-gold); opacity: .55; filter: blur(58px) saturate(120%); transform: scale(1); } } /* ------------------------- Hamburguesa: animación (si usás 3 spans con data-nav-line) ------------------------- */ .nav-lines span { display: block; height: 2px; width: 22px; border-radius: 9999px; background: rgba(255, 255, 255, .9); transition: transform .2s ease, opacity .2s ease; } .nav-open .nav-lines span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-open .nav-lines span:nth-child(2) { opacity: 0; } .nav-open .nav-lines span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ------------------------- Accesibilidad ------------------------- */ @media (prefers-reduced-motion: reduce) { .snow, .theme-xmas .blob-1, .theme-xmas .blob-2, .theme-xmas .blob-3 { animation: none !important; } }