/* ============================================================================ SEASONAL THEMES v1.1 — Letras & Versos Estilos festivos. Activados por data-season en . Partículas hechas 100% con formas CSS (sin emoji). ============================================================================ */ /* ══════════════════════════════════════════════ ICONO DECORATIVO JUNTO AL LOGO ══════════════════════════════════════════════ */ .seasonal-icon { font-size: 1.2rem; margin-left: 0.3rem; display: inline-block; animation: seasonIconBounce 2s ease-in-out infinite; line-height: 1; vertical-align: middle; } @keyframes seasonIconBounce { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-3px) rotate(-5deg); } 75% { transform: translateY(-2px) rotate(5deg); } } /* ══════════════════════════════════════════════ NAVBAR — BORDE INFERIOR FESTIVO ══════════════════════════════════════════════ */ [data-season="navidad"] .main-nav { border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, #c0392b, #e74c3c, #d4af37, #e74c3c, #c0392b) 1; } [data-season="anio-nuevo"] .main-nav { border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, #d4af37, #f5f5f5, #d4af37, #f5f5f5, #d4af37) 1; } [data-season="san-valentin"] .main-nav { border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, #e91e63, #ff6b9d, #e91e63, #ff6b9d, #e91e63) 1; } [data-season="halloween"] .main-nav { border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, #ff6f00, #e65100, #7b1fa2, #e65100, #ff6f00) 1; } /* ══════════════════════════════════════════════ TARJETAS — BORDE SUTIL FESTIVO ══════════════════════════════════════════════ */ [data-season="navidad"] .writing-card { border-color: rgba(192, 57, 43, 0.3); } [data-season="navidad"] .writing-card:hover { border-color: rgba(192, 57, 43, 0.6); box-shadow: 0 8px 30px rgba(192, 57, 43, 0.15), var(--shadow-xl); } [data-season="anio-nuevo"] .writing-card { border-color: rgba(212, 175, 55, 0.3); } [data-season="anio-nuevo"] .writing-card:hover { border-color: rgba(212, 175, 55, 0.6); box-shadow: 0 8px 30px rgba(212, 175, 55, 0.15), var(--shadow-xl); } [data-season="san-valentin"] .writing-card { border-color: rgba(233, 30, 99, 0.25); } [data-season="san-valentin"] .writing-card:hover { border-color: rgba(233, 30, 99, 0.5); box-shadow: 0 8px 30px rgba(233, 30, 99, 0.12), var(--shadow-xl); } [data-season="halloween"] .writing-card { border-color: rgba(255, 111, 0, 0.3); } [data-season="halloween"] .writing-card:hover { border-color: rgba(255, 111, 0, 0.6); box-shadow: 0 8px 30px rgba(255, 111, 0, 0.15), var(--shadow-xl); } /* ══════════════════════════════════════════════ TOAST DE SALUDO FESTIVO ══════════════════════════════════════════════ */ .seasonal-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(120px); z-index: 10001; padding: 1rem 2rem; border-radius: 16px; font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-size: 1.1rem; font-weight: 600; color: white; cursor: pointer; opacity: 0; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); text-align: center; max-width: calc(100vw - 40px); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); user-select: none; } .seasonal-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } .seasonal-toast-navidad { background: linear-gradient(135deg, #b71c1c, #c62828, #d4af37); border: 1px solid rgba(212, 175, 55, 0.4); } .seasonal-toast-anio-nuevo { background: linear-gradient(135deg, #1a1a2e, #16213e, #d4af37); border: 1px solid rgba(212, 175, 55, 0.4); } .seasonal-toast-san-valentin { background: linear-gradient(135deg, #880e4f, #c2185b, #e91e63); border: 1px solid rgba(255, 107, 157, 0.4); } .seasonal-toast-halloween { background: linear-gradient(135deg, #1a1a2e, #4a148c, #e65100); border: 1px solid rgba(255, 111, 0, 0.4); } /* ══════════════════════════════════════════════ CONTENEDOR DE PARTÍCULAS ══════════════════════════════════════════════ */ .seasonal-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; } .seasonal-particle { position: absolute; top: -20px; display: block; opacity: 0; } /* ── COPOS DE NIEVE (Navidad) — estrella CSS ── */ .sp-snowflake { width: 8px; height: 8px; background: white; border-radius: 50%; box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.6), 0 0 12px 4px rgba(200, 220, 255, 0.3); animation: snowFall linear infinite; } @keyframes snowFall { 0% { transform: translateY(-20px) rotate(0deg) scale(var(--s, 1)); opacity: 0; } 8% { opacity: 0.9; } 50% { transform: translateY(50vh) translateX(20px) rotate(180deg) scale(var(--s, 1)); } 92% { opacity: 0.5; } 100% { transform: translateY(calc(100vh + 20px)) translateX(-15px) rotate(360deg) scale(var(--s, 1)); opacity: 0; } } /* ── CONFETI (Año Nuevo) — rectángulos de colores ── */ .sp-confetti { width: var(--cw, 5px); height: var(--ch, 10px); background: var(--cc, #FFD700); border-radius: 1px; animation: confettiFall linear infinite; } .sp-confetti.sp-round { border-radius: 50%; } @keyframes confettiFall { 0% { transform: translateY(-20px) rotate(0deg) scale(var(--s, 1)); opacity: 0; } 8% { opacity: 0.9; } 50% { transform: translateY(50vh) rotate(360deg) translateX(30px) scale(var(--s, 1)); } 92% { opacity: 0.4; } 100% { transform: translateY(calc(100vh + 20px)) rotate(720deg) translateX(-20px) scale(var(--s, 1)); opacity: 0; } } /* ── CORAZONES (San Valentín) — forma CSS ── */ .sp-heart { width: 10px; height: 10px; background: #e91e63; position: absolute; transform-origin: center; animation: heartFloat linear infinite; opacity: 0; } .sp-heart::before, .sp-heart::after { content: ''; width: 10px; height: 10px; background: #e91e63; border-radius: 50%; position: absolute; } .sp-heart::before { top: -5px; left: 0; } .sp-heart::after { left: 5px; top: 0; } @keyframes heartFloat { 0% { transform: translateY(-20px) rotate(-45deg) scale(var(--s, 0.5)); opacity: 0; } 8% { opacity: 0.7; } 50% { transform: translateY(50vh) translateX(25px) rotate(-45deg) scale(var(--s, 0.5)); } 92% { opacity: 0.3; } 100% { transform: translateY(calc(100vh + 20px)) translateX(-15px) rotate(-45deg) scale(var(--s, 0.5)); opacity: 0; } } /* ── MURCIÉLAGOS (Halloween) — silueta CSS ── */ .sp-bat { width: 18px; height: 8px; background: transparent; position: absolute; animation: batFly linear infinite; opacity: 0; } /* Cuerpo del murciélago */ .sp-bat::before { content: ''; position: absolute; width: 6px; height: 6px; background: #2d1b4e; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Alas del murciélago */ .sp-bat::after { content: ''; position: absolute; width: 18px; height: 8px; top: 0; left: 0; background: radial-gradient(ellipse at 25% 50%, #2d1b4e 0%, #2d1b4e 60%, transparent 61%), radial-gradient(ellipse at 75% 50%, #2d1b4e 0%, #2d1b4e 60%, transparent 61%); border-radius: 50% 50% 0 0; } :root[data-theme="light"] .sp-bat::before, :root[data-theme="light"] .sp-bat::after { background-color: #4a2d6e; } :root[data-theme="light"] .sp-bat::after { background: radial-gradient(ellipse at 25% 50%, #4a2d6e 0%, #4a2d6e 60%, transparent 61%), radial-gradient(ellipse at 75% 50%, #4a2d6e 0%, #4a2d6e 60%, transparent 61%); } @keyframes batFly { 0% { transform: translateY(-30px) translateX(0) scale(var(--s, 1)); opacity: 0; } 8% { opacity: 0.75; } 25% { transform: translateY(25vh) translateX(40px) scale(var(--s, 1)) rotate(-10deg); } 50% { transform: translateY(50vh) translateX(-30px) scale(var(--s, 1)) rotate(10deg); } 75% { transform: translateY(75vh) translateX(25px) scale(var(--s, 1)) rotate(-5deg); } 92% { opacity: 0.4; } 100% { transform: translateY(calc(100vh + 30px)) translateX(-20px) scale(var(--s, 1)); opacity: 0; } } /* ══════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════ */ @media (max-width: 768px) { .seasonal-icon { font-size: 1rem; } .seasonal-toast { font-size: 0.95rem; padding: 0.875rem 1.5rem; bottom: 20px; } .seasonal-particle:nth-child(n+15) { display: none; } } @media (max-width: 480px) { .seasonal-toast { font-size: 0.85rem; padding: 0.75rem 1.25rem; border-radius: 12px; } .seasonal-particle:nth-child(n+10) { display: none; } } /* ══════════════════════════════════════════════ ACCESIBILIDAD — Reducir movimiento ══════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .seasonal-icon { animation: none; } .seasonal-particle { display: none !important; } .seasonal-toast { transition: opacity 0.3s ease; transform: translateX(-50%) translateY(0); } }