From 56a033ef9daa5f25e961b662e55d2b8984d4e7d4 Mon Sep 17 00:00:00 2001
From: Matthew Polak <me@matteopolak.com>
Date: Sat, 18 Jul 2026 12:55:37 -0700
Subject: [PATCH 1/3] Add Steam links and refine trailer hero

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Copilot-Session: 3bca27e8-1e03-415b-801a-f6bf81a6ba9e
---
 .../src/components/home/TrailerHero.test.js   | 23 ++++++
 website/src/components/home/TrailerHero.vue   | 17 ++++-
 .../src/components/layout/SiteChrome.test.js  | 44 ++++++++++++
 website/src/components/layout/SiteFooter.vue  | 15 +++-
 website/src/components/layout/SiteHeader.vue  |  8 +++
 website/src/styles/base.css                   | 70 ++++++++++++++-----
 6 files changed, 158 insertions(+), 19 deletions(-)
 create mode 100644 website/src/components/layout/SiteChrome.test.js

diff --git a/website/src/components/home/TrailerHero.test.js b/website/src/components/home/TrailerHero.test.js
index 69d89d2..cf0f9bf 100644
--- a/website/src/components/home/TrailerHero.test.js
+++ b/website/src/components/home/TrailerHero.test.js
@@ -3,6 +3,29 @@ import { describe, expect, it } from 'vitest';
 import TrailerHero from './TrailerHero.vue';
 
 describe('TrailerHero', () => {
+  it('links to Steam without the retired Watch film copy', () => {
+    const wrapper = mount(TrailerHero);
+    const steamLink = wrapper.get('a');
+
+    expect(steamLink.text()).toBe('Get Straif on Steam');
+    expect(steamLink.attributes()).toMatchObject({
+      href: 'https://store.steampowered.com/app/3850480/Straif/',
+      target: '_blank',
+      rel: 'noopener noreferrer',
+    });
+    expect(wrapper.text()).not.toMatch(/watch film/i);
+  });
+
+  it('uses an inline SVG for the play icon', () => {
+    const wrapper = mount(TrailerHero);
+    const playButton = wrapper.get(
+      'button[aria-label="Play the Straif trailer"]'
+    );
+
+    expect(playButton.get('svg').attributes('aria-hidden')).toBe('true');
+    expect(playButton.element.children).toHaveLength(1);
+  });
+
   it('loads the privacy-enhanced embed only after activation', async () => {
     const wrapper = mount(TrailerHero);
     expect(wrapper.find('iframe').exists()).toBe(false);
diff --git a/website/src/components/home/TrailerHero.vue b/website/src/components/home/TrailerHero.vue
index d7a8238..2e9313b 100644
--- a/website/src/components/home/TrailerHero.vue
+++ b/website/src/components/home/TrailerHero.vue
@@ -11,7 +11,14 @@ const trailerSrc =
     <div class="trailer-hero__copy">
       <p>Official trailer · YouTube</p>
       <h1 id="trailer-title">Straif</h1>
-      <p>Watch film</p>
+      <a
+        class="trailer-hero__steam"
+        href="https://store.steampowered.com/app/3850480/Straif/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Get Straif on Steam
+      </a>
     </div>
 
     <div class="trailer-hero__media">
@@ -44,7 +51,13 @@ const trailerSrc =
           aria-label="Play the Straif trailer"
           @click="isPlaying = true"
         >
-          Play trailer
+          <svg
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            focusable="false"
+          >
+            <path d="M8.5 5.75 19 12 8.5 18.25Z" />
+          </svg>
         </button>
       </template>
     </div>
diff --git a/website/src/components/layout/SiteChrome.test.js b/website/src/components/layout/SiteChrome.test.js
new file mode 100644
index 0000000..e8b8a65
--- /dev/null
+++ b/website/src/components/layout/SiteChrome.test.js
@@ -0,0 +1,44 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import SiteFooter from './SiteFooter.vue';
+import SiteHeader from './SiteHeader.vue';
+
+const steamUrl = 'https://store.steampowered.com/app/3850480/Straif/';
+const routerLinkStub = {
+  props: ['to'],
+  template: '<a :href="to"><slot /></a>',
+};
+
+function mountWithRouterLink(component) {
+  return mount(component, {
+    global: {
+      stubs: {
+        RouterLink: routerLinkStub,
+      },
+    },
+  });
+}
+
+describe('site Steam links', () => {
+  it('adds the approved Steam link to the header', () => {
+    const wrapper = mountWithRouterLink(SiteHeader);
+    const link = wrapper.get(`a[href="${steamUrl}"]`);
+
+    expect(link.text()).toBe('Get Straif');
+    expect(link.attributes()).toMatchObject({
+      target: '_blank',
+      rel: 'noopener noreferrer',
+    });
+  });
+
+  it('adds the approved Steam link to the footer', () => {
+    const wrapper = mountWithRouterLink(SiteFooter);
+    const link = wrapper.get(`a[href="${steamUrl}"]`);
+
+    expect(link.text()).toBe('Steam');
+    expect(link.attributes()).toMatchObject({
+      target: '_blank',
+      rel: 'noopener noreferrer',
+    });
+  });
+});
diff --git a/website/src/components/layout/SiteFooter.vue b/website/src/components/layout/SiteFooter.vue
index e7697db..b0a140d 100644
--- a/website/src/components/layout/SiteFooter.vue
+++ b/website/src/components/layout/SiteFooter.vue
@@ -4,7 +4,20 @@
     <nav aria-label="Footer navigation">
       <RouterLink to="/">Home</RouterLink>
       <RouterLink to="/leaderboard">Leaderboard</RouterLink>
-      <a href="https://straifapi.pumped.software/docs">API</a>
+      <a
+        href="https://store.steampowered.com/app/3850480/Straif/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Steam
+      </a>
+      <a
+        href="https://straifapi.pumped.software/docs"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        API
+      </a>
     </nav>
   </footer>
 </template>
diff --git a/website/src/components/layout/SiteHeader.vue b/website/src/components/layout/SiteHeader.vue
index 0541d46..bc22c0d 100644
--- a/website/src/components/layout/SiteHeader.vue
+++ b/website/src/components/layout/SiteHeader.vue
@@ -6,6 +6,14 @@
     <nav aria-label="Primary navigation">
       <RouterLink to="/">Home</RouterLink>
       <RouterLink to="/leaderboard">Leaderboard</RouterLink>
+      <a
+        class="site-header__cta"
+        href="https://store.steampowered.com/app/3850480/Straif/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Get Straif
+      </a>
     </nav>
   </header>
 </template>
diff --git a/website/src/styles/base.css b/website/src/styles/base.css
index 1410333..49581c4 100644
--- a/website/src/styles/base.css
+++ b/website/src/styles/base.css
@@ -171,6 +171,12 @@ a {
   font-weight: 500;
 }
 
+.site-header nav .site-header__cta {
+  border: 1px solid var(--color-border-strong);
+  color: var(--color-text);
+  padding: 0.45rem 0.65rem;
+}
+
 .site-header nav a.router-link-exact-active {
   color: var(--color-text);
 }
@@ -188,8 +194,12 @@ a {
 .trailer-hero {
   position: relative;
   isolation: isolate;
-  width: min(100%, 100rem, calc(177.7778vh - 7.1111rem));
-  max-height: calc(100vh - 4rem);
+  width: min(
+    calc(100% - var(--page-gutter) - var(--page-gutter)),
+    84rem,
+    calc(156.4444vh - 7.1111rem)
+  );
+  max-height: calc(88vh - 4rem);
   margin-inline: auto;
   overflow: hidden;
   aspect-ratio: 16 / 9;
@@ -239,14 +249,15 @@ a {
     transform var(--transition-fast);
 }
 
-.trailer-hero__media button::before {
-  width: 0;
-  height: 0;
-  margin-left: 0.2rem;
-  border-top: 0.45rem solid transparent;
-  border-bottom: 0.45rem solid transparent;
-  border-left: 0.72rem solid var(--color-text);
-  content: '';
+.trailer-hero__media button svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--color-text);
+  transform: translateX(0.08rem);
+}
+
+.trailer-hero__media button path {
+  fill: currentColor;
 }
 
 .trailer-hero__media button:active {
@@ -266,7 +277,8 @@ a {
   pointer-events: none;
 }
 
-.trailer-hero__copy > p {
+.trailer-hero__copy > p,
+.trailer-hero__steam {
   width: 10rem;
   color: var(--color-text);
   font-family: var(--font-data);
@@ -278,8 +290,22 @@ a {
   text-transform: uppercase;
 }
 
-.trailer-hero__copy > p:last-child {
-  text-align: right;
+.trailer-hero__steam {
+  box-sizing: border-box;
+  border: 1px solid oklch(0.96 0.007 100 / 0.72);
+  background: oklch(0.115 0 0 / 0.82);
+  padding: 0.7rem 0.8rem;
+  pointer-events: auto;
+  text-align: center;
+  text-decoration: none;
+  transition:
+    background-color var(--transition-fast),
+    border-color var(--transition-fast),
+    transform var(--transition-fast);
+}
+
+.trailer-hero__steam:active {
+  transform: scale(0.98);
 }
 
 .trailer-hero h1,
@@ -689,6 +715,11 @@ a {
     transform: translate(-50%, -50%) scale(1.04);
   }
 
+  .trailer-hero__steam:hover {
+    border-color: var(--color-text);
+    background: oklch(0.115 0 0 / 0.94);
+  }
+
   .leaderboard-tabs button:hover {
     color: var(--color-text);
   }
@@ -718,9 +749,15 @@ a {
   }
 
   .site-header {
+    gap: 1rem;
     padding-block: 1.25rem;
   }
 
+  .site-header nav {
+    justify-content: flex-end;
+    gap: 1rem;
+  }
+
   .site-footer {
     flex-direction: column;
     gap: 1rem;
@@ -737,13 +774,14 @@ a {
     gap: 1rem;
   }
 
-  .trailer-hero__copy > p {
+  .trailer-hero__copy > p,
+  .trailer-hero__steam {
     width: min(9rem, 42vw);
     font-size: 0.625rem;
   }
 
-  .trailer-hero__copy > p:last-child {
-    display: none;
+  .trailer-hero__steam {
+    display: block;
   }
 
   .game-intro {

From 4bb8a1f4e95f04f1fa20a76b0cbeb4fba49bd9a7 Mon Sep 17 00:00:00 2001
From: Matthew Polak <me@matteopolak.com>
Date: Sat, 18 Jul 2026 13:02:59 -0700
Subject: [PATCH 2/3] Refine Steam navigation and trailer spacing

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Copilot-Session: 3bca27e8-1e03-415b-801a-f6bf81a6ba9e
---
 .../src/components/home/TrailerHero.test.js   |  10 +-
 website/src/components/home/TrailerHero.vue   | 100 ++++++++----------
 .../src/components/layout/SiteChrome.test.js  |   1 +
 website/src/components/layout/SiteHeader.vue  |   5 +
 website/src/styles/base.css                   |  72 ++++++-------
 5 files changed, 88 insertions(+), 100 deletions(-)

diff --git a/website/src/components/home/TrailerHero.test.js b/website/src/components/home/TrailerHero.test.js
index cf0f9bf..3420868 100644
--- a/website/src/components/home/TrailerHero.test.js
+++ b/website/src/components/home/TrailerHero.test.js
@@ -3,16 +3,10 @@ import { describe, expect, it } from 'vitest';
 import TrailerHero from './TrailerHero.vue';
 
 describe('TrailerHero', () => {
-  it('links to Steam without the retired Watch film copy', () => {
+  it('does not render promotional copy or a Steam link over the trailer', () => {
     const wrapper = mount(TrailerHero);
-    const steamLink = wrapper.get('a');
 
-    expect(steamLink.text()).toBe('Get Straif on Steam');
-    expect(steamLink.attributes()).toMatchObject({
-      href: 'https://store.steampowered.com/app/3850480/Straif/',
-      target: '_blank',
-      rel: 'noopener noreferrer',
-    });
+    expect(wrapper.find('a').exists()).toBe(false);
     expect(wrapper.text()).not.toMatch(/watch film/i);
   });
 
diff --git a/website/src/components/home/TrailerHero.vue b/website/src/components/home/TrailerHero.vue
index 2e9313b..507691b 100644
--- a/website/src/components/home/TrailerHero.vue
+++ b/website/src/components/home/TrailerHero.vue
@@ -7,59 +7,53 @@ const trailerSrc =
 </script>
 
 <template>
-  <section class="trailer-hero" aria-labelledby="trailer-title">
-    <div class="trailer-hero__copy">
-      <p>Official trailer · YouTube</p>
-      <h1 id="trailer-title">Straif</h1>
-      <a
-        class="trailer-hero__steam"
-        href="https://store.steampowered.com/app/3850480/Straif/"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        Get Straif on Steam
-      </a>
-    </div>
+  <div class="trailer-hero-shell">
+    <section class="trailer-hero" aria-labelledby="trailer-title">
+      <div class="trailer-hero__copy">
+        <p>Official trailer · YouTube</p>
+        <h1 id="trailer-title">Straif</h1>
+      </div>
 
-    <div class="trailer-hero__media">
-      <template v-if="isPlaying">
-        <iframe
-          :src="trailerSrc"
-          title="Straif official trailer"
-          allow="
-            accelerometer;
-            autoplay;
-            clipboard-write;
-            encrypted-media;
-            gyroscope;
-            picture-in-picture;
-            web-share;
-          "
-          allowfullscreen
-        />
-      </template>
-      <template v-else>
-        <img
-          src="https://i.ytimg.com/vi/CfzotZZ3Sd0/maxresdefault.jpg"
-          alt=""
-          width="1280"
-          height="720"
-          fetchpriority="high"
-        />
-        <button
-          type="button"
-          aria-label="Play the Straif trailer"
-          @click="isPlaying = true"
-        >
-          <svg
-            aria-hidden="true"
-            viewBox="0 0 24 24"
-            focusable="false"
+      <div class="trailer-hero__media">
+        <template v-if="isPlaying">
+          <iframe
+            :src="trailerSrc"
+            title="Straif official trailer"
+            allow="
+              accelerometer;
+              autoplay;
+              clipboard-write;
+              encrypted-media;
+              gyroscope;
+              picture-in-picture;
+              web-share;
+            "
+            allowfullscreen
+          />
+        </template>
+        <template v-else>
+          <img
+            src="https://i.ytimg.com/vi/CfzotZZ3Sd0/maxresdefault.jpg"
+            alt=""
+            width="1280"
+            height="720"
+            fetchpriority="high"
+          />
+          <button
+            type="button"
+            aria-label="Play the Straif trailer"
+            @click="isPlaying = true"
           >
-            <path d="M8.5 5.75 19 12 8.5 18.25Z" />
-          </svg>
-        </button>
-      </template>
-    </div>
-  </section>
+            <svg
+              aria-hidden="true"
+              viewBox="0 0 24 24"
+              focusable="false"
+            >
+              <path d="M8.5 5.75 19 12 8.5 18.25Z" />
+            </svg>
+          </button>
+        </template>
+      </div>
+    </section>
+  </div>
 </template>
diff --git a/website/src/components/layout/SiteChrome.test.js b/website/src/components/layout/SiteChrome.test.js
index e8b8a65..6a700d2 100644
--- a/website/src/components/layout/SiteChrome.test.js
+++ b/website/src/components/layout/SiteChrome.test.js
@@ -29,6 +29,7 @@ describe('site Steam links', () => {
       target: '_blank',
       rel: 'noopener noreferrer',
     });
+    expect(link.get('svg').attributes('aria-hidden')).toBe('true');
   });
 
   it('adds the approved Steam link to the footer', () => {
diff --git a/website/src/components/layout/SiteHeader.vue b/website/src/components/layout/SiteHeader.vue
index bc22c0d..1615336 100644
--- a/website/src/components/layout/SiteHeader.vue
+++ b/website/src/components/layout/SiteHeader.vue
@@ -12,6 +12,11 @@
         target="_blank"
         rel="noopener noreferrer"
       >
+        <svg aria-hidden="true" viewBox="0 0 24 24" focusable="false">
+          <circle cx="15.5" cy="8.5" r="4.25" />
+          <circle cx="5.75" cy="17.25" r="2.75" />
+          <path d="m8.1 15.8 4.4-4.4" />
+        </svg>
         Get Straif
       </a>
     </nav>
diff --git a/website/src/styles/base.css b/website/src/styles/base.css
index 49581c4..d493273 100644
--- a/website/src/styles/base.css
+++ b/website/src/styles/base.css
@@ -172,9 +172,23 @@ a {
 }
 
 .site-header nav .site-header__cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
   border: 1px solid var(--color-border-strong);
   color: var(--color-text);
   padding: 0.45rem 0.65rem;
+  white-space: nowrap;
+}
+
+.site-header__cta svg {
+  width: 1rem;
+  height: 1rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.75;
 }
 
 .site-header nav a.router-link-exact-active {
@@ -191,16 +205,21 @@ a {
   text-transform: uppercase;
 }
 
-.trailer-hero {
-  position: relative;
-  isolation: isolate;
+.trailer-hero-shell {
   width: min(
     calc(100% - var(--page-gutter) - var(--page-gutter)),
     84rem,
     calc(156.4444vh - 7.1111rem)
   );
-  max-height: calc(88vh - 4rem);
+  margin-top: clamp(0.75rem, 2vw, 1.5rem);
   margin-inline: auto;
+}
+
+.trailer-hero {
+  position: relative;
+  isolation: isolate;
+  width: 100%;
+  max-height: calc(88vh - 4rem);
   overflow: hidden;
   aspect-ratio: 16 / 9;
   background: var(--color-surface);
@@ -270,15 +289,14 @@ a {
   right: var(--page-gutter);
   bottom: var(--page-gutter);
   left: var(--page-gutter);
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
   align-items: flex-end;
-  justify-content: space-between;
   gap: 1.5rem;
   pointer-events: none;
 }
 
-.trailer-hero__copy > p,
-.trailer-hero__steam {
+.trailer-hero__copy > p {
   width: 10rem;
   color: var(--color-text);
   font-family: var(--font-data);
@@ -290,24 +308,6 @@ a {
   text-transform: uppercase;
 }
 
-.trailer-hero__steam {
-  box-sizing: border-box;
-  border: 1px solid oklch(0.96 0.007 100 / 0.72);
-  background: oklch(0.115 0 0 / 0.82);
-  padding: 0.7rem 0.8rem;
-  pointer-events: auto;
-  text-align: center;
-  text-decoration: none;
-  transition:
-    background-color var(--transition-fast),
-    border-color var(--transition-fast),
-    transform var(--transition-fast);
-}
-
-.trailer-hero__steam:active {
-  transform: scale(0.98);
-}
-
 .trailer-hero h1,
 .page-heading h1 {
   font-size: clamp(3rem, 8vw, 7.5rem);
@@ -715,11 +715,6 @@ a {
     transform: translate(-50%, -50%) scale(1.04);
   }
 
-  .trailer-hero__steam:hover {
-    border-color: var(--color-text);
-    background: oklch(0.115 0 0 / 0.94);
-  }
-
   .leaderboard-tabs button:hover {
     color: var(--color-text);
   }
@@ -749,13 +744,17 @@ a {
   }
 
   .site-header {
-    gap: 1rem;
+    gap: 0.75rem;
     padding-block: 1.25rem;
   }
 
   .site-header nav {
     justify-content: flex-end;
-    gap: 1rem;
+    gap: 0.625rem;
+  }
+
+  .site-header nav .site-header__cta {
+    padding-inline: 0.45rem;
   }
 
   .site-footer {
@@ -774,16 +773,11 @@ a {
     gap: 1rem;
   }
 
-  .trailer-hero__copy > p,
-  .trailer-hero__steam {
+  .trailer-hero__copy > p {
     width: min(9rem, 42vw);
     font-size: 0.625rem;
   }
 
-  .trailer-hero__steam {
-    display: block;
-  }
-
   .game-intro {
     grid-template-columns: minmax(0, 1fr);
     gap: 2rem;

From ba5272817da78e0e0ad077fcc2de34c8629f835f Mon Sep 17 00:00:00 2001
From: Matthew Polak <me@matteopolak.com>
Date: Sat, 18 Jul 2026 13:12:08 -0700
Subject: [PATCH 3/3] Fix website formatting check

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Copilot-Session: 3bca27e8-1e03-415b-801a-f6bf81a6ba9e
---
 website/src/components/home/TrailerHero.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/website/src/components/home/TrailerHero.vue b/website/src/components/home/TrailerHero.vue
index 507691b..cb5e4f3 100644
--- a/website/src/components/home/TrailerHero.vue
+++ b/website/src/components/home/TrailerHero.vue
@@ -44,11 +44,7 @@ const trailerSrc =
             aria-label="Play the Straif trailer"
             @click="isPlaying = true"
           >
-            <svg
-              aria-hidden="true"
-              viewBox="0 0 24 24"
-              focusable="false"
-            >
+            <svg aria-hidden="true" viewBox="0 0 24 24" focusable="false">
               <path d="M8.5 5.75 19 12 8.5 18.25Z" />
             </svg>
           </button>