/* ========================================================================== Interacoes da Emito — substitui o webflow.js + jQuery O que o runtime do Webflow fazia nesta pagina e agora vive aqui: 1. revelar blocos conforme entram na tela (IX2) 2. sanfona do FAQ 3. menu mobile 4. deslize do texto dos botoes no hover 5. rolagem suave dos links de ancora O estado escondido depende de , marcado pelo script do . Sem JavaScript a classe nao entra e a pagina aparece inteira. ========================================================================== */ html { scroll-behavior: smooth; } /* ========================================================================== 1. Revelar ao rolar ========================================================================== */ html.js [data-reveal] { opacity: 0; transform: translateY(1.5rem); } html.js [data-reveal].is-revealed { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms), transform .7s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms); } /* ========================================================================== 2. Sanfona do FAQ A altura anima por grid-template-rows (0fr -> 1fr), que e o jeito de animar "ate o conteudo" sem precisar medir nada em JavaScript. ========================================================================== */ .faq_answer { grid-template-rows: 0fr; transition: grid-template-rows .35s ease; display: grid; } .faq_item.is-open .faq_answer { grid-template-rows: 1fr; } /* Quem colapsa e o .faq_answer-inner, que nao tem padding proprio: com padding, a altura fechada nunca chegaria a zero. O respiro continua no .faq_answer-wrap, que fica dentro dele. */ .faq_answer > .faq_answer-inner { min-height: 0; overflow: hidden; } .faq_question .image { transition: transform .3s ease; } .faq_item.is-open .faq_question .image { transform: rotate(45deg); } /* ========================================================================== 3. Menu mobile O emito.css esconde .w-nav-menu ate 991px e mostra o .w-nav-button. Aqui so entra o estado aberto, com especificidade suficiente para passar por cima do display:none que vem de la. ========================================================================== */ @media screen and (max-width: 991px) { /* A barra tem overflow:hidden por causa do blur, e isso cortava o painel. O Webflow resolvia movendo o menu para uma div de overlay; aqui basta soltar o corte enquanto o menu esta aberto. */ .navbar.is-nav-open .nav-components { overflow: visible; } .navbar.is-nav-open .nav-link-wrapper.w-nav-menu { z-index: 1; display: flex; position: absolute; top: 100%; left: 0; right: 0; } /* Hamburguer vira X. */ .menu-button .top-line, .menu-button .center-line, .menu-button .bottom-line { transition: transform .3s ease, opacity .2s ease, width .3s ease; } .menu-button.w--open .top-line { transform: translateY(.5625rem) rotate(45deg); } .menu-button.w--open .center-line { opacity: 0; } .menu-button.w--open .bottom-line { transform: translateY(-.5625rem) rotate(-45deg); } } /* ========================================================================== 4. Botoes: o texto sobe e a segunda copia entra no lugar O .button-text-flex tem altura fixa e overflow hidden, com o mesmo texto duplicado dentro — subir 100% troca uma copia pela outra. ========================================================================== */ .primary-button .button-text-flex > .primary-button-text { transition: transform .3s cubic-bezier(.22, .61, .36, 1); } .primary-button:hover .button-text-flex > .primary-button-text, .primary-button:focus-visible .button-text-flex > .primary-button-text { transform: translateY(-100%); } /* ========================================================================== 5. Quem pediu menos movimento, recebe menos movimento ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js [data-reveal] { opacity: 1; transform: none; } .faq_answer, .faq_question .image, .menu-button .top-line, .menu-button .center-line, .menu-button .bottom-line, .primary-button .button-text-flex > .primary-button-text { transition: none; } }