<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome to <%= t('application.name') %>!</title>
<% # TODO This is not what we want to do long-term. Would love to see this powered by Tailwind CSS. %>
<style type="text/css">
*:not(br):not(tr):not(html) {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
box-sizing: border-box;
}
body {
width: 100% !important;
height: 100%;
margin: 0;
line-height: 1.4;
background-color: #F6F7F8;
color: #3E4B5B;
font-size: 16px;
-webkit-text-size-adjust: none;
}
p,
ul,
ol,
blockquote {
line-height: 1.4;
text-align: left;
}
a {
color: #047BF8;
}
a img {
border: none;
}
/* Layout ------------------------------ */
.email-wrapper {
width: 100%;
margin: 0;
padding: 0;
background-color: #F6F7F8;
}
.email-content {
width: 100%;
margin: 0;
padding: 0;
}
/* Masthead ----------------------- */
.email-masthead {
padding: 25px 0;
text-align: center;
}
.email-masthead_logo {
width: 94px;
}
.email-masthead_name {
font-size: 16px;
/*font-weight: bold;*/
color: #bbbfc3;
text-decoration: none;
/*text-shadow: 0 1px 0 white;*/
}
/* Body ------------------------------ */
.email-body {
width: 100%;
margin: 0;
padding: 0;
border-top: 1px solid #EDEFF2;
border-bottom: 1px solid #EDEFF2;
background-color: #FFFFFF;
}
.email-body_inner {
width: 570px;
margin: 0 auto;
padding: 0;
background-color: #FFFFFF;
}
.email-footer {
width: 570px;
margin: 0 auto;
padding: 0;
text-align: center;
}
.email-footer p {
color: #AAAAAA;
}
.body-action {
width: 100%;
margin: 30px auto;
padding: 0;
text-align: center;
}
.body-sub {
margin-top: 25px;
padding-top: 25px;
border-top: 1px solid #EDEFF2;
}
.content-cell {
padding: 35px;
}
.preheader {
display: none !important;
}
/* Attribute list ------------------------------ */
.attributes {
margin: 0 0 21px;
}
.attributes_content {
background-color: #EDEFF2;
padding: 16px;
}
.attributes_item {
padding: 0;
}
/* Related Items ------------------------------ */
.related {
width: 100%;
margin: 0;
padding: 25px 0 0 0;
}
.related_item {
padding: 10px 0;
color: #3E4B5B;
font-size: 15px;
line-height: 18px;
}
.related_item-title {
display: block;
margin: .5em 0 0;
}
.related_item-thumb {
display: block;
padding-bottom: 10px;
}
.related_heading {
border-top: 1px solid #EDEFF2;
text-align: center;
padding: 25px 0 10px;
}
/* Discount Code ------------------------------ */
.discount {
width: 100%;
margin: 0;
padding: 24px;
background-color: #EDEFF2;
border: 2px dashed #9BA2AB;
}
.discount_heading {
text-align: center;
}
.discount_body {
text-align: center;
font-size: 15px;
}
/* Social Icons ------------------------------ */
.social {
width: auto;
}
.social td {
padding: 0;
width: auto;
}
.social_icon {
height: 20px;
margin: 0 8px 10px 8px;
padding: 0;
}
/* Data table ------------------------------ */
.purchase {
width: 100%;
margin: 0;
padding: 35px 0;
}
.purchase_content {
width: 100%;
margin: 0;
padding: 25px 0 0 0;
}
.purchase_item {
padding: 10px 0;
color: #3E4B5B;
font-size: 15px;
line-height: 18px;
}
.purchase_heading {
padding-bottom: 8px;
border-bottom: 1px solid #EDEFF2;
}
.purchase_heading p {
margin: 0;
color: #9BA2AB;
font-size: 12px;
}
.purchase_footer {
padding-top: 15px;
border-top: 1px solid #EDEFF2;
}
.purchase_total {
margin: 0;
text-align: right;
/*font-weight: bold;*/
color: #3E4B5B;
}
.purchase_total--label {
padding: 0 15px 0 0;
}
/* Utilities ------------------------------ */
.align-right {
text-align: right;
}
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
/*Media Queries ------------------------------ */
@media only screen and (max-width: 600px) {
.email-body_inner,
.email-footer {
width: 100% !important;
}
}
@media only screen and (max-width: 500px) {
.button {
width: 100% !important;
}
}
/* Buttons ------------------------------ */
.button {
background-color: #047BF8;
border-top: 10px solid #047BF8;
border-right: 18px solid #047BF8;
border-bottom: 10px solid #047BF8;
border-left: 18px solid #047BF8;
display: inline-block;
color: #FFF;
text-decoration: none;
border-radius: 3px;
-webkit-text-size-adjust: none;
line-height: 22px;
font-size: 16px;
color: #FFF;
}
.button--link {
background-color: transparent;
border-top: 10px solid transparent;
border-right: 18px solid transparent;
border-bottom: 10px solid transparent;
border-left: 18px solid transparent;
display: inline-block;
color: #047BF8;
text-decoration: underline;
border-radius: 3px;
/*box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);*/
-webkit-text-size-adjust: none;
}
.button--green {
background-color: #22BC66;
border-top: 10px solid #22BC66;
border-right: 18px solid #22BC66;
border-bottom: 10px solid #22BC66;
border-left: 18px solid #22BC66;
}
.button--red {
background-color: #FF6136;
border-top: 10px solid #FF6136;
border-right: 18px solid #FF6136;
border-bottom: 10px solid #FF6136;
border-left: 18px solid #FF6136;
}
/* Type ------------------------------ */
h1 {
margin-top: 0;
color: #3E4B5B;
font-size: 19px;
font-weight: bold;
text-align: left;
}
h2 {
margin-top: 0;
color: #3E4B5B;
font-size: 16px;
font-weight: bold;
text-align: left;
}
h3 {
margin-top: 0;
color: #3E4B5B;
font-size: 14px;
font-weight: bold;
text-align: left;
}
p {
margin-top: 0;
color: #3E4B5B;
font-size: 16px;
line-height: 1.5em;
text-align: left;
}
p.sub {
font-size: 12px;
}
p.center {
text-align: center;
}
.body-action.less-footer {
margin-bottom: 10px;
}
</style>
</head>
<body>
<% if content_for? :preheader %>
<span class="preheader"><% yield :preheader %></span>
<% end %>
<table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table class="email-content" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="email-masthead">
<a href="<%= root_url %>" class="email-masthead_name">
<%= email_image_tag("logo/logo.png", width: image_width_for_height("logo/logo.png", BulletTrain::Themes.logo_height), height: BulletTrain::Themes.logo_height, style: "width: #{image_width_for_height('logo/logo.png', BulletTrain::Themes.logo_height)}px; height: #{BulletTrain::Themes.logo_height}px;") %>
</a>
</td>
</tr>
<!-- Email Body -->
<tr>
<td class="email-body" width="100%" cellpadding="0" cellspacing="0">
<table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0">
<!-- Body content -->
<tr>
<td class="content-cell">
<%= yield %>
<% if false %>
<!-- Sub copy -->
<table class="body-sub">
<tr>
<td>
<p class="sub"><%= t('.trouble') %></p>
<p class="sub">{{action_url}}</p>
</td>
</tr>
</table>
<% end %>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="email-footer" align="center" width="570" cellpadding="0" cellspacing="0">
<tr>
<td class="content-cell" align="center">
<p class="sub align-center">© <%= t('.all_rights_reserved', year: Date.today.year, product_name: t('application.name')) %></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>