/* ========================================================== site-adv — base visual (sóbrio, institucional, alto contraste) Cores/fontes reais vêm do banco via CSS vars injetadas no (ver partials/header.php): --primary, --secondary, --font-titulo, --font-texto ========================================================== */ :root { --primary: #0f2942; --secondary: #c9a24b; --on-primary: #ffffff; --font-titulo: 'Playfair Display', serif; --font-texto: 'Source Sans 3', sans-serif; --peso-titulo: 700; --escala-titulo: 1; --espaco-titulo: 0; --bg: #ffffff; --bg-alt: #f6f5f2; --text: #1c2126; --text-muted: #5b6470; --border: #e4e1da; --radius: 10px; --shadow: 0 4px 20px rgba(15, 41, 66, 0.08); --container: 1180px; /* A diferença entre as duas alturas (20px) precisa ser MENOR que a folga de histerese do JS que alterna .scrolled (aplica acima de 60px, remove abaixo de 20px = 40px de folga). Como o header é sticky, mudar sua altura desloca o conteúdo e a própria posição de rolagem; se esse deslocamento cruzasse o limite oposto, a classe entraria e sairia em loop — o efeito tremido. */ --header-h-tall: 84px; --header-h: 64px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-texto); color: var(--text); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-titulo); font-weight: var(--peso-titulo, 700); letter-spacing: var(--espaco-titulo, 0); line-height: 1.2; margin: 0 0 0.6em; color: var(--primary); } /* a escala compensa a métrica de cada par tipográfico (ver fonte_par_opcoes), pra que manuscritas não fiquem miúdas nem monoespaçadas estourem a linha */ h1 { font-size: calc(clamp(2rem, 4vw, 2.9rem) * var(--escala-titulo, 1)); } h2 { font-size: calc(clamp(1.5rem, 3vw, 2.1rem) * var(--escala-titulo, 1)); } p { margin: 0 0 1em; } a { color: var(--primary); text-decoration: none; } img { max-width: 100%; display: block; } .container { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; } .lead { font-size: 1.15rem; color: var(--text-muted); max-width: 56ch; } /* ---------- botões ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--primary); color: var(--on-primary); border: 1px solid var(--primary); padding: 0.7rem 1.4rem; border-radius: var(--radius); font-weight: 600; cursor: pointer; transition: opacity 0.15s ease, transform 0.15s ease; } .btn:hover { opacity: 0.88; } .btn-lg { padding: 0.9rem 1.8rem; font-size: 1.05rem; } .btn-outline { background: transparent; color: var(--primary); } .btn-sm { padding: 0.45rem 0.9rem; font-size: 0.9rem; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h-tall); display: flex; align-items: center; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid transparent; transition: height 0.25s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .site-header.scrolled { height: var(--header-h); border-color: var(--border); box-shadow: 0 2px 12px rgba(0,0,0,0.04); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; } .brand { display: flex; align-items: center; gap: 0.6rem; } /* max-height amarrado à altura do header impede a logo de "vazar" durante a transição, que é o que produz o repuxo visual no meio da animação */ .brand img { height: 60px; max-height: calc(var(--header-h-tall) - 24px); width: auto; transition: height 0.25s ease, max-height 0.25s ease; } .site-header.scrolled .brand img { height: 44px; max-height: calc(var(--header-h) - 20px); } .brand-dot { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: 1.35rem; transition: width 0.25s ease, height 0.25s ease, font-size 0.25s ease; } .site-header.scrolled .brand-dot { width: 40px; height: 40px; font-size: 1.2rem; } .brand-label { font-family: var(--font-titulo); font-weight: var(--peso-titulo, 700); font-size: calc(1.15rem * var(--escala-titulo, 1)); letter-spacing: var(--espaco-titulo, 0); color: var(--primary); } .main-nav { display: flex; gap: 1.6rem; } .main-nav a { color: var(--text); font-weight: 500; padding: 0.3rem 0; border-bottom: 2px solid transparent; } .main-nav a.active, .main-nav a:hover { color: var(--primary); border-color: var(--secondary); } .header-actions { display: flex; align-items: center; gap: 0.8rem; } .menu-toggle { display: none; background: none; border: none; font-size: 1.4rem; cursor: pointer; } @media (max-width: 860px) { /* o topo acompanha a altura atual do header, senão o menu descola dele ao rolar */ .main-nav { position: fixed; inset: var(--header-h-tall) 0 auto 0; flex-direction: column; background: var(--bg); padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); transform: translateY(-130%); transition: transform 0.2s ease, top 0.25s ease; gap: 0.9rem; } .site-header.scrolled .main-nav { top: var(--header-h); } .main-nav.open { transform: translateY(0); } .menu-toggle { display: block; } } /* respeita quem pediu menos animação no sistema */ @media (prefers-reduced-motion: reduce) { .site-header, .brand img, .brand-dot, .main-nav { transition: none; } } /* ---------- hero ---------- */ .hero { position: relative; padding: 5rem 0; overflow: hidden; background: var(--bg-alt); } /* fundo cheio (cover + overlay escuro) só faz sentido quando o texto fica por cima dele — usado nas variantes imagem_cheia e video_destaque. No split_foto a imagem é elemento normal na coluna oposta ao texto, por isso não usa esta camada absoluta. */ .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,41,66,0.55), rgba(15,41,66,0.75)); } .hero-imagem_cheia.hero .hero-grid, .hero-video_destaque.hero .hero-grid { position: relative; z-index: 1; } .hero-imagem_cheia h1, .hero-video_destaque h1, .hero-imagem_cheia .lead, .hero-video_destaque .lead { color: #fff; } .hero-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; } .hero-split_foto .hero-grid, .hero-video_destaque .hero-grid { grid-template-columns: 1.1fr 0.9fr; } .hero-actions { display: flex; gap: 1rem; margin-top: 1.6rem; flex-wrap: wrap; } .hero-video { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16/9; } .hero-video iframe { width: 100%; height: 100%; border: 0; } .hero-split-image { display: flex; justify-content: center; align-items: flex-end; height: 100%; max-height: 480px; } .hero-split-image img { max-width: 100%; max-height: 480px; width: auto; height: auto; object-fit: contain; } @media (max-width: 860px) { .hero-split_foto .hero-grid, .hero-video_destaque .hero-grid { grid-template-columns: 1fr; } .hero-split-image { order: -1; max-height: 280px; } .hero-split-image img { max-height: 280px; } } /* ---------- seções genéricas ---------- */ .section { padding: 4.5rem 0; } .section-alt { background: var(--bg-alt); } .section-title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2rem; gap: 1rem; flex-wrap: wrap; } .see-all { font-weight: 600; color: var(--primary); white-space: nowrap; } /* páginas internas: filete curto na cor secundária sob o H1 — assina a página sem competir com o título. ::after em vez de border-bottom pra ter largura própria. */ .page-header { padding-bottom: 2rem; } .page-header h1 { margin-bottom: 0; } .page-header h1::after, .article-header h1::after { content: ''; display: block; width: 64px; height: 3px; margin-top: 0.55em; border-radius: 999px; background: var(--secondary); } /* o cabeçalho de artigo/área é centralizado, então o filete acompanha */ .article-header h1::after { margin-left: auto; margin-right: auto; } /* ---------- áreas de atuação ---------- */ .grid-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; } .card-area { display: block; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.8rem; transition: box-shadow 0.2s ease, transform 0.2s ease; } .card-area:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .card-area-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--bg-alt); color: var(--primary); font-size: 1.4rem; margin-bottom: 1rem; } .card-area h3 { font-size: 1.15rem; margin-bottom: 0.4em; } .card-area p { color: var(--text-muted); margin: 0; font-size: 0.95rem; } /* ---------- sobre / equipe ---------- */ .sobre-texto { max-width: 72ch; color: var(--text-muted); } .grid-advogados { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.8rem; margin-top: 2.5rem; } .card-advogado { display: block; text-align: center; color: inherit; } .card-advogado img, .card-advogado-avatar { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; background: var(--bg-alt); } .card-advogado-avatar { display: flex; align-items: center; justify-content: center; font-size: 2.2rem; color: var(--text-muted); } .card-advogado h3 { margin-bottom: 0.2em; font-size: 1.05rem; } .card-advogado-cargo { display: block; color: var(--secondary); font-weight: 600; font-size: 0.9rem; margin-bottom: 0.3em; } .card-advogado-oab { display: block; color: var(--text-muted); font-size: 0.85rem; } .card-advogado-detalhe p { margin-top: 0.8em; color: var(--text-muted); font-size: 0.92rem; } /* lista compacta de áreas (página Sobre) — só os títulos; o detalhe fica na página de cada área */ .lista-areas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.7rem; } .lista-areas a { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-weight: 600; font-size: 0.95rem; transition: border-color 0.15s ease, color 0.15s ease; } .lista-areas a:hover { border-color: var(--secondary); color: var(--primary); } .lista-areas-icone { display: flex; color: var(--secondary); font-size: 1.15rem; } /* ---------- sobre + avaliação google ---------- */ /* texto e card dividem a linha no desktop; o texto não deve esticar até a borda */ .sobre-grid { display: grid; grid-template-columns: 70% 30%; gap: 2.5rem; align-items: start; } .sobre-grid-sem-avaliacao { grid-template-columns: 1fr; } .sobre-grid .sobre-texto { margin: 0; } .avaliacao-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem 1.4rem; box-shadow: var(--shadow); } .avaliacao-google-logo { display: flex; font-size: 2.2rem; line-height: 1; } .avaliacao-nota { font-family: var(--font-titulo); font-weight: var(--peso-titulo, 700); font-size: 2.4rem; line-height: 1; color: var(--text); } .avaliacao-estrelas { display: flex; align-items: center; gap: 0.15rem; color: #fbbc05; font-size: 1.05rem; } .avaliacao-card p { margin: 0; color: var(--text-muted); font-size: 0.88rem; } .avaliacao-card .btn { margin-top: 0.4rem; } @media (max-width: 860px) { .sobre-grid { grid-template-columns: 1fr; } } .avaliacao-card > div { flex: 1; min-width: 200px; } .avaliacao-card p { margin: 0.2em 0 0; color: var(--text-muted); } /* ---------- blog / cards ---------- */ .grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.8rem; } .card { display: block; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: box-shadow 0.2s ease, transform 0.2s ease; } .card:hover { box-shadow: var(--shadow); transform: translateY(-2px); } /* o wrapper com overflow:hidden recorta o excesso do zoom — sem ele a imagem ampliada vazaria por cima da borda arredondada do card */ .card-capa { overflow: hidden; } .card img { width: 100%; height: 170px; object-fit: cover; display: block; transition: transform 0.35s ease; } .card:hover .card-capa img { transform: scale(1.06); } .card .no-image { width: 100%; height: 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; background: var(--bg-alt); color: var(--text-muted); font-size: 0.85rem; } .card-body { padding: 1.2rem 1.3rem 1.4rem; } .card .categoria { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--secondary); margin-bottom: 0.4em; } .card h3 { font-size: 1.05rem; margin-bottom: 0.4em; } .card p { color: var(--text-muted); font-size: 0.93rem; margin: 0; } .categoria-filtros { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1rem; } .categoria-filtros a { padding: 0.4rem 0.9rem; border: 1px solid var(--border); border-radius: 999px; font-size: 0.88rem; color: var(--text-muted); } .categoria-filtros a.active, .categoria-filtros a:hover { border-color: var(--primary); color: var(--primary); } /* ---------- faq ---------- */ .faq-list { max-width: 78ch; margin: 0 auto; display: flex; flex-direction: column; gap: 0.8rem; } .faq-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.3rem; background: var(--bg); } .faq-item summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item[open] summary svg { transform: rotate(180deg); } .faq-item summary svg { transition: transform 0.2s ease; flex-shrink: 0; } .faq-resposta { margin-top: 0.8em; color: var(--text-muted); } .faq-chamada { margin: 1.6rem 0 0; text-align: center; color: var(--text-muted); } .faq-chamada a { font-weight: 600; border-bottom: 2px solid var(--secondary); } /* ---------- mapa / filiais ---------- */ .map-hero-section { position: relative; height: 360px; } .map-hero { position: absolute; inset: 0; z-index: 0; } .map-hero-gradient { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15,41,66,0.75), transparent 55%); pointer-events: none; } .map-hero-caption { position: absolute; left: 0; right: 0; bottom: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0 1.5rem; max-width: var(--container); margin: 0 auto; color: #fff; font-weight: 600; } .grid-filiais { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; } .card-filial { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; } .card-filial h3 { font-size: 1.05rem; margin-bottom: 0.5em; display: flex; align-items: center; gap: 0.5rem; } .card-filial p { display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted); font-size: 0.92rem; margin: 0.3em 0; } .tag-matriz { font-size: 0.7rem; background: var(--secondary); color: #fff; padding: 0.15rem 0.55rem; border-radius: 999px; font-family: var(--font-texto); font-weight: 700; } /* mapa grudado no rodapé — sem espaço entre os dois. .map-hero-section fica dentro do
, e .site-footer é irmão do
, por isso o :has(). */ main:has(.map-hero-section) + .site-footer, main:has(.faixa-filiais) + .site-footer { margin-top: 0; } /* faixa de unidades logo abaixo do mapa: lida como extensão do rodapé, por isso usa a mesma cor de fundo dele e não o espaçamento de uma seção normal */ .faixa-filiais { background: var(--primary); color: rgba(255,255,255,0.85); padding: 2.5rem 0 0.5rem; } .faixa-filiais h2 { color: #fff; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 1.2em; } .faixa-filiais .card-filial { border-color: rgba(255,255,255,0.18); } .faixa-filiais .card-filial h3 { color: #fff; } .faixa-filiais .card-filial p { color: rgba(255,255,255,0.7); } /* ---------- cta final ---------- */ /* padding-bottom zerado: a imagem "pisa" na base da seção (align-items:end), como se a pessoa estivesse apoiada no limite inferior do bloco */ .section-cta { background: var(--primary); color: #fff; padding: 4.5rem 0 0; overflow: hidden; } .section-cta-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: end; } .section-cta-texto { max-width: 52ch; padding-bottom: 4.5rem; } .section-cta h2 { color: #fff; } .section-cta p { color: rgba(255,255,255,0.85); } .section-cta .btn { background: var(--secondary); border-color: var(--secondary); color: #1c2126; } .section-cta-imagem { display: flex; justify-content: flex-end; align-items: flex-end; } .section-cta-imagem img { max-width: 100%; max-height: 320px; width: auto; height: auto; object-fit: contain; display: block; } @media (max-width: 860px) { .section-cta-inner { grid-template-columns: 1fr; text-align: center; } .section-cta-texto { max-width: none; margin: 0 auto; padding-bottom: 2rem; } .section-cta-imagem { justify-content: center; } .section-cta-imagem img { max-height: 200px; } } /* ---------- artigo / área de atuação (detalhe) ---------- */ .article-header { text-align: center; padding-bottom: 1rem; } .article-header .card-area-icon { margin: 0 auto 1rem; } .article-data { color: var(--text-muted); font-size: 0.9rem; } .article-capa img { border-radius: var(--radius); max-height: 420px; width: 100%; object-fit: cover; } .article-grid { display: grid; grid-template-columns: 2.2fr 1fr; gap: 3rem; align-items: start; } .article-body { max-width: 68ch; color: var(--text); } .article-body h2, .article-body h3 { margin-top: 1.4em; } .article-sidebar { position: sticky; top: 90px; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; } /* ---------- galeria do artigo + visualizador ---------- */ .article-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.8rem; margin-top: 2.5rem; } .article-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); transition: transform 0.2s ease; } .article-gallery img:hover { transform: scale(1.03); } .article-gallery img:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; } .lightbox-overlay { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.92); } .lightbox-overlay.show { display: flex; } .lightbox-img { max-width: min(92vw, 1200px); max-height: 86vh; object-fit: contain; border-radius: var(--radius); } .lightbox-fechar, .lightbox-prev, .lightbox-next { position: absolute; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); color: #fff; border-radius: 999px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; transition: background 0.15s ease; } .lightbox-fechar:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.28); } .lightbox-fechar { top: 1rem; right: 1rem; width: 42px; height: 42px; font-size: 1.1rem; } .lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 1.8rem; } .lightbox-prev { left: 1rem; } .lightbox-next { right: 1rem; } .lightbox-contador { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.8); font-size: 0.85rem; } @media (max-width: 600px) { .lightbox-prev, .lightbox-next { width: 40px; height: 40px; font-size: 1.5rem; } } .sidebar-list { list-style: none; padding: 0; margin: 0.6rem 0 0; display: flex; flex-direction: column; gap: 0.6rem; } .sidebar-list a { color: var(--text-muted); } .sidebar-list a:hover { color: var(--primary); } @media (max-width: 860px) { .article-grid { grid-template-columns: 1fr; } .article-sidebar { position: static; } } /* ---------- contato ---------- */ .contato-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: start; } .form-contato { display: flex; flex-direction: column; gap: 1.1rem; } .form-contato label { display: flex; flex-direction: column; gap: 0.4rem; font-weight: 600; font-size: 0.92rem; } .form-contato input, .form-contato select, .form-contato textarea { font: inherit; padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text); } .form-contato input:focus, .form-contato select:focus, .form-contato textarea:focus { outline: 2px solid var(--secondary); outline-offset: 1px; } .contato-info p { display: flex; align-items: center; gap: 0.6rem; } .contato-unidades { margin-top: 1.8rem; } .contato-unidades h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 1rem; } .contato-unidade { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-bottom: 0.9rem; } .contato-unidade h3 { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; margin-bottom: 0.5em; } .contato-unidade p { margin: 0.25em 0; color: var(--text-muted); font-size: 0.9rem; } .contato-unidade-rota { display: inline-block; margin-top: 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--primary); } .contato-unidade-rota:hover { color: var(--secondary); } /* honeypot: fora da tela em vez de display:none — some para quem enxerga e para leitores de tela (aria-hidden + tabindex -1), mas continua "preenchível" pelo robô */ .campo-armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .campo-opcional { color: var(--text-muted); font-weight: 400; font-size: 0.85em; } .campo-erro { display: block; margin-top: 0.15rem; color: #9b2c2c; font-size: 0.82rem; font-weight: 500; } .form-contato [aria-invalid="true"] { border-color: #9b2c2c; } .form-contato [aria-invalid="true"]:focus { outline-color: #9b2c2c; } .form-aviso { margin: 0; color: var(--text-muted); font-size: 0.8rem; } .alert { padding: 0.9rem 1.1rem; border-radius: 8px; font-size: 0.92rem; } .alert-erro { background: #fdecea; color: #9b2c2c; } .alert-sucesso { background: #eaf7ee; color: #1e6b3c; } @media (max-width: 860px) { .contato-grid { grid-template-columns: 1fr; } } /* ---------- footer ---------- */ .site-footer { background: var(--primary); color: rgba(255,255,255,0.85); padding: 3.5rem 0 1.5rem; margin-top: 2rem; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; } .footer-grid h4 { color: #fff; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.9em; } .footer-grid a { display: block; color: rgba(255,255,255,0.75); margin-bottom: 0.5em; } .footer-grid a:hover { color: #fff; } .footer-brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; } /* círculo branco atrás da logo, igual à tela de login do admin — garante contraste da logo (normalmente escura) sobre o fundo --primary do rodapé */ .footer-brand img { width: 52px; height: 52px; object-fit: contain; border-radius: 50%; background: #fff; padding: 6px; } .footer-brand-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; } .social-row { display: flex; gap: 0.6rem; } /* especificidade maior que ".footer-grid a" de propósito — senão aquela regra (display:block + margin-bottom) vence e descentraliza o ícone no círculo. */ .footer-grid .social-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-bottom: 0; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; } .footer-grid .social-btn svg { display: block; } .social-btn:hover { background: var(--secondary); color: #1c2126; } .footer-oab { border-top: 1px solid rgba(255,255,255,0.15); margin-top: 2.2rem; padding-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; font-size: 0.82rem; color: rgba(255,255,255,0.65); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); margin-top: 1.2rem; padding-top: 1.2rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem; font-size: 0.82rem; color: rgba(255,255,255,0.6); } @media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } } /* ---------- barra de pré-visualização de tipografia (só admin logado) ---------- */ .fonte-preview-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.7rem 1rem; background: #1c2126; color: #fff; font-family: system-ui, sans-serif; font-size: 0.82rem; box-shadow: 0 -4px 16px rgba(0,0,0,0.25); } .fonte-preview-bar strong { margin-right: 0.4rem; font-weight: 600; opacity: 0.75; } .fonte-preview-bar a { padding: 0.3rem 0.7rem; border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; color: #fff; font-weight: 500; } .fonte-preview-bar a:hover { border-color: #fff; } .fonte-preview-bar a.ativo { background: #fff; color: #1c2126; border-color: #fff; font-weight: 700; } .fonte-preview-sair { border-color: transparent !important; opacity: 0.7; text-decoration: underline; } /* ---------- whatsapp flutuante / cookies ---------- */ .whatsapp-float { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 60; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; box-shadow: 0 6px 18px rgba(0,0,0,0.2); transition: transform 0.15s ease; } .whatsapp-float:hover { transform: scale(1.06); } .whatsapp-float-ping { position: absolute; inset: 0; z-index: 0; border-radius: 50%; background: #25d366; animation: whatsapp-pulse 2.2s ease-out infinite; } .whatsapp-float svg { position: relative; z-index: 1; } @keyframes whatsapp-pulse { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(1.9); opacity: 0; } } .cookie-consent { position: fixed; left: 1rem; right: 1rem; bottom: -200px; z-index: 70; max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem 1.4rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; transition: bottom 0.3s ease; } .cookie-consent.show { bottom: 1.2rem; } .cookie-consent p { margin: 0; font-size: 0.88rem; color: var(--text-muted); flex: 1; min-width: 200px; } /* ---------- animação de entrada ---------- */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; } .reveal-visible { opacity: 1; transform: none; }