From 8d1993cc9349fa55ca86e6897eeb03ae03c45e34 Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Sat, 2 May 2026 19:27:25 +0100
Subject: [PATCH] style(pricing): lift highlighted tier and rebalance Free
 price weight
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 modules/blox/blox/pricing/component.jsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/modules/blox/blox/pricing/component.jsx b/modules/blox/blox/pricing/component.jsx
index c5807f87..bafdb7ba 100644
--- a/modules/blox/blox/pricing/component.jsx
+++ b/modules/blox/blox/pricing/component.jsx
@@ -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>