transactional-emails
Version:
Transactional emails for our products
681 lines (581 loc) • 14.4 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= subject %></title>
<link
rel="stylesheet"
href="//fonts.googleapis.com/css?family=Roboto:300,400,600,700&lang=en"
/>
<style type="text/css">
/* Template styling */
body,
td,
input,
span,
p,
textarea,
select,
h1,
.btn {
font-family: 'Roboto', 'Tahoma', 'Helvetica Neue', Helvetica, Arial,
sans-serif;
}
body {
width: 100%;
max-width: 100%;
font-size: 16px;
line-height: 24px;
color: #fff;
background: radial-gradient(#0686cb, #0a2256);
}
.staRHs {
background: radial-gradient(#0686cb, #0a2256);
}
h1.title {
text-transform: uppercase;
font-size: 48px;
font-weight: bold;
margin: 0 auto;
padding: 60px 5px 30px 5px;
line-height: 1em;
text-align: center;
}
h2 {
text-transform: uppercase;
margin: 0 auto;
text-align: center;
line-height: 1.2em;
}
h3 {
margin: 0 auto;
text-align: center;
line-height: 1.2em;
}
p,
ul,
ul li {
font-size: 16px;
margin: 0 0 16px;
line-height: 24px;
}
ul {
margin-bottom: 24px;
}
ul li {
margin-bottom: 8px;
}
p.mini {
font-size: 12px;
line-height: 18px;
color: #abafb4;
}
p.message {
font-size: 16px;
line-height: 20px;
margin-bottom: 4px;
}
hr {
margin: 2rem 0;
width: 100%;
border: none;
border-bottom: 1px solid #0686cb;
}
a,
a:link,
a:visited,
a:active,
a:hover {
font-weight: bold;
color: #fff;
text-decoration: none;
word-break: break-word;
}
a:active,
a:hover {
text-decoration: underline;
}
.time {
font-size: 11px;
color: #abafb4;
padding-right: 6px;
}
.avatar {
border-radius: 2px;
}
.heart {
color: red;
}
.staRHs .heart {
color: #008fd5;
}
.aimee {
display: flex;
}
.body_div {
display: flex;
}
.body_text {
margin: 0 auto;
font-size: 19px;
}
.image_div {
display: flex;
margin: 0 auto;
}
.image_div img {
max-width: inherit;
height: 405px;
margin: 0 auto;
}
.include_div {
margin: 16px auto;
}
.desktop_header {
margin: 40px 24px 32px 0;
}
.logo {
margin-left: 10px;
width: 265px;
height: 45px;
}
.footer {
font-size: 18px;
line-height: 45px;
}
.gold {
color: #ffc931;
}
del {
text-decoration: line-through;
}
#footer p {
margin-top: 16px;
font-size: 12px;
}
/* Client-specific Styles */
#outlook a {
padding: 0;
}
body {
width: 100% ;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0 auto;
padding: 0;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
#backgroundTable {
margin: 0;
padding: 0;
width: 100%;
line-height: 100% ;
}
/* Some sensible defaults for images
Bring inline: Yes. */
img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
.image_fix {
display: block;
}
/* Outlook 07, 10 Padding issue fix
Bring inline: No.*/
table td {
border-collapse: collapse;
}
/* Fix spacing around Outlook 07, 10 tables
Bring inline: Yes */
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/* Rate */
.rate table {
width: 100%;
margin-top: 16px;
}
.rate a {
justify-content: center;
align-items: center;
margin: 0 auto;
}
.rate p {
font-size: 12px;
line-height: 16px;
font-weight: bold;
text-align: center;
word-break: break-word;
margin: 0 1px;
}
.rate img {
width: 32px;
height: 32px;
margin: 0 auto 16px auto;
}
div.content {
padding: 32px;
}
div.action {
display: flex;
justify-content: center;
}
.action-block {
display: block ;
text-align: center ;
}
.border {
border-style: solid ;
border: 1 ;
border-color: #1d1e20 ;
border-width: 0.5px;
}
.btn {
display: inline;
margin: 40px auto;
text-decoration: none;
border-style: none;
border: 0;
padding: 10px;
font-size: 24px;
color: #1d1e20;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
vertical-align: center;
text-align: center;
-webkit-font-smoothing: antialiased;
text-transform: uppercase;
}
.btn-danger {
background: #dc0000;
border: 1px solid #dc0000;
}
hr {
border: none;
border-bottom: 1px solid #ececec;
margin: 2.5rem 0;
width: 100%;
}
.gold {
color: #f2b646;
}
/* Mobile */
@media only screen and (max-device-width: 480px) {
/* Part one of controlling phone number linking for mobile. */
a[href^='tel'],
a[href^='sms'] {
text-decoration: none;
color: blue;
/* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^='tel'],
.mobile_link a[href^='sms'] {
text-decoration: default;
color: orange ;
pointer-events: auto;
cursor: default;
}
.aimee {
display: block ;
}
.title {
font-size: 40px ;
}
.btn {
font-size: 20px ;
}
}
/* Not all email clients will obey these, but the important ones will */
@media only screen and (max-width: 480px) {
.card {
padding: 1rem 0.75rem ;
}
.link_option {
font-size: 14px;
}
hr {
margin: 2rem -0.75rem ;
padding-right: 1.5rem ;
}
.aimee {
display: block ;
}
.title {
font-size: 40px ;
}
img {
max-width: 100%;
height: auto;
}
.logo {
width: 132px ;
height: 22px ;
}
.footer {
font-size: 14px ;
line-height: 22px ;
}
}
/* More Specific Targeting */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* You guessed it, ipad (tablets, smaller screens, etc) */
/* repeating for the ipad */
a[href^='tel'],
a[href^='sms'] {
text-decoration: none;
color: blue;
/* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^='tel'],
.mobile_link a[href^='sms'] {
text-decoration: default;
color: orange ;
pointer-events: auto;
cursor: default;
}
}
@media (prefers-color-scheme: dark) {
body {
color: #fff ;
background: radial-gradient(#0686cb, #0a2256) ;
}
.staRHs {
color: #fff ;
background: radial-gradient(#0686cb, #0a2256) ;
}
.btn {
color: #1d1e20 ;
background: #fff ;
}
p,
span,
h1.title {
color: #fff ;
}
}
/* iPhone Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 640px) {
/* Must include !important on each style to override inline styles */
.title {
font-size: 40px ;
}
.btn {
font-size: 20px ;
}
img {
max-width: 100%;
height: auto;
}
.logo {
width: 132px ;
height: 22px ;
}
.footer {
font-size: 14px ;
line-height: 22px ;
}
}
/* Android targeting */
@media only screen and (-webkit-device-pixel-ratio: 0.75) {
/* Put CSS for low density (ldpi) Android layouts in here */
img {
max-width: 100%;
height: auto;
}
.aimee {
display: block ;
}
.title {
font-size: 40px ;
}
.btn {
font-size: 20px ;
}
img {
max-width: 100%;
height: auto;
}
.logo {
width: 132px ;
height: 22px ;
}
.footer {
font-size: 14px ;
line-height: 22px ;
}
}
@media only screen and (-webkit-device-pixel-ratio: 1.5) {
/* Put CSS for high density (hdpi) Android layouts in here */
img {
max-width: 100%;
height: auto;
}
.aimee {
display: block ;
}
.title {
font-size: 40px ;
}
.btn {
font-size: 20px ;
}
img {
max-width: 100%;
height: auto;
}
.logo {
width: 132px ;
height: 22px ;
}
.footer {
font-size: 14px ;
line-height: 22px ;
}
}
/* Galaxy Nexus */
@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) {
body {
font-size: 16px;
}
.image_div img {
width: auto ;
height: 300px ;
}
.logo {
width: 132px ;
height: 22px ;
}
.footer {
font-size: 14px ;
line-height: 22px ;
}
}
/* end Android targeting */
</style>
</head>
<body
style="
max-width: 100%;
width: 100% !important;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
margin: 0 auto;
padding: 0;
"
class="{{{area}}}"
>
<table
width="100%"
cellpadding="0"
cellspacing="0"
border="0"
style="
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
line-height: 24px;
margin: 0;
padding: 0;
width: 100%;
font-size: 17px;
"
>
<tr>
<td style="border-collapse: collapse">
<table
width="100%"
cellpadding="0"
cellspacing="0"
border="0"
align="center"
style="
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
"
>
<tr>
<td valign="top" style="border-collapse: collapse">
<h1 style="margin: 0 auto" class="title">
{{{title}}} {{#if title2}}
<div>{{{title2}}}</div>
{{/if}}
</h1>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" style="border-collapse: collapse">
<table
cellpadding="0"
cellspacing="0"
border="0"
align="center"
style="
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
color: white;
border-radius: 3px;
margin-bottom: 1rem;
overflow: hidden !important;
"
>
<tr>
<td valign="top" style="border-collapse: collapse">
<div style="margin: 0 auto">{{{content}}}</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" align="center" style="display: flex">
<div style="margin: 5px auto; display: flex">
<span class="footer">
Made with <span class="heart">❤</span> by
</span>
<a href="https://resourceful-humans.com/" target="_blank">
{{#if area}}
<img
class="logo"
src="https://networhk.net/img/aimee/rh_logo_white.png"
/>
{{else}}
<img
class="logo"
src="https://networhk.net/img/aimee/rh_logo_white.png"
/>
{{/if}}
</a>
</div>
</td>
</tr>
</table>
</body>
</html>