/* ============================================================================
NAVBAR MITRA — COMPONENTE UNICO
----------------------------------------------------------------------------
Um arquivo. Desktop e mobile. Tema claro e tema escuro. Nada fora daqui.
COMO USAR (2 classes, a pagina NAO troca de tema):
...
...
ou
...
...
Sao duas classes porque o overlay mobile e IRMAO do no DOM, nao filho.
Cada pagina declara o tema que ela ja tem hoje.
CANONICO
tema-claro = site/index.html (a home)
tema-escuro = site/canais.html
Onde outra pagina divergia, o valor da home prevaleceu.
ORGANIZACAO
1. BASE — layout, tamanhos, transicoes (escrito UMA vez)
2. TEMA CLARO — so o que muda de cor
3. TEMA ESCURO — so o que muda de cor
4. @media 768 — mobile, base + os dois temas, DENTRO deste arquivo
5. @media 480 — telas estreitas
SO EXISTEM 2 TEMAS (decisao do Laercio, 06/09): claro e escuro, cada um cobrindo
desktop e mobile. NAO existe "tema-hero". As 12 paginas que pareciam um 3o tema
(casos-de-uso/concessionarias, casos-de-uso/experts-em-financas-c, orcamento/* e
as EN) sao TEMA CLARO — conferido no CSS delas: --bg #fff, --text #0F0F18, hover
rgba(0,0,0,.04). O que elas tinham de proprio (accent #1E40AF/#2563EB/#7839ee, o
par .navbar:not(.scrolled)/.navbar.scrolled, .btn-login com cor propria) e
DIVERGENCIA a corrigir, nao variante a preservar.
SEM var() DE PAGINA. Todas as cores estao escritas literais aqui dentro, com os
valores canonicos da home. Motivo: um componente que le o :root de cada pagina
NAO e um componente unico — ele muda de cor conforme a pagina. Foi exatamente o
que fez a concessionarias ficar com o link ativo em #1E40AF no topo e em #01D0FA
(ciano de tema escuro sobre barra branca) quando rolava.
UNICA MUDANCA PROPOSITAL vs. o site de hoje: o ESTADO DE TOQUE do menu mobile.
antes claro rgba(0,0,0,0.04) -> contraste 1,09:1 (invisivel no toque)
antes escuro rgba(255,255,255,0.04) -> contraste 1,08:1 (invisivel no toque)
agora claro rgba(0,0,0,0.16) -> contraste 1,45:1
agora escuro rgba(255,255,255,0.14) -> contraste 1,44:1
Vale tambem nos gatilhos de grupo (Casos de Uso, Recursos, Ferramentas).
ARMADILHA DE ESPECIFICIDADE (o motivo dos :not(.btn-demo))
`.mobile-nav-overlay.tema-X a` e (0,3,0) e passaria por cima de
`.mobile-nav-overlay .btn-demo` (0,2,0), apagando o branco do CTA e
deixando "QUERO UMA DEMO" cinza ao ser tocado. Por isso todo seletor de
tema que pinta `a` dentro do overlay carrega `:not(.btn-demo)`.
========================================================================== */
/* ══════════════════════ 1. BASE (comum aos dois temas) ═══════════════════ */
/* ---- barra ---- */
.navbar{
position:fixed;
top:0;
left:0;
right:0;
z-index:100;
background:transparent;
backdrop-filter:none;
-webkit-backdrop-filter:none;
border-bottom:none;
margin:0 auto;
max-width:100%;
transition:transform,opacity,background,background-color,color,border-color,box-shadow,filter 0.4s cubic-bezier(0.4,0,0.2,1);
}
.navbar.scrolled{
top:12px;
max-width:1200px;
left:0;
right:0;
margin:0 auto;
border-radius:16px;
backdrop-filter:blur(20px) saturate(1.4);
-webkit-backdrop-filter:blur(20px) saturate(1.4);
}
.navbar-inner{
max-width:1200px;
margin:0 auto;
padding:0 32px;
display:flex;
align-items:center;
justify-content:space-between;
height:64px;
}
/* ---- logo ---- */
.navbar-logo{
display:flex;
align-items:center;
gap:8px;
text-decoration:none;
color:#0E1428;
}
.navbar-logo svg.brand-logo{
height:26px;
width:auto;
display:block;
}
.navbar-logo .logo-diamond{
transform-origin:86.5px 86.5px;
transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.navbar-logo:hover .logo-diamond{
transform:rotate(180deg);
}
.navbar-logo svg{
width:28px;
height:28px;
}
.navbar-logo span{
font-size:1.3rem;
font-weight:700;
letter-spacing:-0.02em;
}
/* ---- links do desktop ---- */
.navbar-links{
display:flex;
align-items:center;
gap:2px;
list-style:none;
}
.navbar-links li{position:relative}
.navbar-links a{
text-decoration:none;
font-size:0.85rem;
font-weight:500;
padding:8px 10px;
border-radius:8px;
transition:color 0.2s,background 0.2s;
}
.navbar-links a.active{
font-weight:600;
}
.navbar-links .dropdown-trigger{
display:flex;
align-items:center;
gap:4px;
cursor:pointer;
}
.navbar-links .dropdown-trigger svg{
width:14px;
height:14px;
opacity:0.5;
transition:transform 0.2s;
}
.navbar-links li:hover .dropdown-trigger svg{
transform:rotate(180deg);
}
/* ---- mega menu (branco nos dois temas, igual ao site de hoje) ---- */
.mega-menu{
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%) translateY(4px);
min-width:280px;
background:#fff;
border:1px solid #E7E8F0;
border-radius:16px;
box-shadow:0 12px 48px rgba(14,20,40,0.1),0 2px 8px rgba(14,20,40,0.04);
padding:20px;
opacity:0;
pointer-events:none;
transition:opacity 0.2s ease,transform 0.2s ease;
z-index:200;
}
.mega-menu::before{
content:'';
position:absolute;
top:-16px;
left:0;
right:0;
height:16px;
}
.navbar-links li:hover .mega-menu{
opacity:1;
pointer-events:all;
transform:translateX(-50%) translateY(0);
}
.mega-menu-title{
font-size:0.68rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.1em;
color:#8B90A8;
padding:0 8px 12px;
border-bottom:1px solid #E7E8F0;
margin-bottom:8px;
}
.mega-menu-item{
display:flex;
align-items:center;
gap:12px;
padding:10px 8px;
border-radius:10px;
text-decoration:none;
color:#0E1428;
transition:background 0.15s;
}
.mega-menu-item:hover{
background:#F9F9FD;
}
.mega-menu-icon{
width:36px;
height:36px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.mega-menu-icon svg{
width:18px;
height:18px;
stroke-width:1.8;
}
.mega-menu-icon.violet{background:rgba(120,57,238,0.08);color:#7839EE}
.mega-menu-icon.blue{background:rgba(21,112,239,0.08);color:#1570EF}
.mega-menu-icon.cyan{background:rgba(6,174,212,0.08);color:#0891B2}
.mega-menu-icon.green{background:rgba(18,183,106,0.08);color:#12B76A}
.mega-menu-icon.orange{background:rgba(247,144,9,0.08);color:#F79009}
.mega-menu-icon.pink{background:rgba(221,37,144,0.08);color:#DD2590}
.mega-menu-text{display:flex;flex-direction:column}
.mega-menu-text strong{
font-size:0.85rem;
font-weight:600;
color:#0E1428;
line-height:1.3;
}
.mega-menu-text span{
font-size:0.72rem;
color:#8B90A8;
font-weight:400;
margin-top:1px;
}
/* ---- seletor de idioma ---- */
.lang-switcher{
display:flex;
align-items:center;
gap:2px;
background:rgba(14,20,40,0.06);
border-radius:8px;
padding:3px;
}
.lang-btn{
padding:5px 10px;
font-size:0.72rem;
font-weight:600;
letter-spacing:0.04em;
text-decoration:none;
border-radius:6px;
transition:transform,opacity,background,background-color,color,border-color,box-shadow,filter .2s;
}
/* a sombra do pill ativo vale nos DOIS temas (e o que o site faz hoje) */
.lang-btn.active{
box-shadow:0 1px 4px rgba(0,0,0,0.08);
}
/* ---- acoes (login + CTA) ---- */
.nav-actions{
display:flex;
align-items:center;
gap:8px;
}
.btn-login{
display:inline-flex;
align-items:center;
padding:8px 20px;
background:transparent;
color:#0E1428;
font-size:0.75rem;
font-weight:500;
letter-spacing:0.04em;
text-transform:uppercase;
text-decoration:none;
border-radius:8px;
border:1.5px solid #C7CBE0;
cursor:pointer;
transition:transform,opacity,background,background-color,color,border-color,box-shadow,filter 0.2s ease;
}
.btn-login:hover{
border-color:#424967;
background:rgba(0,0,0,0.02);
transform:translateY(-1px);
}
.btn-demo{
display:inline-flex;
align-items:center;
padding:8px 20px;
background:linear-gradient(90deg,#7839EE 0%,#2E90FA 50%,#06AED4 100%);
color:#fff;
font-size:0.75rem;
font-weight:500;
letter-spacing:0.04em;
text-transform:uppercase;
text-decoration:none;
border-radius:8px;
border:none;
cursor:pointer;
transition:opacity 0.2s,transform 0.15s;
}
.btn-demo:hover{
opacity:0.9;
transform:translateY(-1px);
}
/* ---- hamburger ---- */
.navbar-hamburger{
display:none;
flex-direction:column;
justify-content:center;
gap:5px;
width:44px;
height:44px;
padding:10px;
cursor:pointer;
border:none;
background:none;
-webkit-tap-highlight-color:transparent;
}
.navbar-hamburger span{
display:block;
width:22px;
height:2px;
border-radius:2px;
transition:transform 0.3s ease,opacity 0.3s ease;
}
.navbar-hamburger.open span:nth-child(1){
transform:translateY(7px) rotate(45deg);
}
.navbar-hamburger.open span:nth-child(2){
opacity:0;
}
.navbar-hamburger.open span:nth-child(3){
transform:translateY(-7px) rotate(-45deg);
}
/* ---- overlay mobile ---- */
.mobile-nav-overlay{
display:none;
position:fixed;
/* top = ALTURA DA NAVBAR do breakpoint. Fica sincronizado nos 3 pontos
(64 / 56 / 52). Antes era fixo em 56px e sobrava fresta no mobile. */
top:64px;
left:0;
right:0;
bottom:0;
z-index:99;
padding:24px 20px;
flex-direction:column;
gap:8px;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
opacity:0;
transform:translateY(-10px);
transition:opacity 0.3s ease,transform 0.3s ease;
}
.mobile-nav-overlay.open{
opacity:1;
transform:translateY(0);
}
.mobile-nav-overlay a{
display:flex;
align-items:center;
padding:16px 20px;
font-size:1.05rem;
font-weight:600;
text-decoration:none;
border-radius:12px;
transition:background 0.2s;
min-height:52px;
}
.mobile-nav-overlay .btn-demo{
margin-top:16px;
justify-content:center;
padding:16px 24px;
font-size:0.85rem;
color:#fff;
min-height:52px;
}
.mobile-nav-group{
display:flex;
flex-direction:column;
}
.mobile-nav-trigger{
display:flex;
align-items:center;
justify-content:space-between;
padding:16px 20px;
font-size:1.05rem;
font-weight:600;
text-decoration:none;
border-radius:12px;
cursor:pointer;
min-height:52px;
transition:background 0.2s;
}
.mobile-nav-trigger svg{
width:16px;
height:16px;
color:#8B90A8;
transition:transform 0.25s;
}
.mobile-nav-group.open .mobile-nav-trigger svg{transform:rotate(180deg)}
.mobile-nav-sub{
max-height:0;
overflow:hidden;
transition:max-height 0.3s ease;
padding-left:12px;
}
.mobile-nav-group.open .mobile-nav-sub{
max-height:400px;
}
.mobile-nav-sub a{
padding:12px 20px !important;
font-size:0.92rem !important;
font-weight:500 !important;
min-height:44px !important;
display:flex;
align-items:center;
gap:10px;
}
.mobile-nav-sub-icon{
width:28px;
height:28px;
border-radius:8px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.mobile-nav-sub-icon svg{width:14px;height:14px;stroke-width:1.8}
.mobile-nav-sub-icon.violet{background:rgba(120,57,238,0.08);color:#7839EE}
.mobile-nav-sub-icon.blue{background:rgba(21,112,239,0.08);color:#1570EF}
.mobile-nav-sub-icon.cyan{background:rgba(6,174,212,0.08);color:#0891B2}
.mobile-nav-sub-icon.green{background:rgba(18,183,106,0.08);color:#12B76A}
.mobile-nav-sub-icon.orange{background:rgba(247,144,9,0.08);color:#F79009}
.mobile-nav-sub-icon.pink{background:rgba(221,37,144,0.08);color:#DD2590}
/* ══════════════════════════ 2. TEMA CLARO ════════════════════════════════ */
.navbar.tema-claro.scrolled{
background:rgba(255,255,255,0.6);
border:1px solid rgba(255,255,255,0.45);
box-shadow:0 4px 24px rgba(0,0,0,0.06),0 1px 4px rgba(0,0,0,0.02);
}
.navbar.tema-claro .navbar-links a{color:#424967}
.navbar.tema-claro .navbar-links a:hover{color:#0E1428;background:rgba(0,0,0,0.04)}
.navbar.tema-claro .navbar-links a.active{color:#1570EF}
.navbar.tema-claro .lang-btn{color:#424967}
.navbar.tema-claro .lang-btn:hover{color:#0E1428}
.navbar.tema-claro .lang-btn.active{background:#fff;color:#0E1428}
.navbar.tema-claro .navbar-hamburger span{background:#0E1428}
.mobile-nav-overlay.tema-claro{background:rgba(248,249,252,0.995)}
.mobile-nav-overlay.tema-claro a:not(.btn-demo),
.mobile-nav-overlay.tema-claro .mobile-nav-trigger{color:#0E1428}
.mobile-nav-overlay.tema-claro a:not(.btn-demo):hover,
.mobile-nav-overlay.tema-claro a:not(.btn-demo):active,
.mobile-nav-overlay.tema-claro .mobile-nav-trigger:hover,
.mobile-nav-overlay.tema-claro .mobile-nav-trigger:active{background:rgba(0,0,0,0.16)}
.mobile-nav-overlay.tema-claro .mobile-nav-sub a{color:#424967 !important}
.mobile-nav-overlay.tema-claro .mobile-nav-sub a:hover{color:#0E1428 !important}
/* ══════════════════════════ 3. TEMA ESCURO ═══════════════════════════════ */
.navbar.tema-escuro.scrolled{
background:rgba(14,20,40,0.85);
border:1px solid rgba(255,255,255,0.08);
box-shadow:0 4px 32px rgba(0,0,0,0.25);
}
.navbar.tema-escuro .navbar-links a{color:rgba(255,255,255,0.7)}
.navbar.tema-escuro .navbar-links a:hover{color:#fff;background:rgba(255,255,255,0.08)}
.navbar.tema-escuro .navbar-links a.active{color:#01D0FA}
.navbar.tema-escuro .btn-login{
color:rgba(255,255,255,0.8) !important;
border-color:rgba(255,255,255,0.2) !important;
}
.navbar.tema-escuro .btn-login:hover{
color:#fff !important;
border-color:rgba(255,255,255,0.4) !important;
}
.navbar.tema-escuro .lang-btn{
color:rgba(255,255,255,0.6);
border-color:rgba(255,255,255,0.15);
}
.navbar.tema-escuro .lang-btn:hover{color:#fff}
.navbar.tema-escuro .lang-btn.active{color:#fff;background:rgba(255,255,255,0.12)}
.navbar.tema-escuro .navbar-hamburger span{background:#fff}
.navbar.tema-escuro .navbar-logo svg.brand-logo .logo-text-paths path{fill:#fff}
.mobile-nav-overlay.tema-escuro{
background:rgba(10,11,26,0.98);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
}
.mobile-nav-overlay.tema-escuro a:not(.btn-demo),
.mobile-nav-overlay.tema-escuro .mobile-nav-trigger{color:rgba(255,255,255,0.85)}
.mobile-nav-overlay.tema-escuro a:not(.btn-demo):hover,
.mobile-nav-overlay.tema-escuro a:not(.btn-demo):active,
.mobile-nav-overlay.tema-escuro .mobile-nav-trigger:hover,
.mobile-nav-overlay.tema-escuro .mobile-nav-trigger:active{background:rgba(255,255,255,0.14)}
.mobile-nav-overlay.tema-escuro .mobile-nav-sub a{color:rgba(255,255,255,0.6) !important}
.mobile-nav-overlay.tema-escuro .mobile-nav-sub a:hover{color:#fff !important}
/* ═══════════════════ 4. MOBILE — @media (max-width:768px) ════════════════ */
@media (max-width:768px){
/* base */
.navbar-inner{padding:0 20px;height:56px}
.navbar-links{display:none}
.nav-actions{display:none !important}
.navbar-inner > .btn-demo{display:none}
.navbar-hamburger{display:flex;order:3}
.lang-switcher{
order:2;
margin-left:auto;
margin-right:8px;
padding:2px;
border-radius:6px;
gap:1px;
}
.lang-btn{padding:4px 8px;font-size:0.65rem;border-radius:5px}
.btn-demo{padding:8px 16px;font-size:0.7rem}
.mobile-nav-overlay{display:flex;top:56px}
.mobile-nav-overlay:not(.open){pointer-events:none}
.navbar.scrolled{top:8px;max-width:calc(100% - 24px);border-radius:14px}
/* tema escuro — a barra encorpa um pouco no mobile */
.navbar.tema-escuro.scrolled{
background:rgba(14,20,40,0.92);
border:1px solid rgba(255,255,255,0.08);
}
}
/* ═══════════════════ 5. ESTREITO — @media (max-width:480px) ══════════════ */
@media (max-width:480px){
.navbar-inner{padding:0 12px;height:52px}
.mobile-nav-overlay{top:52px}
.navbar-logo img{height:22px !important}
.btn-demo{padding:7px 12px;font-size:0.65rem}
.lang-switcher{margin-right:4px;padding:2px}
.lang-btn{padding:3px 6px;font-size:0.6rem}
}