/* ==========================================================================
Base do blog da Arquivotech.
Substitui o `styles.css` do site do Arquivotech, do qual o `blog.css` dependia.
Nao e um tema novo: o `blog.css` consome 19 tokens CSS, entao redefinir os
tokens aqui reveste o blog inteiro com a identidade da Arquivotech sem
reescrever aquelas 475 linhas.
Os valores vieram do `src/index.css` do site React (bloco @theme do
Tailwind 4) e dos componentes Navbar.tsx / Footer.tsx — medidos, nao
estimados. Se a marca mudar la, muda aqui.
As fontes (Inter + Outfit) entram por no , iguais as do site,
entao o blog divide o cache do Google Fonts com ele.
========================================================================== */
:root{
/* --- marca ------------------------------------------------------------
--navy e o azul institucional (#1C5FAD no @theme do site) e --navy-2 o
azul escuro (#0F3A6E), usado em hover de link e titulo de card.
O laranja e o CTA do site inteiro, entao vira --accent. */
--navy:#1C5FAD;
--navy-2:#0F3A6E;
--accent:#FF6B35;
--accent-2:#E8551F; /* laranja em hover — escurecido do #FF6B35 */
--cyan:#00B4D8; /* terceira cor da marca, usada em destaques */
--cyan-2:#48CAE4;
/* --- texto ----------------------------------------------------------- */
--ink:#1E293B; /* --color-text-main do site */
--muted:#475569;
--muted-2:#64748B; /* --color-text-muted do site */
/* --- superficies ----------------------------------------------------- */
--bg:#F8FAFC; /* --color-surface */
--soft:#EEF4FB; /* azul claro para chips e fundos suaves */
--card:#FFFFFF; /* --color-surface-alt */
--line:rgba(30,41,59,0.10);
--line-2:rgba(30,41,59,0.18);
/* --- forma ----------------------------------------------------------- */
--radius:12px;
--radius-lg:20px;
--shadow-sm:0 1px 2px rgba(28,95,173,0.06);
--shadow:0 6px 20px rgba(28,95,173,0.10);
--shadow-lg:0 16px 40px rgba(15,58,110,0.16);
/* --- tipografia ------------------------------------------------------ */
--fonte:'Inter',ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;
--fonte-titulo:'Outfit',ui-sans-serif,system-ui,sans-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 Outfit, como no site. O peso alto e a letra fechada sao o que
dao o ar tecnico da marca — nao afrouxar. */
h1,h2,h3{
font-family:var(--fonte-titulo);
font-weight:700;
line-height:1.16;
letter-spacing:-0.025em;
color:var(--ink);
margin:0 0 .5em;
text-wrap:balance;
}
h4,h5,h6{
font-family:var(--fonte-titulo);
font-weight:600;
line-height:1.3;
color:var(--ink);
margin:0 0 .5em;
}
a{color:var(--navy);text-decoration:none}
a:hover{color:var(--navy-2)}
p{margin:0 0 1em}
mark{
background:rgba(255,107,53,0.20);
color:inherit;
padding:0 .12em;
border-radius:3px;
}
hr{border:none;border-top:1px solid var(--line);margin:2rem 0}
::selection{background:rgba(0,180,216,0.24)}
: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:1280px; /* max-w-7xl do site */
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(255,107,53,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 Arquivotech nao existe na Arquivotech. O papel dele — chamar
atencao sem ser o CTA primario — fica com o ciano da marca. */
.btn-yellow{background:var(--cyan);color:#fff;box-shadow:none}
.btn-yellow:hover{background:#0096B7;color:#fff}
.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(--navy);color:var(--navy);background:#fff}
/* ==========================================================================
Cabecalho e rodape do site, transcritos.
O site e uma SPA React: o cabecalho e o rodape so existem como componentes
compilados dentro de dist/assets/*.js — nao ha HTML para incluir. Entao eles
sao transcritos aqui a partir de Navbar.tsx e Footer.tsx.
REGRA DE MANUTENCAO: mexeu no Navbar.tsx ou no Footer.tsx do site, remeca
aqui. Nao existe importacao automatica, e o blog nao renderiza React.
Medidas lidas dos componentes: barra de 80px (h-20), logo 26px, menu
trocando para mobile em 768px (md: do Tailwind).
========================================================================== */
.at-topo{
position:sticky;top:0;z-index:50;
background:rgba(255,255,255,.90);
backdrop-filter:blur(12px);
border-bottom:1px solid #F3F4F6; /* border-gray-100 do site */
}
.at-nav{
height:80px;
display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.at-marca{display:flex;align-items:center;gap:8px;flex:none;min-width:0}
.at-marca img{height:26px;width:auto;display:block;flex:none}
.at-menu{
display:flex;align-items:center;gap:32px;
list-style:none;margin:0;padding:0;justify-content:flex-end;
}
.at-menu a{font-size:15px;font-weight:500;color:var(--muted-2)}
.at-menu a:hover{color:var(--navy)}
.at-menu a.is-ativo{color:var(--navy);font-weight:700}
.at-cta{flex:none;gap:8px;padding:10px 24px}
.at-cta img{width:20px;height:20px}
/* Menu mobile por : abre sem uma linha de JavaScript. */
.at-mobile{display:none;flex:none;position:relative}
.at-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;
}
.at-mobile summary::-webkit-details-marker{display:none}
.at-mobile summary span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink)}
.at-mobile-painel{
position:absolute;top:52px;right:0;width:min(84vw,300px);
background:#fff;border:1px solid var(--line);border-radius:14px;
box-shadow:0 16px 34px rgba(30,41,59,.14);
padding:10px;display:flex;flex-direction:column;
}
.at-mobile-painel a{
padding:12px;font-size:15.5px;font-weight:500;color:var(--muted-2);
border-radius:9px;
}
.at-mobile-painel a:hover{background:var(--soft);color:var(--navy)}
.at-mobile-painel a.is-ativo{color:var(--navy);font-weight:700}
.at-mobile-cta{margin-top:10px;justify-content:center;color:#fff}
.at-mobile-cta:hover{color:#fff}
/* O site troca em 768px com 3 itens de menu. Aqui sao 4 (entrou "Blog") e o
CTA e largo, entao a troca acontece em 900px. Se mudar rotulo ou incluir
item, remeca no navegador — nao estime. */
@media (max-width:900px){
.at-menu,.at-cta{display:none}
.at-mobile{display:block}
}
/* --- rodape ------------------------------------------------------------
Fundo #1E293B (bg-text-main no site), texto cinza, quatro colunas. */
.at-rodape{
background:#1E293B;color:#9CA3AF;margin-top:64px;
}
.at-rodape-inner{padding-top:72px;padding-bottom:40px}
.at-rodape-cols{
display:grid;gap:48px;
grid-template-columns:minmax(260px,1.2fr) repeat(3,minmax(150px,1fr));
margin-bottom:56px;
}
.at-rodape-logo{
display:inline-flex;align-items:center;gap:8px;
background:#fff;padding:8px;border-radius:8px;
}
.at-rodape-logo img{height:26px;width:auto;display:block}
.at-rodape-sobre{font-size:15px;line-height:1.7;color:#9CA3AF;margin:24px 0}
.at-rodape-social{display:flex;gap:16px}
.at-rodape-social a{
width:40px;height:40px;border-radius:50%;
background:rgba(255,255,255,.10);
display:flex;align-items:center;justify-content:center;color:#fff;
transition:background .18s;
}
.at-rodape-social a:hover{background:var(--navy);color:#fff}
.at-rodape-social svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.at-rodape-titulo{
font-family:var(--fonte-titulo);font-weight:700;font-size:18px;
color:#fff;margin:0 0 24px;
}
.at-rodape-lista{list-style:none;display:flex;flex-direction:column;gap:16px;margin:0;padding:0;font-size:15px}
.at-rodape-lista a{color:#9CA3AF;transition:color .16s}
.at-rodape-lista a:hover{color:var(--cyan-2)}
.at-rodape-contato{list-style:none;display:flex;flex-direction:column;gap:16px;margin:0;padding:0;font-size:15px}
.at-rodape-contato li{display:flex;align-items:flex-start;gap:12px;color:#9CA3AF}
.at-rodape-contato svg{
width:20px;height:20px;flex:none;margin-top:2px;color:var(--accent);
fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.at-rodape-contato a{color:#9CA3AF}
.at-rodape-contato a:hover{color:var(--cyan-2)}
.at-rodape-zap{
margin-top:32px;width:100%;border-radius:12px;font-weight:700;
padding:12px 20px;box-shadow:none;
}
.at-rodape-zap img{width:24px;height:24px}
.at-rodape-fim{
border-top:1px solid #374151;padding-top:32px;
display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
font-size:14px;color:#6B7280;
}
.at-rodape-fim p{margin:0}
@media (max-width:1024px){
.at-rodape-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
.at-rodape-cols{grid-template-columns:1fr;gap:40px}
.at-rodape-inner{padding-top:56px}
.at-rodape-fim{flex-direction:column;align-items:flex-start}
}