Fix mobile preview navigation and add app visual

README.md

@@ -23,6 +23,8 @@ This is a current release-scope and supply-chain qualification decision. It is n
 5. Upload the exact archive only to the manifest-pinned public prerelease.
 6. Verify the portal, download, checksum, extraction, and first-launch guide from an independent browser session.
 7. Keep Developer ID signing, notarization, Homebrew, trusted CI, and public product launch outside this preview lane.
+8. Use only privacy-safe product imagery with synthetic content. Public screenshots must never show a real recording, transcript, summary, prompt, model output, filename, path, category, tag, or other user data.
+9. Version static CSS and image URLs when their bytes change so cached preview pages cannot combine new markup with stale presentation rules.
 
 Tester instructions are in [INSTALL.md](INSTALL.md) and [TESTING.md](TESTING.md). The distribution boundary is in [PRIVATE_PREVIEW_NOTICE.md](PRIVATE_PREVIEW_NOTICE.md).
 

site/downloads.html

@@ -7,7 +7,7 @@
     <meta name="color-scheme" content="light">
     <title>RecordCove preview downloads</title>
     <link rel="icon" href="/assets/recordcove-mark.svg?v=1" type="image/svg+xml">
-    <link rel="stylesheet" href="/styles.css">
+    <link rel="stylesheet" href="/styles.css?v=3">
   </head>
   <body>
     <main>

site/index.html

@@ -7,7 +7,7 @@
     <meta name="color-scheme" content="light">
     <title>RecordCove preview</title>
     <link rel="icon" href="/assets/recordcove-mark.svg?v=1" type="image/svg+xml">
-    <link rel="stylesheet" href="/styles.css">
+    <link rel="stylesheet" href="/styles.css?v=3">
   </head>
   <body>
     <main>
@@ -25,6 +25,17 @@ <h1 id="preview-title">Your voice, kept.</h1>
         <a class="button" href="/downloads.html">Choose a RecordCove preview</a>
         <p class="facts">Version 0.1.0 · Apple silicon · macOS 14 or later · Pre-release</p>
       </section>
+      <section class="app-preview" aria-labelledby="app-preview-title">
+        <div class="app-preview-copy">
+          <p class="eyebrow compact">Inside the app</p>
+          <h2 id="app-preview-title">A calm workspace for local recordings</h2>
+          <p>Browse recordings, organize notes, and choose local transcription and Understanding models in one native macOS workspace.</p>
+        </div>
+        <figure class="product-shot">
+          <img src="/assets/recordcove-app-preview.svg?v=1" width="1440" height="900" loading="lazy" decoding="async" alt="RecordCove on macOS showing an All Recordings library with sample recordings and local-model controls.">
+          <figcaption>Privacy-safe product preview using sample content. No real recording, transcript, filename, or path is shown.</figcaption>
+        </figure>
+      </section>
       <section class="panel" aria-labelledby="before-title">
         <h2 id="before-title">Read this before you open it</h2>
         <p>This is an early public preview for testing. It is ad-hoc signed and is not yet Apple-notarized. macOS will warn you that Apple cannot verify the developer.</p>

site/install.html

@@ -1,3 +1,3 @@
 <!doctype html>
-<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Install the RecordCove macOS preview."><title>Install RecordCove preview</title><link rel="icon" href="/assets/recordcove-mark.svg?v=1" type="image/svg+xml"><link rel="stylesheet" href="/styles.css"></head>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Install the RecordCove macOS preview."><title>Install RecordCove preview</title><link rel="icon" href="/assets/recordcove-mark.svg?v=1" type="image/svg+xml"><link rel="stylesheet" href="/styles.css?v=3"></head>
 <body><main><nav class="site-nav" aria-label="Preview pages"><a href="/">Overview</a><a href="/downloads.html">Downloads</a><a aria-current="page" href="/install.html">Install</a><a href="/testing.html">Testing</a></nav><section class="panel guide"><h1>Install RecordCove</h1><p>These steps are written for someone who does not normally install preview software.</p><h2>Before you start</h2><p>You need an Apple silicon Mac, macOS 14 or later, about 1 GB of free disk space, and an internet connection.</p><p class="warning">This early preview is ad-hoc signed and is not Apple-notarized. Install it only if you trust Preston Core Systems Limited, downloaded it from preview.recordcove.com, and the filename and checksum match the page.</p><h2>Download and unzip</h2><ol><li>Open the <a href="/downloads.html">Preview downloads</a> page and choose a version.</li><li>Wait for the download to finish.</li><li>Open Finder and select <strong>Downloads</strong> in the left sidebar.</li><li>Double-click the downloaded RecordCove ZIP. Your Mac creates a folder containing <strong>RecordCove</strong>.</li><li>Drag <strong>RecordCove</strong> into the <strong>Applications</strong> folder in Finder.</li></ol><h2>First launch</h2><ol><li>Open <strong>Applications</strong> in Finder.</li><li>Hold the Control key while clicking <strong>RecordCove</strong>, then select <strong>Open</strong>.</li><li>macOS explains that Apple cannot verify the developer. Select <strong>Open</strong> only if the file and checksum match the Downloads page.</li><li>RecordCove should open. If macOS says the app is damaged, stop and tell the maintainer.</li></ol><p class="warning">Do not disable Gatekeeper and do not run a Terminal command to remove quarantine.</p><h2>Microphone permission</h2><p>RecordCove asks for microphone permission only when it needs to record. Select <strong>Allow</strong> if you intend to record.</p><h2>Updating later</h2><p>Finish any active recording, quit RecordCove, open Preview downloads, choose the newer preview, and replace the app in Applications. Your local recording library is stored separately.</p></section></main><footer>Copyright <span id="year"></span> Preston Core Systems Limited.</footer><script>document.getElementById("year").textContent = new Date().getFullYear();</script></body></html>

