1d934e4e63
- public/guida.html, index-en.html, service-continuity.html - public/js/ai-assistant.js, bug-reporter.js (FAB supporto) - public/mobile-conversion.css/js - index.html, common.js, help.js, risks.html: aggiornamenti UI/help Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
190 lines
6.4 KiB
CSS
190 lines
6.4 KiB
CSS
/* ════════════════════════════════════════════════════════════════
|
|
* Mobile Conversion Layer — Agile Technology suite
|
|
* Riutilizzabile su EViX, QSA, NIS2, TRPG, LG231, ecc.
|
|
* Si attiva SOLO su mobile (≤768px) — desktop invariato.
|
|
* Classi prefissate .mobconv-* per zero conflitti con CSS host.
|
|
* ════════════════════════════════════════════════════════════════ */
|
|
|
|
/* ── Variabili di tema (override via inline style sul container) ── */
|
|
:root {
|
|
--mobconv-accent: #E31E24;
|
|
--mobconv-accent2: #B71518;
|
|
--mobconv-bg: #0A0A0A;
|
|
--mobconv-text: #FFFFFF;
|
|
--mobconv-sub: rgba(255,255,255,0.75);
|
|
--mobconv-border: rgba(255,255,255,0.12);
|
|
}
|
|
|
|
/* ── Sticky CTA bar (bottom) — visibile solo mobile ────────────── */
|
|
.mobconv-sticky {
|
|
display: none; /* nascosta di default */
|
|
position: fixed;
|
|
left: 0; right: 0;
|
|
bottom: 0;
|
|
z-index: 9990;
|
|
background: linear-gradient(180deg, rgba(10,10,10,0.96), rgba(10,10,10,1));
|
|
backdrop-filter: blur(14px);
|
|
-webkit-backdrop-filter: blur(14px);
|
|
border-top: 1px solid var(--mobconv-border);
|
|
padding: 10px 16px;
|
|
padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
|
|
box-shadow: 0 -8px 32px rgba(0,0,0,0.45);
|
|
transform: translateY(100%);
|
|
transition: transform .28s ease;
|
|
}
|
|
.mobconv-sticky-row { max-width: 540px; margin: 0 auto; }
|
|
.mobconv-cta { max-width: 100%; }
|
|
/* iPhone XS / SE: padding ridotto per non sovrastare */
|
|
@media (max-width: 380px) {
|
|
.mobconv-sticky { padding: 8px 12px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
|
|
.mobconv-cta { font-size: 14px !important; padding: 0 12px !important; min-height: 44px !important; }
|
|
.mobconv-pill { min-height: 44px !important; min-width: 44px !important; }
|
|
}
|
|
.mobconv-sticky.show { transform: translateY(0); }
|
|
|
|
.mobconv-sticky-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.mobconv-pill {
|
|
flex: 0 0 auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 48px;
|
|
min-height: 48px;
|
|
padding: 0 12px;
|
|
border-radius: 14px;
|
|
background: rgba(255,255,255,0.08);
|
|
color: var(--mobconv-text);
|
|
border: 1px solid var(--mobconv-border);
|
|
text-decoration: none;
|
|
font-size: 18px;
|
|
transition: background .15s, transform .15s;
|
|
}
|
|
.mobconv-pill:active { transform: scale(0.96); background: rgba(255,255,255,0.14); }
|
|
.mobconv-pill.wa { background: rgba(37,211,102,0.18); border-color: rgba(37,211,102,0.45); color: #25D366; }
|
|
|
|
.mobconv-cta {
|
|
flex: 1 1 auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
min-height: 48px;
|
|
padding: 0 16px;
|
|
border-radius: 14px;
|
|
background: linear-gradient(135deg, var(--mobconv-accent), var(--mobconv-accent2));
|
|
color: #FFFFFF;
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
font-size: 14.5px;
|
|
letter-spacing: 0.01em;
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06) inset;
|
|
transition: transform .15s;
|
|
}
|
|
.mobconv-cta:active { transform: scale(0.98); }
|
|
|
|
/* ── WhatsApp FAB (alternativa standalone — usabile su Diamante-like) ── */
|
|
.mobconv-wa-fab {
|
|
display: none;
|
|
position: fixed;
|
|
right: 16px;
|
|
bottom: calc(20px + env(safe-area-inset-bottom, 0px));
|
|
z-index: 9980;
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 50%;
|
|
background: #25D366;
|
|
color: white;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-decoration: none;
|
|
font-size: 26px;
|
|
box-shadow: 0 8px 28px rgba(37,211,102,0.45);
|
|
transition: transform .2s, box-shadow .2s;
|
|
animation: mobconv-pulse 2.4s ease-out infinite;
|
|
}
|
|
.mobconv-wa-fab:active { transform: scale(0.92); }
|
|
@keyframes mobconv-pulse {
|
|
0% { box-shadow: 0 8px 28px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0.55); }
|
|
70% { box-shadow: 0 8px 28px rgba(37,211,102,0.45), 0 0 0 18px rgba(37,211,102,0); }
|
|
100% { box-shadow: 0 8px 28px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0); }
|
|
}
|
|
|
|
/* ── Trust ribbon (sotto hero su mobile, opzionale) ─────────────── */
|
|
.mobconv-trust {
|
|
display: none;
|
|
background: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02));
|
|
border-top: 1px solid rgba(0,0,0,0.06);
|
|
border-bottom: 1px solid rgba(0,0,0,0.06);
|
|
padding: 14px 12px;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
scrollbar-width: none;
|
|
}
|
|
.mobconv-trust::-webkit-scrollbar { display: none; }
|
|
.mobconv-trust-row {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 18px;
|
|
white-space: nowrap;
|
|
padding: 0 4px;
|
|
}
|
|
.mobconv-trust-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 12.5px;
|
|
font-weight: 600;
|
|
color: rgba(0,0,0,0.7);
|
|
letter-spacing: 0.01em;
|
|
}
|
|
.mobconv-trust-item::before {
|
|
content: "✓";
|
|
color: var(--mobconv-accent);
|
|
font-weight: 900;
|
|
font-size: 11px;
|
|
}
|
|
.mobconv-trust-item:not(:first-child)::after {
|
|
content: "·";
|
|
color: rgba(0,0,0,0.25);
|
|
margin-left: 18px;
|
|
font-size: 16px;
|
|
font-weight: 900;
|
|
}
|
|
/* Variante dark per siti dark-theme */
|
|
.mobconv-trust.dark {
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
|
|
border-top-color: rgba(255,255,255,0.08);
|
|
border-bottom-color: rgba(255,255,255,0.08);
|
|
}
|
|
.mobconv-trust.dark .mobconv-trust-item { color: rgba(255,255,255,0.85); }
|
|
.mobconv-trust.dark .mobconv-trust-item:not(:first-child)::after { color: rgba(255,255,255,0.2); }
|
|
|
|
/* ── Mobile-only: attiva tutto sotto i 768px ─────────────────────── */
|
|
@media (max-width: 768px) {
|
|
.mobconv-sticky { display: block; }
|
|
.mobconv-wa-fab[data-enabled="true"] { display: inline-flex; }
|
|
/* Hide WA FAB quando sticky è visibile (ridondante) */
|
|
.mobconv-sticky.show ~ .mobconv-wa-fab { display: none !important; }
|
|
.mobconv-trust { display: block; }
|
|
|
|
/* iOS: no zoom su input/select (font-size ≥16px) */
|
|
input, select, textarea {
|
|
font-size: max(16px, 1rem) !important;
|
|
}
|
|
|
|
/* Spazio extra in bottom della pagina per non coprire CTA esistenti */
|
|
body.mobconv-padded {
|
|
padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
|
|
}
|
|
}
|
|
|
|
/* Su desktop nasconde TUTTO senza margine d'errore */
|
|
@media (min-width: 769px) {
|
|
.mobconv-sticky, .mobconv-wa-fab, .mobconv-trust { display: none !important; }
|
|
}
|