fix(relaunch): mint top loader, kill stray pink, drop empty image box

- top loading bar: orange→pink HolyLoader gradient → mint (accent→accent-soft)
- prism code highlighting: .token.function/.class-name text-pink-500 →
  text-accent-soft (the last visible pink in the app)
- feed card: render the thumbnail only when a real image loads — no grey dotted
  placeholder box when an image is missing or fails to load

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: NiallJoeMaher

components/ProgressBar/ProgressBar.tsx

@@ -5,13 +5,10 @@ const ProgressBar = () => {
   return (
     <HolyLoader
       easing="linear"
-      color="linear-gradient(
-        to right,
-        rgb(251, 146, 60),
-        rgb(219, 39, 119)
-      )"
+      // Relaunch mint (accent → accent-soft), not the old orange/pink.
+      color="linear-gradient(to right, rgb(45, 212, 191), rgb(110, 231, 214))"
       zIndex={50}
-      height="0.25rem"
+      height="0.2rem"
     />
   );
 };

components/UnifiedContentCard/UnifiedContentCard.tsx

@@ -271,7 +271,9 @@ const UnifiedContentCard = ({
             </p>
           )}
         </div>
-        {showThumbnail ? (
+        {/* Only render a thumbnail when there's a real image that loaded — no
+            grey placeholder box when an image is missing or fails. */}
+        {showThumbnail && (
           <Link
             href={cardUrl}
             onClick={type === "LINK" ? handleExternalClick : undefined}
@@ -284,10 +286,6 @@ const UnifiedContentCard = ({
               onError={() => setImageError(true)}
             />
           </Link>
-        ) : (
-          type === "LINK" && (
-            <div className="relative h-[68px] w-[104px] flex-shrink-0 self-start overflow-hidden rounded-sm border border-hairline bg-elevated bg-grid-dots bg-[length:9px_9px]" />
-          )
         )}
       </div>
 

styles/globals.css

@@ -404,7 +404,7 @@ body {
 
 .token.function,
 .token.class-name {
-  @apply text-pink-500;
+  @apply text-accent-soft;
 }
 
 .token.regex,