{"id":20,"date":"2026-09-08T11:00:42","date_gmt":"2026-09-08T14:00:42","guid":{"rendered":"https:\/\/g90.ecdd.academy\/?page_id=20"},"modified":"2026-09-18T17:23:36","modified_gmt":"2026-09-18T20:23:36","slug":"portfolio","status":"publish","type":"page","link":"https:\/\/g90.ecdd.academy\/?page_id=20","title":{"rendered":"Portf\u00f3lio"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"20\" class=\"elementor elementor-20\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4c51332f e-flex e-con-boxed e-con e-parent\" data-id=\"4c51332f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0e4bc59 elementor-widget elementor-widget-html\" data-id=\"0e4bc59\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"pt-BR\" class=\"scroll-smooth\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Lumi Studio \u2014 Portf\u00f3lio<\/title>\n    \n    <!-- Google Fonts -->\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n    \n    <!-- Tailwind CSS -->\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    \n    <script>\n        tailwind.config = {\n            theme: {\n                extend: {\n                    colors: {\n                        studio: {\n                            bg: '#F4F2EC',\n                            card: '#EAE6DF',\n                            text: '#1C1B1A',\n                            muted: '#66625D',\n                            dark: '#1E2022',\n                            darkText: '#E6E4DF',\n                            accent: '#33312E'\n                        }\n                    },\n                    fontFamily: {\n                        serif: ['\"Cormorant Garamond\"', 'serif'],\n                        sans: ['\"Plus Jakarta Sans\"', 'sans-serif']\n                    }\n                }\n            }\n        }\n    <\/script>\n\n    <style>\n        body {\n            background-color: #F4F2EC;\n            color: #1C1B1A;\n            font-family: 'Plus Jakarta Sans', sans-serif;\n            overflow-x: hidden;\n        }\n\n        .img-zoom {\n            transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);\n        }\n\n        .portfolio-card:hover .img-zoom {\n            transform: scale(1.05);\n        }\n\n        .filter-btn {\n            transition: all 0.3s ease;\n        }\n\n        .filter-btn.active {\n            background-color: #1E2022;\n            color: #FFFFFF;\n            border-color: #1E2022;\n        }\n\n        .modal-blur {\n            backdrop-filter: blur(12px);\n        }\n\n        .gallery-item {\n            transition: opacity 0.4s ease, transform 0.4s ease;\n        }\n\n        .gallery-item.hidden-item {\n            display: none;\n            opacity: 0;\n            transform: scale(0.95);\n        }\n    <\/style>\n<\/head>\n<body class=\"antialiased selection:bg-stone-800 selection:text-stone-100 flex flex-col min-h-screen\">\n\n    <nav id=\"navbar\" class=\"fixed top-0 left-0 w-full z-40 transition-all duration-300 py-6 px-6 md:px-12 flex justify-between items-center text-studio-text bg-studio-bg\/90 backdrop-blur-md border-b border-stone-300\/40\">\n        <a href=\"index.html\" class=\"text-lg md:text-xl font-medium tracking-widest uppercase hover:opacity-80 transition-opacity\">\n            LUMI STUDIO\n        <\/a>\n        \n        <div class=\"hidden md:flex space-x-10 text-sm tracking-wider font-light\">\n            <a href=\"index.html\" class=\"hover:underline underline-offset-8 transition-all\">In\u00edcio<\/a>\n            <a href=\"portfolio.html\" class=\"font-normal underline underline-offset-8 decoration-stone-800\">Portf\u00f3lio<\/a>\n            <a href=\"index.html#sobre\" class=\"hover:underline underline-offset-8 transition-all\">Sobre<\/a>\n            <a href=\"#contato\" class=\"hover:underline underline-offset-8 transition-all\">Contato<\/a>\n        <\/div>\n\n        <!-- Mobile Menu Toggle Button -->\n        <button id=\"menuBtn\" class=\"md:hidden focus:outline-none p-2 text-studio-text\" aria-label=\"Abrir Menu\">\n            <svg class=\"w-6 h-6 stroke-current\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M4 6h16M4 12h16M4 18h16\"\/>\n            <\/svg>\n        <\/button>\n    <\/nav>\n\n    <!-- Mobile Drawer Navigation -->\n    <div id=\"mobileMenu\" class=\"fixed inset-0 bg-studio-dark text-studio-darkText z-50 transform translate-x-full transition-transform duration-300 ease-in-out flex flex-col justify-center items-center space-y-8 text-2xl font-serif\">\n        <button id=\"closeMenuBtn\" class=\"absolute top-6 right-6 p-2 text-white text-3xl font-sans focus:outline-none\">&times;<\/button>\n        <a href=\"index.html\" class=\"mobile-link hover:text-stone-400 transition-colors\">In\u00edcio<\/a>\n        <a href=\"portfolio.html\" class=\"mobile-link text-white underline underline-offset-8\">Portf\u00f3lio<\/a>\n        <a href=\"index.html#sobre\" class=\"mobile-link hover:text-stone-400 transition-colors\">Sobre<\/a>\n        <a href=\"#contato\" class=\"mobile-link hover:text-stone-400 transition-colors\">Contato<\/a>\n    <\/div>\n\n    <header class=\"pt-36 pb-16 px-6 md:px-16 lg:px-24 text-center max-w-4xl mx-auto\">\n        <span class=\"text-xs tracking-[0.3em] uppercase text-studio-muted font-semibold block mb-4\">\n            LUMI STUDIO\n        <\/span>\n        <h1 class=\"font-serif text-4xl sm:text-5xl md:text-6xl font-normal text-studio-text mb-6 leading-tight\">\n            Portf\u00f3lio\n        <\/h1>\n        <p class=\"text-studio-muted text-base sm:text-lg font-light leading-relaxed max-w-2xl mx-auto\">\n            Uma sele\u00e7\u00e3o de projetos e produ\u00e7\u00f5es visuais desenvolvidos pelo Lumi Studio. Cada trabalho busca combinar conceito, composi\u00e7\u00e3o e fotografia para criar imagens que representem diferentes ideias e identidades.\n        <\/p>\n    <\/header>\n\n    <section id=\"galeria\" class=\"py-12 px-6 md:px-12 lg:px-20 max-w-7xl mx-auto w-full flex-grow\">\n        \n        <!-- Gallery Header -->\n        <div class=\"text-center max-w-3xl mx-auto mb-12 space-y-3\">\n            <span class=\"text-xs tracking-[0.25em] uppercase text-studio-muted font-semibold block\">\n                SELE\u00c7\u00c3O VISUAL\n            <\/span>\n            <h2 class=\"font-serif text-3xl sm:text-4xl md:text-5xl font-normal text-studio-text\">\n                Galeria\n            <\/h2>\n            <p class=\"text-studio-muted text-sm sm:text-base font-light\">\n                Uma sele\u00e7\u00e3o de projetos de fotografia, dire\u00e7\u00e3o de arte e produ\u00e7\u00e3o visual.\n            <\/p>\n        <\/div>\n\n        <!-- Category Filters -->\n        <div class=\"flex flex-wrap justify-center items-center gap-2 sm:gap-3 mb-12\">\n            <button class=\"filter-btn active border border-stone-400 text-studio-text px-5 py-2 rounded-full text-xs font-medium tracking-wider uppercase\" data-filter=\"all\">\n                Todos\n            <\/button>\n            <button class=\"filter-btn border border-stone-300 text-studio-muted hover:border-stone-800 hover:text-studio-text px-5 py-2 rounded-full text-xs font-medium tracking-wider uppercase\" data-filter=\"editorial\">\n                Editorial\n            <\/button>\n            <button class=\"filter-btn border border-stone-300 text-studio-muted hover:border-stone-800 hover:text-studio-text px-5 py-2 rounded-full text-xs font-medium tracking-wider uppercase\" data-filter=\"produto\">\n                Produto\n            <\/button>\n            <button class=\"filter-btn border border-stone-300 text-studio-muted hover:border-stone-800 hover:text-studio-text px-5 py-2 rounded-full text-xs font-medium tracking-wider uppercase\" data-filter=\"branding\">\n                Branding\n            <\/button>\n            <button class=\"filter-btn border border-stone-300 text-studio-muted hover:border-stone-800 hover:text-studio-text px-5 py-2 rounded-full text-xs font-medium tracking-wider uppercase\" data-filter=\"campanhas\">\n                Campanhas\n            <\/button>\n        <\/div>\n\n        <!-- Interactive Photo Grid -->\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8\" id=\"galleryGrid\">\n            \n            <!-- Item 1 -->\n            <div class=\"gallery-item portfolio-card group cursor-pointer\" data-category=\"editorial\" onclick=\"openLightbox('https:\/\/images.unsplash.com\/photo-1509631179647-0177331693ae?q=80&w=1200&auto=format&fit=crop', 'Silhuetas & Formas', 'Editorial')\">\n                <div class=\"img-container overflow-hidden rounded-xl shadow-md aspect-[4\/5] bg-stone-300 mb-4 relative\">\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1509631179647-0177331693ae?q=80&w=800&auto=format&fit=crop\" alt=\"Editorial Visual\" class=\"img-zoom w-full h-full object-cover\" loading=\"lazy\">\n                    <div class=\"absolute inset-0 bg-black\/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6\">\n                        <span class=\"text-white text-xs tracking-widest uppercase font-medium\">Ampliar imagem<\/span>\n                    <\/div>\n                <\/div>\n                <span class=\"text-[11px] tracking-widest uppercase text-studio-muted font-semibold block mb-1\">Editorial<\/span>\n                <h3 class=\"font-serif text-2xl font-normal text-studio-text\">Silhuetas & Formas<\/h3>\n            <\/div>\n\n            <!-- Item 2 -->\n            <div class=\"gallery-item portfolio-card group cursor-pointer\" data-category=\"produto\" onclick=\"openLightbox('https:\/\/images.unsplash.com\/photo-1522337360788-8b13dee7a37e?q=80&w=1200&auto=format&fit=crop', 'Bot\u00e2nica & Cosm\u00e9tica', 'Produto')\">\n                <div class=\"img-container overflow-hidden rounded-xl shadow-md aspect-[4\/5] bg-stone-300 mb-4 relative\">\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1522337360788-8b13dee7a37e?q=80&w=800&auto=format&fit=crop\" alt=\"Fotografia de Produto Minimalista\" class=\"img-zoom w-full h-full object-cover\" loading=\"lazy\">\n                    <div class=\"absolute inset-0 bg-black\/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6\">\n                        <span class=\"text-white text-xs tracking-widest uppercase font-medium\">Ampliar imagem<\/span>\n                    <\/div>\n                <\/div>\n                <span class=\"text-[11px] tracking-widest uppercase text-studio-muted font-semibold block mb-1\">Produto<\/span>\n                <h3 class=\"font-serif text-2xl font-normal text-studio-text\">Bot\u00e2nica & Cosm\u00e9tica<\/h3>\n            <\/div>\n\n            <!-- Item 3 -->\n            <div class=\"gallery-item portfolio-card group cursor-pointer\" data-category=\"branding\" onclick=\"openLightbox('https:\/\/images.unsplash.com\/photo-1512436991641-6745cdb1723f?q=80&w=1200&auto=format&fit=crop', 'Identidade Org\u00e2nica', 'Branding')\">\n                <div class=\"img-container overflow-hidden rounded-xl shadow-md aspect-[4\/5] bg-stone-300 mb-4 relative\">\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1512436991641-6745cdb1723f?q=80&w=800&auto=format&fit=crop\" alt=\"Branding Studio\" class=\"img-zoom w-full h-full object-cover\" loading=\"lazy\">\n                    <div class=\"absolute inset-0 bg-black\/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6\">\n                        <span class=\"text-white text-xs tracking-widest uppercase font-medium\">Ampliar imagem<\/span>\n                    <\/div>\n                <\/div>\n                <span class=\"text-[11px] tracking-widest uppercase text-studio-muted font-semibold block mb-1\">Branding<\/span>\n                <h3 class=\"font-serif text-2xl font-normal text-studio-text\">Identidade Org\u00e2nica<\/h3>\n            <\/div>\n\n            <!-- Item 4 -->\n            <div class=\"gallery-item portfolio-card group cursor-pointer\" data-category=\"campanhas\" onclick=\"openLightbox('https:\/\/images.unsplash.com\/photo-1490481651871-ab68de25d43d?q=80&w=1200&auto=format&fit=crop', 'Luz Natural & Texturas', 'Campanhas')\">\n                <div class=\"img-container overflow-hidden rounded-xl shadow-md aspect-[4\/5] bg-stone-300 mb-4 relative\">\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1490481651871-ab68de25d43d?q=80&w=800&auto=format&fit=crop\" alt=\"Campanha Ver\u00e3o\" class=\"img-zoom w-full h-full object-cover\" loading=\"lazy\">\n                    <div class=\"absolute inset-0 bg-black\/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6\">\n                        <span class=\"text-white text-xs tracking-widest uppercase font-medium\">Ampliar imagem<\/span>\n                    <\/div>\n                <\/div>\n                <span class=\"text-[11px] tracking-widest uppercase text-studio-muted font-semibold block mb-1\">Campanhas<\/span>\n                <h3 class=\"font-serif text-2xl font-normal text-studio-text\">Luz Natural & Texturas<\/h3>\n            <\/div>\n\n            <!-- Item 5 -->\n            <div class=\"gallery-item portfolio-card group cursor-pointer\" data-category=\"produto\" onclick=\"openLightbox('https:\/\/images.unsplash.com\/photo-1505740420928-5e560c06d30e?q=80&w=1200&auto=format&fit=crop', 'Design de Objetos', 'Produto')\">\n                <div class=\"img-container overflow-hidden rounded-xl shadow-md aspect-[4\/5] bg-stone-300 mb-4 relative\">\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1505740420928-5e560c06d30e?q=80&w=800&auto=format&fit=crop\" alt=\"Fotografia de Produto Minimalista\" class=\"img-zoom w-full h-full object-cover\" loading=\"lazy\">\n                    <div class=\"absolute inset-0 bg-black\/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6\">\n                        <span class=\"text-white text-xs tracking-widest uppercase font-medium\">Ampliar imagem<\/span>\n                    <\/div>\n                <\/div>\n                <span class=\"text-[11px] tracking-widest uppercase text-studio-muted font-semibold block mb-1\">Produto<\/span>\n                <h3 class=\"font-serif text-2xl font-normal text-studio-text\">Design de Objetos<\/h3>\n            <\/div>\n\n            <!-- Item 6 -->\n            <div class=\"gallery-item portfolio-card group cursor-pointer\" data-category=\"editorial\" onclick=\"openLightbox('https:\/\/images.unsplash.com\/photo-1469334031218-e382a71b716b?q=80&w=1200&auto=format&fit=crop', 'Movimento & Composi\u00e7\u00e3o', 'Editorial')\">\n                <div class=\"img-container overflow-hidden rounded-xl shadow-md aspect-[4\/5] bg-stone-300 mb-4 relative\">\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1469334031218-e382a71b716b?q=80&w=800&auto=format&fit=crop\" alt=\"Editorial Moda\" class=\"img-zoom w-full h-full object-cover\" loading=\"lazy\">\n                    <div class=\"absolute inset-0 bg-black\/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6\">\n                        <span class=\"text-white text-xs tracking-widest uppercase font-medium\">Ampliar imagem<\/span>\n                    <\/div>\n                <\/div>\n                <span class=\"text-[11px] tracking-widest uppercase text-studio-muted font-semibold block mb-1\">Editorial<\/span>\n                <h3 class=\"font-serif text-2xl font-normal text-studio-text\">Movimento & Composi\u00e7\u00e3o<\/h3>\n            <\/div>\n\n        <\/div>\n    <\/section>\n\n    <section id=\"contato\" class=\"bg-studio-dark text-studio-darkText py-24 px-6 md:px-16 lg:px-24 mt-20\">\n        <div class=\"max-w-4xl mx-auto text-center space-y-6\">\n            <h2 class=\"font-serif text-3xl sm:text-4xl md:text-5xl font-normal leading-tight\">\n                Tem um projeto em mente?\n            <\/h2>\n            <p class=\"text-stone-400 text-base sm:text-lg font-light leading-relaxed max-w-2xl mx-auto\">\n                Vamos conversar sobre como transformar sua ideia em uma experi\u00eancia visual.\n            <\/p>\n            <div class=\"pt-4\">\n                <button \n                    onclick=\"openContactModal()\" \n                    class=\"inline-block bg-white text-studio-dark px-9 py-4 rounded-full text-xs md:text-sm font-medium tracking-widest uppercase hover:bg-stone-200 transition-all duration-300 shadow-lg focus:outline-none\"\n                >\n                    Fale conosco\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <div id=\"contactModal\" class=\"fixed inset-0 bg-black\/60 modal-blur z-50 opacity-0 pointer-events-none transition-opacity duration-300 flex items-center justify-center p-4\">\n        <div class=\"bg-studio-bg text-studio-text w-full max-w-lg rounded-2xl p-8 md:p-10 relative shadow-2xl transform scale-95 transition-transform duration-300\" id=\"modalContainer\">\n            <button onclick=\"closeContactModal()\" class=\"absolute top-6 right-6 text-stone-500 hover:text-stone-900 text-2xl focus:outline-none\">&times;<\/button>\n            \n            <h3 class=\"font-serif text-3xl mb-2\">Fale conosco<\/h3>\n            <p class=\"text-studio-muted text-sm mb-6 font-light\">Conte sua ideia e vamos transformar o conceito em imagens.<\/p>\n\n            <form onsubmit=\"handleFormSubmit(event)\" class=\"space-y-4\">\n                <div>\n                    <label class=\"block text-xs uppercase tracking-wider text-studio-muted mb-1 font-medium\">Nome<\/label>\n                    <input type=\"text\" required placeholder=\"Seu nome completo\" class=\"w-full px-4 py-3 rounded-lg bg-stone-200\/60 border border-stone-300 focus:outline-none focus:border-stone-800 text-sm\">\n                <\/div>\n                <div>\n                    <label class=\"block text-xs uppercase tracking-wider text-studio-muted mb-1 font-medium\">E-mail<\/label>\n                    <input type=\"email\" required placeholder=\"seu@email.com\" class=\"w-full px-4 py-3 rounded-lg bg-stone-200\/60 border border-stone-300 focus:outline-none focus:border-stone-800 text-sm\">\n                <\/div>\n                <div>\n                    <label class=\"block text-xs uppercase tracking-wider text-studio-muted mb-1 font-medium\">Mensagem \/ Projeto<\/label>\n                    <textarea rows=\"4\" required placeholder=\"Conte um pouco sobre sua proposta...\" class=\"w-full px-4 py-3 rounded-lg bg-stone-200\/60 border border-stone-300 focus:outline-none focus:border-stone-800 text-sm\"><\/textarea>\n                <\/div>\n                <button type=\"submit\" class=\"w-full bg-studio-dark text-white py-3.5 rounded-xl text-xs uppercase tracking-widest hover:bg-black transition-colors font-medium\">\n                    Enviar Mensagem\n                <\/button>\n            <\/form>\n\n            <div id=\"successMsg\" class=\"hidden text-center py-8 space-y-3\">\n                <div class=\"w-12 h-12 bg-emerald-100 text-emerald-800 rounded-full flex items-center justify-center mx-auto text-xl\">\u2713<\/div>\n                <h4 class=\"font-serif text-2xl\">Mensagem Enviada!<\/h4>\n                <p class=\"text-studio-muted text-sm font-light\">Obrigado pelo contato. Responderemos em breve!<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div id=\"lightbox\" class=\"fixed inset-0 bg-black\/90 modal-blur z-50 opacity-0 pointer-events-none transition-opacity duration-300 flex items-center justify-center p-4\" onclick=\"closeLightbox()\">\n        <button class=\"absolute top-6 right-6 text-white text-3xl focus:outline-none\">&times;<\/button>\n        <div class=\"max-w-4xl max-h-[85vh] flex flex-col items-center\" onclick=\"event.stopPropagation()\">\n            <img decoding=\"async\" id=\"lightboxImg\" src=\"\" alt=\"Imagem Ampliada\" class=\"max-h-[75vh] w-auto rounded-lg object-contain shadow-2xl mb-4\">\n            <span id=\"lightboxCategory\" class=\"text-stone-400 text-xs tracking-widest uppercase font-semibold\"><\/span>\n            <h4 id=\"lightboxTitle\" class=\"text-white font-serif text-2xl font-normal mt-1\"><\/h4>\n        <\/div>\n    <\/div>\n\n    <footer class=\"bg-[#18191A] text-stone-400 text-xs sm:text-sm py-8 px-6 text-center border-t border-stone-800\/80 tracking-wide font-light\">\n        <p>Lumi Studio \u2014 Fotografia e Dire\u00e7\u00e3o de Arte<\/p>\n    <\/footer>\n\n    <script>\n        \/\/ Gallery Filter Logic\n        const filterBtns = document.querySelectorAll('.filter-btn');\n        const galleryItems = document.querySelectorAll('.gallery-item');\n\n        filterBtns.forEach(btn => {\n            btn.addEventListener('click', () => {\n                filterBtns.forEach(b => b.classList.remove('active'));\n                btn.classList.add('active');\n\n                const filter = btn.getAttribute('data-filter');\n\n                galleryItems.forEach(item => {\n                    if (filter === 'all' || item.getAttribute('data-category') === filter) {\n                        item.classList.remove('hidden-item');\n                    } else {\n                        item.classList.add('hidden-item');\n                    }\n                });\n            });\n        });\n\n        \/\/ Lightbox Logic\n        const lightbox = document.getElementById('lightbox');\n        const lightboxImg = document.getElementById('lightboxImg');\n        const lightboxTitle = document.getElementById('lightboxTitle');\n        const lightboxCategory = document.getElementById('lightboxCategory');\n\n        function openLightbox(src, title, category) {\n            lightboxImg.src = src;\n            lightboxTitle.textContent = title;\n            lightboxCategory.textContent = category;\n            lightbox.classList.remove('opacity-0', 'pointer-events-none');\n        }\n\n        function closeLightbox() {\n            lightbox.classList.add('opacity-0', 'pointer-events-none');\n        }\n\n        \/\/ Contact Modal Logic\n        const contactModal = document.getElementById('contactModal');\n        const modalContainer = document.getElementById('modalContainer');\n\n        function openContactModal() {\n            contactModal.classList.remove('opacity-0', 'pointer-events-none');\n            modalContainer.classList.remove('scale-95');\n            modalContainer.classList.add('scale-100');\n        }\n\n        function closeContactModal() {\n            contactModal.classList.add('opacity-0', 'pointer-events-none');\n            modalContainer.classList.remove('scale-100');\n            modalContainer.classList.add('scale-95');\n            setTimeout(() => {\n                document.querySelector('#contactModal form').classList.remove('hidden');\n                document.getElementById('successMsg').classList.add('hidden');\n            }, 300);\n        }\n\n        function handleFormSubmit(e) {\n            e.preventDefault();\n            document.querySelector('#contactModal form').classList.add('hidden');\n            document.getElementById('successMsg').classList.remove('hidden');\n        }\n\n        contactModal.addEventListener('click', (e) => {\n            if (e.target === contactModal) {\n                closeContactModal();\n            }\n        });\n\n        \/\/ Mobile Menu Drawer Logic\n        const menuBtn = document.getElementById('menuBtn');\n        const closeMenuBtn = document.getElementById('closeMenuBtn');\n        const mobileMenu = document.getElementById('mobileMenu');\n        const mobileLinks = document.querySelectorAll('.mobile-link');\n\n        function toggleMenu() {\n            mobileMenu.classList.toggle('translate-x-full');\n        }\n\n        menuBtn.addEventListener('click', toggleMenu);\n        closeMenuBtn.addEventListener('click', toggleMenu);\n        mobileLinks.forEach(link => link.addEventListener('click', toggleMenu));\n    <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Lumi Studio \u2014 Portf\u00f3lio LUMI STUDIO In\u00edcio Portf\u00f3lio Sobre Contato &times; In\u00edcio Portf\u00f3lio Sobre Contato LUMI STUDIO Portf\u00f3lio Uma sele\u00e7\u00e3o de projetos e produ\u00e7\u00f5es visuais desenvolvidos pelo Lumi Studio. Cada trabalho busca combinar conceito, composi\u00e7\u00e3o e fotografia para criar imagens que representem diferentes ideias e identidades. SELE\u00c7\u00c3O VISUAL Galeria Uma sele\u00e7\u00e3o de projetos de fotografia, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-20","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/g90.ecdd.academy\/index.php?rest_route=\/wp\/v2\/pages\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/g90.ecdd.academy\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/g90.ecdd.academy\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/g90.ecdd.academy\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/g90.ecdd.academy\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=20"}],"version-history":[{"count":6,"href":"https:\/\/g90.ecdd.academy\/index.php?rest_route=\/wp\/v2\/pages\/20\/revisions"}],"predecessor-version":[{"id":89,"href":"https:\/\/g90.ecdd.academy\/index.php?rest_route=\/wp\/v2\/pages\/20\/revisions\/89"}],"wp:attachment":[{"href":"https:\/\/g90.ecdd.academy\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}