nao e um , por isso nao apanha o box-sizing do framework:
sem isto o padding somava-se aos 100% e a barra transbordava 92px */
box-sizing: border-box;
padding: 16px 46px;
border-radius: 0px;
box-shadow: none;
justify-content: flex-start;
}
/* o menu deixa de estar ao centro: fica logo a seguir ao logótipo */
.nav-menu {
margin-left: 46px;
margin-right: auto;
}
.navbar-container .menu-pc {
min-width: 0px;
padding: 0px;
border-radius: 0px;
}
/* o espacamento vinha sobretudo do a.menu-topo (padding 10px 25px = 50px por
item). Passa a estar so no contentor, e o nowrap evita que rotulos de duas
palavras ("Quem somos") partam em duas linhas. */
.navbar-container .menu-topo-buttom {
padding: 0px 14px;
}
.navbar-container a.menu-topo:link,
.navbar-container a.menu-topo:visited,
.navbar-container a.menu-topo:hover,
.navbar-container a.menu-topo:active {
padding: 8px 0px;
margin: 0px;
white-space: nowrap;
font-size: 0.82em;
letter-spacing: 0.6px;
}
/* O sublinhado do menu acompanha a largura do item. A regra base usa
left/right: 25px, feita para o padding de 8px 25px do AI18w; aqui o
padding e' 8px 0px, por isso o traco perdia 50px de largura em todos
os itens — em "Viaturas" sobravam 11px e em "Home" ficava a zero, ou
seja, a pagina ativa nao mostrava marca nenhuma. */
.navbar-container a.menu-topo::after {
left: 0px;
right: 0px;
}
.navbar-container .logo-area {
width: 200px;
height: 40px;
background-position: left center;
}
/* barra ao fazer scroll: mesma forma, apenas mais fina */
.navbar-container.navbar-fixed {
top: 0px;
padding: 9px 46px;
border-radius: 0px;
}
.navbar-container.navbar-fixed .logo-area {
height: 34px;
}
/* a animação do AI18w reposicionava com translateX(-50%); aqui a barra
já não está centrada por transform, por isso desce a direito */
.navbar-container.navbar-fixed {
animation: navbarDescer 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes navbarDescer {
from {
transform: translateY(-130%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* anula o zoom por breakpoint herdado do AI18w */
@media screen and (min-width: 1024px) and (max-width: 1919px) {
.navbar-container {
zoom: 1;
width: 100%;
max-width: 100%;
}
.navbar-container .logo-area {
width: 170px;
height: 36px;
}
.nav-menu {
margin-left: 28px;
}
.navbar-container .menu-topo-buttom {
padding: 0px 9px;
}
.navbar-container a.menu-topo:link,
.navbar-container a.menu-topo:visited,
.navbar-container a.menu-topo:hover,
.navbar-container a.menu-topo:active {
font-size: 0.76em;
}
}
/* hero: cantos retos, a condizer com os restantes botoes do tema */
.slide-btn {
border-radius: 0px;
}
/* a cor sai do bloco acima e passa a estar presa aos estados do link: assim
vence o a:link global sem !important, e deixa o .slide-btn-2 (que vem depois,
no CSS do stand) poder impor a sua propria cor */
.slide-btn:link,
.slide-btn:visited,
.slide-btn:hover,
.slide-btn:active {
color: var(--acento-texto);
}
/*-------------------------------------------------------------------
BANNER (tema AI19b)
As setas vinham do framework partilhado: retangulos brancos a 190px do
topo. Passam a botoes circulares centrados verticalmente. O .ativo tem
especificidade (0,2,0), por isso a posicao tem de ser reposta la.
--------------------------------------------------------------------*/
.slide-before,
.slide-next {
top: 50%;
transform: translateY(-50%);
width: 54px;
height: 54px;
padding: 0px;
border-radius: 50%;
border: 1px solid;
display: flex;
align-items: center;
justify-content: center;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
transition: background-color .25s ease, border-color .25s ease, transform .25s ease, opacity .35s ease;
}
.slide-before.ativo {
left: 34px;
}
.slide-next.ativo {
right: 34px;
}
.slide-before img,
.slide-next img {
width: 15px;
height: auto;
}
.slide-before:hover,
.slide-next:hover {
transform: translateY(-50%) scale(1.08);
}
/* o scrim garante a leitura do texto sobre qualquer fotografia e nao
pode apanhar cliques, senao tapava as setas e os botoes */
.slideshow-top-gradiante,
.slideshow-bottom-gradiante {
pointer-events: none;
}
.slideshow-top-gradiante {
height: 200px;
}
.slideshow-bottom-gradiante {
height: 62%;
}
/* texto do hero alinhado com o logotipo da barra de topo */
.slide-content-wrapper {
padding: 0px 46px;
}
.slide-text-container {
max-width: 760px;
padding-bottom: 70px;
}
@media screen and (max-width: 1023px) {
.slide-before,
.slide-next {
width: 42px;
height: 42px;
}
.slide-before.ativo {
left: 14px;
}
.slide-next.ativo {
right: 14px;
}
.slide-before img,
.slide-next img {
width: 12px;
}
.slide-content-wrapper {
padding: 0px 20px;
}
.slide-text-container {
padding-bottom: 40px;
}
}
/*-------------------------------------------------------------------
PESQUISA (tema AI19b)
Deixa de ser um cartão flutuante com cantos de 30px e passa a barra
encostada por baixo do banner, com o rótulo dentro da própria caixa
de cada campo (por cima do valor).
--------------------------------------------------------------------*/
.pesquisa-stage {
max-width: 100%;
}
.pesquisa-box {
padding: 26px 46px 30px 46px;
border-radius: 0px;
box-shadow: none;
}
/* linha do título: título à esquerda, atalhos discretos à direita */
.pesquisa-titulo {
font-size: 0.95em;
font-weight: 600;
letter-spacing: 1.4px;
padding-left: 0px;
margin-bottom: 18px;
}
/* os campos passam a uma linha só, todos com a mesma largura.
O width:100% e indispensavel: o contentor pai flutua sem largura
definida, e um flex container la dentro encolhia para zero, fazendo
cada campo cair para a sua propria linha */
.pesquisa-result {
width: 100%;
}
.pesquisa-form {
width: 100%;
display: flex;
align-items: stretch;
gap: 14px;
flex-wrap: wrap;
}
.pesquisa-cell {
width: auto;
flex: 1 1 0;
min-width: 150px;
float: none;
padding: 0px;
}
/* a caixa do campo é o proprio