Recordly/services/email/billing/payment-failed.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
  <title>Please update your payment method for Recordly</title>
  <style>
    @font-face { font-family:'DM Sans'; src:url('https://kgmqmaivltdolfzjrjjs.supabase.co/storage/v1/object/public/email-assets/DMSans-Variable.ttf') format('truetype'); font-weight:100 1000; font-style:normal; font-display:swap; }
    body, table, td, a { -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
    table, td { mso-table-lspace:0pt; mso-table-rspace:0pt; }
    table { border-collapse:collapse; }
    .email-banner-dark { display:none; max-height:0; overflow:hidden; mso-hide:all; }
    @media (max-width:560px) {
      .email-heading { font-size:28px !important; line-height:36px !important; }
      .email-content { padding-left:24px !important; padding-right:24px !important; }
      .email-code { font-size:38px !important; letter-spacing:6px !important; }
    }
    @media (prefers-color-scheme:dark) {
      .email-background { background-color:#18181b !important; }
      .email-text { color:#fcfcfc !important; }
      .email-muted { color:#9f9fa9 !important; }
      .email-link { color:#fcfcfc !important; }
      .email-banner-light { display:none !important; max-height:0 !important; overflow:hidden !important; }
      .email-banner-dark { display:block !important; max-height:none !important; overflow:visible !important; }
    }
  </style>
  <!--[if mso]><style>body,table,td,h1,p,a { font-family:Arial,sans-serif !important; }</style><![endif]-->
</head>
<body class="email-background" style="margin:0; padding:0; width:100%; background-color:#fff; color:#18181b; font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;">
  <div aria-hidden="true" style="display:none; max-height:0; max-width:0; overflow:hidden; opacity:0; font-size:1px; line-height:1px; mso-hide:all;">A payment needs a little attention. Here's where to sort it out.</div>
  <table role="presentation" class="email-background" width="100%" cellpadding="0" cellspacing="0" style="font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; width:100%; background-color:#fff;">
    <tr><td style="font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; padding:0; font-size:0; line-height:0;">
      <img class="email-banner-light" src="https://kgmqmaivltdolfzjrjjs.supabase.co/storage/v1/object/public/email-assets/banner-light-v1.jpg" width="600" height="180" alt="" style="display:block; border:0; width:100%; height:auto; margin:0;">
      <!--[if !mso]><!--><img class="email-banner-dark" src="https://kgmqmaivltdolfzjrjjs.supabase.co/storage/v1/object/public/email-assets/banner-dark-v1.jpg" width="600" height="180" alt="" style="display:none; border:0; width:100%; height:auto; max-height:0; overflow:hidden; margin:0;"><!--<![endif]-->
    </td></tr>
    <tr><td class="email-content" align="center" style="font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; padding:0 32px;">
      <!--[if mso]><table role="presentation" width="560"><tr><td align="center"><![endif]-->
      <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; width:100%; max-width:560px; margin:0 auto;">
        <tr><td align="center" style="font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; padding:0;">
          <h1 class="email-heading email-text" aria-label="Payment issue with Recordly" style="font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; margin:0 0 16px; color:#18181b; font-size:33px; line-height:40px; font-weight:500; letter-spacing:-1.1px;">Payment issue with <span class="email-title-brand" style="display:inline-block; white-space:nowrap;"><img src="https://kgmqmaivltdolfzjrjjs.supabase.co/storage/v1/object/public/email-assets/recordly-mark-v1.png" width="35" height="35" alt="" style="display:inline-block; width:1.05em; height:1.05em; margin:0 7px 0 0; border:0; vertical-align:-0.15em;">Recordly</span></h1>
          <p class="email-intro email-muted" style="font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; margin:0; color:#71717a; font-size:15px; line-height:24px; overflow-wrap:anywhere;">Your latest payment for {{ .PlanName }} didn't go through. Let's get it sorted: review your billing details and payment method below.</p>
        </td></tr>
        <tr><td style="font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; padding:24px 0 0;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; width:100%;"><tr><td class="email-muted" style="font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; padding:5px 12px 5px 0; color:#71717a; font-size:14px; line-height:22px; vertical-align:top;">Amount due</td><td class="email-text" align="right" style="font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; padding:5px 0; color:#18181b; font-size:14px; line-height:22px; overflow-wrap:anywhere;">{{ .Amount }}</td></tr><tr><td class="email-muted" style="font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; padding:5px 12px 5px 0; color:#71717a; font-size:14px; line-height:22px; vertical-align:top;">Invoice</td><td class="email-text" align="right" style="font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; padding:5px 0; color:#18181b; font-size:14px; line-height:22px; overflow-wrap:anywhere;">{{ .InvoiceNumber }}</td></tr></table></td></tr>
        <tr><td align="center" style="font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; padding:28px 0 0;"><table role="presentation" cellpadding="0" cellspacing="0" style="font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; margin:0 auto;"><tr><td align="center" bgcolor="#0485f7" style="font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; border-radius:24px; background-color:#0485f7; mso-padding-alt:10px 16px;"><a class="email-action" href="{{ .ActionURL }}" style="font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; display:inline-block; border-radius:24px; background-color:#0485f7; padding:10px 16px; color:#fcfcfc; font-size:16px; line-height:24px; font-weight:500; text-align:center; text-decoration:none;">Update payment method</a></td></tr></table></td></tr>
        <tr><td align="center" style="font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; padding:20px 0 0;"><p class="email-muted" style="font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; margin:0; color:#71717a; font-size:14px; line-height:23px;">Your billing page shows the current payment status and any next steps. Never send card details by email.</p></td></tr>
        <tr><td align="center" style="font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; padding:44px 0 32px;">
          <p class="email-muted" style="font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; margin:0 0 10px; color:#71717a; font-size:12px; line-height:20px;">Need help with a payment? Contact support.</p>
          <p style="font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; margin:0; font-size:12px; line-height:20px;"><a class="email-link" href="mailto:support@recordly.dev" style="font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; color:#18181b; text-decoration:underline;">Contact support</a><span class="email-muted" style="color:#71717a;"> &nbsp;·&nbsp; </span><a class="email-link" href="https://videos.recordly.dev/privacy" style="font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; color:#18181b; text-decoration:underline;">Privacy</a></p>
        </td></tr>
      </table>
      <!--[if mso]></td></tr></table><![endif]-->
    </td></tr>
  </table>
</body>
</html>