/* ========================================================= TupiTec – Header Mobile (até 1023px) ONDE CONFIGURAR (3 pontos principais): 1) TAMANHO DO BOTÃO (container): --tupi-toggle-size 2) TAMANHO DO ÍCONE (Android/geral): --tupi-icon-size 3) TAMANHO DO ÍCONE (iOS): html.tupi-ios #tupi-mheader { --tupi-icon-size: ... } ========================================================= */ /* -------- Breakpoint: mobile/tablet em pé -------- */ .tupi-mheader { display: block; } @media (min-width: 1024px) { .tupi-mheader { display: none; } } /* -------- KNOBS (valores padrão) -------- 1) TAMANHO DO BOTÃO (container) 2) TAMANHO DO ÍCONE (Android/geral) */ #tupi-mheader{ --tupi-toggle-size: 40px; /* (1) tamanho do botão/área de toque */ --tupi-icon-size: 25px; /* (2) tamanho do ícone "☰" para Android/geral */ } /* -------- Override para iOS (controlado pelo JS que adiciona ) -------- 3) TAMANHO DO ÍCONE NO iOS */ html.tupi-ios #tupi-mheader{ --tupi-icon-size: 35px; /* ajuste aqui o tamanho do ícone no iOS */ } /* ========================================================= Barra superior ========================================================= */ .tupi-mheader__bar{ position: relative; z-index: 1001; display: flex; align-items: center; justify-content: center; /* logo central */ gap: 12px; height: 56px; padding: 8px 12px; background: #fff; color: #0f172a; border-bottom: 1px solid rgba(17,19,26,.06); } /* ========================================================= Botão hambúrguer (esquerda) – RESET + uso das variáveis ========================================================= */ .tupi-mheader__toggle{ /* resetar qualquer estilo herdado do tema/plugins */ all: unset; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: var(--tupi-toggle-size); height: var(--tupi-toggle-size); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent; } /* remover “bolhas” de pseudo-elementos */ .tupi-mheader__toggle::before, .tupi-mheader__toggle::after{ content: none !important; display: none !important; background: transparent !important; box-shadow: none !important; } /* evitar fundo/realces em estados comuns */ .tupi-mheader__toggle:hover, .tupi-mheader__toggle:active, .tupi-mheader__toggle:focus, .tupi-mheader__toggle[aria-expanded="true"]{ background: transparent !important; box-shadow: none !important; } /* (opcional) acessibilidade: mostrar contorno só com teclado .tupi-mheader__toggle:focus-visible{ outline: 2px solid #8b5cf6; outline-offset: 2px; } */ /* Ícone “☰” por texto – usa a variável de tamanho */ .tupi-mheader__icon--text{ display: block; font-size: var(--tupi-icon-size); /* ← tamanho do ícone controlado aqui */ line-height: 1; font-weight: 700; } /* Logo central (Customizer) */ .tupi-mheader__logo img{ display: block; height: 28px; /* ajuste fino 24–32px */ width: auto; } /* Espaçador direito para manter a logo centralizada visualmente */ .tupi-mheader__spacer{ position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: var(--tupi-toggle-size); height: var(--tupi-toggle-size); } /* ========================================================= Popup full-screen (menu) ========================================================= */ .tupi-mmenu{ position: fixed; inset: 0; z-index: 9999; pointer-events: none; /* só habilita quando aberto */ } /* Painel ocupa a tela e desliza da esquerda */ .tupi-mmenu__panel{ position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; background: #fff; color: #0f172a; box-shadow: 0 12px 40px rgba(0,0,0,.18); transform: translateX(-100%); transition: transform .25s ease; display: flex; flex-direction: column; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Aberto */ .tupi-mmenu[aria-hidden="false"]{ pointer-events: auto; } .tupi-mmenu[aria-hidden="false"] .tupi-mmenu__panel{ transform: translateX(0); } /* Fechar (X) */ .tupi-mmenu__close{ position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; font-size: 28px; line-height: 1; -webkit-tap-highlight-color: transparent; } .tupi-mmenu__close:hover, .tupi-mmenu__close:active, .tupi-mmenu__close:focus{ background: transparent !important; box-shadow: none !important; } .tupi-mmenu__close::before, .tupi-mmenu__close::after{ content: none !important; } /* Logo do menu (no topo do popup) */ .tupi-mmenu__brand{ padding: 24px 20px 12px; display: flex; align-items: center; justify-content: center; } .tupi-mmenu__brand img{ display: block; height: 50px; /* ajuste fino */ width: auto; } /* Lista de navegação */ .tupi-mmenu__nav{ padding: 6px 10px 24px; } .tupi-mmenu__list{ list-style: none; margin: 0; padding: 0; } .tupi-mmenu__list > li{ border-bottom: 1px solid rgba(17,19,26,.08); } .tupi-mmenu__list > li:last-child{ border-bottom: 0; } .tupi-mmenu__list a{ display: block; padding: 14px 10px; text-decoration: none; color: #0f172a; font-size: 17px; /* tap target confortável */ font-weight: 600; } .tupi-mmenu__list a:active{ opacity: .9; } /* Bloqueio de scroll quando o menu estiver aberto */ body.tupi-mmenu--open{ overflow: hidden; } .tupi-mheader__cta{ position:absolute; right:8px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; height:40px; } .tupi-mheader__cta .tupi-btn.tupi-btn--contact{ font-size:13px; padding:8px 12px; border-radius:20px; } .tupi-mheader__cta .tupi-btn__icon{ width:16px; height:16px; margin-left:6px; } .tupi-mheader__bar{ padding-right:60px; } /* reserva espaço para o CTA sem deslocar a logo */