fix(web): near-solid bottom band so bio reads on busy bright covers

85% darkening still left the small/thin bio text washed out over the
brightest part of a cover. Go to full-opacity ink at the bottom (from-ink),
a stronger flat tint (ink/30), medium-weight bio, and a heavier shadow —
~92% darkening where the bio sits. Public hero, editor preview, landing cards.

Author: mayur-tolexo

web/app/(public)/c/[slug]/page.tsx

@@ -41,17 +41,17 @@ export default async function PublicCartPage({ params }: { params: { slug: strin
           priority
           sizes="100vw"
         />
-        {/* Two-layer scrim: a flat tint tames bright covers, and a strong bottom
-            gradient anchors the text — keeps cream text legible on ANY cover. */}
-        <div className="absolute inset-0 bg-ink/25" />
-        <div className="absolute inset-0 bg-gradient-to-t from-ink/95 via-ink/45 to-transparent" />
-        <div className="absolute inset-x-0 bottom-0 px-5 sm:px-6 pb-6 sm:pb-10 max-w-3xl mx-auto text-cream [text-shadow:0_1px_12px_rgba(0,0,0,0.7)]">
+        {/* Two-layer scrim: a flat tint tames bright covers, and a near-solid bottom
+            band anchors the text — keeps cream text legible on ANY cover. */}
+        <div className="absolute inset-0 bg-ink/30" />
+        <div className="absolute inset-0 bg-gradient-to-t from-ink via-ink/60 to-transparent" />
+        <div className="absolute inset-x-0 bottom-0 px-5 sm:px-6 pb-6 sm:pb-10 max-w-3xl mx-auto text-cream [text-shadow:0_1px_12px_rgba(0,0,0,0.85)]">
           <div className="flex items-center gap-2 mb-2 sm:mb-3">
             <Image src={cart.ownerAvatarUrl} alt="" width={32} height={32} className="rounded-full border border-cream/40" unoptimized />
             <span className="text-sm font-medium">@{cart.ownerHandle}</span>
           </div>
           <h1 className="font-serif text-3xl sm:text-5xl leading-[1.05] mb-2 sm:mb-3">{cart.title}</h1>
-          {cart.bio && <p className="text-sm sm:text-base text-cream max-w-xl leading-relaxed">{linkify(cart.bio)}</p>}
+          {cart.bio && <p className="text-sm sm:text-base font-medium text-cream max-w-xl leading-relaxed">{linkify(cart.bio)}</p>}
         </div>
       </section>
 

web/app/(public)/page.tsx

@@ -268,8 +268,8 @@ function PhoneCard({
         sizes="(max-width: 1024px) 50vw, 25vw"
         priority={front}
       />
-      <div className="absolute inset-0 bg-ink/20" />
-      <div className="absolute inset-0 bg-gradient-to-t from-ink/95 via-ink/45 to-transparent" />
+      <div className="absolute inset-0 bg-ink/30" />
+      <div className="absolute inset-0 bg-gradient-to-t from-ink via-ink/60 to-transparent" />
       <div className="absolute bottom-3 left-3 right-3 text-cream [text-shadow:0_1px_8px_rgba(0,0,0,0.6)]">
         <p className="font-serif text-lg sm:text-xl leading-tight">
           {cart.title}

web/app/dashboard/carts/[id]/editor.tsx

@@ -352,9 +352,9 @@ function PreviewCartPage({ cart }: { cart: Cart }) {
     <div style={{ ["--accent" as string]: cart.accentHex } as React.CSSProperties}>
       <div className="relative aspect-[5/4]">
         <CartCover coverImageUrl={cart.coverImageUrl} accentHex={cart.accentHex} title={cart.title} />
-        <div className="absolute inset-0 bg-ink/25" />
-        <div className="absolute inset-0 bg-gradient-to-t from-ink/95 via-ink/45 to-transparent" />
-        <div className="absolute bottom-3 left-3 right-3 text-cream [text-shadow:0_1px_10px_rgba(0,0,0,0.7)]">
+        <div className="absolute inset-0 bg-ink/30" />
+        <div className="absolute inset-0 bg-gradient-to-t from-ink via-ink/60 to-transparent" />
+        <div className="absolute bottom-3 left-3 right-3 text-cream [text-shadow:0_1px_10px_rgba(0,0,0,0.85)]">
           <p className="text-xs font-medium">@{cart.ownerHandle}</p>
           <p className="font-serif text-xl leading-tight">{cart.title}</p>
         </div>