From ce5c1e5de239f3dabadf17ad3e6b4d210ecd1499 Mon Sep 17 00:00:00 2001
From: Ronggur Mangaraja Habibun <ronggur.mh@gmail.com>
Date: Fri, 19 Jun 2026 14:58:11 +0700
Subject: [PATCH 1/2] fix(styles): restore datum-prose link color and underline

Reorder datum-prose-base so prose-a overrides **:text-inherit, set
--tw-prose-links to canyon-clay, and add matching underline decoration.
Polish roadmap backlog row layout and reuse Icon for external links.
---
 src/components/roadmap/RoadmapBacklogRow.astro | 18 ++----------------
 src/v1/styles/components-roadmap.css           |  7 ++++---
 src/v1/styles/utilities.css                    |  7 +++++--
 3 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/src/components/roadmap/RoadmapBacklogRow.astro b/src/components/roadmap/RoadmapBacklogRow.astro
index 16d9ecad..6509cb77 100644
--- a/src/components/roadmap/RoadmapBacklogRow.astro
+++ b/src/components/roadmap/RoadmapBacklogRow.astro
@@ -1,5 +1,6 @@
 ---
 // src/components/roadmap/RoadmapBacklogRow.astro
+import Icon from '@components/Icon.astro';
 import type { GitHubBacklogItem } from '@libs/githubBacklog';
 
 interface Props {
@@ -34,21 +35,6 @@ const { item } = Astro.props as Props;
 
   <span class="roadmap-backlog-link">
     GitHub
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      aria-hidden="true"
-    >
-      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
-      <polyline points="15 3 21 3 21 9"></polyline>
-      <line x1="10" y1="14" x2="21" y2="3"></line>
-    </svg>
+    <Icon name="external-link" size="sm" />
   </span>
 </a>
diff --git a/src/v1/styles/components-roadmap.css b/src/v1/styles/components-roadmap.css
index 3c307d49..0c00f46b 100644
--- a/src/v1/styles/components-roadmap.css
+++ b/src/v1/styles/components-roadmap.css
@@ -102,6 +102,7 @@
   }
 
   .roadmap-detail--sections {
+    @apply text-midnight-fjord;
     @apply flex flex-col gap-10;
   }
 
