u

src/components/tiles/ArticleTile.jsx

@@ -17,11 +17,12 @@ import { BrandLabel } from '../brand';
 import { thumb } from '../../api';
 import {
   GREEN_BRIGHT,
+  ICE,
   INK_STRONG,
   SCRIM_LABEL,
   SCRIM_TILE,
   TEXT_GLOW_DARK,
-  TEXT_GLOW_LIGHT,
+  VEIL_MUTED,
   WHITE,
 } from '../../colors';
 
@@ -410,7 +411,6 @@ export class ArticleTile extends Tile {
           {/* Row 1: Brand */}
           <Box
             sx={{
-              height: 18,
               minHeight: 18,
               display: 'flex',
               alignItems: 'center',
@@ -425,37 +425,53 @@ export class ArticleTile extends Tile {
                 spacing={0.5}
                 typographyProps={{
                   variant: 'caption',
-                  noWrap: true,
                   sx: {
-                    color: INK_STRONG,
+                    color: ICE,
                     fontWeight: 600,
-                    lineHeight: 1.2,
+                    lineHeight: 1.25,
+                    px: '4px',
                     py: '2px',
-                    textShadow: TEXT_GLOW_LIGHT,
+                    mx: '-2px',
+                    overflow: 'visible',
+                    textShadow: TEXT_GLOW_DARK,
                   },
                 }}
               />
             ) : null}
           </Box>
 
-          {/* Rows 2 & 3: Name */}
-          <Typography
-            variant="body2"
-            fontWeight={600}
+          {/* Rows 2 & 3: Name inside transparent whitish band */}
+          <Box
             sx={{
-              color: INK_STRONG,
-              lineHeight: 1.2,
-              height: '2.4em',
-              textShadow: TEXT_GLOW_LIGHT,
-              display: '-webkit-box',
-              WebkitLineClamp: 2,
-              WebkitBoxOrient: 'vertical',
-              overflow: 'hidden',
-              wordBreak: 'break-word',
+              mx: -1,
+              px: 1,
+              py: '2px',
+              my: 0.25,
+              bgcolor: VEIL_MUTED,
+              backdropFilter: 'blur(4px)',
+              WebkitBackdropFilter: 'blur(4px)',
             }}
           >
-            {label || article?.name?.trim() || '\u00A0'}
-          </Typography>
+            <Typography
+              variant="body2"
+              fontWeight={650}
+              sx={{
+                color: INK_STRONG,
+                lineHeight: 1.2,
+                height: '2.4em',
+                px: '4px',
+                mx: '-4px',
+                textShadow: '0 0 3px rgba(255, 255, 255, 0.9), 0 0 6px rgba(255, 255, 255, 0.7)',
+                display: '-webkit-box',
+                WebkitLineClamp: 2,
+                WebkitBoxOrient: 'vertical',
+                overflow: 'hidden',
+                wordBreak: 'break-word',
+              }}
+            >
+              {label || article?.name?.trim() || '\u00A0'}
+            </Typography>
+          </Box>
 
           {/* Row 4: SKU */}
           <Typography