From 0f5e36db94f314dfe892cd1fde2fc4a4319776ad Mon Sep 17 00:00:00 2001
From: Oliver Kieselbach <oliver.kieselbach@outlook.com>
Date: Sun, 23 Aug 2026 00:40:15 +0200
Subject: [PATCH] fix(email): exact brand mark as PNG again, stripes direction
 and widths match the reference

The CSS border trapezoid did not reproduce the mark's shape across clients; the
mark is brand identity, so it is the one image in the mail (empty alt). Stripes
now run top-left to bottom-right, thin/wide/thin as in the reference banner.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../Services/EmailTemplates.cs                |  26 ++++++++++--------
 .../public/email/mark.png                     | Bin 0 -> 493 bytes
 2 files changed, 14 insertions(+), 12 deletions(-)
 create mode 100644 src/Web/autopilot-monitor-web/public/email/mark.png

diff --git a/src/Backend/AutopilotMonitor.Functions/Services/EmailTemplates.cs b/src/Backend/AutopilotMonitor.Functions/Services/EmailTemplates.cs
index 8791afec..b467975a 100644
--- a/src/Backend/AutopilotMonitor.Functions/Services/EmailTemplates.cs
+++ b/src/Backend/AutopilotMonitor.Functions/Services/EmailTemplates.cs
@@ -37,16 +37,17 @@ public static class EmailTemplates
     <tr><td align=""center"">
       <table width=""600"" cellpadding=""0"" cellspacing=""0"" style=""background-color:#ffffff; border-radius:12px; overflow:hidden; box-shadow:0 4px 6px rgba(0,0,0,0.07);"">
 
-        <!-- Header: image-free, progressively enhanced. Base (every client): solid bgcolor band +
-             text wordmark + brand mark drawn with a CSS border trapezoid. Enhancements where
-             supported (Apple/iOS Mail, most of Gmail): diagonal stripes via linear-gradient and the
-             slanted bottom edge via clip-path; clients that drop them simply show a flat band. -->
+        <!-- Header, progressively enhanced. Base (every client): solid bgcolor band + text wordmark.
+             The brand mark is the one image (exact shape matters; alt empty so blocked images just
+             omit it). Enhancements where supported (Apple Mail, most of Gmail): diagonal stripes via
+             linear-gradient and the slanted bottom edge via clip-path; Outlook shows a flat band. -->
         <tr>
-          <td bgcolor=""#33b161"" style=""background-color:#33b161; background-image:linear-gradient(112deg, #33b161 0%, #33b161 44%, #3cbb6a 44%, #3cbb6a 60%, #2ea85a 60%, #2ea85a 78%, #33b161 78%, #33b161 100%); clip-path:polygon(0 0, 100% 0, 100% 100%, 0 80%); padding:28px 40px 52px;"">
+          <td bgcolor=""#33b161"" style=""background-color:#33b161; background-image:linear-gradient(68deg, #33b161 0%, #33b161 44%, #3cbb6a 44%, #3cbb6a 52%, #2ea85a 52%, #2ea85a 74%, #3cbb6a 74%, #3cbb6a 82%, #33b161 82%, #33b161 100%); clip-path:polygon(0 0, 100% 0, 100% 100%, 0 80%); padding:28px 40px 52px;"">
             <table cellpadding=""0"" cellspacing=""0"" border=""0"">
               <tr>
                 <td valign=""middle"" style=""padding:0 14px 0 0; line-height:0; font-size:0;"">
