/* ============================================================================= Verthus — base.css (carregado de forma diferida) Complementa o critical.css (que já traz tokens, reset e tipografia de primeira pintura, colado inline no ). Aqui ficam: revelação ao rolar, rodapé, cabeçalho claro das páginas legais e tipografia de texto corrido. ============================================================================= */ /* ---------- Revelação ao rolar ---------- O ui.js só marca como "revelar-pend" o que começa ABAIXO da dobra; nada acima da dobra anima. Sem JS ou com prefers-reduced-motion, nada é ocultado. */ .revelar-pend { opacity: 0; transform: translateY(12px); } .revelar-pend.revelado { opacity: 1; transform: none; transition: opacity 0.4s ease, transform 0.4s ease; } /* ---------- Links de texto ---------- */ .link-seta { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--c-pri); text-decoration: none; } .link-seta:hover, .link-seta:focus-visible { color: var(--c-pri-esc); text-decoration: underline; } /* ---------- Rodapé ---------- */ .rodape { background: var(--c-fundo); color: var(--c-texto); } .rodape__g { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 32px 24px; padding-top: clamp(40px, 5vw, 64px); padding-bottom: 32px; } .rodape__marca { display: flex; flex-direction: column; gap: 14px; } .rodape__marca img { width: auto; height: 36px; align-self: flex-start; } .rodape__frase { font-size: 14px; color: var(--c-texto-3); max-width: 30ch; } .rodape__crc { font-size: 12px; color: var(--c-texto-3); line-height: 1.6; } .rodape__tit { margin: 0 0 12px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--c-texto-3); } .rodape ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; } .rodape ul.rodape__contato { line-height: 1.5; } .rodape ul a { color: var(--c-texto); text-decoration: none; } .rodape ul a:hover, .rodape ul a:focus-visible { color: var(--c-texto); text-decoration: underline; } .rodape__end { color: var(--c-texto-2); } .rodape ul .rodape__end a { color: inherit; } .rodape__base { padding-top: 18px; padding-bottom: 28px; border-top: var(--regua) solid var(--c-pri); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--c-texto-3); } .rodape__base nav { display: flex; gap: 18px; flex-wrap: wrap; } .rodape__base a { color: var(--c-texto-3); text-decoration: none; } .rodape__base a:hover, .rodape__base a:focus-visible { color: var(--c-texto-3); text-decoration: underline; } /* Rodapé da frente Imobiliária (ZIP) e das páginas legais: três blocos em linha */ .rodape--imob .rodape__g, .rodape--simples .rodape__g { display: flex; flex-wrap: wrap; gap: 32px 48px; justify-content: space-between; align-items: flex-start; padding-bottom: 28px; } .rodape--imob .rodape__marca, .rodape--simples .rodape__marca { max-width: 34ch; } /* Lockup com especialização: grande o bastante para a linha "Contabilidade para Corretores Imobiliários" ser legível */ .rodape--imob .rodape__marca img { height: 72px; } .rodape--imob .rodape__frase { max-width: none; } @media (max-width: 960px) { .rodape__g { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .rodape__g { grid-template-columns: 1fr; } } /* ---------- Texto corrido (páginas legais) ---------- */ .legal { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(56px, 8vw, 96px); } .legal h1 { font-family: var(--font-titulo); font-weight: 700; font-size: 40px; line-height: 1.15; letter-spacing: -0.01em; max-width: 22ch; } .legal__data { margin-top: 12px; font-size: 13px; color: var(--cinza-texto); } .prose { max-width: 68ch; margin-top: 32px; } .prose h2 { font-family: var(--font-titulo); font-weight: 400; font-size: 28px; line-height: 1.25; letter-spacing: 0; margin: 48px 0 12px; } .prose h3 { font-family: var(--font-texto); font-weight: 600; font-size: 20px; line-height: 1.35; margin: 28px 0 8px; } .prose p, .prose ul, .prose ol { margin: 0 0 16px; } .prose ul, .prose ol { padding-left: 1.25em; } .prose li { margin-bottom: 6px; } .prose a { font-weight: 500; } .prose strong { font-weight: 600; } .prose .prose__nota { padding: 16px 20px; background: var(--bege); border-left: var(--regua) solid var(--c-pri); font-size: 15px; } @media (max-width: 640px) { .legal h1 { font-size: 32px; } .prose h2 { font-size: 24px; margin-top: 40px; } }