From 1443e3052b4af7b859aff6a5b6befd761f07ece8 Mon Sep 17 00:00:00 2001
From: 0xharkirat <sandhukirat23@gmail.com>
Date: Mon, 25 May 2026 11:40:13 +1000
Subject: [PATCH 1/8] Shorten footer deployment text for portrait iPad

Per Adam's request, tighten the SSW.Rules footer so it fits on iPad
portrait. "This website is under CONSTANT CONTINUOUS DEPLOYMENT. Last
deployed 13 minutes ago on May 23, 2026 ..." becomes "ssw.com.au <3
CONTINUOUS DEPLOYMENT. Last deployed 13 min ago 23 May 2026 ...".

- "This website is under" -> "ssw.com.au" + heart icon
- drop "CONSTANT"
- abbreviate "minutes"/"minute" -> "min"
- date format "MMM D, YYYY" -> "D MMM YYYY", drop leading "on"

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 components/layout/nav/footer.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/layout/nav/footer.tsx b/components/layout/nav/footer.tsx
index a0aadba4b..685423f33 100644
--- a/components/layout/nav/footer.tsx
+++ b/components/layout/nav/footer.tsx
@@ -123,15 +123,15 @@ export const Footer = () => {
             <hr className="border-gray-800 my-2"></hr>
             <div className="flex flex-col md:flex-row justify-between mx-6">
               <div className="py-2">
-                This website is under{" "}
+                ssw.com.au <FaHeart className="text-ssw-red inline" size={12} />{" "}
                 <a
                   className="inline-block text-white hover:text-ssw-red visited:text-white leading-3 transition-all duration-300 ease-in-out hover:text-ssw-red"
                   href={`${pathPrefix}/rules-to-better-websites-deployment`}
                 >
-                  CONSTANT CONTINUOUS DEPLOYMENT
+                  CONTINUOUS DEPLOYMENT
                 </a>
                 . Last deployed {getLastDeployTime()} ago
-                {buildDate && <span title={buildDate}> on {moment(buildDate).format("MMM D, YYYY [at] HH:mm UTC")}</span>} (Build #{" "}
+                {buildDate && <span title={buildDate}> {moment(buildDate).format("D MMM YYYY [at] HH:mm UTC")}</span>} (Build #{" "}
                 <a
                   className="inline-block text-white hover:text-ssw-red visited:text-white leading-3 transition-all duration-300 ease-in-out hover:text-ssw-red"
                   href={deploymentUrl}
@@ -180,5 +180,5 @@ const getLastDeployTime = () => {
   var minutes = Math.floor(delta / 60) % 60;
   delta -= minutes * 60;
 
-  return days !== 0 ? `${days} day(s)` : hours !== 0 ? `${hours} hour(s)` : minutes > 1 ? `${minutes} minutes` : "1 minute";
+  return days !== 0 ? `${days} day(s)` : hours !== 0 ? `${hours} hour(s)` : minutes > 1 ? `${minutes} min` : "1 min";
 };

From a36ec4a2ef9f2ed6c31be13abe7328fe96a161c7 Mon Sep 17 00:00:00 2001
From: 0xharkirat <sandhukirat23@gmail.com>
Date: Tue, 26 May 2026 11:50:03 +1000
Subject: [PATCH 2/8] Apply Tiago feedback: tooltip date, lg breakpoint, commit
 hash link

Footer text now:
  This website is under continuous deployment. Last updated X ago. Last commit YYY

- Drop ssw.com.au prefix + heart (too close to existing "We <heart>
  open source" heart - Tiago)
- Lowercase "continuous deployment" (Tiago: no reason for ALL CAPS)
- "This website is under" instead of "ssw.com.au" so it doesn't look
  like a self-link (Tiago)
- Absolute build date moved into a tooltip on "X ago" (Tiago)
- Replace Build # with linkable commit hash from COMMIT_HASH env, linked
  to the GitHub commit
- Breakpoint md -> lg on social/deployment/powered-by rows so iPad
  portrait stays stacked with full width (Tiago: iPad portrait still bad
  at md). Also lg:text-right on powered-by for consistency
- Drop now-unused versionDeployed/deploymentUrl consts

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 components/layout/nav/footer.tsx | 43 ++++++++++++++++++--------------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/components/layout/nav/footer.tsx b/components/layout/nav/footer.tsx
index 685423f33..2ad4486c0 100644
--- a/components/layout/nav/footer.tsx
+++ b/components/layout/nav/footer.tsx
@@ -5,8 +5,6 @@ import { GitHubButtonWrapper } from "@/components/GitHubButtonWrapper";
 import { pathPrefix } from "../../../site-config";
 
 const buildTimestamp = process.env.BUILD_TIMESTAMP ? parseInt(process.env.BUILD_TIMESTAMP) : Date.now() - 1000 * 60 * 30;
-const versionDeployed = process.env.VERSION_DEPLOYED || "dev";
-const deploymentUrl = process.env.DEPLOYMENT_URL || "#";
 const buildDate = process.env.BUILD_DATE;
 const commitHash = process.env.COMMIT_HASH;
 
@@ -35,9 +33,9 @@ export const Footer = () => {
       <footer className="text-center bg-[var(--footer-background)] text-[var(--footer-foreground)] py-6 md:py-4 lg:py-2 [&_a]:no-underline text-xs">
         <section className="main-container max-w-screen-xl">
           <div className="xl:mx-6">
-            <div className="mx-6 flex flex-col-reverse md:flex-row justify-between align-middle leading-6">
+            <div className="mx-6 flex flex-col-reverse lg:flex-row justify-between align-middle leading-6">
               <div className="py-2">&copy; 1990-{new Date().getFullYear()} SSW. All rights reserved.</div>
-              <div className="w-full md:w-3/4 md:text-right py-2 flex max-sm:flex-col items-center max-sm:justify-start justify-center md:justify-end">
+              <div className="w-full lg:w-3/4 lg:text-right py-2 flex max-sm:flex-col items-center max-sm:justify-start justify-center lg:justify-end">
                 <a
                   className="inline-block text-white hover:text-ssw-red visited:text-white leading-3 transition-all duration-300 ease-in-out hover:text-ssw-red max-sm:mb-3"
                   href="https://github.com/SSWConsulting/SSW.Rules/issues"
@@ -121,28 +119,35 @@ export const Footer = () => {
               </div>
             </div>
             <hr className="border-gray-800 my-2"></hr>
-            <div className="flex flex-col md:flex-row justify-between mx-6">
+            <div className="flex flex-col lg:flex-row justify-between mx-6">
               <div className="py-2">
-                ssw.com.au <FaHeart className="text-ssw-red inline" size={12} />{" "}
+                This website is under{" "}
                 <a
                   className="inline-block text-white hover:text-ssw-red visited:text-white leading-3 transition-all duration-300 ease-in-out hover:text-ssw-red"
                   href={`${pathPrefix}/rules-to-better-websites-deployment`}
                 >
-                  CONTINUOUS DEPLOYMENT
+                  continuous deployment
                 </a>
-                . Last deployed {getLastDeployTime()} ago
-                {buildDate && <span title={buildDate}> {moment(buildDate).format("D MMM YYYY [at] HH:mm UTC")}</span>} (Build #{" "}
-                <a
-                  className="inline-block text-white hover:text-ssw-red visited:text-white leading-3 transition-all duration-300 ease-in-out hover:text-ssw-red"
-                  href={deploymentUrl}
-                  target="_blank"
-                  rel="noopener noreferrer nofollow"
-                >
-                  {versionDeployed}
-                </a>
-                {commitHash && <span title={`Commit: ${commitHash}`}>-{commitHash}</span>})
+                . Last updated{" "}
+                <span title={buildDate ? moment(buildDate).format("D MMM YYYY [at] HH:mm UTC") : undefined}>
+                  {getLastDeployTime()} ago
+                </span>
+                {commitHash && (
+                  <>
+                    . Last commit{" "}
+                    <a
+                      className="inline-block text-white hover:text-ssw-red visited:text-white leading-3 transition-all duration-300 ease-in-out hover:text-ssw-red"
+                      href={`https://github.com/SSWConsulting/SSW.Rules/commit/${commitHash}`}
+                      target="_blank"
+                      rel="noopener noreferrer nofollow"
+                      title={`View commit ${commitHash}`}
+                    >
+                      {commitHash}
+                    </a>
+                  </>
+                )}
               </div>
-              <div className="md:text-right py-2">
+              <div className="lg:text-right py-2">
                 Powered by{" "}
                 <a
                   className="inline-block text-white hover:text-ssw-red visited:text-white leading-3 transition-all duration-300 ease-in-out hover:text-ssw-red"

From bab328d0ce84632c44417ba4f17a51682e74b44b Mon Sep 17 00:00:00 2001
From: 0xharkirat <sandhukirat23@gmail.com>
Date: Tue, 26 May 2026 12:57:46 +1000
Subject: [PATCH 3/8] Simplify footer affordances: drop continuous-deployment
 link, refine tooltips

Per @0xharkirat feedback - too many hoverable things on the same line.

- Drop the link wrapper on "continuous deployment" -> plain text. The
  original rule link (rules-to-better-websites-deployment) was invisible
  anyway (footer strips underline) and not worth the discoverability
  question.
- "X min ago" tooltip text: now reads "Last deployed D MMM YYYY at
  HH:mm UTC" instead of just the date - more self-explanatory on hover.
- Drop the title tooltip on the commit hash link - clicking goes
  straight to the commit; no extra tooltip needed.

Net: 2 hoverable bits per line (1 tooltip + 1 link) instead of 3.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 components/layout/nav/footer.tsx | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/components/layout/nav/footer.tsx b/components/layout/nav/footer.tsx
index 2ad4486c0..fbdfec50b 100644
--- a/components/layout/nav/footer.tsx
+++ b/components/layout/nav/footer.tsx
@@ -121,15 +121,8 @@ export const Footer = () => {
             <hr className="border-gray-800 my-2"></hr>
             <div className="flex flex-col lg:flex-row justify-between mx-6">
               <div className="py-2">
-                This website is under{" "}
-                <a
-                  className="inline-block text-white hover:text-ssw-red visited:text-white leading-3 transition-all duration-300 ease-in-out hover:text-ssw-red"
-                  href={`${pathPrefix}/rules-to-better-websites-deployment`}
-                >
-                  continuous deployment
-                </a>
-                . Last updated{" "}
-                <span title={buildDate ? moment(buildDate).format("D MMM YYYY [at] HH:mm UTC") : undefined}>
+                This website is under continuous deployment. Last updated{" "}
+                <span title={buildDate ? `Last deployed ${moment(buildDate).format("D MMM YYYY [at] HH:mm UTC")}` : undefined}>
                   {getLastDeployTime()} ago
                 </span>
                 {commitHash && (
@@ -140,7 +133,6 @@ export const Footer = () => {
                       href={`https://github.com/SSWConsulting/SSW.Rules/commit/${commitHash}`}
                       target="_blank"
                       rel="noopener noreferrer nofollow"
-                      title={`View commit ${commitHash}`}
                     >
                       {commitHash}
                     </a>

From f760969ca2fffb8dedb210df64e5f66ba06c1d4f Mon Sep 17 00:00:00 2001
From: 0xharkirat <sandhukirat23@gmail.com>
Date: Tue, 26 May 2026 16:01:19 +1000
Subject: [PATCH 4/8] Add RelativeTime client component with custom tooltip and
 UTC fix

- Extract "X min ago" into <RelativeTime> Client Component that ticks
  every 60s. Fixes the "stuck at 7 min ago" issue: the old span was
  rendered server-side and frozen in cached HTML.
- Replace native title="..." (invisible until ~1s hover, easy to miss,
  unscreenshottable) with a custom CSS tooltip via group-hover. White
  bubble on the dark footer, instant fade-in. Also adds cursor: help
  as a subtle affordance hint.
- Fix UTC bug: tooltip label said "UTC" but moment().format() rendered
  local time. Now uses moment(buildDate).utc().format(...). On Azure
  (UTC server) the bug was invisible; locally / on non-UTC servers it
  was off by the timezone offset.
- Plurals: "day(s)" / "hour(s)" -> "day"/"days", "hour"/"hours".
- Remove the now-unused getLastDeployTime() helper and moment import
  from footer.tsx (moved into RelativeTime).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 components/layout/nav/footer.tsx        | 22 +---------
 components/layout/nav/relative-time.tsx | 56 +++++++++++++++++++++++++
 2 files changed, 58 insertions(+), 20 deletions(-)
 create mode 100644 components/layout/nav/relative-time.tsx

diff --git a/components/layout/nav/footer.tsx b/components/layout/nav/footer.tsx
index fbdfec50b..8aa31c77b 100644
--- a/components/layout/nav/footer.tsx
+++ b/components/layout/nav/footer.tsx
@@ -1,8 +1,8 @@
-import moment from "moment";
 import React from "react";
 import { FaFacebook, FaHeart, FaInstagram, FaLinkedin, FaTiktok, FaXTwitter, FaYoutube } from "react-icons/fa6";
 import { GitHubButtonWrapper } from "@/components/GitHubButtonWrapper";
 import { pathPrefix } from "../../../site-config";
+import { RelativeTime } from "./relative-time";
 
 const buildTimestamp = process.env.BUILD_TIMESTAMP ? parseInt(process.env.BUILD_TIMESTAMP) : Date.now() - 1000 * 60 * 30;
 const buildDate = process.env.BUILD_DATE;
@@ -122,9 +122,7 @@ export const Footer = () => {
             <div className="flex flex-col lg:flex-row justify-between mx-6">
               <div className="py-2">
                 This website is under continuous deployment. Last updated{" "}
-                <span title={buildDate ? `Last deployed ${moment(buildDate).format("D MMM YYYY [at] HH:mm UTC")}` : undefined}>
-                  {getLastDeployTime()} ago
-                </span>
+                <RelativeTime buildTimestamp={buildTimestamp} buildDate={buildDate} />
                 {commitHash && (
                   <>
                     . Last commit{" "}
@@ -163,19 +161,3 @@ export const Footer = () => {
     </>
   );
 };
-
-const getLastDeployTime = () => {
-  const lastDeployDuration = moment.duration(Date.now() - buildTimestamp);
-  let delta = Math.abs(lastDeployDuration.asMilliseconds()) / 1000;
-
-  const days = Math.floor(delta / 86400);
-  delta -= days * 86400;
-
-  var hours = Math.floor(delta / 3600) % 24;
-  delta -= hours * 3600;
-
-  var minutes = Math.floor(delta / 60) % 60;
-  delta -= minutes * 60;
-
-  return days !== 0 ? `${days} day(s)` : hours !== 0 ? `${hours} hour(s)` : minutes > 1 ? `${minutes} min` : "1 min";
-};
diff --git a/components/layout/nav/relative-time.tsx b/components/layout/nav/relative-time.tsx
new file mode 100644
index 000000000..f5e0bacc2
--- /dev/null
+++ b/components/layout/nav/relative-time.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import moment from "moment";
+
+interface Props {
+  buildTimestamp: number;
+  buildDate?: string;
+}
+
+function formatRelative(deltaMs: number): string {
+  const delta = Math.abs(deltaMs) / 1000;
+  const days = Math.floor(delta / 86400);
+  const hours = Math.floor((delta % 86400) / 3600);
+  const minutes = Math.floor((delta % 3600) / 60);
+  if (days > 0) return `${days} day${days > 1 ? "s" : ""} ago`;
+  if (hours > 0) return `${hours} hour${hours > 1 ? "s" : ""} ago`;
+  if (minutes > 1) return `${minutes} min ago`;
+  return "1 min ago";
+}
+
+/**
+ * Renders "X min/hour/day(s) ago" and ticks every 60s so the relative time
+ * stays accurate even when the page HTML is cached. On hover it shows a
+ * custom tooltip with the exact build date (UTC). Client-only — server
+ * initially renders with delta=0 ("1 min ago") and the client immediately
+ * recomputes on mount to avoid hydration mismatch.
+ */
+export function RelativeTime({ buildTimestamp, buildDate }: Props) {
+  const [now, setNow] = useState<number>(buildTimestamp);
+
+  useEffect(() => {
+    setNow(Date.now());
+    const id = setInterval(() => setNow(Date.now()), 60_000);
+    return () => clearInterval(id);
+  }, []);
+
+  const tooltip = buildDate
+    ? `Last deployed ${moment(buildDate).utc().format("D MMM YYYY [at] HH:mm UTC")}`
+    : undefined;
+
+  return (
+    <span className="relative inline-block group cursor-help">
+      {formatRelative(now - buildTimestamp)}
+      {tooltip && (
+        <span
+          role="tooltip"
+          aria-hidden="true"
+          className="absolute left-1/2 -translate-x-1/2 bottom-full mb-1 px-2 py-1 bg-white text-gray-900 text-[11px] leading-none rounded whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-150 shadow-md z-10"
+        >
+          {tooltip}
+        </span>
+      )}
+    </span>
+  );
+}

From c8f8cb849dced196bb1cc46a14b1058b9332a731 Mon Sep 17 00:00:00 2001
From: 0xharkirat <sandhukirat23@gmail.com>
Date: Tue, 26 May 2026 16:13:27 +1000
Subject: [PATCH 5/8] Link 'continuous deployment' to the SSW rule with visible
 underline

Previously plain text per the simplification pass; restoring as a real
link to https://www.ssw.com.au/rules/rules-to-better-websites-deployment
since that's a useful destination (the rule explaining the practice).
Inline style textDecoration: underline overrides the footer's
[&_a]:no-underline so it actually looks like a link.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 components/layout/nav/footer.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/components/layout/nav/footer.tsx b/components/layout/nav/footer.tsx
index 8aa31c77b..f24b5b852 100644
--- a/components/layout/nav/footer.tsx
+++ b/components/layout/nav/footer.tsx
@@ -121,7 +121,17 @@ export const Footer = () => {
             <hr className="border-gray-800 my-2"></hr>
             <div className="flex flex-col lg:flex-row justify-between mx-6">
               <div className="py-2">
-                This website is under continuous deployment. Last updated{" "}
+                This website is under{" "}
+                <a
+                  className="inline-block text-white hover:text-ssw-red visited:text-white leading-3 transition-all duration-300 ease-in-out hover:text-ssw-red"
+                  style={{ textDecoration: "underline" }}
+                  href="https://www.ssw.com.au/rules/rules-to-better-websites-deployment"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  continuous deployment
+                </a>
+                . Last updated{" "}
                 <RelativeTime buildTimestamp={buildTimestamp} buildDate={buildDate} />
                 {commitHash && (
                   <>

From 8c486ef3b38e2d26acddb4ad1e0c9cb5da65eafa Mon Sep 17 00:00:00 2001
From: 0xharkirat <sandhukirat23@gmail.com>
Date: Tue, 26 May 2026 16:26:51 +1000
Subject: [PATCH 6/8] Consistent hover style on footer hoverables: white ->
 red, no underline

Three hoverable items on the deployment line ("continuous deployment"
link, "X min ago" tooltip trigger, commit hash link) now use the same
hover pattern: text-white by default, hover:text-ssw-red, no underline.

- Drop the inline textDecoration: underline on the continuous-
  deployment link (added in the last commit) - was the odd one out.
- RelativeTime span gets text-white hover:text-ssw-red transition
  classes so the tooltip trigger gets the same color-change affordance
  on hover instead of being indistinguishable from prose.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 components/layout/nav/footer.tsx        | 1 -
 components/layout/nav/relative-time.tsx | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/layout/nav/footer.tsx b/components/layout/nav/footer.tsx
index f24b5b852..821ede44d 100644
--- a/components/layout/nav/footer.tsx
+++ b/components/layout/nav/footer.tsx
@@ -124,7 +124,6 @@ export const Footer = () => {
                 This website is under{" "}
                 <a
                   className="inline-block text-white hover:text-ssw-red visited:text-white leading-3 transition-all duration-300 ease-in-out hover:text-ssw-red"
-                  style={{ textDecoration: "underline" }}
                   href="https://www.ssw.com.au/rules/rules-to-better-websites-deployment"
                   target="_blank"
                   rel="noopener noreferrer"
diff --git a/components/layout/nav/relative-time.tsx b/components/layout/nav/relative-time.tsx
index f5e0bacc2..929d52636 100644
--- a/components/layout/nav/relative-time.tsx
+++ b/components/layout/nav/relative-time.tsx
@@ -40,7 +40,7 @@ export function RelativeTime({ buildTimestamp, buildDate }: Props) {
     : undefined;
 
   return (
-    <span className="relative inline-block group cursor-help">
+    <span className="relative inline-block group cursor-help text-white hover:text-ssw-red transition-all duration-300 ease-in-out">
       {formatRelative(now - buildTimestamp)}
       {tooltip && (
         <span

From acc1586c81451c178d397faa0e543fcf5bc0c99e Mon Sep 17 00:00:00 2001
From: 0xharkirat <65155920+0xharkirat@users.noreply.github.com>
Date: Fri, 29 May 2026 14:43:00 +1000
Subject: [PATCH 7/8] Apply Copilot review feedback + a11y / bundle polish

Addresses the bot's 6 inline comments plus two small follow-ups:

- parseInt(BUILD_TIMESTAMP, 10): explicit radix, matches codebase style.
- Drop moment from RelativeTime; format the UTC tooltip with native
  Date (Number.padStart for HH:mm). Saves shipping moment to the
  browser for one tooltip.
- Accessibility:
  * Wrapper span is tabIndex=0 when a tooltip exists so keyboard users
    can reveal it via focus.
  * Tooltip span is linked via aria-describedby (useId for an SSR-
    stable id) so screen readers announce it after the visible time.
  * Drop aria-hidden on the tooltip (was blocking AT access).
  * focus-visible:text-ssw-red + group-focus-visible:opacity-100 so
    the same color change + tooltip reveal happens on keyboard focus.
- formatUtcDate: guard against an invalid BUILD_DATE; bail to no
  tooltip instead of rendering "Last deployed NaN undefined NaN ...".
- continuous-deployment link rel="nofollow" added for consistency with
  every other external link in the footer.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 components/layout/nav/footer.tsx        |  4 +-
 components/layout/nav/relative-time.tsx | 57 +++++++++++++++++++------
 2 files changed, 47 insertions(+), 14 deletions(-)

diff --git a/components/layout/nav/footer.tsx b/components/layout/nav/footer.tsx
index 821ede44d..5b30d2723 100644
--- a/components/layout/nav/footer.tsx
+++ b/components/layout/nav/footer.tsx
@@ -4,7 +4,7 @@ import { GitHubButtonWrapper } from "@/components/GitHubButtonWrapper";
 import { pathPrefix } from "../../../site-config";
 import { RelativeTime } from "./relative-time";
 
-const buildTimestamp = process.env.BUILD_TIMESTAMP ? parseInt(process.env.BUILD_TIMESTAMP) : Date.now() - 1000 * 60 * 30;
+const buildTimestamp = process.env.BUILD_TIMESTAMP ? parseInt(process.env.BUILD_TIMESTAMP, 10) : Date.now() - 1000 * 60 * 30;
 const buildDate = process.env.BUILD_DATE;
 const commitHash = process.env.COMMIT_HASH;
 
@@ -126,7 +126,7 @@ export const Footer = () => {
                   className="inline-block text-white hover:text-ssw-red visited:text-white leading-3 transition-all duration-300 ease-in-out hover:text-ssw-red"
                   href="https://www.ssw.com.au/rules/rules-to-better-websites-deployment"
                   target="_blank"
-                  rel="noopener noreferrer"
+                  rel="noopener noreferrer nofollow"
                 >
                   continuous deployment
                 </a>
diff --git a/components/layout/nav/relative-time.tsx b/components/layout/nav/relative-time.tsx
index 929d52636..baecc248f 100644
--- a/components/layout/nav/relative-time.tsx
+++ b/components/layout/nav/relative-time.tsx
@@ -1,13 +1,27 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import moment from "moment";
+import { useEffect, useId, useState } from "react";
 
 interface Props {
   buildTimestamp: number;
   buildDate?: string;
 }
 
+const MONTHS = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+];
+
 function formatRelative(deltaMs: number): string {
   const delta = Math.abs(deltaMs) / 1000;
   const days = Math.floor(delta / 86400);
@@ -19,15 +33,31 @@ function formatRelative(deltaMs: number): string {
   return "1 min ago";
 }
 
+function formatUtcDate(iso: string): string | undefined {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return undefined;
+  const day = d.getUTCDate();
+  const month = MONTHS[d.getUTCMonth()];
+  const year = d.getUTCFullYear();
+  const hh = String(d.getUTCHours()).padStart(2, "0");
+  const mm = String(d.getUTCMinutes()).padStart(2, "0");
+  return `${day} ${month} ${year} at ${hh}:${mm} UTC`;
+}
+
 /**
  * Renders "X min/hour/day(s) ago" and ticks every 60s so the relative time
- * stays accurate even when the page HTML is cached. On hover it shows a
- * custom tooltip with the exact build date (UTC). Client-only — server
- * initially renders with delta=0 ("1 min ago") and the client immediately
- * recomputes on mount to avoid hydration mismatch.
+ * stays accurate even when the page HTML is cached. On hover or keyboard
+ * focus it shows a custom tooltip with the exact build date (UTC). Client-
+ * only — server initially renders with delta=0 ("1 min ago") and the
+ * client immediately recomputes on mount to avoid hydration mismatch.
+ *
+ * Accessibility: the wrapper is focusable when a tooltip is present so
+ * keyboard users can reveal it, and the tooltip is linked via
+ * `aria-describedby` so screen readers announce it after the visible time.
  */
 export function RelativeTime({ buildTimestamp, buildDate }: Props) {
   const [now, setNow] = useState<number>(buildTimestamp);
+  const tooltipId = useId();
 
   useEffect(() => {
     setNow(Date.now());
@@ -35,18 +65,21 @@ export function RelativeTime({ buildTimestamp, buildDate }: Props) {
     return () => clearInterval(id);
   }, []);
 
-  const tooltip = buildDate
-    ? `Last deployed ${moment(buildDate).utc().format("D MMM YYYY [at] HH:mm UTC")}`
-    : undefined;
+  const formatted = buildDate ? formatUtcDate(buildDate) : undefined;
+  const tooltip = formatted ? `Last deployed ${formatted}` : undefined;
 
   return (
-    <span className="relative inline-block group cursor-help text-white hover:text-ssw-red transition-all duration-300 ease-in-out">
+    <span
+      className="relative inline-block group cursor-help text-white hover:text-ssw-red focus-visible:text-ssw-red transition-all duration-300 ease-in-out"
+      tabIndex={tooltip ? 0 : undefined}
+      aria-describedby={tooltip ? tooltipId : undefined}
+    >
       {formatRelative(now - buildTimestamp)}
       {tooltip && (
         <span
+          id={tooltipId}
           role="tooltip"
-          aria-hidden="true"
-          className="absolute left-1/2 -translate-x-1/2 bottom-full mb-1 px-2 py-1 bg-white text-gray-900 text-[11px] leading-none rounded whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-150 shadow-md z-10"
+          className="absolute left-1/2 -translate-x-1/2 bottom-full mb-1 px-2 py-1 bg-white text-gray-900 text-[11px] leading-none rounded whitespace-nowrap opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100 pointer-events-none transition-opacity duration-150 shadow-md z-10"
         >
           {tooltip}
         </span>

From 6bf166468ebcbdf44e6fee5677cfd339b6402988 Mon Sep 17 00:00:00 2001
From: 0xharkirat <65155920+0xharkirat@users.noreply.github.com>
Date: Fri, 29 May 2026 15:31:32 +1000
Subject: [PATCH 8/8] Apply Copilot follow-ups: pathPrefix, Last updated,
 conditional cursor, native title

- footer.tsx: switch the continuous-deployment link from a hardcoded
  https://www.ssw.com.au/... URL back to ${pathPrefix}/... so PR
  previews and non-prod hosts stay within their own site instead of
  jumping to prod (Copilot footer.tsx:129). Also drop the now-pointless
  target="_blank" and rel="..." since the link is internal again.
- relative-time.tsx: tooltip prefix "Last deployed" -> "Last updated"
  to match the visible "Last updated X ago" copy (Copilot
  relative-time.tsx:70).
- relative-time.tsx: apply cursor-help only when a tooltip is available,
  so the UI doesn't suggest extra info when there is none, e.g. when
  BUILD_DATE is missing/invalid (Copilot relative-time.tsx:75).
- relative-time.tsx: add title={tooltip} on the wrapper as a native a11y
  fallback for older screen readers / non-AT contexts, alongside the
  existing aria-describedby pointing at the custom CSS bubble (Copilot
  relative-time.tsx:54).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 components/layout/nav/footer.tsx        | 4 +---
 components/layout/nav/relative-time.tsx | 5 +++--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/components/layout/nav/footer.tsx b/components/layout/nav/footer.tsx
index 5b30d2723..67e9038a0 100644
--- a/components/layout/nav/footer.tsx
+++ b/components/layout/nav/footer.tsx
@@ -124,9 +124,7 @@ export const Footer = () => {
                 This website is under{" "}
                 <a
                   className="inline-block text-white hover:text-ssw-red visited:text-white leading-3 transition-all duration-300 ease-in-out hover:text-ssw-red"
-                  href="https://www.ssw.com.au/rules/rules-to-better-websites-deployment"
-                  target="_blank"
-                  rel="noopener noreferrer nofollow"
+                  href={`${pathPrefix}/rules-to-better-websites-deployment`}
                 >
                   continuous deployment
                 </a>
diff --git a/components/layout/nav/relative-time.tsx b/components/layout/nav/relative-time.tsx
index baecc248f..bc5c235b4 100644
--- a/components/layout/nav/relative-time.tsx
+++ b/components/layout/nav/relative-time.tsx
@@ -66,13 +66,14 @@ export function RelativeTime({ buildTimestamp, buildDate }: Props) {
   }, []);
 
   const formatted = buildDate ? formatUtcDate(buildDate) : undefined;
-  const tooltip = formatted ? `Last deployed ${formatted}` : undefined;
+  const tooltip = formatted ? `Last updated ${formatted}` : undefined;
 
   return (
     <span
-      className="relative inline-block group cursor-help text-white hover:text-ssw-red focus-visible:text-ssw-red transition-all duration-300 ease-in-out"
+      className={`relative inline-block group text-white hover:text-ssw-red focus-visible:text-ssw-red transition-all duration-300 ease-in-out${tooltip ? " cursor-help" : ""}`}
       tabIndex={tooltip ? 0 : undefined}
       aria-describedby={tooltip ? tooltipId : undefined}
+      title={tooltip}
     >
       {formatRelative(now - buildTimestamp)}
       {tooltip && (