WRAPPER.html

<!-- This HTML is an Action Network Email Wrapper -->
<style id="hs-inline-css">
  /* Reset and base styles */
  * {
    box-sizing: border-box;
  }
  
  body, table, td {
    margin: 0;
    padding: 0;
  }
  
  /* Base typography - inherited by children */
  .email-container {
    font-family: "Lexend", Arial, sans-serif;
    color: #505050;
    line-height: 1.4;
    max-width: 600px;
    margin: 0 auto;
    background-color: #FFFFFF;
    padding: 20px;
  }
  
  /* Common bottom margin */
  p, h2, h3, ul, ol, img {
    margin: 0 0 16px 0;
  }
  
  /* Typography */
  p {
    font-weight: 400;
    font-size: 16px;
  }
  
  a {
    color: #EF4338 !important;
    text-decoration: none;
  }
  
  a:hover {
    text-decoration: underline;
  }
  
  h1 {
    font-weight: 800;
    font-size: 2.2em;
    text-align: center;
    margin-bottom: 24px;
  }
  
  h2 {
    font-weight: 600;
    font-size: 1.8em;
    margin-bottom: 20px;
  }
  
  h3 {
    font-weight: 600;
    font-style: italic;
  }
  
  /* Lists */
  ul, ol {
    font-size: 16px;
    text-align: left;
    padding-left: 20px;
  }
  
  li {
    margin-bottom: 8px;
    text-align: left;
  }

  /* Images */
  img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 16px;
  }
  
  .event_article img {
    max-height: 200px;
    width: auto;
    object-fit: contain;
  }

  /* Buttons */
  button {
    font-weight: 700;
    color: #FFFFFF !important;
    background-color: #EF4338;
    border: 1px solid #EF4338;
    border-radius: 10px;
    padding: 12px 24px;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.5s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(239, 67, 56, 0.3);
  }
  
  button:hover {
    background-color: #d63c32;
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(239, 67, 56, 0.5);
  }
  
  button:active {
    transform: scale(0.98);
  }
  
  /* Layout */
  .header {
    text-align: center;
    margin-bottom: 32px;
  }
  
  .content {
    margin-bottom: 32px;
  }
  
  .join-section {
    text-align: center;
    margin: 32px 0;
  }
  
  .divider {
    border: none;
    height: 2px;
    background-color: #EF4338;
    margin: 32px 0;
    border-radius: 1px;
  }
  
  /* Specialty */
  .event_article {
    outline: #EF4338 dotted 3px;
    margin: 24px 0;
    padding: 16px;
    border-radius: 8px;
  }
  
  .announce_section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    margin: 24px 0;
  }
  
  .announce_article {
    flex: 1;
    min-width: 250px;
    padding: 16px;
    background-color: #f8f8f8;
    border-radius: 8px;
  }
  
  /* Mobile responsiveness */
  @media screen and (max-width: 600px) {
    .email-container {
      padding: 15px;
    }
    
    h1 {
      font-size: 1.8em;
    }
    
    h2 {
      font-size: 1.5em;
    }
    
    p, ul, ol {
      font-size: 15px;
    }
    
    .announce_section {
      flex-direction: column;
    }
    
    .announce_article {
      min-width: unset;
    }
  }
</style>
<div class="email-container">
  <div class="header">
    <a href="https://www.mainedsa.org" target="_blank" rel="noopener noreferrer">
      <img src="https://www.mainedsa.org/wp-content/uploads/2023/05/forecast_knigi_lilya-brik-scaled.webp" alt="Maine DSA Forecast Letterhead with soviet-stylized Lilya Brik shouting Forecast"/>
    </a>
  </div>

  <!-- Action Network content will be inserted here -->

  <hr class="divider">
  
  <div class="footer">

    <h1>Ready to Join Maine DSA?</h1>
    <p>Maine DSA is the only DSA chapter in Maine. Our chapter primarily organizes in the Portland Metropolitan area, although our <a href="https://www.mainedsa.org/maine-dsa-campaigns-and-projects?referrer=forecast" target="_blank" rel="noopener noreferrer">campaigns and projects</a> may operate statewide and our membership draws from every county in the state.</p>
    <p>We welcome all who have anti-racist, anti-fascist, and anti-capitalist ideologies. We are not a charity; our focus is on developing leadership within the working class to organize and fight for the working class. Organizing means listening more than talking, forming relationships with those in our community, and building power with each other to change the world.</p>
    <p>If you have subscribed to our weekly newsletter and are interested in becoming an official member of our chapter please sign up via the button below.</p>
    <p style="font-weight: bold;">
      Let's build a better world together. We can't do it without you.
    </p>
    <a href="https://act.dsausa.org/donate/membership?source=direct_link&referrer=mainedsa_org#donation-form" target="_blank" rel="noopener noreferrer" >
      <button type="button">Join DSA</button>
    </a>
  </div>

  <hr class="divider">

  <div class="opt-out-footer">
    <p>
      If you'd like to receive fewer emails from Maine DSA, but don't want to fully unsubscribe, fill out this opt-out request to stop receiving the Maine DSA Weekly Forecast.
    </p>
    <a href="https://actionnetwork.org/forms/maine-dsa-forecast-opt-out?source=forecast-out-out" target="_blank" rel="noopener noreferrer" >
      <button type="button">Opt-Out</button>
    </a>
  </div>
</div>