/* Innobyte — Landing Voucher MIMIT Cloud & Cybersecurity
Palette dai template social (nero verdastro + verde acqua), rosso del logo solo per le scadenze. */
@font-face {
font-family: 'ClashDisplay';
src: url('ClashDisplay-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
:root {
/* Allineata al sito ufficiale (innobyte.it): nero neutro, verde defilato.
--primary-1/--primary-2 sono le variabili prese dal CSS Webflow del cliente. */
--ib-nero: #000000;
--ib-nero-2: #070707;
--ib-surface: #121519;
--ib-bordo: rgba(255, 255, 255, 0.09);
--ib-bordo-forte: rgba(255, 255, 255, 0.18);
--ib-verde: #20BF55;
--ib-verde-chiaro: #5FD98A;
--ib-verde-scuro: #093D33;
--ib-arancio: #FE7F2D;
--ib-bianco: #FFFFFF;
--ib-grigio: #9AA3A8;
--ib-rosso: #FE7F2D;
--ib-titolo: 'ClashDisplay', system-ui, sans-serif;
--ib-testo: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--ib-max: 1120px;
}
/* ---- reset minimo, ambito landing ---- */
.ib-landing * { box-sizing: border-box; }
.ib-landing {
background: var(--ib-nero);
color: var(--ib-bianco);
font-family: var(--ib-testo);
font-size: 17px;
line-height: 1.65;
overflow-x: hidden;
}
.ib-landing img { max-width: 100%; height: auto; display: block; }
.ib-wrap { width: 100%; max-width: var(--ib-max); margin: 0 auto; padding: 0 22px; }
.ib-sez { padding: 84px 0; position: relative; }
.ib-sez--alt { background: var(--ib-nero-2); }
.ib-landing h1, .ib-landing h2, .ib-landing h3 {
font-family: var(--ib-titolo);
font-weight: 500;
line-height: 1.12;
letter-spacing: -0.015em;
margin: 0 0 18px;
}
.ib-landing h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
.ib-landing h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.ib-landing h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
.ib-landing p { margin: 0 0 16px; }
.ib-landing p:last-child { margin-bottom: 0; }
.ib-verde { color: var(--ib-verde); }
.ib-sott { color: var(--ib-grigio); }
.ib-occhiello {
font-family: var(--ib-testo);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ib-verde);
margin-bottom: 14px;
display: block;
}
/* ---- bottoni ---- */
.ib-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 30px;
border-radius: 999px;
text-decoration: none !important;
font-family: var(--ib-testo);
font-size: 1rem;
font-weight: 700;
text-decoration: none;
border: 2px solid transparent;
cursor: pointer;
transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
text-align: center;
}
.ib-btn--pri { background: var(--ib-bianco); color: #000; }
.ib-btn--pri:hover, .ib-btn--pri:focus-visible { background: #E8E8E6; transform: translateY(-2px); color: #000; }
.ib-btn--sec { background: transparent; color: var(--ib-bianco); border-color: var(--ib-bordo-forte); }
.ib-btn--sec:hover, .ib-btn--sec:focus-visible { border-color: var(--ib-bianco); background: rgba(255,255,255,.06); transform: translateY(-2px); }
.ib-landing a:focus-visible, .ib-landing button:focus-visible {
outline: 3px solid var(--ib-verde-chiaro);
outline-offset: 3px;
}
/* ---- hero ---- */
.ib-hero {
position: relative;
padding: 92px 0 76px;
background:
radial-gradient(880px 460px at 80% 10%, rgba(9, 61, 51, 0.55), transparent 64%),
var(--ib-nero);
}
.ib-hero__logo { width: 62px; margin-bottom: 26px; border-radius: 12px; }
.ib-badge {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 8px 15px;
border: 1px solid var(--ib-bordo);
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
font-size: 0.85rem;
font-weight: 600;
color: var(--ib-verde-chiaro);
margin-bottom: 22px;
}
.ib-badge::before {
content: '';
width: 7px; height: 7px;
border-radius: 50%;
background: var(--ib-verde);
box-shadow: 0 0 0 4px rgba(32, 191, 85, 0.18);
}
.ib-hero p.ib-guida { font-size: 1.12rem; color: var(--ib-grigio); max-width: 620px; margin-bottom: 30px; }
.ib-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.ib-hero__nota { font-size: 0.93rem; color: var(--ib-grigio); }
/* countdown */
.ib-countdown {
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: 30px;
padding: 13px 20px;
border-radius: 12px;
border: 1px solid rgba(254, 127, 45, 0.42);
background: rgba(254, 127, 45, 0.10);
font-size: 0.97rem;
}
.ib-countdown strong { color: var(--ib-rosso); font-size: 1.15rem; font-family: var(--ib-titolo); }
/* ---- numeri ---- */
.ib-numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 16px; }
.ib-num {
background: var(--ib-surface);
border: 1px solid var(--ib-bordo);
border-radius: 14px;
padding: 28px 24px;
text-align: center;
}
.ib-num__v {
font-family: var(--ib-titolo);
font-size: clamp(1.35rem, 2.6vw, 1.95rem);
color: var(--ib-bianco);
line-height: 1.1;
margin-bottom: 10px;
max-width: 100%;
}
.ib-num__l { font-size: 0.92rem; color: var(--ib-grigio); line-height: 1.45; }
.ib-num--sud { border-color: var(--ib-bordo); background: var(--ib-surface); }
.ib-num--sud .ib-num__l strong { color: var(--ib-verde); }
/* ---- card generiche ---- */
.ib-griglia { display: grid; gap: 18px; }
.ib-griglia--2 > .ib-card { align-self: start; }
.ib-griglia--3 { grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); }
.ib-griglia--2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.ib-card {
background: var(--ib-surface);
border: 1px solid var(--ib-bordo);
border-radius: 14px;
padding: 28px 26px;
}
.ib-card h3 { margin-bottom: 10px; }
.ib-card p { color: var(--ib-grigio); font-size: 0.97rem; }
.ib-card__icona {
width: 46px; height: 46px;
border-radius: 11px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--ib-bordo);
display: flex; align-items: center; justify-content: center;
margin-bottom: 16px;
font-size: 1.35rem;
}
/* elenco spuntato */
.ib-check { list-style: none; padding: 0; margin: 0; }
.ib-check li { position: relative; padding-left: 32px; margin-bottom: 13px; color: var(--ib-grigio); }
.ib-check li strong { color: var(--ib-bianco); }
.ib-check li::before {
content: '';
position: absolute; left: 0; top: 7px;
width: 17px; height: 10px;
border-left: 2.5px solid var(--ib-verde);
border-bottom: 2.5px solid var(--ib-verde);
transform: rotate(-45deg);
}
/* ---- confronto (obiezione cloud) ---- */
.ib-confronto { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 30px; }
.ib-conf {
border-radius: 14px;
padding: 28px 26px;
border: 1px solid var(--ib-bordo);
background: var(--ib-surface);
}
.ib-conf--oggi { border-color: rgba(254, 127, 45, 0.30); }
.ib-conf h3 { font-size: 1.08rem; margin-bottom: 16px; }
.ib-conf ul { list-style: none; padding: 0; margin: 0; }
.ib-conf li { padding-left: 26px; position: relative; margin-bottom: 11px; color: var(--ib-grigio); font-size: 0.96rem; }
.ib-conf li::before { content: '—'; position: absolute; left: 0; color: var(--ib-grigio); }
.ib-conf--cloud li::before { content: '+'; color: var(--ib-verde); font-weight: 700; }
/* ---- timeline ---- */
.ib-timeline { position: relative; margin-top: 34px; padding-left: 34px; }
.ib-timeline::before {
content: '';
position: absolute; left: 9px; top: 6px; bottom: 6px;
width: 2px;
background: linear-gradient(180deg, var(--ib-verde), var(--ib-bordo));
}
.ib-tappa { position: relative; margin-bottom: 30px; }
.ib-tappa:last-child { margin-bottom: 0; }
.ib-tappa::before {
content: '';
position: absolute; left: -32px; top: 6px;
width: 14px; height: 14px;
border-radius: 50%;
background: var(--ib-nero);
border: 3px solid var(--ib-verde);
}
.ib-tappa__data { font-family: var(--ib-titolo); font-size: 1.14rem; color: var(--ib-verde); margin-bottom: 5px; }
.ib-tappa__txt { color: var(--ib-grigio); font-size: 0.97rem; }
.ib-tappa--fine::before { border-color: var(--ib-rosso); }
.ib-tappa--fine .ib-tappa__data { color: var(--ib-rosso); }
.ib-avviso {
margin-top: 30px;
padding: 20px 24px;
border-radius: 12px;
border-left: 3px solid var(--ib-rosso);
background: rgba(254, 127, 45, 0.07);
font-size: 0.97rem;
color: var(--ib-grigio);
}
.ib-avviso strong { color: var(--ib-bianco); }
/* ---- passi ---- */
.ib-passi { counter-reset: passo; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(246px, 1fr)); margin-top: 26px; }
.ib-passo { position: relative; padding: 26px 24px 24px; background: var(--ib-surface); border: 1px solid var(--ib-bordo); border-radius: 14px; }
.ib-passo::before {
counter-increment: passo;
content: counter(passo);
font-family: var(--ib-titolo);
font-size: 1.6rem;
color: var(--ib-verde);
opacity: 0.55;
display: block;
margin-bottom: 8px;
}
.ib-passo h3 { font-size: 1.05rem; margin-bottom: 8px; }
.ib-passo p { color: var(--ib-grigio); font-size: 0.94rem; margin: 0; }
/* ---- FAQ ---- */
.ib-faq { margin-top: 30px; }
.ib-faq details {
border: 1px solid var(--ib-bordo);
border-radius: 12px;
background: var(--ib-surface);
margin-bottom: 12px;
overflow: hidden;
}
.ib-faq summary {
cursor: pointer;
padding: 20px 54px 20px 24px;
font-weight: 600;
font-size: 1.02rem;
position: relative;
list-style: none;
}
.ib-faq summary::-webkit-details-marker { display: none; }
.ib-faq summary::after {
content: '';
position: absolute; right: 24px; top: 50%;
width: 10px; height: 10px;
border-right: 2px solid var(--ib-verde);
border-bottom: 2px solid var(--ib-verde);
transform: translateY(-70%) rotate(45deg);
transition: transform .2s ease;
}
.ib-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.ib-faq summary:hover { color: var(--ib-verde); }
.ib-faq__r { padding: 0 24px 22px; color: var(--ib-grigio); font-size: 0.98rem; }
.ib-faq__r strong { color: var(--ib-bianco); }
/* ---- form ---- */
.ib-form-sez {
background:
radial-gradient(760px 420px at 50% 0%, rgba(9, 61, 51, 0.5), transparent 66%),
var(--ib-nero-2);
}
.ib-form-box {
max-width: 620px;
margin: 30px auto 0;
background: var(--ib-surface);
border: 1px solid var(--ib-bordo);
border-radius: 16px;
padding: 34px 30px;
}
.ib-campo { margin-bottom: 17px; }
.ib-campo label { display: block; font-size: 0.92rem; font-weight: 600; margin-bottom: 7px; }
.ib-campo .ib-opz { color: var(--ib-grigio); font-weight: 400; }
.ib-campo input {
width: 100%;
padding: 14px 16px;
border-radius: 10px;
border: 1px solid var(--ib-bordo);
background: var(--ib-nero);
color: var(--ib-bianco);
font-family: var(--ib-testo);
font-size: 1rem;
}
.ib-campo input::placeholder { color: #5A6B66; }
.ib-campo input:focus { outline: none; border-color: var(--ib-verde); box-shadow: 0 0 0 3px rgba(32, 191, 85, 0.22); }
.ib-consenso { display: flex; gap: 11px; align-items: flex-start; margin: 20px 0 22px; font-size: 0.88rem; color: var(--ib-grigio); }
.ib-consenso input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--ib-verde); flex-shrink: 0; }
.ib-consenso a { color: var(--ib-verde-chiaro); }
.ib-form-box .ib-btn { width: 100%; }
.ib-form__nota { text-align: center; font-size: 0.87rem; color: var(--ib-grigio); margin-top: 15px; }
/* ---- footer ---- */
.ib-footer { background: var(--ib-nero); border-top: 1px solid var(--ib-bordo); padding: 46px 0 40px; font-size: 0.9rem; color: var(--ib-grigio); }
.ib-footer__top { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; margin-bottom: 26px; }
.ib-footer img { width: 46px; border-radius: 10px; }
.ib-footer a { color: var(--ib-verde-chiaro); }
.ib-footer__legale { border-top: 1px solid var(--ib-bordo); padding-top: 20px; font-size: 0.83rem; line-height: 1.7; }
/* ---- barra CTA mobile ---- */
.ib-sticky {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 900;
padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
background: rgba(0, 0, 0, 0.96);
border-top: 1px solid var(--ib-bordo);
display: none;
}
.ib-sticky .ib-btn { width: 100%; padding: 14px 20px; }
@media (max-width: 860px) {
.ib-sticky { display: block; }
.ib-landing { padding-bottom: 76px; }
.ib-sez { padding: 62px 0; }
.ib-hero { padding: 66px 0 56px; }
.ib-hero__cta .ib-btn { width: 100%; }
}
/* ---- animazioni d'ingresso ---- */
.ib-anim { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.ib-anim.ib-visibile { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.ib-anim { opacity: 1; transform: none; transition: none; }
.ib-btn { transition: none; }
}
/* icone SVG (sostituiscono le emoji: non dipendono dai font del visitatore) */
.ib-card__icona { color: var(--ib-arancio); }
.ib-card__icona svg { display: block; }
/* il valore e la sua unità non devono spezzarsi su due righe */
.ib-num__v { white-space: nowrap; overflow-wrap: normal; }
/* sotto i 380px anche il valore più lungo può andare a capo: meglio due righe che il testo tagliato */
@media (max-width: 380px) { .ib-num__v { white-space: normal; } }
/* ---- barra superiore con collegamento al sito ufficiale ---- */
.ib-topbar {
position: sticky; top: 0; z-index: 800;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--ib-bordo);
}
.ib-topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 13px; padding-bottom: 13px; }
.ib-topbar__logo { display: block; line-height: 0; }
.ib-topbar__logo img { width: 150px; height: auto; }
.ib-btn--sito {
background: transparent; color: var(--ib-bianco);
border: 1px solid var(--ib-bordo-forte);
padding: 9px 19px; border-radius: 999px; font-size: 0.9rem; font-weight: 600;
}
.ib-btn--sito:hover, .ib-btn--sito:focus-visible { background: rgba(255,255,255,.08); border-color: var(--ib-bianco); transform: translateY(-1px); }
.ib-link-sito { color: var(--ib-verde); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(32,191,85,.45); }
.ib-link-sito:hover { border-bottom-color: var(--ib-verde); }
.ib-footer img { width: 162px; border-radius: 0; }
@media (max-width: 560px) {
.ib-topbar__logo img { width: 124px; }
.ib-btn--sito { padding: 9px 15px; font-size: 0.86rem; }
}
/* ---- partner ---- */
.ib-partners {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 14px;
margin-top: 32px;
}
.ib-partner {
display: flex; align-items: center; justify-content: center;
min-height: 92px;
padding: 18px 22px;
background: rgba(255, 255, 255, 0.055);
border: 1px solid var(--ib-bordo);
border-radius: 12px;
transition: border-color .25s ease, transform .25s ease, background-color .25s ease;
}
.ib-partner img {
max-height: 38px; width: auto; max-width: 100%;
/* niente filtri: i marchi si mostrano nei loro colori, come sul sito ufficiale.
Un filtro uniforme brucia i loghi con fondo pieno e ne fa sparire altri. */
opacity: .9;
transition: opacity .25s ease, transform .25s ease;
}
.ib-partner:hover { border-color: var(--ib-bordo-forte); background: rgba(255,255,255,.1); transform: translateY(-3px); }
.ib-partner:hover img { opacity: 1; transform: scale(1.04); }
/* ---- social nel footer ---- */
.ib-socials { display: flex; gap: 10px; }
.ib-social {
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--ib-bordo);
border-radius: 50%;
color: var(--ib-grigio);
transition: color .22s ease, border-color .22s ease, transform .22s ease, background-color .22s ease;
}
.ib-social:hover, .ib-social:focus-visible {
color: var(--ib-bianco);
border-color: var(--ib-bianco);
background: rgba(255, 255, 255, .07);
transform: translateY(-2px);
}
/* ---- movimento al passaggio del mouse ---- */
.ib-card, .ib-num, .ib-passo, .ib-conf {
transition: transform .28s ease, border-color .28s ease, background-color .28s ease;
}
.ib-card:hover, .ib-passo:hover {
transform: translateY(-4px);
border-color: var(--ib-bordo-forte);
}
.ib-num:hover { transform: translateY(-4px); border-color: var(--ib-bordo-forte); }
.ib-conf:hover { transform: translateY(-3px); }
.ib-conf--cloud:hover { border-color: rgba(32, 191, 85, .45); }
.ib-faq details { transition: border-color .22s ease; }
.ib-faq details:hover { border-color: var(--ib-bordo-forte); }
.ib-tappa__data { transition: transform .22s ease; }
.ib-tappa:hover .ib-tappa__data { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
.ib-card, .ib-num, .ib-passo, .ib-conf, .ib-partner, .ib-social, .ib-tappa__data { transition: none; }
.ib-card:hover, .ib-passo:hover, .ib-num:hover, .ib-conf:hover, .ib-partner:hover,
.ib-social:hover, .ib-tappa:hover .ib-tappa__data { transform: none; }
}
/* Keliweb e SiComputer hanno il logo scuro e su fondo nero sparirebbero. I filtri CSS non
mordono sui loro AVIF: si dà a queste due card una superficie chiara, che funziona sempre. */
.ib-partner--scuro { background: #F2F3F4; border-color: rgba(255,255,255,.14); }
.ib-partner--scuro:hover { background: #FFFFFF; }
.ib-partner--scuro img { opacity: 1; }
/* SiComputer ha il logo bianco: resta su fondo scuro, a piena opacità. */
.ib-partner--chiaro img { opacity: 1; }
/* pochi loghi: griglia centrata a larghezza fissa invece che stirata su tutta la riga */
.ib-partners { grid-template-columns: repeat(auto-fit, minmax(160px, 190px)); justify-content: center; }
/* La landing deve occupare tutta la finestra: il contenitore del tema la limitava,
lasciando due fasce bianche ai lati e il fondo pagina chiaro. */
body:has(.ib-landing) { background: #000; }
body:has(.ib-landing) .site-main,
body:has(.ib-landing) .entry-content,
body:has(.ib-landing) .page-content,
body:has(.ib-landing) main { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
.ib-landing { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
/* ─────────────────────────────────────────────────────────────
Colore dei link: ultima parola
Il tema colora i link al passaggio del mouse (e il blu si vedeva sul
«Vai al sito»), e nel footer il verde si confondeva con i richiami
all'azione. Qui i link restano bianchi in TUTTI gli stati — compreso
:visited, che il browser ricolora di suo.
───────────────────────────────────────────────────────────── */
.ib-landing .ib-footer a,
.ib-landing .ib-footer a:link,
.ib-landing .ib-footer a:visited {
color: var(--ib-bianco);
}
.ib-landing .ib-footer a:hover,
.ib-landing .ib-footer a:focus,
.ib-landing .ib-footer a:focus-visible,
.ib-landing .ib-footer a:active {
color: var(--ib-bianco);
opacity: .75; /* il feedback c'è, ma senza cambiare colore */
}
.ib-landing .ib-btn--sito,
.ib-landing .ib-btn--sito:link,
.ib-landing .ib-btn--sito:visited,
.ib-landing .ib-btn--sito:hover,
.ib-landing .ib-btn--sito:focus,
.ib-landing .ib-btn--sito:focus-visible,
.ib-landing .ib-btn--sito:active {
color: var(--ib-bianco);
}
.ib-landing .ib-topbar__logo:hover,
.ib-landing .ib-topbar__logo:focus-visible {
opacity: .85;
}
/* ─────────────────────────────────────────────────────────────
Barra CTA mobile: il pulsante sta a sinistra
A tutta larghezza finiva sotto il launcher del chatbot, che è fisso
in basso a destra e sta sopra qualunque cosa (z-index al massimo).
Qui il pulsante si restringe al suo contenuto e la barra tiene libera
la corsia di destra: il logo del chatbot non copre più niente.
───────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
.ib-landing .ib-sticky {
/* 54px di launcher + 24px di margine + respiro */
padding-right: calc(16px + 88px);
text-align: left;
}
.ib-landing .ib-sticky .ib-btn {
width: auto;
max-width: 100%;
display: inline-block;
padding: 12px 22px;
font-size: 0.94rem;
line-height: 1.3;
text-align: center;
}
}
/* Sotto i 380px «Prenota la call gratuita» andava a capo su due righe: lì resta
«Prenota la call», che dice la stessa cosa e sta su una riga sola. */
@media (max-width: 380px) {
.ib-landing .ib-sticky__extra { display: none; }
.ib-landing .ib-sticky .ib-btn { padding: 12px 18px; font-size: 0.9rem; }
}
/* ═════════════════════════════════════════════════════════════
COMPATTAZIONE MOBILE (≤ 860px) — il desktop non cambia di un pixel
A 390px la pagina misurava 13.706px, cioè 16 schermate: ogni griglia
collassa in una colonna e ogni card è alta quanto un pugno di testo
circondato da 28px di aria su ogni lato. Qui si stringe l'aria e si
ricompongono i blocchi, senza togliere una parola.
═════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* Respiro fra le sezioni: 62px sopra e sotto erano tarati sul desktop. */
.ib-landing .ib-sez { padding: 40px 0; }
.ib-landing .ib-hero { padding: 48px 0 40px; }
/* — Card con icona: l'icona va a fianco del titolo, non sopra.
Da sola occupava 46px di altezza più 16 di margine. — */
/* Icona a sinistra, testo a destra — SENZA griglia.
Con grid-template-areas (e poi con grid-row) tutti i
finivano nella
stessa cella: le card con due paragrafi li stampavano uno sopra l'altro,
illeggibili. Qui l'icona è tolta dal flusso e il testo ha il suo spazio:
funziona con uno, due o dieci paragrafi. */
.ib-landing .ib-card {
position: relative;
display: block;
padding: 18px 18px 18px 70px;
min-height: 74px;
}
.ib-landing .ib-card__icona {
position: absolute;
left: 18px;
top: 18px;
width: 38px; height: 38px;
margin-bottom: 0;
border-radius: 10px;
}
.ib-landing .ib-card__icona svg { width: 19px; height: 19px; }
.ib-landing .ib-card h3 { margin-bottom: 4px; font-size: 1.02rem; }
.ib-landing .ib-card p { font-size: 0.92rem; line-height: 1.5; }
.ib-landing .ib-griglia { gap: 12px; }
/* — I numeri del voucher: due per riga invece di uno. — */
.ib-landing .ib-numeri { grid-template-columns: 1fr 1fr; gap: 12px; }
.ib-landing .ib-num { padding: 18px 12px; }
.ib-landing .ib-num__l { font-size: 0.82rem; line-height: 1.4; }
/* — I quattro passi: numero a sinistra, testo a destra. — */
.ib-landing .ib-passi { gap: 12px; margin-top: 20px; }
.ib-landing .ib-passo { padding: 16px 18px 16px 52px; }
.ib-landing .ib-passo::before { position: absolute; left: 18px; top: 14px; font-size: 1.4rem; }
.ib-landing .ib-passo h3 { margin-bottom: 2px; font-size: 1.02rem; }
.ib-landing .ib-passo p { font-size: 0.92rem; line-height: 1.5; }
/* — Il confronto armadio / data center: resta il contenuto, cala l'aria. — */
.ib-landing .ib-confronto { gap: 12px; margin-top: 20px; }
.ib-landing .ib-conf { padding: 18px 18px; }
.ib-landing .ib-conf h3 { margin-bottom: 10px; font-size: 1.02rem; }
.ib-landing .ib-conf li { margin-bottom: 7px; font-size: 0.91rem; line-height: 1.45; }
/* — Timeline delle date. — */
.ib-landing .ib-tappa { margin-bottom: 18px; }
/* — Partner: una riga che scorre, invece di cinque riquadri in colonna.
È la sezione che costava di più in rapporto a quello che dice. — */
.ib-landing .ib-partners {
display: flex;
grid-template-columns: none;
overflow-x: auto;
gap: 10px;
margin-top: 20px;
padding-bottom: 6px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.ib-landing .ib-partners::-webkit-scrollbar { display: none; }
.ib-landing .ib-partner {
flex: 0 0 auto;
width: 132px;
min-height: 64px;
padding: 12px 14px;
}
/* — Testi introduttivi e titoli: meno stacco fra le righe del blocco. — */
.ib-landing .ib-sez h2 { margin-bottom: 10px; }
.ib-landing .ib-sott { margin-bottom: 10px; }
.ib-landing .ib-occhiello { margin-bottom: 8px; }
.ib-landing .ib-griglia--2 { gap: 14px; }
/* — Form e footer. — */
.ib-landing .ib-footer { padding: 30px 0 26px; }
.ib-landing .ib-footer__top { margin-bottom: 16px; gap: 16px; }
}
/* ── Secondo giro di compattazione mobile: l'aria dentro i blocchi ──
Misurato: ogni FAQ chiusa occupava 123px (40 di solo padding) per otto
domande = 984px, e i due CTA dell'hero in colonna 181px. ── */
@media (max-width: 860px) {
/* FAQ: otto domande chiuse non devono costare una schermata e mezza. */
.ib-landing .ib-faq summary { padding: 13px 40px 13px 16px; font-size: 0.96rem; line-height: 1.4; }
.ib-landing .ib-faq details { margin-bottom: 8px; }
.ib-landing .ib-faq details[open] summary { padding-bottom: 8px; }
/* Hero: i due richiami stanno su una riga sola. */
.ib-landing .ib-hero__cta { display: flex; gap: 10px; margin-bottom: 18px; }
.ib-landing .ib-hero__cta .ib-btn {
width: auto; flex: 1 1 0; padding: 13px 10px; font-size: 0.92rem;
display: inline-flex; align-items: center; justify-content: center; text-align: center;
}
.ib-landing .ib-hero h1 { margin-bottom: 12px; }
.ib-landing .ib-hero__nota { margin-bottom: 12px; font-size: 0.86rem; }
.ib-landing .ib-countdown { margin-top: 18px; padding: 10px 14px; }
/* Modulo: meno stacco fra i campi, input meno alti. */
.ib-landing #richiedi input,
.ib-landing #richiedi select,
.ib-landing #richiedi textarea { padding: 11px 14px; }
.ib-landing #richiedi label { margin-bottom: 11px; }
/* Timeline e confronto: ultime limature. */
.ib-landing .ib-tappa { margin-bottom: 14px; }
.ib-landing .ib-conf li { margin-bottom: 5px; }
}
/* ── Terzo giro: lo spazio morto in fondo alle card ──
Dentro la griglia della card il
si portava dietro il margine di
paragrafo del tema, che qui non separa da niente: sotto l'ultima riga
di testo restavano ~16px di vuoto per card, moltiplicati per otto card. ── */
@media (max-width: 860px) {
/* Le card possono avere più paragrafi: il margine serve fra l'uno e
l'altro, non sotto l'ultimo. */
.ib-landing .ib-card p,
.ib-landing .ib-passo p,
.ib-landing .ib-conf p { margin-bottom: 8px; }
.ib-landing .ib-card p:last-child,
.ib-landing .ib-passo p:last-child,
.ib-landing .ib-conf p:last-child { margin-bottom: 0; }
.ib-landing .ib-griglia--3 > .ib-card,
.ib-landing .ib-griglia--2 > .ib-card { align-self: start; }
.ib-landing .ib-card { align-content: start; }
}
/* ── Quarto giro: modulo, respiro fra le sezioni, ultime limature ──
Il modulo costava 1.175px per 89 parole: quasi tutto struttura. ── */
@media (max-width: 860px) {
.ib-landing .ib-sez { padding: 32px 0; }
/* Modulo: etichette più vicine ai campi, campi meno alti. */
/* L'etichetta deve stare attaccata al SUO campo: prima era a 36px dal proprio
input e a 10px da quello sopra, e si leggeva come se appartenesse a quello. */
.ib-landing #richiedi .ib-campo { margin-bottom: 18px; }
.ib-landing #richiedi .ib-campo label { margin-bottom: 6px; display: block; }
.ib-landing #richiedi p { margin-bottom: 10px; }
/* ⚠️ Il consenso è anch'esso un