fix(web): guarantee hero text contrast on bright covers

A bottom-up gradient alone wasn't enough where the title/bio actually sit
over a very bright cover (e.g. a sunlit street photo) — cream text stayed
washed out. Add a flat ink tint over the whole cover to tame bright midtones,
plus a stronger/taller bottom scrim and heavier text-shadow. Applied to the
public cart hero, the editor live preview, and the landing phone mockups.

Author: mayur-tolexo

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

@@ -41,15 +41,17 @@ export default async function PublicCartPage({ params }: { params: { slug: strin
           priority
           sizes="100vw"
         />
-        {/* Stronger bottom scrim so cream text stays legible on light covers. */}
-        <div className="absolute inset-0 bg-gradient-to-t from-ink/90 via-ink/55 to-ink/10" />
-        <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_10px_rgba(0,0,0,0.55)]">
+        {/* 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)]">
           <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/95 max-w-xl leading-relaxed">{linkify(cart.bio)}</p>}
+          {cart.bio && <p className="text-sm sm:text-base text-cream max-w-xl leading-relaxed">{linkify(cart.bio)}</p>}
         </div>
       </section>
 

web/app/(public)/page.tsx

@@ -268,12 +268,13 @@ function PhoneCard({
         sizes="(max-width: 1024px) 50vw, 25vw"
         priority={front}
       />
-      <div className="absolute inset-0 bg-gradient-to-t from-ink/70 via-ink/15 to-transparent" />
-      <div className="absolute bottom-3 left-3 right-3 text-cream">
+      <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 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}
         </p>
-        <p className="text-[10px] sm:text-xs opacity-80 mt-0.5">
+        <p className="text-[10px] sm:text-xs opacity-90 mt-0.5">
           @{cart.ownerHandle}
         </p>
       </div>

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

@@ -352,8 +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-gradient-to-t from-ink/90 via-ink/55 to-ink/10" />
-        <div className="absolute bottom-3 left-3 right-3 text-cream [text-shadow:0_1px_8px_rgba(0,0,0,0.55)]">
+        <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)]">
           <p className="text-xs font-medium">@{cart.ownerHandle}</p>
           <p className="font-serif text-xl leading-tight">{cart.title}</p>
         </div>