/* Fluvimar — layout, grid e animações de entrada */ /* --------------------------------------------------------------------------- Container — max-width 1440px conforme o original --------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--estreito { max-width: 900px; } .secao { padding-block: var(--sp-20); } .secao--compacta { padding-block: var(--sp-10); } .secao--escura { background: var(--c-escura); color: var(--c-branco); } @media (max-width: 809.98px) { .secao { padding-block: var(--sp-10); } } /* --------------------------------------------------------------------------- Grids --------------------------------------------------------------------------- */ .grid { display: grid; gap: var(--sp-6); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } /* Grid fluido para os catálogos de embarcações e revendas. */ .grid--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } @media (max-width: 1199.98px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 809.98px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } .empilha { display: flex; flex-direction: column; gap: var(--sp-4); } .linha { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; } /* --------------------------------------------------------------------------- Animações de entrada --------------------------------------------------------------------------- */ /* Aproximação das animações do Framer Motion do site original — fade + slide, disparadas por IntersectionObserver (assets/js/app.js), que adiciona .esta-visivel quando o elemento entra na viewport. O estado inicial só é aplicado quando o tem .js, para que o conteúdo continue visível se o JavaScript falhar ou estiver desativado. */ .js [data-anima] { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-lenta) var(--ease-saida), transform var(--dur-lenta) var(--ease-saida); transition-delay: var(--atraso, 0ms); will-change: opacity, transform; } .js [data-anima="esquerda"] { transform: translateX(-24px); } .js [data-anima="direita"] { transform: translateX(24px); } .js [data-anima="escala"] { transform: scale(0.96); } .js [data-anima="fade"] { transform: none; } .js [data-anima].esta-visivel { opacity: 1; transform: none; } /* Aplicado pelo JS ao que já está na primeira dobra: aparece pronto, sem fade. Sem isso, cada navegação parecia "montar" a página do zero. */ .js [data-anima].sem-transicao, .js [data-anima-grupo].sem-transicao, .js [data-anima-grupo].sem-transicao > * { transition: none !important; transition-delay: 0s !important; } /* Escalonamento dos filhos — equivalente ao stagger do Framer Motion. */ .js [data-anima-grupo] > * { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-lenta) var(--ease-saida), transform var(--dur-lenta) var(--ease-saida); } .js [data-anima-grupo].esta-visivel > * { opacity: 1; transform: none; } .js [data-anima-grupo].esta-visivel > *:nth-child(1) { transition-delay: 0ms; } .js [data-anima-grupo].esta-visivel > *:nth-child(2) { transition-delay: 80ms; } .js [data-anima-grupo].esta-visivel > *:nth-child(3) { transition-delay: 160ms; } .js [data-anima-grupo].esta-visivel > *:nth-child(4) { transition-delay: 240ms; } .js [data-anima-grupo].esta-visivel > *:nth-child(5) { transition-delay: 320ms; } .js [data-anima-grupo].esta-visivel > *:nth-child(6) { transition-delay: 400ms; } .js [data-anima-grupo].esta-visivel > *:nth-child(n + 7) { transition-delay: 480ms; } /* Sem movimento para quem pediu para não ter. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js [data-anima], .js [data-anima-grupo] > * { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }