/* Stili "helmet" delle landing (dal design di Daisy). Le altre regole sono inline sugli elementi. Font Inter e nomi colore self-hosted via colors_and_type.css: NIENTE Google Fonts né CDN (la CSP del sito consente solo 'self'). */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; background: #06111E; } body { background: #06111E; } .ld-root, .ld-root * { font-family: 'Inter', system-ui, sans-serif; } .ld-root button { font: inherit; cursor: pointer; } @keyframes ld-breathe { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity: .55; } 50% { transform: translate(-50%,-50%) scale(1.08); opacity: .85; } } @media (prefers-reduced-motion: reduce) { .ld-glow { animation: none !important; } } [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(0.25,1,0.5,1), transform .7s cubic-bezier(0.25,1,0.5,1); } [data-reveal][data-revealed] { opacity: 1 !important; transform: none !important; } /* Rete di sicurezza CSS-only: se landing.js NON parte affatto (JS disattivato, script bloccato dalla CSP, errore di rete) il contenuto non deve restare invisibile — sarebbe una pagina quasi bianca. landing.js aggiunge subito la classe .ld-js su : se c'è, questa rete è spenta e resta lo scroll-reveal normale; se manca (JS morto), dopo 2.2s un'animazione pura-CSS rivela tutto. Nota: [data-revealed]{opacity:1 !important} batte comunque l'animazione, quindi con JS vivo lo scroll-reveal non è disturbato. */ @keyframes ld-failsafe { to { opacity: 1; transform: none; } } html:not(.ld-js) [data-reveal] { animation: ld-failsafe .5s ease 2.2s forwards; } .ld-link { color: rgba(232,246,255,0.72); text-decoration: none; transition: color .15s cubic-bezier(0.25,1,0.5,1); } .ld-link:hover { color: #E8F6FF; } .ld-btn-primary { transition: box-shadow .15s cubic-bezier(0.25,1,0.5,1), transform .15s cubic-bezier(0.25,1,0.5,1), background .15s; } .ld-btn-primary:hover { box-shadow: 0 12px 34px -8px rgba(0,163,255,0.65); transform: translateY(-1px); background: #38B6FF; } .ld-faq-q { cursor: pointer; } .ld-faq-q:hover span:first-child { color: #38B6FF !important; } @media (max-width: 880px) { .ld-hero-grid { grid-template-columns: 1fr !important; } .ld-hero-code { position: absolute !important; inset: 0 !important; width: 100% !important; opacity: 0.55 !important; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%) !important; mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%) !important; } } @media (max-width: 880px) { .ld-split { grid-template-columns: 1fr !important; } .ld-split > div[style*="align-items: center"] { transform: rotate(90deg); margin: 4px 0; } } @media (min-width: 820px) { .ld-scrivici-grid { grid-template-columns: 1.5fr 1fr !important; align-items: stretch !important; } } @media (max-width: 760px) { .ld-slot-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .ld-slot-grid { grid-template-columns: 1fr !important; } } .ld-slot-row:hover { border-color: #00A3FF !important; transform: translateY(-1px); box-shadow: 0 0 0 1px #00A3FF, 0 8px 24px rgba(0,163,255,.15); } #form input:focus, #form textarea:focus { border-color: #00A3FF !important; } #form input::placeholder, #form textarea::placeholder { color: #3D6B8A; } /* FAQ: risposta collassabile, aperta via landing.js */ [data-faq-a] { display: none; } [data-faq-a][data-open] { display: block; }