@clay-design-system/email 0.0.0-stage → 0.2.0

package/dist/emails/section-promo-banner.html

@@ -0,0 +1,308 @@
+<!doctype html>
+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+  <head>
+    <title>Promo banner</title>
+    <!--[if !mso]><!-->
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <!--<![endif]-->
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style type="text/css">
+      #outlook a { padding:0; }
+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
+      p { display:block;margin:13px 0; }
+    </style>
+    <!--[if mso]>
+    <noscript>
+    <xml>
+    <o:OfficeDocumentSettings>
+      <o:AllowPNG/>
+      <o:PixelsPerInch>96</o:PixelsPerInch>
+    </o:OfficeDocumentSettings>
+    </xml>
+    </noscript>
+    <![endif]-->
+    <!--[if lte mso 11]>
+    <style type="text/css">
+      .mj-outlook-group-fix { width:100% !important; }
+    </style>
+    <![endif]-->
+    
+      <!--[if !mso]><!-->
+        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet" type="text/css">
+        <style type="text/css">
+          @import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap);
+        </style>
+      <!--<![endif]-->
+
+    
+    
+    <style type="text/css">
+      @media only screen and (min-width:480px) {
+        .mj-column-per-100 { width:100% !important; max-width: 100%; }
+      }
+    </style>
+    <style media="screen and (min-width:480px)">
+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }
+    </style>
+    
+    
+  
+    
+     
+    <style type="text/css">
+/* Client resets emaillove ships that MJML omits (Outlook.com line-height, image gaps). */
+  img { display: block; }
+  .ExternalClass { width: 100%; }
+  .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
+  /* Dark-only images hidden in light mode; swapped in the dark block below. */
+  .dl { display: none; }
+
+  /* Mobile heading step-down — one-notch scale at the DS phone-only breakpoint
+     @media(max-width:479px) (h1 56→48, h2 48→40, h3 40→32, h4 32→24). Keyed off the clay-h*
+     css-class on the mj-text <td>; targets the inner <div> where MJML places font-size. Desktop
+     size is the inline fallback if <style> is dropped. Per production emails, only the primary/
+     hero heading opts in — add css-class="clay-hN" (alongside mj-class) to the hero heading's
+     mj-text; secondary content headings keep mj-class alone and stay at desktop size. */
+  @media only screen and (max-width: 479px) {
+    .clay-h1 > div { font-size: 48px !important; }
+    .clay-h2 > div { font-size: 40px !important; }
+    .clay-h3 > div { font-size: 32px !important; }
+    .clay-h4 > div { font-size: 24px !important; }
+
+    /* Mobile H-padding utilities — apply as css-class on mj-wrapper or mj-section to reduce
+       the 40px horizontal padding to the source breakpoint value when columns stack (< 480px).
+       Source: emaillove export mobile CSS (.b98-68 → 24px, .d9b-0c → 16px, .fb5-e8 → 24px).
+       Targets the outer td MJML generates with inline padding-left/padding-right. */
+    .email-mobile-px-24 > table > tbody > tr > td { padding-right: 24px !important; padding-left: 24px !important; }
+    .email-mobile-px-16 > table > tbody > tr > td { padding-right: 16px !important; padding-left: 16px !important; }
+    .email-mobile-px-0 > table > tbody > tr > td { padding-right: 0 !important; padding-left: 0 !important; }
+    .email-mobile-pt-0 > table > tbody > tr > td { padding-top: 0 !important; }
+
+    /* Mobile text centering — apply as css-class on mj-text elements whose content should be
+       center-aligned on mobile (< 480px). Matches the source emaillove .s0>div{text-align:center}.
+       Targets the inner <div> MJML wraps text content in. */
+    .email-mobile-center > div { text-align: center !important; }
+
+    /* Mobile image centering — apply css-class="email-mobile-center-img" on mj-image.
+       text-align on the td does not reposition its block-level child table (CSS text-align
+       only affects inline content), so the nested image-wrapper table also needs margin:auto
+       to actually override the mj-image align="left"/"right" attribute on mobile. */
+    .email-mobile-center-img { text-align: center !important; }
+    .email-mobile-center-img > table { margin: 0 auto !important; }
+
+    /* Full-width button on mobile — apply css-class="email-btn-full" to mj-button.
+       Makes the button's inner <table> fill the column width and centers it.
+       Matches emaillove .mj-b-full pattern. */
+    .email-btn-full > table { width: 100% !important; }
+    .email-btn-full > table > tbody > tr > td { text-align: center !important; }
+  }
+
+  /* Left-aligned button content — apply css-class="email-btn-left" to mj-button.
+     Overrides MJML's default text-align:center on the inner td and anchor so
+     icon+text rows (e.g. buttons-icons) are left-aligned like the emaillove source. */
+  .email-btn-left > table > tbody > tr > td { text-align: left !important; }
+  .email-btn-left > table > tbody > tr > td > a { text-align: left !important; }
+
+  /* Decorative image tilt — apply css-class="email-tilt-1".."email-tilt-4" to mj-image for a
+     fanned photo-stack look (e.g. an avatar composite row). Webkit/Blink clients rotate the
+     image; Outlook and other non-supporting clients silently ignore the transform and show the
+     image unrotated — safe graceful degradation, never a broken layout. */
+  .email-tilt-1 { transform: rotate(-6deg); }
+  .email-tilt-2 { transform: rotate(4deg); }
+  .email-tilt-3 { transform: rotate(-4deg); }
+  .email-tilt-4 { transform: rotate(6deg); }
+
+  :root { color-scheme: light dark; supported-color-schemes: light dark; }
+  @media (prefers-color-scheme: dark) {
+    body, .email-page { background-color: #000000 !important; }
+    /*
+     * email-card: flip a section or column's background to dark.
+     *
+     * Three selectors cover every compiled MJML structure:
+     *   1. .email-card          — the outer <div> (mj-section or mj-column)
+     *   2. .email-card > table  — the direct child <table> (mj-section has inline bg here)
+     *   3. .email-card > table > tbody > tr > td
+     *                           — the content <td> inside mj-column (carries inline bg-color
+     *                             + border-radius when background-color is set on mj-column)
+     *
+     * Apply css-class="email-card" to any mj-section or mj-column that should
+     * become dark. Works for grey inner cards (#f3f4f5), coloured panels, etc.
+     */
+    .email-card,
+    .email-card > table,
+    .email-card > table > tbody > tr > td { background-color: #252526 !important; }
+    .email-text, .email-text * { color: #ffffff !important; }
+    .ll { display: none !important; }
+    .dl { display: block !important; }
+    /* Black CTA button invert — apply css-class="email-btn-invert-dark" to invert a black
+       mj-button to white background + black text in dark mode. Matches emaillove global
+       .mj-b>td { background-color:#ffffff } pattern for black CTA buttons. */
+    .email-btn-invert-dark > table > tbody > tr > td { background-color: #ffffff !important; }
+    .email-btn-invert-dark > table > tbody > tr > td > a { background-color: #ffffff !important; color: #000000 !important; }
+  }
+  /* Outlook.com + Gmail-app dark mode — these clients ignore prefers-color-scheme and instead
+     prefix overridden nodes with data-ogsc (foreground) / data-ogsb (background). */
+  [data-ogsb] body, [data-ogsb] .email-page { background-color: #000000 !important; }
+  [data-ogsb] .email-card,
+  [data-ogsb] .email-card > table,
+  [data-ogsb] .email-card > table > tbody > tr > td { background-color: #252526 !important; }
+  [data-ogsc] .email-text, [data-ogsc] .email-text * { color: #ffffff !important; }
+    </style>
+    <!-- GENERATED by src/tokens/build-email-tokens.ts — do not edit. Run `pnpm --filter @clay-design-system/email tokens:check`. -->
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="x-apple-disable-message-reformatting" />
+  <meta name="color-scheme" content="light dark" />
+  <meta name="supported-color-schemes" content="light dark" />
+  </head>
+  <body style="word-spacing:normal;background-color:#f3f4f5;">
+    
+    <div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">Section preview — promo banner</div>
+  
+    
+      <div
+         aria-label="Promo banner" aria-roledescription="email" style="background-color:#f3f4f5;" role="article" lang="und" dir="auto"
+      >
+        
+      
+      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="email-card-outlook" role="presentation" style="width:640px;" width="640" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    
+      
+      <div  class="email-card" style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:640px;">
+        
+        <table
+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"
+        >
+          <tbody>
+            <tr>
+              <td
+                 style="direction:ltr;font-size:0px;padding:0;text-align:center;"
+              >
+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><![endif]-->
+                  
+      <!-- promo-banner — dark promotional card: headline + body + iris pill CTA. Centered. No image.
+     Source: emaillove "Status update" newsletter export — "Elevate registration is open!" banner.
+     Card is always-dark (#252526) with inline white text — do NOT add css-class="email-text" here
+     (that class flips text back to dark on dark-mode backgrounds). The dark surface itself is
+     opaque, so it looks correct in both light and dark modes without extra rules.
+     Differs from single-column-promo-card: dark card surface + iris CTA + centered copy (not warm
+     cream + black CTA + left-aligned). -->
+          <!--[if mso | IE]><tr><td class="email-mobile-px-24-outlook" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="email-mobile-px-24-outlook" role="presentation" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    
+      
+      <div  class="email-mobile-px-24" style="margin:0px auto;max-width:640px;">
+        
+        <table
+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
+        >
+          <tbody>
+            <tr>
+              <td
+                 style="direction:ltr;font-size:0px;padding:40px;text-align:center;"
+              >
+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:560px;" ><![endif]-->
+            
+      <div
+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
+      >
+        
+      <table
+         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="border-collapse:separate;"
+      >
+        <tbody>
+          <tr>
+            <td  style="background-color:#252526;border-radius:16px;vertical-align:top;border-collapse:separate;padding:24px;">
+              
+      <table
+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
+      >
+        <tbody>
+          <!-- Headline — white text, 20px bold. Source: 20px, weight 600. -->
+              <tr>
+                <td
+                   align="center" style="font-size:0px;padding:0;word-break:break-word;"
+                >
+                  
+      <div
+         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:20px;font-weight:600;line-height:1.3;text-align:center;color:#ffffff;"
+      >Elevate registration is open!</div>
+    
+                </td>
+              </tr>
+            <!-- Body — white text, 14px regular. -->
+              <tr>
+                <td
+                   align="center" style="font-size:0px;padding:16px 0 0;word-break:break-word;"
+                >
+                  
+      <div
+         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;font-weight:400;line-height:1.5;text-align:center;color:#ffffff;"
+      >Reserve your spot for the year's biggest agentic-work event and lock in the best rate. Join 6,500+ leaders.</div>
+    
+                </td>
+              </tr>
+            <!-- CTA — iris pill, centered. Source: #6161FF, border-radius:900px, 12px/24px padding. -->
+              <tr>
+                <td
+                   align="center" style="font-size:0px;padding:24px 0 0;word-break:break-word;"
+                >
+                  
+      <table
+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"
+      >
+        <tbody>
+          <tr>
+            <td
+               align="center" bgcolor="#6161FF" role="presentation" style="border:none;border-radius:9999px;cursor:auto;mso-padding-alt:12px 24px;background:#6161FF;" valign="middle"
+            >
+              <a
+                 href="https://monday.com" style="display:inline-block;background:#6161FF;color:#ffffff;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;font-weight:400;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:12px 24px;mso-padding-alt:0px;border-radius:9999px;" target="_blank"
+              >
+                Reserve your spot
+              </a>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    
+                </td>
+              </tr>
+            
+        </tbody>
+      </table>
+    
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    
+      </div>
+    
+          <!--[if mso | IE]></td></tr></table><![endif]-->
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        
+      </div>
+    
+      
+      <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        
+      </div>
+    
+      
+      <!--[if mso | IE]></td></tr></table><![endif]-->
+    
+    
+      </div>
+    
+  </body>
+</html>
+