/* ============================================================ FARMACONVENIENZA — VIP CLUB · CSS di design (mockup + base handoff) Blocco home (3 varianti) + landing di atterraggio. Token allineati al tema live: dev/farmaconvenienza/theme-live/assets/css/_source.css (:root --fc-*). Font: Inter, come reso davvero dal sito (token sovrascritti dal BO). ============================================================ */ /* ---------- token locali (specchio del tema, per il mockup) ---------- */ #main .fc-vipl { --fc-gold: var(--fc-amber, #ffcf38); /* firma gialla del club = amber del tema */ --fc-navy: #070d1c; /* fondo "club": non esiste nel tema */ --fc-blue-deep: #0047c9; /* a runtime il tema ha #006afb = --fc-blue */ } /* ---------- reset minimo del mockup ---------- */ #main .fc-vipl *, #main .fc-vipl *::before, #main .fc-vipl *::after {box-sizing:border-box} #main .fc-vipl img {max-width:100%;display:block} #main .fc-vipl a {text-decoration:none} #main .fc-vipl .fc-vipl-ctn {max-width:var(--fc-container-max);margin:0 auto;padding:0 24px} #main .fc-vipl .fc-vipl-ctn--wide {max-width:var(--fc-container-wide)} /* ============================================================ TESSERA VIP — costruita in CSS (nitida a ogni densità, testo modificabile, nessun artefatto di generazione). Riusata sia nel blocco home sia nella landing. ============================================================ */ #main .fc-vipl .fc-vipcard { position:relative;width:340px;max-width:100%;aspect-ratio:1.586/1; border-radius:18px;padding:20px;color:#fff;overflow:hidden; background: radial-gradient(120% 140% at 100% 0%, rgba(255,207,56,.28) 0%, rgba(255,207,56,0) 55%), linear-gradient(140deg,#0a1a3f 0%,#123a8f 45%,#0a1a3f 100%); box-shadow:0 28px 60px -18px rgba(7,13,28,.65), inset 0 1px 0 rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.14); font-family:var(--fc-font-display); display:flex;flex-direction:column;justify-content:space-between; } #main .fc-vipl .fc-vipcard::after { /* riflesso glossy diagonale */ content:"";position:absolute;inset:-40% -10% auto -10%;height:120%; background:linear-gradient(105deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.16) 50%,rgba(255,255,255,0) 58%); transform:rotate(-8deg);pointer-events:none; } #main .fc-vipl .fc-vipcard__top {display:flex;align-items:flex-start;justify-content:space-between;gap:12px;position:relative;z-index:1} #main .fc-vipl .fc-vipcard__brand {font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.72)} #main .fc-vipl .fc-vipcard__chip { width:44px;height:32px;border-radius:6px; background:linear-gradient(135deg,#ffe08a 0%,var(--fc-gold) 45%,#c98f0a 100%); box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);position:relative } #main .fc-vipl .fc-vipcard__chip::before, #main .fc-vipl .fc-vipcard__chip::after { content:"";position:absolute;left:6px;right:6px;height:1px;background:rgba(0,0,0,.18) } #main .fc-vipl .fc-vipcard__chip::before {top:11px} #main .fc-vipl .fc-vipcard__chip::after {top:20px} #main .fc-vipl .fc-vipcard__title {position:relative;z-index:1;font-size:40px;line-height:.95;font-weight:900;letter-spacing:-.02em; background:linear-gradient(180deg,#fff 0%,var(--fc-gold) 100%);-webkit-background-clip:text;background-clip:text;color:transparent} #main .fc-vipl .fc-vipcard__title small {display:block;font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase; color:rgba(255,255,255,.75);-webkit-text-fill-color:rgba(255,255,255,.75);margin-top:6px} #main .fc-vipl .fc-vipcard__foot {position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:12px; font-family:var(--fc-font-ui);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.65)} #main .fc-vipl .fc-vipcard__foot strong {display:block;font-size:13px;letter-spacing:.04em;color:#fff;font-weight:700;margin-top:2px} #main .fc-vipl .fc-vipcard--tilt {transform:rotate(-7deg)} #main .fc-vipl .fc-vipcard--sm {width:260px;border-radius:14px;padding:16px} #main .fc-vipl .fc-vipcard--sm .fc-vipcard__title {font-size:30px} /* ============================================================ LANDING VIP CLUB ============================================================ */ #main .fc-vipl {font-family:var(--fc-font-ui)} /* --- breadcrumb --- */ #main .fc-vipl__crumbs {padding:14px 0;font-size:13px;color:var(--fc-ink-600);background:var(--fc-ink-50);border-bottom:1px solid var(--fc-ink-200)} #main .fc-vipl__crumbs a {color:var(--fc-ink-600)} #main .fc-vipl__crumbs span {color:var(--fc-ink-900);font-weight:600} /* --- HERO: copy a sinistra, form subito visibile a destra --- */ #main .fc-vipl-hero {position:relative;overflow:hidden;color:#fff; background: radial-gradient(70% 120% at 85% 0%,rgba(20,86,240,.6),transparent 60%), radial-gradient(50% 90% at 8% 100%,rgba(255,207,56,.22),transparent 60%), linear-gradient(140deg,var(--fc-navy) 0%,#0c2058 55%,#123a8f 100%)} #main .fc-vipl-hero::before {content:"";position:absolute;inset:0;opacity:.45; background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);background-size:24px 24px} #main .fc-vipl-hero__inner {position:relative;z-index:1;display:grid;gap:40px;padding:56px 0 64px;align-items:start} @media (min-width:1000px) { #main .fc-vipl-hero__inner {grid-template-columns:1.08fr .92fr;gap:56px;padding:72px 0 80px} } #main .fc-vipl-hero__eyebrow {display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.1); border:1px solid rgba(255,207,56,.5);color:var(--fc-gold);font-family:var(--fc-font-display);font-weight:900; font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:8px 14px;border-radius:var(--fc-radius-pill)} #main .fc-vipl-hero h1 {font-family:var(--fc-font-display);font-weight:900;letter-spacing:-.025em; font-size:clamp(32px,4.6vw,56px);line-height:1.03;margin:20px 0 0} #main .fc-vipl-hero h1 em {font-style:normal;color:var(--fc-gold)} #main .fc-vipl-hero__lead {font-size:18px;line-height:1.6;color:rgba(219,232,254,.92);margin:18px 0 0;max-width:34rem} #main .fc-vipl-hero__proof {display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0;list-style:none} #main .fc-vipl-hero__proof li {display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--fc-radius-pill);padding:9px 14px} #main .fc-vipl .fc-vipl-hero__proof [class^='fcl-ico-'] {width:18px;height:18px;color:var(--fc-gold)} #main .fc-vipl-hero__card {margin-top:34px;display:flex;justify-content:center} @media (min-width:1000px) { #main .fc-vipl-hero__card {justify-content:flex-start} } /* --- form iscrizione (blocco riusato: hero + sezione finale) --- */ #main .fc-vipl .fc-vipform {background:#fff;color:var(--fc-ink-900);border-radius:var(--fc-radius-xl); box-shadow:0 40px 80px -30px rgba(7,13,28,.6);overflow:hidden;border:1px solid rgba(255,255,255,.5)} #main .fc-vipl .fc-vipform__head {padding:24px 28px;background:linear-gradient(180deg,var(--fc-blue-50),#fff); border-bottom:1px solid var(--fc-ink-200)} #main .fc-vipl .fc-vipform__head h2 {font-family:var(--fc-font-display);font-weight:900;font-size:22px;line-height:1.15;margin:0; letter-spacing:-.01em} #main .fc-vipl .fc-vipform__head p {margin:8px 0 0;font-size:14px;color:var(--fc-ink-600);line-height:1.5} #main .fc-vipl .fc-vipform__body {padding:24px 28px 28px} #main .fc-vipl .fc-vipform__row {display:grid;gap:14px} @media (min-width:520px) { #main .fc-vipl .fc-vipform__row--2 {grid-template-columns:1fr 1fr} } #main .fc-vipl .fc-vipform__field {display:flex;flex-direction:column;gap:6px;margin-bottom:14px} #main .fc-vipl .fc-vipform__field label {font-size:13px;font-weight:700;color:var(--fc-ink-700)} #main .fc-vipl .fc-vipform__field input[type=text], #main .fc-vipl .fc-vipform__field input[type=email], #main .fc-vipl .fc-vipform__field input[type=tel], #main .fc-vipl .fc-vipform__field input[type=date] { height:48px;border:1px solid var(--fc-ink-200);border-radius:var(--fc-radius-sm);padding:0 14px;font:inherit; font-size:15px;color:var(--fc-ink-900);background:#fff;transition:border-color 150ms,box-shadow 150ms} #main .fc-vipl .fc-vipform__field input:focus {outline:none;border-color:var(--fc-blue);box-shadow:0 0 0 3px rgba(20,86,240,.16)} #main .fc-vipl .fc-vipform__hint {font-size:12.5px;color:var(--fc-ink-600)} #main .fc-vipl .fc-vipform__radios {display:flex;gap:10px} #main .fc-vipl .fc-vipform__radios label {display:inline-flex;align-items:center;gap:8px;border:1px solid var(--fc-ink-200); border-radius:var(--fc-radius-sm);padding:12px 16px;font-size:14px;font-weight:600;color:var(--fc-ink-700);cursor:pointer;flex:1} #main .fc-vipl .fc-vipform__consent {display:flex;gap:10px;align-items:flex-start;margin:6px 0 18px;font-size:12.5px; line-height:1.5;color:var(--fc-ink-600)} #main .fc-vipl .fc-vipform__consent input {margin-top:2px;width:18px;height:18px;flex:0 0 18px;accent-color:var(--fc-blue)} #main .fc-vipl .fc-vipform__consent a {color:var(--fc-blue);text-decoration:underline} #main .fc-vipl .fc-vipform__submit {width:100%;border:0;cursor:pointer;font-family:var(--fc-font-display);font-weight:900; font-size:17px;color:#241700;background:linear-gradient(180deg,#ffdc6a 0%,var(--fc-gold) 100%); height:58px;border-radius:var(--fc-radius-pill);box-shadow:0 18px 32px -14px rgba(255,207,56,.8); transition:transform 160ms} #main .fc-vipl .fc-vipform__submit:hover {transform:translateY(-2px)} #main .fc-vipl .fc-vipform__foot {margin:14px 0 0;font-size:12.5px;color:var(--fc-ink-600);text-align:center;line-height:1.5} #main .fc-vipl .fc-vipform__steps {list-style:none;margin:0 0 18px;padding:14px 16px;display:grid;gap:8px; background:var(--fc-blue-50);border:1px solid var(--fc-blue-100);border-radius:var(--fc-radius-md)} #main .fc-vipl .fc-vipform__steps li {display:flex;gap:10px;font-size:13.5px;color:var(--fc-ink-700);line-height:1.45} #main .fc-vipl .fc-vipform__steps b {flex:0 0 22px;height:22px;border-radius:50%;background:var(--fc-blue);color:#fff; font-family:var(--fc-font-display);font-size:12px;display:grid;place-items:center;font-weight:900} #main .fc-vipl .fc-vipform__steps a {color:var(--fc-blue);font-weight:700} /* --- fascia numeri --- */ #main .fc-vipl-facts {background:#fff;border-bottom:1px solid var(--fc-ink-200)} #main .fc-vipl-facts__grid {display:grid;gap:0;padding:0} @media (min-width:760px) { #main .fc-vipl-facts__grid {grid-template-columns:repeat(4,1fr)} } #main .fc-vipl-facts__item {padding:26px 20px;text-align:center;border-bottom:1px solid var(--fc-ink-200)} @media (min-width:760px) { #main .fc-vipl-facts__item {border-bottom:0;border-right:1px solid var(--fc-ink-200)} #main .fc-vipl-facts__item:last-child {border-right:0} } #main .fc-vipl-facts__n {font-family:var(--fc-font-display);font-weight:900;font-size:32px;line-height:1;color:var(--fc-blue); letter-spacing:-.02em} #main .fc-vipl-facts__l {font-size:13.5px;color:var(--fc-ink-600);margin-top:8px;line-height:1.4} /* --- sezioni generiche --- */ #main .fc-vipl-sec {padding:64px 0} #main .fc-vipl-sec--tint {background:var(--fc-ink-50)} #main .fc-vipl-sec__head {max-width:44rem;margin:0 auto 40px;text-align:center} #main .fc-vipl-sec__head h2 {font-family:var(--fc-font-display);font-weight:900;letter-spacing:-.02em; font-size:clamp(26px,3.2vw,40px);line-height:1.1;margin:0} #main .fc-vipl-sec__head p {margin:14px 0 0;font-size:17px;line-height:1.6;color:var(--fc-ink-600)} #main .fc-vipl-sec__kicker {display:inline-block;font-family:var(--fc-font-display);font-weight:900;font-size:12px; letter-spacing:.16em;text-transform:uppercase;color:var(--fc-blue);margin-bottom:12px} /* --- griglia 6 vantaggi --- */ #main .fc-vipl-perks {display:grid;gap:20px} @media (min-width:700px) { #main .fc-vipl-perks {grid-template-columns:repeat(2,1fr)} } @media (min-width:1040px) { #main .fc-vipl-perks {grid-template-columns:repeat(3,1fr)} } #main .fc-vipl .fc-perk {position:relative;background:#fff;border:1px solid var(--fc-ink-200);border-radius:var(--fc-radius-lg); padding:26px;box-shadow:0 16px 34px -26px rgba(11,15,23,.4);transition:transform 180ms,box-shadow 180ms} #main .fc-vipl .fc-perk:hover {transform:translateY(-3px);box-shadow:0 22px 44px -24px rgba(11,15,23,.45)} #main .fc-vipl .fc-perk__icon {width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px; background:var(--fc-blue-50);color:var(--fc-blue)} #main .fc-vipl .fc-perk__icon [class^='fcl-ico-'] {width:28px;height:28px} #main .fc-vipl .fc-perk h3 {font-family:var(--fc-font-display);font-weight:900;font-size:19px;line-height:1.2;margin:0 0 8px; letter-spacing:-.01em} #main .fc-vipl .fc-perk p {margin:0;font-size:15px;line-height:1.6;color:var(--fc-ink-600)} #main .fc-vipl .fc-perk__tag {position:absolute;top:18px;right:18px;font-family:var(--fc-font-display);font-weight:900;font-size:11px; letter-spacing:.1em;text-transform:uppercase;color:#7a4a00;background:var(--fc-amber-bg); border:1px solid var(--fc-amber-border);border-radius:var(--fc-radius-pill);padding:5px 10px} #main .fc-vipl .fc-perk--hero {grid-column:1/-1;display:grid;gap:24px;align-items:center; background:linear-gradient(120deg,var(--fc-navy) 0%,#123a8f 100%);border-color:transparent;color:#fff} @media (min-width:700px) { #main .fc-vipl .fc-perk--hero {grid-template-columns:1.2fr .8fr;padding:34px} } #main .fc-vipl .fc-perk--hero h3 {font-size:clamp(22px,2.4vw,30px);color:#fff} #main .fc-vipl .fc-perk--hero p {color:rgba(219,232,254,.9);font-size:16px} #main .fc-vipl .fc-perk--hero .fc-perk__icon {background:rgba(255,207,56,.16);color:var(--fc-gold)} #main .fc-vipl .fc-perk--hero__figure {display:flex;justify-content:center} #main .fc-vipl .fc-perk--hero__figure img {border-radius:var(--fc-radius-md);box-shadow:0 24px 48px -20px rgba(0,0,0,.6); border:3px solid rgba(255,255,255,.22)} /* --- come funziona --- */ #main .fc-vipl-steps {display:grid;gap:22px;counter-reset:s} @media (min-width:820px) { #main .fc-vipl-steps {grid-template-columns:repeat(3,1fr)} } #main .fc-vipl .fc-step {position:relative;background:#fff;border:1px solid var(--fc-ink-200);border-radius:var(--fc-radius-lg);padding:28px} #main .fc-vipl .fc-step__n {width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-family:var(--fc-font-display); font-weight:900;font-size:18px;color:#fff;background:linear-gradient(180deg,var(--fc-blue),var(--fc-blue-deep)); box-shadow:rgba(20,86,240,.3) 0 8px 18px -6px;margin-bottom:16px} #main .fc-vipl .fc-step h3 {font-family:var(--fc-font-display);font-weight:900;font-size:18px;margin:0 0 8px} #main .fc-vipl .fc-step p {margin:0;font-size:14.5px;line-height:1.6;color:var(--fc-ink-600)} #main .fc-vipl .fc-step p a {color:var(--fc-blue);font-weight:700;text-decoration:underline} /* --- confronto --- */ #main .fc-vipl-cmp {max-width:900px;margin:0 auto;background:#fff;border:1px solid var(--fc-ink-200); border-radius:var(--fc-radius-lg);overflow:hidden} #main .fc-vipl-cmp table {width:100%;border-collapse:collapse;font-size:15px} #main .fc-vipl-cmp th, #main .fc-vipl-cmp td {padding:16px 18px;text-align:left;border-bottom:1px solid var(--fc-ink-200)} #main .fc-vipl-cmp thead th {font-family:var(--fc-font-display);font-weight:900;font-size:14px;text-transform:uppercase; letter-spacing:.08em;color:var(--fc-ink-600);background:var(--fc-ink-50)} #main .fc-vipl-cmp thead th:last-child {background:linear-gradient(180deg,var(--fc-navy),#123a8f);color:var(--fc-gold)} #main .fc-vipl-cmp td:first-child {font-weight:600;color:var(--fc-ink-800)} #main .fc-vipl-cmp td:nth-child(2) {color:var(--fc-ink-600)} #main .fc-vipl-cmp td:last-child {font-weight:700;color:var(--fc-blue-deep);background:var(--fc-blue-50)} #main .fc-vipl-cmp tbody tr:last-child td {border-bottom:0} #main .fc-vipl-cmp__scroll {overflow-x:auto} /* --- CTA intermedia --- */ #main .fc-vipl-mid {padding:56px 0;background:linear-gradient(100deg,var(--fc-navy),#123a8f);color:#fff;text-align:center} #main .fc-vipl-mid h2 {font-family:var(--fc-font-display);font-weight:900;font-size:clamp(24px,3vw,36px);line-height:1.1;margin:0 auto; max-width:36rem;letter-spacing:-.02em} #main .fc-vipl-mid p {margin:14px auto 26px;max-width:34rem;color:rgba(219,232,254,.9);font-size:16.5px;line-height:1.6} #main .fc-vipl-mid a {display:inline-flex;align-items:center;gap:10px;background:linear-gradient(180deg,#ffdc6a,var(--fc-gold)); color:#241700;font-family:var(--fc-font-display);font-weight:900;font-size:17px;padding:16px 32px; border-radius:var(--fc-radius-pill);box-shadow:0 18px 34px -14px rgba(255,207,56,.8)} /* --- FAQ --- Niente
/: l'HTMLPurifier di PrestaShop puo' rimuoverli dal contenuto CMS (non sono nella whitelist HTML4) e un accordion a e' escluso a priori (isCleanHtml rifiuta gli input). Div + una classe .is-open messa da fc-vip.js, che il tema serve fuori dal contenuto. */ #main .fc-vipl-faq {max-width:820px;margin:0 auto;display:grid;gap:12px} #main .fc-vipl .fc-faq {background:#fff;border:1px solid var(--fc-ink-200);border-radius:var(--fc-radius-md);overflow:hidden} #main .fc-vipl .fc-faq__q {cursor:pointer;padding:18px 22px;font-family:var(--fc-font-display);font-weight:800;font-size:16.5px; color:var(--fc-ink-900);display:flex;justify-content:space-between;gap:16px;align-items:center} #main .fc-vipl .fc-faq__q::after {content:"+";font-size:22px;color:var(--fc-blue);font-weight:700;line-height:1} #main .fc-vipl .fc-faq.is-open .fc-faq__q::after {content:"\2013"} #main .fc-vipl .fc-faq__q:focus-visible {outline:2px solid var(--fc-blue);outline-offset:-2px} #main .fc-vipl .fc-faq__a {display:none} #main .fc-vipl .fc-faq.is-open .fc-faq__a {display:block} /* senza JS (o prima che parta) le risposte restano leggibili: nessun contenuto nascosto */ #main .fc-vipl .fc-faq:not(.fc-faq--js) .fc-faq__a {display:block} #main .fc-vipl .fc-faq p {margin:0;padding:0 22px 20px;font-size:15px;line-height:1.65;color:var(--fc-ink-600)} #main .fc-vipl .fc-faq p a {color:var(--fc-blue);text-decoration:underline} /* --- form finale --- */ #main .fc-vipl-signup {padding:64px 0 72px;background: radial-gradient(60% 100% at 80% 0%,rgba(20,86,240,.5),transparent 60%), linear-gradient(140deg,var(--fc-navy),#0c2058)} #main .fc-vipl-signup__inner {display:grid;gap:40px;align-items:center} @media (min-width:980px) { #main .fc-vipl-signup__inner {grid-template-columns:.95fr 1.05fr;gap:56px} } #main .fc-vipl-signup__text {color:#fff} #main .fc-vipl-signup__text h2 {font-family:var(--fc-font-display);font-weight:900;font-size:clamp(26px,3.2vw,40px); line-height:1.08;margin:14px 0 16px;letter-spacing:-.02em} #main .fc-vipl-signup__text h2 em {font-style:normal;color:var(--fc-gold)} #main .fc-vipl-signup__text p {margin:0 0 20px;color:rgba(219,232,254,.9);font-size:16.5px;line-height:1.6;max-width:32rem} #main .fc-vipl-signup__list {list-style:none;margin:0;padding:0;display:grid;gap:10px} #main .fc-vipl-signup__list li {display:flex;gap:10px;align-items:center;font-size:15px;color:#fff} #main .fc-vipl .fc-vipl-signup__list [class^='fcl-ico-'] {width:20px;height:20px;flex:0 0 20px;color:var(--fc-gold)} /* --- note legali --- */ #main .fc-vipl-legal {padding:34px 0 44px;background:#fff;border-top:1px solid var(--fc-ink-200)} #main .fc-vipl-legal p {margin:0 auto;max-width:62rem;font-size:12.5px;line-height:1.7;color:var(--fc-ink-600)} #main .fc-vipl-legal a {color:var(--fc-blue);text-decoration:underline} /* --- sezione "farmacista dedicato" (split immagine + copy) --- */ #main .fc-vipl-pharma {padding:0} #main .fc-vipl-pharma__grid {display:grid;gap:0;align-items:stretch} @media (min-width:900px) { #main .fc-vipl-pharma__grid {grid-template-columns:1fr 1fr} } #main .fc-vipl-pharma__fig {position:relative;min-height:300px;background:var(--fc-ink-100)} #main .fc-vipl-pharma__fig img {width:100%;height:100%;object-fit:cover;position:absolute;inset:0} #main .fc-vipl-pharma__body {padding:48px 40px;background:var(--fc-ink-50);display:flex;flex-direction:column;justify-content:center} @media (min-width:1200px) { #main .fc-vipl-pharma__body {padding:64px 72px} } #main .fc-vipl-pharma__body h2 {font-family:var(--fc-font-display);font-weight:900;font-size:clamp(24px,2.8vw,36px); line-height:1.1;letter-spacing:-.02em;margin:14px 0 14px} #main .fc-vipl-pharma__body p {margin:0 0 14px;font-size:16.5px;line-height:1.65;color:var(--fc-ink-600);max-width:34rem} #main .fc-vipl-pharma__body p strong {color:var(--fc-ink-900)} /* --- chiusura: riepilogo + CTA al form (un solo form per pagina) --- */ #main .fc-vipl-close__box {background:#fff;border-radius:var(--fc-radius-xl);padding:32px;text-align:center; box-shadow:0 40px 80px -30px rgba(7,13,28,.6)} #main .fc-vipl-close__box h3 {font-family:var(--fc-font-display);font-weight:900;font-size:24px;margin:0 0 10px;line-height:1.15} #main .fc-vipl-close__box p {margin:0 0 22px;font-size:15px;color:var(--fc-ink-600);line-height:1.6} #main .fc-vipl-close__box a {display:inline-flex;align-items:center;gap:10px;background:linear-gradient(180deg,#ffdc6a,var(--fc-gold)); color:#241700;font-family:var(--fc-font-display);font-weight:900;font-size:17px;padding:16px 32px; border-radius:var(--fc-radius-pill);box-shadow:0 18px 34px -14px rgba(255,207,56,.8)} #main .fc-vipl-close__box small {display:block;margin-top:14px;font-size:12.5px;color:var(--fc-ink-400)} /* --- rifiniture mobile della landing --- */ @media (max-width:999px) { #main .fc-vipl-hero__inner {padding:36px 0 44px;gap:28px} #main .fc-vipl-hero__lead {font-size:16.5px} #main .fc-vipl-hero__proof li {font-size:13px;padding:8px 12px} #main .fc-vipl-hero__card .fc-vipcard {width:260px;border-radius:14px;padding:16px} #main .fc-vipl-hero__card .fc-vipcard__title {font-size:30px} #main .fc-vipl-hero__card {margin-top:26px} #main .fc-vipl .fc-vipform__head, #main .fc-vipl .fc-vipform__body {padding-left:20px;padding-right:20px} #main .fc-vipl-sec {padding:48px 0} #main .fc-vipl-pharma__body {padding:36px 24px} } /* --- barra CTA sticky: solo mobile, dove il modulo è sotto la piega --- */ #main .fc-vipl-sticky {display:none} @media (max-width:999px) { #main .fc-vipl-sticky {display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50; align-items:center;justify-content:space-between;gap:12px;padding:12px 16px; background:rgba(7,13,28,.96);backdrop-filter:blur(8px);border-top:1px solid rgba(255,255,255,.14)} #main .fc-vipl-sticky span {color:#fff;font-family:var(--fc-font-display);font-weight:800;font-size:14px;line-height:1.2} #main .fc-vipl-sticky small {display:block;color:rgba(219,232,254,.7);font-family:var(--fc-font-ui);font-weight:400;font-size:11.5px} #main .fc-vipl-sticky a {flex:0 0 auto;background:linear-gradient(180deg,#ffdc6a,var(--fc-gold));color:#241700; font-family:var(--fc-font-display);font-weight:900;font-size:14.5px;padding:13px 20px;border-radius:var(--fc-radius-pill)} } @media (max-width:899px) { #main .fc-vipl .fc-vipcard--tilt {transform:rotate(-4deg)} } /* ============================================================ ADATTAMENTO AL CONTENITORE DELLE PAGINE CMS templates/cms/page.tpl racchiude il contenuto in
= 768px, con un

{$cms.meta_title}

che duplicherebbe il titolo della pagina. Stessa soluzione gia' in produzione per le landing di categoria. ============================================================ */ /* NIENTE overflow-x qui: taglierebbe proprio lo sfondamento del wrapper. Con overflow-x:clip il fondo colorato veniva ritagliato al bordo dell'article, quindi iniziava esattamente dove inizia il testo: risultato, titoli e liste appiccicati al bordo della sezione e prime lettere tagliate a metà dal letter-spacing negativo. Il margine negativo del wrapper vale esattamente il padding del contenitore del tema, quindi resta dentro la viewport e non serve alcun taglio. */ #main article:has(.fc-vipl){max-width:none;padding:0} /* Larghezza delle sezioni: la detta il tema. Il contenuto porta sia .fc-vipl-ctn sia .fc-container, e sul sito un