/* ========================================================================== global.css — Estilos globais do site Grupo Memorá Carregado em todas as páginas. Use este arquivo para ajustes e personalizações que devem valer para o site inteiro, sem precisar editar os estilos de cada página individualmente. ========================================================================== */ :root { /* Paleta da marca (ajuste conforme necessário) */ --memora-dourado: #f1c280; --memora-escuro: #1a1a1a; --memora-claro: #ffffff; } /* Rolagem suave para links âncora internos */ html { scroll-behavior: smooth; } /* Melhora a legibilidade padrão do texto */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Imagens responsivas por padrão */ img { max-width: 100%; height: auto; } /* Foco visível para acessibilidade (navegação por teclado) */ a:focus-visible, button:focus-visible { outline: 2px solid var(--memora-dourado); outline-offset: 2px; } /* ========================================================================== Transição de página (fade) ao navegar entre páginas internas do site - Fade-in suave quando a página carrega - Fade-out suave ao clicar em um link interno (controlado pelo global.js) - Respeita "prefers-reduced-motion" para acessibilidade IMPORTANTE: a animação de entrada usa "backwards" (e NÃO "both"). Se usássemos "both", o transform final (translateY(0)) permaneceria aplicado ao , e um transform != none faz o virar o "containing block" de qualquer elemento position:fixed filho. Isso quebrava a centralização dos overlays/modais (contato, exit-intent, trabalhe conosco), que passavam a se posicionar em relação à página inteira em vez do viewport — aparecendo fora da área visível no desktop. Com "backwards", o transform volta a "none" ao fim da animação, mantendo os fixed corretamente presos ao viewport. ========================================================================== */ @keyframes memoraSlideIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } /* Entrada: a página entra deslizando da direita para o centro. "backwards" aplica o estado inicial (opacity:0) antes de começar, evitando flash, e reverte o transform a "none" ao terminar (ver nota acima). */ html.memora-transicoes body { animation: memoraSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards; } /* Saída: ao clicar em um link interno, a página desliza para a esquerda antes de navegar. */ html.memora-transicoes.memora-saindo body { opacity: 0; transform: translateX(-40px); transition: opacity 0.3s ease, transform 0.3s ease; } /* Sem transições para quem prefere menos movimento */ @media (prefers-reduced-motion: reduce) { html.memora-transicoes body, html.memora-transicoes.memora-saindo body { animation: none; transition: none; opacity: 1; transform: none; } } /* ========================================================================== Personalizações do site — adicione suas regras abaixo ========================================================================== */ /* Compensa o cabeçalho fixo ao rolar para a âncora #unidade (menu "Unidades") */ #unidade { scroll-margin-top: 120px; } /* -------------------------------------------------------------------------- Foto de cada unidade (páginas /rn, /pb, /pe) -------------------------------------------------------------------------- */ .unidade-foto { width: 100%; margin-bottom: 14px; border-radius: 12px; overflow: hidden; background: #06735F; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); line-height: 0; } .unidade-foto img { display: block; width: 100%; height: 190px; object-fit: cover; object-position: center; transition: transform 0.4s ease; } .unidade-foto:hover img { transform: scale(1.05); }