diff --git a/app/globals.css b/app/globals.css index 6a14141..0b26c52 100644 --- a/app/globals.css +++ b/app/globals.css @@ -298,11 +298,50 @@ a.cta-primary:focus-visible { outline-offset: 9px; } +/* The status link under the hero terminal. Raw --whisper is ~3.5:1 on + paper, short of AA at body size, so the value text uses whisper mixed + 68% with ink (~6.6:1). The label is ink like the stat labels; the dot + and the arrow keep the full accent. */ +a.hero-status { + color: color-mix(in srgb, var(--whisper) 68%, var(--ink)); +} + +.hero-status-text { + padding-bottom: 1px; + border-bottom: 1px solid transparent; + transition: border-bottom-color 260ms cubic-bezier(0.2, 0.8, 0.2, 1); +} + +a.hero-status:hover .hero-status-text { + border-bottom-color: currentColor; +} + +a.hero-status .arrow { + margin-right: 0; + transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1); +} + +a.hero-status:hover .arrow { + transform: translateX(6px); +} + +.status-live { + width: 7px; + height: 7px; + border-radius: 50%; + background: var(--whisper); + animation: fleet-pulse 2.4s ease-in-out infinite; +} + @media (prefers-reduced-motion: reduce) { a.cta-primary, - a.cta-primary .arrow { + a.cta-primary .arrow, + a.hero-status .arrow { transition: none; } + .status-live { + animation: none; + } } /* --- hero terminal ----------------------------------------------------- diff --git a/components/site/Hero.tsx b/components/site/Hero.tsx index 7589c60..a698c21 100644 --- a/components/site/Hero.tsx +++ b/components/site/Hero.tsx @@ -1,5 +1,10 @@ import { links } from "@/lib/links"; -import { HERO_FIGURES, HERO_HEADLINE, HERO_LEAD } from "@/lib/copy"; +import { + HERO_FIGURES, + HERO_HEADLINE, + HERO_LEAD, + HERO_STATUS, +} from "@/lib/copy"; import { highlightBrand } from "@/components/ui/brand"; import { Figure } from "@/components/ui/Figure"; import { Frame } from "@/components/ui/Frame"; @@ -25,8 +30,11 @@ export function Hero() { -
{highlightBrand(HERO_LEAD)}
@@ -66,15 +74,37 @@ export function Hero() {