Refine Steam navigation and trailer spacing

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

Copilot-Session: 3bca27e8-1e03-415b-801a-f6bf81a6ba9e

Author: matteopolak

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);
   });
 

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>

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', () => {

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>

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;