/* ============================================ LANDING — PULSANTI UNIFORMI + RESPONSIVE Va caricato DOPO landing_pro.css. Questo foglio era scritto per una versione precedente della pagina. Su trentotto selettori, diciannove puntavano a classi che nella landing non esistono più — .vai-hero-title, .vai-hero-stats, .vai-cta-box, .vai-features-grid, .vai-faq-grid, .vai-hero-nav — e non toccavano niente. Il guaio grosso stava nel blocco del telefono: le regole che devono mettere i pulsanti in colonna e le griglie a una colonna sotto i 768 punti erano tutte cieche. Qui i selettori sono quelli veri della pagina di adesso: la barra in alto .vai-nav il testo dell'eroe .vai-hero-copy, h1, .vai-lead, .vai-kicker i numeri di fiducia .vai-trust-row il video .vai-video-box le griglie .vai-grid, .vai-faq, .vai-steps il richiamo finale .vai-final-cta, .vai-final-actions le finestre .vai-modal ============================================ */ /* ── tutti i pulsanti della landing: stessa forma ── */ .vai-page .vai-btn { border-radius: 12px !important; font-weight: 600 !important; font-size: 15px !important; padding: 12px 24px !important; line-height: 1.4 !important; box-sizing: border-box !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; cursor: pointer !important; transition: all 0.2s ease !important; } /* Grandi: eroe, richiamo finale, «Prova la demo» */ .vai-page .vai-btn-lg { padding: 16px 32px !important; font-size: 16px !important; min-width: 220px !important; } /* Piccolo: il «Prova gratis» della barra in alto */ .vai-page .vai-btn-sm, .vai-page .vai-nav .vai-btn { padding: 10px 20px !important; font-size: 14px !important; min-width: auto !important; } /* Pieno */ .vai-page .vai-btn-primary { background: var(--vai-primary, #2563eb) !important; color: #fff !important; border: 1px solid var(--vai-primary, #2563eb) !important; } .vai-page .vai-btn-primary:hover { background: var(--vai-primary-hover, #1d4ed8) !important; border-color: var(--vai-primary-hover, #1d4ed8) !important; } /* Secondario: è la classe dei due pulsanti WhatsApp della pagina */ .vai-page .vai-btn-secondary { background: rgba(255, 255, 255, 0.09) !important; border: 1px solid var(--vai-border, rgba(255, 255, 255, 0.16)) !important; color: var(--vai-text, #e2e8f0) !important; } .vai-page .vai-btn-secondary:hover { background: rgba(255, 255, 255, 0.16) !important; border-color: var(--vai-text-muted, #94a3b8) !important; } /* Contorno */ .vai-page .vai-btn-outline { background: transparent !important; border: 1px solid var(--vai-border, rgba(255, 255, 255, 0.16)) !important; color: var(--vai-text, #e2e8f0) !important; } .vai-page .vai-btn-outline:hover { background: rgba(255, 255, 255, 0.09) !important; border-color: var(--vai-text-muted, #94a3b8) !important; } /* Verde WhatsApp: pronte per quando un pulsante prende questa classe */ .vai-page .vai-btn-whatsapp { border-color: #25d366 !important; color: #25d366 !important; background: transparent !important; } .vai-page .vai-btn-whatsapp:hover { background: #25d366 !important; color: #fff !important; } .vai-page .vai-btn-wa-solid { background: #25d366 !important; border-color: #25d366 !important; color: #fff !important; } .vai-page .vai-btn-wa-solid:hover { background: #1da851 !important; } /* Larghezza piena: i due pulsanti dentro alle finestre */ .vai-page .vai-btn-full { width: 100% !important; padding: 16px !important; font-size: 16px !important; } /* Le finestre */ .vai-page .vai-modal { max-width: 460px; } /* ============================================ TELEFONO E TABLET ============================================ */ @media (max-width: 900px) { /* L'eroe è una griglia a due colonne: sotto i 900 va a una sola, se no il riquadro della chiamata schiaccia il testo. */ .vai-page .vai-hero { grid-template-columns: 1fr !important; } } @media (max-width: 768px) { .vai-page .vai-hero { padding-left: 16px; padding-right: 16px; } .vai-page .vai-hero-copy h1 { font-size: 28px !important; line-height: 1.2 !important; } .vai-page .vai-lead { font-size: 15px !important; } .vai-page .vai-kicker { font-size: 12px !important; } /* I pulsanti dell'eroe e del richiamo finale: in colonna, pieni */ .vai-page .vai-hero-actions, .vai-page .vai-final-actions { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; width: 100% !important; max-width: 360px !important; margin-left: auto !important; margin-right: auto !important; } .vai-page .vai-hero-actions .vai-btn, .vai-page .vai-final-actions .vai-btn { width: 100% !important; min-width: 0 !important; padding: 14px 20px !important; font-size: 15px !important; } /* I numeri di fiducia: due per riga */ .vai-page .vai-trust-row { grid-template-columns: 1fr 1fr !important; gap: 12px !important; } /* Le griglie a una colonna sola */ .vai-page .vai-grid, .vai-page .vai-faq, .vai-page .vai-steps { grid-template-columns: 1fr !important; } .vai-page .vai-feature { padding: 18px !important; } /* Le sezioni */ .vai-page .vai-section, .vai-page .vai-final-cta, .vai-page .vai-proof { padding-left: 16px !important; padding-right: 16px !important; } .vai-page .vai-section-head h2, .vai-page .vai-final-cta h2, .vai-page .vai-proof h2 { font-size: 22px !important; line-height: 1.25 !important; } /* La barra in alto va a capo invece di stringersi */ .vai-page .vai-nav { gap: 10px !important; } .vai-page .vai-nav-actions { gap: 10px !important; } /* Il video */ .vai-page .vai-video-box { border-radius: 12px !important; } /* Le finestre a tutta larghezza */ .vai-page .vai-modal { max-width: calc(100% - 32px) !important; margin: 16px !important; } .vai-page .vai-footer { padding: 20px 16px !important; font-size: 12px !important; } } @media (max-width: 380px) { .vai-page .vai-hero-copy h1 { font-size: 24px !important; } .vai-page .vai-trust-row { gap: 8px !important; } .vai-page .vai-trust-row strong { font-size: 16px !important; } .vai-page .vai-btn-lg { padding: 14px 18px !important; font-size: 15px !important; } }