/* ===================================================================== Casca reutilizável do reskin (ADR-037): header / nav / footer / container. Escopado sob .ds — os partials _headerReskin/_footerReskin se auto-envelopam em .ds, então a casca funciona tanto nos layouts NOVOS (body.ds) quanto nos ANTIGOS (que não têm .ds no body). Recortado de home-reskin.css (que continua com hero/seções/calc/carriers/cta). Usa os componentes/tokens do Design System (design-system*.css). ===================================================================== */ .ds .container-ds { max-width: 1160px; margin: 0 auto; padding: 0 24px; } /* ---------- Header / nav ---------- */ .ds.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.86); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); } .ds.site-header .bar { display: flex; align-items: center; gap: 28px; height: 68px; } .ds .site-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; } .ds .site-logo img { height: 34px; width: auto; } .ds .site-logo .wordmark { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--color-purple-700); letter-spacing: -0.02em; } .ds .site-logo:hover { text-decoration: none; } .ds .site-nav { display: flex; gap: 22px; margin-left: 8px; } /* `> a` (filhos diretos): não estilizar os .btn (Entrar/Criar conta) dentro de .nav-cta-mobile — a regra de link roubava a cor/peso do botão ghost no dropdown mobile. */ .ds .site-nav > a { color: var(--color-text); font-size: var(--fs-sm); font-weight: 500; } .ds .site-nav > a:hover { color: var(--color-purple-700); text-decoration: none; } .ds.site-header .actions { margin-left: auto; display: flex; align-items: center; gap: 12px; } .ds .nav-toggle { display: none; background: none; border: 0; cursor: pointer; color: var(--color-purple-700); font-size: 22px; } .ds .nav-cta-mobile { display: none; } /* CTAs Entrar/Criar conta: só aparecem no dropdown mobile */ /* ---------- Footer ---------- */ .ds.site-footer { background: var(--color-purple-900); color: rgba(255,255,255,.75); padding: 52px 0 28px; } .ds.site-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 32px; } .ds.site-footer h4 { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700; color: #fff; margin: 0 0 12px; } .ds.site-footer ul { list-style: none; padding: 0; margin: 0; } .ds.site-footer li { margin-bottom: 8px; } .ds.site-footer a { color: rgba(255,255,255,.75); font-size: var(--fs-sm); } .ds.site-footer a:hover { color: #fff; } .ds.site-footer .wordmark { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: #fff; } .ds.site-footer .bottom { border-top: 1px solid rgba(255,255,255,.14); padding-top: 20px; font-size: var(--fs-xs); } /* ---------- Responsivo (casca) ---------- */ @media (max-width: 900px) { /* barra mobile = logo + hambúrguer; nav e os CTAs "Entrar/Criar conta" migram pro dropdown (o header do public usa .btn--ghost/.btn--accent, não .btn--secondary — a regra antiga não casava e os botões vazavam à direita, empurrando o hambúrguer p/ fora e o overflow o cortava). */ .ds .site-nav { display: none; } .ds.site-header .actions .btn--ghost, .ds.site-header .actions .btn--accent { display: none; } .ds .nav-toggle { display: inline-flex; } /* footer: bloco do logo ocupa a linha inteira; colunas de links quebram abaixo. !important porque as regras defensivas (mesma especificidade, porém MAIS ABAIXO no arquivo) senão venceriam a cascata — @media não desempata especificidade, quem vem depois ganha. */ .ds.site-footer .cols > div:first-child { flex-basis: 100% !important; } .ds.site-footer .cols > div:nth-child(2) { margin-left: 0 !important; } /* Hambúrguer aberto: o nav vira um painel vertical abaixo da barra (.site-header é sticky, então position:absolute posiciona relativo a ele). Fecha ao clicar num link (JS). */ .ds.site-header.nav-open .site-nav { display: flex; flex-direction: column; gap: 0; position: absolute; left: 0; right: 0; top: 100%; background: #fff !important; border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-md); padding: 6px 24px 14px; margin: 0; z-index: 60; } .ds.site-header.nav-open .site-nav > a { padding: 12px 0; border-top: 1px solid var(--color-border); } .ds.site-header.nav-open .site-nav > a:first-child { border-top: 0; } /* CTAs Entrar/Criar conta no fim do dropdown, lado a lado e ocupando a largura. */ .ds.site-header.nav-open .nav-cta-mobile { display: flex; gap: 10px; padding: 12px 0 4px; } .ds.site-header.nav-open .nav-cta-mobile .btn { flex: 1 1 auto; justify-content: center; } } /* ---------- Defensivo (layouts ANTIGOS) ---------- Nos layouts que carregam o _css.cshtml legado (main/home/ConfiguracoesGerais), regras globais de tag (header/nav/footer/ul/li) sangram sobre o header/footer novos: quebravam o flex da barra (nav EM CIMA do logo), esticavam/espalhavam o footer e davam fundo colorido. Escopado em .ds.site-*. */ /* Header: força a barra em UMA linha flex (logo | nav | ações) e neutraliza posicionamento legado (float/absolute) que jogava o nav sobre o logo. */ .ds.site-header { background: rgba(255,255,255,.9) !important; } /* SEM position:relative aqui: senão o dropdown mobile (.nav-open .site-nav, position:absolute) passa a se posicionar relativo à .bar e sai deslocado — deve ancorar no .site-header (sticky). */ .ds.site-header .bar { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; } .ds.site-header .site-logo, .ds.site-header .actions { position: static !important; float: none !important; } /* .site-nav: neutraliza posicionamento legado só quando FECHADO. Aberto no mobile ele é o dropdown position:absolute (ver @media acima). Forçar static aqui o devolvia ao fluxo como coluna espremida à direita do logo (a .bar é flex-nowrap) e sangrava fora da tela. Mesmo padrão :not(.nav-open) usado logo abaixo na regra de fundo. */ .ds.site-header:not(.nav-open) .site-nav { position: static !important; float: none !important; } .ds.site-header .site-logo { flex: 0 0 auto; } .ds.site-header .site-nav a { position: static !important; } /* fundo herdado só na barra (desktop); o :not(.nav-open) evita apagar o fundo do dropdown mobile — era a causa do menu transparente por cima do conteúdo. */ .ds.site-header:not(.nav-open) .site-nav { background: transparent !important; } /* Footer: layout flex robusto — bloco do logo à esquerda expande, colunas de links agrupam à direita. Evita o "espalhado" (grid 1fr esticando as colunas) e sobrevive ao CSS legado. */ .ds.site-footer { display: block !important; width: 100% !important; text-align: left !important; float: none !important; } .ds.site-footer .cols { display: flex !important; flex-wrap: wrap !important; gap: 28px 56px !important; } .ds.site-footer .cols > div { flex: 0 0 auto; } .ds.site-footer .cols > div:first-child { flex: 0 1 320px; } /* bloco do logo, à esquerda */ .ds.site-footer .cols > div:nth-child(2) { margin-left: auto; } /* empurra as 3 colunas de links p/ a direita, agrupadas */ /* NEUTRALIZAÇÃO DO CSS LEGADO — a lista abaixo cobre TUDO que `footer ul` e `footer ul li` impõem, e não só o que estava quebrando. O defeito de 08/09/2026 nasceu exatamente de uma defesa parcial: ela cobria `display`, `list-style`, `padding` e `margin`, e deixava passar as duas que importavam. Lista parcial envelhece a cada propriedade nova no legado; lista total, não. `width:450px` (home.min.css; 400 na Institucional, 300 na home.css) fazia as três colunas de links somarem 1350px e QUEBRAREM para a linha de baixo. `text-align:center` desalinhava os links do próprio título. O `text-align:left !important` que já existia no