2023-04-04 09:13:41 +02:00
|
|
|
/* stylelint-disable color-no-hex, media-feature-range-notation */
|
2018-12-21 16:02:36 +01:00
|
|
|
|
2023-04-25 07:55:33 +02:00
|
|
|
/* Hex color codes are used instead of our standard of hsl colors,
|
|
|
|
|
because hex color codes are rendered by all email clients
|
|
|
|
|
consistently; HSL colors aren't supported by Hotmail. */
|
|
|
|
|
|
|
|
|
|
.illustration img,
|
|
|
|
|
img.bottom-illustration {
|
2017-09-16 13:58:17 +02:00
|
|
|
border: none;
|
|
|
|
|
-ms-interpolation-mode: bicubic;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
vertical-align: bottom;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-01 08:10:13 +02:00
|
|
|
body.default-email-font-settings {
|
2017-09-16 13:58:17 +02:00
|
|
|
font-family: sans-serif;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
line-height: 1.4;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
-ms-text-size-adjust: 100%;
|
|
|
|
|
-webkit-text-size-adjust: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-25 07:55:33 +02:00
|
|
|
/* These .layout tables are used to create sections within the email;
|
|
|
|
|
see for example: https://templates.mailchimp.com/development/html/
|
|
|
|
|
*/
|
|
|
|
|
table.layout {
|
2017-09-16 13:58:17 +02:00
|
|
|
border-collapse: separate;
|
2020-08-06 02:42:07 +02:00
|
|
|
mso-table-lspace: 0;
|
|
|
|
|
mso-table-rspace: 0;
|
2017-09-16 13:58:17 +02:00
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-25 07:55:33 +02:00
|
|
|
table.layout > tbody > tr > td {
|
2017-09-16 13:58:17 +02:00
|
|
|
font-family: sans-serif;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-25 07:55:33 +02:00
|
|
|
/* After email clients strip the actual <body> tag out of the email, the
|
|
|
|
|
.body element will be the equivalent of our outer element. */
|
2017-09-16 13:58:17 +02:00
|
|
|
.body {
|
|
|
|
|
width: 100%;
|
2023-04-25 07:55:33 +02:00
|
|
|
background-color: #f5f9f8;
|
2017-09-16 13:58:17 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.container {
|
|
|
|
|
display: block;
|
|
|
|
|
margin: 0 auto !important;
|
|
|
|
|
max-width: 500px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-25 07:55:33 +02:00
|
|
|
/* Our newsletters/marketing emails use a wider content width, to
|
|
|
|
|
support more complex content with text to the side of images. */
|
2021-08-02 06:11:36 +02:00
|
|
|
.container.wide-container {
|
|
|
|
|
max-width: 700px;
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-25 07:55:33 +02:00
|
|
|
/* Mystery: .container contains .content, but the max-widths for this
|
|
|
|
|
element are 80px wider than those for .container. */
|
2017-09-16 13:58:17 +02:00
|
|
|
.content {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
display: block;
|
2021-11-05 03:33:16 +01:00
|
|
|
margin: 20px auto 0;
|
2017-09-16 13:58:17 +02:00
|
|
|
max-width: 580px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
2021-08-02 06:11:36 +02:00
|
|
|
.content.wide-content {
|
|
|
|
|
max-width: 780px;
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-25 07:55:33 +02:00
|
|
|
/*
|
|
|
|
|
The main content region for the email; excludes the preheader and footer.
|
|
|
|
|
*/
|
2017-09-16 13:58:17 +02:00
|
|
|
.main {
|
2020-08-05 00:10:06 +02:00
|
|
|
background-color: #fff;
|
2017-09-16 13:58:17 +02:00
|
|
|
border-radius: 3px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-25 07:55:33 +02:00
|
|
|
/* Right/left padding to keep content away from edges of email client winder. */
|
2017-09-16 13:58:17 +02:00
|
|
|
.wrapper {
|
|
|
|
|
box-sizing: border-box;
|
2021-11-05 03:33:16 +01:00
|
|
|
padding: 0 20px 20px;
|
2017-09-16 13:58:17 +02:00
|
|
|
}
|
|
|
|
|
|
2023-04-25 07:55:33 +02:00
|
|
|
/* Footer section, containing unsubscribe links and the like. */
|
2017-09-16 13:58:17 +02:00
|
|
|
.footer {
|
|
|
|
|
clear: both;
|
|
|
|
|
padding-top: 10px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-25 07:55:33 +02:00
|
|
|
/*
|
|
|
|
|
Apple mail and other popular email clients will convert the physical
|
|
|
|
|
address into a link, so we set link color on it.
|
|
|
|
|
*/
|
|
|
|
|
.footer-content-block,
|
|
|
|
|
.physical-address {
|
2021-07-30 15:10:02 +02:00
|
|
|
color: #5f5ec7;
|
2017-09-16 13:58:17 +02:00
|
|
|
font-size: 12px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-25 07:55:33 +02:00
|
|
|
.content ul,
|
|
|
|
|
.content ol {
|
2021-08-02 16:17:31 +02:00
|
|
|
/* Override excessive indentation seen in Gmail. */
|
|
|
|
|
padding-left: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-25 07:55:33 +02:00
|
|
|
.body p,
|
|
|
|
|
p.digest_paragraph,
|
|
|
|
|
.content ul,
|
|
|
|
|
.content ol {
|
2017-09-16 13:58:17 +02:00
|
|
|
font-family: sans-serif;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: normal;
|
2020-08-06 02:42:07 +02:00
|
|
|
margin: 10px 0;
|
2017-09-16 13:58:17 +02:00
|
|
|
}
|
|
|
|
|
|
2023-04-25 07:55:33 +02:00
|
|
|
.body p li,
|
|
|
|
|
.content ul li,
|
|
|
|
|
.content ol li {
|
2021-12-14 07:43:48 +01:00
|
|
|
list-style-position: outside;
|
|
|
|
|
margin-left: 15px;
|
2017-09-16 13:58:17 +02:00
|
|
|
}
|
|
|
|
|
|
2023-04-25 07:55:33 +02:00
|
|
|
/* Link color styling carefully tuned to not apply to user content
|
|
|
|
|
inside missed-message emails. */
|
|
|
|
|
.body a,
|
|
|
|
|
.digest_paragraph a,
|
|
|
|
|
.sponsorship_request_link,
|
|
|
|
|
.support_request_link,
|
|
|
|
|
.email-preferences a,
|
|
|
|
|
.missed_message.no-content-explanation a {
|
2021-07-30 15:10:02 +02:00
|
|
|
color: #5f5ec7;
|
2017-09-16 13:58:17 +02:00
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-25 07:55:33 +02:00
|
|
|
.body a:hover,
|
|
|
|
|
.digest_paragraph a:hover,
|
|
|
|
|
.sponsorship_request_link:hover,
|
|
|
|
|
.support_request_link:hover,
|
|
|
|
|
.email-preferences a:hover,
|
2023-04-29 00:20:53 +02:00
|
|
|
.missed_message.no-content-explanation a:hover {
|
2023-04-27 11:50:02 +02:00
|
|
|
color: #434388 !important;
|
2017-09-16 13:58:17 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.important {
|
2018-12-21 16:02:36 +01:00
|
|
|
border-bottom: 3px solid #d4e3e8;
|
2017-09-16 13:58:17 +02:00
|
|
|
}
|
|
|
|
|
|
2023-04-25 07:55:33 +02:00
|
|
|
.body .button {
|
2017-09-16 13:58:17 +02:00
|
|
|
display: block;
|
2020-08-06 02:42:07 +02:00
|
|
|
padding: 10px 0;
|
2017-09-16 13:58:17 +02:00
|
|
|
margin: 20px auto;
|
|
|
|
|
width: 200px;
|
2021-07-30 15:10:02 +02:00
|
|
|
color: #5f5ec7;
|
|
|
|
|
border: 2px solid #5f5ec7;
|
|
|
|
|
background-color: #fff;
|
2017-09-16 13:58:17 +02:00
|
|
|
border-radius: 4px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
outline: none;
|
|
|
|
|
font-family: sans-serif;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
text-align: center;
|
2017-10-03 01:20:20 +02:00
|
|
|
text-shadow: none;
|
2017-09-16 13:58:17 +02:00
|
|
|
}
|
|
|
|
|
|
2023-04-25 07:55:33 +02:00
|
|
|
.body a.button:hover {
|
2021-07-30 15:10:02 +02:00
|
|
|
background-color: #5f5ec7;
|
|
|
|
|
color: #fff;
|
2017-09-16 13:58:17 +02:00
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-25 07:55:33 +02:00
|
|
|
/* The preheader is an invisible region that is used to control what
|
|
|
|
|
email clients display as the textual preview of the email's content
|
|
|
|
|
in inbox views. */
|
2017-09-16 13:58:17 +02:00
|
|
|
.preheader {
|
|
|
|
|
color: transparent;
|
|
|
|
|
display: none;
|
|
|
|
|
height: 0;
|
|
|
|
|
max-height: 0;
|
|
|
|
|
max-width: 0;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
mso-hide: all;
|
|
|
|
|
visibility: hidden;
|
|
|
|
|
width: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-25 07:55:33 +02:00
|
|
|
/* Illustrations appear over the top of the boundary between the
|
|
|
|
|
blank space at the top of the email and the content box; for
|
|
|
|
|
that reason they need a high z-index. */
|
2017-09-16 13:58:17 +02:00
|
|
|
.illustration {
|
|
|
|
|
pointer-events: none;
|
2018-07-27 00:58:50 +02:00
|
|
|
cursor: default !important;
|
2017-09-16 13:58:17 +02:00
|
|
|
z-index: 100;
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-25 07:55:33 +02:00
|
|
|
/* CSS for digest email content. */
|
2018-12-31 09:54:59 +01:00
|
|
|
.messages {
|
2016-09-14 06:54:48 +02:00
|
|
|
width: 600px;
|
|
|
|
|
font-size: 12px;
|
2020-08-04 23:58:56 +02:00
|
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
2018-12-31 09:54:59 +01:00
|
|
|
overflow-y: auto;
|
2016-09-14 06:54:48 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.hot_convo_recipient_block {
|
2020-08-05 00:10:06 +02:00
|
|
|
border: 1px solid #000;
|
2016-09-14 06:54:48 +02:00
|
|
|
margin-bottom: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.hot_convo_recipient_header {
|
2018-12-21 16:02:36 +01:00
|
|
|
background-color: #9ec9ff;
|
2020-08-05 00:10:06 +02:00
|
|
|
border-bottom: 1px solid #000;
|
2016-09-14 06:54:48 +02:00
|
|
|
font-weight: bold;
|
|
|
|
|
padding: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.hot_convo_message_content {
|
|
|
|
|
margin-left: 1px;
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.hot_convo_message_content_block {
|
|
|
|
|
padding-left: 6px;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-25 07:55:33 +02:00
|
|
|
/* Text and link colors for missed-message emails. */
|
2019-06-18 14:13:53 +02:00
|
|
|
.email-preferences {
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.email-preferences a {
|
|
|
|
|
color: #15c;
|
|
|
|
|
}
|
|
|
|
|
|
2019-06-11 12:39:42 +02:00
|
|
|
.missed_message {
|
|
|
|
|
padding-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.missed_message_sender {
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
|
2020-01-31 12:55:47 +01:00
|
|
|
.content_disabled_help_link {
|
|
|
|
|
color: #15c;
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-25 07:55:33 +02:00
|
|
|
/* Quoted block for text written by an organization administrator to
|
|
|
|
|
explain to the end user why their account got deactivated. */
|
2021-11-27 15:26:09 +01:00
|
|
|
.deactivated-user-text {
|
|
|
|
|
padding: 0 0 0 15px;
|
|
|
|
|
margin: 0 0 20px;
|
|
|
|
|
border-left: 5px solid #eee;
|
|
|
|
|
white-space: pre-line;
|
2023-04-25 07:55:33 +02:00
|
|
|
font-family: sans-serif;
|
|
|
|
|
font-size: 14px;
|
2021-11-27 15:26:09 +01:00
|
|
|
}
|
|
|
|
|
|
2017-09-16 13:58:17 +02:00
|
|
|
@media only screen and (max-width: 620px) {
|
2020-08-04 23:58:56 +02:00
|
|
|
table[class="body"] h1 {
|
2017-09-16 13:58:17 +02:00
|
|
|
font-size: 28px !important;
|
|
|
|
|
margin-bottom: 10px !important;
|
|
|
|
|
}
|
2017-11-13 17:26:11 +01:00
|
|
|
|
2020-08-04 23:58:56 +02:00
|
|
|
table[class="body"] p,
|
|
|
|
|
table[class="body"] ul,
|
|
|
|
|
table[class="body"] ol,
|
|
|
|
|
table[class="body"] td,
|
|
|
|
|
table[class="body"] span,
|
|
|
|
|
table[class="body"] a {
|
2017-09-16 13:58:17 +02:00
|
|
|
font-size: 16px !important;
|
|
|
|
|
}
|
|
|
|
|
|
2020-08-04 23:58:56 +02:00
|
|
|
table[class="body"] .wrapper {
|
2021-11-05 03:33:16 +01:00
|
|
|
padding: 0 10px 10px;
|
2017-09-16 13:58:17 +02:00
|
|
|
}
|
|
|
|
|
|
2020-08-04 23:58:56 +02:00
|
|
|
table[class="body"] .article {
|
2017-09-16 13:58:17 +02:00
|
|
|
padding: 10px !important;
|
|
|
|
|
}
|
2017-11-13 17:26:11 +01:00
|
|
|
|
2020-08-04 23:58:56 +02:00
|
|
|
table[class="body"] .content {
|
2017-09-16 13:58:17 +02:00
|
|
|
padding: 0 !important;
|
|
|
|
|
}
|
2017-11-13 17:26:11 +01:00
|
|
|
|
2020-08-04 23:58:56 +02:00
|
|
|
table[class="body"] .container {
|
2017-09-16 13:58:17 +02:00
|
|
|
padding: 0 !important;
|
|
|
|
|
width: 100% !important;
|
|
|
|
|
}
|
2017-11-13 17:26:11 +01:00
|
|
|
|
2020-08-04 23:58:56 +02:00
|
|
|
table[class="body"] .main {
|
2017-09-16 13:58:17 +02:00
|
|
|
border-left-width: 0 !important;
|
|
|
|
|
border-radius: 0 !important;
|
|
|
|
|
border-right-width: 0 !important;
|
|
|
|
|
}
|
2017-11-13 17:26:11 +01:00
|
|
|
|
2020-08-04 23:58:56 +02:00
|
|
|
table[class="body"] .btn table {
|
2017-09-16 13:58:17 +02:00
|
|
|
width: 100% !important;
|
|
|
|
|
}
|
2017-11-13 17:26:11 +01:00
|
|
|
|
2020-08-04 23:58:56 +02:00
|
|
|
table[class="body"] .btn a {
|
2017-09-16 13:58:17 +02:00
|
|
|
width: 100% !important;
|
|
|
|
|
}
|
2017-11-13 17:26:11 +01:00
|
|
|
|
2020-08-04 23:58:56 +02:00
|
|
|
table[class="body"] .img-responsive {
|
2017-09-16 13:58:17 +02:00
|
|
|
height: auto !important;
|
|
|
|
|
max-width: 100% !important;
|
|
|
|
|
width: auto !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media all {
|
2023-04-25 07:55:33 +02:00
|
|
|
/* See https://templates.mailchimp.com/development/css/client-specific-styles/;
|
|
|
|
|
ExternalClass is something Microsoft Outlook adds to emails. */
|
2017-09-16 13:58:17 +02:00
|
|
|
.ExternalClass {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
2017-11-13 17:26:11 +01:00
|
|
|
|
2017-09-16 13:58:17 +02:00
|
|
|
.ExternalClass,
|
|
|
|
|
.ExternalClass p,
|
|
|
|
|
.ExternalClass span,
|
|
|
|
|
.ExternalClass font,
|
|
|
|
|
.ExternalClass td,
|
|
|
|
|
.ExternalClass div {
|
|
|
|
|
line-height: 100%;
|
|
|
|
|
}
|
2017-11-13 17:26:11 +01:00
|
|
|
|
2023-04-25 07:55:33 +02:00
|
|
|
/* iOS converts physical addresses in emails to links automatically,
|
|
|
|
|
so this CSS has an effect on iOS even though we don't actually
|
|
|
|
|
have a link inside the .physical-address element. */
|
|
|
|
|
.physical-address a {
|
2017-09-16 13:58:17 +02:00
|
|
|
color: inherit !important;
|
|
|
|
|
font-family: inherit !important;
|
|
|
|
|
font-size: inherit !important;
|
|
|
|
|
font-weight: inherit !important;
|
|
|
|
|
line-height: inherit !important;
|
|
|
|
|
text-decoration: none !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
2021-08-03 09:05:40 +02:00
|
|
|
|
2023-04-25 07:55:33 +02:00
|
|
|
/* Mechanism for images alongside content, mainly for use in newsletters. */
|
2021-08-03 09:05:40 +02:00
|
|
|
.float-right-image {
|
|
|
|
|
float: right;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* The 450px cutoff was determined by testing in Gmail as a point
|
|
|
|
|
where an image looks good in either state. Logically it makes senes
|
|
|
|
|
since then the text still has the majority of the space in the
|
|
|
|
|
side-by-side view. */
|
|
|
|
|
@media only screen and (min-width: 450px) {
|
|
|
|
|
.float-right-image {
|
|
|
|
|
max-width: 200px;
|
|
|
|
|
}
|
|
|
|
|
}
|
