/* ============================================ 🎄 ŚWIĄTECZNY MOTYW - LKH INTERMEDIA Włącz/wyłącz dodając klasę .christmas-theme do ============================================ */ /* Śnieg padający w tle */ .christmas-theme .snowflakes { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; overflow: hidden; } .christmas-theme .snowflake { position: absolute; top: -20px; color: #fff; font-size: 1rem; opacity: 0.8; animation: snowfall linear infinite; text-shadow: 0 0 5px rgba(255,255,255,0.5); } .christmas-theme .snowflake:nth-child(1) { left: 5%; animation-duration: 8s; animation-delay: 0s; font-size: 0.8rem; } .christmas-theme .snowflake:nth-child(2) { left: 15%; animation-duration: 12s; animation-delay: 1s; font-size: 1.2rem; } .christmas-theme .snowflake:nth-child(3) { left: 25%; animation-duration: 10s; animation-delay: 2s; font-size: 0.9rem; } .christmas-theme .snowflake:nth-child(4) { left: 35%; animation-duration: 14s; animation-delay: 0.5s; font-size: 1rem; } .christmas-theme .snowflake:nth-child(5) { left: 45%; animation-duration: 9s; animation-delay: 3s; font-size: 1.1rem; } .christmas-theme .snowflake:nth-child(6) { left: 55%; animation-duration: 11s; animation-delay: 1.5s; font-size: 0.7rem; } .christmas-theme .snowflake:nth-child(7) { left: 65%; animation-duration: 13s; animation-delay: 2.5s; font-size: 1.3rem; } .christmas-theme .snowflake:nth-child(8) { left: 75%; animation-duration: 10s; animation-delay: 0.8s; font-size: 0.85rem; } .christmas-theme .snowflake:nth-child(9) { left: 85%; animation-duration: 15s; animation-delay: 1.2s; font-size: 1rem; } .christmas-theme .snowflake:nth-child(10) { left: 95%; animation-duration: 8s; animation-delay: 2s; font-size: 0.95rem; } @keyframes snowfall { 0% { transform: translateY(-20px) rotate(0deg); opacity: 0.8; } 100% { transform: translateY(100vh) rotate(360deg); opacity: 0.3; } } /* Przycisk włączania/wyłączania motywu świątecznego */ .christmas-toggle { position: fixed; bottom: 100px; left: 20px; width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #c41e3a 0%, #228b22 100%); border: 2px solid #ffd700; color: white; font-size: 1.5rem; cursor: pointer; z-index: 10000; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(196, 30, 58, 0.4); transition: all 0.3s ease; } .christmas-toggle:hover { transform: scale(1.1) rotate(10deg); box-shadow: 0 6px 30px rgba(196, 30, 58, 0.6); } .christmas-toggle.active { animation: jingle 0.5s ease infinite; } @keyframes jingle { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } } /* Świąteczne kolory przycisków */ .christmas-theme .btn-primary { background: linear-gradient(135deg, #c41e3a 0%, #8b0000 100%) !important; border-color: #ffd700 !important; box-shadow: 0 4px 15px rgba(196, 30, 58, 0.4); } .christmas-theme .btn-primary:hover { background: linear-gradient(135deg, #d42a47 0%, #a00000 100%) !important; box-shadow: 0 6px 25px rgba(196, 30, 58, 0.6); } /* Zielone akcenty */ .christmas-theme .btn-outline { border-color: #228b22 !important; color: #228b22 !important; } .christmas-theme .btn-outline:hover { background: #228b22 !important; color: white !important; } /* Świąteczne karty */ .christmas-theme .pricing-card, .christmas-theme .usluga-card, .christmas-theme .card { border: 1px solid rgba(196, 30, 58, 0.2) !important; position: relative; overflow: visible; } .christmas-theme .pricing-card.featured { border: 2px solid #ffd700 !important; box-shadow: 0 0 30px rgba(255, 215, 0, 0.3) !important; } /* Lampki choinkowe na kartach featured */ .christmas-theme .pricing-card.featured::before { content: '✨🎄✨'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: 1rem; z-index: 10; } /* Prezenty przy CTA */ .christmas-theme .cta-section { position: relative; } .christmas-theme .cta-section::before { content: '🎁'; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-size: 3rem; opacity: 0.3; animation: float 3s ease-in-out infinite; } .christmas-theme .cta-section::after { content: '🎁'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 3rem; opacity: 0.3; animation: float 3s ease-in-out infinite 1.5s; } @keyframes float { 0%, 100% { transform: translateY(-50%) rotate(-5deg); } 50% { transform: translateY(-60%) rotate(5deg); } } /* Świąteczny footer */ .christmas-theme footer::before { content: '❄️ Wesołych Świąt życzy LKH Intermedia! ❄️'; display: block; text-align: center; padding: 0.5rem; background: linear-gradient(135deg, #c41e3a 0%, #228b22 100%); color: white; font-weight: 600; font-size: 0.9rem; } /* Złote akcenty - chipy/badge */ .christmas-theme .chip, .christmas-theme .badge { background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 179, 71, 0.2) 100%) !important; border: 1px solid rgba(255, 215, 0, 0.4) !important; } /* Badge "Najpopularniejszy" - tryb jasny ze świątecznym motywem */ .christmas-theme:not(.dark-mode) .pricing-card .badge { background: linear-gradient(135deg, #c41e3a 0%, #a91b30 100%) !important; border: none !important; color: #ffffff !important; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 8px rgba(196, 30, 58, 0.4); } /* Animowane światełka na chipach */ .christmas-theme .hero-badges .chip:nth-child(odd) { animation: twinkle 1.5s ease-in-out infinite; } .christmas-theme .hero-badges .chip:nth-child(even) { animation: twinkle 1.5s ease-in-out infinite 0.75s; } @keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* Świąteczne ikony */ .christmas-theme .feature-icon, .christmas-theme .usluga-icon { background: linear-gradient(135deg, #c41e3a 0%, #228b22 100%) !important; } /* Responsywność */ @media (max-width: 768px) { .christmas-theme .cta-section::before, .christmas-theme .cta-section::after { display: none; } .christmas-toggle { bottom: 80px; left: 10px; width: 45px; height: 45px; font-size: 1.3rem; } } /* Wyłącz animacje dla osób z preferencją reduced-motion */ @media (prefers-reduced-motion: reduce) { .christmas-theme .snowflake, .christmas-theme .christmas-toggle.active { animation: none !important; } }