From e99bb420cc9f5e9c021f478c8d84bd24fc8c2bdb Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 10 Jul 2026 00:34:11 +0000
Subject: [PATCH 1/3] Fix button text/background contrast across all themes

Introduces semantic --on-accent / --on-accent-orange CSS tokens (defined
per-theme in globals.css, exposed as Tailwind's text-on-accent /
text-on-accent-orange) and uses them everywhere a button/link previously
hardcoded text-white on top of an accent-colored background.

--accent is a light-ish blue in dark theme and bright orange in Xanga
theme, so white text on it only ever had real contrast in light theme
(~5.4:1); in dark/Xanga it measured ~2.6-2.8:1, well under the 4.5:1 (text)
/ 3:1 (large text/icons) WCAG AA thresholds. --accent-orange is bright in
every theme, so it always needed dark text, not white.

Fixed call sites: mobile nav active/hover links, the 404 'Go Home' link,
Back to Top, Share button, 'Back to Blog' link, the skip-to-content link,
the Xanga sidebar restore icon, the Xanga sidebar layout/nav applets, the
gradient CTA buttons (Get in touch / Request VIP Access), and the Medium
'M' + contact-page email icon badges.

Also fixes several Xanga/dark-mode-only CSS overrides that were
independently breaking these same buttons by permanently pinning their
text or background color with !important, even during :hover/:focus,
regardless of the color fix above:
- Xanga's blanket header-nav link-color rule only ever matched links
  inside <nav>, but the mobile nav menu is a sibling of <nav>, not nested
  inside it - broadened the on-accent override to any bg-accent link.
- Xanga's 'card styling' rule matches any element with a rounded-lg/card
  class, which incidentally included several buttons (Share, Back to
  Blog) - excluded anything that also carries a bg-accent class.
- Xanga's 'keep header stable' bg-bg-secondary !important rule was also
  catching those same buttons' resting-state class, permanently pinning
  their background so hover:bg-accent could never visually apply -
  excluded elements with a hover:bg-accent(-orange) class.
- Dark mode's enhanced-contrast override for text-text-secondary had the
  same pinning problem for the inactive mobile nav links' hover state -
  added an analogous hover/focus exception.

Verified with a scripted contrast checker (WCAG relative-luminance ratio)
across light/dark/xanga themes and 9 different buttons/links; all now
meet at least the AA large-text/UI threshold (3:1), most well above 4.5:1.

Co-authored-by: Thomas Bohn <bohn.tl@gmail.com>
---
 app/blog/[slug]/page.tsx                      |  2 +-
 app/contact/page.tsx                          |  2 +-
 app/globals.css                               | 92 +++++++++++++++++--
 app/layout.tsx                                |  2 +-
 app/not-found.tsx                             |  2 +-
 app/page.tsx                                  |  2 +-
 components/BackToTop.tsx                      |  2 +-
 components/Header.tsx                         | 14 +--
 components/blog/ShareButton.tsx               |  2 +-
 components/xanga/applets/NavigationApplet.tsx |  2 +-
 .../xanga/applets/SidebarLayoutApplet.tsx     |  4 +-
 tailwind.config.ts                            |  2 +
 12 files changed, 104 insertions(+), 24 deletions(-)

diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx
index 25e5521..a67a406 100644
--- a/app/blog/[slug]/page.tsx
+++ b/app/blog/[slug]/page.tsx
@@ -43,7 +43,7 @@ export default async function BlogPost({ params }: { params: Promise<{ slug: str
             <div className="flex items-center gap-3">
               <Link
                 href="/blog/"
-                className="px-4 py-2 bg-bg-secondary border border-border rounded-lg hover:bg-accent hover:text-white hover:border-accent transition-colors text-sm font-semibold"
+                className="px-4 py-2 bg-bg-secondary border border-border rounded-lg hover:bg-accent hover:text-on-accent hover:border-accent transition-colors text-sm font-semibold"
               >
                 ← Back to Blog
               </Link>
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
index c65d9ee..5e41c6c 100644
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@@ -47,7 +47,7 @@ export default function Contact() {
             <div className="glass-card shine-effect rounded-xl p-6">
               <div className="flex items-center gap-4 mb-4">
                 <div className="w-12 h-12 bg-gradient-to-br from-accent to-accent-hover rounded-xl flex items-center justify-center icon-bounce shadow-lg">
-                  <FaEnvelope className="w-6 h-6 text-white" />
+                  <FaEnvelope className="w-6 h-6 text-on-accent" />
                 </div>
                 <h2 className="text-2xl font-semibold text-text-primary">Email</h2>
               </div>
diff --git a/app/globals.css b/app/globals.css
index caf3778..c7b631b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -13,6 +13,13 @@
   --accent-hover: #0d5a88; /* Darker blue for hover */
   --accent-orange: #fc7d0b; /* Bright Orange */
   --accent-orange-hover: #c85200; /* Dark Orange/Brown for hover */
+  /* Text/icon color to use ON TOP OF an --accent or --accent-orange
+     background. --accent is dark enough here for white to read clearly;
+     dark and Xanga themes use a lighter --accent, so they need dark text
+     instead (see overrides below). --accent-orange is bright in every
+     theme, so dark text is always the right call for it. */
+  --on-accent: #ffffff;
+  --on-accent-orange: #1a1a1a;
   --border: #c8d0d9; /* Very Light Gray from palette */
   --link: #1170aa; /* Dark Blue for links */
   --link-hover: #fc7d0b; /* Bright Orange for link hover */
@@ -35,6 +42,10 @@
   --accent-hover: #1170aa; /* Dark Blue */
   --accent-orange: #fc7d0b; /* Bright Orange */
   --accent-orange-hover: #ffbc79; /* Light Peach for hover */
+  /* --accent is a light medium-blue here, so white text on it fails
+     contrast - use dark text instead. */
+  --on-accent: #0b1220;
+  --on-accent-orange: #1a1a1a;
   --border: #57606c; /* Dark Gray from palette */
   --link: #5fa2ce; /* Medium Blue for links */
   --link-hover: #fc7d0b; /* Bright Orange for link hover */
@@ -59,6 +70,10 @@
   --accent-light: #ffbc79; /* Tableau Light Peach */
   --accent-navy: #1170aa; /* Tableau Dark Blue */
   --accent-navy-light: #5fa2ce; /* Tableau Medium Blue */
+  /* --accent is bright orange here (same as --accent-orange), so it
+     needs dark text too. */
+  --on-accent: #0a0a0a;
+  --on-accent-orange: #1a1a1a;
   --border: #fc7d0b; /* Tableau Bright Orange */
   --border-navy: #1170aa; /* Tableau Dark Blue */
   --link: #5fa2ce; /* Tableau Medium Blue */
@@ -162,9 +177,13 @@ html[data-theme="xanga"] body .xanga-shell button:hover {
   border-color: var(--accent-navy) !important;
 }
 
-/* Keep modern header stable: only restyle these inside Xanga shell */
-html[data-theme="xanga"] body .xanga-shell .bg-bg-secondary,
-html[data-theme="xanga"] body .xanga-shell [class*="bg-bg-secondary"] {
+/* Keep modern header stable: only restyle these inside Xanga shell.
+   Excludes elements that switch their own background to --accent(-orange)
+   on hover/focus (e.g. the Share button, "Back to Blog" link) - otherwise
+   this pins their resting background !important, and hover:bg-accent can
+   never actually take effect. */
+html[data-theme="xanga"] body .xanga-shell .bg-bg-secondary:not([class*="hover:bg-accent"]),
+html[data-theme="xanga"] body .xanga-shell [class*="bg-bg-secondary"]:not([class*="hover:bg-accent"]) {
   background-color: var(--bg-secondary) !important;
 }
 
@@ -232,6 +251,42 @@ html[data-theme="xanga"] body header nav a:focus-visible * {
   color: var(--accent-orange) !important;
 }
 
+/* Any link with its own bg-accent background (active mobile-nav items, the
+   404 page's "Go Home" button, etc.) needs matching --on-accent text - the
+   blanket link-color override above (and, in Xanga, --accent being the same
+   bright orange as --accent-orange) would otherwise put low-contrast text
+   on top of that background. This is deliberately not scoped to "header"
+   only: the mobile nav menu is a sibling of <nav> rather than nested inside
+   it, and the same bg-accent-on-a-link pattern shows up outside the header
+   too. */
+html[data-theme="xanga"] body a[class*="bg-accent"],
+html[data-theme="xanga"] body a[class*="bg-accent"]:hover,
+html[data-theme="xanga"] body a[class*="bg-accent"]:focus-visible {
+  color: var(--on-accent) !important;
+}
+html[data-theme="xanga"] body a[class*="bg-accent"] *,
+html[data-theme="xanga"] body a[class*="bg-accent"]:hover *,
+html[data-theme="xanga"] body a[class*="bg-accent"]:focus-visible * {
+  color: var(--on-accent) !important;
+}
+
+/* Same problem outside the header: several buttons keep a permanent
+   text-accent/text-text-primary/text-text-secondary class for their resting
+   state, then switch their own background to --accent or --accent-orange on
+   hover/focus (e.g. Back to Top, the sidebar restore icon, the mobile nav's
+   inactive links, the Xanga sidebar nav applet). The blanket text-color
+   overrides above apply unconditionally, so without this they'd pin the
+   icon/text color even once the background behind it has also become
+   --accent, making it unreadable. */
+html[data-theme="xanga"] body [class*="hover:bg-accent-orange"]:hover,
+html[data-theme="xanga"] body [class*="hover:bg-accent-orange"]:focus-visible {
+  color: var(--on-accent-orange) !important;
+}
+html[data-theme="xanga"] body [class*="hover:bg-accent"]:not([class*="hover:bg-accent-orange"]):hover,
+html[data-theme="xanga"] body [class*="hover:bg-accent"]:not([class*="hover:bg-accent-orange"]):focus-visible {
+  color: var(--on-accent) !important;
+}
+
 /* Light and dark: same nav hover (text color change, no box) */
 html[data-theme="light"] body header nav a:hover,
 html[data-theme="light"] body header nav a:focus-visible,
@@ -257,9 +312,14 @@ html[data-theme="xanga"] body footer {
   border-top: 1px solid var(--border-navy) !important;
 }
 
-/* Card styling for Xanga mode */
-html[data-theme="xanga"] body [class*="rounded-lg"],
-html[data-theme="xanga"] body [class*="card"],
+/* Card styling for Xanga mode. Excludes anything with a bg-accent(-orange)
+   class (buttons/links/CTAs that already carry their own background
+   intent, e.g. the Share button or "Back to Blog" link) - otherwise this
+   forces a card-style background/border/padding onto them and, worse,
+   !important-pins their background so hover:bg-accent can never actually
+   show. */
+html[data-theme="xanga"] body [class*="rounded-lg"]:not([class*="bg-accent"]),
+html[data-theme="xanga"] body [class*="card"]:not([class*="bg-accent"]),
 html[data-theme="xanga"] body article,
 html[data-theme="xanga"] body section {
   background-color: var(--bg-secondary) !important;
@@ -625,7 +685,10 @@ html[data-theme="xanga"] body ::-webkit-scrollbar-thumb:hover {
   border-radius: 12px;
   border: none;
   background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-hover) 100%);
-  color: white;
+  /* !important: in Xanga mode, the generic "body a" link-color rule has
+     higher selector specificity than this class alone and would otherwise
+     win even without !important on its side. */
+  color: var(--on-accent-orange) !important;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
@@ -640,6 +703,7 @@ html[data-theme="xanga"] body ::-webkit-scrollbar-thumb:hover {
 
 .gradient-btn-blue {
   background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
+  color: var(--on-accent) !important;
   box-shadow: 0 4px 20px rgba(17, 112, 170, 0.4);
 }
 
@@ -752,6 +816,20 @@ html[data-theme="xanga"] body ::-webkit-scrollbar-thumb:hover {
   color: #a8b4c4 !important;
 }
 
+/* Same escape hatch as Xanga above: elements that keep a permanent
+   text-text-secondary class but switch their own background to --accent or
+   --accent-orange on hover/focus (e.g. inactive mobile-nav links) need this
+   dark-mode contrast override to step aside once that happens, or the text
+   stays a light blue-gray on top of a bright orange hover background. */
+[data-theme="dark"] [class*="hover:bg-accent-orange"]:hover,
+[data-theme="dark"] [class*="hover:bg-accent-orange"]:focus-visible {
+  color: var(--on-accent-orange) !important;
+}
+[data-theme="dark"] [class*="hover:bg-accent"]:not([class*="hover:bg-accent-orange"]):hover,
+[data-theme="dark"] [class*="hover:bg-accent"]:not([class*="hover:bg-accent-orange"]):focus-visible {
+  color: var(--on-accent) !important;
+}
+
 /* Subtle Section Background */
 .section-highlight {
   position: relative;
diff --git a/app/layout.tsx b/app/layout.tsx
index d5b915b..d33a719 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -96,7 +96,7 @@ export default function RootLayout({
       <body className={`${openSans.className} ${openSans.variable}`} suppressHydrationWarning>
         <a
           href="#main-content"
-          className="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-[100] focus:rounded focus:bg-accent focus:px-4 focus:py-2 focus:text-white focus:shadow-lg"
+          className="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-[100] focus:rounded focus:bg-accent focus:px-4 focus:py-2 focus:text-on-accent focus:shadow-lg"
         >
           Skip to content
         </a>
diff --git a/app/not-found.tsx b/app/not-found.tsx
index b729998..7ae8f7b 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -11,7 +11,7 @@ export default function NotFound() {
         </p>
         <Link
           href="/"
-          className="inline-block px-6 py-3 bg-accent text-white rounded-lg hover:bg-accent-hover transition-colors"
+          className="inline-block px-6 py-3 bg-accent text-on-accent rounded-lg hover:bg-accent-hover transition-colors"
         >
           Go Home
         </Link>
diff --git a/app/page.tsx b/app/page.tsx
index 91559fa..d40efa1 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -99,7 +99,7 @@ export default function Home() {
             {/* Medium Card */}
             <div className="glass-card shine-effect rounded-xl p-8">
               <div className="flex items-center gap-4 mb-4">
-                <div className="w-14 h-14 bg-gradient-to-br from-accent-orange to-accent-orange-hover rounded-xl flex items-center justify-center text-white font-bold text-xl icon-bounce shadow-lg">
+                <div className="w-14 h-14 bg-gradient-to-br from-accent-orange to-accent-orange-hover rounded-xl flex items-center justify-center text-on-accent-orange font-bold text-xl icon-bounce shadow-lg">
                   M
                 </div>
                 <h3 className="text-3xl font-bold text-text-primary">Medium</h3>
diff --git a/components/BackToTop.tsx b/components/BackToTop.tsx
index 814975f..c4d0956 100644
--- a/components/BackToTop.tsx
+++ b/components/BackToTop.tsx
@@ -28,7 +28,7 @@ export function BackToTop() {
       onClick={scrollToTop}
       aria-label="Back to top"
       title="Back to top"
-      className={`fixed bottom-6 right-6 z-40 flex h-11 w-11 items-center justify-center rounded-full border border-border bg-bg-primary text-accent shadow-lg transition-all duration-300 hover:bg-accent hover:text-white hover:border-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${
+            className={`fixed bottom-6 right-6 z-40 flex h-11 w-11 items-center justify-center rounded-full border border-border bg-bg-primary text-accent shadow-lg transition-all duration-300 hover:bg-accent hover:text-on-accent hover:border-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${
         visible
           ? 'opacity-100 translate-y-0 pointer-events-auto'
           : 'opacity-0 translate-y-4 pointer-events-none'
diff --git a/components/Header.tsx b/components/Header.tsx
index 308ee4d..9b33c32 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -324,7 +324,7 @@ export function Header() {
             {showCollapsedIcon && layout && (
               <button
                 onClick={() => layout.restoreSidebar()}
-                className="relative group w-9 h-9 flex items-center justify-center rounded border border-accent/40 bg-accent/10 text-accent transition-colors hover:bg-accent hover:text-white"
+                className="relative group w-9 h-9 flex items-center justify-center rounded border border-accent/40 bg-accent/10 text-accent transition-colors hover:bg-accent hover:text-on-accent"
                 aria-label={`Restore ${layout.lastVisibleSide} sidebar`}
                 title="Restore sidebar"
               >
@@ -370,8 +370,8 @@ export function Header() {
                       href={item.href}
                       className={`px-4 py-1.5 rounded text-sm transition-colors flex-1 min-w-[70px] text-center ${
                         isActive
-                          ? 'bg-accent text-white'
-                          : 'bg-bg-secondary text-text-secondary hover:bg-accent-orange hover:text-white'
+                          ? 'bg-accent text-on-accent'
+                          : 'bg-bg-secondary text-text-secondary hover:bg-accent-orange hover:text-on-accent-orange'
                       }`}
                     >
                       {item.label}
@@ -398,8 +398,8 @@ export function Header() {
                       href={item.href}
                       className={`group relative px-3 py-1.5 rounded text-sm transition-colors flex items-center justify-center gap-1.5 flex-1 min-w-[70px] ${
                         isActive
-                          ? 'bg-accent text-white'
-                          : 'bg-bg-secondary text-text-secondary hover:bg-accent-orange hover:text-white'
+                          ? 'bg-accent text-on-accent'
+                          : 'bg-bg-secondary text-text-secondary hover:bg-accent-orange hover:text-on-accent-orange'
                       }`}
                       title="VIP Content - Login Required"
                     >
@@ -421,8 +421,8 @@ export function Header() {
                       href={item.href}
                       className={`group relative px-3 py-1.5 rounded text-sm transition-colors flex items-center justify-center gap-1.5 flex-1 min-w-[70px] ${
                         isActive
-                          ? 'bg-accent text-white'
-                          : 'bg-bg-secondary text-text-secondary hover:bg-accent-orange hover:text-white'
+                          ? 'bg-accent text-on-accent'
+                          : 'bg-bg-secondary text-text-secondary hover:bg-accent-orange hover:text-on-accent-orange'
                       }`}
                       title="VIP Content - Login Required"
                     >
diff --git a/components/blog/ShareButton.tsx b/components/blog/ShareButton.tsx
index ff09f36..2c54344 100644
--- a/components/blog/ShareButton.tsx
+++ b/components/blog/ShareButton.tsx
@@ -34,7 +34,7 @@ export function ShareButton({ title }: { title: string }) {
     <button
       type="button"
       onClick={handleShare}
-      className="inline-flex items-center gap-2 px-4 py-2 bg-bg-secondary border border-border rounded-lg hover:bg-accent hover:text-white hover:border-accent transition-colors text-sm font-semibold"
+            className="inline-flex items-center gap-2 px-4 py-2 bg-bg-secondary border border-border rounded-lg hover:bg-accent hover:text-on-accent hover:border-accent transition-colors text-sm font-semibold"
       title="Share this post"
       aria-label="Share this post"
     >
diff --git a/components/xanga/applets/NavigationApplet.tsx b/components/xanga/applets/NavigationApplet.tsx
index cd49751..4cd0908 100644
--- a/components/xanga/applets/NavigationApplet.tsx
+++ b/components/xanga/applets/NavigationApplet.tsx
@@ -46,7 +46,7 @@ export function NavigationApplet() {
           <Link
             key={item.href}
             href={item.href}
-            className="relative group flex items-center justify-center w-12 h-12 border-2 border-border bg-bg-secondary text-text-primary hover:bg-accent hover:text-white transition-colors rounded"
+            className="relative group flex items-center justify-center w-12 h-12 border-2 border-border bg-bg-secondary text-text-primary hover:bg-accent hover:text-on-accent transition-colors rounded"
             aria-label={item.label}
             title={item.tooltip}
           >
diff --git a/components/xanga/applets/SidebarLayoutApplet.tsx b/components/xanga/applets/SidebarLayoutApplet.tsx
index ee9407e..519f878 100644
--- a/components/xanga/applets/SidebarLayoutApplet.tsx
+++ b/components/xanga/applets/SidebarLayoutApplet.tsx
@@ -47,8 +47,8 @@ export function SidebarLayoutApplet() {
             key={option.side}
             type="button"
             onClick={() => setSidebarSide(option.side)}
-            className={`relative group flex items-center justify-center w-10 h-10 border-2 border-border bg-bg-secondary text-text-primary hover:bg-accent hover:text-white transition-colors rounded overflow-hidden ${
-              isActive ? 'bg-accent text-white' : ''
+            className={`relative group flex items-center justify-center w-10 h-10 border-2 border-border bg-bg-secondary text-text-primary hover:bg-accent hover:text-on-accent transition-colors rounded overflow-hidden ${
+              isActive ? 'bg-accent text-on-accent' : ''
             } ${isHide ? 'p-5' : 'p-0'}`}
             aria-label={option.label}
             title={option.tooltip}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index d35e579..e067180 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -17,6 +17,8 @@ const config: Config = {
         'accent-hover': 'var(--accent-hover)',
         'accent-orange': 'var(--accent-orange)',
         'accent-orange-hover': 'var(--accent-orange-hover)',
+        'on-accent': 'var(--on-accent)',
+        'on-accent-orange': 'var(--on-accent-orange)',
         'border': 'var(--border)',
         'link': 'var(--link)',
         'link-hover': 'var(--link-hover)',

From b1445b018e139dc82156f4a6c90dbf49baab4304 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 10 Jul 2026 00:44:57 +0000
Subject: [PATCH 2/3] Header: use theme-consistent accent focus ring instead of
 browser default outline

Co-authored-by: Thomas Bohn <bohn.tl@gmail.com>
---
 components/Header.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/Header.tsx b/components/Header.tsx
index 9b33c32..4bbd457 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -108,7 +108,7 @@ function ThemeMenu({ theme, setTheme }: { theme: Theme; setTheme: (t: Theme) =>
         aria-expanded={open}
         aria-label={`Theme: ${themeLabel(theme)}. Open theme menu`}
         title={`Theme: ${themeLabel(theme)}`}
-        className="relative w-9 h-9 flex items-center justify-center text-accent hover:bg-bg-secondary transition-colors"
+        className="relative w-9 h-9 flex items-center justify-center rounded text-accent hover:bg-bg-secondary transition-colors focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
       >
         <ThemeIcon theme={theme} />
         <span className="sr-only">Theme: {themeLabel(theme)}. Open theme menu</span>
@@ -133,7 +133,7 @@ function ThemeMenu({ theme, setTheme }: { theme: Theme; setTheme: (t: Theme) =>
                   setOpen(false)
                   triggerRef.current?.focus()
                 }}
-                className={`flex w-full items-center gap-2.5 px-3 py-2 text-sm transition-colors ${
+                className={`flex w-full items-center gap-2.5 px-3 py-2 text-sm transition-colors focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-accent ${
                   isActive
                     ? 'bg-bg-secondary text-accent font-semibold'
                     : 'text-text-primary hover:bg-bg-secondary'
@@ -201,7 +201,7 @@ function DesktopNavLink({
   return (
     <Link
       href={href}
-      className={`group relative flex items-center gap-1.5 pb-1 transition-colors ${
+      className={`group relative flex items-center gap-1.5 pb-1 rounded transition-colors focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${
         isActive ? 'text-accent font-semibold' : 'text-text-secondary hover:text-accent-orange'
       }`}
       title={vip ? 'VIP Content - Login Required' : undefined}
@@ -324,7 +324,7 @@ export function Header() {
             {showCollapsedIcon && layout && (
               <button
                 onClick={() => layout.restoreSidebar()}
-                className="relative group w-9 h-9 flex items-center justify-center rounded border border-accent/40 bg-accent/10 text-accent transition-colors hover:bg-accent hover:text-on-accent"
+                className="relative group w-9 h-9 flex items-center justify-center rounded border border-accent/40 bg-accent/10 text-accent transition-colors hover:bg-accent hover:text-on-accent focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
                 aria-label={`Restore ${layout.lastVisibleSide} sidebar`}
                 title="Restore sidebar"
               >
@@ -343,7 +343,7 @@ export function Header() {
               aria-expanded={mobileMenuOpen}
               aria-controls="mobile-nav"
               aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
-              className="md:hidden relative w-9 h-9 flex items-center justify-center text-text-primary hover:bg-bg-secondary transition-colors"
+              className="md:hidden relative w-9 h-9 flex items-center justify-center rounded text-text-primary hover:bg-bg-secondary transition-colors focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
             >
               <HamburgerIcon open={mobileMenuOpen} />
             </button>
@@ -368,7 +368,7 @@ export function Header() {
                     <Link
                       key={item.href}
                       href={item.href}
-                      className={`px-4 py-1.5 rounded text-sm transition-colors flex-1 min-w-[70px] text-center ${
+                      className={`px-4 py-1.5 rounded text-sm transition-colors flex-1 min-w-[70px] text-center focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${
                         isActive
                           ? 'bg-accent text-on-accent'
                           : 'bg-bg-secondary text-text-secondary hover:bg-accent-orange hover:text-on-accent-orange'
@@ -396,7 +396,7 @@ export function Header() {
                     <Link
                       key={item.href}
                       href={item.href}
-                      className={`group relative px-3 py-1.5 rounded text-sm transition-colors flex items-center justify-center gap-1.5 flex-1 min-w-[70px] ${
+                      className={`group relative px-3 py-1.5 rounded text-sm transition-colors flex items-center justify-center gap-1.5 flex-1 min-w-[70px] focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${
                         isActive
                           ? 'bg-accent text-on-accent'
                           : 'bg-bg-secondary text-text-secondary hover:bg-accent-orange hover:text-on-accent-orange'
@@ -419,7 +419,7 @@ export function Header() {
                     <Link
                       key={item.href}
                       href={item.href}
-                      className={`group relative px-3 py-1.5 rounded text-sm transition-colors flex items-center justify-center gap-1.5 flex-1 min-w-[70px] ${
+                      className={`group relative px-3 py-1.5 rounded text-sm transition-colors flex items-center justify-center gap-1.5 flex-1 min-w-[70px] focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${
                         isActive
                           ? 'bg-accent text-on-accent'
                           : 'bg-bg-secondary text-text-secondary hover:bg-accent-orange hover:text-on-accent-orange'

From 32e91507a59e98d761144326aed7efacc2e53f0f Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 10 Jul 2026 00:50:59 +0000
Subject: [PATCH 3/3] Give blue CTA buttons a fixed navy background so orange
 always gets dark text, blue always gets white text

Introduces --accent-blue/--accent-blue-hover/--on-accent-blue tokens that
never change with the theme (unlike --accent, which becomes the same
bright orange as --accent-orange in Xanga mode). .gradient-btn-blue now
uses these instead of --accent, so the 'Request VIP Access' button stays
visually blue with white text in every theme, instead of collapsing into
the same orange gradient as the 'Get in touch' button in Xanga mode.

Co-authored-by: Thomas Bohn <bohn.tl@gmail.com>
---
 app/globals.css    | 19 +++++++++++++++++--
 tailwind.config.ts |  3 +++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index c7b631b..11e61fc 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -20,6 +20,18 @@
      theme, so dark text is always the right call for it. */
   --on-accent: #ffffff;
   --on-accent-orange: #1a1a1a;
+  /* Fixed (non-theme-dependent) blue used for the small number of buttons
+     that are deliberately "the blue button" as opposed to "the theme's
+     highlight color" (e.g. distinguishing two CTAs from each other on the
+     same page). Unlike --accent, this never changes with the theme -
+     Xanga's --accent is bright orange, so reusing --accent here would make
+     a "blue" button render orange and become indistinguishable from an
+     orange one. Deliberately not overridden in the dark/Xanga blocks below
+     so every theme gets the same value. Dark enough that white text always
+     has sufficient contrast on it. */
+  --accent-blue: #1170aa;
+  --accent-blue-hover: #0d5a88;
+  --on-accent-blue: #ffffff;
   --border: #c8d0d9; /* Very Light Gray from palette */
   --link: #1170aa; /* Dark Blue for links */
   --link-hover: #fc7d0b; /* Bright Orange for link hover */
@@ -702,8 +714,11 @@ html[data-theme="xanga"] body ::-webkit-scrollbar-thumb:hover {
 }
 
 .gradient-btn-blue {
-  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
-  color: var(--on-accent) !important;
+  /* Uses the fixed --accent-blue tokens (not --accent) so this button stays
+     visually blue - and distinct from the orange .gradient-btn - even in
+     Xanga mode, where --accent itself is the bright orange highlight color. */
+  background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-hover) 100%);
+  color: var(--on-accent-blue) !important;
   box-shadow: 0 4px 20px rgba(17, 112, 170, 0.4);
 }
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index e067180..7291029 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -17,8 +17,11 @@ const config: Config = {
         'accent-hover': 'var(--accent-hover)',
         'accent-orange': 'var(--accent-orange)',
         'accent-orange-hover': 'var(--accent-orange-hover)',
+        'accent-blue': 'var(--accent-blue)',
+        'accent-blue-hover': 'var(--accent-blue-hover)',
         'on-accent': 'var(--on-accent)',
         'on-accent-orange': 'var(--on-accent-orange)',
+        'on-accent-blue': 'var(--on-accent-blue)',
         'border': 'var(--border)',
         'link': 'var(--link)',
         'link-hover': 'var(--link-hover)',