' } ← VTurb, Panda, etc. // Deixe null para o player continuar apenas como imagem estática. vsl: null, /* ------------------------------------------------------- comportamento */ // false = só as perguntas aparecem; o lead clica para abrir a resposta. // true = todas as respostas visíveis de cara (como o Figma exibe o frame). faqComecaAberto: false, ctaFixaNoMobile: true // barra fixa de compra no rodapé em telas pequenas }; /* === MAIN SCRIPT (js/main.js) === */ /* ============================================================================ From LA to Your Table — comportamento da página de vendas ========================================================================= */ (function () { 'use strict'; var CFG = window.PAGE_CONFIG || {}; var DESKTOP_MIN = 1200; /* ========================================================================== 1 · ESCALA — mantém 1rem = viewport/192 usando a largura real do documento (clientWidth), sem contar a barra de rolagem. É isso que faz o desktop bater pixel a pixel com o Figma em 1920px. ====================================================================== */ function applyScale() { var w = document.documentElement.clientWidth; document.documentElement.style.setProperty('--vw', w + 'px'); } applyScale(); window.addEventListener('resize', applyScale, { passive: true }); window.addEventListener('orientationchange', applyScale); function isDesktop() { return document.documentElement.clientWidth >= DESKTOP_MIN; } /* ========================================================================== 2 · PLACEHOLDERS — troca os campos [ ... ] do Figma pelos valores do config.js. O que não estiver preenchido continua aparecendo como no design. ====================================================================== */ var TOKENS = { '[PREÇO CHEIO]': CFG.precoCheio, '[PREÇO COM DESCONTO]': CFG.precoComDesconto, '[Nº DE PARCELAS]': CFG.numeroParcelas, '[VALOR DA PARCELA]': CFG.valorParcela, '[PRAZO DA OFERTA]': CFG.prazoDaOferta, '[TEMPO DE ACESSO]': CFG.tempoDeAcesso, '[VALOR ANCORADO 1]': CFG.valorAncorado1, '[VALOR ANCORADO 2]': CFG.valorAncorado2, '[VALOR ANCORADO 3]': CFG.valorAncorado3 }; function fillTokens(root) { var pending = Object.keys(TOKENS).filter(function (k) { return TOKENS[k] !== null && TOKENS[k] !== undefined && TOKENS[k] !== ''; }); if (!pending.length) return; var walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null); var nodes = []; var n; while ((n = walker.nextNode())) { if (n.nodeValue.indexOf('[') !== -1) nodes.push(n); } nodes.forEach(function (node) { var text = node.nodeValue; pending.forEach(function (key) { if (text.indexOf(key) !== -1) text = text.split(key).join(TOKENS[key]); // versão em caixa alta usada nos eyebrows do design var upper = key.toUpperCase(); if (upper !== key && text.indexOf(upper) !== -1) { text = text.split(upper).join(String(TOKENS[key]).toUpperCase()); } }); if (text !== node.nodeValue) node.nodeValue = text; }); } fillTokens(document.body); /* ========================================================================== 3 · CTAs — aponta os botões para o checkout quando houver URL. ====================================================================== */ (function wireCtas() { var ctas = document.querySelectorAll('[data-cta]'); Array.prototype.forEach.call(ctas, function (el) { if (CFG.checkoutUrl) { el.setAttribute('href', CFG.checkoutUrl); el.setAttribute('rel', 'noopener'); } else if (el.hasAttribute('data-checkout')) { // sem checkout definido: os botões finais rolam até a oferta el.setAttribute('href', '#oferta'); } }); // rolagem suave nas âncoras internas document.addEventListener('click', function (e) { var a = e.target.closest && e.target.closest('a[href^="#"]'); if (!a) return; var id = a.getAttribute('href'); if (!id || id === '#') return; var target = document.querySelector(id); if (!target) return; e.preventDefault(); target.scrollIntoView({ behavior: 'smooth', block: 'start' }); }); })(); /* ========================================================================== 4 · MARQUEES — as faixas de pratos e a fileira de módulos. No Figma as duas fileiras são estáticas, com deslocamentos horizontais diferentes (data-offset). Aqui elas partem exatamente desses offsets e deslizam em sentidos opostos, em loop contínuo. ====================================================================== */ function initMarquees() { var marquees = document.querySelectorAll('[data-marquee]'); Array.prototype.forEach.call(marquees, function (mq) { var track = mq.querySelector('[data-marquee-track]'); if (!track) return; // fileira espelhada (fileira 2 das receitas) — clona os cards da fileira 1 var cloneFrom = mq.getAttribute('data-clone-from'); if (cloneFrom && !track.children.length) { var source = document.querySelector(cloneFrom + ' [data-marquee-track]'); if (source) { // só os cards originais — os duplicados do loop levam aria-hidden Array.prototype.forEach.call(source.children, function (child) { if (child.getAttribute('aria-hidden') === 'true') return; track.appendChild(child.cloneNode(true)); }); } } if (!track.children.length) return; var originals = Array.prototype.slice.call(track.children); var loopWidth = 0; var direction = mq.getAttribute('data-direction') === 'right' ? 1 : -1; var speed = parseFloat(mq.getAttribute('data-speed')) || 40; // px/s @1920 var offset = 0; var paused = false; var rafId = null; var last = 0; function measure() { // largura de uma volta = soma dos cards originais + gaps var styles = window.getComputedStyle(track); var gap = parseFloat(styles.columnGap || styles.gap) || 0; loopWidth = originals.reduce(function (sum, el) { return sum + el.getBoundingClientRect().width + gap; }, 0); } function fill() { // duplica até cobrir a viewport + uma volta inteira var need = mq.getBoundingClientRect().width + loopWidth; var guard = 0; while (track.scrollWidth < need && guard < 8) { originals.forEach(function (el) { var c = el.cloneNode(true); c.setAttribute('aria-hidden', 'true'); track.appendChild(c); }); guard++; } } function setup() { measure(); fill(); var start = parseFloat(mq.getAttribute('data-offset')) || 0; // o offset do Figma está em px de 1920; converte para a escala atual var rootPx = parseFloat(window.getComputedStyle(document.documentElement).fontSize) || 10; offset = (start / 10) * rootPx; // normaliza para dentro de uma volta if (loopWidth > 0) offset = offset % loopWidth; track.style.transform = 'translate3d(' + offset + 'px,0,0)'; } function tick(now) { if (!last) last = now; var dt = Math.min((now - last) / 1000, 0.05); last = now; if (!paused && loopWidth > 0) { var rootPx = parseFloat(window.getComputedStyle(document.documentElement).fontSize) || 10; offset += direction * speed * (rootPx / 10) * dt; if (offset <= -loopWidth) offset += loopWidth; if (offset >= 0) offset -= loopWidth; track.style.transform = 'translate3d(' + offset + 'px,0,0)'; } rafId = window.requestAnimationFrame(tick); } // pausa para ler: hover no desktop, toque e segure no celular mq.addEventListener('mouseenter', function () { paused = true; }); mq.addEventListener('mouseleave', function () { paused = false; }); mq.addEventListener('touchstart', function () { paused = true; }, { passive: true }); mq.addEventListener('touchend', function () { paused = false; }, { passive: true }); mq.addEventListener('touchcancel', function () { paused = false; }, { passive: true }); setup(); // só anima quando está visível na tela if ('IntersectionObserver' in window) { var io = new IntersectionObserver(function (entries) { entries.forEach(function (entry) { if (entry.isIntersecting) { if (!rafId) { last = 0; rafId = window.requestAnimationFrame(tick); } } else if (rafId) { window.cancelAnimationFrame(rafId); rafId = null; } }); }, { rootMargin: '200px 0px' }); io.observe(mq); } else { rafId = window.requestAnimationFrame(tick); } var resizeTimer; window.addEventListener('resize', function () { clearTimeout(resizeTimer); resizeTimer = setTimeout(setup, 180); }, { passive: true }); }); } if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) { initMarquees(); } else { // sem animação: apenas posiciona as fileiras no offset do Figma Array.prototype.forEach.call(document.querySelectorAll('[data-clone-from]'), function (mq) { var track = mq.querySelector('[data-marquee-track]'); var source = document.querySelector(mq.getAttribute('data-clone-from') + ' [data-marquee-track]'); if (track && source && !track.children.length) { Array.prototype.forEach.call(source.children, function (c) { track.appendChild(c.cloneNode(true)); }); } }); } /* ========================================================================== 5 · FAQ — acordeão. Começa só com as perguntas; o lead clica para abrir a resposta. Coloque faqComecaAberto: true no config para abrir tudo de cara. ====================================================================== */ (function initFaq() { var list = document.querySelector('[data-faq]'); if (!list) return; var items = list.querySelectorAll('.faq-item'); // padrão: todas fechadas — o lead abre a que interessa. // faqComecaAberto: true no config deixa tudo aberto, como o Figma mostra. var startOpen = CFG.faqComecaAberto === true; Array.prototype.forEach.call(items, function (item) { var btn = item.querySelector('.faq-q'); if (!startOpen) { item.classList.add('is-closed'); btn.setAttribute('aria-expanded', 'false'); } btn.addEventListener('click', function () { var closed = item.classList.toggle('is-closed'); btn.setAttribute('aria-expanded', closed ? 'false' : 'true'); }); }); })(); /* ========================================================================== 6 · PLAYER DA VSL — o poster vira o vídeo real no primeiro clique. ====================================================================== */ (function initPlayer() { var player = document.getElementById('vsl-player'); if (!player) return; function play() { var v = CFG.vsl; if (!v) return; var markup = ''; if (v.tipo === 'iframe' && v.src) { markup = ''; } else if (v.tipo === 'video' && v.src) { markup = ''; } else if (v.tipo === 'html' && v.html) { markup = v.html; } if (!markup) return; player.innerHTML = markup; player.removeAttribute('role'); player.removeAttribute('tabindex'); player.style.cursor = 'default'; } player.addEventListener('click', play); player.addEventListener('keydown', function (e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); play(); } }); })(); /* ========================================================================== 7 · REVELAÇÃO NO SCROLL Hero e VSL entram prontos; da 3ª seção em diante os elementos sobem e aparecem conforme entram na tela. A classe .rv é adicionada aqui, nunca no HTML: sem JS a página continua inteira e visível. ====================================================================== */ (function initReveal() { if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; if (!('IntersectionObserver' in window)) return; // containers cujos filhos animam em cascata em vez do bloco inteiro var EXPAND = [ ['.mec__steps', '.mecstep'], ['.mec__rules', '.rulecard'], ['.stats__row', '.stat'], ['.res__list', 'li'], ['.pratos__pills', '.pill'], ['.faq__list', '.faq-item'] ]; var sections = Array.prototype.slice.call(document.querySelectorAll('.sec')); var targets = []; sections.slice(2).forEach(function (sec) { var canvas = sec.querySelector('.canvas'); if (!canvas) return; Array.prototype.forEach.call(canvas.children, function (child) { var kids = null; for (var i = 0; i < EXPAND.length; i++) { if (child.matches(EXPAND[i][0])) { kids = child.querySelectorAll(EXPAND[i][1]); break; } } if (kids && kids.length) { Array.prototype.push.apply(targets, Array.prototype.slice.call(kids)); } else { targets.push(child); } }); }); // um elemento com display:none nunca intersecta e ficaria preso invisível // se voltasse a aparecer (ex.: o brilho da oferta, escondido no mobile) targets = targets.filter(function (el) { return el.getClientRects().length > 0; }); targets.forEach(function (el) { el.classList.add('rv'); }); var io = new IntersectionObserver(function (entries) { // tudo que entrou na mesma leva sobe em cascata, de cima para baixo var shown = entries.filter(function (e) { return e.isIntersecting; }); shown.sort(function (a, b) { return a.boundingClientRect.top - b.boundingClientRect.top; }); shown.forEach(function (e, i) { e.target.style.transitionDelay = Math.min(i * 70, 350) + 'ms'; e.target.classList.add('is-in'); io.unobserve(e.target); }); }, { rootMargin: '0px 0px -12% 0px', threshold: 0 }); targets.forEach(function (el) { io.observe(el); }); })(); /* ========================================================================== 8 · CTA FIXA NO MOBILE — aparece depois do primeiro scroll, some quando a seção da oferta entra na tela. ====================================================================== */ (function initStickyBar() { var bar = document.querySelector('[data-sticky]'); if (!bar) return; if (CFG.ctaFixaNoMobile === false) { bar.remove(); return; } bar.hidden = false; var oferta = document.getElementById('oferta'); var overOffer = false; if (oferta && 'IntersectionObserver' in window) { new IntersectionObserver(function (entries) { overOffer = entries[0].isIntersecting; update(); }, { threshold: 0.02 }).observe(oferta); } function update() { if (isDesktop()) { bar.classList.remove('is-visible'); return; } var past = window.scrollY > window.innerHeight * 0.9; bar.classList.toggle('is-visible', past && !overOffer); } window.addEventListener('scroll', update, { passive: true }); window.addEventListener('resize', update, { passive: true }); update(); })(); /* ========================================================================== 9 · MODAL DE RECEITAS (COMPONENTE ESTILO APP STORE / MOTION.DEV) Ao clicar na foto/card de qualquer receita, abre o modal expansível com imagem, título, categoria, avaliação e lista completa de ingredientes. ====================================================================== */ (function initRecipeModal() { var RECIPES_DATA = { "1": { title: "AMUSE BOUCHE: MIL FOLHAS DE BATATA DOURADA COM CREME AZEDO E CIBOULETTE", cat: "ABERTURAS", img: "https://decola.company/wp-content/uploads/2026/08/Group-22_cvt.webp", ingredients: [ "Batata", "Manteiga", "Azeite de oliva", "Creme azedo (sour cream)", "Ciboulette", "Sal marinho", "Pimenta-do-reino", "Caviar (opcional)" ] }, "2": { title: "SMOKED SALMON BOARD + BREAD", cat: "ABERTURAS", img: "https://decola.company/wp-content/uploads/2026/08/Group-23_cvt.webp", ingredients: [ "Salmão defumado", "Cream cheese", "Pão artesanal", "Picles de cebola roxa", "Alcaparras", "Limão siciliano", "Dill", "Cebolinha", "Everything Bagel Seasoning", "Flores comestíveis", "Azeite de oliva" ] }, "3": { title: "CRUDO DE PEIXE BRANCO COM CROCANTE DE ARROZ", cat: "ABERTURAS", img: "https://decola.company/wp-content/uploads/2026/08/Group-24_cvt.webp", ingredients: [ "Peixe branco fresco", "Limão siciliano", "Limão-taiti", "Gengibre", "Azeite de oliva extravirgem", "Shoyu", "Rabanete", "Óleo de gergelim", "Pimenta fresca", "Ciboulette", "Coentro", "Arroz crocante", "Gergelim", "Flor de sal" ] }, "4": { title: "COSTELA BRASEADA AO VINHO TINTO", cat: "PRATOS PRINCIPAIS", img: "https://decola.company/wp-content/uploads/2026/08/Group-25_cvt.webp", ingredients: [ "Costela bovina", "Vinho tinto", "Caldo de carne", "Cenoura", "Cebola", "Salsão", "Alho", "Extrato de tomate", "Tomilho fresco", "Alecrim", "Louro", "Manteiga", "Azeite de oliva", "Salsa", "Sal marinho", "Pimenta-do-reino" ] }, "5": { title: "FRANGO PICCATA", cat: "PRATOS PRINCIPAIS", img: "https://decola.company/wp-content/uploads/2026/08/Group-26_cvt.webp", ingredients: [ "Peito de frango", "Farinha de trigo", "Manteiga", "Azeite de oliva", "Vinho branco", "Caldo de frango", "Limão siciliano", "Alcaparras", "Alho", "Manjericão fresco", "Salsa fresca", "Sal marinho", "Pimenta-do-reino" ] }, "6": { title: "SALMÃO GLACEADO AO MOLHO DE MISSÔ E MEL", cat: "PRATOS PRINCIPAIS", img: "https://decola.company/wp-content/uploads/2026/08/Group-27_cvt.webp", ingredients: [ "Salmão", "Missô branco", "Mel", "Shoyu", "Óleo de gergelim", "Manteiga", "Gengibre fresco", "Alho", "Limão", "Gergelim", "Cebolinha" ] }, "7": { title: "SALADA COMPOSTA DE ACOMPANHAMENTO", cat: "GUARNIÇÕES", img: "https://decola.company/wp-content/uploads/2026/08/Group-28_cvt.webp", ingredients: [ "Mix de folhas verdes", "Rúcula", "Radicchio", "Pepino", "Tomate-cereja", "Avocado", "Cebola roxa", "Ervas frescas", "Sementes tostadas", "Limão", "Azeite de oliva extravirgem", "Mostarda Dijon", "Mel", "Sal marinho", "Pimenta-do-reino" ] }, "8": { title: "ESPAGUETE SCAMPI AO VÔNGOLE COM CAMARÕES GRELHADOS, LIMÃO SICILIANO E PARMESÃO", cat: "PRATOS PRINCIPAIS", img: "https://decola.company/wp-content/uploads/2026/08/Group-29_cvt.webp", ingredients: [ "Espaguete", "Vôngole", "Camarões", "Vinho branco", "Manteiga", "Azeite de oliva", "Alho", "Limão siciliano", "Parmesão", "Salsa fresca", "Pimenta calabresa", "Sal marinho", "Pimenta-do-reino" ] }, "9": { title: "CENOURAS ASSADAS COM MEL DE ERVAS E COALHADA SECA", cat: "GUARNIÇÕES", img: "https://decola.company/wp-content/uploads/2026/08/Group-30_cvt.webp", ingredients: [ "Cenouras baby", "Coalhada seca", "Mel", "Manteiga", "Azeite de oliva", "Alho", "Tomilho fresco", "Alecrim", "Salsa fresca", "Limão siciliano", "Pistache tostado", "Sal marinho", "Pimenta-do-reino" ] }, "10": { title: "PURÊ DE BATATA PROFISSIONAL", cat: "GUARNIÇÕES", img: "https://decola.company/wp-content/uploads/2026/08/Group-31_cvt.webp", ingredients: [ "Batatas", "Manteiga", "Creme de leite fresco", "Iogurte grego", "Maionese", "Alho", "Sal marinho", "Pimenta-do-reino" ] }, "11": { title: "COUSCOUS MARROQUINHO COM AMÊNDOAS E ERVAS FRESCAS", cat: "GUARNIÇÕES", img: "https://decola.company/wp-content/uploads/2026/08/Group-32_cvt.webp", ingredients: [ "Couscous marroquino", "Amêndoas laminadas tostadas", "Caldo de legumes", "Manteiga", "Azeite de oliva", "Alho", "Cominho", "Páprica", "Coentro em pó", "Limão siciliano", "Salsa fresca", "Hortelã", "Ciboulette", "Sal marinho", "Pimenta-do-reino" ] }, "12": { title: "1 MASSA, 3 RECEITAS", cat: "COMPOSIÇÃO DE MESA", img: "https://decola.company/wp-content/uploads/2026/08/Group-33_cvt.webp", ingredients: [ "Farinha de trigo", "Manteiga", "Ovo", "Água gelada", "Sal", "Açúcar" ] }, "13": { title: "QUICHE DE ALHO-PORÓ", cat: "COMPOSIÇÃO DE MESA", img: "https://decola.company/wp-content/uploads/2026/08/Group-34_cvt.webp", ingredients: [ "Massa base", "Alho-poró", "Ovos", "Creme de leite fresco", "Queijo Gruyère", "Manteiga", "Noz-moscada", "Sal", "Pimenta-do-reino" ] }, "14": { title: "GALETTE DE MAÇÃ", cat: "COMPOSIÇÃO DE MESA", img: "https://decola.company/wp-content/uploads/2026/08/Group-35_cvt.webp", ingredients: [ "Massa base", "Maçãs", "Cream cheese", "Açúcar", "Baunilha", "Limão siciliano", "Canela", "Manteiga", "Açúcar mascavo", "Ovo para pincelar" ] }, "15": { title: "EGG SALAD SANDWICH", cat: "COMPOSIÇÃO DE MESA", img: "https://decola.company/wp-content/uploads/2026/08/Group-36_cvt.webp", ingredients: [ "Ovos", "Maionese", "Mostarda Dijon", "Ciboulette", "Salsão", "Dill fresco", "Limão", "Páprica defumada", "Pão de forma macio", "Manteiga", "Sal marinho", "Pimenta-do-reino" ] }, "16": { title: "BANANA FLAMBADA COM SORVETE E FAROFA DE PAÇOCA", cat: "SOBREMESAS", img: "https://decola.company/wp-content/uploads/2026/08/Group-37_cvt.webp", ingredients: [ "Banana", "Manteiga", "Cachaça", "Doce de leite", "Creme de leite fresco", "Canela", "Sorvete de baunilha", "Paçoca", "Flor de sal", "Limão" ] }, "17": { title: "BOLO DE FESTA COM COMPOTA DE FRUTAS", cat: "SOBREMESAS", img: "https://decola.company/wp-content/uploads/2026/08/Group-38_cvt.webp", ingredients: [ "Farinha de trigo", "Ovos", "Açúcar", "Manteiga", "Leite", "Baunilha", "Fermento químico", "Frutas vermelhas", "Limão siciliano", "Creme de leite fresco", "Mascarpone", "Açúcar de confeiteiro" ] } }; var modal = document.getElementById('recipe-modal'); if (!modal) return; var modalImg = document.getElementById('recipe-modal-img'); var modalCat = document.getElementById('recipe-modal-cat'); var modalTitle = document.getElementById('recipe-modal-title'); var modalIngredients = document.getElementById('recipe-modal-ingredients'); function openRecipeModal(id) { var data = RECIPES_DATA[id]; if (!data) return; if (modalImg) { modalImg.src = data.img; modalImg.alt = data.title; } if (modalCat) modalCat.textContent = data.cat; if (modalTitle) modalTitle.textContent = data.title; if (modalIngredients) { modalIngredients.innerHTML = data.ingredients.map(function (item) { return '

' + item + '

'; }).join(''); } modal.classList.add('is-open'); modal.setAttribute('aria-hidden', 'false'); document.body.style.overflow = 'hidden'; } function closeRecipeModal() { modal.classList.remove('is-open'); modal.setAttribute('aria-hidden', 'true'); document.body.style.overflow = ''; } document.addEventListener('click', function (e) { var card = e.target.closest('.dishcard'); if (card) { var id = card.getAttribute('data-recipe-id'); if (id) { e.preventDefault(); openRecipeModal(id); return; } } if (e.target.closest('[data-close-recipe-modal]')) { closeRecipeModal(); } }); document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && modal.classList.contains('is-open')) { closeRecipeModal(); return; } var card = e.target.closest && e.target.closest('.dishcard'); if (card && (e.key === 'Enter' || e.key === ' ')) { var id = card.getAttribute('data-recipe-id'); if (id) { e.preventDefault(); openRecipeModal(id); } } }); })(); })();