style(pricing): lift highlighted tier and rebalance Free price weight

Two tweaks driven by visual review of the rendered pricing block:

1. Highlighted tier — gradient + glow:
   - Bump padding p-px → p-0.5 (1px → 2px) so the gradient border is
     thick enough to actually show direction at the edges/corners.
     Primary and secondary tokens are close in hue in light mode, so a
     1px ring read as a flat indigo line.
   - Add shadow-primary-500/20 to the gradient-border wrapper. The
     brand-tinted glow carries the visual lift; the gradient itself is
     supporting, not load-bearing, at this size.
   - Drop the `via-primary-500` middle stop (no perceptible benefit
     when the two endpoints are already close).

2. Free price size: text-5xl → text-4xl. The `$XX` rows render as
   text-2xl `$` + text-5xl digit, so the digit's visual weight is
   what the eye reads. "Free" at text-5xl was wider and dominating
   the row vs the other two tiers; text-4xl matches the perceived
   weight of `$19`/`$49` better.
This commit is contained in:
George Cushen committed 2026-05-02 19:27:25 +01:00
1 parent d7a8fbb415
commit 8d1993cc93
1 file changed
+8 -3
+8 -3
View File
@@ -66,7 +66,9 @@ function PriceDisplay({price = {}, price_suffix, price_note, price_note_monthly,
if (isFree) {
return (
<div class="mb-6">
<p class="text-5xl font-bold tracking-tight text-gray-900 dark:text-white">Free</p>
{/* text-4xl matches the visual weight of `$XX` prices (where $ is text-2xl
and the digit is text-5xl) without "Free" dominating the row. */}
<p class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white">Free</p>
{note && <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{note}</p>}
</div>
);
@@ -203,8 +205,11 @@ function PricingTier({tier, billing, icon_svgs}) {
</span>
</div>
)}
{/* Gradient border: 1px gradient ring via padding + colored wrapper */}
<div class="rounded-3xl p-px bg-gradient-to-br from-primary-400 via-primary-500 to-secondary-500 shadow-2xl">
{/* Gradient border ring (2px, with brand-coloured glow) wrapping a white inner
card. The thicker p-0.5 makes the gradient direction visible at edge/corners,
and shadow-primary-500/20 carries the visual lift since primary→secondary in
light mode have similar hues and the gradient alone reads as flat. */}
<div class="rounded-3xl p-0.5 bg-gradient-to-br from-primary-500 to-secondary-500 shadow-2xl shadow-primary-500/20">
<div class="flex flex-col rounded-3xl p-8 bg-white dark:bg-gray-900 h-full">
<TierCardContent {...cardProps} />
</div>