Untitled
unknown
plain_text
19 days ago
8.0 kB
4
Indexable
{% style %} .my-treasure-faq { max-width: 100%; margin: 30px auto; font-family: 'Montserrat', sans-serif; background-color: #fff5f0; border-radius: 10px; padding: 25px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); } .my-treasure-faq__heading { text-align: center; font-size: 22px; font-weight: 600; margin-bottom: 25px; color: #000; position: relative; padding-bottom: 12px; } .my-treasure-faq__heading:after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: linear-gradient(135deg, #f5a623, #f26e91); border-radius: 3px; } .my-treasure-faq__item { border-bottom: 1px solid rgba(242, 110, 145, 0.1); margin-bottom: 8px; overflow: hidden; border-radius: 6px; transition: box-shadow 0.3s ease; } .my-treasure-faq__item:hover { box-shadow: 0 2px 8px rgba(242, 110, 145, 0.1); } .my-treasure-faq__item--active { box-shadow: 0 4px 12px rgba(242, 110, 145, 0.15); border-left: 3px solid #f26e91; } .my-treasure-faq__question { width: 100%; background: none; border: none; text-align: left; font-size: 16px; font-weight: 500; padding: 16px 20px; position: relative; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: #333; transition: all 0.3s ease; } .my-treasure-faq__question:hover { color: #f26e91; } .my-treasure-faq__item--active .my-treasure-faq__question { color: #f26e91; } .my-treasure-faq__question:focus { outline: none; } .my-treasure-faq__icon { width: 14px; height: 14px; position: relative; transition: transform 0.4s ease; } .my-treasure-faq__icon:before, .my-treasure-faq__icon:after { content: ''; position: absolute; background-color: #f26e91; transition: all 0.3s ease; } .my-treasure-faq__icon:before { top: 6px; left: 0; width: 14px; height: 2px; } .my-treasure-faq__icon:after { top: 0; left: 6px; width: 2px; height: 14px; } .my-treasure-faq__item--active .my-treasure-faq__icon:after { transform: rotate(90deg); opacity: 0; } .my-treasure-faq__answer { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.44, 0.185, 0.575, 0.855), padding 0.3s ease, opacity 0.3s ease; font-size: 14px; color: #555; line-height: 1.6; opacity: 0; padding: 0 20px; } .my-treasure-faq__item--active .my-treasure-faq__answer { max-height: 300px; padding: 0 20px 20px 20px; opacity: 1; } .my-treasure-faq__highlight { font-weight: 500; color: #f26e91; position: relative; display: inline-block; } .my-treasure-faq__highlight:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(135deg, rgba(245, 166, 35, 0.2), rgba(242, 110, 145, 0.2)); border-radius: 3px; z-index: -1; } {% endstyle %} <div class="my-treasure-faq"> <h2 class="my-treasure-faq__heading">Why Choose MyLove MyTreasure?</h2> <div class="my-treasure-faq__container"> <div class="my-treasure-faq__item"> <button class="my-treasure-faq__question" aria-expanded="false"> What makes your jewelry non-tarnish? <span class="my-treasure-faq__icon"></span> </button> <div class="my-treasure-faq__answer"> <p>Our pieces are made from premium stainless steel and coated with PVD 18k gold plating—the same technology used in high-end jewelry. It's built to last through sweat, water, and daily wear without fading.</p> <p> <span class="my-treasure-faq__highlight">We even include a lifetime color warranty—yes, it's that serious.</span> </p> </div> </div> <div class="my-treasure-faq__item"> <button class="my-treasure-faq__question" aria-expanded="false"> Can I shower, swim, or work out in it? <span class="my-treasure-faq__icon"></span> </button> <div class="my-treasure-faq__answer"> <p>Yes! Every piece is waterproof, ocean-proof, and gym-proof.</p> <p>Wear it in the shower, pool, or sauna—our jewelry is made for your lifestyle.</p> <p> <span class="my-treasure-faq__highlight">You never have to take it off. Ever.</span> </p> </div> </div> <div class="my-treasure-faq__item"> <button class="my-treasure-faq__question" aria-expanded="false"> Will it irritate my skin? <span class="my-treasure-faq__icon"></span> </button> <div class="my-treasure-faq__answer"> <p>Nope. All our pieces are hypoallergenic and nickel-free, so they're safe for even the most sensitive skin.</p> <p> <span class="my-treasure-faq__highlight">No green fingers, no itching—just daily glow.</span> </p> </div> </div> <div class="my-treasure-faq__item"> <button class="my-treasure-faq__question" aria-expanded="false"> What if I don't like it or pick the wrong size? <span class="my-treasure-faq__icon"></span> </button> <div class="my-treasure-faq__answer"> <p>No stress—you're covered. We offer 30-day easy returns and most rings are adjustable or come in multiple sizes.</p> <p> <span class="my-treasure-faq__highlight">Plus, our team is here to help you get the perfect fit.</span> </p> </div> </div> <div class="my-treasure-faq__item"> <button class="my-treasure-faq__question" aria-expanded="false"> Why is this such a good deal? <span class="my-treasure-faq__icon"></span> </button> <div class="my-treasure-faq__answer"> <p>Instead of charging €30 per piece like other brands, we let you build your own bundle of 5 for just €59,95. That's only €12 per piece, with premium quality.</p> <p> <span class="my-treasure-faq__highlight">Real gold glow. Not real gold prices.</span> </p> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const questions = document.querySelectorAll('.my-treasure-faq__question'); questions.forEach(question => { question.addEventListener('click', function() { const item = this.parentElement; const isActive = item.classList.contains('my-treasure-faq__item--active'); // Close all items with animation document.querySelectorAll('.my-treasure-faq__item').forEach(el => { el.classList.remove('my-treasure-faq__item--active'); el.querySelector('.my-treasure-faq__question').setAttribute('aria-expanded', 'false'); }); // If the clicked item wasn't active, open it if (!isActive) { item.classList.add('my-treasure-faq__item--active'); this.setAttribute('aria-expanded', 'true'); // Smooth scroll to this item if it's not in view setTimeout(() => { const rect = item.getBoundingClientRect(); const isInView = ( rect.top >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) ); if (!isInView) { item.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } }, 300); } }); }); // Open first item by default if (questions.length > 0) { const firstItem = questions[0].parentElement; firstItem.classList.add('my-treasure-faq__item--active'); questions[0].setAttribute('aria-expanded', 'true'); } }); </script>
Editor is loading...
Leave a Comment