feat(site): the tagline takes the title, and the em dashes go

The hero h1 is now "Precision Engineering for Everyone". The concrete offer
moves into the supporting line, which keeps the search terms the h1 gives up
and no longer restates the splash's opening sentence.

The title's gradient drifts instead of sweeping: a 300% ramp over 18s with
symmetric easing, so there is no hard turnaround at either end of the travel.

Em dashes are gone from every tsx/ts file (87 lines, 104 occurrences), per
AGENTS.md rule 9. Label lists and titles take a colon; appositives take
commas; independent clauses take a semicolon or a period. A few sentences
were restructured where no single mark read well.

Metadata keeps "Crypto" deliberately: it is a real service line and a real
search term, and it is no longer in the visible headline.
This commit is contained in:
jwinterm
2026-08-17 04:18:18 -04:00
parent 127081bcac
commit 0848fcabde
30 changed files with 98 additions and 94 deletions
+7 -4
View File
@@ -283,19 +283,22 @@
@keyframes nebula-caret { 0%, 50% { border-color: currentColor; } 50.01%, 100% { border-color: transparent; } }
@keyframes nebula-term-out { to { opacity: 0; } }
/* Hero title: an animated gradient sheen. LCP-safe — the text paints immediately with the
/* Hero title: an animated gradient sheen. LCP-safe: the text paints immediately with the
gradient; only the gradient POSITION animates, which never delays the largest paint. The
global reduced-motion rule freezes it to the base gradient. */
global reduced-motion rule freezes it to the base gradient.
The wider 300% ramp over an 18s cycle makes this a slow drift rather than a visible sweep,
and the symmetric cubic-bezier easing removes the hard turnaround the old ease-in-out had
at each end of the travel. */
/* The brand's four-colour system (S green, U magenta, C blue, H teal), one per glyph.
Light theme uses the light palette; .dark swaps in the dark palette, which is the
same hues lifted for contrast on near-black -- from packs/such-software/pack.json. */
.hero-title {
background-image: linear-gradient(110deg, #1a5c38 0%, #b83670 30%, #176a92 55%, #12857e 80%, #1a5c38 100%);
background-size: 220% auto;
background-size: 300% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: hero-sheen 9s ease-in-out infinite;
animation: hero-sheen 18s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
.dark .hero-title {
background-image: linear-gradient(110deg, #35925c 0%, #e8689e 30%, #4aade0 55%, #3ad4c6 80%, #35925c 100%);