-                  <div style=""width:0; height:20px; border-left:36px solid #ffffff; border-top:13px solid transparent; border-bottom:2px solid transparent; border-right:0; display:block;""></div>
+                  <img src=""{Constants.WebsiteBaseUrl}/email/mark.png"" width=""36"" height=""33"" alt=""""
+                       style=""display:block; width:36px; height:33px; border:0;"">
                 </td>
                 <td valign=""middle"" style=""color:#ffffff; font-size:22px; font-weight:600; letter-spacing:-0.2px; line-height:1; white-space:nowrap;"">
                   Autopilot Monitor
@@ -126,16 +127,17 @@ public static class EmailTemplates
     <tr><td align=""center"">
       <table width=""600"" cellpadding=""0"" cellspacing=""0"" style=""background-color:#ffffff; border-radius:12px; overflow:hidden; box-shadow:0 4px 6px rgba(0,0,0,0.07);"">
 
-        <!-- Header: image-free, progressively enhanced. Base (every client): solid bgcolor band +
-             text wordmark + brand mark drawn with a CSS border trapezoid. Enhancements where
-             supported (Apple/iOS Mail, most of Gmail): diagonal stripes via linear-gradient and the
-             slanted bottom edge via clip-path; clients that drop them simply show a flat band. -->
+        <!-- Header, progressively enhanced. Base (every client): solid bgcolor band + text wordmark.
+             The brand mark is the one image (exact shape matters; alt empty so blocked images just
+             omit it). Enhancements where supported (Apple Mail, most of Gmail): diagonal stripes via
+             linear-gradient and the slanted bottom edge via clip-path; Outlook shows a flat band. -->
         <tr>
-          <td bgcolor=""#33b161"" style=""background-color:#33b161; background-image:linear-gradient(112deg, #33b161 0%, #33b161 44%, #3cbb6a 44%, #3cbb6a 60%, #2ea85a 60%, #2ea85a 78%, #33b161 78%, #33b161 100%); clip-path:polygon(0 0, 100% 0, 100% 100%, 0 80%); padding:28px 40px 52px;"">
+          <td bgcolor=""#33b161"" style=""background-color:#33b161; background-image:linear-gradient(68deg, #33b161 0%, #33b161 44%, #3cbb6a 44%, #3cbb6a 52%, #2ea85a 52%, #2ea85a 74%, #3cbb6a 74%, #3cbb6a 82%, #33b161 82%, #33b161 100%); clip-path:polygon(0 0, 100% 0, 100% 100%, 0 80%); padding:28px 40px 52px;"">
             <table cellpadding=""0"" cellspacing=""0"" border=""0"">
               <tr>
                 <td valign=""middle"" style=""padding:0 14px 0 0; line-height:0; font-size:0;"">
-                  <div style=""width:0; height:20px; border-left:36px solid #ffffff; border-top:13px solid transparent; border-bottom:2px solid transparent; border-right:0; display:block;""></div>
+                  <img src=""{Constants.WebsiteBaseUrl}/email/mark.png"" width=""36"" height=""33"" alt=""""
+                       style=""display:block; width:36px; height:33px; border:0;"">
                 </td>
                 <td valign=""middle"" style=""color:#ffffff; font-size:22px; font-weight:600; letter-spacing:-0.2px; line-height:1; white-space:nowrap;"">
                   Autopilot Monitor
diff --git a/src/Web/autopilot-monitor-web/public/email/mark.png b/src/Web/autopilot-monitor-web/public/email/mark.png
new file mode 100644
index 0000000000000000000000000000000000000000..658081d41f32b27297032effbccd864be09e4416
GIT binary patch
literal 493
zcmeAS@N?(olHy`uVBq!ia0vp^6M(pdgAGX5GcGb^U|`(h>EaktaqI0}N4`S_Jg$zj
zf8V#viD<eq;gsL)naT^+U$1cOF?2gHKTc5a@!|6a*ZeV^bH>M>zn$w#uhzy8h0vsx
z4y%s5WDQcC#<j$2PMkt$(1Ob=Co#2ZT?_-U15~$ZP0-SuptUi)F~k#uzAg6xssy4t
zD;!oWfg*F5AX|#ZkCvZ%fEplZAwrGKHmF9B_9McpVR~b>z{HQZLItmcs{&obx@bLE
z#wC8Lh{x2R#*EdI7$5SsFm61!{7gfD0uKi>6Z4^l8-In26+}3IECU4t1ucC;W~W92
zkYv-z_AQJH9V7(US{NG{11mcv1-M!m6M+H}0#m2YfJq&E;(QBY+M$L64J-B>;o)Ef
znZ?7QCVz>og$bmAjfKtSscM>o2FR>LhXjX^xFopLWd2N;l}yZwJ^@`bE#<lVwxW+8
yQ__x|{pTvdY~;ag<i&hQ!CLO3gsP0(6Y0n`{Wm9vIX?qNBZH@_pUXO@geCx${;;Y5

literal 0
HcmV?d00001