/* ============================================================ RIVIERA — Seção "Instagram" (posts passando da direita para a esquerda, bem lentos) ------------------------------------------------------------ • Todas as classes têm prefixo .riv- para não conflitar com o CSS existente do site. • Cores da identidade: navy #1B2E3D / navy profundo #11232F / creme #FBF7F2 / texto claro #F5F6F8. • Fontes: Cormorant Garamond (títulos) e Quicksand (corpo). Carregue-as no do site (ver LEIA-ME.md). ============================================================ */ .riv-insta { --riv-bg: #f4f6f7; --riv-ink: #16242b; --riv-navy: #11232F; --riv-cream: #FBF7F2; --riv-claro: #F5F6F8; --riv-gap: 16px; --riv-dur: 60s; /* duração de uma volta; o JS recalcula pela velocidade */ background: var(--riv-bg); color: var(--riv-ink); padding: 72px 0 60px; overflow: hidden; font-family: 'Quicksand', 'Segoe UI', system-ui, sans-serif; } /* Variante escura: troque
por
*/ .riv-insta--navy { --riv-bg: #11232F; --riv-ink: #F5F6F8; } /* ---------- Cabeçalho da seção ---------- */ .riv-head { max-width: 640px; margin: 0 auto 40px; padding: 0 24px; text-align: center; } .riv-over { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.75; } .riv-title { margin: 12px 0 10px; font-family: 'Belleza', 'Montserrat', Georgia, sans-serif; font-weight: 700; font-size: clamp(30px, 4.5vw, 42px); line-height: 1.15; color: var(--riv-ink); } .riv-sub { margin: 0; font-size: 15px; line-height: 1.7; opacity: 0.92; } .riv-sub strong { font-weight: 700; } /* ---------- Esteira (marquee) ---------- */ .riv-vpt { overflow: hidden; } .riv-track { display: flex; width: max-content; animation: riv-mq var(--riv-dur) linear infinite; will-change: transform; } /* Sentido: direita → esquerda */ @keyframes riv-mq { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Pausa quando o mouse está sobre os posts (permite ler e clicar) */ .riv-vpt:hover .riv-track { animation-play-state: paused; } /* Acessibilidade: respeita "reduzir movimento" do sistema */ @media (prefers-reduced-motion: reduce) { .riv-track { animation: none; } } .riv-set { display: flex; gap: var(--riv-gap); padding-right: var(--riv-gap); /* garante o loop sem "salto" */ } /* ---------- Cards dos posts ---------- */ .riv-card { position: relative; flex: none; width: 250px; height: 312px; /* proporção 4:5, igual ao feed */ border-radius: 16px; overflow: hidden; display: block; text-decoration: none; background: var(--riv-navy); color: var(--riv-claro); } .riv-card img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Overlay "Ver no Instagram" no hover/foco */ .riv-ov { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(17, 35, 47, 0.78); color: #F5F6F8; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity 0.2s ease; } .riv-card:hover .riv-ov, .riv-card:focus-visible .riv-ov { opacity: 1; } .riv-ov svg { width: 26px; height: 26px; } /* ---------- Cards provisórios (antes de colocar as imagens) ---------- */ .riv-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; text-align: center; } .riv-ph .riv-marca { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 15px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; padding-left: 0.32em; } .riv-ph .riv-dica { font-size: 12px; line-height: 1.5; opacity: 0.75; } .riv-ph--claro { background: var(--riv-cream); color: #1B2E3D; border: 1px solid rgba(27, 46, 61, 0.28); border-radius: 16px; } /* ---------- Botão de seguir ---------- */ .riv-cta { text-align: center; margin-top: 44px; padding: 0 24px; } .riv-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--riv-ink); color: var(--riv-bg); border-radius: 999px; padding: 13px 28px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; transition: opacity 0.2s ease; } .riv-btn:hover { opacity: 0.88; } .riv-btn svg { width: 18px; height: 18px; } .riv-note { margin: 12px 0 0; font-size: 13px; opacity: 0.6; } /* ---------- Ajustes para celular ---------- */ @media (max-width: 640px) { .riv-insta { padding: 52px 0 44px; } .riv-card { width: 180px; height: 225px; border-radius: 14px; } .riv-head { margin-bottom: 30px; } .riv-cta { margin-top: 34px; } }