From c44ed31cdd93188984fdc168950ac4ce6cf1dfd9 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Wed, 27 May 2026 12:25:01 +0200
Subject: [PATCH] feat: stacked EARTH WALKER / DESIGN wordmark
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Carries forward the original site's wordmark — EARTH WALKER set in
serif semibold over a smaller, lighter, wider-tracked DESIGN —
adapted to use Fraunces from our type system. Centered stack, no
frame, themed via currentColor so it inverts cleanly on the dark
hero overlay and follows the active palette and theme.

Two sizes: 'sm' (header, footer, mobile drawer) scales text-sm →
text-base at md; 'lg' (home hero overlay) scales text-2xl → text-3xl
→ text-4xl across breakpoints. Whitespace-nowrap holds the shape
together regardless of container width.

Used in:
  - SiteHeader logo slot (sm)
  - Mobile Sheet drawer header (sm)
  - SiteFooter brand block (sm)
  - HomeView hero overlay above the headline (lg)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/layout/SiteFooter.vue |  5 ++--
 src/components/layout/SiteHeader.vue | 11 +++----
 src/components/layout/Wordmark.vue   | 43 ++++++++++++++++++++++++++++
 src/views/HomeView.vue               |  7 ++---
 4 files changed, 55 insertions(+), 11 deletions(-)
 create mode 100644 src/components/layout/Wordmark.vue

diff --git a/src/components/layout/SiteFooter.vue b/src/components/layout/SiteFooter.vue
index e6036e1..e6f3912 100644
--- a/src/components/layout/SiteFooter.vue
+++ b/src/components/layout/SiteFooter.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { RouterLink } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import Wordmark from './Wordmark.vue'
 
 const { t } = useI18n({ useScope: 'global' })
 const year = new Date().getFullYear()
@@ -11,8 +12,8 @@ const year = new Date().getFullYear()
     <div
       class="mx-auto flex max-w-[1400px] flex-col items-start justify-between gap-6 px-6 py-12 md:flex-row md:items-center md:px-10"
     >
-      <div class="space-y-1">
-        <p class="font-serif text-base tracking-[0.18em] uppercase">{{ t('brand') }}</p>
+      <div class="space-y-3">
+        <Wordmark size="sm" class="text-foreground" />
         <p class="text-muted-foreground text-xs">{{ t('footer.tagline') }}</p>
       </div>
       <div class="flex items-center gap-8">
diff --git a/src/components/layout/SiteHeader.vue b/src/components/layout/SiteHeader.vue
index 88c1011..ee1f82f 100644
--- a/src/components/layout/SiteHeader.vue
+++ b/src/components/layout/SiteHeader.vue
@@ -12,6 +12,7 @@ import {
 } from '@/components/ui/sheet'
 import ThemeToggle from './ThemeToggle.vue'
 import LocaleSwitcher from './LocaleSwitcher.vue'
+import Wordmark from './Wordmark.vue'
 
 const { t } = useI18n({ useScope: 'global' })
 
@@ -32,9 +33,10 @@ const mobileOpen = ref(false)
     >
       <RouterLink
         to="/"
-        class="text-foreground font-serif text-lg tracking-[0.18em] uppercase"
+        class="text-foreground inline-flex items-center"
+        :aria-label="t('brand')"
       >
-        {{ t('brand') }}
+        <Wordmark size="sm" />
       </RouterLink>
 
       <nav class="hidden items-center gap-8 md:flex">
@@ -63,9 +65,8 @@ const mobileOpen = ref(false)
           </SheetTrigger>
           <SheetContent side="right" class="w-full sm:max-w-sm">
             <SheetHeader>
-              <SheetTitle class="font-serif tracking-[0.18em] uppercase">
-                {{ t('brand') }}
-              </SheetTitle>
+              <SheetTitle class="sr-only">{{ t('brand') }}</SheetTitle>
+              <Wordmark size="sm" class="text-foreground" />
             </SheetHeader>
             <nav class="mt-10 flex flex-col gap-6 px-4">
               <RouterLink
diff --git a/src/components/layout/Wordmark.vue b/src/components/layout/Wordmark.vue
new file mode 100644
index 0000000..73226bd
--- /dev/null
+++ b/src/components/layout/Wordmark.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+type Size = 'sm' | 'lg'
+
+const props = withDefaults(
+  defineProps<{
+    /** Visual size — controls type scale. 'sm' for header/footer, 'lg' for hero. */
+    size?: Size
+  }>(),
+  { size: 'sm' },
+)
+
+const earthClasses: Record<Size, string> = {
+  sm: 'text-sm tracking-[0.22em] md:text-base md:tracking-[0.24em]',
+  lg: 'text-2xl tracking-[0.24em] md:text-3xl lg:text-4xl md:tracking-[0.26em]',
+}
+
+const designClasses: Record<Size, string> = {
+  sm: 'text-[0.55rem] tracking-[0.42em] md:text-[0.65rem] md:tracking-[0.46em]',
+  lg: 'text-xs tracking-[0.46em] md:text-sm md:tracking-[0.5em] lg:text-base',
+}
+
+const gapClasses: Record<Size, string> = {
+  sm: 'gap-[0.2em]',
+  lg: 'gap-[0.25em]',
+}
+</script>
+
+<template>
+  <span
+    :class="[
+      'inline-flex flex-col items-center whitespace-nowrap uppercase leading-none',
+      gapClasses[props.size],
+    ]"
+    aria-label="Earth Walker Design"
+  >
+    <span :class="['font-serif font-semibold', earthClasses[props.size]]">
+      Earth Walker
+    </span>
+    <span :class="['font-serif font-light opacity-90', designClasses[props.size]]">
+      Design
+    </span>
+  </span>
+</template>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index f8fe19f..f9929d6 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -4,6 +4,7 @@ import { RouterLink } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { AspectRatio } from '@/components/ui/aspect-ratio'
 import { Button } from '@/components/ui/button'
+import Wordmark from '@/components/layout/Wordmark.vue'
 import { projects } from '@/data/projects'
 
 const { t } = useI18n({ useScope: 'global' })
@@ -34,11 +35,9 @@ const projectCards = computed(() =>
       <div
         class="absolute right-0 bottom-14 left-0 mx-auto max-w-[1400px] px-6 text-white md:bottom-20 md:px-10"
       >
-        <p class="text-xs uppercase tracking-[0.22em] text-white/80">
-          {{ t('home.hero.eyebrow') }}
-        </p>
+        <Wordmark size="lg" class="text-white/95" />
         <h1
-          class="mt-4 max-w-3xl font-serif text-4xl font-light leading-[1.05] tracking-tight md:text-6xl lg:text-7xl"
+          class="mt-6 max-w-3xl font-serif text-4xl font-light leading-[1.05] tracking-tight md:text-6xl lg:text-7xl"
         >
           {{ t('home.hero.headline') }}<br />{{ t('home.hero.headline2') }}
         </h1>