Newsletter Synergie : gardez une longueur d'avance

/* ========================================== SYNERGIE - PAGE NEWSLETTER ========================================== */ .sy-newsletter-page { --sy-red: #c8102e; --sy-text: #1d1d1f; --sy-secondary: #6e6e73; --sy-background: #f5f5f7; box-sizing: border-box; width: 100%; max-width: 1000px; margin: 0 auto 40px; color: var(--sy-text); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; } .sy-newsletter-page *, .sy-newsletter-page *::before, .sy-newsletter-page *::after { box-sizing: border-box; } /* INTRODUCTION */ .sy-newsletter-page .sy-intro { padding: 58px 30px 48px; text-align: center; background: var(--sy-background); border-radius: 14px; } .sy-newsletter-page .sy-eyebrow { display: block; margin-bottom: 18px; color: var(--sy-red); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } .sy-newsletter-page h1 { margin: 0 auto 18px; max-width: 720px; color: var(--sy-text); font-size: clamp(30px, 4.5vw, 46px); line-height: 1.15; font-weight: 750; letter-spacing: -1px; } .sy-newsletter-page .sy-intro p { max-width: 640px; margin: 0 auto; color: var(--sy-secondary); font-size: 17px; line-height: 1.7; } /* AVANTAGES */ .sy-newsletter-page .sy-benefits { padding: 48px 0 24px; } .sy-newsletter-page .sy-section-title { margin: 0 0 30px; color: var(--sy-text); font-size: 27px; font-weight: 700; text-align: center; } .sy-newsletter-page .sy-benefits-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .sy-newsletter-page .sy-benefit { padding: 26px; background: #ffffff; border: 1px solid #e5e5e7; border-radius: 12px; } .sy-newsletter-page .sy-benefit-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 18px; border-radius: 10px; background: #fff0f2; color: var(--sy-red); font-size: 23px; } .sy-newsletter-page .sy-benefit h3 { margin: 0 0 9px; color: var(--sy-text); font-size: 18px; font-weight: 700; } .sy-newsletter-page .sy-benefit p { margin: 0; color: var(--sy-secondary); font-size: 14px; line-height: 1.65; } /* AVANTAGE ABONNE */ .sy-newsletter-page .sy-exclusive { margin: 24px 0 44px; padding: 35px 30px; background: #fff5f6; border: 1px solid #f3d9dd; border-left: 4px solid var(--sy-red); border-radius: 10px; text-align: center; } .sy-newsletter-page .sy-exclusive-label { display: block; margin-bottom: 12px; color: var(--sy-red); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; } .sy-newsletter-page .sy-exclusive h2 { margin: 0 0 13px; color: var(--sy-text); font-size: 25px; line-height: 1.3; } .sy-newsletter-page .sy-exclusive p { max-width: 650px; margin: 0 auto; color: #424245; font-size: 15px; line-height: 1.7; } /* INSCRIPTION */ .sy-newsletter-page .sy-signup { padding: 46px 25px; background: var(--sy-background); border-radius: 14px; text-align: center; } .sy-newsletter-page .sy-signup h2 { margin: 0 0 14px; color: var(--sy-text); font-size: 29px; line-height: 1.3; } .sy-newsletter-page .sy-signup p { max-width: 530px; margin: 0 auto 26px; color: var(--sy-secondary); font-size: 15px; line-height: 1.7; } .sy-newsletter-page .sy-button { display: inline-block; padding: 16px 32px; background: var(--sy-red); color: #ffffff !important; border-radius: 8px; text-decoration: none !important; font-size: 15px; font-weight: 700; transition: background .2s ease; } .sy-newsletter-page .sy-button:hover { background: #a50d25; color: #ffffff !important; } .sy-newsletter-page .sy-privacy { display: block; margin-top: 20px; color: var(--sy-secondary); font-size: 12px; line-height: 1.6; } /* MOBILE */ @media (max-width: 650px) { .sy-newsletter-page .sy-intro { padding: 42px 22px; } .sy-newsletter-page .sy-intro p { font-size: 15px; } .sy-newsletter-page .sy-benefits { padding-top: 36px; } .sy-newsletter-page .sy-benefits-grid { grid-template-columns: 1fr; gap: 12px; } .sy-newsletter-page .sy-benefit { padding: 22px; } .sy-newsletter-page .sy-exclusive { padding: 28px 20px; } .sy-newsletter-page .sy-exclusive h2 { font-size: 22px; } .sy-newsletter-page .sy-signup { padding: 38px 20px; } .sy-newsletter-page .sy-signup h2 { font-size: 25px; } .sy-newsletter-page .sy-button { display: block; width: 100%; max-width: 350px; margin: 0 auto; } }