/* =============================================================================
B2 Rocket Layout — Curso Adoção de Cães
Identidade medida dentro do próprio logotipo: o marrom da palavra, o laranja
da bola e o âmbar do brilho dela. O verde é o único contraponto frio e vive
na faixa do glossário.
Regra de contraste adotada aqui: o laranja vivo da bola (#ed5c2b) NÃO passa
em AA com texto branco (3,9:1). Por isso ele só aparece em borda, ícone e
título grande; o que leva texto branco usa --brl-cor, que é o mesmo laranja
escurecido e dá 5:1.
========================================================================== */
/* -------------------------------------------------------------- fontes --- */
/* As fontes são SERVIDAS PELO PRÓPRIO PLUGIN, de assets/fonts/, e não pelo
Google Fonts. Três motivos, em ordem de importância:
1. Confiabilidade. Folha externa é a primeira coisa que plugin de
otimização adia, que bloqueador corta e que rede corporativa barra — e
quando isso acontece o site inteiro cai na fonte do sistema, sem aviso.
2. Privacidade. Requisição ao Google carrega o IP do visitante junto, e
isso é assunto de LGPD.
3. Velocidade. Um domínio a menos para resolver, conectar e negociar TLS.
Baloo 2 e Nunito são OFL; as licenças estão em assets/fonts/.
Subset latin, que cobre a acentuação do português. font-display:swap faz o
texto aparecer na fonte do sistema e trocar quando a fonte chega — nunca
invisível esperando. */
@font-face{
font-family:"Baloo 2"; font-style:normal; font-weight:700; font-display:swap;
src:url("../fonts/baloo-2-latin-700-normal.woff2") format("woff2");
}
@font-face{
font-family:"Baloo 2"; font-style:normal; font-weight:800; font-display:swap;
src:url("../fonts/baloo-2-latin-800-normal.woff2") format("woff2");
}
@font-face{
font-family:Nunito; font-style:normal; font-weight:400; font-display:swap;
src:url("../fonts/nunito-latin-400-normal.woff2") format("woff2");
}
@font-face{
font-family:Nunito; font-style:normal; font-weight:600; font-display:swap;
src:url("../fonts/nunito-latin-600-normal.woff2") format("woff2");
}
@font-face{
font-family:Nunito; font-style:normal; font-weight:700; font-display:swap;
src:url("../fonts/nunito-latin-700-normal.woff2") format("woff2");
}
:root{
/* marca — do logotipo */
--brl-cor: #c2451f; /* a bola escurecida: fundo de botão, foco */
--brl-cor-viva: #ed5c2b; /* a bola: bordas, ícones, títulos grandes */
--brl-cor-escura: #9c3615; /* sombra e hover do botão */
--brl-cor-clara: #fdece4; /* fundo de realce */
--brl-marrom: #854f33; /* a palavra do logotipo: links (6,7:1) */
--brl-verde: #0f7266; /* secundária: glossário e números (5,7:1) */
--brl-sol: #f8b149; /* o brilho da bola: badges e trilha */
/* texto e fundo */
--brl-texto: #2b2019; /* quase-preto quente, puxado do marrom */
--brl-texto-fraco: #6d5a4e;
--brl-fundo: #fffdf7; /* branco quente */
--brl-fundo-alt: #fff3d6; /* faixa dos depoimentos */
--brl-fundo-menta: #e6f4ed; /* faixa do glossário */
--brl-borda: #e8e2d8;
/* tipografia — arredondada nos dois papéis, para parecerem da mesma família */
--brl-fonte: Nunito, system-ui, -apple-system, "Segoe UI", sans-serif;
--brl-fonte-titulo: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
/* medidas — raio alto, porque canto quadrado briga com letra arredondada */
--brl-largura: 1140px;
--brl-raio: 22px;
--brl-raio-p: 14px;
--brl-gap: 24px;
color-scheme: light;
}
/* ----------------------------------------------------------------- base --- */
*,*::before,*::after{ box-sizing:border-box }
/* O seletor é pesado de propósito. O tema do site continua enfileirando a
própria folha de estilo nas páginas que o layout renderiza, e as regras de
tipografia dele chegam depois desta no cascata. `html body` ganha de `body`
sozinho sem precisar de !important, e garante que a fonte do layout valha
em todo texto da página. */
html body{
margin:0;
font-family:var(--brl-fonte);
font-size:17px; line-height:1.65;
color:var(--brl-texto); background:var(--brl-fundo);
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
/* Mesma razão: o tema costuma definir font-family dos títulos. */
html body h1, html body h2, html body h3, html body h4{ font-family:var(--brl-fonte-titulo) }
html body input, html body button, html body select, html body textarea{ font-family:inherit }
h1,h2,h3,h4{
font-family:var(--brl-fonte-titulo); line-height:1.14;
margin:0 0 .4em; font-weight:800; text-wrap:balance;
}
/* O teto era 62px e jogava a manchete da home para quatro linhas na coluna de
texto do hero. 52px mantém duas ou três, e o text-wrap:balance decide onde
quebrar melhor que um fixo. */
h1{ font-size:clamp(32px,4.6vw,52px); letter-spacing:-.01em }
h2{ font-size:clamp(28px,4.2vw,44px) }
h3{ font-size:20px; font-weight:700 }
h4{ font-size:17px; font-weight:700 }
p{ margin:0 0 1em }
a{ color:var(--brl-marrom); text-decoration:none }
a:hover{ text-decoration:underline }
img{ max-width:100%; height:auto; display:block }
:focus-visible{ outline:3px solid var(--brl-verde); outline-offset:3px; border-radius:6px }
.brl-wrap{ max-width:var(--brl-largura); margin:0 auto; padding-inline:20px }
.brl-lead{ font-size:1.16em; color:var(--brl-texto-fraco); max-width:56ch }
/* Rótulo de seção. */
.brl-olho{
font-family:var(--brl-fonte-titulo); font-weight:700; font-size:14px;
letter-spacing:.09em; text-transform:uppercase; color:var(--brl-verde);
margin:0 0 .5em;
}
/* Texto só para leitor de tela. Serve para completar um rótulo curto: o botão
diz "Assistir" na tela e "Assistir o depoimento de Douglas" para quem navega
por áudio, onde quatro botões idênticos não diriam nada. */
.brl-oculto{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
/* Pular para o conteúdo: invisível até receber foco pelo teclado. */
.brl-pular{
position:absolute; left:-9999px; top:0; z-index:100;
background:var(--brl-cor); color:#fff; padding:10px 16px; border-radius:0 0 12px 0;
}
.brl-pular:focus{ left:0; top:0 }
/* --------------------------------------------------------------- botões --- */
.brl-btn{
display:inline-flex; align-items:center; gap:9px;
font-family:var(--brl-fonte-titulo); font-weight:700; font-size:16px; line-height:1.2;
padding:13px 26px; border-radius:999px; text-decoration:none; cursor:pointer;
border:2px solid var(--brl-cor-viva); color:var(--brl-cor); background:transparent;
transition:transform .14s, background .14s, color .14s, box-shadow .14s;
}
.brl-btn:hover{ text-decoration:none; transform:translateY(-2px); background:var(--brl-cor-clara) }
.brl-btn:active{ transform:translateY(1px) }
.brl-btn svg{ width:18px; height:18px; flex:none }
/* Sombra dura embaixo: o botão parece um adesivo e afunda ao ser clicado.
A bola herda `color` do botão, então aqui ela fica branca; as costuras
passam a laranja para a bola não sumir no fundo laranja. */
.brl-btn-cta{
background:var(--brl-cor); color:#fff; box-shadow:0 6px 0 var(--brl-cor-escura);
--brl-bola-linha:var(--brl-cor);
}
.brl-btn-cta:hover{ background:#a93a19; color:#fff; box-shadow:0 8px 0 #8a2f12 }
.brl-btn-cta:active{ box-shadow:0 3px 0 var(--brl-cor-escura) }
.brl-btn-verde{
border-color:var(--brl-verde); background:var(--brl-verde); color:#fff;
box-shadow:0 6px 0 #0a564e;
}
.brl-btn-verde:hover{ background:#0c6156; color:#fff }
/* ------------------------------------------------------------ cabeçalho --- */
.brl-hdr{
position:sticky; top:0; z-index:50;
background:rgba(255,253,247,.93); backdrop-filter:blur(10px);
border-bottom:1px solid var(--brl-borda);
}
.brl-hdr-in{ display:flex; align-items:center; gap:18px; min-height:72px }
.brl-logo{ display:inline-flex; align-items:center; flex:none; text-decoration:none }
.brl-logo:hover{ text-decoration:none }
.brl-logo img{
height:46px; width:auto; max-height:46px;
/* O logotipo é JPEG de fundo branco opaco. multiply apaga o branco sobre o
branco quente da página e preserva o traço. Com um PNG transparente,
apague esta linha. */
mix-blend-mode:multiply;
}
.brl-logo-txt{ font-family:var(--brl-fonte-titulo); font-weight:800; font-size:20px; color:var(--brl-texto) }
@media (max-width:560px){ .brl-logo img{ height:38px } }
.brl-nav{ margin-left:auto }
.brl-menu{ display:flex; gap:22px; list-style:none; margin:0; padding:0; align-items:center }
/* O :not(.brl-btn) não é enfeite: `.brl-menu a` pesa classe+elemento e venceria
`.brl-btn-cta`, que é só classe — o botão pediria branco e sairia na cor do
menu. Mesma armadilha vale para qualquer contêiner que estilize `a`. */
.brl-menu a:not(.brl-btn){ color:var(--brl-texto); font-size:15.5px; font-weight:600 }
.brl-menu a:not(.brl-btn):hover{ color:var(--brl-cor); text-decoration:none }
.brl-menu li{ position:relative }
.brl-menu .sub-menu{
position:absolute; top:100%; left:0; min-width:220px;
display:none; list-style:none; margin:0; padding:8px 0;
background:var(--brl-fundo); border:2px solid var(--brl-borda);
border-radius:var(--brl-raio-p); box-shadow:0 14px 30px rgba(43,32,25,.1);
}
.brl-menu li:hover > .sub-menu, .brl-menu li:focus-within > .sub-menu{ display:block }
.brl-menu .sub-menu a{ display:block; padding:9px 16px }
.brl-burger{
display:none; background:none; border:0; cursor:pointer;
width:44px; height:44px; padding:10px; margin-left:auto;
}
.brl-burger span{ display:block; height:3px; background:var(--brl-texto); margin:5px 0; border-radius:3px }
.brl-gaveta{ display:none; border-bottom:1px solid var(--brl-borda); background:var(--brl-fundo) }
.brl-gaveta[hidden]{ display:none }
.brl-gaveta.is-on{ display:block }
.brl-gaveta ul{ list-style:none; margin:0; padding:8px 20px 20px }
.brl-gaveta li{ border-bottom:1px solid var(--brl-borda) }
.brl-gaveta a{ display:block; padding:14px 0; color:var(--brl-texto); font-weight:700 }
.brl-gaveta .sub-menu{ padding:0 0 8px 16px }
@media (max-width:980px){
.brl-nav, .brl-hdr-in .brl-btn-cta{ display:none }
.brl-burger{ display:block }
}
/* --------------------------------------------------------------- seções --- */
.brl-sec{ padding-block:clamp(56px,8vw,96px) }
.brl-sec-menta{ background:var(--brl-fundo-menta) }
.brl-sec-sol{ background:var(--brl-fundo-alt) }
/* Onda entre faixas: a cor da faixa de baixo vai em `color` no contêiner. */
.brl-onda{ display:block; width:100%; height:48px }
.brl-onda path{ fill:currentColor }
.brl-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--brl-gap) }
.brl-card{
display:block; padding:24px; border:2px solid var(--brl-borda);
border-radius:var(--brl-raio); background:#fff; color:inherit;
transition:transform .16s, box-shadow .16s, border-color .16s;
}
a.brl-card:hover{ border-color:var(--brl-cor-viva); text-decoration:none; transform:translateY(-3px) }
/* Capa gerada para post sem imagem destacada: bloco de cor com um desenho
grande, em vez de um card furado. A cor e o desenho saem do ID do post,
então o mesmo post tem sempre a mesma capa.
position:absolute + inset:0 em vez de width/height 100%: como item de grid,
a altura percentual NÃO resolve contra o contêiner — o bloco estica com o
conteúdo e vaza da moldura, e o overflow:hidden corta o desenho. Com
posicionamento absoluto a altura é definida, e o % do