.elementor-3024 .elementor-element.elementor-element-599baf4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-3024 .elementor-element.elementor-element-1165541{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:80px;--padding-bottom:80px;--padding-left:24px;--padding-right:24px;}@media(min-width:768px){.elementor-3024 .elementor-element.elementor-element-1165541{--content-width:1440px;}}/* Start custom CSS for container, class: .elementor-element-1165541 *//* =============================================================
SIAMO NATI PER CAMMINARE 2026 — WS Form + Bootstrap
Incolla in: Aspetto → Personalizza → CSS aggiuntivo
NOTA: aggiungi il font Comfortaa nel del tema
(functions.php o tramite plugin "Head & Footer Code"):
============================================================= */
/* ── Titolo principale ────────────────────────────────────── */
.wsf-form h3.wsf-form-title {
text-align: center;
font-family: 'Comfortaa', cursive, sans-serif;
font-size: clamp(1.2rem, 3vw, 1.8rem);
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
color: #5aaa72;
margin: 0 0 28px;
}
/* ── Titoli sezioni (Di solito / Prima / Seconda settimana) ── */
.wsf-form p.wsf-sez-title {
display: block;
width: 100%;
text-align: center;
font-family: 'Comfortaa', cursive, sans-serif;
font-size: clamp(1rem, 2.5vw, 1.3rem);
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: #5aaa72;
padding: 20px 0 10px;
margin: 0 0 12px;
border-bottom: 2px solid #e8f5e9;
}
/* ── Campi testo info (Classe, Scuola, Comune…) ───────────── */
.wsf-form .form-control {
font-family: 'Comfortaa', cursive, sans-serif;
font-size: 0.82rem;
letter-spacing: 1px;
text-transform: uppercase;
color: #444;
border: 1px solid #ccc;
border-radius: 4px;
}
.wsf-form .form-control:focus {
border-color: #5aaa72;
box-shadow: 0 0 0 0.2rem rgba(90, 170, 114, 0.2);
}
.wsf-form .form-control::placeholder {
color: #aaa;
letter-spacing: 1px;
}
/* ── Layout 8 colonne trasporti ───────────────────────────── */
/* Bootstrap usa .col — sovrascriviamo con la nostra classe custom */
.wsf-form .wsf-col-8th {
flex: 0 0 12.5% !important;
max-width: 12.5% !important;
padding-left: 4px !important;
padding-right: 4px !important;
box-sizing: border-box !important;
text-align: center;
}
/* ── Immagini mezzi di trasporto ──────────────────────────── */
.wsf-form .wsf-col-8th img.wsf-transport-img {
display: block;
margin: 0 auto 6px;
height: 70px;
width: auto;
max-width: 100%;
object-fit: contain;
}
/* ── Label giorni sotto i number input ────────────────────── */
.wsf-form .wsf-col-8th label.form-label,
.wsf-form .wsf-col-8th .wsf-label {
display: block;
font-family: 'Comfortaa', cursive, sans-serif;
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #777;
margin-bottom: 2px;
text-align: center;
}
/* ── Number input contatori ───────────────────────────────── */
.wsf-form .wsf-col-8th input[type="number"].form-control {
text-align: center;
padding: 4px 2px;
font-size: 0.88rem;
letter-spacing: 0;
text-transform: none;
-moz-appearance: textfield;
}
.wsf-form .wsf-col-8th input[type="number"].form-control::-webkit-inner-spin-button,
.wsf-form .wsf-col-8th input[type="number"].form-control::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.wsf-form .wsf-col-8th input[type="number"].form-control:focus {
border-color: #5aaa72;
box-shadow: 0 0 0 0.2rem rgba(90, 170, 114, 0.2);
}
/* ── Sfondo sezioni trasporto ─────────────────────────────── */
.wsf-form .wsf-transport-section {
background: #fafffe;
border: 1px solid #e8f5e9;
border-radius: 8px;
padding: 8px 12px 20px;
margin-bottom: 16px;
}
/* ── Checkbox privacy ─────────────────────────────────────── */
.wsf-form .form-check-input {
width: 18px;
height: 18px;
accent-color: #5aaa72;
cursor: pointer;
margin-top: 2px;
}
.wsf-form .form-check-label {
font-family: 'Comfortaa', cursive, sans-serif;
font-size: 0.82rem;
color: #555;
cursor: pointer;
}
/* ── Pulsante INVIA ───────────────────────────────────────── */
.wsf-form button[type="submit"].btn,
.wsf-form .btn-primary {
background-color: #5aaa72 !important;
border-color: #5aaa72 !important;
font-family: 'Comfortaa', cursive, sans-serif !important;
font-size: 0.88rem !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
padding: 10px 36px !important;
border-radius: 4px !important;
transition: background-color 0.2s, border-color 0.2s !important;
}
.wsf-form button[type="submit"].btn:hover,
.wsf-form .btn-primary:hover {
background-color: #489060 !important;
border-color: #489060 !important;
}
/* ── Messaggi di errore ───────────────────────────────────── */
.wsf-form .invalid-feedback,
.wsf-form .wsf-invalid-feedback {
font-family: 'Comfortaa', cursive, sans-serif;
font-size: 0.75rem;
color: #d32f2f;
}
/* ── Responsive tablet ≤ 768px ────────────────────────────── */
@media (max-width: 768px) {
.wsf-form .wsf-col-8th {
padding-left: 2px !important;
padding-right: 2px !important;
}
.wsf-form .wsf-col-8th img.wsf-transport-img {
height: 48px;
}
.wsf-form .wsf-col-8th label.form-label,
.wsf-form .wsf-col-8th .wsf-label {
font-size: 0.52rem;
}
.wsf-form .wsf-col-8th input[type="number"].form-control {
font-size: 0.8rem;
padding: 3px 1px;
}
}
/* ── Responsive mobile ≤ 480px ────────────────────────────── */
@media (max-width: 480px) {
.wsf-form .wsf-col-8th img.wsf-transport-img {
height: 34px;
}
.wsf-form .wsf-col-8th label.form-label,
.wsf-form .wsf-col-8th .wsf-label {
font-size: 0.44rem;
letter-spacing: 0;
}
.wsf-form h3.wsf-form-title {
letter-spacing: 2px;
}
.wsf-form p.wsf-sez-title {
letter-spacing: 1.5px;
}
}/* End custom CSS */