storj/web/satellite/static/emails/Invite.html
Lizzy Thomson 25f2305e00 web/satellite: removed google fonts from satellite emails
update fonts in satellite emails by removing google fonts

Issue - https://github.com/storj/storj/issues/5690

Change-Id: I9243c172e52d780800300dca2ec78b5665979eda
2023-05-02 16:10:34 +00:00

629 lines
26 KiB
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[if IE]><html xmlns="http://www.w3.org/1999/xhtml" class="ie"><![endif]--><!--[if !IE]><!-->
<html style="margin: 0;padding: 0;" xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html"><!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge" /><!--<![endif]-->
<meta name="viewport" content="width=device-width" />
<style type="text/css">
@media only screen and (min-width: 620px) {
.wrapper {
min-width: 600px !important;
}
.wrapper h1 {}
.wrapper h1 {
font-size: 64px !important;
line-height: 63px !important;
}
.wrapper h2 {}
.wrapper h2 {
font-size: 30px !important;
line-height: 38px !important;
}
.wrapper h3 {}
.wrapper h3 {
font-size: 22px !important;
line-height: 31px !important;
}
.wrapper .size-10 {
font-size: 10px !important;
line-height: 18px !important;
}
.wrapper .size-12 {
font-size: 12px !important;
line-height: 19px !important;
}
.wrapper .size-20 {
font-size: 20px !important;
line-height: 28px !important;
}
.wrapper .size-40 {
font-size: 40px !important;
line-height: 47px !important;
}
}
</style>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
table-layout: fixed;
}
* {
line-height: inherit;
}
[x-apple-data-detectors],
[href^='tel'],
[href^='sms'] {
color: inherit !important;
text-decoration: none !important;
}
.wrapper .footer__share-button a:hover,
.wrapper .footer__share-button a:focus {
color: #ffffff !important;
}
.btn a:hover,
.btn a:focus,
.footer__share-button a:hover,
.footer__share-button a:focus,
.email-footer__links a:hover,
.email-footer__links a:focus {
opacity: 0.8;
}
.layout,
.column {
transition: width 0.25s ease-in-out, max-width 0.25s ease-in-out;
}
.preheader td {
padding-bottom: 8px;
}
.layout {
max-width: 400px !important;
-fallback-width: 95% !important;
width: calc(100% - 20px) !important;
}
.column {
max-width: 400px !important;
width: 100% !important;
}
.fixed-width.has-border .layout__inner {
box-sizing: border-box;
}
[owa] .column div,
[owa] .column button {
display: block !important;
}
.ie .column,
[owa] .column {
display: table-cell;
float: none !important;
vertical-align: top;
}
.ie .layout,
[owa] .layout,
.ie .one-col .column,
[owa] .one-col .column {
max-width: 600px !important;
width: 600px !important;
}
.ie .two-col .column,
[owa] .two-col .column {
max-width: 300px !important;
width: 300px !important;
}
.ie .three-col .column,
[owa] .three-col .column {
max-width: 200px !important;
width: 200px !important;
}
.ie .two-col.has-gutter .column,
[owa] .two-col.x_has-gutter .column {
max-width: 290px !important;
width: 290px !important;
}
.ie .three-col.has-gutter .column,
[owa] .three-col.x_has-gutter .column,
.ie .has-gutter .narrow,
[owa] .has-gutter .narrow {
max-width: 188px !important;
width: 188px !important;
}
.ie .has-gutter .wide,
[owa] .has-gutter .wide {
max-width: 394px !important;
width: 394px !important;
}
.ie .two-col.has-gutter.has-border .column,
[owa] .two-col.x_has-gutter.x_has-border .column {
max-width: 292px !important;
width: 292px !important;
}
.ie .three-col.has-gutter.has-border .column,
[owa] .three-col.x_has-gutter.x_has-border .column,
.ie .has-gutter.has-border .narrow,
[owa] .has-gutter.x_has-border .narrow {
max-width: 190px !important;
width: 190px !important;
}
.ie .has-gutter.has-border .wide,
[owa] .has-gutter.x_has-border .wide {
max-width: 396px !important;
width: 396px !important;
}
.ie .fixed-width .layout__inner {
border-left: 0 none white !important;
border-right: 0 none white !important;
}
.layout-fixed-width {
background-color: #ffffff;
}
@media only screen and (min-width: 620px) {
.column {
display: table-cell;
Float: none !important;
vertical-align: top;
}
.layout,
.one-col .column {
max-width: 600px !important;
width: 600px !important;
}
.two-col .column {
max-width: 300px !important;
width: 300px !important;
}
.three-col .column {
max-width: 200px !important;
width: 200px !important;
}
.two-col.has-gutter .column,
.two-col.ecxhas-gutter .column {
max-width: 290px !important;
width: 290px !important;
}
.three-col.has-gutter .column,
.three-col.ecxhas-gutter .column {
max-width: 188px !important;
width: 188px !important;
}
.two-col.has-gutter.has-border .column,
.two-col.ecxhas-gutter.ecxhas-border .column {
max-width: 292px !important;
width: 292px !important;
}
.three-col.has-gutter.has-border .column,
.three-col.ecxhas-gutter.ecxhas-border .column,
.has-gutter.has-border .narrow,
.has-gutter.ecxhas-border .narrow {
max-width: 190px !important;
width: 190px !important;
}
.has-gutter.has-border .wide,
.has-gutter.ecxhas-border .wide {
max-width: 396px !important;
width: 396px !important;
}
}
@media (max-width: 321px) {
.fixed-width.has-border .layout__inner {
border-width: 1px 0 !important;
}
.layout,
.column {
min-width: 320px !important;
width: 320px !important;
}
}
.mso div {
border: 0 none white !important;
}
.mso .w560 .divider {
Margin-left: 260px !important;
Margin-right: 260px !important;
}
.mso .w360 .divider {
Margin-left: 160px !important;
Margin-right: 160px !important;
}
.mso .w260 .divider {
Margin-left: 110px !important;
Margin-right: 110px !important;
}
.mso .w160 .divider {
Margin-left: 60px !important;
Margin-right: 60px !important;
}
.mso .w354 .divider {
Margin-left: 157px !important;
Margin-right: 157px !important;
}
.mso .w250 .divider {
Margin-left: 105px !important;
Margin-right: 105px !important;
}
.mso .w148 .divider {
Margin-left: 54px !important;
Margin-right: 54px !important;
}
.mso .size-10,
.ie .size-10 {
font-size: 10px !important;
line-height: 18px !important;
}
.mso .size-12,
.ie .size-12 {
font-size: 12px !important;
line-height: 19px !important;
}
.mso .size-20,
.ie .size-20 {
font-size: 20px !important;
line-height: 28px !important;
}
.mso .size-40,
.ie .size-40 {
font-size: 40px !important;
line-height: 47px !important;
}
</style>
<style type="text/css">
body {
background-color: #fff;
}
.logo a:hover,
.logo a:focus {
color: #859bb1 !important;
}
.mso h1,
.ie h1 {
font-size: 64px !important;
line-height: 63px !important;
}
.mso h2,
.ie h2 {
font-size: 30px !important;
line-height: 38px !important;
}
.mso h3,
.ie h3 {
font-size: 22px !important;
line-height: 31px !important;
}
.mso .footer__share-button p {
font-family: Helvetica, sans-serif;
}
</style>
<meta name="robots" content="noindex,nofollow" />
<meta property="og:title" content="My First Campaign" />
</head>
<!--[if mso]>
<body class="mso">
<![endif]-->
<!--[if !mso]><!-->
<body class="half-padding" style="margin: 0;padding: 0;-webkit-text-size-adjust: 100%;">
<!--<![endif]-->
<table class="wrapper"
style="border-collapse: collapse;table-layout: fixed;min-width: 320px;width: 100%;background-color: #fff;"
cellpadding="0" cellspacing="0" role="presentation">
<tbody>
<tr>
<td>
<div role="section">
<div class="layout one-col fixed-width"
style="Margin: 0 auto;max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);
overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
<div class="layout__inner" style="border-collapse: collapse;display: table;width: 100%;background-color: #fff;">
<!--[if (mso)|(IE)]>
<table align="center" cellpadding="0" cellspacing="0" role="presentation">
<tr class="layout-fixed-width" style="background-color: #fff;">
<td style="width: 600px" class="w560">
<![endif]-->
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: Helvetica, sans-serif;
max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);">
<div style="margin: 12px 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<h1 class="size-40"
style="Margin-top: 0;Margin-bottom: 0;font-style: normal;font-weight: 800;
color: #000;font-size: 32px;line-height: 40px;
font-family: Helvetica, sans-serif;" lang="x-size-40">
<span>
<strong>Hi {{ .UserName }},</strong>
</span>
</h1>
</div>
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
</div>
</div>
<div style="mso-line-height-rule: exactly;line-height: 20px;font-size: 20px;">&nbsp;</div>
<div class="layout one-col fixed-width"
style="Margin: 0 auto;max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);
overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
<div class="layout__inner" style="border-collapse: collapse;display: table;width: 100%;background-color: #fff;">
<!--[if (mso)|(IE)]>
<table align="center" cellpadding="0" cellspacing="0" role="presentation">
<tr class="layout-fixed-width" style="background-color: #fff;">
<td style="width: 600px" class="w560">
<![endif]-->
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px; font-family: Helvetica, sans-serif; font-weight: 300;
max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);">
<div style="margin: 12px 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<p class="size-20" style="Margin-top: 0;Margin-bottom: 0; font-family: Helvetica, sans-serif; font-weight: 300;font-size: 17px; line-height: 26px;" lang="x-size-20">
<span>You were invited to join
<a href="{{ .Origin }}" style="color: #2683ff; text-decoration: none; font-weight: bold;">a project</a>
on Storj by {{ .InviterEmail }}
</span>
</p>
<p class="size-20"
style="Margin-top: 5px;Margin-bottom: 0;
font-family: Helvetica, sans-serif; font-weight: 300; font-size: 17px;line-height: 26px;"
lang="x-size-20">
<span><br/>Log in and interact with the project!</span>
</p>
</div>
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
</div>
</div>
<div style="mso-line-height-rule: exactly;line-height: 20px;font-size: 20px;">&nbsp;</div>
<div class="layout one-col fixed-width"
style="Margin: 0 auto;max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);
overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
<div class="layout__inner" style="border-collapse: collapse;display: table;width: 100%;background-color: #fff;">
<!--[if (mso)|(IE)]>
<table align="center" cellpadding="0" cellspacing="0" role="presentation">
<tr class="layout-fixed-width" style="background-color: #fff;">
<td style="width: 600px" class="w560">
<![endif]-->
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px; font-family: Helvetica, sans-serif; font-weight: 300;
max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);">
<div style="margin: 12px 20px;">
<div class="btn btn--flat btn--large" style="text-align: left;">
<a style="border-radius: 4px;display: inline-block;font-size: 14px;font-weight: bold;
line-height: 24px;padding: 12px 50px;text-align: center;
text-decoration: none !important;transition: opacity 0.1s ease-in;
color: #ffffff !important;background-color: #2683ff;
font-family: Helvetica, sans-serif; font-weight: 500;" href="{{ .SignInLink }}"
target="_blank">Sign In
</a>
<!--[if mso]>
<p style="line-height:0;margin:0;"></p>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="{{ .SignInLink }}"
style="width:191px" arcsize="9%" fillcolor="#2683FF" stroke="f">
<v:textbox style="mso-fit-shape-to-text:t" inset="0px,11px,0px,11px">
<center style="font-size:14px;line-height:24px;color:#FFFFFF;
font-family:Inter,sans-serif;font-weight:bold;
mso-line-height-rule:exactly;mso-text-raise:4px">Sign In
</center>
</v:textbox>
</v:roundrect>
<![endif]-->
</div>
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
</div>
</div>
<div style="mso-line-height-rule: exactly;line-height: 20px;font-size: 20px;">&nbsp;</div>
<div class="layout one-col fixed-width"
style="Margin: 0 auto;max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);
overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
<div class="layout__inner" style="border-collapse: collapse;display: table;width: 100%;background-color: #fff;">
<!--[if (mso)|(IE)]>
<table align="center" cellpadding="0" cellspacing="0" role="presentation">
<tr class="layout-fixed-width" style="background-color: #fff;">
<td style="width: 600px" class="w560">
<![endif]-->
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px; font-family: Helvetica, sans-serif; font-weight: 300;
max-width: 600px;min-width: 320px; width: calc(28000% - 167400px);">
<div style="Margin-left: 20px;Margin-right: 20px;Margin-top: 12px;">
<div class="divider"
style="display: block;font-size: 2px;line-height: 1px;Margin-left: auto;Margin-right: auto;
width: 100%;background-color: #ccc;Margin-bottom: 20px;">&nbsp
</div>
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
</div>
</div>
<div style="mso-line-height-rule: exactly;line-height: 20px;font-size: 20px;">&nbsp;</div>
<div class="layout one-col fixed-width"
style="Margin: 0 auto;max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);
overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
<div class="layout__inner" style="border-collapse: collapse;display: table;width: 100%;background-color: #fff;">
<!--[if (mso)|(IE)]>
<table align="center" cellpadding="0" cellspacing="0" role="presentation">
<tr class="layout-fixed-width" style="background-color: #fff;">
<td style="width: 600px" class="w560">
<![endif]-->
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px; font-family: Helvetica, sans-serif; font-weight: 300;
max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);">
<div style="margin: 12px 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<p class="size-12"
style="Margin-top: 0;Margin-bottom: 0;
font-family: Helvetica, sans-serif; font-weight: 300; font-size: 12px;
line-height: 19px;" lang="x-size-12">
<span>Please do not reply to this email.</span>
</p>
</div>
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
</div>
</div>
<div style="mso-line-height-rule: exactly;line-height: 20px;font-size: 20px;">&nbsp;</div>
<div class="layout three-col fixed-width"
style="Margin: 0 auto;max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);
overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
<div class="layout__inner" style="border-collapse: collapse;display: table;width: 100%;background-color: #fff;">
<!--[if (mso)|(IE)]>
<table align="center" cellpadding="0" cellspacing="0" role="presentation">
<tr class="layout-fixed-width" style="background-color: #fff;">
<td style="width: 200px" valign="top" class="w160">
<![endif]-->
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px; font-family: Helvetica, sans-serif; font-weight: 300;
Float: left;max-width: 320px;min-width: 200px;width: calc(72200px - 12000%);">
<div style="margin: 0 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<a href="https://supportdcs.storj.io/"
style="text-decoration: none; color: #66686C;" target="_blank">
<p class="size-12"
style="Margin-top: 0;Margin-bottom: 0;
font-family: Helvetica, sans-serif; font-weight: 300; font-size: 12px;
line-height: 19px;" lang="x-size-12">
<span>
<strong>Support</strong>
</span>
</p>
</a>
</div>
</div>
</div>
<!--[if (mso)|(IE)]></td><td style="width: 200px" valign="top" class="w160"><![endif]-->
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px; font-family: Helvetica, sans-serif; font-weight: 300;
Float: left;max-width: 320px;min-width: 200px;width: calc(72200px - 12000%);">
<div style="margin: 0 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<a href="{{ .ContactInfoURL }}" style="text-decoration: none; color: #66686C;" target="_blank">
<p class="size-12"
style="Margin-top: 0;Margin-bottom: 0;
font-family: Helvetica, sans-serif; font-weight: 300;font-size: 12px;
line-height: 19px;" lang="x-size-12">
<span>
<strong>Contact Info</strong>
</span>
</p>
</a>
</div>
</div>
</div>
<!--[if (mso)|(IE)]></td><td style="width: 100px" valign="top" class="w160"><![endif]-->
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: Helvetica, sans-serif; font-weight: 300;
Float: left;max-width: 150px;min-width: 100px;width: calc(72200px - 12000%);">
<div style="margin: 0 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<a href="{{ .TermsAndConditionsURL }}" target="_blank" style="text-decoration: none; color: #66686C;">
<p class="size-12"
style="Margin-top: 0;Margin-bottom: 0;
font-family: Helvetica, sans-serif; font-weight: 300;font-size: 12px;
line-height: 19px;" lang="x-size-12">
<span>
<strong>Terms &amp; Conditions</strong><br/>
&nbsp; </span>
</p>
</a>
</div>
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
</div>
</div>
<div class="layout one-col fixed-width"
style="Margin: 0 auto;max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);
overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
<div class="layout__inner" style="border-collapse: collapse;display: table;width: 100%;background-color: #fff;">
<!--[if (mso)|(IE)]>
<table align="center" cellpadding="0" cellspacing="0" role="presentation">
<tr class="layout-fixed-width" style="background-color: #fff;">
<td style="width: 600px" class="w560">
<![endif]-->
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: Helvetica, sans-serif; font-weight: 300;
max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);">
<div style="margin: 0 20px 12px 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<p class="size-10"
style="Margin-top: 0;Margin-bottom: 0;
font-family: Helvetica, sans-serif; font-weight: 300;font-size: 10px;line-height: 18px;"
lang="x-size-10">
<span>Storj Labs Inc 2019.<br/></span>
</p>
</div>
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>