/* ========================================================================== LANCIO SUBITO.IT — Funnel opt-in + thank you Foglio di stile unico, mobile-first. IMPIANTO La struttura tipografica e il ritmo delle sezioni ricalcano la logica della landing ROAS (top-bar, scala big/sub/description, divider, card con immagine, slider prove, CTA a pillola, FAQ a fisarmonica). ⚠️ DUE PAGINE, UN SOLO FOGLIO index.html e grazie.html condividono questo file. L'opt-in ha e tutti i suoi override — palette piatta rosso Subito / blu notte, tipografia mobile-first, blocchi nuovi — stanno nella SEZIONE 21, agganciati a quella classe. Le sezioni 01-20 restano la base comune: modificandole si modifica anche la thank you page. Se un ritocco riguarda solo l'opt-in, va scritto in sezione 21. INDICE 01. Token / variabili 02. Reset e base 03. Scala tipografica ("scaletta") 04. Layout: container, divider, sezioni 05. Top bar 06. Hero — equazione su due righe 07. VSL 08. CTA a pillola 09. Form opt-in 10. Card con immagine (benefit) 11. Slider prove WhatsApp 12. Blocchi di testo, checklist, elenchi 13. Serate, bio, FAQ 14. CTA finale e footer 15. Modale 16. Sticky CTA mobile 17. Microanimazioni 18. Override intl-tel-input 19. Breakpoint desktop 20. Thank you page (grazie.html) 21. Opt-in (.page-optin) — tinte piatte e leggibilità mobile ========================================================================== */ /* ── 01. TOKEN ─────────────────────────────────────────────────────────── */ :root { /* Rosso/arancio — colore guida, CTA e titoli */ --red: #FF3B2E; --red-dark: #DE2417; --red-ink: #D0200F; --red-soft: #FFF0EE; --red-line: #FFD2CC; --orange: #FF8A1E; /* Rosso del marchio, campionato dal logo ufficiale: usato sul titolo hero perché logo e headline devono leggersi come un blocco solo */ --subito: #F9423A; /* Gradiente di marca: è il "verde ROAS" tradotto in Subito */ --grad: linear-gradient(135deg, #FF8A1E 0%, #E8281B 100%); --grad-btn: linear-gradient(180deg, #FF9A3D 0%, #FF5A2B 40%, #DB2211 100%); --btn-edge: #A8170C; /* Tinte piatte per fondi e riquadri immagine */ --tint: #FFF4EF; --tint-2: #FFDCCB; /* Oro — bottone di invio sul pannello rosso, evidenziazioni */ --gold-1: #FFE07A; --gold-2: #F5C518; --gold-3: #C99A00; --gold-edge: #A88510; --gold-ink: #3A2A05; /* Indigo/viola — accento secondario (icone, riquadri informativi) */ --indigo: #3B2FD8; --indigo-soft: #EFEDFF; --indigo-line: #D9D4FF; --violet: #7B5CFF; /* Giallo — keyword ed evidenziazioni */ --yellow: #FFD43B; --yellow-soft: #FFE9A3; --yellow-ink: #6B4E00; /* Neutri */ --ink: #0F1020; --ink-2: #191A2E; --body: #334155; --muted: #64748B; --line: #E4E4EE; --soft: #F6F6FA; --soft-2: #F0F0F6; --page: #FAFAFC; --white: #FFFFFF; /* Raggi */ --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-pill: 9999px; /* Ombre leggere */ --sh-1: 0 4px 20px rgba(15, 16, 32, .05); --sh-2: 0 8px 30px rgba(15, 16, 32, .09); --sh-3: 0 14px 44px rgba(15, 16, 32, .14); --sh-brand: 0 12px 40px rgba(219, 34, 17, .32); /* Layout — stessa larghezza di contenuto della ROAS */ --w: 800px; --pad-x: 24px; /* Transizioni */ --t-fast: .15s cubic-bezier(.4, 0, .2, 1); --t: .28s cubic-bezier(.4, 0, .2, 1); } /* ── 02. RESET E BASE ──────────────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; } body { font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 1.0625rem; line-height: 1.7; color: var(--body); background: var(--page); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Vince sulle regole di display dei componenti (form, modale, sticky CTA) */ [hidden] { display: none !important; } img { display: block; max-width: 100%; height: auto; } svg { width: 1em; height: 1em; display: block; flex: none; } .svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } button, input { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 6px; } ::selection { background: var(--yellow-soft); color: var(--ink); } /* ── 03. SCALA TIPOGRAFICA ("SCALETTA") ────────────────────────────────── */ /* Tre gradini: il titolo grande in gradiente, quello medio in nero, il testo di appoggio piccolo. Le sezioni li alternano per creare ritmo. */ .big-headline { font-size: clamp(2.3rem, 8vw, 4.2rem); font-weight: 900; line-height: 1.04; letter-spacing: -.035em; text-align: center; text-wrap: balance; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Variante per i titoli molto lunghi (più di una decina di parole): stesso trattamento, un gradino più piccolo, altrimenti occupano mezzo schermo. */ .big-headline--long { font-size: clamp(1.9rem, 6.4vw, 3.2rem); line-height: 1.08; } .sub-headline { font-size: clamp(1.35rem, 5vw, 2.3rem); font-weight: 900; line-height: 1.14; letter-spacing: -.025em; color: var(--ink); text-align: center; text-wrap: balance; } .mini-headline { font-size: clamp(1.02rem, 3.7vw, 1.35rem); font-weight: 800; line-height: 1.35; letter-spacing: -.01em; color: var(--ink); text-align: center; text-wrap: balance; } /* Spaziatura fra i gradini di uno stesso titolo: minima, devono leggersi come un blocco unico */ .headline-stack { display: grid; gap: 6px; margin-bottom: clamp(26px, 5vw, 40px); } .headline-stack--tight { gap: 2px; } .description { font-size: clamp(1.02rem, 3.9vw, 1.15rem); font-weight: 600; color: var(--body); line-height: 1.55; text-align: center; } .description+.description { margin-top: 9px; } b, strong { font-weight: 800; color: var(--ink); } /* Testo in gradiente riutilizzabile su porzioni di titolo */ .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Riflesso animato: solo sul numero chiave della hero */ .shine-text { background: linear-gradient(90deg, #E8281B 0%, #FF6A1E 25%, #FFC24D 50%, #FF6A1E 75%, #E8281B 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: text-shine 3.4s ease-in-out infinite; } @keyframes text-shine { 0% { background-position: 200% center; } 100% { background-position: -200% center; } } /* Evidenziazione keyword — pennarello giallo */ .mark-yellow { background: linear-gradient(180deg, transparent 58%, var(--yellow-soft) 58%); padding: 0 .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .underline-brand { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 4px; } /* Numeri e cifre forti */ .num { color: var(--red-ink); font-weight: 900; white-space: nowrap; } .word-red { color: var(--red-ink); font-weight: 900; } .word-yellow { color: var(--yellow); font-weight: 900; } /* Segnaposto da sostituire prima della pubblicazione */ .ph { display: inline-block; background: #FFF6D6; border: 1px dashed #E3B92C; border-radius: 5px; padding: 0 .28em; color: var(--yellow-ink); font-weight: 700; font-size: .92em; line-height: 1.3; white-space: nowrap; } /* Nei titoli grandi resta riconoscibile ma non spezza la composizione */ .big-headline .ph, .sub-headline .ph, .mini-headline .ph, .night .ph { background: rgba(255, 212, 59, .26); border-color: rgba(190, 145, 10, .55); color: inherit; -webkit-text-fill-color: currentColor; font-size: .9em; padding: 0 .16em; } .big-headline .ph { color: var(--red-ink); } .section-ink .ph { background: rgba(255, 212, 59, .14); border-color: rgba(255, 212, 59, .5); color: var(--yellow); } /* Sul pannello rosso il segnaposto diventa bianco. Le card .night restano bianche: lì vale la regola qui sopra. */ .signup-panel .ph { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .6); color: #fff; } /* ── 04. LAYOUT: CONTAINER, DIVIDER, SEZIONI ───────────────────────────── */ .container, .wrap { width: 100%; max-width: calc(var(--w) + var(--pad-x) * 2); margin-inline: auto; padding-inline: var(--pad-x); } .container>section { padding-block: 8px; } /* Linea sottile che scandisce il passaggio fra una sezione e l'altra */ .divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); margin: clamp(30px, 6vw, 50px) 0; } /* Blocco a tinta piatta a tutta larghezza (equivalente di .section-green) */ .section-tint { background: var(--tint); padding: clamp(34px, 8vw, 50px) clamp(20px, 5vw, 36px); margin: clamp(24px, 5vw, 34px) calc(var(--pad-x) * -1); overflow: hidden; } .section-ink { background: var(--ink); color: rgba(255, 255, 255, .8); padding: clamp(34px, 8vw, 50px) clamp(20px, 5vw, 36px); margin: clamp(24px, 5vw, 34px) calc(var(--pad-x) * -1); border-radius: 0; } .section-ink .sub-headline, .section-ink .mini-headline { color: #fff; } .section-ink .text-section p { color: rgba(255, 255, 255, .78); } .section-ink .text-section p strong, .section-ink b { color: #fff; } .section-ink b.word-yellow, .section-ink .word-yellow { color: var(--yellow); } /* ── 05. TOP BAR ───────────────────────────────────────────────────────── */ .top-bar { /* Rosso pieno, niente gradiente. È il rosso profondo e non quello del logo perché qui il testo è piccolo (fino a 9,6px) e serve contrasto: su #DE2417 il bianco sta a 4,8:1, sul rosso chiaro scenderebbe a 3,6:1 */ background: var(--red-dark); color: #fff; text-align: center; padding: 12px 10px; font-weight: 700; letter-spacing: .01em; } /* La riga evento deve stare su una sola linea: nowrap + corpo che scala con la larghezza dello schermo. Il minimo è tarato sulla riga più lunga che ci passa ("Evento LIVE Gratuito: LUN 7 – MAR 8 – MER 9 SETTEMBRE · ORE 20:30"): deve entrare anche a 320px senza essere tagliata. */ .top-bar__line { display: block; white-space: nowrap; font-size: clamp(.5rem, 2.5vw, .95rem); line-height: 1.4; } .top-bar strong { color: #fff; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; } .top-bar__dot { display: inline-block; width: .55em; height: .55em; margin-right: .45em; border-radius: 50%; background: #fff; animation: pulse-dot 2s infinite; } @keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); } 70% { box-shadow: 0 0 0 .7em rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } /* Nella barra i segnaposto restano compatti, altrimenti la riga non ci sta */ .top-bar .ph { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .55); color: #fff; padding: 0 .16em; font-size: .95em; } /* ── 06. HERO — EQUAZIONE SU DUE RIGHE ─────────────────────────────────── */ /* Hero volutamente compatta: la VSL deve entrare quasi subito */ .hero { text-align: center; padding: clamp(12px, 3vw, 22px) 0 clamp(22px, 4.6vw, 34px); } /* Due righe, non tre: telefono 3D + logo sulla prima, «= 150€ AL GIORNO» sulla seconda. L'equazione si legge in un colpo d'occhio e occupa quasi metà dell'altezza di prima. */ .eq { display: grid; justify-items: center; gap: clamp(2px, .6vw, 6px); margin-bottom: clamp(10px, 2.4vw, 16px); font-weight: 900; letter-spacing: -.035em; line-height: 1; } /* RIGA 1 — telefono e logo sempre affiancati. Il corpo è in min() e non in clamp(): senza un minimo in rem la riga non può sforare la larghezza dello schermo, nemmeno a 320px. */ .eq__row1 { display: flex; align-items: center; justify-content: center; gap: .18em; /* respiro per la rotazione del logo: ruotando occupa più altezza dei suoi pixel */ padding-block: .08em; /* il massimo è tarato sul desktop: sotto i ~760px vince sempre il termine in vw, quindi sul telefono questo valore non cambia nulla. Serve solo perché a schermo grande la riga 1 non resti sproporzionata rispetto al numero. */ font-size: min(8.6vw, 4.1rem); color: var(--ink); } /* Telefono 3D: si vincola SOLO l'altezza e la larghezza resta auto, così l'immagine (600 × 600, quadrata) non si deforma a nessuna larghezza. */ .eq__phone { height: 2.4em; width: auto; } /* Logo ufficiale Subito, appena inclinato. Nessuna ombra e nessun fondo: il marchio va lasciato pulito, l'inclinazione basta a dargli movimento. L'altezza è in em, così segue il corpo della riga a ogni larghezza. */ .eq__logo { height: 1.1em; width: auto; transform: rotate(-4deg); transform-origin: center; } /* RIGA 2 — il gradino più alto della scaletta, in rosso Subito pieno */ .eq__row2 { display: flex; align-items: baseline; justify-content: center; gap: .1em; font-size: min(9.4vw, 4.5rem); color: var(--subito); } /* Deve restare su UNA riga anche a 320px: da qui il nowrap. Il corpo della riga è tarato in vw proprio perché la stringa ci entri sempre per intero. */ .eq__num { white-space: nowrap; letter-spacing: -.045em; } /* Gli operatori restano leggibili ma non rubano peso alle parole */ .eq__op { font-style: normal; font-size: .72em; color: var(--indigo); } /* Terzo e quarto gradino della scaletta: il paragrafo di apertura è appena sotto al titolo per peso, il secondo scende ancora di un gradino. */ .hero .description { max-width: 660px; margin-inline: auto; } .hero .description--lead { max-width: 700px; font-size: clamp(1.16rem, 4.75vw, 1.6rem); font-weight: 700; line-height: 1.42; letter-spacing: -.012em; color: var(--ink); } .hero .description--sub { font-size: clamp(1rem, 4vw, 1.22rem); font-weight: 600; line-height: 1.55; color: var(--body); margin-top: clamp(11px, 2.6vw, 16px); } /* ── 07. VSL ───────────────────────────────────────────────────────────── */ /* Contenitore responsive 16:9. Per pubblicare il video basta sostituire il contenuto di #vsl-embed con lo snippet Vidalytics: l'embed porta con sé il proprio padding-top 56,25%, che coincide con l'aspect-ratio qui sotto. */ .vsl { margin: clamp(18px, 4vw, 26px) auto 0; max-width: 100%; } .vsl__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: #000; box-shadow: 0 10px 40px rgba(0, 0, 0, .18); } /* Copertina della VSL: riempie il frame 16:9 finché non arriva l'embed Vidalytics. `cover` perché la creatività è 1672 × 941, un soffio più alta del 16:9 esatto: così non compaiono bande nere. */ .vsl__cover { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } .vsl__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; background: linear-gradient(150deg, #1B1C30 0%, #0F1020 60%, #2A1410 100%); } .vsl__play { display: grid; place-items: center; width: clamp(54px, 14vw, 76px); height: clamp(54px, 14vw, 76px); border-radius: 50%; background: var(--grad-btn); color: #fff; font-size: clamp(1.5rem, 5vw, 2.1rem); box-shadow: 0 10px 30px rgba(232, 40, 27, .5); animation: cta-pulse 2.4s ease-in-out infinite; } .vsl__play svg { margin-left: .08em; } .vsl__label { font-weight: 900; font-size: clamp(.9rem, 3.6vw, 1.15rem); letter-spacing: .04em; color: #fff; text-transform: uppercase; } .vsl__hint { font-size: .78rem; color: rgba(255, 255, 255, .5); font-weight: 600; } /* ── 08. CTA A PILLOLA ─────────────────────────────────────────────────── */ .btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; border: 0; cursor: pointer; text-align: center; padding: 16px 20px; border-radius: var(--r-md); font-family: inherit; transition: transform var(--t-fast), box-shadow var(--t-fast); } .btn--cta { background: var(--grad-btn); color: #fff; box-shadow: 0 8px 22px rgba(219, 34, 17, .3); } .btn--cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(219, 34, 17, .4); } .btn--cta:active { transform: translateY(0); } .btn__main { display: inline-flex; align-items: center; justify-content: center; gap: .4em; flex-wrap: wrap; font-weight: 900; font-size: clamp(.98rem, 4vw, 1.15rem); line-height: 1.2; letter-spacing: .01em; text-transform: uppercase; } /* Ultima parola e freccia restano solidali: la freccia non finisce mai da sola su una riga quando il testo del bottone va a capo */ .btn__nw { display: inline-flex; align-items: center; gap: .35em; white-space: nowrap; } .btn__arrow { width: .95em; height: .95em; transition: transform var(--t-fast); } .btn:hover .btn__arrow { transform: translateX(4px); } .btn__sub { font-size: .82rem; font-weight: 600; line-height: 1.35; color: rgba(255, 255, 255, .92); text-transform: none; letter-spacing: 0; } /* Formato grande: è la CTA ripetuta lungo la pagina */ .btn--xl { padding: clamp(19px, 4.6vw, 26px) 22px; border-radius: var(--r-pill); border-bottom: 6px solid var(--btn-edge); text-shadow: 0 2px 4px rgba(0, 0, 0, .22); box-shadow: 0 10px 30px rgba(219, 34, 17, .45), inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -2px 4px rgba(0, 0, 0, .15); animation: cta-pulse 2.4s ease-in-out infinite; } .btn--xl .btn__main { font-size: clamp(1.32rem, 5.2vw, 2.3rem); letter-spacing: .015em; } .btn--xl .btn__sub { font-size: clamp(.84rem, 3vw, 1rem); margin-top: 2px; } .btn--xl:hover { animation-play-state: paused; transform: translateY(-2px) scale(1.02); } .btn--xl:active { transform: translateY(3px) scale(.99); border-bottom-width: 2px; } @keyframes cta-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } } /* Oro: usato per l'invio del form, che vive sul pannello rosso */ .btn--gold { background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 40%, var(--gold-3) 100%); color: var(--gold-ink); border-bottom-color: var(--gold-edge); text-shadow: none; box-shadow: 0 10px 30px rgba(201, 154, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -2px 4px rgba(0, 0, 0, .1); } .btn--gold .btn__sub { color: rgba(58, 42, 5, .78); } /* Dentro il pannello lo spazio è minore: il corpo scende di un gradino */ .signup-panel .btn--xl .btn__main { font-size: clamp(1.12rem, 4.6vw, 1.75rem); } .cta-wrapper { margin: clamp(26px, 5vw, 40px) 0; text-align: center; } .cta-note { margin-top: 12px; font-size: .86rem; font-weight: 700; letter-spacing: .04em; color: var(--red-ink); text-align: center; } /* ── 09. FORM OPT-IN ───────────────────────────────────────────────────── */ /* Pannello a gradiente di marca, campi in trasparenza, invio in oro */ .signup-panel { max-width: 520px; margin: clamp(24px, 5vw, 36px) auto 0; background: var(--grad); border-radius: var(--r-xl); padding: clamp(26px, 6vw, 40px) clamp(20px, 5vw, 30px); box-shadow: var(--sh-brand); scroll-margin-top: 16px; text-align: center; } .signup-panel__title { font-size: clamp(1.4rem, 5vw, 2rem); font-weight: 900; line-height: 1.15; letter-spacing: -.02em; color: #fff; } .signup-panel__title em { font-style: italic; color: var(--gold-1); } .signup-panel__sub { margin: 8px 0 22px; font-size: .92rem; font-weight: 700; color: rgba(255, 255, 255, .85); } .optin-form { display: grid; gap: 12px; text-align: left; } .field label { display: block; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: rgba(255, 255, 255, .8); margin-bottom: 6px; } .field__box { display: flex; align-items: center; background: rgba(255, 255, 255, .15); border: 1.5px solid rgba(255, 255, 255, .34); border-radius: var(--r-md); transition: border-color var(--t-fast), background var(--t-fast); } .field__box:focus-within { border-color: var(--gold-1); background: rgba(255, 255, 255, .24); } .field__icon { display: grid; place-items: center; width: 46px; font-size: 1.1rem; color: rgba(255, 255, 255, .6); flex: none; } .field__box input { flex: 1 1 auto; width: 100%; min-width: 0; border: 0; background: transparent; padding: 15px 16px 15px 0; font-size: 1.02rem; font-weight: 600; color: #fff; border-radius: var(--r-md); } .field--phone .field__box input { padding-left: 14px; } .field__box input::placeholder { color: rgba(255, 255, 255, .6); font-weight: 500; } .field__box input:focus { outline: none; } .field__error { display: none; margin-top: 6px; font-size: .82rem; font-weight: 700; color: var(--gold-1); } .field.has-error .field__error { display: block; } .field.has-error .field__box { border-color: var(--gold-1); background: rgba(0, 0, 0, .12); } .optin-form .btn { margin-top: 8px; } .optin-form.is-submitting .btn { opacity: .7; pointer-events: none; } .form-note { margin-top: 4px; text-align: center; font-size: .78rem; font-weight: 600; color: rgba(255, 255, 255, .8); } .form-success { padding: 10px 0 4px; text-align: center; color: #fff; } .form-success__icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%; background: rgba(255, 255, 255, .2); border: 1.5px solid rgba(255, 255, 255, .55); color: #fff; font-size: 1.6rem; } .form-success__title { font-size: 1.3rem; font-weight: 900; color: #fff; } .form-success__text { margin-top: 4px; font-size: .95rem; font-weight: 600; color: rgba(255, 255, 255, .85); } /* ── 10. CARD CON IMMAGINE (BENEFIT) ───────────────────────────────────── */ .benefit-cards { display: grid; gap: 16px; margin: clamp(24px, 5vw, 34px) 0 clamp(28px, 5vw, 40px); } .benefit-card { min-width: 0; background: var(--tint); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); transition: transform var(--t), box-shadow var(--t); } .benefit-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); } /* Riquadro immagine: finché il file non c'è resta un segnaposto grafico, così la pagina non genera 404 né immagini rotte */ .benefit-card-img { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 140px; padding: 14px; text-align: center; background: repeating-linear-gradient(135deg, rgba(232, 40, 27, .05) 0 10px, transparent 10px 20px), var(--tint-2); color: var(--red-ink); } .benefit-card-img svg { font-size: 1.6rem; opacity: .55; } .benefit-card-img span { font-size: .72rem; font-weight: 800; letter-spacing: .02em; opacity: .65; } .benefit-card-img img { width: 100%; height: auto; } /* Stato "riempito": quando l'immagine reale viene inserita */ .benefit-card-img--filled { display: block; min-height: 0; padding: 0; background: var(--tint-2); } .benefit-card-body { display: flex; gap: 10px; align-items: flex-start; padding: 16px 18px 20px; } .benefit-check { display: grid; place-items: center; width: 26px; height: 26px; flex: none; margin-top: 3px; border-radius: 8px; background: var(--grad); color: #fff; font-size: .8rem; } /* Corpo delle card allineato alla scala ROAS: il testo dentro la card è volutamente grande, il titolo un gradino sopra */ .benefit-card-body p { margin: 0; font-size: clamp(1.14rem, 3.8vw, 1.32rem); line-height: 1.55; text-align: left; } .benefit-card-body p strong { display: block; margin-bottom: 5px; font-size: 1.18em; line-height: 1.22; color: var(--red-ink); } /* ── 11. SLIDER PROVE WHATSAPP ─────────────────────────────────────────── */ /* Due file che scorrono in direzioni opposte, con sfumatura ai bordi. Il contenuto è duplicato: serve per il loop continuo. */ .slider-wrapper { position: relative; overflow: hidden; margin: clamp(20px, 4vw, 30px) calc(var(--pad-x) * -1); } .section-tint .slider-wrapper { margin-inline: calc(clamp(20px, 5vw, 36px) * -1); } .slider-wrapper::before, .slider-wrapper::after { content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none; } .slider-wrapper::before { left: 0; background: linear-gradient(to right, var(--tint), rgba(255, 244, 239, 0)); } .slider-wrapper::after { right: 0; background: linear-gradient(to left, var(--tint), rgba(255, 244, 239, 0)); } /* Quando lo slider sta su fondo pagina e non su .section-tint */ .slider-wrapper--onpage::before { background: linear-gradient(to right, var(--page), rgba(250, 250, 252, 0)); } .slider-wrapper--onpage::after { background: linear-gradient(to left, var(--page), rgba(250, 250, 252, 0)); } .slider-track { display: flex; gap: 14px; width: max-content; } .slider-top { animation: scroll-left 38s linear infinite; margin-bottom: 14px; } .slider-bottom { animation: scroll-right 38s linear infinite; } .slider-wrapper:hover .slider-track { animation-play-state: paused; } @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes scroll-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } /* Piastrella segnaposto: stesse proporzioni di uno screenshot da telefono */ .slider-item { flex-shrink: 0; width: clamp(150px, 42vw, 210px); height: clamp(266px, 74vw, 372px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px; text-align: center; border: 2px dashed rgba(232, 40, 27, .3); border-radius: var(--r-md); background: repeating-linear-gradient(135deg, rgba(232, 40, 27, .04) 0 10px, transparent 10px 20px), var(--white); color: var(--red-ink); } .slider-item svg { font-size: 1.6rem; opacity: .5; } .slider-item span { font-size: .72rem; font-weight: 800; line-height: 1.35; opacity: .65; } .slider-track img { flex-shrink: 0; height: clamp(266px, 74vw, 372px); width: auto; border-radius: var(--r-md); } /* ── 12. BLOCCHI DI TESTO, CHECKLIST, ELENCHI ──────────────────────────── */ .text-section { margin: clamp(24px, 5vw, 36px) 0; } .text-section p { font-size: clamp(1.1rem, 4.2vw, 1.24rem); line-height: 1.72; margin-bottom: 14px; text-align: left; } .text-section p:last-child { margin-bottom: 0; } .text-section p strong { color: var(--ink); } .text-lead { font-size: clamp(1.2rem, 4.6vw, 1.44rem) !important; font-weight: 800; color: var(--ink) !important; line-height: 1.38 !important; } .text-center p, .text-center { text-align: center; } /* Righe "senza / niente / nessun" */ .nope-row { display: grid; gap: 10px; margin: clamp(20px, 4vw, 28px) auto 0; max-width: 720px; } .nope { display: flex; align-items: center; gap: 12px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px 16px; font-size: .97rem; font-weight: 800; color: var(--ink); text-align: left; box-shadow: var(--sh-1); } .nope__icon { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--red-soft); color: var(--red); font-size: .78rem; } .nope-row--stack { max-width: 560px; margin-block: clamp(20px, 4vw, 26px); } /* Citazioni degli scettici */ .quotes { display: grid; gap: 10px; margin: clamp(20px, 4vw, 26px) 0; } .quotes li { background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--violet); border-radius: var(--r-sm); padding: 12px 16px; font-style: italic; font-weight: 600; color: var(--ink); font-size: 1rem; line-height: 1.55; } .quotes__lead { display: block; font-style: normal; font-weight: 800; font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); } /* Confronto "se non funziona / se funziona" */ .balance { display: grid; gap: 12px; margin: clamp(24px, 5vw, 34px) 0; } .balance__side { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--sh-1); } .balance__tag { display: block; margin-bottom: 4px; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .balance__side p { font-size: clamp(1.08rem, 4.4vw, 1.28rem); font-weight: 800; color: var(--ink); line-height: 1.35; } .balance__side--win { background: var(--tint); border-color: var(--red-line); } .balance__side--win .balance__tag { color: var(--red-ink); } /* Metafora della ricetta */ .recipe { margin: clamp(24px, 5vw, 34px) 0 0; background: linear-gradient(180deg, #FFFBEC, var(--white)); border: 1.5px solid var(--yellow-soft); border-radius: var(--r-lg); padding: clamp(22px, 5vw, 30px); display: grid; gap: 10px; font-size: 1.05rem; line-height: 1.7; } .recipe__hit { font-size: clamp(1.2rem, 5vw, 1.5rem); font-weight: 900; color: var(--ink); } /* Elenco con spunta (per chi è adatto / cosa vedrai) */ .checklist { display: grid; gap: 12px; margin: clamp(22px, 4vw, 30px) 0; } .checklist li { display: flex; gap: 13px; align-items: flex-start; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; box-shadow: var(--sh-1); } .checklist p { font-size: clamp(1.08rem, 4.1vw, 1.2rem); line-height: 1.6; } .check-ico { display: grid; place-items: center; width: 26px; height: 26px; flex: none; margin-top: 3px; border-radius: 8px; background: var(--grad); color: #fff; font-size: .8rem; } /* ── 13. SERATE, BIO, FAQ ──────────────────────────────────────────────── */ /* Pannello a gradiente con dentro le tre card bianche delle serate */ .event-date-section { background: var(--grad); border-radius: var(--r-xl); padding: clamp(26px, 6vw, 40px) clamp(18px, 4vw, 30px); margin: clamp(22px, 4vw, 30px) 0; box-shadow: var(--sh-brand); text-align: center; } .nights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 auto; max-width: 620px; } .night { display: grid; gap: 3px; justify-items: center; text-align: center; background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--red); border-radius: var(--r-md); padding: 16px 8px; box-shadow: var(--sh-1); } .night__n { font-size: .66rem; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; color: var(--red-ink); } .night__day, .night__date { font-size: .8rem; font-weight: 800; color: var(--ink); } .night__time { margin-top: 2px; font-size: .74rem; font-weight: 700; color: var(--muted); } /* Variante "calendario" usata nell'opt-in: fascia rossa col mese in alto, numero del giorno grande al centro, fascia gialla col conto alla rovescia in basso. Le due fasce vanno a filo del bordo, quindi la card non ha padding proprio: lo mettono le parti interne. */ /* Le righe: mese, giorno, numero, ora, countdown. La quarta è 1fr così, se una card cresce (es. "MERCOLEDÌ" che va a capo), lo spazio in più finisce lì in mezzo e le tre fasce gialle restano allineate in fondo. */ .night--cal { gap: 0; padding: 0; overflow: hidden; border-top-width: 1px; grid-template-rows: auto auto auto 1fr auto; } .night__month { display: block; width: 100%; padding: 7px 4px; background: var(--red-dark); color: #fff; font-size: .58rem; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; } .night--cal .night__day { margin-top: 10px; font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } .night__num { font-size: clamp(2.5rem, 12vw, 3.6rem); font-weight: 900; line-height: 1; letter-spacing: -.04em; color: var(--red-ink); } .night--cal .night__time { display: flex; align-items: center; align-self: start; gap: 4px; margin: 8px 0 12px; padding: 4px 9px; border-radius: var(--r-pill); background: var(--red-soft); color: var(--red-ink); font-size: .66rem; font-weight: 800; white-space: nowrap; } /* Conto alla rovescia: resta nascosto finché js/main.js non lo compila, così senza JS non può mostrare un numero di giorni sbagliato. */ .night__cd { display: grid; gap: 1px; width: 100%; padding: 8px 4px; background: var(--yellow); color: var(--ink); line-height: 1.15; } .night__cd-lbl { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } .night__cd-val { font-size: .82rem; font-weight: 900; } .night__cd-val b { font-size: 1.25em; } /* Foto della bio: segnaposto finché il file non c'è */ .bio-photo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 4 / 5; max-width: 280px; width: 100%; margin: 0 auto clamp(22px, 4vw, 30px); padding: 16px; text-align: center; color: var(--red-ink); background: repeating-linear-gradient(135deg, rgba(232, 40, 27, .05) 0 10px, transparent 10px 20px), var(--tint-2); border-radius: var(--r-lg); } .bio-photo svg { font-size: 1.8rem; opacity: .55; } .bio-photo span { font-size: .76rem; font-weight: 800; opacity: .7; } /* Con la foto reale il riquadro si adatta all'immagine e occupa tutta la colonna, come nella ROAS (una sola immagine, niente foto nelle card) */ .bio-photo--filled { aspect-ratio: auto; max-width: 100%; padding: 0; background: none; border-radius: var(--r-lg); overflow: hidden; } /* FAQ: chiusa a gradiente di marca, aperta bianca (logica ROAS) */ .faq { display: grid; gap: 12px; } .faq__item { background: var(--grad-btn); border-radius: var(--r-md); border-bottom: 4px solid var(--btn-edge); overflow: hidden; box-shadow: 0 6px 20px rgba(219, 34, 17, .26), inset 0 1px 0 rgba(255, 255, 255, .3); transition: transform var(--t), box-shadow var(--t), background var(--t); } .faq__item:hover { transform: translateY(-2px); } .faq__item[open] { background: var(--white); border-bottom-color: var(--line); box-shadow: var(--sh-2); transform: none; } .faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 20px; cursor: pointer; list-style: none; } .faq__item summary::-webkit-details-marker { display: none; } .faq__q { font-size: clamp(1rem, 3.9vw, 1.2rem); font-weight: 800; line-height: 1.35; letter-spacing: -.01em; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .2); } .faq__item[open] .faq__q { color: var(--red-ink); text-shadow: none; } .faq__toggle { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .25); color: #fff; font-size: .85rem; transition: transform var(--t), background var(--t), color var(--t); } .faq__item[open] .faq__toggle { transform: rotate(45deg); background: var(--tint); color: var(--red-ink); } .faq__a { padding: 0 20px 20px; } .faq__a p { font-size: clamp(1.08rem, 4vw, 1.2rem); line-height: 1.66; } /* ── 14. CTA FINALE E FOOTER ───────────────────────────────────────────── */ .final-cta { margin: clamp(30px, 6vw, 46px) 0 clamp(20px, 4vw, 30px); text-align: center; } .footer { background: var(--ink); color: rgba(255, 255, 255, .6); padding-block: clamp(34px, 6vw, 50px); text-align: center; } .footer__brand { margin-bottom: 12px; font-size: .72rem; font-weight: 900; letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 255, 255, .85); } .footer__legal { font-size: .9rem; font-weight: 600; color: rgba(255, 255, 255, .72); } .footer__legal a { color: #fff; text-decoration: underline; text-underline-offset: 3px; transition: color var(--t-fast); } .footer__legal a:hover { color: var(--yellow); } .footer__disclaimer { max-width: 560px; margin: 14px auto 0; font-size: .78rem; line-height: 1.6; color: rgba(255, 255, 255, .45); } /* ── 15. MODALE ────────────────────────────────────────────────────────── */ .modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-start; justify-content: center; padding: 16px; overflow-y: auto; overscroll-behavior: contain; } .modal__backdrop { position: fixed; inset: 0; background: rgba(15, 16, 32, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade-in .2s ease both; } .modal__dialog { position: relative; z-index: 1; width: 100%; max-width: 480px; margin: auto; animation: modal-in .28s cubic-bezier(.2, .8, .3, 1) both; } /* Dentro la modale il pannello del form non ha margini propri */ .modal__dialog .signup-panel { margin: 0; max-width: none; } .modal__close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--ink); font-size: .95rem; cursor: pointer; transition: background var(--t-fast), transform var(--t-fast); } .modal__close:hover { background: #fff; transform: rotate(90deg); } body.modal-open { overflow: hidden; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } } /* ── 16. STICKY CTA MOBILE ─────────────────────────────────────────────── */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform var(--t); } .sticky-cta.is-visible { transform: none; } .sticky-cta .btn { padding: 14px 18px; animation: none; } .sticky-cta .btn__main { font-size: clamp(.95rem, 4vw, 1.1rem); } body.has-sticky-cta .footer { padding-bottom: calc(clamp(34px, 6vw, 50px) + 74px); } @media (min-width: 861px) { .sticky-cta { display: none; } body.has-sticky-cta .footer { padding-bottom: clamp(34px, 6vw, 50px); } } /* ── 17. MICROANIMAZIONI ───────────────────────────────────────────────── */ .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s cubic-bezier(.2, .7, .3, 1), transform .5s cubic-bezier(.2, .7, .3, 1); } .js .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .js .reveal { opacity: 1; transform: none; } .slider-track { animation: none !important; } } /* ── 18. OVERRIDE intl-tel-input ───────────────────────────────────────── */ /* La libreria arriva da CDN: se non fosse disponibile il campo resta un normale input tel e il form continua a funzionare. */ .field--phone .iti { width: 100%; display: block; } .field--phone .iti--separate-dial-code .iti__selected-flag { background-color: transparent; border-radius: var(--r-md) 0 0 var(--r-md); padding-left: 14px; } .field--phone .iti__selected-dial-code { font-weight: 800; color: #fff; } .field--phone .iti__arrow { border-top-color: rgba(255, 255, 255, .7); } .field--phone .iti__country-list { max-width: min(320px, calc(100vw - 56px)); border-radius: var(--r-md); border: 1px solid var(--line); box-shadow: var(--sh-2); font-size: .92rem; color: var(--ink); z-index: 10; } .modal__dialog .field--phone .iti__country-list { max-width: min(300px, calc(100vw - 76px)); } .field--phone .iti__country.iti__highlight { background: var(--tint); } /* ── 19. BREAKPOINT DESKTOP ────────────────────────────────────────────── */ @media (min-width: 560px) { .balance { grid-template-columns: 1fr 1fr; } } @media (min-width: 700px) { .nope-row { grid-template-columns: repeat(3, 1fr); } .nope-row--stack { grid-template-columns: 1fr; } .nope { flex-direction: column; text-align: center; gap: 9px; padding: 18px 14px; } .nope-row--stack .nope { flex-direction: row; text-align: left; padding: 14px 18px; } .benefit-cards { grid-template-columns: repeat(2, 1fr); gap: 20px; } .benefit-card-body p { font-size: 1.05rem; } .checklist--2 { grid-template-columns: repeat(2, 1fr); } .night { padding: 20px 12px; } .night--cal { padding: 0; } .night__n { font-size: .74rem; } .night__day, .night__date { font-size: .95rem; } .night__time { font-size: .82rem; } .night__month { font-size: .66rem; } .night--cal .night__day { margin-top: 14px; font-size: .8rem; } .night--cal .night__time { font-size: .74rem; } .night__cd-lbl { font-size: .68rem; } .night__cd-val { font-size: .95rem; } } @media (min-width: 861px) { body { font-size: 1.09rem; } .text-section p { font-size: 1.1rem; } .slider-wrapper::before, .slider-wrapper::after { width: 90px; } } /* Sotto i 400px il gradino più alto del titolo va contenuto */ @media (max-width: 399px) { :root { --pad-x: 18px; } } /* ========================================================= 20. THANK YOU PAGE --------------------------------------------------------- Stili usati SOLO da grazie.html. Tutto il resto (token, tipografia, bottoni, VSL, serate, footer, microanimazioni) è ereditato dall'opt-in. TY-01. Banner di avviso TY-02. Percorso in 5 passi TY-03. Riquadri informativi (mail / community) TY-04. Bottoni WhatsApp e Calendario TY-05. Nota di configurazione TY-06. Breakpoint desktop ========================================================= */ /* ── TY-01. BANNER DI AVVISO ───────────────────────────────────────────── */ .ty-alert { position: relative; overflow: hidden; padding-block: clamp(28px, 6vw, 52px) clamp(32px, 7vw, 58px); text-align: center; background: var(--grad); color: #fff; } .ty-alert .brandmark { display: block; margin-bottom: clamp(16px, 4vw, 24px); font-size: .72rem; font-weight: 900; letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 255, 255, .8); } .ty-alert__icon { display: grid; place-items: center; width: clamp(46px, 12vw, 60px); height: clamp(46px, 12vw, 60px); margin: 0 auto 16px; border-radius: 50%; background: rgba(255, 255, 255, .18); border: 1.5px solid rgba(255, 255, 255, .5); color: #fff; font-size: clamp(1.4rem, 5vw, 1.85rem); animation: ty-pulse 2.2s infinite; } @keyframes ty-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); } 70% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } .ty-alert__title { max-width: 880px; margin-inline: auto; font-size: clamp(1.48rem, 6.2vw, 2.65rem); line-height: 1.13; letter-spacing: -.025em; font-weight: 900; color: #fff; text-wrap: balance; } .ty-alert__sub { max-width: 700px; margin: clamp(14px, 3.2vw, 20px) auto 0; font-size: clamp(1rem, 4.2vw, 1.2rem); font-weight: 700; line-height: 1.5; color: rgba(255, 255, 255, .94); text-wrap: balance; } .ty-alert b { color: #fff; } .ty-alert b.word-yellow, .ty-alert .word-yellow { color: var(--yellow); } /* ── TY-02. PERCORSO IN 5 PASSI ────────────────────────────────────────── */ .ty-main { padding-block: clamp(26px, 6vw, 54px) clamp(48px, 9vw, 92px); background: var(--soft); border-bottom: 1px solid var(--line); } .ty-steps { display: grid; gap: clamp(16px, 4vw, 26px); } .ty-step { /* min-width:0 — senza, la card eredita min-width:auto come elemento di griglia e sotto i 360px allarga la colonna oltre il viewport */ min-width: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(20px, 5vw, 32px); box-shadow: var(--sh-2); scroll-margin-top: 18px; } .ty-step--video { border-color: var(--red-line); background: linear-gradient(180deg, var(--tint) 0%, var(--white) 55%); } .ty-step__head { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; } .ty-step__n { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 13px; background: var(--grad); color: #fff; font-size: 1.12rem; font-weight: 900; line-height: 1; box-shadow: 0 8px 18px rgba(219, 34, 17, .3); } .ty-step__title { font-size: clamp(1.06rem, 4.4vw, 1.4rem); font-weight: 900; line-height: 1.3; letter-spacing: -.02em; color: var(--ink); } .ty-step__kicker { color: var(--red-ink); } .ty-step__text { font-size: clamp(1rem, 4.1vw, 1.08rem); line-height: 1.68; } .ty-step__text+.ty-step__text { margin-top: 10px; } .ty-step .vsl { margin-top: clamp(16px, 4vw, 22px); max-width: 100%; } .ty-step .nights { margin: clamp(16px, 4vw, 22px) auto 0; max-width: 100%; } /* ── TY-03. RIQUADRI INFORMATIVI (mail / community) ────────────────────── */ .ty-note { display: flex; align-items: flex-start; gap: 14px; margin-top: clamp(14px, 3.5vw, 18px); background: var(--soft); border: 1px solid var(--line); border-left: 5px solid var(--indigo); border-radius: var(--r-lg); padding: 18px; font-size: clamp(.98rem, 4vw, 1.06rem); line-height: 1.64; } .ty-note__icon { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 13px; background: var(--indigo-soft); color: var(--indigo); font-size: 1.35rem; } .ty-note--wa { border-left-color: #25D366; } .ty-note--wa .ty-note__icon { background: #E7FBF0; color: #1DA851; } /* ── TY-04. BOTTONI WHATSAPP E CALENDARIO ──────────────────────────────── */ .ty-cta { display: grid; justify-items: center; gap: 10px; margin-top: clamp(18px, 4vw, 24px); } .ty-cta .btn { max-width: 520px; } .btn__ico { width: 1.25em; height: 1.25em; } .btn--wa { background: linear-gradient(180deg, #2FE075 0%, #25D366 55%, #12A150 100%); color: #fff; box-shadow: 0 8px 22px rgba(18, 161, 80, .3); } .btn--wa:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(18, 161, 80, .38); } .btn--indigo { background: linear-gradient(180deg, #5A4CE8 0%, var(--indigo) 55%, #2A20A8 100%); color: #fff; box-shadow: 0 8px 22px rgba(59, 47, 216, .28); } .btn--indigo:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(59, 47, 216, .36); } .btn--wa:active, .btn--indigo:active { transform: translateY(0); } /* ── TY-05. NOTA DI CONFIGURAZIONE ─────────────────────────────────────── */ .ty-todo { max-width: 520px; background: #FFF6D6; border: 1px dashed #E3B92C; border-radius: var(--r-sm); padding: 8px 12px; color: var(--yellow-ink); font-size: .78rem; font-weight: 700; line-height: 1.5; text-align: center; } .ty-todo b { color: inherit; font-weight: 800; overflow-wrap: anywhere; } /* ── TY-06. BREAKPOINT DESKTOP ─────────────────────────────────────────── */ /* Sotto i 560px le 3 serate passano da griglia a elenco: i segnaposto [Giorno G1] sono lunghi e in 3 colonne strette uscirebbero dal riquadro. */ @media (max-width: 559px) { .ty-step .nights { grid-template-columns: 1fr; gap: 8px; } .ty-step .night { grid-template-columns: 88px 1fr; column-gap: 12px; row-gap: 2px; justify-items: start; text-align: left; padding: 12px 14px; border-top: 1px solid var(--line); border-left: 4px solid var(--red); } .ty-step .night__n { grid-row: span 3; align-self: center; } .ty-step .night__time { margin-top: 0; } } @media (min-width: 700px) { .ty-step__head { gap: 16px; } .ty-step__n { width: 48px; height: 48px; font-size: 1.25rem; } .ty-note { padding: 20px 22px; } } @media (min-width: 861px) { .ty-steps { gap: 26px; } .ty-step { padding: 34px 36px; } } /* ========================================================= 21. OPT-IN (.page-optin) --------------------------------------------------------- Stili usati SOLO da index.html, che ha . grazie.html condivide questo foglio ma non ha quella classe: nulla di ciò che segue la raggiunge. Se serve un ritocco solo all'opt-in, scriverlo qui e non nelle sezioni 01-20. 21a. Palette piatta (nessun gradiente, niente viola/indaco) 21b. CTA 21c. Form 21d. Tipografia e leggibilità su telefono 21e. Immagini di sezione 21f. Card "Adatto a te anche se" 21g. FAQ 21h. Nota community sotto il primo form 21i. Rifiniture 21j. Breakpoint desktop ========================================================= */ /* ── 21a. PALETTE PIATTA ───────────────────────────────────────────────── */ /* I token vengono ridefiniti SUL BODY dell'opt-in. Essendo variabili CSS ereditate, tutta la pagina passa a tinte piatte senza toccare :root — quindi senza toccare la thank you page. I due "gradienti" di marca (--grad e --grad-btn) diventano colori pieni: dove erano usati come background ora si vede una tinta unita e basta. Rampa del rosso Subito — stessa tinta (hue 356°), tre luminosità: #F5333F marchio, CTA, titoli grandi → 3,9:1 su bianco (ok testo grande) #D42430 testo piccolo in bianco su rosso → 5,1:1 #C81E28 testo rosso su fondo chiaro → 5,7:1 Servono tutte e tre: con il solo #F5333F il testo piccolo non sarebbe leggibile a norma. */ .page-optin { --red: #F5333F; --red-dark: #D42430; --red-ink: #C81E28; --subito: #F5333F; --grad: #F5333F; --grad-btn: #F5333F; --btn-edge: #C81E28; /* Blu notte */ --ink: #16192C; --ink-2: #16192C; /* Bianco e grigi molto chiari */ --tint: #EFF1F6; --tint-2: #E9EBF0; --line: #E3E6EC; --red-soft: #F4F5F7; --red-line: #F8CDD0; /* Giallo: solo come piccolo accento (marker, fascia countdown, corsivi) */ --gold-1: #FFD43B; /* Niente viola né indaco: erano ereditati dalla landing precedente */ --indigo: #16192C; --indigo-soft: #F4F5F7; --indigo-line: #E3E6EC; --violet: #F5333F; --orange: #F5333F; } /* ── 21b. CTA ──────────────────────────────────────────────────────────── */ /* Bottone a tinta piatta: via il gradiente e via il rilievo lucido, che era fatto di ombre interne chiare e scure. Restano il bordo inferiore pieno (dà profondità senza sfumature) e un'ombra morbida. */ .page-optin .btn--cta { background: var(--red); box-shadow: 0 8px 22px rgba(200, 30, 40, .26); } .page-optin .btn--cta:hover { box-shadow: 0 12px 28px rgba(200, 30, 40, .34); } .page-optin .btn--xl { padding: clamp(18px, 4.2vw, 24px) 18px; text-shadow: none; box-shadow: 0 10px 28px rgba(200, 30, 40, .28); } /* Il testo è diviso in due gruppi nowrap (RISERVA ORA · IL TUO POSTO →): una riga sul desktop, due al massimo sul telefono — mai tre — e la freccia non si stacca mai da POSTO. Il gruppo più lungo è «IL TUO POSTO →»: il corpo massimo è tarato su quello, così a 320px non sfora. */ .page-optin .btn__main { gap: .3em; font-size: clamp(1.1rem, 4.4vw, 1.3rem); line-height: 1.16; } .page-optin .btn--xl .btn__main { font-size: clamp(1.55rem, 6.6vw, 2.3rem); letter-spacing: .01em; } /* Dentro il pannello del form la colonna è più stretta: un gradino sotto */ .page-optin .signup-panel .btn--xl .btn__main { font-size: clamp(1.45rem, 6vw, 1.9rem); } /* Barra fissa: una riga sola, ma con un corpo comunque leggibile */ .page-optin .sticky-cta .btn__main { font-size: clamp(1rem, 4.4vw, 1.25rem); } .page-optin .btn__sub { font-size: clamp(.9rem, 3.2vw, 1.05rem); line-height: 1.3; } .page-optin .btn--xl .btn__sub { margin-top: 4px; } .page-optin .cta-wrapper { margin-block: clamp(24px, 4.6vw, 36px); } /* Sotto i 360px la sottoriga farebbe crescere il bottone di una riga di troppo: si nasconde solo su quei telefoni, invece di rimpicciolire il testo principale. */ @media (max-width: 359px) { .page-optin .btn__sub { display: none; } } /* ── 21c. FORM ─────────────────────────────────────────────────────────── */ /* Pannello a tinta piatta blu notte. I campi in trasparenza restano leggibili e — soprattutto — il bottone di invio può essere rosso Subito pieno, esattamente come tutte le altre CTA della pagina. ⚠️ Qui si tocca solo l'aspetto: struttura, id, classi js- e nomi dei campi del form NON vanno modificati. */ .page-optin .signup-panel { background: var(--ink); box-shadow: 0 14px 40px rgba(22, 25, 44, .26); } .page-optin .signup-panel__title { font-size: clamp(1.5rem, 5.4vw, 2.05rem); line-height: 1.18; } .page-optin .signup-panel__sub { font-size: clamp(.95rem, 3.6vw, 1.05rem); } /* I placeholder ora sono più informativi: vanno letti bene */ .page-optin .field__box input::placeholder { color: rgba(255, 255, 255, .68); } /* Invio: stessa tinta piatta delle altre CTA, testo bianco */ .page-optin .btn--gold { background: var(--red); color: #fff; border-bottom-color: var(--red-ink); box-shadow: 0 10px 26px rgba(0, 0, 0, .3); } .page-optin .btn--gold .btn__sub { color: rgba(255, 255, 255, .9); } /* ── 21d. TIPOGRAFIA E LEGGIBILITÀ SU TELEFONO ─────────────────────────── */ /* Titoli più grandi, interlinea compatta ma respirata, nessuna parola spezzata a metà, nessuno sforamento in orizzontale. */ .page-optin .big-headline { /* niente più gradiente ritagliato sul testo: tinta piatta e via. Sparisce anche il rischio del titolo invisibile dove background-clip:text non è supportato. */ background: none; -webkit-text-fill-color: currentColor; color: var(--red); font-size: clamp(2.1rem, 8.4vw, 3.9rem); line-height: 1.06; } .page-optin .big-headline--long { font-size: clamp(1.78rem, 6.6vw, 3rem); line-height: 1.1; } .page-optin .sub-headline { font-size: clamp(1.42rem, 5.4vw, 2.3rem); line-height: 1.16; } .page-optin .mini-headline { font-size: clamp(1.06rem, 4vw, 1.35rem); line-height: 1.36; } .page-optin .headline-stack { gap: 8px; margin-bottom: clamp(22px, 4.4vw, 36px); } /* Mai una parola tagliata a metà, mai una riga fuori dallo schermo */ .page-optin .big-headline, .page-optin .sub-headline, .page-optin .mini-headline, .page-optin .signup-panel__title, .page-optin .text-section p, .page-optin .benefit-card-body p, .page-optin .checklist p, .page-optin .who-card__body p, .page-optin .faq__q, .page-optin .faq__a p { hyphens: manual; overflow-wrap: break-word; word-break: normal; } .page-optin .hero .description--lead { font-size: clamp(1.2rem, 4.9vw, 1.62rem); line-height: 1.4; } .page-optin .hero .description--sub { font-size: clamp(1.04rem, 4.1vw, 1.24rem); } /* Corpo dei muri di testo: un gradino più grande, interlinea generosa */ .page-optin .text-section { margin-block: clamp(20px, 4vw, 30px); } .page-optin .text-section p { font-size: clamp(1.1rem, 4.2vw, 1.22rem); line-height: 1.68; margin-bottom: 15px; } .page-optin .text-lead { font-size: clamp(1.22rem, 4.8vw, 1.46rem) !important; line-height: 1.34 !important; } /* Titoli delle card ben staccati dal corpo: lo strong iniziale è a blocco, più grande e in rosso scuro. */ .page-optin .benefit-card-body p { font-size: clamp(1.08rem, 4vw, 1.18rem); line-height: 1.6; } .page-optin .benefit-card-body p strong { margin-bottom: 8px; font-size: 1.22em; line-height: 1.2; letter-spacing: -.01em; } .page-optin .checklist p { font-size: clamp(1.06rem, 4vw, 1.16rem); line-height: 1.62; } /* Anche nelle checklist il "titolo" è lo strong di apertura */ .page-optin .checklist p>strong:first-child { color: var(--red-ink); } /* Passaggio fra sezioni: linea piatta, senza sfumatura */ .page-optin .divider { background: var(--line); margin-block: clamp(26px, 5vw, 44px); } /* Pennarello giallo: fascia piatta fatta con un'ombra interna, non con un gradiente a stop netti. */ .page-optin .mark-yellow { background: none; box-shadow: inset 0 -.34em 0 var(--yellow-soft); } /* ── 21e. IMMAGINI DI SEZIONE ──────────────────────────────────────────── */ /* Spezzano i muri di testo lunghi nel punto esatto in cui il racconto cambia. Rapporto 8:5 come le altre creatività e dimensioni dichiarate in HTML: nessun salto di layout al caricamento. */ .page-optin .section-shot { margin-block: clamp(22px, 4.6vw, 32px); } .page-optin .section-shot img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; border-radius: var(--r-lg); background: var(--tint-2); box-shadow: var(--sh-1); } /* ── 21f. CARD "ADATTO A TE ANCHE SE" ──────────────────────────────────── */ /* Immagine sopra, testo sotto. Una colonna sul telefono, due al massimo su desktop: con tre i volti diventerebbero troppo piccoli. */ .page-optin .who-cards { display: grid; gap: 16px; margin-block: clamp(22px, 4vw, 30px); } .page-optin .who-card { /* min-width:0 — senza, la card eredita min-width:auto come elemento di griglia e sotto i 360px allarga la colonna oltre il viewport */ min-width: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); transition: transform var(--t), box-shadow var(--t); } .page-optin .who-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); } /* 8:5 + object-fit:cover — l'immagine non si deforma mai e il ritaglio parte dal centro, dove stanno i volti. Il bordo superiore segue quello della card. */ .page-optin .who-card__img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; background: var(--tint-2); border-radius: var(--r-lg) var(--r-lg) 0 0; } .page-optin .who-card__body { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 20px; } .page-optin .who-card__body p { font-size: clamp(1.06rem, 4vw, 1.16rem); line-height: 1.6; } /* ── 21g. FAQ ──────────────────────────────────────────────────────────── */ /* Chiusa: blu notte pieno. Non è solo estetica — sul rosso di marca il bianco sta a 3,9:1 e la domanda è troppo piccola per quel contrasto; sul blu notte arriva a 15:1. E una fisarmonica smette di somigliare a un bottone. Aperta: bianca, come prima. */ .page-optin .faq__item { background: var(--ink); border-bottom-color: #0B0D19; box-shadow: var(--sh-1); } .page-optin .faq__item[open] { background: var(--white); border-bottom-color: var(--line); box-shadow: var(--sh-2); } .page-optin .faq__q { font-size: clamp(1.04rem, 4vw, 1.18rem); text-shadow: none; } .page-optin .faq__a p { font-size: clamp(1.06rem, 4vw, 1.16rem); line-height: 1.68; } /* ── 21h. NOTA COMMUNITY SOTTO IL PRIMO FORM ───────────────────────────── */ /* Prima era una sezione intera a fondo pieno con dentro una CTA ripetuta. Ridotta a una riga sola attaccata al form: risponde al «e adesso?» nel momento in cui la domanda nasce, senza rompere il ritmo verso la sezione successiva. Larghezza allineata al pannello del form. */ .page-optin .post-form-note { display: flex; align-items: flex-start; gap: 10px; max-width: 520px; margin: 14px auto 0; padding: 13px 16px; background: var(--tint); border: 1px solid var(--line); border-radius: var(--r-md); font-size: clamp(.94rem, 3.5vw, 1.02rem); font-weight: 600; line-height: 1.5; color: var(--body); /* la hero è centrata, la nota no: è testo corrente, si legge meglio a bandiera */ text-align: left; } .page-optin .post-form-note__icon { display: grid; place-items: center; width: 26px; height: 26px; flex: none; margin-top: 1px; border-radius: 8px; background: #E7FBF0; color: #1DA851; font-size: .95rem; } /* ── 21i. RIFINITURE ───────────────────────────────────────────────────── */ /* Le card benefit stanno su fondo pagina quasi bianco: con il fondo grigio chiarissimo sparirebbero. Bianche con un filo di bordo, come le altre. */ .page-optin .benefit-card { background: var(--white); border: 1px solid var(--line); } /* Riquadro delle 3 serate: rosso pieno, fascia del mese in blu notte */ .page-optin .event-date-section { box-shadow: 0 12px 34px rgba(200, 30, 40, .26); } .page-optin .night__month { background: var(--ink); } /* Metafora della ricetta: fondo bianco pieno, il giallo resta sul bordo */ .page-optin .recipe { background: var(--white); } /* Foto della bio: nessun riquadro colorato dietro, solo un'ombra morbida */ .page-optin .bio-photo--filled { box-shadow: var(--sh-1); } .page-optin .container>section { padding-block: 4px; } /* ── 21j. BREAKPOINT DESKTOP ───────────────────────────────────────────── */ @media (min-width: 700px) { /* Massimo due colonne: l'ordine delle sei card resta quello del markup */ .page-optin .who-cards { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (min-width: 861px) { /* Sulla colonna piena (800px) le righe arriverebbero a 90 caratteri: troppo lunghe. Le riportiamo a una misura da libro. */ .page-optin .text-section { max-width: 66ch; margin-inline: auto; } .page-optin .text-section p { font-size: 1.15rem; } }