104 lines
5.9 KiB
PHP
104 lines
5.9 KiB
PHP
@props(['heading', 'preheader' => null, 'greeting' => null])
|
|
|
|
{{--
|
|
The one layout every CluPilot mail uses.
|
|
|
|
Tables and inline styles throughout, and not out of nostalgia: Outlook
|
|
renders with Word, which has no flexbox, no grid, and drops <style> blocks
|
|
in several configurations. Anything that has to survive there has to be an
|
|
attribute on the element it styles.
|
|
|
|
Colours come from resources/css/portal-tokens.css by hand, because a mail
|
|
cannot load a stylesheet. The button is --accent-active (#b8500a), never the
|
|
brand orange (#f97316): white on the brand orange is 2.9:1 and unreadable,
|
|
which is the single most common way this palette gets broken and the reason
|
|
the two tones have different names.
|
|
|
|
No image, no web font, no external asset of any kind. Half of all clients
|
|
block remote content by default, so a design that needs an image to make
|
|
sense is a design that is broken for half of its readers.
|
|
--}}
|
|
<div style="margin:0;padding:0;background-color:#f6f6f8;">
|
|
@if ($preheader)
|
|
{{-- The line shown next to the subject in the inbox list. Hidden in the body
|
|
itself, or it reads as a duplicate first sentence. --}}
|
|
<div style="display:none;font-size:1px;color:#f6f6f8;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">{{ $preheader }}</div>
|
|
@endif
|
|
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#f6f6f8;border-collapse:collapse;">
|
|
<tr><td align="center" style="padding:32px 16px;">
|
|
|
|
{{-- FLUID, with 600 as a ceiling rather than a floor. width="600" plus
|
|
width:600px forced every phone to scroll sideways to read a sentence —
|
|
reported exactly that way. A mail cannot rely on a media query (Outlook
|
|
renders with Word and drops <style> blocks, which is why this file is
|
|
inline attributes throughout), so the layout has to shrink by itself. --}}
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:600px;border-collapse:collapse;font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;">
|
|
|
|
<tr><td style="padding:0 0 20px 4px;">
|
|
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
|
|
<tr>
|
|
<td style="padding-right:10px;">
|
|
{{-- The mark, not just its orange tile. It shipped as an empty
|
|
square: the ascent inside it lives in an SVG the site loads, and
|
|
a mail cannot — Gmail strips inline SVG, Outlook renders with
|
|
Word, and this layout carries no image by design (half of all
|
|
clients block remote content).
|
|
|
|
So the shape is drawn with a character every mail font has.
|
|
▲ is the mark's own silhouette — the autopilot ascent — in white
|
|
on the accent tile, which is the whole of what a reader
|
|
recognises at 26 pixels. --}}
|
|
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
|
|
<tr><td width="26" height="26" align="center" valign="middle" style="width:26px;height:26px;background-color:#f97316;border-radius:7px;text-align:center;">
|
|
<span style="display:inline-block;font-family:Helvetica,Arial,sans-serif;font-size:13px;line-height:26px;color:#ffffff;">▲</span>
|
|
</td></tr>
|
|
</table>
|
|
</td>
|
|
<td style="font-size:17px;line-height:26px;color:#17171c;letter-spacing:-0.2px;">
|
|
{{-- The whole name, as the wordmark writes it: CluPilot in ink,
|
|
Cloud in the muted tone beside it. --}}
|
|
<span style="font-weight:700;color:#17171c;">CluPilot</span> <span style="font-weight:600;color:#6e6e7a;">Cloud</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td></tr>
|
|
|
|
<tr><td style="background-color:#ffffff;border:1px solid #e9e9ee;border-radius:12px;">
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
|
|
|
|
<tr><td style="padding:40px 24px 0 24px;">
|
|
<h1 style="margin:0 0 14px 0;font-size:25px;line-height:32px;font-weight:700;color:#17171c;letter-spacing:-0.5px;">{{ $heading }}</h1>
|
|
@if ($greeting)
|
|
<p style="margin:0 0 8px 0;font-size:15px;line-height:24px;color:#43434e;">{{ $greeting }}</p>
|
|
@endif
|
|
</td></tr>
|
|
|
|
{{ $slot }}
|
|
|
|
</table>
|
|
</td></tr>
|
|
|
|
<tr><td align="center" style="padding:22px 16px 0 16px;text-align:center;">
|
|
<p style="margin:0 0 10px 0;font-size:12px;line-height:18px;color:#6e6e7a;text-align:center;">{{ __('mail.why_you_got_this') }}</p>
|
|
<p style="margin:0 0 6px 0;font-size:12px;line-height:18px;color:#6e6e7a;text-align:center;">
|
|
<a href="{{ route('legal.impressum') }}" style="color:#6e6e7a;text-decoration:underline;">{{ __('mail.imprint') }}</a>
|
|
·
|
|
<a href="{{ route('legal.datenschutz') }}" style="color:#6e6e7a;text-decoration:underline;">{{ __('mail.privacy') }}</a>
|
|
·
|
|
<a href="{{ route('legal.agb') }}" style="color:#6e6e7a;text-decoration:underline;">{{ __('mail.terms') }}</a>
|
|
</p>
|
|
<p style="margin:0 0 6px 0;font-size:12px;line-height:18px;color:#6e6e7a;text-align:center;">
|
|
{{ __('mail.domains_note', ['domains' => implode(' · ', array_keys(App\Support\OfficialDomains::registrable()))]) }}
|
|
<a href="{{ route('security') }}" style="color:#6e6e7a;text-decoration:underline;">{{ __('mail.domains_link') }}</a>
|
|
</p>
|
|
<p style="margin:0;font-size:12px;line-height:18px;color:#b4b4be;text-align:center;">{{ __('mail.sender_line') }}</p>
|
|
<p style="margin:10px 0 0 0;font-size:12px;line-height:18px;color:#b4b4be;text-align:center;">{{ __('mail.transactional_note') }}</p>
|
|
</td></tr>
|
|
|
|
</table>
|
|
|
|
</td></tr>
|
|
</table>
|
|
</div>
|