From 023783d189b81809531ba960108cd87e174607a7 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <git@vasanko.com>
Date: Mon, 28 Sep 2026 16:57:35 +0000
Subject: [PATCH] nitro theme: slanted parallelogram article buttons, hover
 scale lift

In-article buttons (the {contact:} trigger and raw <button>s, not the
editor chrome) get a / slanted parallelogram clip-path in the nitro
theme: nav-tab-style bezier sweeps at the obtuse corners, small arcs at
the sharp ones, fixed 1.7em height so every button shares one shape.
Base stylesheet: the contact envelope's line-height no longer inflates
the button, and article buttons get a slight scale(1.01) hover lift.
---
 frontend/src/assets/pagerite.css | 16 +++++++-
 pagerite/themes/nitro/theme.css  | 67 +++++++++++++++++++++++++++++++-
 2 files changed, 81 insertions(+), 2 deletions(-)

diff --git a/frontend/src/assets/pagerite.css b/frontend/src/assets/pagerite.css
index a441b30..6416d79 100644
--- a/frontend/src/assets/pagerite.css
+++ b/frontend/src/assets/pagerite.css
@@ -927,8 +927,11 @@ article {
 }
 
 .contact-trigger .icon {
-  /* Match the corner ✉️'s optical size against the button text. */
+  /* Match the corner ✉️'s optical size against the button text. The
+     reduced line-height keeps the larger glyph from inflating the
+     button: 1.38 × 1.2 ≈ the label text's own 1.65 line box. */
   font-size: 1.38em;
+  line-height: 1.2;
 }
 
 .contact-trigger:hover {
@@ -956,6 +959,17 @@ article {
   }
 }
 
+/* Any button in the article flow (the {contact:} trigger and raw
+   <button>s in the markup — not the .icon-btn editor pens or .copy):
+   a slight lift on hover. */
+article button:not(.icon-btn):not(.copy) {
+  transition: transform 0.15s;
+}
+
+article button:not(.icon-btn):not(.copy):hover {
+  transform: scale(1.01);
+}
+
 .edit-link {
   position: absolute;
   top: 0.2rem;
diff --git a/pagerite/themes/nitro/theme.css b/pagerite/themes/nitro/theme.css
index d9b0adf..0a1506e 100644
--- a/pagerite/themes/nitro/theme.css
+++ b/pagerite/themes/nitro/theme.css
@@ -1,6 +1,7 @@
 /* Nitro theme: racing/HUD style — saturated orange + cyan, console/HUD-style
    monospace display type, an orange racing-tab nav with a bezier clip-path,
-   and a dark bezier banner. Follows prefers-color-scheme: the light scheme
+   matching slanted-parallelogram buttons, and a dark bezier banner. Follows
+   prefers-color-scheme: the light scheme
    is a warm light-grey page, the dark scheme a deep violet page; the banner
    and other dark/bright elements carry over unchanged.
 
@@ -135,6 +136,70 @@
   color: var(--tab-muted);
 }
 
+/* Buttons in the article flow (the {contact:} trigger and any raw
+   <button> in the markup): a racing parallelogram with / slanted sides,
+   clipped with the same shape() language as the nav tab. All buttons
+   are forced to one fixed 1.7em height (inline-flex centering, nowrap,
+   no border — it would be invisible under the clip), so every button
+   gets the identical shape and the geometry is exact: a ~62° slant from
+   the 0.9em run. The obtuse top-left and bottom-right corners replicate
+   the nav tab's top-left corner: a wide bezier sweep with the same
+   0.8/0.6 control-handle split along the joining edges (over a 0.5em
+   tangent run), mirrored between the two corners. The sharp corners
+   keep small arcs, in balance with the wide sweeps (0.22em, arc
+   ≈ 0.45em — about half the obtuse sweep's, so the sharp corners stay
+   subordinate). border-radius is the fallback for browsers without
+   shape(). Asymmetric inline padding keeps the text clear of the
+   slants (wider on the right: the wide bottom-right sweep cuts deeper
+   into the label's end side). Editor chrome (.icon-btn pens, .copy)
+   keeps its own styling. The {contact:} envelope's line-height is
+   reduced in the base stylesheet so it doesn't outgrow this height. */
+.contact-trigger,
+article button:not(.icon-btn):not(.copy) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.7em;
+  padding: 0 1.3em 0 1em;
+  white-space: nowrap;
+  /* Same typography as the contact trigger (raw <button>s otherwise get
+     the small UA font): nav family/weight, article size and leading. */
+  font-family: var(--font-nav);
+  font-weight: var(--nav-weight);
+  font-size: inherit;
+  line-height: inherit;
+  color: var(--ink);
+  background: var(--accent);
+  border: none;
+  border-radius: 0.2em;
+  cursor: pointer;
+  clip-path: shape(
+      /* bottom edge, left to right */
+      from 0.365em 100%,
+      hline to calc(100% - 1.4em),
+      /* bottom-right corner: nav-style bezier, mirrored from top-left */
+      curve to calc(100% - 0.666em) calc(100% - 0.442em)
+        with calc(100% - 1.1em) 100% / calc(100% - 0.853em) calc(100% - 0.088em),
+      /* right slant */
+      line to calc(100% - 0.171em) 0.323em,
+      /* top-right corner: sharp, small arc */
+      arc to calc(100% - 0.365em) 0% of 0.22em ccw,
+      /* top edge, right to left */
+      hline to 1.4em,
+      /* top-left corner: nav-style bezier */
+      curve to 0.666em 0.442em with 1.1em 0 / 0.853em 0.088em,
+      /* left slant */
+      line to 0.171em calc(100% - 0.323em),
+      /* bottom-left corner: sharp, small arc */
+      arc to 0.365em 100% of 0.22em ccw,
+      close);
+}
+
+article button:not(.icon-btn):not(.copy):hover {
+  color: var(--tab-hover);
+  text-shadow: 0 0 0.1em;
+}
+
 /* Console-style headings: uppercase monospace. h1 in the page text color
    with a hazard-stripe underline, h2 deep orange, h3 cyan. */
 article h1 {