160 lines
7.8 KiB
PHP
160 lines
7.8 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
{{-- Belt and braces with the X-Robots-Tag header: some crawlers read only one. --}}
|
|
<meta name="robots" content="noindex, nofollow, noarchive">
|
|
<title>CluPilot Cloud</title>
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
|
|
|
{{--
|
|
Self-contained on purpose: this is shown while the application is mid-deploy
|
|
or freshly installed, which is exactly when the Vite manifest may not exist.
|
|
Pulling it in through @vite would throw an exception instead of rendering
|
|
the reassurance the visitor came for. Every value below is a copy of a token
|
|
from resources/css/portal-tokens.css, which is the price of that.
|
|
|
|
The fonts are the site's own static files. If they are missing the page
|
|
degrades to a system sans and still reads correctly.
|
|
--}}
|
|
@verbatim
|
|
<style>
|
|
@font-face{font-family:"Plex Sans";src:url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
|
|
@font-face{font-family:"Plex Sans";src:url("/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
|
|
@font-face{font-family:"Plex Sans";src:url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
|
|
@font-face{font-family:"Plex Sans";src:url("/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
|
|
@font-face{font-family:"Plex Mono";src:url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
|
|
|
|
:root{
|
|
--bg:#f6f6f8; --surface:#fff; --surface-2:#fafafb;
|
|
--ink:#17171c; --body:#43434e; --muted:#6e6e7a;
|
|
--line:#e9e9ee; --line-2:#dcdce4;
|
|
--accent:#f97316; --accent-ink:#b8500a; --accent-press:#974208;
|
|
--accent-wash:#fff3e9; --accent-line:#e8cdb2;
|
|
--success:#30b15c;
|
|
}
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
html{-webkit-text-size-adjust:100%}
|
|
body{
|
|
font-family:"Plex Sans",-apple-system,BlinkMacSystemFont,sans-serif;
|
|
background:var(--bg);color:var(--body);line-height:1.55;
|
|
min-height:100dvh;display:grid;place-items:center;
|
|
padding:clamp(24px,7vw,72px) clamp(20px,6vw,48px);
|
|
-webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden;
|
|
}
|
|
|
|
/* One warm bloom behind the mark. The ground is otherwise flat, and a page
|
|
that is flat everywhere reads as unfinished rather than as restrained.
|
|
A gradient rather than a blurred circle: blur() over a solid disc banded
|
|
into visible rings on the first screen it was looked at. */
|
|
body::before{
|
|
content:"";position:fixed;inset:0;pointer-events:none;
|
|
background:radial-gradient(60% 42% at 50% 0%, rgba(249,115,22,.14), rgba(249,115,22,0) 70%);
|
|
}
|
|
|
|
main{max-width:600px;width:100%;text-align:center;position:relative}
|
|
|
|
/* ── The state, as its own object above everything ───────────────────── */
|
|
.state{
|
|
display:inline-flex;align-items:center;gap:9px;
|
|
border:1px solid var(--accent-line);background:var(--accent-wash);
|
|
border-radius:999px;padding:7px 15px;
|
|
font-family:"Plex Mono",ui-monospace,monospace;font-size:11.5px;
|
|
text-transform:uppercase;letter-spacing:.07em;color:var(--accent-ink);
|
|
}
|
|
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;
|
|
animation:pulse 2s ease-in-out infinite}
|
|
@keyframes pulse{50%{opacity:.3}}
|
|
|
|
/* ── Brand ───────────────────────────────────────────────────────────────
|
|
`gap` on a flex container applies between EVERY child, and a bare text
|
|
node is a child. Written as one inline-flex row around "Clu", <i>Pilot</i>
|
|
and " Cloud", it spaced the brand out into three separate words — which is
|
|
how the page went out reading "Clu Pilot Cloud". The wordmark is a single
|
|
element now, and the gap only ever separates it from the mark. */
|
|
.brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:34px}
|
|
.brand svg{width:36px;height:36px;flex:none}
|
|
.word{font-size:20px;font-weight:700;letter-spacing:-.025em;color:var(--ink)}
|
|
.word span{color:var(--muted);font-weight:600}
|
|
|
|
h1{margin-top:26px;font-weight:700;font-size:clamp(2rem,6vw,2.9rem);
|
|
letter-spacing:-.038em;line-height:1.06;color:var(--ink)}
|
|
.lead{margin:18px auto 0;max-width:46ch;font-size:16px;color:var(--muted)}
|
|
|
|
/* ── The three promises the paragraph already makes ──────────────────── */
|
|
.points{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:30px}
|
|
.point{
|
|
display:inline-flex;align-items:center;gap:7px;
|
|
border:1px solid var(--line);background:var(--surface);border-radius:999px;
|
|
padding:8px 15px;font-size:14px;font-weight:500;color:var(--body);
|
|
}
|
|
.point svg{width:15px;height:15px;flex:none;stroke:var(--success);stroke-width:2.6;fill:none}
|
|
|
|
/* ── Contact ─────────────────────────────────────────────────────────── */
|
|
.contact{margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}
|
|
.contact p{font-size:15px;color:var(--muted)}
|
|
.btn{
|
|
display:inline-flex;align-items:center;gap:9px;margin-top:14px;
|
|
min-height:46px;padding:0 22px;border-radius:11px;
|
|
background:var(--accent-ink);color:#fff;
|
|
font-size:15px;font-weight:600;text-decoration:none;
|
|
transition:background .18s;
|
|
}
|
|
.btn:hover{background:var(--accent-press)}
|
|
.btn svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.9;fill:none}
|
|
|
|
.foot{margin-top:34px;font-family:"Plex Mono",ui-monospace,monospace;
|
|
font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
|
|
|
|
@media (prefers-reduced-motion: reduce){.dot{animation:none}}
|
|
</style>
|
|
@endverbatim
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<span class="state"><span class="dot" aria-hidden="true"></span>{{ __('coming_soon.state') }}</span>
|
|
|
|
<div class="brand">
|
|
{{-- The real mark — cloud plus autopilot ascent — not the plain gradient
|
|
tile that stood here. A brand square with nothing in it reads as an
|
|
image that failed to load, which on a "we are still building" page is
|
|
the last impression to leave. --}}
|
|
<svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
<defs>
|
|
<linearGradient id="cs-mark" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#FB923C"/><stop offset="0.55" stop-color="#F97316"/><stop offset="1" stop-color="#C2560A"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<rect width="64" height="64" rx="15" fill="url(#cs-mark)"/>
|
|
<path d="M22 41h20a8 8 0 0 0 .7-15.97A11 11 0 0 0 21.4 27.2 8.5 8.5 0 0 0 22 44z" fill="#ffffff" fill-opacity="0.22"/>
|
|
<path d="M32 17 44 44l-12-6-12 6z" fill="#ffffff"/>
|
|
</svg>
|
|
<span class="word">CluPilot <span>Cloud</span></span>
|
|
</div>
|
|
|
|
<h1>{{ __('coming_soon.title') }}</h1>
|
|
<p class="lead">{{ __('coming_soon.body') }}</p>
|
|
|
|
<div class="points">
|
|
@foreach (['operated', 'backed_up', 'current'] as $point)
|
|
<span class="point">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>
|
|
{{ __("coming_soon.points.{$point}") }}
|
|
</span>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="contact">
|
|
<p>{{ __('coming_soon.contact') }}</p>
|
|
<a class="btn" href="mailto:office@clupilot.com">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 6L2 7"/></svg>
|
|
office@clupilot.com
|
|
</a>
|
|
</div>
|
|
|
|
<p class="foot">clupilot.com</p>
|
|
</main>
|
|
</body>
|
|
</html>
|