/* ============================================================ FOGLIO DI STILE — quaderno-7 Pagina statica. I font sono caricati con nell' dell'index.html (niente @import, che ritarda il rendering). ============================================================ */ /* ===================== RESET GLOBALE ===================== */ /* evita spazio bianco laterale e scorrimento orizzontale */ html, body{ margin:0; padding:0; overflow-x:hidden; } /* ===================== VARIABILI ===================== */ .lp-quaderno-7{ --navy:#061A35; --navy2:#071B33; --navy-soft:#0C2546; --gold:#D8A83F; --gold-light:#F4D98B; --offwhite:#FFF9EF; --beige:#F7E9D2; --ink:#1E1A16; --white:#FFFFFF; --font-title:'Cinzel', Georgia, 'Times New Roman', serif; --font-body:'Lora', Georgia, serif; --radius:18px; --radius-sm:12px; --shadow:none; --shadow-dark:none; --cream:#FFFCF6; /* sfondo chiaro morbido */ --accent:#9C6B17; /* tono scuro per le parole in evidenza (leggibile su fondo chiaro) */ /* colore di fondo della sezione iniziale — usato anche dalla sfumatura dei bordi */ --hero-bg:#03162F; /* base / reset interno */ font-family:var(--font-body); color:var(--ink); line-height:1.6; font-size:17px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; position:relative; } /* reset leggero, solo dentro il wrapper */ .lp-quaderno-7 *, .lp-quaderno-7 *::before, .lp-quaderno-7 *::after{ box-sizing:border-box; } .lp-quaderno-7 p{ margin:0 0 1em; } .lp-quaderno-7 img{ max-width:100%; height:auto; display:block; } .lp-quaderno-7 h1,.lp-quaderno-7 h2,.lp-quaderno-7 h3,.lp-quaderno-7 h4{ font-family:var(--font-title); line-height:1.2; margin:0 0 .5em; font-weight:700; } .lp-quaderno-7 strong{ font-weight:600; } .lp-quaderno-7 .gold{ color:var(--gold); } /* ===================== STRUTTURA / SEZIONI ===================== */ .lp-quaderno-7 .section{ padding:54px 20px; } .lp-quaderno-7 .wrap{ width:100%; max-width:680px; margin:0 auto; } .lp-quaderno-7 .section-dark{ background:var(--navy); color:var(--offwhite); position:relative; overflow:hidden; } .lp-quaderno-7 .section-light{ background:var(--offwhite); color:var(--ink); } .lp-quaderno-7 .section-beige{ background:var(--beige); color:var(--ink); } .lp-quaderno-7 .section-cream{ background:var(--cream); color:var(--ink); } /* questa sezione continua visivamente quella sopra */ .lp-quaderno-7 .sec-checklist{ padding-top:0; } /* parola in evidenza (altro colore) */ .lp-quaderno-7 .hl{ color:var(--accent); font-weight:700; } .lp-quaderno-7 .eyebrow{ text-align:center; font-family:var(--font-title); letter-spacing:.22em; font-size:.78rem; font-weight:600; color:var(--accent); margin:0 0 .5em; } /* trama di punti discreta sui fondi scuri */ .lp-quaderno-7 .section-dark::before{ content:""; position:absolute; inset:0; background-image: radial-gradient(1.5px 1.5px at 12% 18%, rgba(244,217,139,.9), transparent), radial-gradient(1.5px 1.5px at 78% 12%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 35% 40%, rgba(244,217,139,.7), transparent), radial-gradient(1.5px 1.5px at 88% 55%, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 22% 70%, rgba(244,217,139,.6), transparent), radial-gradient(1.5px 1.5px at 62% 82%, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 48% 90%, rgba(244,217,139,.5), transparent), radial-gradient(2px 2px at 92% 30%, rgba(244,217,139,.8), transparent); opacity:.7; pointer-events:none; } .lp-quaderno-7 .section-dark > *{ position:relative; z-index:1; } /* titoli di sezione centrati */ .lp-quaderno-7 .section-title{ text-align:center; font-size:clamp(1.5rem, 5.4vw, 2.1rem); margin-bottom:.7em; } .lp-quaderno-7 .section-dark .section-title{ color:var(--gold-light); } .lp-quaderno-7 .section-light .section-title{ color:var(--navy); } .lp-quaderno-7 .section-sub{ text-align:center; max-width:560px; margin:0 auto 1.8em; font-size:1.02rem; } /* divisore ornamentale */ .lp-quaderno-7 .divider{ width:120px; height:18px; margin:0 auto 1.4em; display:flex; align-items:center; justify-content:center; gap:8px; } .lp-quaderno-7 .divider::before, .lp-quaderno-7 .divider::after{ content:""; height:1px; width:42px; background:var(--gold); } .lp-quaderno-7 .divider::after{ transform:scaleX(-1); } .lp-quaderno-7 .divider span{ color:var(--gold); font-size:14px; } /* ===================== CONTENITORE IMMAGINE ===================== */ .lp-quaderno-7 .ph{ position:relative; width:100%; border-radius:var(--radius); overflow:hidden; background:var(--beige); border:1px dashed rgba(216,168,63,.55); display:flex; align-items:center; justify-content:center; } .lp-quaderno-7 .ph::after{ content:attr(data-label); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:14px; font-family:var(--font-title); font-size:.72rem; letter-spacing:.06em; color:rgba(6,26,53,.42); z-index:0; } .lp-quaderno-7 .ph img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; color:transparent; } /* ===================== HERO ===================== */ .lp-quaderno-7 .hero{ background:var(--hero-bg); text-align:center; padding:40px 20px 28px; overflow:hidden; } .lp-quaderno-7 .hero .hero-inner{ max-width:1340px; margin:0 auto; } /* riga introduttiva (eyebrow) */ .lp-quaderno-7 .hero-eyebrow{ display:flex; align-items:center; justify-content:center; gap:8px; margin:0 auto 16px; max-width:100%; padding:0 12px; box-sizing:border-box; } .lp-quaderno-7 .hero-eyebrow .he-line{ height:1px; width:14px; flex:0 0 auto; display:none; /* su mobile sparisce, per dare più spazio al testo */ background:linear-gradient(90deg, rgba(216,168,63,0), #D8A83F); } .lp-quaderno-7 .hero-eyebrow .he-line.r{ background:linear-gradient(90deg, #D8A83F, rgba(216,168,63,0)); } .lp-quaderno-7 .hero-eyebrow .he-text{ font-family:var(--font-title); color:#D8A83F; font-weight:600; text-transform:uppercase; letter-spacing:.03em; font-size:clamp(12px, 3.6vw, 16px); line-height:1.3; white-space:normal; text-align:center; max-width:100%; word-break:break-word; } /* titolo principale */ .lp-quaderno-7 .hero-title{ font-family:var(--font-title); font-weight:700; text-transform:uppercase; color:#FFFFFF; line-height:1.08; letter-spacing:.005em; font-size:clamp(26px, 7vw, 34px); margin:0 auto .5em; } .lp-quaderno-7 .hero-title .gold{ color:#D8A83F; } .lp-quaderno-7 .hero .hero-divider{ margin:.1em auto .8em; } /* sottotitolo */ .lp-quaderno-7 .hero-sub{ color:#EDE6D6; font-family:var(--font-body); font-size:clamp(17px, 4.6vw, 20px); line-height:1.45; max-width:560px; margin:0 auto 1.05em; } .lp-quaderno-7 .hero-sub strong{ color:#D8A83F; font-weight:600; } /* immagine principale — su mobile occupa tutta la larghezza */ .lp-quaderno-7 .hero-mockup{ position:relative; max-width:none; margin:0 -20px .8em; } .lp-quaderno-7 .hero-mockup .hero-img{ width:100%; display:block; } /* --- RACCORDO TRA L'IMMAGINE E LO SFONDO DELLA SEZIONE --- I bordi laterali e inferiore dell'immagine sono chiari e creavano una giuntura visibile contro il fondo scuro. Questa sovrapposizione sfuma quei bordi ESATTAMENTE nel colore di fondo della sezione (--hero-bg): nessuna modifica al file immagine. Realizzato con gradienti (non con mask-composite) per compatibilità totale con tutti i browser. */ .lp-quaderno-7 .hero-mockup::after{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(to right, var(--hero-bg) 0, rgba(3,22,47,0) 10%), linear-gradient(to left, var(--hero-bg) 0, rgba(3,22,47,0) 10%), linear-gradient(to top, var(--hero-bg) 0, rgba(3,22,47,0) 9%); } /* pulsante iniziale: più piccolo ed elegante */ .lp-quaderno-7 .hero .cta-button{ max-width:330px; padding:13px 22px; font-size:14px; letter-spacing:.03em; text-transform:uppercase; box-shadow:0 8px 20px rgba(216,168,63,.30); } /* ===================== PULSANTE CTA ===================== */ .lp-quaderno-7 .cta-button{ display:inline-block; width:100%; max-width:460px; margin:0 auto; padding:18px 26px; background:var(--gold); color:var(--navy); font-family:var(--font-title); font-weight:700; font-size:1.08rem; letter-spacing:.02em; text-align:center; text-decoration:none; border:none; border-radius:60px; cursor:pointer; box-shadow:0 12px 26px rgba(216,168,63,.45); transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; } .lp-quaderno-7 .cta-button:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(216,168,63,.6); filter:brightness(1.06); } .lp-quaderno-7 .cta-button:focus-visible{ outline:3px solid var(--white); outline-offset:3px; } .lp-quaderno-7 .cta-wrap{ text-align:center; } /* ===================== CARD GENERICA ===================== */ .lp-quaderno-7 .card{ background:var(--white); border:1.5px solid var(--gold); border-radius:var(--radius); padding:28px 24px; box-shadow:var(--shadow); } .lp-quaderno-7 .card-title{ color:var(--navy); text-align:center; font-size:1.35rem; } /* ===================== ELENCO PUNTATO ===================== */ .lp-quaderno-7 .checklist{ display:flex; flex-direction:column; gap:12px; max-width:600px; margin:0 auto; } .lp-quaderno-7 .check-item{ display:flex; align-items:center; gap:14px; background:var(--white); border:1px solid rgba(216,168,63,.55); border-radius:60px; padding:12px 18px; } .lp-quaderno-7 .check-item span.txt{ font-size:1rem; } .lp-quaderno-7 .check-item span.txt strong{ color:var(--navy); font-weight:700; } .lp-quaderno-7 .list-icon{ width:44px; height:44px; min-width:44px; object-fit:contain; flex:0 0 auto; } @media (min-width:768px){ .lp-quaderno-7 .list-icon{ width:54px; height:54px; min-width:54px; } } /* ===================== CAROSELLO ===================== */ .lp-quaderno-7 .lp-carousel{ position:relative; width:100%; max-width:420px; margin:16px auto 0; touch-action:pan-y; /* lascia libero lo scorrimento verticale */ -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none; cursor:grab; } .lp-quaderno-7 .lp-carousel:active{ cursor:grabbing; } /* NB: .lp-carousel NON entra in questa regola, altrimenti il suo max-width verrebbe annullato e il carosello si allargherebbe sui tablet. */ .lp-quaderno-7 .lp-viewport, .lp-quaderno-7 .lp-track, .lp-quaderno-7 .lp-slide, .lp-quaderno-7 .lp-sheet, .lp-quaderno-7 .lp-page{ max-width:100%; } .lp-quaderno-7 .lp-viewport{ width:100%; overflow:hidden; border-radius:10px; } .lp-quaderno-7 .lp-track{ display:flex; width:100%; will-change:transform; transform:translate3d(0,0,0); } .lp-quaderno-7 .lp-slide{ flex:0 0 100%; width:100%; } .lp-quaderno-7 .lp-sheet{ position:relative; width:100%; aspect-ratio:1414 / 2000; /* mantiene la proporzione delle pagine */ background:#fffdf7; border:1px solid rgba(216,168,63,.5); border-radius:10px; box-shadow:0 8px 22px rgba(6,26,53,.12); padding:6px; } .lp-quaderno-7 .lp-page{ width:100%; height:100%; object-fit:contain; display:block; border-radius:6px; -webkit-user-drag:none; user-select:none; pointer-events:none; } /* indicatori */ .lp-quaderno-7 .lp-dots{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:14px; } .lp-quaderno-7 .lp-dot{ width:9px; height:9px; padding:0; border:none; cursor:pointer; border-radius:50%; background:rgba(216,168,63,.35); transition:background .2s ease, transform .2s ease; } .lp-quaderno-7 .lp-dot.is-active{ background:var(--gold); transform:scale(1.3); } .lp-quaderno-7 .lp-dot:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; } @media (min-width:900px){ .lp-quaderno-7 .lp-carousel{ max-width:460px; } } /* nota piccola sotto il sottotitolo */ .lp-quaderno-7 .pdf-note{ font-size:.82rem; line-height:1.45; opacity:.9; max-width:520px; margin-top:-.4em; } /* titolo e sottotitolo leggermente più grandi nella sezione del carosello */ .lp-quaderno-7 .sec-carousel .section-title{ font-size:clamp(1.7rem, 6.4vw, 2.5rem); } .lp-quaderno-7 .sec-carousel .section-sub{ font-size:clamp(1.05rem, 4vw, 1.2rem); max-width:600px; } /* ===================== FASI ===================== */ .lp-quaderno-7 .steps{ display:flex; flex-direction:column; gap:16px; } .lp-quaderno-7 .step-card{ display:flex; align-items:flex-start; gap:18px; background:var(--white); border:1.5px solid var(--gold); border-radius:var(--radius); padding:22px 22px; color:var(--ink); } .lp-quaderno-7 .step-card .num{ font-family:var(--font-title); font-size:2.6rem; font-weight:700; color:var(--gold); line-height:1; flex:0 0 auto; } .lp-quaderno-7 .step-card .step-title{ color:var(--navy); font-size:1.02rem; letter-spacing:.04em; margin-bottom:.35em; } .lp-quaderno-7 .step-card p{ margin:0; font-size:.97rem; color:#4A453E; } .lp-quaderno-7 .step-card p strong{ color:var(--accent); font-weight:700; } /* ===================== SCHEDE CON IMMAGINE ===================== */ .lp-quaderno-7 .feature-grid{ display:flex; flex-direction:column; gap:18px; } .lp-quaderno-7 .feature-card{ --rc:#9C6B17; background:var(--cream); border:1.5px solid rgba(216,168,63,.7); border-radius:18px; padding:18px 22px; display:grid; grid-template-columns:auto 54px 1fr; column-gap:14px; align-items:center; text-align:left; } .lp-quaderno-7 .feature-card .feature-image{ grid-column:1; width:104px; } .lp-quaderno-7 .feature-card .feature-image img{ width:104px; height:132px; object-fit:cover; object-position:center; border-radius:50%; border:1.5px solid var(--gold); display:block; background:#fff; } .lp-quaderno-7 .feature-card .feature-divider{ grid-column:2; position:relative; align-self:stretch; display:flex; align-items:center; justify-content:center; } .lp-quaderno-7 .feature-card .feature-divider::before{ content:""; position:absolute; left:50%; top:6px; bottom:6px; width:1.5px; background:rgba(216,168,63,.55); transform:translateX(-50%); } .lp-quaderno-7 .feature-card .feature-divider-top, .lp-quaderno-7 .feature-card .feature-divider-bottom{ position:absolute; left:50%; transform:translateX(-50%); color:var(--gold); line-height:1; } .lp-quaderno-7 .feature-card .feature-divider-top{ top:0; font-size:.8rem; } .lp-quaderno-7 .feature-card .feature-divider-bottom{ bottom:0; font-size:.5rem; } .lp-quaderno-7 .feature-card .feature-icon{ position:relative; z-index:1; display:block; } .lp-quaderno-7 .feature-card .feature-content{ grid-column:3; } .lp-quaderno-7 .feature-card .feature-title{ color:var(--navy); font-family:var(--font-title); font-size:1.1rem; text-transform:uppercase; letter-spacing:.01em; line-height:1.15; margin-bottom:.32em; } .lp-quaderno-7 .feature-card .feature-lead{ font-weight:700; color:var(--rc); margin-bottom:.35em; font-size:1.02rem; line-height:1.3; } .lp-quaderno-7 .feature-card p.small{ font-size:.95rem; color:#4A453E; margin:0; line-height:1.45; } @media (max-width:560px){ .lp-quaderno-7 .feature-card{ grid-template-columns:auto 38px 1fr; column-gap:10px; padding:14px; } .lp-quaderno-7 .feature-card .feature-image, .lp-quaderno-7 .feature-card .feature-image img{ width:84px; } .lp-quaderno-7 .feature-card .feature-image img{ height:106px; } .lp-quaderno-7 .feature-card .feature-icon{ width:38px; height:38px; } .lp-quaderno-7 .feature-card .feature-title{ font-size:.96rem; } .lp-quaderno-7 .feature-card .feature-lead{ font-size:.95rem; } .lp-quaderno-7 .feature-card p.small{ font-size:.9rem; } } /* ===================== TESTIMONIANZE ===================== */ .lp-quaderno-7 .testimonials{ display:flex; flex-direction:column; gap:18px; } .lp-quaderno-7 .testimonial-card{ background:var(--white); border:1px solid rgba(216,168,63,.55); border-radius:var(--radius); padding:24px 22px; box-shadow:var(--shadow); } .lp-quaderno-7 .stars{ color:var(--gold); letter-spacing:3px; font-size:1.1rem; margin-bottom:.6em; } .lp-quaderno-7 .testimonial-card .quote{ font-style:italic; font-size:1.02rem; color:#2A2620; margin-bottom:.8em; } .lp-quaderno-7 .testimonial-card .author{ font-family:var(--font-title); font-weight:600; color:var(--navy); font-size:.98rem; } .lp-quaderno-7 .testimonial-card .loc{ font-size:.85rem; color:#7A746A; } @media (min-width:900px){ .lp-quaderno-7 .testimonials.testimonials-2{ grid-template-columns:repeat(2,1fr); max-width:760px; margin-left:auto; margin-right:auto; } } /* ===================== BONUS ===================== */ .lp-quaderno-7 .bonuses{ display:flex; flex-direction:column; gap:18px; } .lp-quaderno-7 .bonus-card{ background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-dark); border:1px solid rgba(216,168,63,.5); } .lp-quaderno-7 .bonus-card .bonus-cover .ph{ border-radius:0; border:none; background:#fbf6ec; aspect-ratio:1/1; } .lp-quaderno-7 .bonus-card .bonus-cover .ph img{ object-fit:contain; } .lp-quaderno-7 .bonus-card .bonus-cover .ph::after{ color:rgba(6,26,53,.30); } .lp-quaderno-7 .bonus-card .bonus-body{ padding:20px 22px; } .lp-quaderno-7 .bonus-card .bonus-name{ color:var(--navy); font-size:1.15rem; margin-bottom:.3em; } .lp-quaderno-7 .bonus-card .bonus-body p{ margin:0; font-size:.96rem; color:#4A453E; } .lp-quaderno-7 .bonus-card .bonus-body p strong{ color:var(--accent); font-weight:700; } .lp-quaderno-7 .bonus-tag{ display:inline-block; font-family:var(--font-title); font-size:.7rem; letter-spacing:.1em; background:var(--gold); color:var(--navy); padding:4px 12px; border-radius:40px; margin-bottom:10px; } /* ===================== OFFERTA ===================== */ .lp-quaderno-7 .offer{ background:var(--navy); text-align:center; } .lp-quaderno-7 .offer .offer-title{ color:var(--gold-light); font-size:clamp(1.5rem, 6vw, 2.2rem); } .lp-quaderno-7 .discount-badge{ display:inline-block; font-family:var(--font-title); font-weight:700; background:var(--gold); color:var(--navy); padding:10px 22px; border-radius:50px; letter-spacing:.04em; margin:8px auto 22px; } .lp-quaderno-7 .offer .mockup{ max-width:640px; margin:0 auto 26px; } .lp-quaderno-7 .offer .mockup .ph{ background:var(--navy-soft); border:1px dashed rgba(244,217,139,.5); } .lp-quaderno-7 .offer .mockup .ph::after{ color:rgba(244,217,139,.45); } .lp-quaderno-7 .offer .mockup .ph.offer-kit{ background:transparent; border:none; overflow:visible; aspect-ratio:16/9; filter:drop-shadow(0 16px 22px rgba(0,0,0,.55)); } .lp-quaderno-7 .offer .mockup .ph.offer-kit img{ object-fit:contain; } .lp-quaderno-7 .offer-box{ background:rgba(255,255,255,.04); border:1.5px solid var(--gold); border-radius:var(--radius); padding:26px 22px; max-width:520px; margin:0 auto; } .lp-quaderno-7 .offer-box .included-title{ color:var(--gold-light); font-size:1.15rem; margin-bottom:.7em; } .lp-quaderno-7 .included{ list-style:none; padding:0; margin:0 0 24px; text-align:left; max-width:380px; margin-left:auto; margin-right:auto; } .lp-quaderno-7 .included li{ padding:9px 0 9px 30px; position:relative; border-bottom:1px solid rgba(216,168,63,.18); color:#ECE6D8; font-size:.98rem; } .lp-quaderno-7 .included li:last-child{ border-bottom:none; } .lp-quaderno-7 .included li::before{ content:"✦"; position:absolute; left:4px; top:9px; color:var(--gold); } .lp-quaderno-7 .price-old{ color:#B9B2A2; text-decoration:line-through; font-size:1rem; margin-bottom:2px; } .lp-quaderno-7 .price-label{ color:var(--gold-light); font-family:var(--font-title); letter-spacing:.08em; font-size:.85rem; margin-bottom:6px; } .lp-quaderno-7 .price-main{ font-family:var(--font-title); font-weight:700; color:var(--white); font-size:2.6rem; line-height:1; } .lp-quaderno-7 .price-cash{ color:#D9D2C2; font-size:1rem; margin:6px 0 22px; } /* ===================== GARANZIA ===================== */ .lp-quaderno-7 .guarantee{ text-align:center; } .lp-quaderno-7 .guarantee .seal{ width:190px; margin:0 auto 18px; } .lp-quaderno-7 .guarantee .card{ max-width:600px; margin:0 auto; } .lp-quaderno-7 .guarantee p{ font-size:1rem; } /* ===================== FAQ ===================== */ .lp-quaderno-7 .faq{ max-width:640px; margin:0 auto; } .lp-quaderno-7 .faq-item{ background:var(--white); border:1px solid rgba(216,168,63,.5); border-radius:var(--radius-sm); margin-bottom:14px; overflow:hidden; } .lp-quaderno-7 .faq-question{ width:100%; text-align:left; background:none; border:none; cursor:pointer; font-family:var(--font-title); font-weight:600; font-size:1.02rem; color:var(--navy); padding:18px 52px 18px 20px; position:relative; white-space:normal; word-break:break-word; line-height:1.35; } .lp-quaderno-7 .faq-question::after{ content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%); color:var(--gold); font-size:1.6rem; line-height:1; transition:transform .25s ease; } .lp-quaderno-7 .faq-item.open .faq-question::after{ content:"–"; transform:translateY(-50%); } .lp-quaderno-7 .faq-question:focus-visible{ outline:3px solid var(--accent); outline-offset:-3px; } .lp-quaderno-7 .faq-answer{ max-height:0; overflow:hidden; transition:max-height .3s ease; } .lp-quaderno-7 .faq-answer .faq-answer-inner{ padding:0 20px 18px; font-size:.97rem; color:#3A352E; } .lp-quaderno-7 .faq-answer a{ color:var(--gold); } /* ===================== FOOTER ===================== */ .lp-quaderno-7 .footer{ background:var(--navy2); color:#9FB0C6; font-size:.82rem; line-height:1.6; text-align:center; padding:42px 20px; } .lp-quaderno-7 .footer .wrap{ max-width:640px; } .lp-quaderno-7 .footer strong{ color:var(--gold-light); } .lp-quaderno-7 .footer .footer-notice{ color:var(--gold-light); font-family:var(--font-title); letter-spacing:.1em; margin-bottom:10px; display:block; font-size:.9rem; } .lp-quaderno-7 .footer p{ margin:0 0 12px; } .lp-quaderno-7 .footer .copy{ margin-top:18px; color:#C7B789; } /* ===================== DESKTOP (>= 900px) ===================== */ @media (min-width:900px){ .lp-quaderno-7{ font-size:18px; } .lp-quaderno-7 .section{ padding:80px 24px; } .lp-quaderno-7 .wrap{ max-width:1040px; } .lp-quaderno-7 .hero{ padding:60px 24px 44px; } .lp-quaderno-7 .hero-eyebrow{ gap:18px; margin-bottom:22px; } .lp-quaderno-7 .hero-eyebrow .he-line{ display:block; width:58px; } .lp-quaderno-7 .hero-eyebrow .he-text{ font-size:21px; letter-spacing:.15em; white-space:nowrap; } .lp-quaderno-7 .hero-sub{ font-size:clamp(21px, 1.7vw, 26px); max-width:820px; margin-bottom:1.1em; } .lp-quaderno-7 .hero-mockup{ max-width:1280px; margin:0 auto 1.05em; } .lp-quaderno-7 .hero .cta-button{ max-width:340px; padding:14px 26px; font-size:15px; } /* elenco su 2 colonne */ .lp-quaderno-7 .checklist{ max-width:880px; display:grid; grid-template-columns:1fr 1fr; } /* fasi su 2 colonne */ .lp-quaderno-7 .steps{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } /* schede con immagine su colonna centrata */ .lp-quaderno-7 .feature-grid{ max-width:840px; margin-left:auto; margin-right:auto; gap:20px; } /* testimonianze su 3 colonne */ .lp-quaderno-7 .testimonials{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } /* bonus su 2 colonne */ .lp-quaderno-7 .bonuses{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } } /* ===================== DESKTOP GRANDE (>= 1100px) ===================== */ @media (min-width:1100px){ .lp-quaderno-7 .hero-title{ font-size:clamp(52px, 4.2vw, 66px); line-height:1.06; letter-spacing:.01em; } } /* accessibilità: rispettare la riduzione del movimento */ @media (prefers-reduced-motion:reduce){ .lp-quaderno-7 *{ transition:none !important; } }