/* ==========================================================================
Base do blog do Centro Evolvere.
Substitui o `styles.css` do site do NAMTAB, do qual o `blog.css` dependia.
Nao e um tema novo: o `blog.css` consome 19 tokens CSS e nenhuma cor solta,
entao redefinir os tokens aqui reveste o blog inteiro com a identidade da
Evolvere sem tocar naquelas 475 linhas.
Os valores vieram medidos dos HTML de `deploy/`, nao estimados.
As fontes sao as 4 familias ja auto-hospedadas na raiz do site; o blog as
reaproveita em vez de duplicar 564 KB, e de quebra divide o cache com ele.
========================================================================== */
/* As fontes entram por no (ver seo/Head.php): @import as
serializaria atras do CSS, atrasando o primeiro texto na tela. */
:root{
/* --- marca ----------------------------------------------------------- */
--navy:#14264D; /* azul institucional */
--navy-2:#0C1730; /* fundo do rodape */
--accent:#F15A24; /* laranja Evolvere */
--accent-2:#D8481A; /* laranja em hover */
--gold:#C9A75A;
/* --- texto ----------------------------------------------------------- */
--ink:#1D1D1B;
--muted:#3A3A36;
--muted-2:#54544D;
/* --- superficies ----------------------------------------------------- */
--bg:#FBFAF7;
--soft:#F6F4EF;
--card:#FFFFFF;
--line:rgba(29,29,27,0.10);
--line-2:rgba(29,29,27,0.18);
/* --- forma ----------------------------------------------------------- */
--radius:12px;
--radius-lg:20px;
--shadow-sm:0 1px 2px rgba(20,38,77,0.06);
--shadow:0 6px 20px rgba(20,38,77,0.08);
--shadow-lg:0 16px 40px rgba(20,38,77,0.14);
/* --- tipografia ------------------------------------------------------ */
--fonte:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,sans-serif;
--fonte-titulo:'Newsreader',Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;
background:var(--bg);
color:var(--ink);
font-family:var(--fonte);
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto}
/* Titulos no serif do site. O peso 400 e proposital: o Newsreader carrega a
autoridade pelo desenho, e negrito nele fica pesado em corpo grande. */
h1,h2,h3{
font-family:var(--fonte-titulo);
font-weight:400;
line-height:1.16;
letter-spacing:-0.02em;
color:var(--navy);
margin:0 0 .5em;
text-wrap:balance;
}
h4,h5,h6{
font-family:var(--fonte);
font-weight:700;
line-height:1.3;
color:var(--navy);
margin:0 0 .5em;
}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-2)}
p{margin:0 0 1em}
mark{
background:rgba(241,90,36,0.18);
color:inherit;
padding:0 .12em;
border-radius:3px;
}
hr{border:none;border-top:1px solid var(--line);margin:2rem 0}
::selection{background:rgba(241,90,36,0.22)}
:focus-visible{
outline:2px solid var(--accent);
outline-offset:2px;
border-radius:4px;
}
/* --- utilitarios que o `blog.css` e os templates esperam ---------------- */
.wrap{
width:100%;
max-width:1240px;
margin:0 auto;
padding:0 20px;
}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
background:var(--accent);
color:#fff;
font-family:var(--fonte);
font-size:15px;
font-weight:600;
line-height:1;
padding:14px 26px;
border:1px solid transparent;
border-radius:100px;
cursor:pointer;
text-decoration:none;
white-space:nowrap;
box-shadow:0 1px 2px rgba(241,90,36,0.30);
transition:background .18s,transform .18s,box-shadow .18s,color .18s,border-color .18s;
}
.btn:hover{background:var(--accent-2);color:#fff;transform:translateY(-1px)}
.btn-sm{font-size:13.5px;padding:11px 18px}
.btn-dark{background:var(--navy);box-shadow:none}
.btn-dark:hover{background:var(--navy-2)}
.btn-ghost{
background:transparent;
color:var(--navy);
border-color:var(--line-2);
box-shadow:none;
}
.btn-ghost:hover{background:var(--soft);color:var(--navy);border-color:var(--navy)}
/* O amarelo do NAMTAB nao existe na Evolvere. O papel dele — chamar atencao
sem ser o CTA primario — fica com o dourado da marca. */
.btn-yellow{background:var(--gold);color:var(--navy);box-shadow:none}
.btn-yellow:hover{background:#BE9740;color:var(--navy)}
.badge{
display:inline-flex;
align-items:center;
gap:8px;
background:var(--soft);
color:var(--muted);
font-size:12.5px;
font-weight:600;
letter-spacing:.02em;
padding:7px 14px;
border:1px solid var(--line);
border-radius:100px;
}
.b-dot{
flex:none;
width:7px;
height:7px;
border-radius:50%;
background:var(--accent);
}
.chip{
display:inline-flex;
align-items:center;
background:var(--card);
color:var(--muted);
font-size:13px;
font-weight:600;
padding:6px 13px;
border:1px solid var(--line);
border-radius:100px;
text-decoration:none;
transition:border-color .16s,color .16s,background .16s;
}
.chip:hover{border-color:var(--accent);color:var(--accent);background:#fff}
/* ==========================================================================
Cabecalho e rodape do site, transcritos.
Os valores (70px de altura, rgba do fundo, raios, cores) foram lidos de
SiteHeader.dc.html e SiteFooter.dc.html, nao estimados.
Breakpoint: o site troca para o menu mobile em 980px com 6 itens. Aqui sao
7 (entrou "Blog"), entao a troca acontece em 1080px. Se mudar rotulo ou
incluir item, remeca no navegador — nao estime.
========================================================================== */
.ev-topo{
position:sticky;top:0;z-index:50;
background:rgba(246,244,239,.94);
backdrop-filter:blur(12px);
border-bottom:1px solid var(--line);
}
.ev-nav{
height:70px;
display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.ev-marca{display:flex;align-items:center;gap:12px;color:var(--navy);flex:none;min-width:0}
.ev-marca img{height:44px;width:auto;display:block;flex:none}
.ev-marca-sub{
font-size:11.5px;line-height:1.25;font-weight:600;
letter-spacing:.04em;text-transform:uppercase;color:var(--navy);
}
.ev-menu{
display:flex;align-items:center;gap:18px;
list-style:none;margin:0;padding:0;justify-content:flex-end;
}
.ev-menu a{font-size:14.5px;font-weight:500;color:var(--muted)}
.ev-menu a:hover{color:var(--navy)}
.ev-menu a.is-ativo{color:var(--navy);font-weight:700}
.ev-cta{flex:none}
/* Menu mobile por : abre sem uma linha de JavaScript. */
.ev-mobile{display:none;flex:none;position:relative}
.ev-mobile summary{
list-style:none;width:42px;height:42px;border-radius:10px;
border:1px solid var(--line-2);background:#fff;cursor:pointer;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.ev-mobile summary::-webkit-details-marker{display:none}
.ev-mobile summary span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink)}
.ev-mobile-painel{
position:absolute;top:52px;right:0;width:min(84vw,300px);
background:var(--soft);border:1px solid var(--line);border-radius:14px;
box-shadow:0 16px 34px rgba(29,29,27,.12);
padding:10px;display:flex;flex-direction:column;
}
.ev-mobile-painel a{
padding:12px 12px;font-size:15.5px;font-weight:500;color:var(--muted);
border-radius:9px;
}
.ev-mobile-painel a:hover{background:rgba(29,29,27,.05);color:var(--navy)}
.ev-mobile-painel a.is-ativo{color:var(--navy);font-weight:700}
.ev-mobile-cta{margin-top:10px;justify-content:center;color:#fff}
.ev-mobile-cta:hover{color:#fff}
@media (max-width:1080px){
.ev-menu,.ev-cta{display:none}
.ev-mobile{display:block}
}
@media (max-width:420px){
.ev-marca-sub{display:none}
}
/* --- rodape ------------------------------------------------------------ */
.ev-rodape{
background:var(--navy-2);color:#A9B2C6;margin-top:56px;
position:relative;overflow:hidden;
}
.ev-rodape::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(1000px 420px at 15% -10%,rgba(30,80,160,.30),transparent 70%),
radial-gradient(700px 380px at 92% 8%,rgba(241,90,36,.13),transparent 70%);
}
.ev-rodape-inner{position:relative;padding-top:64px;padding-bottom:34px}
.ev-rodape-topo{
display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.ev-rodape-logo{height:58px;width:auto;display:block;filter:brightness(0) invert(1)}
.ev-rodape-acoes{display:flex;gap:12px;flex-wrap:wrap}
.ev-btn-linha,.ev-btn-claro{
display:inline-flex;align-items:center;
font-size:15px;padding:14px 26px;border-radius:100px;
transition:background .18s,border-color .18s,transform .18s,box-shadow .18s;
}
.ev-btn-linha{color:#fff;font-weight:600;border:1px solid rgba(255,255,255,.28)}
.ev-btn-linha:hover{color:#fff;background:rgba(255,255,255,.08);border-color:#fff}
.ev-btn-claro{background:#fff;color:var(--accent);font-weight:700;padding:14px 28px}
.ev-btn-claro:hover{color:var(--accent);transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,0,0,.35)}
.ev-rodape-linha{height:1px;background:rgba(255,255,255,.12);margin:34px 0 46px}
.ev-rodape-cols{
display:grid;gap:40px;
grid-template-columns:minmax(260px,330px) repeat(3,minmax(150px,1fr));
}
.ev-rodape-titulo{font-family:var(--fonte-titulo);font-size:25px;line-height:1.24;color:#fff;letter-spacing:-.01em}
.ev-rodape-titulo-sm{font-size:24px}
.ev-rodape-news p{font-size:14.5px;line-height:1.6;margin-top:14px;color:#8E9AB2}
.ev-rodape-rotulo{
font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--accent);margin-bottom:18px;
}
.ev-rodape-lista{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0;padding:0;font-size:14.5px;color:#C2CAD9}
.ev-rodape-lista a{color:#C2CAD9;transition:color .16s}
.ev-rodape-lista a:hover{color:#fff}
.ev-rodape-end{font-size:14.5px;line-height:1.65;color:#C2CAD9;margin:0}
.ev-news-form{
margin-top:22px;display:flex;align-items:center;gap:10px;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
border-radius:100px;padding:6px 6px 6px 20px;
}
.ev-news-form input[type=email]{
flex:1;min-width:0;background:transparent;border:none;outline:none;
color:#fff;font-size:14.5px;padding:12px 0;font-family:inherit;
}
.ev-news-form input[type=email]::placeholder{color:#8E9AB2}
.ev-news-form button{
flex:none;width:42px;height:42px;border-radius:50%;border:none;
background:var(--accent);color:#fff;font-size:16px;cursor:pointer;
display:flex;align-items:center;justify-content:center;transition:background .18s;
}
.ev-news-form button:hover{background:var(--accent-2)}
.ev-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ev-news-msg{font-size:13px;margin-top:10px;font-weight:600;min-height:1em}
.ev-news-msg.is-ok{color:#8CC63F}
.ev-news-msg.is-erro{color:#F5A88A}
.ev-rodape-faixa{
margin-top:52px;padding-top:34px;border-top:1px solid rgba(255,255,255,.12);
display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));align-items:center;
}
.ev-rodape-nota{font-size:14px;color:#8E9AB2;margin-top:6px}
.ev-rodape-item{display:flex;align-items:center;gap:14px}
.ev-rodape-item strong{display:block;font-size:15.5px;color:#fff}
.ev-rodape-item span:not(.ev-rodape-icone),.ev-rodape-item a{display:block;font-size:14px;color:#A9B2C6;margin-top:3px}
.ev-rodape-item a:hover{color:#fff}
.ev-rodape-icone{
flex:none;width:52px;height:52px;border-radius:50%;background:var(--accent);
display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;margin-top:0;
}
.ev-rodape-fim{
margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);
font-size:13.5px;color:#8E9AB2;
}
@media (max-width:900px){
.ev-rodape-cols{grid-template-columns:1fr 1fr}
.ev-rodape-inner{padding-top:48px}
}
@media (max-width:600px){
.ev-rodape-cols{grid-template-columns:1fr}
.ev-rodape-topo{flex-direction:column;align-items:flex-start}
}