thanks.astro
1---
2// Landing point after joining the waitlist: sovrnd redirects here from the
3// Atmosphere-account sign-in (adding ?email=0 when the user withheld their
4// email) and from the no-JavaScript email form.
5import Layout from '../../layouts/Layout.astro';
6import Masthead from '../../components/Masthead.astro';
7import Footer from '../../components/Footer.astro';
8---
9
10<Layout title="You’re on the list — sovrn" description="Thanks for joining the sovrn waitlist." noindex>
11 <div class="page">
12 <Masthead compact />
13
14 <main id="main" class="thanks">
15 <section class="thanks-field" aria-labelledby="thanks-title">
16 <h1 id="thanks-title" class="thanks-title">You’re on the list.</h1>
17 <p class="thanks-sub">
18 Thanks for joining the sovrn waitlist. We’ll be in touch when we open to beta testers.
19 </p>
20 <p class="thanks-note" data-no-email hidden>
21 You didn’t share an email address, so we saved only your Atmosphere handle.
22 </p>
23 <p class="thanks-back"><a href="/">Back to the homepage</a></p>
24 </section>
25 <div class="thanks-column on-dark" aria-hidden="true">
26 <img class="thanks-mark" src="/plates/speedmark.png" alt="" width="1032" height="528" />
27 </div>
28 </main>
29
30 <Footer compact />
31 </div>
32</Layout>
33
34<script>
35 if (new URLSearchParams(location.search).get('email') === '0') {
36 document.querySelector<HTMLElement>('[data-no-email]')?.removeAttribute('hidden');
37 }
38</script>
39
40<style>
41 /* Short pages: the footer sits on the bottom of the viewport and the
42 gold field grows to meet it. */
43 .page {
44 display: flex;
45 flex-direction: column;
46 min-height: 100svh;
47 }
48
49 .thanks {
50 flex: 1 0 auto;
51 display: grid;
52 grid-template-columns: 1fr 24.6%;
53 min-height: clamp(28rem, 60svh, 44rem);
54 }
55
56 .thanks-field {
57 display: grid;
58 align-content: center;
59 gap: 1.75rem;
60 padding: clamp(3.5rem, 8vw, 7rem) var(--gutter);
61 background: var(--gold);
62 color: var(--ptt);
63 }
64
65 .thanks-title {
66 font-size: clamp(2.75rem, 7.5vw, 7.25rem);
67 font-weight: 850;
68 line-height: 0.93;
69 letter-spacing: -0.04em;
70 }
71
72 .thanks-sub {
73 max-width: 32ch;
74 font-size: clamp(1.25rem, 2.2vw, 2rem);
75 font-weight: 700;
76 line-height: 1.15;
77 letter-spacing: -0.03em;
78 }
79
80 .thanks-note {
81 max-width: 44ch;
82 color: var(--ptt);
83 font-size: 1.0625rem;
84 font-weight: 600;
85 }
86
87 .thanks-back a {
88 color: var(--ptt);
89 font-weight: 750;
90 text-decoration-thickness: 2px;
91 }
92
93 .thanks-column {
94 position: relative;
95 background: var(--ptt);
96 }
97
98 .thanks-mark {
99 position: absolute;
100 left: 3.7%;
101 top: 40%;
102 width: 91%;
103 height: auto;
104 mix-blend-mode: lighten;
105 }
106
107 @media (max-width: 1100px) {
108 .thanks {
109 grid-template-columns: 1fr;
110 }
111 .thanks-column {
112 display: none;
113 }
114 }
115</style>
