/** * Página — Parceiro (Link na Bio) * Hub de contato B2B pra Instagram bio + QR code (cartão de visita / caixa * de envio). Header reaproveita o .brd-header--minimal (ver header.php). * Prefixo: brd-pc-* * * @package BR_Distribuidora */ /* ══ Reset container Astra ══ */ .page-template-page-parceiro .ast-container, .page-template-page-parceiro .entry-content, .page-template-page-parceiro .ast-article-single, .page-template-page-parceiro .ast-single-post { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; float: none !important; } .page-template-page-parceiro .site-content, .page-template-page-parceiro #primary, .page-template-page-parceiro .ast-article-single, .page-template-page-parceiro .hentry { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; border-top: none !important; border-bottom: none !important; } .page-template-page-parceiro .site-content { background-color: transparent !important; } /* O do WP é branco por padrão e nunca é coberto por completo pelo conteúdo — normalmente invisível, mas no bounce/rubber-band scroll do Safari/WebKit (iPhone, inclusive o navegador interno do Instagram) esse fundo aparece por um instante ao puxar além do limite da página, criando uma faixa branca no topo/final. */ body.page-template-page-parceiro { background-color: var(--brd-azul-escuro); } html:has(body.page-template-page-parceiro) { background-color: var(--brd-azul-escuro); } /* ══ Página ══ */ /* Mesmo fundo de .brd-ca-hero (central-de-ajuda.css) — radiais + textura de linhas diagonais repetidas + degradê vertical mais escuro no topo. */ .brd-pc-page { display: block; min-height: 100vh; background-color: var(--brd-azul-escuro); background-image: radial-gradient(ellipse at 50% -20%, rgba(255, 255, 255, 0.07) 0%, transparent 65%), radial-gradient(ellipse at 50% 50%, rgba(32, 107, 179, 0.22) 0%, transparent 70%), repeating-linear-gradient( 45deg, rgba(32, 107, 179, 0.07) 0px, rgba(32, 107, 179, 0.07) 1px, transparent 1px, transparent 22px ), linear-gradient(180deg, #0f2440 0%, #183357 55%, #183357 100%); } .brd-pc-wrap { max-width: 480px; margin: 0 auto; padding: 0 20px; } /* ══ Hero ══ */ .brd-pc-hero { padding: max(56px, env(safe-area-inset-top) + 24px) 0 36px; text-align: center; animation: brd-pc-fade-up 0.5s ease both; } .brd-pc-logo { display: inline-block; max-width: 200px; height: auto; margin-bottom: 18px; } .brd-pc-tagline { font-family: var(--brd-font-family); color: rgba(244, 238, 215, 0.82); font-size: 15px; line-height: 1.5; margin: 0; } /* ══ Botões ══ */ .brd-pc-links { padding-bottom: max(48px, env(safe-area-inset-bottom) + 24px); } .brd-pc-links .brd-pc-wrap { display: flex; flex-direction: column; gap: 12px; } .brd-pc-btn { position: relative; display: flex; align-items: center; gap: 14px; background: rgba(244, 238, 215, 0.06); border: 1px solid rgba(244, 238, 215, 0.14); border-radius: 18px; /* padding-left reserva o espaço do slot de ícone (60px), que fica colado nas bordas esquerda/cima/baixo via position:absolute abaixo. */ padding: 8px 16px 8px 72px; min-height: 56px; text-decoration: none; overflow: hidden; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; animation: brd-pc-fade-up 0.5s ease both; } .brd-pc-btn:hover, .brd-pc-btn:focus-visible { transform: translateY(-2px); background: rgba(244, 238, 215, 0.12); border-color: rgba(244, 238, 215, 0.28); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2); } .brd-pc-btn--primary { background: linear-gradient(135deg, var(--brd-azul-claro) 0%, #2c85d6 100%); border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 6px 20px rgba(32, 107, 179, 0.45); } .brd-pc-btn--primary:hover, .brd-pc-btn--primary:focus-visible { background: linear-gradient(135deg, #2678c2 0%, #3691e0 100%); border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 8px 26px rgba(32, 107, 179, 0.55); } .brd-pc-btn--primary .brd-pc-btn__label { color: #ffffff; } /* Slot de vidro fosco pro ícone, à esquerda — mesma linguagem do pseudo-botão dos cards (.brd-pc-card__glass), só que com ícone em vez de texto e do lado esquerdo em vez de embaixo. Colado nas 3 bordas (o overflow:hidden do .brd-pc-btn corta ele nos cantos arredondados, sem precisar calcular border-radius composto). */ .brd-pc-btn__icon { position: absolute; left: 0; top: 0; bottom: 0; width: 60px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; /* Fundo verde (cor da marca) em vez do vidro fosco off-white padrão — ícone branco sobre verde tinha mais contraste que branco sobre vidro claro translúcido. */ background: rgba(22, 171, 50, 0.9); border-right: 1px solid rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .brd-pc-btn__icon img { width: 32px; height: 32px; object-fit: contain; } .brd-pc-btn__label { flex: 1; font-family: var(--brd-font-family); font-weight: 600; font-size: 16px; color: var(--brd-off-white); } .brd-pc-btn__chevron { flex-shrink: 0; color: rgba(244, 238, 215, 0.4); transition: transform 0.15s ease, color 0.15s ease; } .brd-pc-btn:hover .brd-pc-btn__chevron, .brd-pc-btn:focus-visible .brd-pc-btn__chevron { transform: translateX(3px); color: rgba(244, 238, 215, 0.75); } .brd-pc-btn--primary .brd-pc-btn__chevron { color: rgba(255, 255, 255, 0.65); } .brd-pc-btn { animation-delay: 0.05s; } /* Indicador de "digitando" — 3 pontos que sobem e descem em sequência, ao lado de "Online agora". transform+opacity (compositável). */ .brd-pc-typing { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; vertical-align: middle; } .brd-pc-typing span { width: 5px; height: 5px; border-radius: 50%; background: #25D366; animation: brd-pc-typing-bounce 1.2s ease-in-out infinite; } .brd-pc-typing span:nth-child(1) { animation-delay: 0s; } .brd-pc-typing span:nth-child(2) { animation-delay: 0.15s; } .brd-pc-typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes brd-pc-typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .brd-pc-typing span { animation: none; opacity: 1; } } /* ══ Grid de Cards ══ */ .brd-pc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 14px; } .brd-pc-card { position: relative; display: flex; align-items: center; justify-content: center; /* Altura fixa (não aspect-ratio) — assim o card --wide, com o dobro da largura, fica com a MESMA altura dos demais, não proporcional. */ height: clamp(160px, 42vw, 200px); border-radius: 20px; background: rgba(244, 238, 215, 0.06); border: 1px solid rgba(244, 238, 215, 0.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; animation: brd-pc-fade-up 0.5s ease both; /* Sem overflow:hidden aqui — fica no .brd-pc-card__clip (abaixo). Um filho (ex: o ::after do neon) com box-shadow que "vaza" seria cortado pelo overflow do PAI; a box-shadow do próprio elemento nunca é cortada por ele mesmo, então isso só importa pro pseudo-elemento do neon. */ } /* Recorta o conteúdo interno (fotos, ícones, cantos do glass) nos limites arredondados do card, sem cortar a sombra neon (que é de um pseudo-elemento do .brd-pc-card, um nível acima deste). */ .brd-pc-card__clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; display: flex; align-items: center; justify-content: center; /* Centraliza o ícone só na área acima do pseudo-botão (52px de altura, ver .brd-pc-card__glass) — não no card inteiro, senão o ícone fica puxado pra baixo em relação ao espaço livre de verdade. Não afeta o card "Produtos": a foto usa position:absolute próprio, que ignora padding do container. */ padding-bottom: 52px; } .brd-pc-card:hover, .brd-pc-card:focus-visible { transform: translateY(-3px); background: rgba(244, 238, 215, 0.12); border-color: rgba(244, 238, 215, 0.28); } .brd-pc-card--wide { grid-column: 1 / -1; /* Baixo o suficiente só pra caber ícone + 2 linhas de texto — não segue mais a altura clamp() dos cards quadrados, que é grande demais aqui. */ height: auto; min-height: 76px; } /* Card "Localização" — layout horizontal tipo o botão do WhatsApp (ícone à esquerda, texto à direita), diferente dos demais cards (ícone em cima + pseudo-botão embaixo). O ícone fica dentro de um slot de vidro fosco (.brd-pc-icon-slot) colado nas 3 bordas esquerdas — mesma peça visual do .brd-pc-card__glass, só que com ícone em vez de texto. */ .brd-pc-card--wide .brd-pc-card__clip { flex-direction: row; justify-content: flex-start; padding: 0 16px 0 76px; } .brd-pc-icon-slot { position: absolute; left: 0; top: 0; bottom: 0; width: 60px; display: flex; align-items: center; justify-content: center; background: rgba(244, 238, 215, 0.16); border-right: 1px solid rgba(244, 238, 215, 0.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .brd-pc-card--wide .brd-pc-card__icon { width: 30px; max-width: 30px; } .brd-pc-card--wide .brd-pc-card__glass { position: static; flex: 1; height: auto; justify-content: flex-start; margin-left: 14px; background: transparent; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } .brd-pc-card--wide .brd-pc-card__label { text-align: left; /* Duas linhas: "LOCALIZAÇÃO" (já vem maiúscula do PHP) em destaque + linha de complemento em texto normal — desliga o uppercase global (senão a 2ª linha também vira caixa alta). */ text-transform: none; line-height: 1.5; } .brd-pc-card--wide .brd-pc-card__label strong { font-weight: 700; letter-spacing: 0.06em; } /* Sombra azul neon pulsante — intercalada em xadrez no grid 2 colunas (a pedido do PO). Atrelada ao data-brd-link-type (não à posição), então toda vez que a ORDEM dos cards mudar, os tipos aqui precisam ser recalculados manualmente pra manter o xadrez — ver ordem atual em $brd_pc_links no PHP. Implementado com opacity num ::after (compositável, roda na GPU) em vez de animar box-shadow direto: animar box-shadow força repaint da CPU a cada frame — com vários cards pulsando ao mesmo tempo + o scroll do card de fotos, isso já causou trepidação relatada em celular (o profiler local não reproduz porque desktop tem CPU de sobra). */ .brd-pc-card[data-brd-link-type="cadastro"], .brd-pc-card[data-brd-link-type="calculadora"], .brd-pc-card[data-brd-link-type="instagram"], .brd-pc-card[data-brd-link-type="facebook"] { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14), 0 0 16px 1px rgba(32, 107, 179, 0.3); } .brd-pc-card[data-brd-link-type="cadastro"]::after, .brd-pc-card[data-brd-link-type="calculadora"]::after, .brd-pc-card[data-brd-link-type="instagram"]::after, .brd-pc-card[data-brd-link-type="facebook"]::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 26px 5px rgba(32, 107, 179, 0.6); opacity: 0; pointer-events: none; will-change: opacity; animation: brd-pc-neon-glow 3.2s ease-in-out 0.6s infinite; } @keyframes brd-pc-neon-glow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } .brd-pc-card[data-brd-link-type="cadastro"]:hover, .brd-pc-card[data-brd-link-type="cadastro"]:focus-visible, .brd-pc-card[data-brd-link-type="calculadora"]:hover, .brd-pc-card[data-brd-link-type="calculadora"]:focus-visible, .brd-pc-card[data-brd-link-type="instagram"]:hover, .brd-pc-card[data-brd-link-type="instagram"]:focus-visible, .brd-pc-card[data-brd-link-type="facebook"]:hover, .brd-pc-card[data-brd-link-type="facebook"]:focus-visible { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2), 0 0 26px 5px rgba(32, 107, 179, 0.6); } .brd-pc-card[data-brd-link-type="cadastro"]:hover::after, .brd-pc-card[data-brd-link-type="cadastro"]:focus-visible::after, .brd-pc-card[data-brd-link-type="calculadora"]:hover::after, .brd-pc-card[data-brd-link-type="calculadora"]:focus-visible::after, .brd-pc-card[data-brd-link-type="instagram"]:hover::after, .brd-pc-card[data-brd-link-type="instagram"]:focus-visible::after, .brd-pc-card[data-brd-link-type="facebook"]:hover::after, .brd-pc-card[data-brd-link-type="facebook"]:focus-visible::after { animation-play-state: paused; opacity: 1; } /* Ícone central (cards sem prévia de imagem) */ /* Ícone grande, recolorido em off-white via CSS mask (sem alterar os SVG originais, que ficam coloridos noutros usos do tema) — sem badge de fundo. */ .brd-pc-card__icon { width: 58%; max-width: 92px; aspect-ratio: 1 / 1; flex-shrink: 0; background-color: #f4eed7; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* Ícones do Instagram e Facebook menores que os demais (a pedido do PO — o quadrado do Instagram "pesa" mais visualmente que os outros contornos). */ .brd-pc-card[data-brd-link-type="instagram"] .brd-pc-card__icon, .brd-pc-card[data-brd-link-type="facebook"] .brd-pc-card__icon, .brd-pc-card[data-brd-link-type="localizacao"] .brd-pc-card__icon { width: 51%; max-width: 80px; } /* Logo do Google + estrelas — SVG bem mais largo que alto (proporção ~1.9:1), então mask-size:contain já reduz a altura sozinho dentro do slot quadrado; compensa alargando o slot pra manter o mesmo peso visual dos outros ícones. */ .brd-pc-card[data-brd-link-type="avaliacoes"] .brd-pc-card__icon { width: 76%; max-width: 124px; } /* Par de ícones lado a lado, com as cores originais deles (sem CSS mask) — usado só no card "Calculadora" (gráfico + calculadora), que veio pronto nas cores do projeto e perderia detalhe se achatado numa máscara. */ .brd-pc-card__icon-dual { display: flex; align-items: center; justify-content: center; gap: 6px; width: 86%; max-width: 156px; } .brd-pc-card__icon-dual img { width: 46%; height: auto; flex-shrink: 0; object-fit: contain; } /* Prévia de fotos — só no card "Produtos". Rolamento vertical contínuo (não crossfade): o track empilha as N fotos + 1 cópia da primeira no fim, e uma animação translada ele pra cima sem parar. Quando a cópia (idêntica à 1ª foto) alinha com o topo, o keyframe volta a 0% instantaneamente — como as duas são iguais, não dá pra perceber o corte. 100% CSS, sem JS/setInterval. */ .brd-pc-card__media { position: absolute; inset: 0; overflow: hidden; } .brd-pc-card__media-track { display: flex; flex-direction: column; width: 100%; height: 500%; /* 5 fotos (4 + 1 cópia) × 100% da altura do card */ animation: brd-pc-media-scroll 16s linear infinite; /* translate3d + will-change força a GPU a compositar o track numa camada própria, em vez de repintar a cada frame — é isso que elimina a trepidação (junto com tirar o backdrop-filter animado, ver glass abaixo). */ will-change: transform; backface-visibility: hidden; } .brd-pc-card__media-track img { width: 100%; height: 20%; /* 100% / 5 fotos */ flex-shrink: 0; object-fit: contain; /* Sem reservar espaço pro glass — a imagem ocupa quase o card todo e a parte de baixo dela fica por trás do pseudo-botão (que vem depois no DOM, então empilha por cima). */ padding: 10px; } @keyframes brd-pc-media-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -80%, 0); } } @media (prefers-reduced-motion: reduce) { .brd-pc-card__media-track { animation: none; } } /* Pseudo-botão de vidro fosco, dentro do card — mesma estrutura/geometria do CTA da pseudo-home (.brd-ph-choice-cta em front-page.php/pseudo-home.css): cantos de cima quase retos e embaixo bem arredondados, uppercase, sombra de profundidade. Cores mantidas as do glass (não as da pseudo-home, a pedido do PO). Altura fixa, igual em todos os cards (inclusive --wide), pra não variar com o texto quebrando em 1 ou 2 linhas. */ .brd-pc-card__glass { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; display: flex; align-items: center; justify-content: center; padding: 6px 10px; /* Fundo escuro (não claro) — texto branco em cima precisa de um vidro "fumê" escuro pra ter contraste; claro sobre claro translúcido lia mal. */ background: rgba(13, 13, 13, 0.45); border: 1px solid rgba(244, 238, 215, 0.18); border-left: none; border-right: none; border-bottom: none; /* Cantos inferiores casam exatamente com o border-radius do .brd-pc-card (20px). */ border-radius: 0 0 20px 20px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 20px rgba(13, 13, 13, 0.28); } .brd-pc-card__label { font-family: var(--brd-font-family); font-weight: 500; font-size: 13px; line-height: 1.25; letter-spacing: 0.04em; text-transform: uppercase; color: #ffffff; text-align: center; /* Reforço de contraste pra qualquer situação de fundo (ex: trecho claro da foto passando atrás, no card "Ver Produtos"). */ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } /* 2ª linha de um label_lines (ex: "Ver no mapa") — mantém minúsculo mesmo com o uppercase global do .brd-pc-card__label, a pedido do PO. */ .brd-pc-card__label-sub { text-transform: none; } @keyframes brd-pc-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .brd-pc-hero, .brd-pc-btn, .brd-pc-card { animation: none; } .brd-pc-card[data-brd-link-type="cadastro"]::after, .brd-pc-card[data-brd-link-type="calculadora"]::after, .brd-pc-card[data-brd-link-type="instagram"]::after, .brd-pc-card[data-brd-link-type="facebook"]::after { animation: none; opacity: 0; } } /* ══ Rodapé ══ */ .brd-pc-footer { background-color: var(--brd-azul-escuro); border-top: 1px solid rgba(244, 238, 215, 0.12); padding: 24px 0 max(24px, env(safe-area-inset-bottom)); text-align: center; } .brd-pc-footer__links { display: flex; justify-content: center; align-items: center; gap: 8px; margin-bottom: 8px; font-family: var(--brd-font-family); font-size: 14px; } .brd-pc-footer__links a { color: rgba(244, 238, 215, 0.7); text-decoration: none; } .brd-pc-footer__links a:hover, .brd-pc-footer__links a:focus-visible { color: var(--brd-off-white); text-decoration: underline; } .brd-pc-footer__links span { color: rgba(244, 238, 215, 0.3); } .brd-pc-footer__copy { font-family: var(--brd-font-family); font-size: 13px; line-height: 1.5; color: rgba(244, 238, 215, 0.55); margin: 0; } /* ══ Responsivo ══ */ @media (max-width: 480px) { .brd-pc-wrap { padding: 0 16px; } .brd-pc-hero { padding: max(40px, env(safe-area-inset-top) + 16px) 0 28px; } .brd-pc-logo { max-width: 170px; } }