site/styles.css

@@ -2,10 +2,11 @@
 * { box-sizing: border-box; }
 body { margin: 0; }
 main { width: min(760px, calc(100% - 32px)); margin: 0 auto; padding: 72px 0 40px; }
-.site-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 24px; }
-.site-nav a { border: 1px solid transparent; border-radius: 999px; color: #5b5d59; padding: 9px 14px; font-size: 14px; font-weight: 750; text-decoration: none; }
-.site-nav a:hover { border-color: #c9c6c0; color: #20211f; }
-.site-nav a[aria-current="page"] { border-color: #bd3455; background: #fcecf0; color: #a92d4b; }
+.site-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; width: min(100%, 520px); margin: 0 auto 24px; border: 1px solid #dedbd5; border-radius: 14px; background: rgb(255 255 255 / 82%); padding: 4px; box-shadow: 0 8px 24px rgb(32 33 31 / 4%); }
+.site-nav a { min-width: 0; border: 1px solid transparent; border-radius: 10px; color: #5b5d59; padding: 9px 8px; font-size: 14px; font-weight: 750; text-align: center; text-decoration: none; white-space: nowrap; }
+.site-nav a:hover { border-color: #c9c6c0; background: #f8f6f2; color: #20211f; }
+.site-nav a:focus-visible { outline: 3px solid #20211f; outline-offset: 2px; }
+.site-nav a[aria-current="page"] { border-color: #bd3455; background: #bd3455; color: white; }
 .hero { text-align: center; padding: 48px 28px; }
 .mark { width: 72px; height: 72px; }
 .eyebrow { color: #b62f50; font-size: 13px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
@@ -18,6 +19,13 @@ h1 { margin: 12px 0; font-family: Georgia, serif; font-size: clamp(42px, 8vw, 68
 .button-disabled:hover { background: #777a75; }
 .button:focus-visible, .links a:focus-visible { outline: 3px solid #20211f; outline-offset: 4px; }
 .facts { margin-top: 18px; color: #777a75; font-size: 14px; }
+.app-preview { margin: 6px 0 30px; }
+.app-preview-copy { max-width: 620px; margin: 0 auto 18px; text-align: center; }
+.app-preview-copy h2 { margin-bottom: 8px; }
+.app-preview-copy p:last-child { margin: 0; color: #5b5d59; }
+.product-shot { margin: 0; }
+.product-shot img { display: block; width: 100%; height: auto; border: 1px solid #c9c6c0; border-radius: 16px; background: #f0f2f5; box-shadow: 0 18px 50px rgb(32 33 31 / 13%); }
+.product-shot figcaption { margin: 11px 8px 0; color: #777a75; font-size: 12px; line-height: 1.5; text-align: center; }
 .panel { margin-top: 22px; border: 1px solid #dedbd5; border-radius: 16px; background: white; padding: 28px; box-shadow: 0 10px 30px rgb(32 33 31 / 5%); }
 h2 { margin-top: 0; font-family: Georgia, serif; font-size: 27px; }
 p, li { line-height: 1.6; }
@@ -55,4 +63,16 @@ footer { padding: 28px 16px 42px; color: #777a75; text-align: center; font-size:
 .release-checksum summary { cursor: pointer; font-weight: 700; }
 .release-checksum code { display: block; margin-top: 8px; overflow-wrap: anywhere; }
 .release-empty { color: #777a75; font-style: italic; }
-@media (max-width: 520px) { main { padding-top: 30px; } .hero { padding: 34px 8px; } .panel { padding: 22px; } .button { width: 100%; } }
+@media (max-width: 520px) {
+  main { width: min(100% - 24px, 760px); padding-top: 18px; }
+  .site-nav { position: sticky; z-index: 10; top: 8px; margin-bottom: 14px; border-radius: 12px; background: rgb(255 255 255 / 96%); box-shadow: 0 8px 24px rgb(32 33 31 / 10%); }
+  .site-nav a { padding: 9px 3px; font-size: clamp(11px, 3.2vw, 13px); }
+  .hero { padding: 30px 8px 36px; }
+  .mark { width: 64px; height: 64px; }
+  .lede { font-size: 17px; }
+  .app-preview { margin-bottom: 24px; }
+  .app-preview-copy { padding: 0 8px; }
+  .product-shot img { border-radius: 12px; }
+  .panel { padding: 22px; }
+  .button { width: 100%; }
+}