/* ===================================================================== MOTOR CONSULTA — Ajustes específicos de login.aspx (colisões com o Bootstrap 3/jQuery/css/style.css legados, que só login.aspx ainda carrega) que não têm equivalente no design system do esboço (css/motorconsulta-design-system.css, que precisa ser carregado ANTES deste arquivo), mais o componente de card de notícia dinâmico (.news-grid/.news-card*, seção "GUIA AUTOMOTIVO" abaixo), usado tanto por login.aspx quanto por Noticias.aspx — ambos exibem posts reais do WordPress, com título/tamanho variável, o que o design system do esboço (pensado só para os cards estáticos do guia.html) não cobre. As regras de colisão com Bootstrap são inertes em qualquer página que não carregue esse Bootstrap/CSS antigo (ex.: Noticias.aspx) — sem efeito, sem risco. ===================================================================== */ /* ------------------------- MODAL DE LOGIN ------------------------------ Nome de classe própria (mc-modal*), NÃO ".modal", porque ".modal" já é usado pelo Bootstrap (ex.: #modalMFA). Usar ".modal" aqui sobrescrevia o "display:none" padrão do Bootstrap e deixava o modal de MFA sempre visível em tela cheia, bloqueando cliques na página inteira. */ .mc-modal[hidden] { display: none; } .mc-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--sp-4); } .mc-modal__backdrop { position: absolute; inset: 0; background: rgba(13,21,38,.55); backdrop-filter: blur(3px); } .mc-modal__dialog { position: relative; z-index: 1; width: 100%; max-width: 430px; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--sp-6); max-height: calc(100vh - 2rem); overflow-y: auto; } .mc-modal__close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; background: none; border-radius: var(--radius-sm); cursor: pointer; color: var(--ink-500); display: grid; place-items: center; } .mc-modal__close:hover { background: var(--ink-100); color: var(--ink-800); } .mc-modal__close svg { width: 22px; height: 22px; } .mc-modal__brand { margin-bottom: var(--sp-4); } .mc-modal__brand img { height: 28px; width: auto; } .mc-modal__dialog h2 { font-size: var(--fs-xl); } .mc-modal__sub { color: var(--text-muted); font-size: var(--fs-sm); margin: .4rem 0 var(--sp-5); } .mc-modal__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); font-size: var(--fs-sm); flex-wrap: wrap; } .mc-modal__row a { font-weight: 600; } .mc-modal__foot { text-align: center; margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--text-muted); } body.mc-modal-open { overflow: hidden; } /* O design system novo também define uma regra genérica ".modal { display:grid; position:fixed; inset:0 }" (usada pela nossa .mc-modal acima, com nome próprio). O modal de MFA (#modalMFA) é do Bootstrap e também usa a classe ".modal" — sem este reset, ele ficava sempre visível em tela cheia, bloqueando cliques na página inteira. Seletor por ID para garantir prioridade sobre a regra genérica ".modal", independente da ordem de carregamento dos CSS. Só "display:none" — NÃO mexer em position/inset aqui. O próprio Bootstrap já define ".modal { position:fixed; inset:0 }" (conferido em bootstrap.min.css), que é exatamente o que centraliza o modal na tela quando ele abre de verdade. Uma versão anterior deste fix também zerava position/inset ("position:fixed;inset:auto"), achando que só o "display" importava — como o JS de abrir o modal (login.aspx.vb) só troca o "display" inline, o "inset:auto" continuava valendo mesmo com o modal visível, e ele passava a abrir "fixo" na posição estática dele no documento (bem abaixo, fora da tela) em vez de centralizado — só descoberto ao testar o fluxo de MFA de verdade, o que não tinha sido feito até então. "z-index" tem exatamente o mesmo tipo de colisão: o Bootstrap define ".modal { z-index:1050 }", mas o design system também define ".modal { z-index:200 }" — e como o design system carrega DEPOIS do Bootstrap, o dele vence (mesma especificidade, ordem de carregamento decide). O backdrop escurecido do Bootstrap (".modal-backdrop") continua com z-index:1050 dele. Resultado: o modal de MFA (z-index:200) ficava ABAIXO do próprio backdrop (z-index:1040) — dava pra ver o modal (o backdrop é semitransparente), mas qualquer clique, mesmo em cima do modal, era capturado pelo backdrop por cima dele, travando a tela inteira. Fixado subindo o z-index aqui também, do mesmo jeito que já fizemos com "display". */ #modalMFA { display: none; z-index: 1050; } /* O Bootstrap 3 (css/bootstrap.min.css, ainda carregado por causa do modal de MFA) fixa ".container" em larguras exatas (750/970/1170px) por breakpoint. Isso capturava as novas seções (hero, cards, etc.), que esperam o container fluido de até 1180px do design system. !important aqui é intencional: é o único jeito de vencer as media queries próprias do Bootstrap sem precisar replicá-las uma a uma. */ .container { width: auto !important; } /* O Bootstrap 3 aplica seu hack de "clearfix" (pseudo-elementos ::before/::after com content:" "; display:table) em ".container". Isso é inofensivo em layout de bloco normal, mas quando o design system transforma ".container" em grid/flex (".hero .container", ".site-header .container", ".two-col", etc.), esses pseudo-elementos viram ITENS FANTASMA do grid/flex — um antes e um depois do conteúdo real — empurrando tudo uma posição adiante. Foi isso que causava o título do hero (e outros blocos) aparecerem na coluna errada (direita em vez de esquerda) e o header com itens desalinhados. Confirmado isolando o bug num teste ao vivo no navegador antes de aplicar esta correção. */ .container::before, .container::after { content: none !important; display: none !important; } /* O style.css antigo força a fonte-base da página para 13px em vez do padrão de 16px do navegador. Como todo o design system novo usa "rem" (relativo à fonte raiz), isso encolhia proporcionalmente cabeçalhos, botões e itens do menu (para ~81% do tamanho pretendido) só nesta página — as páginas novas (NossosServicos.aspx etc.) não carregam esse CSS antigo e por isso não sofriam com isso. */ html { font-size: 100% !important; } /* O Bootstrap define "a:hover, a:focus { color:#23527c }" e ".btn:hover{color:#333}" globalmente. Os botões (.btn) do design system são links , e nenhuma variação de botão redefine a cor do texto no hover (só muda fundo/sombra) — então, sem essa regra, o texto do botão escurecia ao passar o mouse porque as regras do Bootstrap eram as únicas concorrendo pela propriedade "color" nesse estado. */ .btn:hover, .btn:focus { color: var(--btn-fg); } /* O style.css antigo define "body { font-weight: 300 }". A partir de uma base herdada abaixo de 400, o valor relativo "bolder" (usado pelo navegador na tag /) só sobe um degrau (para ~400), então o texto não parecia negrito de verdade. Fixando um peso absoluto aqui resolve em qualquer contexto herdado. */ b, strong { font-weight: 700; } /* O Bootstrap 3 define "h1,h2,h3{margin-top:20px;margin-bottom:10px}" — o design system novo não espera margem no topo dos títulos (o espaçamento já vem do próprio layout/gap). Isso deixava os títulos dentro de cards (ex.: Confiabilidade/Agilidade/Segurança) alguns pixels mais baixos do que o ícone ao lado. */ .card h1, .card h2, .card h3, .card h4, .section-head h1, .section-head h2, .section-head h3 { margin-top: 0; } /* ---------------------- GUIA AUTOMOTIVO (cards dinâmicos) --------------- Gerados como string HTML em CarregarNoticiasRecentes (login.aspx.vb). Nomes de classe próprios, não existem no design system do esboço. */ .news-grid { display: flex; flex-wrap: wrap; gap: var(--sp-5); } .news-card { flex: 1 1 280px; min-width: 260px; max-width: 100%; } .news-card__thumb { width: 100%; height: 160px; object-fit: cover; display: block; } .news-card__thumb--placeholder { width: 100%; height: 160px; background: linear-gradient(135deg, var(--brand-700), var(--brand-500)); } /* Notícias reais têm títulos de tamanhos bem diferentes; sem um limite fixo de linhas, o card com o título mais longo ficava mais alto que os outros 3, quebrando a grade. Trunca em 2 linhas e reserva a mesma altura sempre, deixando todos os cards padronizados independente do título. */ .news-card__title { font-family: var(--font-display); font-size: var(--fs-md); color: var(--brand-800); font-weight: 700; margin-bottom: .5rem; line-height: 1.3; min-height: calc(1.3em * 2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .news-card__excerpt { color: var(--text-muted); font-size: var(--fs-sm); flex: 1; margin-bottom: var(--sp-4); } .news-card__more { align-self: flex-start; font-weight: 600; font-size: var(--fs-sm); color: #fff !important; background: var(--brand-500); padding: .55rem 1.1rem; border-radius: var(--radius-pill); text-decoration: none !important; } .news-card__more:hover { background: var(--brand-600); } /* Card inteiro clicável, não só o botão "Ler notícia" (pedido do Miguel — o próprio esboço de referência também só tem o link do "Ler notícia", sem o card inteiro reagir ao clique). Técnica de link esticado: o "Ler notícia" ganha um ::after cobrindo o card inteiro. O título (.news-card__title) é só texto, sem link próprio nessa versão dinâmica (diferente do esboço estático, que usa

) — não há outro link dentro do card pra disputar o clique, então não precisa de z-index. */ .news-card { position: relative; } .news-card__more::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* O style.css antigo define "overflow-x: hidden" tanto em html quanto em body (pra evitar rolagem horizontal do layout Bootstrap antigo). Definir overflow em qualquer eixo, em html ou body, faz esse elemento virar o "contêiner de rolagem" mais próximo — e ".site-header { position: sticky }" só gruda na tela dentro do contêiner de rolagem mais próximo. Como a rolagem real da página não acontece dentro desse contêiner do jeito que o sticky espera, o header parava de grudar ao rolar. "overflow-x: clip" recorta o conteúdo que passar da largura (mesmo efeito visual de nunca aparecer barra de rolagem horizontal) sem criar um contêiner de rolagem, então o sticky do header volta a funcionar. */ html, body { overflow-x: clip; } /* O Bootstrap 3 estiliza checkbox custom via ".checkbox input[type=checkbox] { position:absolute; margin-left:-20px }" (espera um