style(site): wider updates card, crisper copy, slimmer header, privacy off the footer

AGENTS.md

@@ -16,7 +16,7 @@ The source of the public site at `withmarfa.com`: Astro, built to static files a
 
 - `src/pages/`: one file per page. `404.astro` is what Cloudflare serves for a missing path. `sitemap.xml.ts` lists every page except those in its `UNLISTED` set.
 - `src/layouts/Base.astro`: the document head, the header, the column and the footer, used by every page.
-- `src/components/`: the header (the Marfa mark, which leads home, a GitHub icon and the Docs pill), which stays at the top as a page scrolls; the footer (About, Subscribe and Privacy); the Get Updates card with the sign-up form, opened from the footer and the home page; the Get in Touch card, opened from About; and the question that opens (one at a time within a group).
+- `src/components/`: the header (the Marfa mark, which leads home, a GitHub icon and the Docs pill), which stays at the top as a page scrolls; the footer (About and Subscribe); the privacy notice, linked from the sign-up card and About; the Get Updates card with the sign-up form, opened from the footer and the home page; the Get in Touch card, opened from About; and the question that opens (one at a time within a group).
 - `src/styles/global.css`: the color tokens, shared with the docs site's canvas and text colors, and the shared buttons and cards. Light and dark follow the system; there is no toggle.
 - `src/lib/analytics.ts`: PostHog, loaded after the page.
 - `public/`: copied as is. `_headers` sets the security headers and the Content Security Policy. `og.png` is the link preview image, rendered from `scripts/og-image.html`.

src/components/Footer.astro

@@ -10,7 +10,6 @@ const path = pagePath(Astro.url);
   <nav aria-label="Site">
     <a href="/about" aria-current={path === '/about' ? 'page' : undefined}>About</a>
     <button type="button" popovertarget="updates">Subscribe</button>
-    <a href="/privacy" aria-current={path === '/privacy' ? 'page' : undefined}>Privacy</a>
   </nav>
 </footer>
 

src/components/Subscribe.astro

@@ -29,7 +29,7 @@ const { card } = Astro.props;
   />
   <input class="trap" name="website" type="text" tabindex="-1" autocomplete="off" aria-hidden="true" />
   <p class="note" data-status role="status" aria-live="polite">
-    Occasional updates, nothing else. Unsubscribe any time. <a href="/privacy">Privacy</a>
+    Only news about Marfa. Unsubscribe any time. <a href="/privacy">Privacy</a>
   </p>
   <div class="sheet-actions">
     {

src/components/Updates.astro

@@ -1,19 +1,16 @@
 ---
-/** The Get Updates card, opened from the header and from the questions. */
+/** The Get Updates card, opened from the footer and the home page. */
 import Subscribe from './Subscribe.astro';
 ---
 
 <div id="updates" class="sheet" popover role="dialog" aria-labelledby="updates-title">
   <p id="updates-title" class="sheet-title">Get Updates</p>
-  <p>
-    Marfa is being shaped with a small group of early testers. Leave your email to hear when the apps open up and new
-    things ship.
-  </p>
+  <p>Marfa is being built with a small group of early testers. Leave your email to hear when the apps open to everyone.</p>
   <Subscribe card="updates" />
 </div>
 
 <style>
   .sheet > p:not(.sheet-title) {
-    margin-bottom: 20px;
+    margin-bottom: 18px;
   }
 </style>

src/pages/about.astro

@@ -49,7 +49,8 @@ const next = [
   </ol>
 
   <p class="contact">
-    Have a question or an idea? <button type="button" class="link" popovertarget="contact">Get in touch</button>.
+    Have a question or an idea? <button type="button" class="link" popovertarget="contact">Get in touch</button>. Read
+    the <a href="/privacy">privacy notice</a>.
   </p>
   <Contact slot="end" />
 </Base>

src/styles/global.css

@@ -28,7 +28,7 @@
   /* Lowers the page's text on tall windows without pushing it off short ones. */
   --top: clamp(36px, 8vh, 80px);
   --end: 40px;
-  --header-space: 10px;
+  --header-space: 6px;
 
   /* Lets an opening question animate to its natural height where supported. */
   interpolate-size: allow-keywords;
@@ -59,7 +59,7 @@
     --section: 24px;
     --top: clamp(20px, 4vh, 40px);
     --end: 16px;
-    --header-space: 6px;
+    --header-space: 4px;
   }
 }
 
@@ -232,7 +232,7 @@ a:hover {
 /* A card over the page, opened by a popovertarget button: the browser handles
    opening, Escape and a tap outside, with or without JavaScript. */
 .sheet {
-  width: min(420px, calc(100vw - 32px));
+  width: min(460px, calc(100vw - 32px));
   box-sizing: border-box;
   margin: auto;
   padding: 24px;