Brand audit fixes: domain casing, radii, violet, seal size, page seals

- Store domain shown as Store.GregKilmer.com (no uppercase transform)
- Cards and panels 10px corners; buttons pill-shaped
- Canvas star/circuit violet switched to brand violet #6A2FE0
- Nav, store nav and footer seal at the brand's 72px minimum (nav 80px tall)
- Faint seals on contact, store cards, deck boxes, order and professional

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012aSbo2D1qP8cMFQCykf7kx

docs/THEMING.md

@@ -151,6 +151,11 @@ Font sizes use `clamp()` for fluid scaling (see the `h1`-`h4` rules in
   generated from the brand source (`newicons.py`); add icons there.
 - **Motifs:** `<Motif name="..." />` shows a brand motif from `public/motifs/`,
   copied from the brand files with ring text outlined to paths. `-light` files
-  are the Starlight recolor. One focal motif per surface, kept faint.
+  are the Starlight recolor. One focal motif per surface, kept faint. Every
+  page carries at least one seal: night-sky heroes have the turning layered
+  seal, and pages without a hero use `<PageSeal name="..." />` behind the header.
+- **Shape:** cards and panels have 10px corners (`--radius-xl`/`2xl`/`3xl` are
+  pinned to 10px); buttons and tags are pills. The Patiun seal is never shown
+  below 72px (nav and footer use 72px).
 - **Gold accents:** image frames, quote bars, dividers and rules use
   `--color-gold`; teal stays for links, buttons and icons.

src/components/brand/Motif.astro

@@ -15,12 +15,16 @@
  * Usage:
  *   <Motif name="transmutation-seal-light" class="absolute -right-40 top-10 h-[40rem] w-[40rem]" style="opacity:.1" />
  */
-interface Props {
+export interface Props {
   name:
     | "layered-seal"
     | "astrolabe"
     | "transmutation-seal-light"
-    | "tria-prima-array-seal-light";
+    | "tria-prima-array-seal-light"
+    | "zodiac-seal-light"
+    | "craft-seal-print-light"
+    | "squared-circle-seal-light"
+    | "kepler-nest-seal-light";
   class?: string;
   style?: string;
 }

src/components/brand/PageSeal.astro

@@ -0,0 +1,29 @@
+---
+/**
+ * PageSeal.astro
+ * ---------------------------------------------------------------------------
+ * A faint Patiun seal behind the top-right of a page header, for pages
+ * without a night-sky hero (those already carry the turning layered seal).
+ * Sits behind content (-z-10) and is clipped so it never widens the page.
+ *
+ * Usage (first thing inside the page): <PageSeal name="zodiac-seal-light" />
+ */
+import Motif from "@components/brand/Motif.astro";
+import type { Props as MotifProps } from "@components/brand/Motif.astro";
+
+interface Props {
+  name: MotifProps["name"];
+}
+const { name } = Astro.props;
+---
+
+<div
+  aria-hidden="true"
+  class="pointer-events-none absolute inset-x-0 top-0 -z-10 h-[46rem] overflow-hidden"
+>
+  <Motif
+    name={name}
+    class="absolute -right-40 top-20 h-[30rem] w-[30rem] sm:-right-24 sm:top-24 sm:h-[36rem] sm:w-[36rem] lg:right-[max(-6rem,calc((100vw-72rem)/2-12rem))]"
+    style="opacity:.14;"
+  />
+</div>

src/components/hero/AnimatedBackground.tsx

@@ -87,9 +87,8 @@ export default function AnimatedBackground({
     const gold =
       getComputedStyle(document.documentElement).getPropertyValue('--color-gold').trim() ||
       '#c9a24a';
-    // Nebula Violet is background light only, so violet stars use a lifted
-    // tint of it; teal stars use the on-dark teal so they read at dot size.
-    const violet = '#8a63ee';
+    // Nebula Violet is background light only, so violet stars stay sparse; teal stars use the on-dark teal so they read at dot size.
+    const violet = '#6a2fe0';
     const teal =
       getComputedStyle(document.documentElement).getPropertyValue('--color-teal-bright').trim() ||
       '#2bc2b7';

src/components/layout/Footer.astro

@@ -26,7 +26,7 @@ const socialList = Object.values(socials);
   />
   <div class="container-prose relative z-10 flex flex-col items-center gap-6 py-10 text-center sm:flex-row sm:justify-between sm:text-left">
     <div class="flex items-center gap-3">
-      <img src="/brand/patiun-seal.svg" alt="" width="48" height="48" class="h-12 w-12 shrink-0" />
+      <img src="/brand/patiun-seal.svg" alt="" width="72" height="72" class="h-[72px] w-[72px] shrink-0" />
       <div class="flex flex-col gap-1">
         <p class="font-display text-sm font-bold uppercase tracking-[0.14em]" style="color: var(--color-text);">
           {siteIdentity.name}

src/components/mystic/CircuitField.tsx

@@ -57,7 +57,7 @@ export default function CircuitField({
     let nodes: Node[] = [];
 
     const gold = '#c9a24a';
-    const violet = '#8a63ee';
+    const violet = '#6a2fe0';
     const teal = '#2bc2b7';
 
     function build() {

src/components/mystic/ConstellationField.tsx

@@ -68,7 +68,7 @@ export default function ConstellationField({
     let stars: Star[] = [];
 
     const gold = '#c9a24a';
-    const violet = '#8a63ee';
+    const violet = '#6a2fe0';
     const teal = '#2bc2b7';
     const white = '#f4f2ed';
     const accent = tint === 'violet' ? violet : tint === 'teal' ? teal : gold;

src/components/nav/NavBar.astro

@@ -41,7 +41,7 @@ const heroSkyClass = isHome ? "" : "vt-hero-sky";
     data-nav-inner
   >
     <nav
-      class="container-prose flex h-16 items-center justify-between gap-4"
+      class="container-prose flex h-20 items-center justify-between gap-4"
       aria-label="Primary"
     >
       <!-- Logo / identity: the Patiun seal (glyph in the gold degree ring) beside
@@ -55,9 +55,9 @@ const heroSkyClass = isHome ? "" : "vt-hero-sky";
         <img
           src="/brand/patiun-seal.svg"
           alt=""
-          width="44"
-          height="44"
-          class="h-11 w-11 shrink-0 transition-transform duration-700 group-hover:rotate-[30deg]"
+          width="72"
+          height="72"
+          class="h-[72px] w-[72px] shrink-0 transition-transform duration-700 group-hover:rotate-[30deg]"
         />
         <span class="flex flex-col">
           <span

src/components/store/StoreNav.astro

@@ -42,25 +42,25 @@ const groups = [{ items: storeNav }];
   class="on-sky fixed inset-x-0 top-0 z-50 transition-[background,box-shadow,border-color] duration-300"
 >
   <div class="border-b border-transparent transition-colors duration-300" data-nav-inner>
-    <nav class="container-prose flex h-16 items-center justify-between gap-4" aria-label="Store">
+    <nav class="container-prose flex h-20 items-center justify-between gap-4" aria-label="Store">
       <!-- Wordmark: "Greg Kilmer · Store" + the store domain label -->
       <a href="/store" class="group flex items-center gap-3 leading-tight" aria-label="Greg Kilmer Store — home">
         <img
           src="/brand/patiun-seal.svg"
           alt=""
-          width="44"
-          height="44"
-          class="h-11 w-11 shrink-0 transition-transform duration-700 group-hover:rotate-[30deg]"
+          width="72"
+          height="72"
+          class="h-[72px] w-[72px] shrink-0 transition-transform duration-700 group-hover:rotate-[30deg]"
         />
         <span class="flex flex-col">
           <span class="font-display text-base font-bold uppercase tracking-[0.12em]" style="color: var(--color-starlight);">
             Greg Kilmer · Store
           </span>
           <span
-            class="hidden font-eyebrow text-[0.65rem] uppercase tracking-[0.18em] sm:block"
+            class="hidden font-eyebrow text-[0.7rem] tracking-[0.08em] sm:block"
             style="color: var(--color-text-subtle);"
           >
-            store.gregkilmer.com
+            Store.GregKilmer.com
           </span>
         </span>
       </a>

src/pages/contact.astro

@@ -11,6 +11,7 @@
  * Placeholder slots.
  */
 import BaseLayout from "@layouts/BaseLayout.astro";
+import PageSeal from "@components/brand/PageSeal.astro";
 import Reveal from "@components/motion/Reveal.astro";
 import Icon from "@components/Icon.astro";
 import SectionHeader from "@components/layout/SectionHeader.astro";
@@ -71,6 +72,7 @@ const turnstileSiteKey = getTurnstileSiteKey();
   description="Reach Greg Kilmer for cloud development, SAP BTP, technical leadership, or just to debate the best Gundam series or find a fourth for game night."
   noindex={true}
 >
+  <PageSeal name="zodiac-seal-light" />
   <section class="container-prose flex flex-col gap-10 pt-28 sm:pt-32">
     <Reveal>
       <SectionHeader

src/pages/index.astro

@@ -52,7 +52,7 @@ const cards = [
 <BaseLayout>
   <!-- ===================== HERO ===================== -->
   <section
-    class="on-sky vt-hero-sky relative flex min-h-[88vh] items-center overflow-hidden pt-16"
+    class="on-sky vt-hero-sky relative flex min-h-[88vh] items-center overflow-hidden pt-20"
   >
     <AnimatedBackground client:idle className="vt-sky" />
 

src/pages/professional/index.astro

@@ -256,7 +256,14 @@ const projects = (await getCollection("projects")).sort(
     </section>
 
     {/* ===== 6. Contact ===== */}
-    <section id="contact" class="scroll-mt-28 flex flex-col gap-6">
+    <section id="contact" class="relative scroll-mt-28 flex flex-col gap-6">
+      {/* A faint seal beside the closing call to action (the astrolabe is the
+          hero's motif, so the seal sits down here rather than competing). */}
+      <Motif
+        name="kepler-nest-seal-light"
+        class="absolute -top-20 right-0 -z-10 h-64 w-64 sm:-top-28 sm:h-96 sm:w-96"
+        style="opacity:.16;"
+      />
       <Reveal>
         <SectionHeader
           kicker="06"

src/pages/store/cards.astro

@@ -10,6 +10,7 @@
  * the carousel only.
  */
 import StoreLayout from '@layouts/StoreLayout.astro';
+import PageSeal from "@components/brand/PageSeal.astro";
 import Reveal from '@components/motion/Reveal.astro';
 import SectionHeader from '@components/layout/SectionHeader.astro';
 import Icon from '@components/Icon.astro';
@@ -37,6 +38,7 @@ const keyReqs = requirements.filter((r) =>
   title="Proxy MTG Cards"
   description="Proxy MTG cards printed to standard size with a solid white back — clearly marked proxies for casual play. Specs and pricing."
 >
+  <PageSeal name="squared-circle-seal-light" />
   <div class="container-prose flex flex-col gap-14 py-28 sm:py-32">
     {/* Header */}
     <section class="flex flex-col gap-5">

src/pages/store/deck-boxes.astro

@@ -9,6 +9,7 @@
  * (deckBoxProduct.images). The specs block is image-free now; examples live in
  * the carousel only.
  */
+import PageSeal from "@components/brand/PageSeal.astro";
 import StoreLayout from "@layouts/StoreLayout.astro";
 import Reveal from "@components/motion/Reveal.astro";
 import SectionHeader from "@components/layout/SectionHeader.astro";
@@ -36,6 +37,7 @@ const keyReqs = requirements.filter(
   title="3D-Printed Deck Boxes & Counters"
   description="3D-printed deck boxes, life counters, and tokens. Specs and pricing for printed storage and trackers."
 >
+  <PageSeal name="craft-seal-print-light" />
   <div class="container-prose flex flex-col gap-14 py-28 sm:py-32">
     {/* Header */}
     <section class="flex flex-col gap-5">

src/pages/store/index.astro

@@ -44,11 +44,11 @@ const orderHref = "/store/order";
       <div class="flex flex-col items-start gap-4">
         <Reveal>
           <span
-            class="inline-flex items-center gap-1.5 font-eyebrow text-xs uppercase tracking-[0.18em]"
+            class="inline-flex items-center gap-1.5 font-eyebrow text-sm tracking-[0.06em]"
             style="color: var(--color-accent);"
           >
             <Icon name="store" class="h-4 w-4" />
-            store.gregkilmer.com
+            Store.GregKilmer.com
           </span>
         </Reveal>
 

src/pages/store/order.astro

@@ -11,6 +11,7 @@
  * closed, so the gate can't be bypassed by POSTing directly.
  */
 import StoreLayout from '@layouts/StoreLayout.astro';
+import PageSeal from "@components/brand/PageSeal.astro";
 import Reveal from '@components/motion/Reveal.astro';
 import SectionHeader from '@components/layout/SectionHeader.astro';
 import Icon from '@components/Icon.astro';
@@ -31,6 +32,7 @@ const siteKey = turnstileSiteKey();
   title="Order Request"
   description="Submit a proxy-card or 3D-print order request. No payment is taken through the site."
 >
+  <PageSeal name="transmutation-seal-light" />
   <div class="container-prose flex flex-col gap-14 py-28 sm:py-32">
     <section class="flex flex-col gap-5">
       <Reveal>

src/styles/global.css

@@ -28,6 +28,11 @@
  * section wrapper (`data-surface`) instantly restyles every component.
  * ------------------------------------------------------------------------- */
 @theme {
+  /* Brand corner radius: cards and panels are 10px; buttons and tags are pills. */
+  --radius-xl: 10px;
+  --radius-2xl: 10px;
+  --radius-3xl: 10px;
+
   /* Brand colors (fixed, do not change with theme). The Patiun LLC palette,
    * shared by Patiun (craft) and Greg Kilmer (web). Source of truth: the
    * Patiun brand record / Claude Design tokens. Gold is structure and sparkle
@@ -189,7 +194,7 @@
   .card {
     background-color: var(--color-surface-raised);
     border: 1px solid var(--color-border);
-    border-radius: 1rem;
+    border-radius: 10px;
     padding: 1.5rem;
     transition:
       transform 0.3s var(--ease-out-soft),
@@ -223,7 +228,7 @@
     justify-content: center;
     gap: 0.5rem;
     padding: 0.75rem 1.5rem;
-    border-radius: 0.6rem;
+    border-radius: 999px;
     font-family: var(--font-sans);
     font-weight: 600;
     font-size: 1rem;