/** * Menu mobile (nova versao). Carregado depois de mega-menu.css. * Tudo vale so com .zf-mm (posto pelo menu-mobile.js) e abaixo de 1024px. * Movimento: so transform/opacity. */ /* Pecas extras nunca aparecem no desktop. */ .zf-mm-n, .zf-mm-resumo, .zf-mm-cabeca, .zf-mm-extras { display: none; } @keyframes zf-mm-sobe { from { opacity: 0; transform: translate3d(0, 14px, 0); } } @keyframes zf-mm-entra-dir { from { opacity: 0; transform: translate3d(28px, 0, 0); } } @keyframes zf-mm-aparece { from { opacity: 0; } } @media (max-width: 1023px) { /* ---------- Tela cheia ---------- */ /* * Antes do JS do menu rodar, o mega-menu.css mostra a navegacao inline * (fallback sem JavaScript). Com JS disponivel (classe zf-mm-js posta no * ), esse estado fica oculto: sem o menu "piscar" no carregamento. */ html.zf-mm-js .zf-nav:not(.zf-nav--pronto) .zf-nav__wrap { display: none; } /* * Painel opaco que desce do topo (so transform). Sem fade: um painel * semitransparente deixava a pagina aparecer por baixo durante a * abertura e parecia "dois menus". */ .zf-nav.zf-mm .zf-nav__wrap { --zf-mm-ease: cubic-bezier(0.22, 1, 0.36, 1); width: 100%; border-left: 0; background: radial-gradient(420px 320px at 100% 0%, rgba(122, 30, 246, 0.22), rgba(10, 10, 11, 0) 70%), var(--wp--preset--color--preto, #0a0a0b); opacity: 1; transform: translate3d(0, -100%, 0); visibility: hidden; transition: none; } .zf-nav.zf-mm.esta-aberta .zf-nav__wrap { transform: none; visibility: visible; } /* Transicoes so depois do primeiro quadro (nada anima no carregamento). */ .zf-nav.zf-mm.zf-mm-anim .zf-nav__wrap { transition: transform 0.38s cubic-bezier(0.55, 0, 0.75, 0.2), visibility 0s linear 0.38s; } .zf-nav.zf-mm.zf-mm-anim.esta-aberta .zf-nav__wrap { transition: transform 0.46s var(--zf-mm-ease), visibility 0s; } /* ---------- Topo ---------- */ .zf-nav.zf-mm .zf-nav__topo { min-height: 68px; box-sizing: border-box; padding: 0 16px 0 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .zf-mm .zf-nav__topo-marca { display: flex; align-items: center; } .zf-mm-logo { display: block; width: auto; height: 30px; } .zf-nav.zf-mm .zf-nav__fechar { margin-right: 0; box-sizing: border-box; border-radius: 50%; border: 1px solid #2a2536; background: #14111c; transition: transform 0.3s var(--zf-mm-ease), border-color 0.2s ease; } .zf-nav.zf-mm .zf-nav__fechar:hover { border-color: #6109d7; } .zf-nav.zf-mm.esta-aberta .zf-nav__fechar { animation: zf-mm-aparece 0.4s ease 0.1s backwards; } .zf-nav.zf-mm .zf-nav__fechar:active { transform: scale(0.92); } /* ---------- Lista principal ---------- */ .zf-nav.zf-mm .zf-nav__lista { padding: 12px 20px 24px; } .zf-nav.zf-mm .zf-nav__wrap.zf-mm-sub .zf-nav__lista { overflow: hidden; } /* O li nao anima (seria o bloco de referencia da tela da secao): animam as pecas. */ .zf-nav.zf-mm.esta-aberta .zf-nav__item { animation: none; } .zf-nav.zf-mm .zf-nav__item { flex-wrap: nowrap; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .zf-nav.zf-mm .zf-nav__link { min-height: 78px; gap: 14px; padding: 0 2px; font-size: 26px; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; color: #ffffff; min-width: 0; } .zf-mm .zf-mm-n { display: block; width: 22px; flex-shrink: 0; font-size: 12px; font-weight: 800; letter-spacing: 0; color: #6b6478; } .zf-mm .zf-mm-texto { display: flex; flex-direction: column; gap: 4px; } .zf-mm .zf-mm-resumo { display: block; font-size: 13px; line-height: 1.35; font-weight: 500; letter-spacing: 0; color: #8b8b95; } .zf-nav.zf-mm .zf-nav__link[aria-current="page"] .zf-mm-n { color: #bd8efa; } .zf-nav.zf-mm .zf-nav__toggle { width: 38px; height: 38px; min-height: 38px; flex-shrink: 0; margin-left: 8px; box-sizing: border-box; border: 1px solid #3b1d6e; border-radius: 50%; background: #120227; color: #d9bffc; } .zf-nav.zf-mm .zf-nav__toggle svg, .zf-nav.zf-mm .zf-nav__toggle[aria-expanded="true"] svg { transform: rotate(-90deg); } /* Entrada em cascata ao abrir o menu. */ .zf-nav.zf-mm.esta-aberta .zf-nav__item > .zf-nav__link, .zf-nav.zf-mm.esta-aberta .zf-nav__item > .zf-nav__toggle, .zf-nav.zf-mm.esta-aberta .zf-mm-extras > * { animation: zf-mm-sobe 0.5s var(--zf-mm-ease) backwards; animation-delay: calc(160ms + var(--zf-mm-i, 0) * 55ms); } .zf-nav.zf-mm.esta-aberta .zf-mm-extras > * + * { animation-delay: calc(215ms + var(--zf-mm-i, 0) * 55ms); } /* Ao abrir uma secao, a lista sai para a esquerda. */ .zf-nav.zf-mm .zf-nav__item > .zf-nav__link, .zf-nav.zf-mm .zf-nav__item > .zf-nav__toggle, .zf-nav.zf-mm .zf-mm-extras { transition: opacity 0.22s ease, transform 0.32s var(--zf-mm-ease); } .zf-nav.zf-mm .zf-mm-sub .zf-nav__item > .zf-nav__link, .zf-nav.zf-mm .zf-mm-sub .zf-nav__item > .zf-nav__toggle, .zf-nav.zf-mm .zf-mm-sub .zf-mm-extras { opacity: 0; transform: translate3d(-28px, 0, 0); pointer-events: none; } /* ---------- Atalhos e cartao do CRM ---------- */ .zf-mm .zf-mm-extras { display: flex; flex-direction: column; gap: 14px; padding-top: 22px; border: 0; } .zf-mm-atalhos { display: flex; gap: 8px; } .zf-mm-atalho { flex: 1; min-height: 48px; box-sizing: border-box; border-radius: 14px; border: 1px solid #25232f; background: #121019; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 700; color: #ffffff; text-decoration: none; transition: border-color 0.2s ease, transform 0.2s var(--zf-mm-ease); } .zf-mm-atalho svg { color: #bd8efa; } .zf-mm-atalho:hover, .zf-mm-atalho:focus-visible { border-color: #6109d7; color: #ffffff; } .zf-mm-atalho:active { transform: scale(0.97); } .zf-mm-crm { position: relative; overflow: hidden; box-sizing: border-box; padding: 16px; border-radius: 18px; border: 1px solid #6109d7; background: radial-gradient(260px 160px at 100% 0%, rgba(122, 30, 246, 0.35), rgba(15, 13, 23, 0) 70%), #0f0d17; display: flex; align-items: center; gap: 14px; color: #ffffff; text-decoration: none; transition: transform 0.2s var(--zf-mm-ease); } .zf-mm-crm:hover, .zf-mm-crm:focus-visible { color: #ffffff; } .zf-mm-crm:active { transform: scale(0.98); } .zf-mm-crm__texto { flex-grow: 1; display: flex; flex-direction: column; gap: 6px; } .zf-mm-crm__selo { align-self: flex-start; padding: 4px 9px; border-radius: 999px; background: #7a1ef6; font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; } .zf-mm-crm__titulo { font-size: 17px; font-weight: 800; } .zf-mm-crm__desc { font-size: 13px; line-height: 1.45; color: #c4b5dd; } .zf-mm-crm__seta { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: #7a1ef6; display: flex; align-items: center; justify-content: center; transition: transform 0.25s var(--zf-mm-ease); } .zf-mm-crm:hover .zf-mm-crm__seta { transform: translateX(3px); } /* ---------- Tela da secao ---------- */ .zf-nav.zf-mm .zf-painel, .zf-nav.zf-mm .zf-painel--compacto { position: absolute; z-index: 2; top: var(--zf-mm-topo, 68px); bottom: var(--zf-mm-acoes, 86px); left: 0; right: 0; box-sizing: border-box; padding: 0 20px 20px; overflow-y: auto; overscroll-behavior: contain; background: radial-gradient(420px 260px at 100% 0%, rgba(122, 30, 246, 0.12), rgba(10, 10, 11, 0) 70%), var(--wp--preset--color--preto, #0a0a0b); } .zf-nav.zf-mm .zf-painel:not([hidden]) { animation: zf-mm-entra-dir 0.38s var(--zf-mm-ease); } .zf-mm .zf-mm-cabeca { position: sticky; top: 0; z-index: 1; display: flex; flex-direction: column; gap: 8px; margin: 0 -20px 12px; padding: 12px 20px 12px; background: var(--wp--preset--color--preto, #0a0a0b); } .zf-mm-voltar { align-self: flex-start; min-height: 40px; margin-left: -6px; padding: 0 12px 0 6px; border: 0; border-radius: 999px; background: none; display: flex; align-items: center; gap: 4px; font: inherit; font-size: 14px; font-weight: 700; color: #d9bffc; cursor: pointer; transition: background-color 0.2s ease; } .zf-mm-voltar:hover { background: rgba(122, 30, 246, 0.14); } .zf-mm-voltar svg { transition: transform 0.25s var(--zf-mm-ease); } .zf-mm-voltar:hover svg { transform: translateX(-3px); } .zf-mm-titulo { margin: 0; font-size: 32px; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; color: #ffffff; } .zf-mm-subtitulo { margin: 0; font-size: 14px; line-height: 1.45; color: #8b8b95; } .zf-mm-abas { margin: 6px -20px 0; padding: 0 20px 2px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; } .zf-mm-abas::-webkit-scrollbar { display: none; } .zf-mm-aba { flex-shrink: 0; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #25232f; background: #121019; font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; color: #c4c4cc; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .zf-mm-aba[aria-selected="true"] { background: #7a1ef6; border-color: #7a1ef6; color: #ffffff; } /* Conteudo */ .zf-nav.zf-mm .zf-painel__corpo { display: block; } .zf-nav.zf-mm .zf-painel__conteudo { display: flex; flex-direction: column; } .zf-nav.zf-mm .zf-destaque { display: none; } .zf-nav.zf-mm .zf-painel__grupo, .zf-nav.zf-mm .zf-painel__titulo { display: none; } .zf-nav.zf-mm .zf-painel__grade { display: block; } .zf-nav.zf-mm [data-zf-mm-aba]:not(.zf-mm-ativa) { display: none; } .zf-nav.zf-mm .zf-mm-ativa .zf-painel__links, .zf-nav.zf-mm .zf-mm-ativa .zf-painel__links[hidden] { display: block; } .zf-nav.zf-mm .zf-painel__lista, .zf-nav.zf-mm .zf-painel__links { margin: 0; padding: 0; list-style: none; } /* "Visao geral" em destaque, no topo */ .zf-nav.zf-mm .zf-painel .zf-painel__visao-geral, .zf-nav.zf-mm .zf-painel .zf-painel__visao .zf-painel__link { order: -1; display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin: 0 0 10px; padding: 0 14px; box-sizing: border-box; border-radius: 14px; border: 1px solid #3b1d6e; border-bottom: 1px solid #3b1d6e; background: rgba(122, 30, 246, 0.14); font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #ffffff; text-decoration: none; } .zf-nav.zf-mm .zf-painel .zf-painel__visao .zf-painel__link-titulo { font-size: 15px; font-weight: 700; } .zf-nav.zf-mm .zf-painel .zf-painel__visao .zf-painel__link::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; color: #d9bffc; } .zf-nav.zf-mm .zf-painel__visao-geral svg { color: #d9bffc; } /* Links com icone e descricao */ .zf-nav.zf-mm .zf-painel__link, .zf-nav.zf-mm .zf-painel--lista .zf-painel__link, .zf-nav.zf-mm .zf-painel--compacto .zf-painel__link, .zf-nav.zf-mm .zf-painel__links .zf-painel__link { display: flex; align-items: center; gap: 14px; min-height: 66px; margin: 0; padding: 10px 8px 10px 0; border-radius: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); color: #ffffff; text-decoration: none; } .zf-nav.zf-mm .zf-painel__icone { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0; box-sizing: border-box; border-radius: 12px; border: 1px solid #2a2536; background: #14111c; color: #bd8efa; transition: transform 0.25s var(--zf-mm-ease), border-color 0.2s ease; } .zf-nav.zf-mm .zf-painel__link:active .zf-painel__icone { transform: scale(0.92); border-color: #6109d7; } .zf-nav.zf-mm .zf-painel__link-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .zf-nav.zf-mm .zf-painel__link-titulo { font-size: 16px; font-weight: 700; color: #ffffff; } .zf-nav.zf-mm .zf-painel__link-descr { display: block; font-size: 13px; line-height: 1.4; color: #8b8b95; } .zf-nav.zf-mm .zf-painel__link[aria-current="page"] .zf-painel__link-titulo { color: #d9bffc; } /* Itens da secao entram em cascata (tambem ao trocar de aba). */ .zf-nav.zf-mm .zf-painel:not([hidden]) .zf-painel__lista > li, .zf-nav.zf-mm .zf-painel:not([hidden]) .zf-mm-ativa .zf-painel__links > li, .zf-nav.zf-mm .zf-painel:not([hidden]) .zf-painel__visao-geral { animation: zf-mm-sobe 0.42s var(--zf-mm-ease) backwards; animation-delay: 70ms; } .zf-nav.zf-mm .zf-painel:not([hidden]) :is(.zf-painel__lista, .zf-painel__links) > li:nth-child(2) { animation-delay: 110ms; } .zf-nav.zf-mm .zf-painel:not([hidden]) :is(.zf-painel__lista, .zf-painel__links) > li:nth-child(3) { animation-delay: 150ms; } .zf-nav.zf-mm .zf-painel:not([hidden]) :is(.zf-painel__lista, .zf-painel__links) > li:nth-child(4) { animation-delay: 190ms; } .zf-nav.zf-mm .zf-painel:not([hidden]) :is(.zf-painel__lista, .zf-painel__links) > li:nth-child(5) { animation-delay: 230ms; } .zf-nav.zf-mm .zf-painel:not([hidden]) :is(.zf-painel__lista, .zf-painel__links) > li:nth-child(n+6) { animation-delay: 265ms; } /* ---------- Rodape de acoes ---------- */ .zf-nav.zf-mm .zf-nav__acoes { flex-direction: row; gap: 10px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 8px)); background: rgba(14, 12, 20, 0.98); border-top: 1px solid rgba(255, 255, 255, 0.07); } .zf-nav.zf-mm .zf-nav__cta { flex-grow: 1; min-height: 52px; border-radius: 14px; box-shadow: 0 0 28px rgba(122, 30, 246, 0.45); font-weight: 800; transition: transform 0.2s var(--zf-mm-ease); } .zf-nav.zf-mm .zf-nav__cta:active { transform: scale(0.98); } .zf-nav.zf-mm .zf-nav__whatsapp { width: 52px; height: 52px; min-height: 52px; flex-shrink: 0; box-sizing: border-box; padding: 0; justify-content: center; position: relative; border-radius: 14px; } .zf-nav.zf-mm .zf-nav__whatsapp span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } @media (max-width: 1023px) and (max-height: 520px) { .zf-nav.zf-mm .zf-nav__link { min-height: 60px; font-size: 22px; } .zf-mm .zf-mm-resumo { display: none; } } @media (prefers-reduced-motion: reduce) { .zf-nav.zf-mm .zf-nav__wrap, .zf-nav.zf-mm .zf-nav__item > .zf-nav__link, .zf-nav.zf-mm .zf-nav__item > .zf-nav__toggle, .zf-nav.zf-mm .zf-mm-extras { transition: none; } .zf-nav.zf-mm *, .zf-nav.zf-mm .zf-painel:not([hidden]) { animation: none !important; } }