/* ========================================================================= Shared base styles for Baobab Bulletin newsletters. Stripo / ActiveCampaign exports rely on a large generated stylesheet that gets stripped when you copy the raw HTML — losing the inherited Roboto font and the es-pXX spacing utility classes. This file restores them so any saved export renders correctly. It is applied two ways (belt + suspenders): 1. Each newsletter HTML links it directly in (FOUC-free, no JS). 2. NewsletterFrame.tsx injects it on load if the link is missing, so even a raw, unedited export still renders with the right styling. To restyle ALL past + future bulletins, edit this one file. ========================================================================= */ /* ---- Base typography (export inherits Roboto everywhere) ---- */ body, table, td, p, a, span, h1, h2, h3, ul, ol, li { font-family: Roboto, "helvetica neue", Helvetica, Arial, sans-serif; } body { color: #2f3433; } h1, h2, h3 { margin: 0; } ul, ol { margin: 0; padding-left: 20px; } li { margin-bottom: 8px; line-height: 150%; } /* ---- Stripo spacing utilities (padding: top/bottom/right/left, all sides) ---- */ .es-p5b { padding-bottom: 5px; } .es-p10t { padding-top: 10px; } .es-p10b { padding-bottom: 10px; } .es-p10r { padding-right: 10px; } .es-p10l { padding-left: 10px; } .es-p15t { padding-top: 15px; } .es-p15b { padding-bottom: 15px; } .es-p15r { padding-right: 15px; } .es-p15l { padding-left: 15px; } .es-p20t { padding-top: 20px; } .es-p20b { padding-bottom: 20px; } .es-p20r { padding-right: 20px; } .es-p20l { padding-left: 20px; } .es-p20 { padding: 20px; } .es-p25b { padding-bottom: 25px; } .es-p25t { padding-top: 25px; } .es-p30t { padding-top: 30px; } .es-p30b { padding-bottom: 30px; } .es-p40t { padding-top: 40px; } .es-p40b { padding-bottom: 40px; } /* ---- Two-column rows: float so es-left / es-right sit side by side ---- */ .es-left { float: left; } .es-right { float: right; } /* ---- Mobile: stack columns and let the content fill the screen ---- */ @media only screen and (max-width: 680px) { table.es-content-body { width: 100% !important; } .es-left, .es-right { float: none !important; width: 100% !important; } .es-left > table, .es-right > table, .es-left table.es-table-not-adapt, .es-right table.es-table-not-adapt { width: 100% !important; } img.adapt-img { width: 100% !important; height: auto !important; } }