/* STILI GENERALI (uguali alle altre pagine) */
.squadre-container {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #333;
line-height: 1.6;
}
.squadra-section { margin-bottom: 50px; }
.squadra-title {
color: #003366;
border-bottom: 3px solid #ffcc00;
display: inline-block;
margin-bottom: 20px;
text-transform: uppercase;
font-weight: 800;
font-size: 2em;
}
.squadra-box-info {
background: #f0f7ff;
border-left: 5px solid #0055a5;
padding: 25px;
margin: 20px 0;
border-radius: 0 10px 10px 0;
}
/* --------------------------------- */
/* STILI SPECIFICI PER IL CAROSELLO */
/* --------------------------------- */
.carousel-container {
position: relative;
max-width: 100%;
margin: 30px auto;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 6px 15px rgba(0,0,0,0.15);
background-color: #f4f4f4;
}
.carousel-wrapper {
display: flex;
transition: transform 0.6s cubic-bezier(0.45, 0, 0.55, 1);
height: 450px; /* Altezza desktop */
}
.carousel-wrapper img {
width: 100%;
height: 100%;
flex-shrink: 0;
object-fit: cover; /* Riempie lo spazio senza distorcere */
}
/* Frecce */
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 51, 102, 0.7); /* Blu Navy semitrasparente */
color: #ffcc00; /* Giallo CVV */
padding: 12px 18px;
border: none;
cursor: pointer;
font-size: 24px;
font-weight: bold;
border-radius: 50%;
transition: all 0.3s ease;
z-index: 10;
user-select: none;
}
.prev:hover, .next:hover {
background-color: #ffcc00;
color: #003366;
transform: translateY(-50%) scale(1.1);
}
.prev { left: 15px; }
.next { right: 15px; }
/* Puntini indicatori */
.dots-container {
text-align: center;
padding: 10px 0;
background: rgba(0,0,0,0.05);
}
.dot {
cursor: pointer;
height: 12px;
width: 12px;
margin: 0 5px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover { background-color: #003366; }
/* Responsive */
@media (max-width: 768px) {
.carousel-wrapper { height: 280px; }
.prev, .next { padding: 8px 12px; font-size: 18px; }
}
// Oggetto per memorizzare lo stato di ogni carosello
const carouselsData = {
carouselOptimist: { currentIndex: 0, timer: null, totalSlides: 0 },
carousel420: { currentIndex: 0, timer: null, totalSlides: 0 }
};
// Inizializza i caroselli all'avvio
function initCarousels() {
for (const id in carouselsData) {
const container = document.getElementById(id);
const wrapper = container.querySelector('.carousel-wrapper');
const images = wrapper.querySelectorAll('img');
const dotsContainer = container.querySelector('.dots-container');
carouselsData[id].totalSlides = images.length;
// Crea i puntini (dots)
for (let i = 0; i jumpSlide(id, i);
dotsContainer.appendChild(dot);
}
resetTimer(id); // Avvia l'auto-play
}
}
function updateCarouselView(id) {
const container = document.getElementById(id);
const wrapper = container.querySelector('.carousel-wrapper');
const dots = container.querySelectorAll('.dot');
const data = carouselsData[id];
// Sposta lo slider
const offset = -data.currentIndex * 100;
wrapper.style.transform = `translateX(${offset}%)`;
// Aggiorna i puntini attivi
dots.forEach(d => d.classList.remove('active'));
dots[data.currentIndex].classList.add('active');
}
function moveSlide(id, direction) {
const data = carouselsData[id];
data.currentIndex += direction;
if (data.currentIndex >= data.totalSlides) {
data.currentIndex = 0;
} else if (data.currentIndex moveSlide(id, 1), 6000);
}
// Esegui inizializzazione
initCarousels();
Optimist
Composta da circa 25 atleti, fra agonistica e pre-agonistica di età compresa dai 9 ai 14 anni.
420
Composta da circa 24 atleti (12 equipaggi), fra agonistica e pre-agonistica di età compresa dai 14 ai 19 anni.
La squadra rappresenta circa il 10% della flotta nazionale.
La squadra rappresenta circa il 10% della flotta nazionale.