. Sem JavaScript, coerente com a nota de
implementação do conceito ("componentes nativos e CSS puro").
--------------------------------------------------------------------------- */
.bb-menu { position: relative; }
@media (min-width: 860px) { .bb-menu { display: none; } }
.bb-menu > summary {
list-style: none;
cursor: pointer;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid var(--bb-paper-200);
border-radius: var(--bb-radius-sm);
background: var(--bb-white);
}
.bb-menu > summary::-webkit-details-marker { display: none; }
/* Ícone desenhado em CSS: três filetes petróleo. */
.bb-menu__bars {
position: relative;
display: block;
width: 20px;
height: 2px;
background: var(--bb-petro-800);
border-radius: 1px;
}
.bb-menu__bars::before,
.bb-menu__bars::after {
content: "";
position: absolute;
left: 0;
width: 20px;
height: 2px;
background: var(--bb-petro-800);
border-radius: 1px;
}
.bb-menu__bars::before { top: -6px; }
.bb-menu__bars::after { top: 6px; }
.bb-menu[open] > summary .bb-menu__bars { background: transparent; }
.bb-menu[open] > summary .bb-menu__bars::before { top: 0; rotate: 45deg; }
.bb-menu[open] > summary .bb-menu__bars::after { top: 0; rotate: -45deg; }
.bb-menu__panel {
position: absolute;
right: 0;
top: calc(100% + 12px);
min-width: 232px;
display: grid;
gap: 2px;
padding: 10px;
background: var(--bb-white);
border: 1px solid var(--bb-paper-200);
border-radius: var(--bb-radius);
box-shadow: var(--bb-shadow-md);
}
.bb .bb-menu__panel a {
display: block;
padding: 12px 14px;
border-radius: var(--bb-radius-sm);
font: 500 var(--bb-text-body)/1.3 var(--bb-font-body);
color: var(--bb-ink-700);
text-decoration: none;
}
.bb .bb-menu__panel a:hover {
background: var(--bb-petro-50);
color: var(--bb-petro-700);
}
.bb .bb-menu__panel a[aria-current="page"] {
color: var(--bb-petro-700);
background: var(--bb-petro-50);
}
/* A lista dentro do painel é vertical, ao contrário da .bb-nav de desktop. */
.bb-menu__list { display: grid; }
/* ============================================================================
3. HERO DE SITE
============================================================================ */
/* [PREVIEW] Duas colunas a partir de 1000px. */
.bb-hero__grid {
display: grid;
gap: clamp(36px, 4vw, 56px);
align-items: start;
}
@media (min-width: 1000px) {
.bb-hero__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}
/* [PREVIEW] Superfície clara alternativa de seção. */
.bb-section--paper { background: var(--bb-paper-50); }
/* [PREVIEW] Contexto escuro: inverte rótulos de botão e microcopy.
Existe no CSS de LP apenas acoplado a .bb-cta-final; aqui vira utilitário
independente, como no preview, para servir qualquer bloco petróleo. */
.bb-on-dark .bb-btn--secondary {
color: var(--bb-white);
box-shadow: inset 0 0 0 2px rgba(196, 220, 228, .5);
}
.bb-on-dark .bb-btn--secondary:hover {
background: var(--bb-white);
color: var(--bb-petro-900);
box-shadow: inset 0 0 0 2px var(--bb-white);
transform: translateY(-2px);
}
.bb .bb-on-dark .bb-btn--link { color: var(--bb-petro-300); }
.bb .bb-on-dark .bb-cta-note { color: var(--bb-mist-200); }
/* [PREVIEW] Botão compacto (cabeçalho e cards). */
.bb-btn--sm {
font-size: 0.9375rem;
padding: 12px 18px;
border-radius: var(--bb-radius-sm);
}
/* ============================================================================
4. CARD DE DESTAQUE E DEPOIMENTO [PREVIEW]
============================================================================ */
/* Card em superfície petróleo. Usado no card de oferta da home. */
.bb-card--feature {
border-color: var(--bb-petro-700);
background:
radial-gradient(24rem 15rem at 100% -32%, rgba(26, 130, 153, .40), transparent 62%),
linear-gradient(150deg, var(--bb-petro-900) 0%, var(--bb-petro-950) 100%);
box-shadow: var(--bb-shadow-lg);
}
.bb-card--feature h3 { color: var(--bb-white); }
.bb-card--feature p { color: var(--bb-mist-200); }
.bb-card--feature .bb-badge {
color: var(--bb-petro-300);
border-color: rgba(116, 201, 220, .36);
background: rgba(116, 201, 220, .12);
}
.bb-card--feature .bb-btn { margin-top: 20px; }
/* Depoimento: filete petróleo à esquerda, avatar de iniciais em gradiente. */
.bb-quote { max-width: 860px; margin-inline: auto; }
.bb-quote blockquote {
font: 600 clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem)/1.4 var(--bb-font-head);
letter-spacing: -0.012em;
color: var(--bb-ink-900);
padding-left: clamp(20px, 3vw, 32px);
border-left: 3px solid var(--bb-petro-500);
}
.bb-quote figcaption {
margin-top: 26px;
display: flex;
align-items: center;
gap: 14px;
padding-left: clamp(20px, 3vw, 32px);
}
.bb-quote__avatar {
width: 52px;
height: 52px;
flex-shrink: 0;
border-radius: var(--bb-radius-sm);
display: grid;
place-items: center;
font: 700 1rem/1 var(--bb-font-head);
color: var(--bb-white);
background: linear-gradient(140deg, var(--bb-petro-700), var(--bb-petro-950));
}
.bb-quote__who strong {
display: block;
font: 600 1rem/1.3 var(--bb-font-body);
color: var(--bb-ink-900);
}
.bb-quote__who span {
font-size: var(--bb-text-small);
color: var(--bb-ink-500);
}
/* ============================================================================
5. MOLDURA DE IMAGEM [NOVO]
Resposta ao risco 4 do conceito: todo render e print de Revit tem fundo
branco frio ou cinza e destoa sobre o papel quente. Toda imagem de conteúdo
recebe superfície branca própria e filete de papel, virando "prancha".
============================================================================ */
.bb-frame {
background: var(--bb-white);
border: 1px solid var(--bb-paper-200);
border-radius: var(--bb-radius-sm);
overflow: hidden;
}
.bb .bb-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ============================================================================
6. CARD DE PRODUTO DA HOME [NOVO]
Deriva de .bb-card. Media em moldura, altura de imagem fixa por proporção
para não gerar CLS, e link fixado na base (mesmo padrão de .bb-team__card).
============================================================================ */
.bb-prodcard {
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
}
.bb-prodcard__media {
aspect-ratio: 16 / 9;
background: var(--bb-white);
border-bottom: 1px solid var(--bb-paper-200);
}
.bb .bb-prodcard__media img {
width: 100%;
height: 100%;
object-fit: contain;
background: var(--bb-white);
padding: 14px;
}
.bb-prodcard__body {
display: flex;
flex-direction: column;
flex: 1 0 auto;
padding: 24px 22px 26px;
}
.bb-prodcard__body p {
font-size: var(--bb-text-small);
line-height: 1.65;
margin-top: 8px;
}
.bb-prodcard .bb-btn--link { margin-top: auto; padding-top: 18px; }
/* ============================================================================
7. LISTAGEM DE ARTIGOS [NOVO]
Vocabulário de ficha técnica: metadados em monoespaçada (conceito §4),
categoria como marcador quadrado, título em Archivo.
============================================================================ */
.bb-postgrid {
display: grid;
gap: 24px 20px;
grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
}
.bb-postcard {
display: flex;
flex-direction: column;
background: var(--bb-white);
border: 1px solid var(--bb-paper-200);
border-radius: var(--bb-radius);
overflow: hidden;
transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.bb-postcard:hover {
box-shadow: var(--bb-shadow-md);
transform: translateY(-3px);
border-color: var(--bb-petro-100);
}
/* É um ou um , por isso precisa de display explícito. */
.bb-postcard__media {
display: block;
aspect-ratio: 16 / 9;
background: var(--bb-paper-100);
border-bottom: 1px solid var(--bb-paper-200);
}
.bb .bb-postcard__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Sem imagem destacada: campo de prancha com o monograma implícito. */
.bb-postcard__media--empty {
background:
radial-gradient(18rem 10rem at 80% -20%, rgba(26, 130, 153, .30), transparent 64%),
linear-gradient(150deg, var(--bb-petro-800) 0%, var(--bb-petro-950) 100%);
}
.bb-postcard__body {
display: flex;
flex-direction: column;
flex: 1 0 auto;
padding: 22px 22px 24px;
}
.bb-postcard__title {
font: 600 1.1875rem/1.32 var(--bb-font-head);
letter-spacing: -0.012em;
color: var(--bb-ink-900);
margin-bottom: 10px;
text-wrap: balance;
}
.bb .bb-postcard__title a { color: inherit; text-decoration: none; }
.bb .bb-postcard__title a:hover { color: var(--bb-petro-700); }
.bb-postcard__excerpt {
font-size: var(--bb-text-small);
line-height: 1.65;
color: var(--bb-ink-700);
}
/* Ordem do card, igual à do tema antigo: metadados acima do título, link de
leitura sempre colado na base, para os cards da grelha terminarem alinhados. */
.bb-postcard .bb-postmeta { margin-bottom: 12px; }
.bb-postcard__more { margin-top: auto; padding-top: 18px; }
/* Metadados: mono, caixa alta discreta. Serve card, artigo e arquivo. */
.bb-postmeta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 12px;
font: 500 0.75rem/1.4 var(--bb-font-mono);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--bb-ink-500);
}
.bb-postmeta__cat {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--bb-petro-600);
}
.bb-postmeta__cat::before {
content: "";
width: 8px;
height: 8px;
border: 2px solid var(--bb-petro-500);
border-radius: 2px;
}
.bb .bb-postmeta a { color: inherit; text-decoration: none; }
.bb .bb-postmeta a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* ============================================================================
8. CABEÇALHO DE PÁGINA E TRILHA [NOVO]
============================================================================ */
.bb-pagehead {
background:
radial-gradient(40rem 22rem at 88% -34%, rgba(26, 130, 153, .16), transparent 64%),
linear-gradient(180deg, var(--bb-paper-50) 0%, var(--bb-white) 100%);
border-bottom: 1px solid var(--bb-paper-200);
padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
}
.bb-pagehead h1 { max-width: 22ch; }
.bb-pagehead__lead {
font-size: var(--bb-text-lead);
line-height: 1.6;
color: var(--bb-ink-700);
max-width: 58ch;
margin-top: 18px;
}
.bb-pagehead .bb-postmeta { margin-top: 22px; }
.bb-breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font: 500 0.75rem/1.4 var(--bb-font-mono);
letter-spacing: .04em;
color: var(--bb-ink-500);
margin-bottom: 18px;
}
.bb .bb-breadcrumb a { color: var(--bb-petro-700); text-decoration: none; }
.bb .bb-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bb-breadcrumb__sep { color: var(--bb-paper-200); }
/* ============================================================================
9. CORPO DE ARTIGO [NOVO]
Aplicado ao HTML que vem do editor, por isso estiliza elementos nus dentro
do escopo .bb-prose. Medida de leitura 72ch, entrelinha 1,75.
============================================================================ */
.bb-prose {
max-width: 72ch;
margin-inline: auto;
font-size: var(--bb-text-body);
line-height: 1.75;
color: var(--bb-ink-700);
}
.bb-prose > * + * { margin-top: 1.15em; }
.bb-prose h2 {
font-size: var(--bb-text-h2);
margin-top: 2em;
padding-top: 0.6em;
border-top: 2px solid var(--bb-petro-500);
}
.bb-prose h3 { font-size: var(--bb-text-h3); margin-top: 1.8em; }
.bb-prose h4 {
font: 600 1.0625rem/1.4 var(--bb-font-head);
color: var(--bb-ink-900);
margin-top: 1.6em;
}
/* Títulos rebaixados por bb_normaliza_titulos() (functions.php): a TAG muda
para consertar o esboço do documento (um único h1 por página, sem saltos),
e a classe bb-como-hN devolve a aparência do nível ORIGINAL, para a
correção ser só de estrutura. Duas classes no seletor vencem as regras por
elemento acima (0,2,0 contra 0,1,1). Em uso nas páginas 90 e 84, cujo h1
interno vem do shortcode do plugin RGPD. */
.bb-prose .bb-como-h1 {
font: 800 var(--bb-text-h1)/1.2 var(--bb-font-head);
letter-spacing: -0.018em;
color: var(--bb-ink-900);
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.bb-prose > * + .bb-como-h1 { margin-top: 1.15em; }
.bb-prose .bb-como-h2 {
font: 700 var(--bb-text-h2)/1.2 var(--bb-font-head);
letter-spacing: -0.014em;
color: var(--bb-ink-900);
margin-top: 2em;
padding-top: 0.6em;
border-top: 2px solid var(--bb-petro-500);
}
.bb-prose .bb-como-h3 {
font: 600 var(--bb-text-h3)/1.2 var(--bb-font-head);
letter-spacing: -0.008em;
color: var(--bb-ink-900);
margin-top: 1.8em;
padding-top: 0;
border-top: 0;
}
.bb-prose .bb-como-h4 {
font: 600 1.0625rem/1.4 var(--bb-font-head);
color: var(--bb-ink-900);
margin-top: 1.6em;
padding-top: 0;
border-top: 0;
}
.bb .bb-prose a {
color: var(--bb-petro-700);
text-decoration: underline;
text-underline-offset: 3px;
}
.bb .bb-prose a:hover { color: var(--bb-petro-600); }
.bb-prose ul, .bb-prose ol { padding-left: 1.4em; }
.bb-prose ul { list-style: disc; }
.bb-prose ol { list-style: decimal; }
.bb-prose li::marker { color: var(--bb-petro-600); }
.bb-prose li + li { margin-top: 0.5em; }
.bb-prose strong { color: var(--bb-ink-900); font-weight: 600; }
/* Imagem de artigo em moldura (risco 4 do conceito). */
.bb .bb-prose img {
width: 100%;
height: auto;
background: var(--bb-white);
border: 1px solid var(--bb-paper-200);
border-radius: var(--bb-radius-sm);
}
.bb-prose figure { margin-block: 1.8em; }
.bb-prose figcaption {
margin-top: 10px;
font: 500 var(--bb-text-small)/1.5 var(--bb-font-body);
color: var(--bb-ink-500);
text-align: center;
}
.bb-prose blockquote {
padding-left: clamp(18px, 2.5vw, 26px);
border-left: 3px solid var(--bb-petro-500);
font: 500 var(--bb-text-lead)/1.55 var(--bb-font-body);
color: var(--bb-ink-900);
}
.bb-prose code {
font: 500 0.9em/1.5 var(--bb-font-mono);
background: var(--bb-paper-100);
border: 1px solid var(--bb-paper-200);
border-radius: 4px;
padding: 2px 6px;
color: var(--bb-petro-800);
}
.bb-prose pre {
background: var(--bb-petro-950);
color: var(--bb-mist-200);
border-radius: var(--bb-radius);
padding: 20px 22px;
overflow-x: auto;
font: 500 0.875rem/1.7 var(--bb-font-mono);
}
.bb-prose pre code { background: none; border: 0; padding: 0; color: inherit; }
.bb-prose hr {
border: 0;
border-top: 1px solid var(--bb-paper-200);
margin-block: 2.4em;
}
/* Tabela larga rola dentro do próprio contêiner, nunca a página. */
.bb-prose table {
width: 100%;
border-collapse: collapse;
font-size: var(--bb-text-small);
}
.bb-prose th, .bb-prose td {
border: 1px solid var(--bb-paper-200);
padding: 10px 14px;
text-align: left;
}
.bb-prose th {
background: var(--bb-paper-100);
font: 600 var(--bb-text-small)/1.4 var(--bb-font-body);
color: var(--bb-ink-900);
}
.bb-scroll-x { overflow-x: auto; }
/* Vídeo e iframe responsivos. */
.bb-prose iframe {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
border: 0;
border-radius: var(--bb-radius);
}
/* [NOVO] Banner de consultoria injetado no meio do artigo.
Recebe a mesma moldura das demais imagens, porque a arte tem fundo próprio
e destoaria do papel quente sem filete. */
.bb-inline-banner {
margin-block: 2.4em;
max-width: none;
}
.bb .bb-inline-banner img {
width: 100%;
border-radius: var(--bb-radius);
border: 1px solid var(--bb-paper-200);
}
/* ============================================================================
10. PAGINAÇÃO [NOVO]
Numeração em monoespaçada, coerente com .bb-step e .bb-postmeta.
============================================================================ */
.bb-pagination {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 48px;
}
.bb .bb-pagination .page-numbers {
display: grid;
place-items: center;
min-width: 44px;
height: 44px;
padding-inline: 12px;
border: 1px solid var(--bb-paper-200);
border-radius: var(--bb-radius-sm);
background: var(--bb-white);
font: 600 0.875rem/1 var(--bb-font-mono);
color: var(--bb-petro-700);
text-decoration: none;
transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.bb .bb-pagination .page-numbers:hover {
background: var(--bb-petro-50);
border-color: var(--bb-petro-100);
}
.bb .bb-pagination .page-numbers.current {
background: var(--bb-petro-900);
border-color: var(--bb-petro-900);
color: var(--bb-white);
}
.bb .bb-pagination .page-numbers.dots {
border-color: transparent;
background: none;
color: var(--bb-ink-500);
}
/* ============================================================================
11. RODAPÉ DE SITE [PREVIEW]
O .bb-footer do arquivo base é a versão curta e centralizada das LPs.
Aqui ele vira o rodapé completo do preview: alinhado à esquerda, com
lockup do logotipo, links e linha legal separada por filete.
============================================================================ */
.bb-footer__row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 24px;
text-align: left;
}
.bb-footer__links {
display: flex;
flex-wrap: wrap;
gap: 8px 24px;
}
.bb-footer__legal {
margin-top: 26px;
padding-top: 20px;
border-top: 1px solid rgba(196, 220, 228, .16);
text-align: left;
}
/* Anula o padding curto da versão de LP quando o rodapé é o de site. */
.bb-footer:has(.bb-footer__row) { padding-block: 48px 34px; }
.bb .bb-footer a { color: var(--bb-mist-200); text-decoration: none; }
.bb .bb-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.bb-footer__lockup { display: inline-flex; align-items: center; gap: 12px; }
/* ============================================================================
12. FORMULÁRIO (Contact Form 7 e busca) [NOVO]
============================================================================ */
.bb-field {
display: block;
width: 100%;
font: 400 var(--bb-text-body)/1.5 var(--bb-font-body);
color: var(--bb-ink-900);
background: var(--bb-white);
border: 1px solid var(--bb-paper-200);
border-radius: var(--bb-radius-sm);
padding: 13px 15px;
}
.bb-field:focus { border-color: var(--bb-petro-500); outline: none; box-shadow: 0 0 0 3px rgba(26, 130, 153, .18); }
.bb-searchform { display: flex; gap: 10px; flex-wrap: wrap; }
.bb-searchform .bb-field { flex: 1 1 220px; }
/* ============================================================================
14. CORREÇÕES DE PLUGIN DE TERCEIRO [NOVO]
============================================================================ */
/* Barra de cookies do plugin wp_rgpd.
O CSS dela é inline e hardcoded, e não declara font-family nenhuma. Sob o
tema antigo ela herdava a Poppins da regra global `* { font-family }` do
wpavenger. Sem essa regra global, a barra cai no serifado padrão do
navegador e aparece em Times, exatamente o mesmo defeito já visto nas LPs.
Dois seletores porque o plugin imprime o texto em elementos variados. */
#myModalrgpd,
#myModalrgpd * {
font-family: var(--bb-font-body) !important;
}
/* ============================================================================
15. TIRA DE IMAGENS DA HOME [NOVO]
As três linhas do repeater blocos_slider da página 300 têm título e texto
vazios: são três imagens e nada mais. O tema antigo montava um carrossel em
JavaScript. Aqui a mesma sequência vira uma tira com rolagem por encaixe,
em CSS puro, sem script e sem legenda inventada.
============================================================================ */
.bb-slider {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(min(100%, 460px), 1fr);
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
padding-bottom: 12px;
}
.bb-slider__item {
scroll-snap-align: center;
border: 1px solid var(--bb-paper-200);
border-radius: var(--bb-radius);
background: var(--bb-white);
overflow: hidden;
}
.bb .bb-slider__item img {
display: block;
width: 100%;
height: auto;
}
.bb-slider__item h3,
.bb-slider__item p { padding: 18px 20px 0; }
.bb-slider__item > *:last-child { margin-bottom: 0; }
.bb-slider:focus-visible {
outline: 3px solid var(--bb-petro-500);
outline-offset: 4px;
}
/* ============================================================================
16. UTILITÁRIOS DE SITE
============================================================================ */
/* Separador de título dentro de uma grelha (bloco tipo 1 do repeater). */
.bb-grid-full { grid-column: 1 / -1; }
/* Retrato dentro de bloco centralizado: o componente do DS trava a largura em
160px, mas sem margem automática a imagem encosta na esquerda. */
.bb-center .bb-author__photo { display: block; margin-inline: auto; }
.bb-mt-8 { margin-top: 64px; }
.bb-stack > * + * { margin-top: 20px; }
.bb-flow-actions { display: flex; flex-wrap: wrap; gap: 14px; }
/* Fecho de bloco fora de uma .bb-section (ex.: a paginação da home, que vive
num container solto entre duas seções e precisa do próprio respiro). */
.bb-pb-section { padding-bottom: var(--bb-space-section); }
/* ============================================================================
17. CARROSSEL DE DESTAQUES DA HOME
----------------------------------------------------------------------------
Faixa petróleo de largura total, primeira seção depois do cabeçalho.
Três decisões de engenharia, todas anti-CLS:
1. Os slides ficam empilhados na MESMA célula de grade (grid-area 1/1).
A altura da faixa é a do slide mais alto e sai do layout CSS, antes de
qualquer JavaScript. Nada salta quando o script carrega.
2. O primeiro slide já chega do servidor com .is-active: sem JS, a home
mostra o slide um, estático e completo. A troca é só crossfade de
opacity + visibility (visibility tira os slides ocultos da ordem de
tabulação e da árvore de acessibilidade, sem JS gerenciar tabindex).
3. Os controles são inúteis sem JS, então ficam visibility:hidden até o
script marcar .bb-carousel--js. visibility, e não display, porque o
espaço deles precisa estar reservado desde o primeiro paint.
Âmbar segue exclusivo de CTA de conversão: o dot ativo e o foco no escuro
usam branco, e o botão do slide de artigo é o secundário on-dark.
============================================================================ */
.bb-carousel {
color: var(--bb-white);
background:
radial-gradient(44rem 26rem at 78% -22%, rgba(26,130,153,.36), transparent 62%),
radial-gradient(34rem 22rem at 6% 118%, rgba(13,85,104,.5), transparent 60%),
linear-gradient(160deg, var(--bb-petro-900) 0%, var(--bb-petro-950) 100%);
}
.bb-carousel :focus-visible { outline-color: var(--bb-white); }
.bb-carousel__track { display: grid; }
.bb-carousel__slide {
grid-area: 1 / 1;
opacity: 0;
visibility: hidden;
transition: opacity .55s ease, visibility .55s;
}
.bb-carousel__slide.is-active { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
.bb-carousel__slide { transition: none; }
}
.bb-carousel__grid {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: 32px 56px;
align-items: center;
padding-block: clamp(2.75rem, 1.9rem + 3.5vw, 4.5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
@media (max-width: 860px) {
.bb-carousel__grid { grid-template-columns: 1fr; }
}
/* Slide só de texto (sem imagem): coluna única centralizada. A altura da
faixa não muda, porque ela é a do slide mais alto da pilha (os slides com
imagem); o conteúdo deste se centra verticalmente nesse espaço. */
.bb-carousel__grid--solo {
grid-template-columns: 1fr;
height: 100%;
align-content: center;
}
.bb .bb-carousel__grid--solo .bb-carousel__title { max-width: 26ch; }
.bb-carousel__grid--solo .bb-carousel__lead { max-width: 56ch; }
.bb-carousel .bb-eyebrow { color: var(--bb-petro-300); }
.bb-carousel .bb-eyebrow::before { border-color: var(--bb-petro-400); }
.bb .bb-carousel__title {
color: var(--bb-white);
font-size: var(--bb-text-h2);
letter-spacing: -0.016em;
max-width: 22ch;
}
.bb-carousel__lead {
color: var(--bb-mist-200);
font-size: var(--bb-text-lead);
line-height: 1.55;
max-width: 52ch;
margin-top: 16px;
}
.bb-carousel__slide .bb-btn { margin-top: 28px; }
.bb-carousel__media { max-width: 520px; }
.bb .bb-carousel__media img {
width: 100%;
height: auto;
border-radius: var(--bb-radius-lg);
box-shadow: var(--bb-shadow-lg);
}
@media (max-width: 860px) {
.bb-carousel__media { max-width: 440px; }
}
/* Imagem em retrato (mockup de capa de produto). Os slides dividem a mesma
área do grid, então a faixa toda tem a altura do mais alto: uma capa em pé
ocupando os 520px da coluna esticaria o carrossel inteiro em cerca de 300px.
O limite menor mantém a faixa na altura de antes e ainda deixa a capa
legível. Centralizada na própria coluna no desktop, porque sobra espaço ao
lado; no empilhamento mobile ela volta a alinhar com o texto. */
.bb-carousel__media--retrato {
max-width: 300px;
margin-inline: auto;
}
@media (max-width: 860px) {
.bb-carousel__media--retrato {
max-width: 240px;
margin-inline: 0;
}
}
/* Controles: setas, dots e pausa. Altura reservada mesmo sem JS. */
.bb-carousel__controls {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding-bottom: 26px;
visibility: hidden;
}
.bb-carousel--js .bb-carousel__controls { visibility: visible; }
.bb-carousel__arrow {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--bb-mist-200);
cursor: pointer;
transition: background .2s ease, color .2s ease;
}
.bb-carousel__arrow:hover {
background: rgba(196,220,228,.16);
color: var(--bb-white);
}
.bb-carousel__arrow svg { width: 18px; height: 18px; }
.bb-carousel__dot {
display: grid;
place-items: center;
width: 28px;
height: 44px; /* alvo de toque confortável; o ponto é só o desenho */
border: 0;
background: transparent;
cursor: pointer;
padding: 0;
}
.bb-carousel__dot::before {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(196,220,228,.42);
transition: background .2s ease, transform .2s ease;
}
.bb-carousel__dot:hover::before { background: var(--bb-mist-200); }
.bb-carousel__dot[aria-current="true"]::before {
background: var(--bb-white);
transform: scale(1.25);
}
/* ----------------------------------------------------------------------------
Variante --frases: carrossel claro de frases curtas (home, seção 3).
Substitui a antiga tira de JPGs do avenger-slider; a frase é texto real,
transcrita das imagens (ver comentário no front-page.php). Fundo papel
para alternar com a faixa petróleo do carrossel de destaques.
---------------------------------------------------------------------------- */
.bb-carousel--frases {
color: var(--bb-ink-700);
background: linear-gradient(180deg, var(--bb-paper-50) 0%, var(--bb-white) 100%);
}
.bb-carousel--frases :focus-visible { outline-color: var(--bb-petro-500); }
.bb-carousel--frases .bb-carousel__grid {
padding-block: clamp(2.5rem, 1.8rem + 3vw, 4rem) clamp(1rem, .75rem + 1vw, 1.5rem);
}
.bb .bb-carousel__frase {
font-family: var(--bb-font-head);
font-size: var(--bb-text-h2);
font-weight: 700;
letter-spacing: -0.014em;
line-height: 1.3;
color: var(--bb-petro-950);
max-width: 26ch;
margin-inline: auto;
}
.bb-carousel--frases .bb-carousel__arrow { color: var(--bb-ink-500); }
.bb-carousel--frases .bb-carousel__arrow:hover {
background: var(--bb-petro-50);
color: var(--bb-petro-900);
}
.bb-carousel--frases .bb-carousel__dot::before { background: rgba(18,34,42,.18); }
.bb-carousel--frases .bb-carousel__dot:hover::before { background: var(--bb-mist-400); }
.bb-carousel--frases .bb-carousel__dot[aria-current="true"]::before { background: var(--bb-petro-800); }
/* ============================================================================
[NOVO 2026-08-13] COMENTÁRIOS: AVATAR DA LISTA
Regra única e inevitável do comments.php: o gravatar de 40px que o
wp_list_comments imprime dentro de .bb-prose não é imagem de artigo, e sem
este ajuste a moldura .bb .bb-prose img (width 100%) o esticaria à largura
da coluna. Seletor (0,3,1) para vencer os (0,2,1) da moldura.
============================================================================ */
.bb .bb-prose img.avatar {
width: 40px;
height: 40px;
}
/* ============================================================================
[NOVO 2026-08-13] ÍCONES DE REDES SOCIAIS DO RODAPÉ
Glifos oficiais como SVG inline (fill=currentColor), sem Font Awesome:
o tema eliminou as três cargas dele e quatro ícones não justificam voltar.
Monocromático claro sobre o petróleo do rodapé; branco no hover/foco.
Área de toque de 44px (WCAG 2.5.8). 2 classes no link: o reset
.bb :where(a) disputa a cor.
============================================================================ */
.bb-social {
display: flex;
gap: 12px;
margin-top: 28px;
}
.bb .bb-social__link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
color: var(--bb-mist-200);
border: 1px solid color-mix(in oklch, var(--bb-mist-400), transparent 60%);
transition: color 0.15s ease, border-color 0.15s ease;
}
.bb .bb-social__link:hover,
.bb .bb-social__link:focus-visible {
color: var(--bb-white);
border-color: var(--bb-white);
}
.bb .bb-social__link svg {
width: 20px;
height: 20px;
display: block;
}
/* ============================================================================
[NOVO 2026-08-13] FORMULÁRIO DE CONTATO (Contact Form 7, página /contato/)
O CF7 emite