122 lines
5.7 KiB
Cheetah
122 lines
5.7 KiB
Cheetah
{{- /*
|
|
The Vantage email shell.
|
|
|
|
Every colour in the email system lives in this file and nowhere else, in the
|
|
same way no component in web/, site/ or adminsite/ carries a hex. The values
|
|
are web/app/globals.css's tokens — an email is read before the recipient
|
|
clicks through to the control plane, so the two should not look like
|
|
different products. They are written as literal hex here because email
|
|
clients support neither var() nor a reliable prefers-color-scheme, so the
|
|
usual token indirection is not available: when you change a token in the
|
|
three globals.css files, change it here too.
|
|
|
|
--ground #071628 --rule #1e3855
|
|
--panel #0d2138 --accent #5b9be8
|
|
--panel-2 #102842 --up #4fb484
|
|
--ink #e4ecf6 --down #e2705a
|
|
--ink-2 #9fb3ca --pend #d6a63f
|
|
--ink-3 #71879f --well #04101f
|
|
|
|
Layout is tables and inline styles throughout, which is not a stylistic
|
|
choice — it is the only thing Outlook renders predictably.
|
|
|
|
A message file overrides "title", "pill" and "body"; the empty defaults below
|
|
exist so that a message needing no pill does not have to define one.
|
|
*/ -}}
|
|
{{- define "title"}}{{end -}}
|
|
{{- define "pill"}}{{end -}}
|
|
{{- define "body"}}{{end -}}
|
|
|
|
{{- /* p renders one paragraph of body copy. */ -}}
|
|
{{- define "p" -}}
|
|
<p style="margin:0 0 16px;color:#9fb3ca;font-size:14px;line-height:1.6;">{{.}}</p>
|
|
{{- end -}}
|
|
|
|
{{- /* lead is the first paragraph: same size, brighter, sets the subject. */ -}}
|
|
{{- define "lead" -}}
|
|
<p style="margin:0 0 16px;color:#e4ecf6;font-size:15px;line-height:1.6;">{{.}}</p>
|
|
{{- end -}}
|
|
|
|
{{- /* button takes dict "label" "…" "url" "…".
|
|
|
|
The bare URL is printed underneath on purpose: a plain-text-preferring
|
|
client, a stripped-styles inbox and a forwarded message all lose the
|
|
anchor, and a verification email whose link cannot be reached is a
|
|
support ticket. */ -}}
|
|
{{- define "button" -}}
|
|
<table role="presentation" cellpadding="0" cellspacing="0" style="margin:4px 0 16px;">
|
|
<tr>
|
|
<td style="border-radius:4px;background:#5b9be8;">
|
|
<a href="{{.url}}" style="display:inline-block;padding:10px 20px;color:#04101f;font-size:14px;font-weight:600;text-decoration:none;">{{.label}}</a>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<p style="margin:0 0 20px;color:#71879f;font-size:12px;line-height:1.5;word-break:break-all;">
|
|
Or paste this into your browser:<br>
|
|
<a href="{{.url}}" style="color:#5b9be8;text-decoration:none;">{{.url}}</a>
|
|
</p>
|
|
{{- end -}}
|
|
|
|
{{- /* well shows machine output — a licence blob, an install ID. Mirrors
|
|
web/'s --well surface, the floor beneath the ground. */ -}}
|
|
{{- define "well" -}}
|
|
<pre style="margin:0 0 20px;padding:14px;background:#04101f;border:1px solid #1e3855;border-radius:4px;color:#9fb3ca;font-family:ui-monospace,'Cascadia Mono','SF Mono',Menlo,Consolas,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-all;">{{.}}</pre>
|
|
{{- end -}}
|
|
|
|
{{- /* note is a quoted callout, used for a free-text message we did not
|
|
write ourselves. */ -}}
|
|
{{- define "note" -}}
|
|
<p style="margin:0 0 20px;padding:12px 14px;background:#102842;border:1px solid #1e3855;border-radius:4px;color:#e4ecf6;font-size:13px;line-height:1.6;">{{.}}</p>
|
|
{{- end -}}
|
|
|
|
{{- /* rows takes a list of dict "k" "…" "v" "…". */ -}}
|
|
{{- define "rows" -}}
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin:4px 0 8px;border-top:1px solid #1e3855;">
|
|
{{- range .}}
|
|
<tr>
|
|
<td style="padding:9px 0;border-bottom:1px solid #172c44;color:#71879f;font-size:13px;width:130px;vertical-align:top;">{{.k}}</td>
|
|
<td style="padding:9px 0;border-bottom:1px solid #172c44;color:#e4ecf6;font-size:13px;font-weight:500;">{{.v}}</td>
|
|
</tr>
|
|
{{- end}}
|
|
</table>
|
|
{{- end -}}
|
|
|
|
{{- /* chip takes dict "label" "…" "tone" "up|down|pend|accent". Tone is
|
|
never the only signal: the label spells the state out. */ -}}
|
|
{{- define "chip" -}}
|
|
{{- $fg := "#5b9be8"}}{{if eq .tone "up"}}{{$fg = "#4fb484"}}{{else if eq .tone "down"}}{{$fg = "#e2705a"}}{{else if eq .tone "pend"}}{{$fg = "#d6a63f"}}{{end -}}
|
|
<span style="display:inline-block;margin:0 0 12px;padding:4px 11px;border:1px solid {{$fg}};border-radius:9999px;color:{{$fg}};font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;">{{.label}}</span>
|
|
{{- end -}}
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<body style="margin:0;padding:0;background:#071628;">
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:#071628;padding:32px 12px;">
|
|
<tr>
|
|
<td align="center">
|
|
<table role="presentation" width="520" cellpadding="0" cellspacing="0" style="max-width:520px;width:100%;background:#0d2138;border:1px solid #1e3855;border-radius:4px;overflow:hidden;font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;">
|
|
<tr><td style="height:3px;background:#5b9be8;"></td></tr>
|
|
<tr>
|
|
<td style="padding:26px 28px 8px;">
|
|
<span style="font-size:16px;font-weight:700;letter-spacing:-.01em;color:#7fb2f0;">Vantage</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:10px 28px 26px;">
|
|
{{template "pill" .}}
|
|
<h1 style="margin:2px 0 14px;font-size:20px;font-weight:700;line-height:1.3;color:#e4ecf6;">{{template "title" .}}</h1>
|
|
{{template "body" .}}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:14px 28px;border-top:1px solid #1e3855;background:#04101f;">
|
|
<p style="margin:0;color:#71879f;font-size:12px;line-height:1.5;">Sent by Vantage · infrastructure control plane</p>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</body>
|
|
</html>
|