/** * Season Decor - CSS Styles * @version 3.2.0 - Festive visual effects for web pages */ /* ========== Snow Piles - VARIED DESIGN ========== */ .sd-pile-snow { position: absolute; left: -3px; right: -3px; bottom: -12px; height: 38px; pointer-events: none; z-index: 1; transform: translateZ(0); will-change: transform; filter: drop-shadow(0 -2px 3px rgba(0, 0, 0, 0.12)); background-repeat: repeat-x; background-position: bottom left; background-size: auto 38px; background-image: url('data:image/svg+xml;utf8,'); } /* Enhanced snow mounds on top of pile */ .sd-pile-snow.drip::before { content: ""; position: absolute; bottom: 28px; left: 0; right: 0; height: 14px; background: radial-gradient(ellipse at center, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 40%, transparent 65%) 15px 0 / 40px 10px repeat-x, radial-gradient(ellipse at center, rgba(245,249,255,0.9) 0%, rgba(240,248,255,0.75) 40%, transparent 65%) 32px 1px / 38px 9px repeat-x; filter: blur(0.4px); opacity: 0.9; } /* ========== Icicle Layer - HANGS FROM TOP ========== */ .sd-icicles { position: absolute; left: 0; right: 0; top: -5px; height: 55px; pointer-events: none; z-index: 1; transform: translateZ(0); will-change: transform; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)); background-repeat: repeat-x; background-position: top left; background-size: auto 45px; background-image: url('data:image/svg+xml;utf8,'); } /* ========== Leaf Piles - REALISTIC LEAVES (FLIPPED UPSIDE DOWN) ========== */ .sd-pile-leaves { position: absolute; left: -3px; right: -3px; bottom: -12px; height: 36px; pointer-events: none; z-index: 1; transform: translateZ(0) scaleY(-1); will-change: transform; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2)); background-repeat: repeat-x; background-position: bottom left; background-size: auto 36px; background-image: url('data:image/svg+xml;utf8,'); } /* ========== Easter Egg Piles - COLORFUL SPRING EGGS ========== */ .sd-pile-easter { position: absolute; left: -3px; right: -3px; bottom: -14px; height: 40px; pointer-events: none; z-index: 1; transform: translateZ(0); will-change: transform; filter: drop-shadow(0 -2px 3px rgba(0, 0, 0, 0.15)); background-repeat: repeat-x; background-position: bottom left; background-size: auto 40px; background-image: url('data:image/svg+xml;utf8,'); } /* ========== Summer Beach/Sand Piles - TROPICAL VIBES ========== */ .sd-pile-summer { position: absolute; left: -3px; right: -3px; bottom: -10px; height: 35px; pointer-events: none; z-index: 1; transform: translateZ(0); will-change: transform; filter: drop-shadow(0 -1px 2px rgba(0, 0, 0, 0.1)); background-repeat: repeat-x; background-position: bottom left; background-size: auto 35px; background-image: url('data:image/svg+xml;utf8,'); } /* ========== Gimmick Icons (Snowmen & Pumpkins) ========== */ .sd-gimmick-icons { position: fixed; z-index: 6; pointer-events: none; } .sd-gimmick-icons .icon-group { transform-origin: 50% 100%; } @media (prefers-reduced-motion: no-preference) { .sd-gimmick-icons .icon-group { animation: sd-gentle-bob 3.4s ease-in-out infinite; } } @keyframes sd-gentle-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* Ground pad for icons */ .sd-ground-pad { position: absolute; left: -10px; right: -10px; bottom: -6px; height: 18px; border-radius: 50%; } .sd-ground-pad.snow { background: radial-gradient(ellipse 140px 16px at 50% 40%, rgba(255, 255, 255, 0.9), transparent 70%), radial-gradient(ellipse 100px 10px at 50% 50%, rgba(240, 248, 255, 0.7), transparent); filter: blur(1px); } .sd-ground-pad.leaves { background: radial-gradient(ellipse 140px 16px at 50% 40%, rgba(139, 69, 19, 0.6), transparent 70%), radial-gradient(ellipse 100px 10px at 50% 50%, rgba(205, 133, 63, 0.5), transparent); filter: blur(1px); } .sd-ground-pad.easter { background: radial-gradient(ellipse 140px 16px at 50% 40%, rgba(144, 238, 144, 0.7), transparent 70%), radial-gradient(ellipse 100px 10px at 50% 50%, rgba(122, 204, 122, 0.6), transparent); filter: blur(1px); } .sd-ground-pad.summer { background: radial-gradient(ellipse 140px 16px at 50% 40%, rgba(244, 228, 193, 0.8), transparent 70%), radial-gradient(ellipse 100px 10px at 50% 50%, rgba(230, 213, 168, 0.6), transparent); filter: blur(1px); } /* ========== COMIC STYLE ICON ANIMATIONS ========== */ /* Pumpkin Animations */ .sd-pumpkin-icon { animation: sd-gentle-sway 3s ease-in-out infinite; filter: drop-shadow(3px 3px 0 rgba(0,0,0,0.3)); } @keyframes sd-gentle-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } } .sd-pumpkin-glow { animation: sd-spooky-glow 2s ease-in-out infinite; } @keyframes sd-spooky-glow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* Snowman Animations */ .sd-snowman-icon { animation: sd-snowman-bounce 2.5s ease-in-out infinite; filter: drop-shadow(3px 3px 0 rgba(0,0,0,0.3)); } @keyframes sd-snowman-bounce { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.02); } } .sd-snowman-shimmer { animation: sd-ice-shimmer 3s ease-in-out infinite; } @keyframes sd-ice-shimmer { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.7; } } /* Bunny Animations */ .sd-bunny-icon { animation: sd-bunny-hop 2s ease-in-out infinite; filter: drop-shadow(3px 3px 0 rgba(0,0,0,0.3)); } @keyframes sd-bunny-hop { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-10px); } 50% { transform: translateY(-5px); } 75% { transform: translateY(-12px); } } .sd-bunny-ear-left { animation: sd-ear-wiggle-left 1.5s ease-in-out infinite; transform-origin: 60px 57px; } .sd-bunny-ear-right { animation: sd-ear-wiggle-right 1.5s ease-in-out infinite; transform-origin: 120px 57px; } @keyframes sd-ear-wiggle-left { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(3deg); } } @keyframes sd-ear-wiggle-right { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(8deg); } 75% { transform: rotate(-3deg); } } /* Sun Animations */ .sd-sun-icon { animation: sd-sun-pulse 2s ease-in-out infinite; filter: drop-shadow(3px 3px 0 rgba(0,0,0,0.3)); } @keyframes sd-sun-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .sd-sun-rays { animation: sd-rotate-rays 20s linear infinite; transform-origin: center; } @keyframes sd-rotate-rays { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .sd-sun-shine { animation: sd-shine 1.5s ease-in-out infinite; } @keyframes sd-shine { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } }