Volta

/* ============================================================
VOLTA — Buttondown email CSS
Paste into: Settings → Email design → Custom CSS
Template: "Modern"

Palette — two-tone, matching voltavoltavolta.com
Black #000000 background
Bone #F0ECE0 headlines, lede, links, button fill
Body #CFC9BB paragraph text (bone stepped back)
Muted #8A857A datelines, footer
Hairline #2A2823 rules

No accent color. The identity is two-tone; a third hue would
be the one thing on the page that isn't from the site.

Type sizes assume no hero photo — the type carries the top of
the email, so the headline runs larger than it otherwise would.
============================================================ */

/* ---- 1. Stop clients from inverting a dark design ---- */

:root {
color-scheme: dark;
supported-color-schemes: dark;
}

/* ---- 2. Gaya webfont ----
Loads in Apple Mail, iOS Mail, Outlook for Mac.
Gmail and Outlook for Windows ignore it and fall back to
Palatino, which is the closest face shipping on both Mac and
Windows. Upload the .woff2 and correct the path if it differs. */

@font-face {
font-family: 'Gaya';
src: url('https://voltavoltavolta.com/fonts/Gaya-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}

/* ---- 3. Black ground ---- */

body,
.email-body,
table,
td {
background-color: #000000 !important;
}

/* ---- 4. Type ----
Line-height runs looser than a light design would use.
Bone on black needs the extra air or it vibrates. */

body,
p,
li,
td {
font-family: 'Franklin Gothic Book', 'Franklin Gothic Medium',
'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-size: 17px !important;
line-height: 1.70 !important;
color: #CFC9BB !important;
text-align: center !important;
}

h1, h2, h3 {
font-family: Gaya, Palatino, 'Palatino Linotype', 'Book Antiqua',
Georgia, serif !important;
font-weight: 400 !important;
color: #F0ECE0 !important;
letter-spacing: -0.01em;
text-align: center !important;
}

h1 { font-size: 44px !important; line-height: 1.06 !important; margin: 0 0 24px !important; }
h2 { font-size: 29px !important; line-height: 1.20 !important; margin: 36px 0 8px !important; }
h3 { font-size: 21px !important; line-height: 1.30 !important; margin: 28px 0 6px !important; }

/* ---- 5. Links ----
Full bone, underlined. There's no accent hue to lean on. */

a {
color: #F0ECE0 !important;
text-decoration: underline !important;
}

/* ---- 6. Hide the Modern template's stock masthead ----
The header snippet supplies the wordmark instead. */

.newsletter-icon,
.newsletter-masthead,
.email-preamble {
display: none !important;
}

/* ---- 7. Images ---- */

img {
max-width: 100% !important;
height: auto !important;
display: block !important;
margin: 0 auto !important;
border: 0 !important;
}

/* ---- 8. Lede ----
The opening paragraph, set in caps at full bone.
Add class="volta-lede" to the first <p> of each issue.
Two or three sentences. Caps on black tire the eye fast. */

.volta-lede {
font-size: 15px !important;
line-height: 1.78 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
color: #F0ECE0 !important;
margin: 0 0 26px !important;
}

/* ---- 9. Button ----
Inverted: bone fill, black text. */

.volta-btn {
display: inline-block;
background: #F0ECE0;
color: #000000 !important;
font-family: 'Franklin Gothic Book', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-size: 13px !important;
letter-spacing: 1.8px;
padding: 15px 32px;
text-decoration: none !important;
margin: 8px auto 30px;
text-align: center !important;
}

/* ---- 10. Dateline / caption ---- */

.volta-meta {
font-size: 14px !important;
line-height: 1.5 !important;
letter-spacing: 0.6px !important;
color: #8A857A !important;
margin: 0 0 14px !important;
}

/* ---- 11. Pull quote ----
Rules above and below, not a left border. A left border on
centered text points at nothing. */

blockquote {
border: 0;
border-top: 1px solid #2A2823;
border-bottom: 1px solid #2A2823;
margin: 32px 0;
padding: 20px 12px;
font-family: Gaya, Palatino, 'Palatino Linotype', Georgia, serif !important;
font-size: 22px !important;
line-height: 1.4 !important;
color: #F0ECE0 !important;
text-align: center !important;
}

/* ---- 12. Rules ---- */

hr {
border: 0;
border-top: 1px solid #2A2823;
margin: 38px 0;
}

/* ---- 13. Type-only masthead ----
Only needed if you go with preview B (zero images) and set the
wordmark as live type rather than the PNG. Wrap it:
<div class="volta-wordmark">Volta</div>
Delete this block if you're using the wordmark image. */

.volta-wordmark {
font-family: Gaya, Palatino, 'Palatino Linotype', 'Book Antiqua',
Georgia, serif !important;
font-size: 62px !important;
line-height: 1 !important;
color: #F0ECE0 !important;
text-align: center !important;
padding: 12px 0 4px;
}