/* comum.css: estilos que acompanham o comum.js. É o MESMO arquivo em todas as pastas de modelo: não edite por cliente. Cores e fontes do modelo ficam no styles.css (variáveis no :root). Cores: o comum usa --comum-foco, --comum-fundo, --comum-texto, --comum-balao-fundo, --comum-balao-texto e --comum-balao-borda se o modelo definir (cor completa, ex.: #b08d57); senão, as variáveis HSL do Tailwind (modelos 01 a 10). */ /* Elemento com o atributo hidden some de verdade, mesmo com classe de display (flex, grid...). */ [hidden] { display: none !important; } /* Rolagem suave até as seções, parando abaixo do cabeçalho fixo. */ :root { scroll-behavior: smooth; } [id] { scroll-margin-top: var(--folga-cabecalho, 5.5rem); } html.sem-rolagem { overflow: hidden; } /* Com a galeria ou a gaveta do menu abertas, o WhatsApp flutuante e o aviso de cookies saem da frente. */ html.sem-rolagem [data-whatsapp-flutuante], html.sem-rolagem [data-cookies] { visibility: hidden; } /* Entradas: escondidas só enquanto esperam a vez (a classe js vem do script no ). */ .js [data-anim]:not(.anim-ok), .js [data-whatsapp-flutuante]:not(.anim-ok) { opacity: 0; } /* Títulos de duas linhas com as linhas parecidas; parágrafos sem palavra sozinha na última linha. Só o estilo da quebra (text-wrap-style): o "não quebrar" (nowrap) de cada elemento continua valendo. */ h1, h2, h3 { text-wrap-style: balance; } p, li, blockquote { text-wrap-style: pretty; } /* Foco visível para quem navega pelo teclado. */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: 2px solid var(--comum-foco, hsl(var(--ring, var(--primary, 217 91% 60%)))); outline-offset: 3px; border-radius: 4px; } /* Link "Pular para o conteúdo": só aparece quando recebe foco pelo teclado. */ .pular-conteudo { position: absolute; left: 1rem; top: 1rem; z-index: 100; padding: .75rem 1.25rem; border-radius: .5rem; background: var(--comum-fundo, hsl(var(--background, 0 0% 100%))); color: var(--comum-texto, hsl(var(--foreground, 0 0% 9%))); transform: translateY(-300%); transition: transform .2s ease; } .pular-conteudo:focus { transform: none; box-shadow: 0 8px 30px rgb(0 0 0 / .2); } /* Menu do celular: ícone de abrir/fechar conforme o estado. */ [data-menu-botao][aria-expanded="true"] [data-icone-abrir], [data-menu-botao]:not([aria-expanded="true"]) [data-icone-fechar] { display: none !important; } /* Perguntas frequentes. */ [data-faq-resposta] { overflow: hidden; } [data-faq-seta] { transition: transform .3s ease; } [data-faq-botao][aria-expanded="true"] [data-faq-seta] { transform: rotate(180deg); } /* Depoimentos: todos no mesmo lugar, a caixa fica da altura do maior (nada pula ao trocar). */ [data-slides] { display: grid; } [data-slides] > [data-slide] { grid-area: 1 / 1; } [data-slides] > [data-slide]:not(.ativo) { visibility: hidden; } /* Filhos de um slide que saiu não fazem transição: com "transition: all" a visibilidade também entraria na transição e o conteúdo antigo apareceria por cima do novo por um instante. */ [data-slides] > [data-slide]:not(.ativo) * { transition: none !important; } /* Cartões lado a lado com rolagem lateral. */ [data-trilho] { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } [data-trilho]::-webkit-scrollbar { display: none; } [data-trilho] > * { scroll-snap-align: start; flex-shrink: 0; } /* Números que contam não mudam de largura. */ [data-contador] { font-variant-numeric: tabular-nums; } /* Área de toque maior sem mudar o desenho: a caixa do botão cresce 8 px para cada lado e só o miolo tem cor (pontinhos dos depoimentos, por exemplo). */ .alvo-toque { box-sizing: content-box !important; padding: 8px !important; background-clip: content-box !important; } /* Crédito da agência no rodapé: balão com a prévia ao passar o mouse (só no computador). */ .dev-tooltip-wrap { position: relative; display: inline-block; } .dev-tooltip-wrap .dev-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); width: 20rem; max-width: calc(100vw - 40px); background: var(--comum-balao-fundo, hsl(var(--popover, 240 10% 10%))); color: var(--comum-balao-texto, hsl(var(--popover-foreground, 0 0% 98%))); border: 1px solid var(--comum-balao-borda, hsl(var(--border, 240 6% 20%))); border-radius: .5rem; box-shadow: 0 10px 40px rgb(0 0 0 / .4); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 60; } .dev-tooltip-wrap:hover .dev-tooltip, .dev-tooltip-wrap:focus-within .dev-tooltip { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .dev-tooltip-wrap .dev-tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--comum-balao-fundo, hsl(var(--popover, 240 10% 10%))); } @media (hover: none) { .dev-tooltip-wrap .dev-tooltip { display: none; } } /* Tela baixa (celular deitado): o balão do WhatsApp cobriria o conteúdo. */ @media (max-height: 500px) { [data-whatsapp-balao] { display: none !important; } } @media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } .js [data-anim], .js [data-whatsapp-flutuante] { opacity: 1 !important; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } @media print { [data-anim] { opacity: 1 !important; transform: none !important; } [data-cookies], [data-whatsapp-flutuante], [data-menu-botao] { display: none !important; } }