@@ -152,11 +153,11 @@
   }
 
   .roadmap-backlog-row {
-    @apply border-app---dark---utility-1 flex cursor-pointer flex-col items-start gap-4 border-b py-8 no-underline lg:flex-row lg:items-center lg:gap-10;
+    @apply border-app---dark---utility-1 flex cursor-pointer flex-col items-start gap-4 border-b py-8 no-underline md:gap-8 lg:flex-row lg:items-center lg:gap-10;
   }
 
   .roadmap-backlog-number {
-    @apply text-app---dark---utility-4 datum-text-xl w-14 shrink-0 font-mono leading-6 tabular-nums transition-opacity duration-150 lg:w-16;
+    @apply text-app---dark---utility-4 datum-text-base w-12 shrink-0 font-mono leading-6 tabular-nums transition-opacity duration-150;
   }
 
   .roadmap-backlog-title {
@@ -179,7 +180,7 @@
   .roadmap-backlog-row:hover .roadmap-backlog-title,
   .roadmap-backlog-row:hover .roadmap-backlog-badge,
   .roadmap-backlog-row:hover .roadmap-backlog-link {
-    @apply opacity-70;
+    @apply opacity-80;
   }
 
   /* ─────────────────────────────────────────────────────────────────────────
diff --git a/src/v1/styles/utilities.css b/src/v1/styles/utilities.css
index 6ed58cf9..70df8f1d 100644
--- a/src/v1/styles/utilities.css
+++ b/src/v1/styles/utilities.css
@@ -216,10 +216,13 @@
 
 /* Shared prose link and inheritance base — applied by all datum-prose-* variants */
 @utility datum-prose-base {
+  --tw-prose-links: var(--color-canyon-clay---links);
+  --tw-prose-links-hover: var(--color-canyon-clay---links/80);
+
   @apply prose max-w-none;
-  @apply prose-a:text-canyon-clay---links/70 prose-a:font-normal;
-  @apply prose-a:hover:no-underline prose-a:hover:text-canyon-clay---links;
   @apply **:text-inherit;
+  @apply prose-a:font-normal prose-a:text-canyon-clay---links prose-a:underline prose-a:decoration-canyon-clay---links;
+  @apply prose-a:hover:no-underline prose-a:hover:text-canyon-clay---links/80;
 }
 
 @utility datum-prose-lg {

From ebe639ccdc1e60ab5a27d4a75fac73614d7fb3bb Mon Sep 17 00:00:00 2001
From: Ronggur Mangaraja Habibun <ronggur.mh@gmail.com>
Date: Fri, 19 Jun 2026 15:08:34 +0700
Subject: [PATCH 2/2] style(footer): replace rotating cta colors with sage-mist

Add sage-mist design token and apply static backgrounds to the footer
CTA, illustration band, and roadmap placeholders. Remove the color morph
animation script.
---
 src/components/Footer.astro          | 70 ++--------------------------
 src/v1/styles/components-roadmap.css |  3 +-
 src/v1/styles/components.css         |  2 +-
 src/v1/styles/theme.css              |  1 +
 src/v1/styles/variables.css          |  1 +
 5 files changed, 7 insertions(+), 70 deletions(-)

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index c899c5eb..0bc356ca 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -32,13 +32,10 @@ const navData = navigation as NavData;
   {/* Hero Content - Conditionally rendered */}
   {
     showCTA && (
-      <div
-        id="footer-cta-bg"
-        class="text-midnight-fjord bg-aurora-moss relative z-10 mx-auto pt-14 md:pt-20 lg:pt-28"
-      >
+      <div class="text-midnight-fjord bg-sage-mist relative z-10 mx-auto pt-14 md:pt-20 lg:pt-28">
         <div class="max-width flex flex-col items-center gap-5.5 text-center md:gap-10">
           <h2 class="datum-text-11xl">
-            <span id="footer-less-talk">Less talk,</span> more building
+            <span class="text-pine-forge">Less talk,</span> more building
           </h2>
           <p class="datum-text-xl max-w-186 text-pretty">
             Our "forever free" tier currently includes an Envoy-based AI Edge and QUIC tunnels for
@@ -70,10 +67,7 @@ const navData = navigation as NavData;
   {/* Background Landscape - Conditionally rendered */}
   {
     showBackground && (
-      <div
-        id="footer-illustration-bg"
-        class:list={['footer-illustration-container', !showCTA && 'bg-glacier-mist-700 pt-30']}
-      >
+      <div class:list={['footer-illustration-container', !showCTA && 'bg-glacier-mist-700 pt-30']}>
         <div class="relative w-full">
           <Image
             src={ImageFooter}
@@ -217,64 +211,6 @@ const navData = navigation as NavData;
   <NewsletterModal />
 </footer>
 
-<script>
-  // ── Footer CTA — background color morph ───────────────────────────────────
-  // Cycles through brand palette colors, smooth ease-in-out between each.
-  const el = document.getElementById('footer-cta-bg');
-  const elBg = document.getElementById('footer-illustration-bg');
-  const elTxt = document.getElementById('footer-less-talk') as HTMLElement | null;
-  if (el) {
-    // [R, G, B] — bright/warm palette colours
-    const COLORS: [number, number, number][] = [
-      [230, 245, 159], // aurora-moss    #e6f59f
-      [236, 208, 208], // blush-quartz   #ecd0d0
-      [173, 186, 176], // potted-olive   #adbab0
-      [240, 140, 140], // alert-red-dark #f08c8c
-    ];
-
-    const PHASE_DUR = 7000; // ms per colour stop
-    let startTime = -1;
-
-    // Smoothstep — ease in+out, no abrupt edges
-    function smoothstep(t: number) {
-      return t * t * (3 - 2 * t);
-    }
-
-    function lerp(a: number, b: number, t: number) {
-      return a + (b - a) * t;
-    }
-
-    function frame(ts: number) {
-      if (startTime < 0) startTime = ts;
-      const elapsed = ts - startTime;
-      const totalDur = PHASE_DUR * COLORS.length;
-      const cycleT = (elapsed % totalDur) / totalDur; // 0→1 forever
-
-      const phaseF = cycleT * COLORS.length;
-      const phaseIdx = Math.floor(phaseF) % COLORS.length;
-      const nextIdx = (phaseIdx + 1) % COLORS.length;
-      const phaseT = smoothstep(phaseF - phaseIdx);
-
-      const c = COLORS[phaseIdx];
-      const n = COLORS[nextIdx];
-
-      const r = Math.round(lerp(c[0], n[0], phaseT));
-      const g = Math.round(lerp(c[1], n[1], phaseT));
-      const b = Math.round(lerp(c[2], n[2], phaseT));
-
-      const rgb = `rgb(${r},${g},${b})`;
-      el!.style.backgroundColor = rgb;
-      if (elBg) (elBg as HTMLElement).style.backgroundColor = rgb;
-      if (elTxt)
-        elTxt.style.color = `rgb(${Math.round(r * 0.55)},${Math.round(g * 0.55)},${Math.round(b * 0.55)})`;
-
-      requestAnimationFrame(frame);
-    }
-
-    requestAnimationFrame(frame);
-  }
-</script>
-
 <script is:inline>
   document.addEventListener('DOMContentLoaded', () => {
     const triggers = document.querySelectorAll('[data-newsletter-trigger]');
diff --git a/src/v1/styles/components-roadmap.css b/src/v1/styles/components-roadmap.css
index 0c00f46b..140c4c66 100644
--- a/src/v1/styles/components-roadmap.css
+++ b/src/v1/styles/components-roadmap.css
@@ -48,8 +48,7 @@
   }
 
   .roadmap-card--placeholder {
-    @apply flex aspect-square w-full flex-col items-center justify-center overflow-clip;
-    background-color: #d6ddd7;
+    @apply bg-sage-mist flex aspect-square w-full flex-col items-center justify-center overflow-clip;
   }
 
   .roadmap-card--placeholder-month {
diff --git a/src/v1/styles/components.css b/src/v1/styles/components.css
index ac3339ba..17c9c608 100644
--- a/src/v1/styles/components.css
+++ b/src/v1/styles/components.css
@@ -69,7 +69,7 @@
   /* Footer Components */
 
   .footer-illustration-container {
-    @apply bg-aurora-moss relative;
+    @apply bg-sage-mist relative;
     @apply relative z-9 pt-5 lg:pt-1;
 
     &:before {
diff --git a/src/v1/styles/theme.css b/src/v1/styles/theme.css
index 9dd7b768..b4c457dc 100644
--- a/src/v1/styles/theme.css
+++ b/src/v1/styles/theme.css
@@ -43,6 +43,7 @@
   --color-canyon-clay: #bf9595;
   --color-canyon-clay---links: #9c7979;
   --color-potted-olive: #adbab0;
+  --color-sage-mist: #d6ddd7;
   --color-cultured: #f5f5f3;
   --color-pale-yellow: #fffbc5;
   --color-misty-rose: #fde2e2;
diff --git a/src/v1/styles/variables.css b/src/v1/styles/variables.css
index 375ae7b1..a66245c2 100644
--- a/src/v1/styles/variables.css
+++ b/src/v1/styles/variables.css
@@ -30,6 +30,7 @@
   --midnight-fjord: #0c1d31;
   --pine-forge: #4d6356;
   --potted-olive: #adbab0;
+  --sage-mist: #d6ddd7;
   --white: #ffffff;
   --alert-red-light: #d25b5b;
   --alert-red-dark: #f08c8c;