/* ========================================================= 50-pages/newsletter.css Newsletter page only Page-specific styling and overrides ========================================================= */ /* ========================= NEWSLETTER PAGE WRAPPER Apply with: ========================= */ .page-newsletter main { padding-top: 30px; padding-bottom: 40px; } /* ========================= HEADER / INTRO ========================= */ .page-newsletter header h1, .page-newsletter .site-header h1 { margin-bottom: var(--space-1); } .page-newsletter .subtitle { max-width: 860px; margin-inline: auto; } /* ========================= NEWSLETTER HERO ========================= */ .page-newsletter .hero { margin-top: var(--space-6); margin-bottom: var(--space-8); } .page-newsletter .hero-content > *:last-child { margin-bottom: 0; } .page-newsletter .hero p:last-of-type { margin-bottom: 0; } .page-newsletter .hero-quote { max-width: 760px; } /* ========================= NEWSLETTER CONTENT WIDTH ========================= */ .page-newsletter .page-content, .page-newsletter .container-narrow { max-width: 900px; } .page-newsletter .narrative-block { max-width: 920px; margin-left: auto; margin-right: auto; } .page-newsletter .narrative-block p:last-child { margin-bottom: 0; } /* ========================= SECTION RHYTHM ========================= */ .page-newsletter .section-tight { padding-top: 20px; padding-bottom: 20px; } .page-newsletter .divider { margin: 30px 0; } .page-newsletter .section-title { max-width: 820px; margin: 15px auto 25px; } /* ========================= FEATURE / BENEFIT BLOCKS ========================= */ .page-newsletter .feature-grid { align-items: stretch; } .page-newsletter .feature-item { min-height: 100%; } .page-newsletter .feature-item h3 { color: var(--color-text); margin-top: var(--space-3); margin-bottom: var(--space-2); border: 0; padding-left: 0; } .page-newsletter .feature-item p:last-child { margin-bottom: 0; } /* ========================= NEWSLETTER OFFER / PRICING ========================= */ .page-newsletter .pricing-grid { align-items: stretch; } .page-newsletter .pricing-card { display: flex; flex-direction: column; justify-content: flex-start; min-height: 100%; } .page-newsletter .pricing-card > *:last-child { margin-bottom: 0; } .page-newsletter .pricing-card .description { flex-grow: 1; } .page-newsletter .price { line-height: 1.1; } .page-newsletter .gift-badge { align-self: center; } .page-newsletter .currency-links { margin-top: auto; padding-top: var(--space-3); } /* ========================= SPECIAL NOTES / CALLOUTS ========================= */ .page-newsletter .other-countries-note { max-width: 850px; margin-left: auto; margin-right: auto; } .page-newsletter .other-countries-note p:last-child { margin-bottom: 0; } /* ========================= STORY / INVITATION BLOCK ========================= */ .page-newsletter .story-invite { max-width: 920px; margin-left: auto; margin-right: auto; } .page-newsletter .story-invite .btn-group, .page-newsletter .story-invite .cluster-center { margin-top: var(--space-5); } .page-newsletter .story-invite p:last-of-type { margin-bottom: 0; } /* ========================= FAQ ========================= */ .page-newsletter .faq { max-width: 920px; margin-left: auto; margin-right: auto; } .page-newsletter .faq-item:last-child { margin-bottom: 0; } .page-newsletter .faq-answer p:last-child { margin-bottom: 0; } /* ========================= WAITLIST / SIGNUP FORM ========================= */ .page-newsletter .waitlist-form { max-width: 760px; } .page-newsletter .waitlist-form .btn, .page-newsletter .waitlist-form .btn-small { flex: 0 0 auto; } .page-newsletter .waitlist-input { min-height: 48px; } .page-newsletter .btn-small { min-height: 48px; } /* ========================= SIGNATURE / CLOSING ========================= */ .page-newsletter .signature { max-width: 820px; margin-left: auto; margin-right: auto; } /* ========================= SPACING REFINEMENTS ========================= */ .page-newsletter .hero + .narrative-block { margin-top: 0; } .page-newsletter .section-divider { margin-top: var(--space-8); margin-bottom: var(--space-6); } .page-newsletter .section-divider + .section-title { margin-top: 0; } /* ========================= TABLET ========================= */ @media (max-width: 1024px) { .page-newsletter .hero-quote { max-width: 100%; } .page-newsletter .pricing-card { padding: var(--card-padding); } } /* ========================= MOBILE ========================= */ @media (max-width: 768px) { .page-newsletter main { padding-top: 24px; padding-bottom: 32px; } .page-newsletter .hero { margin-top: var(--space-5); margin-bottom: var(--space-6); } .page-newsletter .feature-item h3 { font-size: 1.15rem; } .page-newsletter .pricing-card h2 { font-size: 1.5rem; } .page-newsletter .price { font-size: 1.75rem; } .page-newsletter .waitlist-form { max-width: 100%; } .page-newsletter .waitlist-form .btn, .page-newsletter .waitlist-form .btn-small { width: 100%; } .page-newsletter .currency-links { width: 100%; } .page-newsletter .currency-link { min-width: 170px; } .page-newsletter .section-title { margin: 12px auto 22px; } .page-newsletter .divider { margin: 24px 0; } } /* ========================= SMALL MOBILE ========================= */ @media (max-width: 480px) { .page-newsletter .hero { padding: 20px 16px; } .page-newsletter .narrative-block, .page-newsletter .story-invite, .page-newsletter .signature, .page-newsletter .other-countries-note { padding: 20px 16px; } .page-newsletter .pricing-card, .page-newsletter .feature-item, .page-newsletter .faq-item { padding: 18px 16px; } .page-newsletter .price { font-size: 1.6rem; } .page-newsletter main { padding-top: 20px; padding-bottom: 28px; } }