. 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;
}
.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; }