From 78b1fbc16e2d2a36ad8fa29879ec1f0efde2b041 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <git@vasanko.com>
Date: Mon, 28 Sep 2026 00:45:00 +0000
Subject: [PATCH] contact messages: filled accent trigger button, subtle hover

The {contact:} button was a hollow outline that inverted wholesale on hover; now it is filled with the accent (--bg text, the pairing accents are chosen to contrast with), hover only nudges the fill toward the page text color, and keyboard focus gets an outline. The button also gains margins so it separates from surrounding text both standalone and inline.
---
 frontend/src/assets/pagerite.css | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/frontend/src/assets/pagerite.css b/frontend/src/assets/pagerite.css
index d0b5c45..ebac638 100644
--- a/frontend/src/assets/pagerite.css
+++ b/frontend/src/assets/pagerite.css
@@ -880,21 +880,31 @@ article {
 
 /* {contact: Label} directive: the button opening the visitor contact
    panel (docs/messages.md). A standalone accent button in the article
-   flow; .has-unread (set by contact-main) marks a new admin reply. */
+   flow; .has-unread (set by contact-main) marks a new admin reply.
+   Filled with the accent (text in --bg, the pairing the accent is
+   designed to contrast with); hover nudges the fill toward the page
+   text color — a subtle shift that works in either color scheme — and
+   keyboard focus gets an outline instead of a restyle. */
 .contact-trigger {
   position: relative;
+  margin: 0.3em 0.1em;
   padding: 0.35em 1.1em;
   font: inherit;
-  color: var(--accent);
-  background: none;
+  color: var(--bg);
+  background: var(--accent);
   border: 1px solid var(--accent);
   border-radius: 1.2em;
   cursor: pointer;
 }
 
 .contact-trigger:hover {
-  color: var(--bg);
-  background: var(--accent);
+  background: color-mix(in srgb, var(--accent) 85%, var(--text));
+  border-color: color-mix(in srgb, var(--accent) 85%, var(--text));
+}
+
+.contact-trigger:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
 }
 
 .contact-trigger.has-unread::after {