/* --- RESET E NASCONDITI ELEMENTI --- */ #masthead, #mobile-menu, .mobile-menu-toggle, footer.footer, #navigation, .deda-breadcrumbs { display: none !important; } /* Contenitore principale per centrare il contenuto */ .event-header-content { text-align: center; color: #ffffff; padding: 200px 20px; } .sottotitolo, .title{display:none !important;} .textheader{ color:#ffffff !important; } .header-button { position: relative; color: #ffffff!important; border: 2px solid #ffffff; border-radius: 30px; background: transparent; white-space: nowrap; margin-bottom: 20px; display: inline-flex; opacity: 1; padding: 12px 30px; font-size: 18px; font-style: normal; font-weight: 900; line-height: normal; transition: all 0.3s; margin-top:40px; } .header-button:hover{ color: #B0B8C1!important; border: 2px solid #B0B8C1; } /* STATO INIZIALE: Sempre fixed, ma con un velo scuro per staccare dal cielo dell'header */ .custom-navbar { position: fixed !important; top: 0; left: 0; width: 100%; z-index: 1030; /* Un gradiente leggero che rende visibile la barra senza appesantirla */ background:rgba(18, 18, 18, 0.5) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding-top: 12px; padding-bottom: 12px; } /* Stato iniziale del Logo: nascosto e pronto a entrare */ .custom-navbar .scroll-logo { opacity: 0; transform: translateX(0px); transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; pointer-events: none; } /* -------------------------------------------------- */ /* STATO ATTIVO: Transizione fluida senza alcun cambio di position */ /* -------------------------------------------------- */ .custom-navbar.scrolled { background: rgba(18, 18, 18, 0.5) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); padding-top: 12px; padding-bottom: 12px; } /* Il logo compare dolcemente insieme al cambio di sfondo */ .custom-navbar.scrolled .scroll-logo { opacity: 1; transform: translateX(0); pointer-events: all; } /* Pulsante Info e Conferma */ .btn-menu-action { background-color: #00AEEF !important; border: none !important; font-size: 15px; letter-spacing: 0.3px; transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out !important; } .btn-menu-action:hover { background-color: #006d96 !important; transform: scale(1.03); } .navbar>.container, .navbar>.container-fluid, .navbar>.container-lg, .navbar>.container-md, .navbar>.container-sm, .navbar>.container-xl, .navbar>.container-xxl { flex-wrap: nowrap; } .highlight-rgi { background-color: #00AEEF; /* L'azzurro che hai indicato */ color: #ffffff !important; /* Testo bianco come nel mockup */ padding: 2px 10px; /* Spazio sopra/sotto e ai lati del testo */ display: inline; /* Mantiene l'evidenziazione in linea con il testo */ box-decoration-break: clone; /* Fondamentale: mantiene il padding se il testo va a capo */ -webkit-box-decoration-break: clone; margin: 0px 0px 0px 0px; font-weight: 700; /* Rende il testo grassetto come nell'immagine */ } #tpl4 .container { max-width: 1200px; } #tpl6 .py-3{ padding-bottom: 20rem !important; } #tpl7.overlapped { margin-top: -475px !important; } #tpl8 .mt-4{ margin-top: -1.5rem !important; } #tpl10 .pb-5{ padding-bottom: 0rem !important; } ul:not([class]) li:not([class])::before { content: "\f00c"; font-family: "Font Awesome 5 Pro"; color: #000; font-weight: 900; position: relative; background: #000; width: 15px; height: 15px; text-align: center; border-radius: 20px; font-size: 10px; line-height: 2em; display: inline-block; margin: 2px 20px 0px -35px; } /* Rimuove il padding laterale dalle slide */ #splide10-track .splide__slide { padding-left: 0 !important; padding-right: 0 !important; } /* Rimuove il margine superiore dalle slide */ #splide10-track .splide__slide { margin-top: 0 !important; } .rgi-footer { background-color: #001A30 !important; /* Colore blu scuro istituzionale */ border-top: 1px solid rgba(255, 255, 255, 0.1); } .rgi-footer p { font-family: "Roboto", sans-serif; /* Allineato al font della landing */ color: #ffffff !important; opacity: 0.8; /* Rende il testo leggermente più morbido rispetto al bianco puro */ font-size: 14px; } @media (max-width: 1023px) { #tpl6 .py-3 { padding-bottom: 23rem !important; } #tpl7.overlapped { margin-top: -565px !important;} } @media (max-width: 768px) { h2 { line-height: 42px !important;} #tpl4 .py-5 { padding-bottom: 0rem !important; } } @media (max-width: 767px) { #tpl6 .py-3 { padding-bottom: 45rem !important; } #tpl7.overlapped { margin-top: -820px !important;} } @media (max-width: 540px) { #tpl6 .py-3 { padding-bottom: 42rem !important; } #tpl7.overlapped { margin-top: -760px !important;} } @media (max-width: 540px) { #tpl6 .py-3 { padding-bottom: 46rem !important; } #tpl7.overlapped { margin-top: -810px !important;} } @media (max-width: 500px) { .btn-menu-action{font-size: 12px;} }