feat: add Stand Out to the shared header (#171)

Author: ctwhome

ctw.studio/design-system/components.css

@@ -170,6 +170,11 @@
   background: color-mix(in srgb, var(--ctw-color-text) 8%, transparent);
 }
 
+.ctw-masthead--studio .ctw-primary-nav__link--stand-out {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
 .ctw-masthead--studio .ctw-primary-nav__link[aria-current] {
   background: color-mix(in srgb, var(--ctw-color-action) 12%, transparent);
   color: var(--ctw-color-action);
@@ -432,6 +437,21 @@
   }
 }
 
+@media (max-width: 22rem) {
+  .ctw-masthead--studio .ctw-liquid-contact__plus {
+    display: none;
+  }
+
+  .ctw-masthead--studio .ctw-liquid-contact__label {
+    font-size: 0;
+  }
+
+  .ctw-masthead--studio .ctw-liquid-contact__label::after {
+    content: "Talk";
+    font-size: 0.7rem;
+  }
+}
+
 .ctw-container {
   width: min(100% - 2rem, var(--ctw-size-container));
   margin-inline: auto;

ctw.studio/src/components/SiteHeader.astro

@@ -17,6 +17,7 @@ const { current } = Astro.props;
       <a class="ctw-primary-nav__link" href="/portfolio/" aria-current={current === 'portfolio' ? 'page' : undefined}>Work</a>
       <a class="ctw-primary-nav__link" href="/writing/" aria-current={current === 'writing' ? 'page' : undefined}>Writing</a>
       <a class="ctw-primary-nav__link" href="/signals/" aria-current={current === 'signals' ? 'page' : undefined}>Signals</a>
+      <a class="ctw-primary-nav__link ctw-primary-nav__link--stand-out" href="/stand-out/" aria-label="Stand Out">Stand Out</a>
       <a
         class="ctw-primary-nav__link ctw-liquid-contact"
         href="/#about"

ctw.studio/tests/e2e/liquid-contact.spec.mjs

@@ -21,6 +21,11 @@ test('shared header exposes one native Contact link with decorative liquid layer
     await expect(contact.locator('.ctw-liquid-contact__plus')).toHaveAttribute('aria-hidden', 'true');
     await expect(contact.locator('.ctw-liquid-contact__label')).toHaveText('Contact');
     await expect(contact.locator('canvas')).toHaveCount(0);
+
+    const standOut = page.getByRole('navigation', { name: 'Primary navigation' })
+      .getByRole('link', { name: 'Stand Out', exact: true });
+    await expect(standOut).toHaveCount(1);
+    await expect(standOut).toHaveAttribute('href', '/stand-out/');
   }
 
   await page.goto('/portfolio/');
@@ -31,6 +36,15 @@ test('shared header exposes one native Contact link with decorative liquid layer
   await expect(page.locator('#about')).toBeInViewport();
 });
 
+test('shared header Stand Out link opens the canonical landing page', async ({ page }) => {
+  await page.goto('/');
+  await page.getByRole('navigation', { name: 'Primary navigation' })
+    .getByRole('link', { name: 'Stand Out', exact: true })
+    .click();
+  await expect(page).toHaveURL(/\/stand-out\/$/);
+  await expect(page).toHaveTitle('Stand Out — Bring your real business online');
+});
+
 test('fine pointer tracks metal position and clears active state on leave', async ({ page }) => {
   await page.setViewportSize({ width: 1440, height: 900 });
   await page.goto('/');
@@ -287,10 +301,35 @@ for (const width of [390, 320]) {
     expect(box?.width ?? 0).toBeGreaterThanOrEqual(43.99);
     expect(box?.height ?? 0).toBeGreaterThanOrEqual(43.99);
     expect(await contact.locator('.ctw-liquid-contact__label').evaluate((element) => element.scrollWidth <= element.clientWidth)).toBe(true);
+    const contactCopy = await contact.locator('.ctw-liquid-contact__label').evaluate((element) => ({
+      fontSize: Number.parseFloat(getComputedStyle(element).fontSize),
+      compactContent: getComputedStyle(element, '::after').content
+    }));
+    if (width === 320) {
+      expect(contactCopy.fontSize).toBe(0);
+      expect(contactCopy.compactContent).toBe('"Talk"');
+    } else {
+      expect(contactCopy.fontSize).toBeGreaterThan(0);
+      expect(contactCopy.compactContent).toBe('none');
+    }
     const navigationLabels = await page.getByRole('navigation', { name: 'Primary navigation' })
       .getByRole('link')
       .evaluateAll((links) => links.map((link) => link.getAttribute('aria-label') ?? link.textContent.trim()));
-    expect(navigationLabels).toEqual(['Work', 'Writing', 'Signals', 'Contact']);
+    expect(navigationLabels).toEqual(['Work', 'Writing', 'Signals', 'Stand Out', 'Contact']);
+    const navigationBoxes = await page.getByRole('navigation', { name: 'Primary navigation' })
+      .getByRole('link')
+      .evaluateAll((links) => links.map((link) => {
+        const box = link.getBoundingClientRect();
+        return { name: link.getAttribute('aria-label') ?? link.textContent.trim(), width: box.width, height: box.height };
+      }));
+    for (const target of navigationBoxes) {
+      expect(target.width, target.name).toBeGreaterThanOrEqual(43.99);
+      expect(target.height, target.name).toBeGreaterThanOrEqual(43.99);
+    }
+    const standOut = page.getByRole('navigation', { name: 'Primary navigation' })
+      .getByRole('link', { name: 'Stand Out', exact: true });
+    await expect(standOut).toHaveCSS('white-space', 'nowrap');
+    expect(await standOut.evaluate((element) => element.scrollWidth <= element.clientWidth)).toBe(true);
     await context.close();
   });
 }

ctw.studio/tests/identity.test.mjs

@@ -11,8 +11,9 @@ test('header presents Jesse identity and exact primary navigation while retainin
   assert.match(source, />Jesse Gonzalez</);
   const nav = source.slice(source.indexOf('<nav class="ctw-primary-nav"'), source.indexOf('</nav>'));
   assert.deepEqual([...nav.matchAll(/href="([^"]+)"/g)].map((match) => match[1]), [
-    '/portfolio/', '/writing/', '/signals/', '/#about'
+    '/portfolio/', '/writing/', '/signals/', '/stand-out/', '/#about'
   ]);
+  assert.match(nav, /href="\/stand-out\/"[^>]*aria-label="Stand Out"/);
   assert.doesNotMatch(nav, /AI Workshop|\/workshop\//);
   for (const sentinel of [
     'ctw-liquid-contact', 'data-liquid-contact', 'data-liquid-mode="static"',