@import url(‘https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Montserrat:wght@200;300;400;500&display=swap’); .reveal { opacity: 0; transform: translateY(40px); transition: all 1s cubic-bezier(0.5, 0, 0, 1); } .reveal.active { opacity: 1; transform: translateY(0); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); } .faq-answer.open { max-height: 1000px; transition: max-height 1s ease-in-out; } .faq-icon { transition: transform 0.3s ease; } .faq-icon.open { transform: rotate(45deg); } html { scroll-behavior: smooth; } tailwind.config = { theme: { extend: { fontFamily: { serif: [‘”Cormorant Garamond”‘, ‘serif’], sans: [‘”Montserrat”‘, ‘sans-serif’], }, colors: { lujo: { dark: ‘#121212’, light: ‘#F8F7F5’, accent: ‘#A39171’, gray: ‘#5A5A5A’, border: ‘#E5E5E5’ } } } } } document.addEventListener(“DOMContentLoaded”, () => { const reveals = document.querySelectorAll(‘.reveal’); const revealOptions = { threshold: 0.15, rootMargin: “0px 0px -50px 0px” }; const revealOnScroll = new IntersectionObserver(function(entries, observer) { entries.forEach(entry => { if (!entry.isIntersecting) return; entry.target.classList.add(‘active’); observer.unobserve(entry.target); }); }, revealOptions); reveals.forEach(reveal => revealOnScroll.observe(reveal)); const toggles = document.querySelectorAll(‘.faq-toggle’); toggles.forEach(toggle => { toggle.addEventListener(‘click’, () => { const answer = toggle.nextElementSibling; const icon = toggle.querySelector(‘.faq-icon’); document.querySelectorAll(‘.faq-answer’).forEach(el => { if (el !== answer) el.classList.remove(‘open’); }); document.querySelectorAll(‘.faq-icon’).forEach(el => { if (el !== icon) el.classList.remove(‘open’); }); answer.classList.toggle(‘open’); icon.classList.toggle(‘open’); }); }); });