/* LuminousPath Monthly — web-version styles. Scope: applied to so nothing here leaks into the rest of the site. Tan background, teal accents, Manrope. */ .newsletter-page { --nl-bg: #E8EFF2; --nl-ink: #0B2436; --nl-accent: #1D9E75; --nl-accent-strong: #0F6E56; --nl-callout: #E0F2EA; --nl-hairline: rgba(11, 36, 54, 0.14); --nl-text-width: 720px; --nl-cover-width: 1040px; background: var(--nl-bg); color: var(--nl-ink); font-family: "Manrope", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif; } .newsletter-page main { padding-top: 88px; } .newsletter-shell { width: min(100% - 3rem, 1240px); margin-inline: auto; } .newsletter-article { width: min(100% - 3rem, 1240px); margin: 0 auto 4rem; padding-bottom: 3rem; } /* Header */ .newsletter-header { max-width: var(--nl-text-width); margin: 3rem auto 2rem; text-align: center; } .newsletter-eyebrow { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nl-accent-strong); margin-bottom: 1rem; } .newsletter-title { font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--nl-ink); margin-bottom: 0.75rem; } .newsletter-deck { font-size: 1.15rem; font-weight: 500; color: var(--nl-ink); opacity: 0.82; line-height: 1.45; } /* Cover */ .newsletter-cover { max-width: var(--nl-cover-width); margin: 3rem auto; } .newsletter-cover img { display: block; max-width: 800px; width: 100%; height: auto; margin-inline: auto; border-radius: 8px; box-shadow: 0 4px 32px rgba(11, 36, 54, 0.08); } /* TL;DR */ .newsletter-tldr { max-width: var(--nl-cover-width); margin: 3rem auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .newsletter-tldr > div { background: var(--nl-callout); border-top: 3px solid var(--nl-accent); border-radius: 8px; padding: 1.5rem 1.5rem 1.75rem; } .newsletter-tldr h2 { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nl-accent-strong); margin-bottom: 0.65rem; } .newsletter-tldr p { font-size: 1rem; line-height: 1.55; color: var(--nl-ink); } /* Body */ .newsletter-body { max-width: var(--nl-text-width); margin: 3rem auto; font-size: 1.125rem; line-height: 1.7; color: var(--nl-ink); } .newsletter-body p { margin-bottom: 1.25rem; } .newsletter-lede { font-size: 1.25rem; font-weight: 500; line-height: 1.55; margin-bottom: 2rem; } .newsletter-body h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; color: var(--nl-accent-strong); margin: 2.5rem 0 1rem; } /* Callout */ .newsletter-callout { background: var(--nl-callout); border-left: 3px solid var(--nl-accent); border-radius: 0 8px 8px 0; padding: 1.5rem 1.75rem; margin: 2rem 0; } .newsletter-callout .callout-label { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nl-accent-strong); margin-bottom: 0.75rem; } .newsletter-callout ol { padding-left: 1.25rem; margin: 0; } .newsletter-callout li { font-size: 1rem; line-height: 1.55; margin-bottom: 0.4rem; color: var(--nl-ink); } .newsletter-callout li:last-child { margin-bottom: 0; } /* Events */ .newsletter-events { max-width: var(--nl-text-width); margin: 3rem auto; padding: 2rem 0 0; border-top: 1px solid var(--nl-hairline); } .newsletter-events h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 600; color: var(--nl-accent-strong); margin-bottom: 0.75rem; } .newsletter-events > p { font-size: 1.05rem; line-height: 1.6; color: var(--nl-ink); margin-bottom: 1.5rem; } .event-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; } .event-list li { background: var(--nl-callout); border-radius: 8px; padding: 1.25rem 1.5rem; display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: baseline; } .event-month { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nl-accent-strong); } .event-desc { font-size: 1rem; line-height: 1.55; color: var(--nl-ink); } /* August preview */ .newsletter-preview { max-width: var(--nl-text-width); margin: 3rem auto; padding: 2rem 0 0; border-top: 1px solid var(--nl-hairline); } .newsletter-preview h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 600; color: var(--nl-accent-strong); margin-bottom: 1rem; } .newsletter-preview p { font-size: 1.125rem; line-height: 1.7; color: var(--nl-ink); margin-bottom: 1.25rem; } .newsletter-closer { max-width: var(--nl-text-width); margin: 3rem auto 0; font-size: 1.15rem; font-weight: 600; line-height: 1.4; color: var(--nl-accent-strong); text-align: center; } /* Pull quote */ .newsletter-pullquote { max-width: 640px; margin: 3rem auto; padding: 1.75rem 2rem; border-left: 4px solid var(--nl-accent); background: transparent; } .newsletter-pullquote p { font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.4; font-weight: 500; font-style: italic; color: var(--nl-ink); margin: 0; } /* Postscript */ .newsletter-postscript { max-width: var(--nl-text-width); margin: 3.5rem auto 0; padding-top: 2rem; border-top: 1px solid rgba(11, 36, 54, 0.15); text-align: center; } .newsletter-postscript p { margin: 0; font-size: 0.9375rem; color: var(--nl-ink); } .newsletter-postscript a { color: var(--nl-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .newsletter-postscript a:hover { text-decoration-thickness: 2px; } .newsletter-postscript span { margin: 0 0.5rem; color: rgba(11, 36, 54, 0.35); } /* Mobile */ @media (max-width: 40rem) { .newsletter-page main { padding-top: 72px; } .newsletter-article { width: 100%; padding: 0 1rem 2rem; } .newsletter-header, .newsletter-cover, .newsletter-tldr, .newsletter-body, .newsletter-events, .newsletter-preview, .newsletter-closer, .newsletter-postscript { margin-left: 0; margin-right: 0; } .newsletter-pullquote { margin: 2rem auto; padding: 1.25rem 1.5rem; } .newsletter-body { font-size: 1.0625rem; } .newsletter-title { font-size: 2rem; } .newsletter-body h2, .newsletter-events h2, .newsletter-preview h2 { font-size: 1.5rem; } .newsletter-tldr { grid-template-columns: 1fr; gap: 1rem; } .event-list { grid-template-columns: 1fr; } .event-list li { grid-template-columns: 1fr; gap: 0.35rem; } } /* Print */ @media print { .site-nav, .site-footer, .skip-link, .chatbot, #chatbot, [data-chatbot] { display: none !important; } .newsletter-page { background: var(--nl-bg); color: var(--nl-ink); } .newsletter-page main { padding-top: 0; } .newsletter-body, .newsletter-preview p, .newsletter-events > p { font-size: 12pt; line-height: 1.55; } .newsletter-cover img { box-shadow: none; } }