/* --- RESET E SFONDO GENERALE --- */
#masthead, #mobile-menu, .mobile-menu-toggle, footer.footer, #navigation, .deda-breadcrumbs {
display: none !important;
}
section#tpl6 {
background-color: #050b18 !important; /* Blu notte RGI */
padding: 80px 0 !important;
}
/* --- SEZIONE HERO CON ZOOM --- */
section#tpl2.photo-bg.negative {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
min-height: 800px !important;
background-size: 100% !important;
transition: background-size 0.05s linear;
}
.tpl-title-grande{ color: #000000 !important;}
/* Colore base del titolo */
h2.scorrimento {
color: #000000 !important;
}
/* Lo span interno che cambierà colore */
.span-next-scorrimento {
display: inline !important;
transition: color 0.3s ease-out !important;
color: #000000 !important;
}
.data{
text-align: center;
margin: 20px;
color: black !important;
}
/* --- TIMELINE DESKTOP (Look Metro + Card RGI) --- */
.metro-timeline-container {
padding: 40px 20px;
max-width: 1000px;
margin: 0px 0px;
position: relative;
}
/* Linea Metro Blu Desktop */
.metro-timeline-container::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
width: 6px !important;
/* Gradiente che riprende i colori del fluido header */
background: linear-gradient(to bottom, #00d4ff, #0055ff, #9b30ff) !important;
border-radius: 10px !important;
left: 30px !important; /* Posizione originale ripristinata */
box-shadow: 0 0 10px rgba(0, 212, 255, 0.4) !important;
display: block !important;
}
.metro-item {
position: relative;
width: 100%;
margin-bottom: 40px;
display: flex;
justify-content: flex-start;
padding-left: 80px !important;
}
/* Pallino Metro Bianco Desktop */
/* Pallini Metro ripristinati */
.metro-item::before {
left: 20px !important; /* Allineato alla linea */
border: 4px solid #00d4ff !important;
background: white !important;
z-index: 3 !important;
}
.metro-info {
padding-left: 15px !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important; /* Allinea badge e card a sinistra */
}
.metro-time {
display: inline-block !important; /* Lo rende un badge e non un blocco a tutta larghezza */
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 10 !important;
/* Stile Badge: Sfondo Ciano e Testo Bianco */
background-color: #00aeef !important;
color: #ffffff !important;
/* Arrotondamento e Spaziatura */
padding: 4px 15px !important;
border-radius: 50px !important;
/* Font e Testo */
font-weight: 700 !important;
font-size: 0.95rem !important;
letter-spacing: 0.5px !important;
text-align: center !important;
text-shadow: none !important; /* Rimuoviamo l'ombra per pulizia */
/* Posizionamento rispetto alla card */
margin-bottom: 12px !important;
margin-left: 0px !important;
/* Effetto profondità per staccarlo dal fluido */
box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}
/* Stile Card Desktop Migliorato */
.metro-card {
background: rgba(5, 11, 24, 0.85) !important; /* Blu notte più denso per leggere meglio */
padding: 25px;
border-radius: 20px;
border: 1px solid rgba(0, 174, 239, 0.3) !important; /* Bordo azzurro sottile */
box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important; /* Ombra per profondità */
backdrop-filter: blur(10px) !important; /* Sfoca il fluido dietro per far risaltare il testo */
}
.metro-card h3 {
margin: 0 0 10px 0;
font-size: 1.8rem;
color: #00d4ff !important; /* Titoli in Ciano come il logo per massima leggibilità */
font-weight: bold;
}
.metro-card p {
margin: 0;
line-height: 1.6;
font-size: 1.1rem;
color: #ffffff !important; /* Testo bianco puro, non grigio */
}
/* --- TRASFORMAZIONE MOBILE (LISTA PULITA) --- */
@media (max-width: 768px) {
/* 1. Rimuoviamo grafica metro */
.metro-timeline-container::before { display: none !important; }
.metro-item::before { display: none !important; }
/* 2. Trasformiamo card in lista testo semplice */
.metro-item {
padding-left: 15px !important;
margin-bottom: 40px !important;
}
.metro-card {
background: rgba(5, 11, 24, 0.7) !important; /* Crea una zona scura per leggere il testo */
padding: 15px !important;
border-radius: 15px !important;
margin-bottom: 20px !important;
backdrop-filter: blur(5px) !important;
}
.metro-card h3 {
margin-top: 5px !important;
}
.metro-card p {
color: #ffffff !important;
font-size: 0.95rem !important;
}
.metro-time {
background: #00aeef !important; /* Colore pieno su mobile */
color: #ffffff !important;
font-size: 0.85rem !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}
/* Reset Hero su mobile */
section#tpl2.photo-bg.negative {
min-height: 300px !important;
background-size: cover !important;
}
}
/* --- STILE COUNTDOWN RGI --- */
.countdown-box {
background: rgba(0, 0, 0, 0.6) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 8px !important;
padding: 15px 20px !important;
min-width: 100px !important;
position: relative !important;
overflow: hidden !important;
backdrop-filter: blur(5px) !important;
}
.countdown-number {
font-size: 3rem !important;
font-weight: 700 !important;
color: #ffffff !important;
line-height: 1 !important;
margin-bottom: 5px !important;
}
.countdown-label {
font-size: 0.75rem !important;
color: #ffffff!important;
font-weight: 600 !important;
letter-spacing: 1px !important;
}
.countdown-line {
position: absolute !important;
bottom: 0 !important;
left: 20% !important;
right: 20% !important;
height: 3px !important;
background: #00aeef !important;
}
@media (max-width: 576px) {
.countdown-number { font-size: 1.8rem !important; }
.countdown-box { min-width: 75px !important; padding: 10px !important; }
}
NEXT 26