@charset "utf-8";
/* ============================================================
responsive.css
------------------------------------------------------------
Layer responsive: contiene SOLO le media query legate al
viewport, estratte da style.css. Le regole base restano in
style.css.
IMPORTANTE: caricare questo file DOPO style.css nell',
altrimenti le sovrascritture ai vari breakpoint non hanno
effetto:
NB: @media (prefers-reduced-motion) NON e' qui: non e' un
breakpoint di viewport ma una preferenza utente, quindi resta
nel layer base (style.css).
============================================================ */
/* ==========================
HEADER / TOP ACTIONS / NAVBAR / MEGA MENU
Breakpoint (anche personalizzati: 1180 / 1179.98 / 992 / 991.98)
========================== */
@media (min-width: 992px) {
#mainNav {
display: contents !important;
}
.mega-tab {
width: auto;
}
.mega-col {
display: block !important;
padding-top: 2rem;
padding-bottom: 2rem;
}
}
@media (min-width: 1180px) {
.top-actions .flex-xl-row {
flex-direction: row !important;
}
}
/**/
@media (max-width: 1399.98px) {
.top-actions {
aspect-ratio: auto;
padding-bottom: 16px;
}
.top-actions .flex-xl-row {
flex-direction: column !important;
}
.site-header .brand-row {
width: 380px;
aspect-ratio: auto;
}
}
/* ==========================
RESPONSIVE
Allineati agli standard breakpoint di Bootstrap 5
(xl: 1199.98px, lg: 991.98px, md: 767.98px)
========================== */
@media (max-width: 1199.98px) {
.numeri-di-previbank .card-cerchio {
width: 210px;
height: 210px;
}
}
/**/
@media (max-width: 991.98px) {
.site-header {
position: relative;
z-index: 101;
background: var(--bianco);
padding-top: 16px;
}
.site-header .brand-row {
position: static;
width: 100%;
padding-bottom: 16px;
}
.brand-row .logo {
width: 208px;
padding: 0;
}
.logo img {
position: static;
}
.top-actions {
padding-bottom: 0;
border-top: 1px solid var(--grigio-chiaro-brd);
}
.top-menu {
margin: 0 -16px;
}
.top-menu a {
padding: 16px;
border-bottom: 1px solid var(--grigio-chiaro-brd);
}
.top-menu a:hover {
background: var(--grigio-chiaro-bg);
}
.utils-menu {
margin: 0 -16px;
padding: 16px;
background: var(--grigio-chiaro-bg);
}
.main-navbar {
padding: 0;
}
.mega-panel {
display: none !important;
}
.mega-tabs > li {
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.mega-tabs > li .mega-col {
padding: 16px;
background: var(--bianco);
}
.mega-tabs > li .mega-col-title {
display: none;
}
.mega-tab {
display: flex;
align-items: center;
padding: 16px;
}
.mega-tab.active {
background: var(--arancio-primario);
}
.mega-tab::after {
margin-left: auto;
}
.bg-grigio-mobile {
width: 100%;
background: var(--grigio-chiaro-bg);
}
.larghezza-mobile {
width: 100%;
}
.heroSwiper {
height: 560px;
}
.slide-content {
bottom: 120px;
max-width: 100%;
}
.archive-button-wrapper {
bottom: 60px;
}
.numeri-di-previbank .card-cerchio {
width: 190px;
height: 190px;
}
.numeri-di-previbank .card-cerchio .icona img {
height: 60px;
width: 100%;
max-width: 80px;
}
.gestione-finanziaria-e-assicurativa {
padding: 64px 0;
margin-top: 0;
}
.gestione-finanziaria-e-assicurativa .card-comparti {
margin-top: 96px;
margin-bottom: 0;
}
.motori-di-calcolo {
background-size: contain;
aspect-ratio: auto;
min-height: 460px;
}
.motori-di-calcolo .mc-box {
width: auto;
}
.bg-bianco {
background: rgba(255, 255, 255, 0.9);
border: 1px solid var(--grigio-chiaro-bg);
text-align: center;
}
.separatore-bianco {
display: none;
}
.area-riservata .bg {
padding: 1px;
}
.area-riservata .bg .scritte {
padding: 0;
width: 100%;
margin: 64px 0;
text-align: center;
}
.area-riservata .bg .scritte h5, .area-riservata .bg .scritte .h5 {
color: var(--grigio-testo);
}
.area-riservata .bg .scritte .testo {
color: var(--grigio-testo);
}
.area-riservata .bg .scritte a.bottone {
background: var(--arancio-primario);
border: none;
border-radius: 35px;
}
}
/**/
@media (max-width: 767.98px) {
.gestione-finanziaria-e-assicurativa a.bottone {
margin: 0;
}
.heroSwiper {
height: 460px;
}
.slide-content {
left: 6%;
right: 6%;
bottom: 90px;
}
.archive-button-wrapper {
left: 6%;
bottom: 30px;
}
.btn-news-archive {
padding: 12px 20px;
font-size: 1rem;
}
.footer .footer-grigio .finanza-sostenibile {
text-align: center;
}
}
/* ==========================
RICERCA
========================== */
@media (max-width: 767.98px) {
/* Sotto i 768px la barra resta su una riga, ma piu' bassa: 60px
rubano troppo spazio verticale su mobile. */
.form-ricerca .barra-ricerca .campo {
height: 52px;
padding: 0 14px;
font-size: 1rem;
}
.form-ricerca .barra-ricerca .invia {
width: 52px;
height: 52px;
}
/* Le tre select della ricerca avanzata vanno in colonna
(le .col-sm di Bootstrap lo fanno gia'), ma abbasso l'altezza
per coerenza con la barra. */
.form-ricerca .select-documenti {
height: 52px;
font-size: 1rem;
}
/* "Mostra le categorie" a tutta larghezza sotto i radio */
.form-ricerca .ambito-ricerca .btn-area {
margin-left: 0 !important;
width: 100%;
text-align: center;
}
.elenco-risultati .risultato.raggruppato {
padding-left: 12px;
}
}
/* PULSANTI DI CHIAMATA ALL'AZIONE nel testo redazionale */
@media (max-width: 575.98px) {
/* Sotto i 576px i pulsanti vanno in colonna a tutta larghezza:
affiancati diventerebbero troppo stretti per l'etichetta. */
.contenuti-centro .testo .pulsanti-cta {
flex-direction: column;
gap: 12px;
}
.contenuti-centro .testo a.btn-cta {
padding: 16px 18px;
font-size: 1rem;
}
/* Riga documento: icone e testo piu' compatti, altrimenti su schermo
stretto il titolo resta schiacciato fra le due icone. */
.contenuti-centro .testo a.doc-cta {
padding: 14px 16px;
gap: 12px;
font-size: 1.0625rem;
}
.contenuti-centro .testo a.doc-cta::before {
font-size: 1.75rem;
}
}
/* ARCHIVIO DOCUMENTI AD ALBERO */
@media (max-width: 767.98px) {
/* Su schermo stretto i rientri mangiano troppo spazio al titolo:
li dimezzo e li fermo al secondo livello. */
.lista-documenti .livello-1 {
margin-left: 14px;
}
.lista-documenti .livello-2,
.lista-documenti .livello-3,
.lista-documenti .livello-4,
.lista-documenti .livello-5,
.lista-documenti .livello-6 {
margin-left: 28px;
}
.lista-documenti .gruppo-documenti {
padding: 10px 16px;
font-size: 1rem;
}
}