From 5e7774795b1c296310c2b2e20ec8f27233b0e023 Mon Sep 17 00:00:00 2001
From: Joel Brock <joelbrock@gmail.com>
Date: Thu, 21 May 2026 13:46:51 -0700
Subject: [PATCH] Style anchors with underline + leaf color for visibility

Body-copy mailto links ("Chris @ FCI") and the chrome nav link
were rendering as plain text, hard to spot. Added an @layer base
rule that gives every `a[href]` a 1px underline at 2px offset and
the FCI Seed Grant green, with a subtle hover thicken. Tailwind
utilities still win on a per-element basis (the nav link keeps its
`text-ink-soft` color, the brand-image wrapper opts out via
`no-underline`).
---
 app/globals.css           | 18 ++++++++++++++++++
 components/SiteChrome.tsx |  2 +-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/app/globals.css b/app/globals.css
index acebabe..e54baff 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -112,6 +112,24 @@ input, select, textarea, button {
   border-radius: 4px;
 }
 
+/* Anchor defaults. Body links (in copy and chrome) read as interactive
+ * affordances: FCI leaf color + a 1px underline with a small offset.
+ * Lives in @layer base so Tailwind utility classes (text-*, no-underline)
+ * still win on elements that opt out individually. */
+@layer base {
+  a[href] {
+    color: var(--color-leaf-700);
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 2px;
+    transition: color 150ms ease-out, text-decoration-thickness 150ms ease-out;
+  }
+  a[href]:hover {
+    color: var(--color-leaf-800);
+    text-decoration-thickness: 1.5px;
+  }
+}
+
 /* Date input chevron styled to match */
 input[type="date"]::-webkit-calendar-picker-indicator {
   opacity: 0.5;
diff --git a/components/SiteChrome.tsx b/components/SiteChrome.tsx
index 209b63a..d9d22f5 100644
--- a/components/SiteChrome.tsx
+++ b/components/SiteChrome.tsx
@@ -7,7 +7,7 @@ export function SiteHeader() {
       <div className="mx-auto flex max-w-3xl items-center justify-between px-4 py-5 sm:px-6">
         <Link
           href="https://fci.coop"
-          className="group flex items-center gap-4 focus:outline-none"
+          className="group flex items-center gap-4 text-ink no-underline focus:outline-none"
           aria-label="Food Co-op Initiative — fci.coop"
         >
           <Image