From 981a20dd8a4a7ca757cac2d16d75afdb1c4a3e32 Mon Sep 17 00:00:00 2001
From: Jon Pither <jon@juxt.pro>
Date: Tue, 19 May 2026 15:13:40 +0100
Subject: [PATCH 1/2] =?UTF-8?q?xt26:=20design=20refresh=20=E2=80=94=20squa?=
 =?UTF-8?q?re=20B&W=20speakers,=20dark=20agenda,=20orange=20CTA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Speaker cards: square (was circle), grayscale → colour on hover, 4-across at lg, dropped chunky orange ring
- Agenda: ported XT24 styling (dark zinc-800, orange uppercase titles, orange dividers); special rows zinc-900 instead of green
- Hero CTA: filled orange Apply to Attend (was outline)
---
 src/components/XT26Agenda.astro | 11 ++++-----
 src/components/XT26Page.astro   | 41 +++++++++++++--------------------
 2 files changed, 21 insertions(+), 31 deletions(-)

diff --git a/src/components/XT26Agenda.astro b/src/components/XT26Agenda.astro
index d6dbd8cad..94d571832 100644
--- a/src/components/XT26Agenda.astro
+++ b/src/components/XT26Agenda.astro
@@ -114,19 +114,18 @@ const agenda = [
       <div>
         <div
           class:list={[
-            'grid grid-cols-1 sm:grid-cols-5',
-            { 'bg-white': !isSpecialEvent }
+            'grid grid-cols-1 sm:grid-cols-5 sm:divide-x sm:divide-juxt',
+            { 'bg-zinc-900': isSpecialEvent }
           ]}
-          style={isSpecialEvent ? 'background-color: #c7e5b8;' : ''}
         >
-          <p class='px-5 pt-5 sm:p-5 font-semibold text-lg align-text-top text-center text-gray-800 sm:border-r-2 sm:border-black'>
+          <p class='px-5 pt-5 sm:p-5 font-semibold text-lg align-text-top text-white'>
             {time}
           </p>
           <div class='px-5 pb-5 sm:p-5 sm:col-span-4'>
-            <h2 class='font-bold text-xl text-black'>{title}</h2>
+            <h2 class='font-light text-lg text-juxt uppercase'>{title}</h2>
             {subTitle &&
               (Array.isArray(subTitle) ? subTitle : [subTitle]).map((s) => (
-                <p class='font-light text-sm text-gray-700'>{s}</p>
+                <p class='font-light text-lg text-white'>{s}</p>
               ))}
           </div>
         </div>
diff --git a/src/components/XT26Page.astro b/src/components/XT26Page.astro
index 9372a4943..f464db6ab 100644
--- a/src/components/XT26Page.astro
+++ b/src/components/XT26Page.astro
@@ -62,7 +62,7 @@ const subject = 'XT26 Request for Invite'
       </div>
       <a
         href='#attend'
-        class='inline-block border border-white/40 text-white px-10 py-5 text-sm tracking-[0.2em] uppercase hover:bg-white hover:text-black transition-all duration-300'
+        class='inline-block bg-juxt text-black px-10 py-5 text-sm font-semibold tracking-[0.2em] uppercase hover:bg-white transition-all duration-300'
       >
         Apply to Attend
       </a>
@@ -97,34 +97,27 @@ const subject = 'XT26 Request for Invite'
       </div>
 
       <div
-        class='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-6 gap-y-12 w-full'
+        class='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-8 gap-y-14 w-full'
       >
         {
           speakers.map(({ name, role, company, image, linkedin }) => (
             <a
               href={linkedin && `https://www.linkedin.com/in/${linkedin}`}
               target='_blank'
-              class={`speaker-card flex flex-col items-center text-center ${
+              class={`speaker-card group flex flex-col items-center text-center ${
                 linkedin ? 'cursor-pointer' : 'cursor-default'
               }`}
             >
-              <div class='relative mb-2 w-56 h-56'>
-                <div
-                  class='w-56 h-56 border-[5px] border-juxt rounded-full overflow-hidden bg-blue-300'
-                >
-                  <AssetImage
-                    src={image}
-                    alt={`Headshot of ${name}`}
-                    class='w-full h-full object-cover'
-                  />
-                </div>
-                <div class='absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent rounded-full pointer-events-none' />
-                <div class='absolute bottom-0.5 left-0 right-0 flex justify-center pointer-events-none'>
-                  <h3 class='font-bold text-lg text-white leading-tight'>
-                    {name}
-                  </h3>
-                </div>
+              <div class='relative mb-5 w-full aspect-square overflow-hidden bg-gray-800'>
+                <AssetImage
+                  src={image}
+                  alt={`Headshot of ${name}`}
+                  class='w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500'
+                />
               </div>
+              <h3 class='font-semibold text-lg text-white leading-tight mb-1'>
+                {name}
+              </h3>
               {Array.isArray(role) ? (
                 role.map((line) => (
                   <p class='text-sm text-gray-400 mb-0'>{line}</p>
@@ -143,7 +136,7 @@ const subject = 'XT26 Request for Invite'
   </section>
 
   <!-- Agenda Section -->
-  <section id='agenda' class='bg-gray-50'>
+  <section id='agenda' class='bg-zinc-800 text-white'>
     <div class='max-w-7xl mx-auto px-6 md:px-12 lg:px-20 py-24 md:py-32'>
       <div class='flex flex-col items-center text-center mb-16 md:mb-20'>
         <p
@@ -152,18 +145,16 @@ const subject = 'XT26 Request for Invite'
           The Day
         </p>
         <h2
-          class='text-4xl md:text-5xl lg:text-6xl font-extralight text-gray-900 mb-6'
+          class='text-4xl md:text-5xl lg:text-6xl font-extralight text-white mb-6'
         >
           Agenda
         </h2>
-        <p class='text-gray-500 text-lg max-w-2xl font-light'>
+        <p class='text-gray-400 text-lg max-w-2xl font-light'>
           Nine talks, an expert panel, and an evening reception.
         </p>
       </div>
 
-      <div
-        class='w-full bg-white rounded-lg overflow-hidden p-6 sm:p-10 md:p-14 shadow-sm'
-      >
+      <div class='w-full'>
         <XT26Agenda />
       </div>
       <div class='w-full flex justify-end'>

From 47018a8c9c83dc932b3473413e092f3a0a736306 Mon Sep 17 00:00:00 2001
From: Jon Pither <jon@juxt.pro>
Date: Wed, 20 May 2026 09:44:56 +0100
Subject: [PATCH 2/2] xt26: speakers in colour variant (vs B&W in #258)

---
 src/components/XT26Page.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/XT26Page.astro b/src/components/XT26Page.astro
index f464db6ab..08592cf9c 100644
--- a/src/components/XT26Page.astro
+++ b/src/components/XT26Page.astro
@@ -112,7 +112,7 @@ const subject = 'XT26 Request for Invite'
                 <AssetImage
                   src={image}
                   alt={`Headshot of ${name}`}
-                  class='w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500'
+                  class='w-full h-full object-cover group-hover:scale-105 transition-transform duration-500'
                 />
               </div>
               <h3 class='font-semibold text-lg text-white leading-tight mb-1'>