/* ===== FOOTER STYLES ===== */ .footer-wrapper { position: relative; } /* Cute wave top */ .footer-wave-top { position: relative; height: 100px; background: #f5e5d2; overflow: hidden; } .footer-wave-top svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; } /* Main footer - warm cream/beige color */ .footer { background: linear-gradient(180deg, #F5E6D3 0%, #EED9C4 100%); padding: 60px 0 0; position: relative; } /* Subtle pattern overlay */ .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23E85A4F' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; } .footer-container { max-width: 1200px; margin: 0 auto; padding: 0 30px; position: relative; z-index: 1; } /* Footer main content */ .footer-content { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 50px; padding-bottom: 50px; } /* Brand section */ .footer-brand { padding-right: 20px; } .footer-logo { margin-bottom: 20px; display: flex; align-items: center; gap: 15px; } .footer-logo img { height: 60px; width: auto; max-width: 240px; display: block; } .footer-logo-text h1 { font-family: 'Fredoka', sans-serif; font-size: 32px; font-weight: 700; color: #E85A4F; letter-spacing: 1px; text-transform: uppercase; line-height: 1; } .footer-logo-text span { font-family: 'Nunito', sans-serif; font-size: 11px; font-weight: 700; color: #666; letter-spacing: 2px; text-transform: uppercase; } .footer-description { color: #5D4E37; font-size: 14px; line-height: 1.8; margin-bottom: 25px; } /* Social icons - colorful circles */ .social-icons { display: flex; gap: 12px; } .social-icon { width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .social-icon.instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); } .social-icon.facebook { background: #1877F2; } .social-icon.youtube { background: #FF0000; } .social-icon:hover { transform: translateY(-5px) scale(1.1); box-shadow: 0 8px 25px rgba(0,0,0,0.15); } /* Footer columns */ .footer-column h3 { font-family: 'Fredoka', sans-serif; font-size: 16px; font-weight: 600; color: #E85A4F; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 3px solid #1ABC9C; display: inline-block; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 12px; } .footer-links a { color: #5D4E37; text-decoration: none; font-size: 15px; font-weight: 600; transition: all 0.3s ease; display: inline-block; } .footer-links a:hover { color: #1ABC9C; transform: translateX(5px); } /* Newsletter section */ .footer-newsletter { background: #fff; border-radius: 20px; padding: 25px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); border: 2px solid #F0E0D0; } .newsletter-title { font-family: 'Fredoka', sans-serif; font-size: 16px; font-weight: 600; color: #E85A4F; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } .newsletter-text { color: #5D4E37; font-size: 13px; margin-bottom: 15px; line-height: 1.5; } .newsletter-form { display: flex; gap: 8px; margin-bottom: 20px; } .newsletter-input { flex: 1; padding: 12px 15px; border: 2px solid #F0E0D0; border-radius: 25px; background: #FFF8F5; color: #333; font-size: 14px; font-family: 'Nunito', sans-serif; transition: all 0.3s ease; } .newsletter-input::placeholder { color: #999; } .newsletter-input:focus { outline: none; border-color: #1ABC9C; } .newsletter-btn { padding: 12px 25px; background: #1ABC9C; border: none; border-radius: 25px; color: #fff; font-size: 14px; font-weight: 700; font-family: 'Nunito', sans-serif; cursor: pointer; transition: all 0.3s ease; } .newsletter-btn:hover { background: #16A085; transform: scale(1.05); } /* Contact info */ .contact-info { display: flex; flex-direction: column; gap: 10px; padding-top: 15px; border-top: 1px dashed #E0D0C0; } .contact-item { display: flex; align-items: center; gap: 10px; color: #5D4E37; font-size: 13px; font-weight: 600; } .contact-item i { color: #1ABC9C; font-size: 14px; width: 16px; } /* Footer bottom - darker section */ .footer-bottom-wrapper { background: #067765; margin-top: 30px; } .footer-bottom { max-width: 1200px; margin: 0 auto; padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; } .copyright { color: #fff; font-size: 14px; font-weight: 600; } .copyright a { color: #FFD93D; text-decoration: none; font-weight: 700; } .copyright a:hover { text-decoration: underline; } .footer-bottom-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .footer-bottom-links a { color: rgba(255,255,255,0.9); text-decoration: none; font-size: 13px; font-weight: 600; transition: color 0.3s ease; } .footer-bottom-links a:hover { color: #FFD93D; } /* Payment icons */ .payment-methods { display: flex; gap: 8px; align-items: center; } .payment-methods span { color: rgba(255,255,255,0.8); font-size: 12px; font-weight: 600; } .payment-icon { width: 40px; height: 26px; background: rgba(255,255,255,0.2); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; } /* Responsive */ @media (max-width: 1024px) { .footer-content { grid-template-columns: 1fr 1fr; gap: 40px; } .footer-brand { grid-column: span 2; text-align: center; padding-right: 0; } .footer-logo { justify-content: center; } .social-icons { justify-content: center; } .footer-bottom { flex-direction: column; text-align: center; } .footer-bottom-links { justify-content: center; } .payment-methods { justify-content: center; } } @media (max-width: 768px) { .footer-content { grid-template-columns: 1fr; gap: 30px; } .footer-brand { grid-column: span 1; } .footer-column h3 { display: block; text-align: center; } .footer-links { text-align: center; } .footer-links a:hover { transform: none; } .newsletter-form { flex-direction: column; } .newsletter-btn { width: 100%; } .contact-info { align-items: center; } .footer-wave-top { height: 60px; } .footer-wave-top svg { height: 60px; } .footer-bottom-links { gap: 15px; } } @media (max-width: 480px) { .footer-container { padding: 0 20px; } .footer-logo-text h1 { font-size: 26px; } .footer-newsletter { padding: 20px; } .footer-bottom-links a { font-size: 11px; } .footer-bottom { padding: 15px 20px; } .copyright { font-size: 12px; } } document.addEventListener('DOMContentLoaded', function() { const newsletterForm = document.querySelector('.newsletter-form'); if (newsletterForm) { newsletterForm.addEventListener('submit', function(e) { e.preventDefault(); const btn = this.querySelector('.newsletter-btn'); const originalText = btn.textContent; btn.textContent = 'Subscribed!'; btn.style.background = '#27ae60'; setTimeout(() => { btn.textContent = originalText; btn.style.background = ''; this.querySelector('.newsletter-input').value = ''; }, 2000); }); } });