From a7fd400a912e5a4230631807bc2542730a8b7d90 Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Tue, 7 Jul 2026 21:48:41 +0900
Subject: [PATCH 1/3] fix(admin/roles): replace removed 'bg-opacity-50' with
 'bg-black/50'

---
 src/routes/admin/roles.$roleId.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/admin/roles.$roleId.tsx b/src/routes/admin/roles.$roleId.tsx
index 0e2048684..d4e6b16f9 100644
--- a/src/routes/admin/roles.$roleId.tsx
+++ b/src/routes/admin/roles.$roleId.tsx
@@ -317,7 +317,7 @@ function RoleDetailPage() {
         )}
 
         {confirmRemove && (
-          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
             <div className="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md">
               <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                 Confirm Removal

From 63f8c227ea6b711a6d63a2a7ba5b896e15385996 Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Tue, 7 Jul 2026 21:50:17 +0900
Subject: [PATCH 2/3] refactor(*): replace removed 'flex-shrink-0' with
 'shrink-0'

---
 src/components/BlogAuthorFilter.tsx    |  4 ++--
 src/components/CopyPageDropdown.tsx    |  2 +-
 src/components/DocFeedbackNote.tsx     |  6 +++---
 src/components/DocFeedbackProvider.tsx |  2 +-
 src/components/FilterComponents.tsx    |  2 +-
 src/components/FrameworkCard.tsx       |  4 ++--
 src/components/LibraryTestimonials.tsx |  2 +-
 src/components/Navbar.tsx              |  2 +-
 src/components/Select.tsx              |  2 +-
 src/routes/account/integrations.tsx    |  8 ++++----
 src/routes/admin/index.tsx             |  4 ++--
 src/routes/admin/roles.$roleId.tsx     |  2 +-
 src/routes/admin/users.$userId.tsx     |  2 +-
 src/routes/learn.tsx                   | 12 ++++++------
 src/routes/partners.railway.tsx        |  4 ++--
 src/routes/workshops.tsx               |  8 ++++----
 16 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/src/components/BlogAuthorFilter.tsx b/src/components/BlogAuthorFilter.tsx
index 8a8da1e41..cd3807f11 100644
--- a/src/components/BlogAuthorFilter.tsx
+++ b/src/components/BlogAuthorFilter.tsx
@@ -47,7 +47,7 @@ export function BlogAuthorFilter({
           >
             <span
               className={twMerge(
-                'flex items-center justify-center w-6 h-6 rounded border overflow-hidden flex-shrink-0',
+                'flex items-center justify-center w-6 h-6 rounded border overflow-hidden shrink-0',
                 activeAuthor ? 'border-blue-500/30' : 'border-gray-500/20',
               )}
             >
@@ -114,7 +114,7 @@ export function BlogAuthorFilter({
                   width={20}
                   src={getAuthorAvatar(name)}
                   alt=""
-                  className="w-5 h-5 rounded object-cover flex-shrink-0"
+                  className="w-5 h-5 rounded object-cover shrink-0"
                 />
                 <span className="truncate">{name}</span>
                 {isSelected ? (
diff --git a/src/components/CopyPageDropdown.tsx b/src/components/CopyPageDropdown.tsx
index bffcaf699..715b60713 100644
--- a/src/components/CopyPageDropdown.tsx
+++ b/src/components/CopyPageDropdown.tsx
@@ -331,7 +331,7 @@ export function CopyPageDropdown({
               onSelect={item.onSelect}
               className="gap-3 px-3 py-2.5"
             >
-              <div className="flex-shrink-0 w-5 h-5 flex items-center justify-center text-gray-700 dark:text-gray-400">
+              <div className="shrink-0 w-5 h-5 flex items-center justify-center text-gray-700 dark:text-gray-400">
                 <item.icon className="w-4 h-4" />
               </div>
               <div className="flex flex-col gap-0.5">
diff --git a/src/components/DocFeedbackNote.tsx b/src/components/DocFeedbackNote.tsx
index cc67574c4..4f814ad3c 100644
--- a/src/components/DocFeedbackNote.tsx
+++ b/src/components/DocFeedbackNote.tsx
@@ -370,14 +370,14 @@ export function DocFeedbackNote({
         >
           <div className="flex items-center justify-between gap-2">
             <div className="flex items-center gap-2 flex-1 min-w-0">
-              <Icon className={`${colors.icon} text-xs flex-shrink-0`} />
+              <Icon className={`${colors.icon} text-xs shrink-0`} />
               <span className={`text-xs font-medium ${colors.text} truncate`}>
                 {isImprovement ? 'Your Improvement' : 'Your Note'}
               </span>
               {isImprovement && note.status && (
                 <span
                   className={twMerge(
-                    'text-[10px] px-1.5 py-0.5 rounded font-medium uppercase tracking-wide flex-shrink-0',
+                    'text-[10px] px-1.5 py-0.5 rounded font-medium uppercase tracking-wide shrink-0',
                     note.status === 'approved' &&
                       'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400',
                     note.status === 'denied' &&
@@ -390,7 +390,7 @@ export function DocFeedbackNote({
                 </span>
               )}
             </div>
-            <div className="flex items-center gap-1 flex-shrink-0">
+            <div className="flex items-center gap-1 shrink-0">
               {!note.isCollapsed && (
                 <>
                   <button
diff --git a/src/components/DocFeedbackProvider.tsx b/src/components/DocFeedbackProvider.tsx
index 8253179b2..cd058a88c 100644
--- a/src/components/DocFeedbackProvider.tsx
+++ b/src/components/DocFeedbackProvider.tsx
@@ -728,7 +728,7 @@ function CreatingFeedbackNote({
             <React.Suspense
               fallback={<div className={`${colors.icon} text-xs`}>...</div>}
             >
-              <Icon className={`${colors.icon} text-xs flex-shrink-0`} />
+              <Icon className={`${colors.icon} text-xs shrink-0`} />
             </React.Suspense>
             <span className={`text-xs font-medium ${colors.text}`}>
               {isImprovement ? 'New Improvement' : 'New Note'}
diff --git a/src/components/FilterComponents.tsx b/src/components/FilterComponents.tsx
index 66749f8a7..f9b0369ca 100644
--- a/src/components/FilterComponents.tsx
+++ b/src/components/FilterComponents.tsx
@@ -628,7 +628,7 @@ export function ViewModeToggle({
 
   if (compact) {
     return (
-      <div className="flex items-center gap-0.5 bg-gray-100 dark:bg-gray-800 rounded-lg p-0.5 flex-shrink-0">
+      <div className="flex items-center gap-0.5 bg-gray-100 dark:bg-gray-800 rounded-lg p-0.5 shrink-0">
         {compactViewModes.map(({ mode, icon: Icon, title }) => (
           <button
             key={mode}
diff --git a/src/components/FrameworkCard.tsx b/src/components/FrameworkCard.tsx
index 9a5eae5ca..0e5939de4 100644
--- a/src/components/FrameworkCard.tsx
+++ b/src/components/FrameworkCard.tsx
@@ -69,7 +69,7 @@ export function FrameworkCard({
         className="flex flex-col flex-1 gap-4"
       >
         {/* Framework Logo */}
-        <div className="flex-shrink-0 flex justify-center">
+        <div className="shrink-0 flex justify-center">
           <img
             src={framework.logo}
             alt={framework.label}
@@ -98,7 +98,7 @@ export function FrameworkCard({
               e.stopPropagation()
               onCopyClick(e)
             }}
-            className="flex-shrink-0 p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors rounded hover:bg-gray-100 dark:hover:bg-gray-800"
+            className="shrink-0 p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors rounded hover:bg-gray-100 dark:hover:bg-gray-800"
             title="Copy package name"
           >
             {copied ? (
diff --git a/src/components/LibraryTestimonials.tsx b/src/components/LibraryTestimonials.tsx
index 2cd182260..dfb1c27a5 100644
--- a/src/components/LibraryTestimonials.tsx
+++ b/src/components/LibraryTestimonials.tsx
@@ -51,7 +51,7 @@ export function LibraryTestimonials({
 
 function TestimonialCard({ testimonial }: { testimonial: Testimonial }) {
   return (
-    <Card className="flex-shrink-0 w-72 md:w-80 p-5">
+    <Card className="shrink-0 w-72 md:w-80 p-5">
       <div className="flex items-start gap-1 mb-3">
         {[...Array(5)].map((_, j) => (
           <Star
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 0802f5d52..817ea5e86 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -579,7 +579,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
       <div className="flex min-w-0 flex-1 items-center gap-2 min-[1120px]:gap-3">
         <div className="flex items-center gap-2 font-black text-xl uppercase min-w-0">
           <BrandContextMenu
-            className={twMerge(`flex items-center group flex-shrink-0`)}
+            className={twMerge(`flex items-center group shrink-0`)}
           >
             <LogoSection title={Title} />
           </BrandContextMenu>
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 8455dc2b9..39abbaaf0 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -87,7 +87,7 @@ export function Select<T extends SelectOption>({
                   width={18}
                   src={option.logo}
                   alt={`${option.label} logo`}
-                  className="flex-shrink-0"
+                  className="shrink-0"
                 />
               ) : null}
               <span className="truncate">{option.label}</span>
diff --git a/src/routes/account/integrations.tsx b/src/routes/account/integrations.tsx
index f7166cfeb..875824d9f 100644
--- a/src/routes/account/integrations.tsx
+++ b/src/routes/account/integrations.tsx
@@ -178,7 +178,7 @@ function IntegrationsPage() {
       {newlyCreatedKey && (
         <Card className="p-4 border-green-500 dark:border-green-600 bg-green-50 dark:bg-green-950/30">
           <div className="flex items-start gap-3">
-            <Key className="w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" />
+            <Key className="w-5 h-5 text-green-600 dark:text-green-400 shrink-0 mt-0.5" />
             <div className="flex-1 min-w-0">
               <p className="font-medium text-green-800 dark:text-green-200 text-sm">
                 Your new API key
@@ -190,7 +190,7 @@ function IntegrationsPage() {
                 <code className="flex-1 bg-white dark:bg-gray-900 border border-green-200 dark:border-green-800 rounded px-3 py-2 text-sm font-mono text-gray-900 dark:text-gray-100 overflow-x-auto">
                   {newlyCreatedKey}
                 </code>
-                <Button onClick={handleCopy} className="flex-shrink-0">
+                <Button onClick={handleCopy} className="shrink-0">
                   {copied.active ? (
                     <Check className="w-3.5 h-3.5 text-green-600" />
                   ) : (
@@ -345,7 +345,7 @@ function IntegrationsPage() {
                   </div>
                 </div>
               </div>
-              <div className="flex items-center gap-2 flex-shrink-0">
+              <div className="flex items-center gap-2 shrink-0">
                 {key.isActive && (
                   <Button
                     onClick={() =>
@@ -426,7 +426,7 @@ function IntegrationsPage() {
                   </div>
                 </div>
               </div>
-              <div className="flex items-center gap-2 flex-shrink-0">
+              <div className="flex items-center gap-2 shrink-0">
                 <Button
                   onClick={() =>
                     revokeAppMutation.mutate({
diff --git a/src/routes/admin/index.tsx b/src/routes/admin/index.tsx
index d3038c9ba..7dbe290b8 100644
--- a/src/routes/admin/index.tsx
+++ b/src/routes/admin/index.tsx
@@ -818,7 +818,7 @@ function ActivityTab({
                         <span className="text-sm font-medium text-gray-500 dark:text-gray-400 w-6">
                           #{index + 1}
                         </span>
-                        <div className="flex-shrink-0 h-8 w-8">
+                        <div className="shrink-0 h-8 w-8">
                           {user.userImage ? (
                             <img
                               className="h-8 w-8 rounded-full"
@@ -877,7 +877,7 @@ function ActivityTab({
                   >
                     #{index + 1}
                   </span>
-                  <div className="flex-shrink-0 h-8 w-8">
+                  <div className="shrink-0 h-8 w-8">
                     {user.userImage ? (
                       <img
                         className="h-8 w-8 rounded-full"
diff --git a/src/routes/admin/roles.$roleId.tsx b/src/routes/admin/roles.$roleId.tsx
index d4e6b16f9..5a411c2c4 100644
--- a/src/routes/admin/roles.$roleId.tsx
+++ b/src/routes/admin/roles.$roleId.tsx
@@ -131,7 +131,7 @@ function RoleDetailPage() {
           const displayName = user.name || user.displayUsername || ''
           return (
             <div className="flex items-center gap-3">
-              <div className="flex-shrink-0 h-10 w-10">
+              <div className="shrink-0 h-10 w-10">
                 {user.image ? (
                   <img
                     className="h-10 w-10 rounded-full"
diff --git a/src/routes/admin/users.$userId.tsx b/src/routes/admin/users.$userId.tsx
index f12c7f74b..340cf5bca 100644
--- a/src/routes/admin/users.$userId.tsx
+++ b/src/routes/admin/users.$userId.tsx
@@ -96,7 +96,7 @@ function UserDetailPage() {
           </Link>
 
           <div className="flex items-center gap-4">
-            <div className="flex-shrink-0 h-16 w-16">
+            <div className="shrink-0 h-16 w-16">
               {user.image || user.oauthImage ? (
                 <img
                   className="h-16 w-16 rounded-full"
diff --git a/src/routes/learn.tsx b/src/routes/learn.tsx
index 6b083d4c7..773edffde 100644
--- a/src/routes/learn.tsx
+++ b/src/routes/learn.tsx
@@ -48,15 +48,15 @@ function LearnPage() {
               </p>
               <div className="grid gap-2 text-xs text-left">
                 <div className="flex items-start gap-2">
-                  <Play className="w-4 h-4 mt-0.5 flex-shrink-0" />
+                  <Play className="w-4 h-4 mt-0.5 shrink-0" />
                   <div>Tutorials & walkthroughs</div>
                 </div>
                 <div className="flex items-start gap-2">
-                  <Video className="w-4 h-4 mt-0.5 flex-shrink-0" />
+                  <Video className="w-4 h-4 mt-0.5 shrink-0" />
                   <div>Deep dives into library internals</div>
                 </div>
                 <div className="flex items-start gap-2">
-                  <Star className="w-4 h-4 mt-0.5 flex-shrink-0" />
+                  <Star className="w-4 h-4 mt-0.5 shrink-0" />
                   <div>Release announcements & demos</div>
                 </div>
               </div>
@@ -88,15 +88,15 @@ function LearnPage() {
               </p>
               <div className="grid gap-2 text-xs text-left">
                 <div className="flex items-start gap-2">
-                  <Video className="w-4 h-4 mt-0.5 flex-shrink-0" />
+                  <Video className="w-4 h-4 mt-0.5 shrink-0" />
                   <div>Remote workshops worldwide</div>
                 </div>
                 <div className="flex items-start gap-2">
-                  <MapPin className="w-4 h-4 mt-0.5 flex-shrink-0" />
+                  <MapPin className="w-4 h-4 mt-0.5 shrink-0" />
                   <div>Premium in-person options</div>
                 </div>
                 <div className="flex items-start gap-2">
-                  <Star className="w-4 h-4 mt-0.5 flex-shrink-0" />
+                  <Star className="w-4 h-4 mt-0.5 shrink-0" />
                   <div>From maintainers & creators</div>
                 </div>
               </div>
diff --git a/src/routes/partners.railway.tsx b/src/routes/partners.railway.tsx
index 1315bb68a..bbc0b0a23 100644
--- a/src/routes/partners.railway.tsx
+++ b/src/routes/partners.railway.tsx
@@ -303,7 +303,7 @@ export const Route = createFileRoute('/partners/railway')({
 
 function CheckBadge() {
   return (
-    <span className="mt-0.5 inline-flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full bg-emerald-500 text-white">
+    <span className="mt-0.5 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-emerald-500 text-white">
       <Check className="h-2.5 w-2.5" strokeWidth={3} />
     </span>
   )
@@ -727,7 +727,7 @@ function RailwayPartnerPage() {
                     </span>
                     <Plus
                       className={twMerge(
-                        'h-4 w-4 flex-shrink-0 text-gray-500 transition-transform duration-200 dark:text-gray-400',
+                        'h-4 w-4 shrink-0 text-gray-500 transition-transform duration-200 dark:text-gray-400',
                         isOpen && 'rotate-45',
                       )}
                     />
diff --git a/src/routes/workshops.tsx b/src/routes/workshops.tsx
index 980e137ba..2d987073b 100644
--- a/src/routes/workshops.tsx
+++ b/src/routes/workshops.tsx
@@ -100,7 +100,7 @@ function WorkshopsPage() {
                   'Access to maintainers and creators',
                 ].map((item) => (
                   <li key={item} className="flex items-start gap-2">
-                    <CheckCircleIcon className="w-5 h-5 text-green-500 flex-shrink-0" />
+                    <CheckCircleIcon className="w-5 h-5 text-green-500 shrink-0" />
                     <span>{item}</span>
                   </li>
                 ))}
@@ -125,7 +125,7 @@ function WorkshopsPage() {
                   'Extended Q&A and networking sessions',
                 ].map((item) => (
                   <li key={item} className="flex items-start gap-2">
-                    <Star className="w-5 h-5 flex-shrink-0" />
+                    <Star className="w-5 h-5 shrink-0" />
                     <span>{item}</span>
                   </li>
                 ))}
@@ -347,7 +347,7 @@ function WorkshopsPage() {
                     key={topic}
                     className="flex items-center gap-3 rounded-lg bg-white dark:bg-gray-800 px-4 py-3 shadow-sm border border-gray-200 dark:border-gray-700"
                   >
-                    <CheckCircleIcon className="w-5 h-5 text-green-500 flex-shrink-0" />
+                    <CheckCircleIcon className="w-5 h-5 text-green-500 shrink-0" />
                     <span className="text-gray-600 dark:text-gray-400 font-medium">
                       {topic}
                     </span>
@@ -505,7 +505,7 @@ function TestimonialsMarquee() {
         >
           {[...testimonials, ...testimonials, ...testimonials].map(
             (testimonial, i) => (
-              <Card key={i} className="flex-shrink-0 w-80 p-6">
+              <Card key={i} className="shrink-0 w-80 p-6">
                 <div className="flex items-start gap-2 mb-4">
                   {[...Array(5)].map((_, j) => (
                     <Star

From abf86e8767090395013ab6a407e2de8e5cf8ec0a Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Tue, 7 Jul 2026 21:50:56 +0900
Subject: [PATCH 3/3] refactor(*): rename 'bg-gradient-to-*' to
 'bg-linear-to-*'

---
 src/components/FeedbackLeaderboard.tsx        |  4 ++--
 src/components/LibraryCard.tsx                |  2 +-
 src/components/PartnersGrid.tsx               |  2 +-
 src/components/PlaceholderSponsorPack.tsx     |  2 +-
 src/components/RightRail.tsx                  |  2 +-
 src/components/ShowcaseGallery.tsx            |  2 +-
 src/components/UserFeedbackSection.tsx        |  2 +-
 src/components/game/IslandExplorer.client.tsx |  2 +-
 src/components/game/ui/CompleteOverlay.tsx    |  2 +-
 src/components/game/ui/GameHUD.tsx            | 12 ++++++------
 src/components/game/ui/GameOverOverlay.tsx    |  2 +-
 src/components/stack/CategoryArticle.tsx      |  4 ++--
 src/routes/account/feedback.tsx               |  2 +-
 src/routes/admin/index.tsx                    | 18 +++++++++---------
 src/routes/admin/npm-stats.tsx                |  2 +-
 src/routes/builder.docs.tsx                   |  2 +-
 src/routes/ethos.tsx                          |  6 +++---
 src/routes/explore.tsx                        |  2 +-
 src/routes/index.tsx                          | 18 +++++++++---------
 src/routes/intent/registry/index.tsx          |  4 ++--
 src/routes/learn.tsx                          |  8 ++++----
 src/routes/partners.index.tsx                 |  4 ++--
 src/routes/support.tsx                        |  2 +-
 src/routes/tenets.tsx                         |  6 +++---
 src/routes/workshops.tsx                      |  8 ++++----
 25 files changed, 60 insertions(+), 60 deletions(-)

diff --git a/src/components/FeedbackLeaderboard.tsx b/src/components/FeedbackLeaderboard.tsx
index 4efda4e85..443419d5f 100644
--- a/src/components/FeedbackLeaderboard.tsx
+++ b/src/components/FeedbackLeaderboard.tsx
@@ -136,7 +136,7 @@ export function FeedbackLeaderboard() {
                         key={entry.userId}
                         className={twMerge(
                           rank <= 3 && page === 1
-                            ? 'bg-gradient-to-r from-yellow-50 to-transparent dark:from-yellow-900/10'
+                            ? 'bg-linear-to-r from-yellow-50 to-transparent dark:from-yellow-900/10'
                             : '',
                         )}
                       >
@@ -179,7 +179,7 @@ export function FeedbackLeaderboard() {
                 </TableBody>
               </Table>
 
-              <div className="p-3 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 border-t border-gray-200 dark:border-gray-700">
+              <div className="p-3 bg-linear-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 border-t border-gray-200 dark:border-gray-700">
                 <PaginationControls
                   currentPage={page - 1}
                   totalPages={pagination.totalPages}
diff --git a/src/components/LibraryCard.tsx b/src/components/LibraryCard.tsx
index fe0c28df6..a182e21d5 100644
--- a/src/components/LibraryCard.tsx
+++ b/src/components/LibraryCard.tsx
@@ -164,7 +164,7 @@ export default function LibraryCard({
         <div
           className={twMerge(
             `absolute -top-2 -right-2 z-40 px-2 py-1 rounded-md`,
-            ['bg-gradient-to-r', library.colorFrom, library.colorTo],
+            ['bg-linear-to-r', library.colorFrom, library.colorTo],
             'uppercase font-black italic text-xs',
             library.badgeTextStyle ?? 'text-white',
           )}
diff --git a/src/components/PartnersGrid.tsx b/src/components/PartnersGrid.tsx
index 476b80e4f..de55c8292 100644
--- a/src/components/PartnersGrid.tsx
+++ b/src/components/PartnersGrid.tsx
@@ -153,7 +153,7 @@ export function PartnersGrid({
         return (
           <Card
             key={row.tier}
-            className={`overflow-hidden rounded-none rounded-l-sm rounded-r-2xl bg-gradient-to-b ${flare.gradientStops}`}
+            className={`overflow-hidden rounded-none rounded-l-sm rounded-r-2xl bg-linear-to-b ${flare.gradientStops}`}
           >
             <div className="ml-1.5 bg-white dark:bg-gray-900">
               <div className="px-4 pt-3 pb-2 border-b border-gray-200 dark:border-gray-800 flex items-center gap-2">
diff --git a/src/components/PlaceholderSponsorPack.tsx b/src/components/PlaceholderSponsorPack.tsx
index d4eaa2141..cab22be9a 100644
--- a/src/components/PlaceholderSponsorPack.tsx
+++ b/src/components/PlaceholderSponsorPack.tsx
@@ -15,7 +15,7 @@ function createBubbleStyle(index: number) {
 
 export default function PlaceholderSponsorPack() {
   return (
-    <div className="relative w-full h-full overflow-hidden rounded-[2rem] bg-gradient-to-br from-gray-100/80 via-white to-gray-50 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900">
+    <div className="relative w-full h-full overflow-hidden rounded-[2rem] bg-linear-to-br from-gray-100/80 via-white to-gray-50 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900">
       {Array.from({ length: 48 }).map((_, index) => {
         const style = createBubbleStyle(index)
 
diff --git a/src/components/RightRail.tsx b/src/components/RightRail.tsx
index 8868d3ab5..25d0c6b0d 100644
--- a/src/components/RightRail.tsx
+++ b/src/components/RightRail.tsx
@@ -170,7 +170,7 @@ export function PartnersRail({
           >
             {/* Tier-colored top line */}
             <div
-              className={`absolute top-0 left-0 right-0 h-1 bg-gradient-to-r ${flare.gradientStops}`}
+              className={`absolute top-0 left-0 right-0 h-1 bg-linear-to-r ${flare.gradientStops}`}
             />
             {/* Absolute top-left tier label */}
             <div
diff --git a/src/components/ShowcaseGallery.tsx b/src/components/ShowcaseGallery.tsx
index f7c88cdfa..d6489634f 100644
--- a/src/components/ShowcaseGallery.tsx
+++ b/src/components/ShowcaseGallery.tsx
@@ -295,7 +295,7 @@ export function ShowcaseGallery() {
   return (
     <div className="min-h-screen">
       {/* Header */}
-      <div className="bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-950">
+      <div className="bg-linear-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-950">
         <div className="max-w-7xl mx-auto px-4 py-12 sm:py-16">
           <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
             <div>
diff --git a/src/components/UserFeedbackSection.tsx b/src/components/UserFeedbackSection.tsx
index 548c49f3d..f2e9e8205 100644
--- a/src/components/UserFeedbackSection.tsx
+++ b/src/components/UserFeedbackSection.tsx
@@ -34,7 +34,7 @@ export function UserFeedbackSection(_props: UserFeedbackSectionProps) {
   return (
     <div className="space-y-6">
       {/* Points Summary Box */}
-      <div className="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-lg p-6 border border-blue-200 dark:border-blue-800">
+      <div className="bg-linear-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-lg p-6 border border-blue-200 dark:border-blue-800">
         <div className="flex items-start justify-between">
           <div>
             <div className="flex items-center gap-2 mb-2">
diff --git a/src/components/game/IslandExplorer.client.tsx b/src/components/game/IslandExplorer.client.tsx
index 46ccd0c55..190509544 100644
--- a/src/components/game/IslandExplorer.client.tsx
+++ b/src/components/game/IslandExplorer.client.tsx
@@ -46,7 +46,7 @@ function LoadingOverlay() {
   const [headline, subtext] = LOADING_MESSAGES[messageIndex]
 
   return (
-    <div className="absolute inset-0 bg-gradient-to-b from-sky-400 to-cyan-600 flex items-center justify-center z-50">
+    <div className="absolute inset-0 bg-linear-to-b from-sky-400 to-cyan-600 flex items-center justify-center z-50">
       <div className="text-center">
         <div className="w-16 h-16 mx-auto mb-4 border-4 border-white/30 border-t-white rounded-full animate-spin" />
         <p className="text-white text-lg font-medium">{headline}</p>
diff --git a/src/components/game/ui/CompleteOverlay.tsx b/src/components/game/ui/CompleteOverlay.tsx
index 95c3ba856..94e213c21 100644
--- a/src/components/game/ui/CompleteOverlay.tsx
+++ b/src/components/game/ui/CompleteOverlay.tsx
@@ -13,7 +13,7 @@ export function CompleteOverlay() {
   }
 
   return (
-    <div className="absolute inset-0 z-20 flex items-center justify-center bg-gradient-to-b from-amber-400/90 to-orange-500/90 backdrop-blur-sm">
+    <div className="absolute inset-0 z-20 flex items-center justify-center bg-linear-to-b from-amber-400/90 to-orange-500/90 backdrop-blur-sm">
       <div className="max-w-md mx-4 text-center">
         {/* Trophy */}
         <div className="w-24 h-24 mx-auto mb-6 bg-white/20 rounded-full flex items-center justify-center">
diff --git a/src/components/game/ui/GameHUD.tsx b/src/components/game/ui/GameHUD.tsx
index 43e680144..a72c26aac 100644
--- a/src/components/game/ui/GameHUD.tsx
+++ b/src/components/game/ui/GameHUD.tsx
@@ -197,7 +197,7 @@ export function GameHUD() {
             </span>
             <div className="w-32 h-3 bg-black/50 rounded-full overflow-hidden max-md:w-20 max-md:h-2">
               <div
-                className="h-full bg-gradient-to-r from-red-600 to-red-400"
+                className="h-full bg-linear-to-r from-red-600 to-red-400"
                 style={{
                   width: `${(boatHealth / totalMaxHealth) * 100}%`,
                 }}
@@ -217,8 +217,8 @@ export function GameHUD() {
               <div
                 className={`h-full transition-all duration-75 ${
                   cooldownProgress >= 1
-                    ? 'bg-gradient-to-r from-cyan-500 to-cyan-300'
-                    : 'bg-gradient-to-r from-cyan-800 to-cyan-600'
+                    ? 'bg-linear-to-r from-cyan-500 to-cyan-300'
+                    : 'bg-linear-to-r from-cyan-800 to-cyan-600'
                 }`}
                 style={{ width: `${cooldownProgress * 100}%` }}
               />
@@ -233,7 +233,7 @@ export function GameHUD() {
       {/* Upgrade notification */}
       {showUpgradeNotification && upgradeInfo && (
         <div className="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 animate-in fade-in zoom-in duration-300">
-          <div className="bg-gradient-to-br from-yellow-500/90 to-amber-600/90 backdrop-blur-md rounded-2xl px-8 py-5 text-center shadow-2xl border border-yellow-300/30">
+          <div className="bg-linear-to-br from-yellow-500/90 to-amber-600/90 backdrop-blur-md rounded-2xl px-8 py-5 text-center shadow-2xl border border-yellow-300/30">
             <div className="text-4xl mb-2">{upgradeInfo.icon}</div>
             <div className="text-white font-bold text-xl mb-1">
               {upgradeInfo.name}
@@ -248,7 +248,7 @@ export function GameHUD() {
       {/* Showcase unlock notification */}
       {showShowcaseUnlock && (
         <div className="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 animate-in fade-in zoom-in duration-300">
-          <div className="bg-gradient-to-br from-purple-500/90 to-violet-600/90 backdrop-blur-md rounded-2xl px-8 py-6 text-center shadow-2xl border border-purple-300/30 max-w-sm">
+          <div className="bg-linear-to-br from-purple-500/90 to-violet-600/90 backdrop-blur-md rounded-2xl px-8 py-6 text-center shadow-2xl border border-purple-300/30 max-w-sm">
             <div className="text-5xl mb-3">🏝️</div>
             <div className="text-white font-bold text-xl mb-2">
               Showcase Islands Unlocked!
@@ -270,7 +270,7 @@ export function GameHUD() {
       {/* Corners unlock notification */}
       {showCornersUnlock && (
         <div className="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 animate-in fade-in zoom-in duration-300">
-          <div className="bg-gradient-to-br from-gray-900/95 to-red-950/95 backdrop-blur-md rounded-2xl px-8 py-6 text-center shadow-2xl border border-red-500/30 max-w-sm">
+          <div className="bg-linear-to-br from-gray-900/95 to-red-950/95 backdrop-blur-md rounded-2xl px-8 py-6 text-center shadow-2xl border border-red-500/30 max-w-sm">
             <div className="text-5xl mb-3">💀</div>
             <div className="text-red-400 font-bold text-xl mb-2">
               The Four Corners Await
diff --git a/src/components/game/ui/GameOverOverlay.tsx b/src/components/game/ui/GameOverOverlay.tsx
index 3ba95589f..d4cdc5b65 100644
--- a/src/components/game/ui/GameOverOverlay.tsx
+++ b/src/components/game/ui/GameOverOverlay.tsx
@@ -69,7 +69,7 @@ export function GameOverOverlay() {
               transform: animationStep >= 1 ? 'scale(1)' : 'scale(0.5)',
             }}
           >
-            <div className="w-20 h-20 mx-auto rounded-full bg-gradient-to-br from-red-500 to-red-700 flex items-center justify-center shadow-lg">
+            <div className="w-20 h-20 mx-auto rounded-full bg-linear-to-br from-red-500 to-red-700 flex items-center justify-center shadow-lg">
               <span className="text-4xl">💀</span>
             </div>
           </div>
diff --git a/src/components/stack/CategoryArticle.tsx b/src/components/stack/CategoryArticle.tsx
index 5397d772b..5de2e2910 100644
--- a/src/components/stack/CategoryArticle.tsx
+++ b/src/components/stack/CategoryArticle.tsx
@@ -974,7 +974,7 @@ function RelatedPostsBlock({ items }: { items: Array<RelatedPost> }) {
                 <div className="flex flex-wrap items-center gap-2">
                   <span
                     className={twMerge(
-                      'inline-flex rounded-md bg-gradient-to-r px-2 py-1 text-xs font-black text-white',
+                      'inline-flex rounded-md bg-linear-to-r px-2 py-1 text-xs font-black text-white',
                       lib.colorFrom,
                       lib.colorTo,
                     )}
@@ -1080,7 +1080,7 @@ function LibraryTitle({
         {library.badge ? (
           <span
             className={twMerge(
-              'rounded-md bg-gradient-to-r px-1.5 py-0.5 text-xs font-black uppercase',
+              'rounded-md bg-linear-to-r px-1.5 py-0.5 text-xs font-black uppercase',
               library.colorFrom,
               library.colorTo,
               library.badgeTextStyle ?? 'text-white',
diff --git a/src/routes/account/feedback.tsx b/src/routes/account/feedback.tsx
index c8b4957d9..ac55414c8 100644
--- a/src/routes/account/feedback.tsx
+++ b/src/routes/account/feedback.tsx
@@ -50,7 +50,7 @@ function AccountFeedbackPage() {
   return (
     <div className="space-y-6">
       {/* Points Summary Box */}
-      <div className="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-lg p-6 border border-blue-200 dark:border-blue-800">
+      <div className="bg-linear-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-lg p-6 border border-blue-200 dark:border-blue-800">
         <div className="flex items-start justify-between">
           <div>
             <div className="flex items-center gap-2 mb-2">
diff --git a/src/routes/admin/index.tsx b/src/routes/admin/index.tsx
index 7dbe290b8..ab19f191c 100644
--- a/src/routes/admin/index.tsx
+++ b/src/routes/admin/index.tsx
@@ -257,7 +257,7 @@ function OverviewTab({
     <div className="space-y-6">
       {/* Key Metrics Row */}
       <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-        <Card className="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 border-blue-200 dark:border-blue-800 p-4">
+        <Card className="bg-linear-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 border-blue-200 dark:border-blue-800 p-4">
           <div className="text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
             Total Users
           </div>
@@ -281,7 +281,7 @@ function OverviewTab({
         </Card>
 
         {dauStats && (
-          <Card className="bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-emerald-900/20 dark:to-teal-900/20 border-emerald-200 dark:border-emerald-800 p-4">
+          <Card className="bg-linear-to-br from-emerald-50 to-teal-50 dark:from-emerald-900/20 dark:to-teal-900/20 border-emerald-200 dark:border-emerald-800 p-4">
             <div className="text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
               DAU
             </div>
@@ -365,7 +365,7 @@ function OverviewTab({
 
         {/* Streak Leaderboard Preview */}
         {dauStats && dauStats.streakLeaderboard.length > 0 && (
-          <Card className="bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 border-amber-200 dark:border-amber-800 p-6">
+          <Card className="bg-linear-to-br from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 border-amber-200 dark:border-amber-800 p-6">
             <div className="flex items-center justify-between mb-4">
               <h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                 <Trophy className="text-amber-500" />
@@ -447,7 +447,7 @@ function UsersTab({
     <div className="space-y-6">
       {/* Overview Cards */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <Card className="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 border-blue-200 dark:border-blue-800 p-6">
+        <Card className="bg-linear-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 border-blue-200 dark:border-blue-800 p-6">
           <div className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">
             Total Users
           </div>
@@ -561,7 +561,7 @@ function ActivityTab({
       {/* DAU/WAU/MAU Cards */}
       {dauStats && (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-          <Card className="bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-emerald-900/20 dark:to-teal-900/20 border-emerald-200 dark:border-emerald-800 p-6">
+          <Card className="bg-linear-to-br from-emerald-50 to-teal-50 dark:from-emerald-900/20 dark:to-teal-900/20 border-emerald-200 dark:border-emerald-800 p-6">
             <div className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">
               DAU (Today)
             </div>
@@ -650,7 +650,7 @@ function ActivityTab({
       {/* Login Stats */}
       {activityStats && (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-          <Card className="bg-gradient-to-br from-cyan-50 to-blue-50 dark:from-cyan-900/20 dark:to-blue-900/20 border-cyan-200 dark:border-cyan-800 p-6">
+          <Card className="bg-linear-to-br from-cyan-50 to-blue-50 dark:from-cyan-900/20 dark:to-blue-900/20 border-cyan-200 dark:border-cyan-800 p-6">
             <div className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">
               Today's Logins
             </div>
@@ -850,7 +850,7 @@ function ActivityTab({
 
       {/* Streak Leaderboard */}
       {dauStats && dauStats.streakLeaderboard.length > 0 && (
-        <Card className="bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 border-amber-200 dark:border-amber-800 p-6">
+        <Card className="bg-linear-to-br from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 border-amber-200 dark:border-amber-800 p-6">
           <div className="flex items-center gap-3 mb-4">
             <Trophy className="text-2xl text-amber-500" />
             <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
@@ -916,7 +916,7 @@ function ActivityTab({
 
       {/* Admin Activity */}
       {activityStats && (
-        <Card className="bg-gradient-to-br from-orange-50 to-amber-50 dark:from-orange-900/20 dark:to-amber-900/20 border-orange-200 dark:border-orange-800 p-6">
+        <Card className="bg-linear-to-br from-orange-50 to-amber-50 dark:from-orange-900/20 dark:to-amber-900/20 border-orange-200 dark:border-orange-800 p-6">
           <div className="flex items-center justify-between mb-4">
             <div className="flex items-center gap-3">
               <Shield className="text-2xl text-orange-500" />
@@ -997,7 +997,7 @@ function AdsTab({
   return (
     <div className="space-y-6">
       {/* Waitlist Demand - Primary Focus */}
-      <Card className="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 border-purple-200 dark:border-purple-800 p-6">
+      <Card className="bg-linear-to-br from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 border-purple-200 dark:border-purple-800 p-6">
         <div className="flex items-center gap-3 mb-4">
           <List className="text-2xl text-purple-500" />
           <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
diff --git a/src/routes/admin/npm-stats.tsx b/src/routes/admin/npm-stats.tsx
index 751232530..fe23abd80 100644
--- a/src/routes/admin/npm-stats.tsx
+++ b/src/routes/admin/npm-stats.tsx
@@ -65,7 +65,7 @@ function NpmStatsAdmin() {
           </div>
         ) : homepageSummary ? (
           <>
-            <Card className="mb-8 rounded-xl border-cyan-200 bg-gradient-to-br from-cyan-50 to-emerald-50 p-6 dark:border-cyan-800 dark:from-cyan-900/20 dark:to-emerald-900/20">
+            <Card className="mb-8 rounded-xl border-cyan-200 bg-linear-to-br from-cyan-50 to-emerald-50 p-6 dark:border-cyan-800 dark:from-cyan-900/20 dark:to-emerald-900/20">
               <div className="mb-6 flex items-center justify-between gap-4">
                 <div>
                   <h2 className="mb-1 text-2xl font-bold text-gray-900 dark:text-white">
diff --git a/src/routes/builder.docs.tsx b/src/routes/builder.docs.tsx
index dbafb92f7..6a388eff3 100644
--- a/src/routes/builder.docs.tsx
+++ b/src/routes/builder.docs.tsx
@@ -138,7 +138,7 @@ function RouteComponent() {
         </div>
 
         {/* Footer CTA */}
-        <div className="mt-16 p-8 bg-gradient-to-r from-blue-500/10 to-cyan-500/10 dark:from-blue-500/20 dark:to-cyan-500/20 rounded-2xl border border-blue-200 dark:border-cyan-800 text-center">
+        <div className="mt-16 p-8 bg-linear-to-r from-blue-500/10 to-cyan-500/10 dark:from-blue-500/20 dark:to-cyan-500/20 rounded-2xl border border-blue-200 dark:border-cyan-800 text-center">
           <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
             Ready to Build?
           </h2>
diff --git a/src/routes/ethos.tsx b/src/routes/ethos.tsx
index 240a59397..b908be232 100644
--- a/src/routes/ethos.tsx
+++ b/src/routes/ethos.tsx
@@ -134,7 +134,7 @@ function RouteComp() {
                 {/* Header */}
                 <div className="flex items-start gap-4 mb-4">
                   <div
-                    className={`shrink-0 w-12 h-12 rounded-lg bg-gradient-to-br ${section.gradient} flex items-center justify-center`}
+                    className={`shrink-0 w-12 h-12 rounded-lg bg-linear-to-br ${section.gradient} flex items-center justify-center`}
                   >
                     <Icon className="w-6 h-6 text-white" />
                   </div>
@@ -154,7 +154,7 @@ function RouteComp() {
                     {section.bullets.map((bullet) => (
                       <div key={bullet} className="flex gap-3 items-start">
                         <div
-                          className={`shrink-0 w-1.5 h-1.5 rounded-full bg-gradient-to-br ${section.gradient} mt-2`}
+                          className={`shrink-0 w-1.5 h-1.5 rounded-full bg-linear-to-br ${section.gradient} mt-2`}
                         />
                         <span className="text-gray-600 dark:text-gray-400">
                           {bullet}
@@ -193,7 +193,7 @@ function RouteComp() {
           className="p-6 md:p-8 hover:border-violet-500/50 transition-colors"
         >
           <div className="flex items-start gap-4">
-            <div className="shrink-0 w-12 h-12 rounded-lg bg-gradient-to-br from-violet-500 to-purple-500 flex items-center justify-center">
+            <div className="shrink-0 w-12 h-12 rounded-lg bg-linear-to-br from-violet-500 to-purple-500 flex items-center justify-center">
               <FileText className="w-6 h-6 text-white" />
             </div>
             <div>
diff --git a/src/routes/explore.tsx b/src/routes/explore.tsx
index e0b6c1bc0..6ee17c34e 100644
--- a/src/routes/explore.tsx
+++ b/src/routes/explore.tsx
@@ -38,7 +38,7 @@ export const Route = createFileRoute('/explore')({
 // Loading screen while game JS bundle loads
 function LoadingScreen() {
   return (
-    <div className="w-full h-[calc(100dvh-var(--navbar-height))] bg-gradient-to-b from-sky-400 to-cyan-600 flex items-center justify-center">
+    <div className="w-full h-[calc(100dvh-var(--navbar-height))] bg-linear-to-b from-sky-400 to-cyan-600 flex items-center justify-center">
       <div className="text-center">
         <div className="w-16 h-16 mx-auto mb-4 border-4 border-white/30 border-t-white rounded-full animate-spin" />
         <p className="text-white text-lg font-medium">
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 7af73f9e5..6d7cbb6f3 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -261,7 +261,7 @@ function Index() {
           <div
             className={`
           rounded-md p-4 grid gap-6
-          bg-gradient-to-br from-red-500 to-red-700 text-white overflow-hidden relative
+          bg-linear-to-br from-red-500 to-red-700 text-white overflow-hidden relative
           shadow-xl shadow-red-700/30
           sm:p-8 sm:grid-cols-3 items-center`}
           >
@@ -553,7 +553,7 @@ function WhyTanStackSection() {
           </p>
           <div
             aria-hidden="true"
-            className="mt-7 hidden h-px bg-gradient-to-r from-gray-300 via-gray-200 to-transparent dark:from-gray-700 dark:via-gray-800 lg:block"
+            className="mt-7 hidden h-px bg-linear-to-r from-gray-300 via-gray-200 to-transparent dark:from-gray-700 dark:via-gray-800 lg:block"
           />
           <Button
             as={Link}
@@ -576,7 +576,7 @@ function WhyTanStackSection() {
               <div
                 aria-hidden="true"
                 className={twMerge(
-                  'absolute inset-x-0 top-0 h-1 bg-gradient-to-r',
+                  'absolute inset-x-0 top-0 h-1 bg-linear-to-r',
                   principle.accentClassName,
                 )}
               />
@@ -690,7 +690,7 @@ function FrameworkAdapterGraph({
           data-adapter-label={frameworkAdapterCore.label}
           style={adapterGraphStyle(frameworkAdapterCore)}
           className={twMerge(
-            'absolute z-30 flex items-center justify-center rounded-lg bg-gradient-to-r text-center text-[11px] text-white shadow-lg shadow-cyan-500/15',
+            'absolute z-30 flex items-center justify-center rounded-lg bg-linear-to-r text-center text-[11px] text-white shadow-lg shadow-cyan-500/15',
             accentClassName,
           )}
         >
@@ -785,7 +785,7 @@ function PrincipleProof({
               <span>{name}</span>
               <span
                 className={twMerge(
-                  'bg-gradient-to-r bg-clip-text font-black text-transparent',
+                  'bg-linear-to-r bg-clip-text font-black text-transparent',
                   accentClassName,
                 )}
               >
@@ -805,7 +805,7 @@ function PrincipleProof({
           <span>critical paths</span>
           <span
             className={twMerge(
-              'bg-gradient-to-r bg-clip-text text-transparent',
+              'bg-linear-to-r bg-clip-text text-transparent',
               accentClassName,
             )}
           >
@@ -820,7 +820,7 @@ function PrincipleProof({
             >
               <span
                 className={twMerge(
-                  'h-1.5 w-1.5 rounded-full bg-gradient-to-r',
+                  'h-1.5 w-1.5 rounded-full bg-linear-to-r',
                   accentClassName,
                 )}
               />
@@ -846,7 +846,7 @@ function PrincipleProof({
       </div>
       <div
         aria-hidden="true"
-        className={twMerge('mt-3 h-px bg-gradient-to-r', accentClassName)}
+        className={twMerge('mt-3 h-px bg-linear-to-r', accentClassName)}
       />
     </div>
   )
@@ -874,7 +874,7 @@ function StackCategoryCard({
           <li key={lib.id} className="flex items-start gap-2.5">
             <span
               className={twMerge(
-                'flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-gradient-to-br text-[10px] font-black text-white',
+                'flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-linear-to-br text-[10px] font-black text-white',
                 lib.colorFrom,
                 lib.colorTo,
               )}
diff --git a/src/routes/intent/registry/index.tsx b/src/routes/intent/registry/index.tsx
index 6c6540114..765e48fc4 100644
--- a/src/routes/intent/registry/index.tsx
+++ b/src/routes/intent/registry/index.tsx
@@ -120,7 +120,7 @@ function IntentRegistryPage() {
   return (
     <div className="min-h-screen bg-white dark:bg-gray-950">
       {/* Header */}
-      <div className="border-b border-gray-200 dark:border-gray-800 bg-gradient-to-br from-sky-50 to-white dark:from-sky-950/30 dark:to-gray-950">
+      <div className="border-b border-gray-200 dark:border-gray-800 bg-linear-to-br from-sky-50 to-white dark:from-sky-950/30 dark:to-gray-950">
         <div className="max-w-6xl mx-auto px-4 sm:px-6 py-12">
           <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 mb-4">
             <Link
@@ -487,7 +487,7 @@ function IntentRegistryPage() {
           ))}
 
         {/* Ship your skills CTA */}
-        <div className="mt-16 mb-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-gradient-to-br from-sky-50/50 to-white dark:from-sky-950/20 dark:to-gray-900 p-8 text-center">
+        <div className="mt-16 mb-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-linear-to-br from-sky-50/50 to-white dark:from-sky-950/20 dark:to-gray-900 p-8 text-center">
           <div className="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-sky-100 dark:bg-sky-950/60 mb-4">
             <svg
               className="w-5 h-5 text-sky-600 dark:text-sky-400"
diff --git a/src/routes/learn.tsx b/src/routes/learn.tsx
index 773edffde..7b78bfa2e 100644
--- a/src/routes/learn.tsx
+++ b/src/routes/learn.tsx
@@ -32,9 +32,9 @@ function LearnPage() {
             href="https://youtube.com/@tan_stack"
             target="_blank"
             rel="noreferrer"
-            className="min-w-[300px] max-w-[300px] rounded-lg bg-gradient-to-br from-red-500 to-red-700 text-white shadow-black/20 shadow-lg hover:shadow-2xl hover:shadow-black/20 divide-y divide-white/30 transition-all duration-200 hover:scale-105 block relative overflow-visible"
+            className="min-w-[300px] max-w-[300px] rounded-lg bg-linear-to-br from-red-500 to-red-700 text-white shadow-black/20 shadow-lg hover:shadow-2xl hover:shadow-black/20 divide-y divide-white/30 transition-all duration-200 hover:scale-105 block relative overflow-visible"
           >
-            <div className="absolute -top-2 -right-2 z-40 px-2 py-1 rounded-md bg-gradient-to-r from-red-500 to-red-700 uppercase text-white font-black italic text-xs">
+            <div className="absolute -top-2 -right-2 z-40 px-2 py-1 rounded-md bg-linear-to-r from-red-500 to-red-700 uppercase text-white font-black italic text-xs">
               NEW
             </div>
             <div className="p-4 lg:p-8">
@@ -72,9 +72,9 @@ function LearnPage() {
           </a>
           <Link
             to="/workshops"
-            className="min-w-[300px] max-w-[300px] rounded-lg bg-gradient-to-br from-blue-600 to-purple-600 text-white shadow-black/20 shadow-lg hover:shadow-2xl hover:shadow-black/20 divide-y divide-white/30 transition-all duration-200 hover:scale-105 block relative overflow-visible"
+            className="min-w-[300px] max-w-[300px] rounded-lg bg-linear-to-br from-blue-600 to-purple-600 text-white shadow-black/20 shadow-lg hover:shadow-2xl hover:shadow-black/20 divide-y divide-white/30 transition-all duration-200 hover:scale-105 block relative overflow-visible"
           >
-            <div className="absolute -top-2 -right-2 z-40 px-2 py-1 rounded-md bg-gradient-to-r from-blue-500 to-purple-500 uppercase text-white font-black italic text-xs">
+            <div className="absolute -top-2 -right-2 z-40 px-2 py-1 rounded-md bg-linear-to-r from-blue-500 to-purple-500 uppercase text-white font-black italic text-xs">
               NEW
             </div>
             <div className="p-4 lg:p-8">
diff --git a/src/routes/partners.index.tsx b/src/routes/partners.index.tsx
index 2d0120d91..9e9c40dca 100644
--- a/src/routes/partners.index.tsx
+++ b/src/routes/partners.index.tsx
@@ -461,7 +461,7 @@ function TierSectionHeader({ tier }: { tier: PartnerTier }) {
   return (
     <div className="flex items-center gap-4 mb-8">
       <div
-        className={`h-px flex-1 bg-gradient-to-r from-transparent ${flare.gradientStops}`}
+        className={`h-px flex-1 bg-linear-to-r from-transparent ${flare.gradientStops}`}
       />
       <div
         className={`flex items-center gap-2 px-3 py-1 rounded-full ${flare.labelColor}`}
@@ -472,7 +472,7 @@ function TierSectionHeader({ tier }: { tier: PartnerTier }) {
         </span>
       </div>
       <div
-        className={`h-px flex-1 bg-gradient-to-l from-transparent ${flare.gradientStops}`}
+        className={`h-px flex-1 bg-linear-to-l from-transparent ${flare.gradientStops}`}
       />
     </div>
   )
diff --git a/src/routes/support.tsx b/src/routes/support.tsx
index c6473cff5..c2651818b 100644
--- a/src/routes/support.tsx
+++ b/src/routes/support.tsx
@@ -79,7 +79,7 @@ function SupportComp() {
               className={`${cardClass} ${option.isNew ? 'overflow-visible' : 'overflow-hidden'}`}
             >
               {option.isNew && (
-                <div className="absolute -top-2 -right-2 z-40 px-2 py-1 rounded-md bg-gradient-to-r from-blue-500 to-purple-500 uppercase text-white font-black italic text-xs">
+                <div className="absolute -top-2 -right-2 z-40 px-2 py-1 rounded-md bg-linear-to-r from-blue-500 to-purple-500 uppercase text-white font-black italic text-xs">
                   NEW
                 </div>
               )}
diff --git a/src/routes/tenets.tsx b/src/routes/tenets.tsx
index 3a94f956c..66b38766b 100644
--- a/src/routes/tenets.tsx
+++ b/src/routes/tenets.tsx
@@ -248,7 +248,7 @@ function RouteComp() {
                 {/* Header */}
                 <div className="flex items-start gap-4 mb-6">
                   <div
-                    className={`shrink-0 w-12 h-12 rounded-lg bg-gradient-to-br ${tenet.gradient} flex items-center justify-center`}
+                    className={`shrink-0 w-12 h-12 rounded-lg bg-linear-to-br ${tenet.gradient} flex items-center justify-center`}
                   >
                     <Icon className="w-6 h-6 text-white" />
                   </div>
@@ -270,7 +270,7 @@ function RouteComp() {
                       className="flex gap-3 items-start"
                     >
                       <div
-                        className={`shrink-0 w-1.5 h-1.5 rounded-full bg-gradient-to-br ${tenet.gradient} mt-2`}
+                        className={`shrink-0 w-1.5 h-1.5 rounded-full bg-linear-to-br ${tenet.gradient} mt-2`}
                       />
                       <div>
                         <span className="font-semibold">
@@ -323,7 +323,7 @@ function RouteComp() {
               return (
                 <Card key={audience.title} className="p-5">
                   <div
-                    className={`w-10 h-10 rounded-lg bg-gradient-to-br ${audience.gradient} flex items-center justify-center mb-3`}
+                    className={`w-10 h-10 rounded-lg bg-linear-to-br ${audience.gradient} flex items-center justify-center mb-3`}
                   >
                     <Icon className="w-5 h-5 text-white" />
                   </div>
diff --git a/src/routes/workshops.tsx b/src/routes/workshops.tsx
index 2d987073b..98fa0248e 100644
--- a/src/routes/workshops.tsx
+++ b/src/routes/workshops.tsx
@@ -107,7 +107,7 @@ function WorkshopsPage() {
               </ul>
             </Card>
 
-            <div className="rounded-lg bg-gradient-to-br from-purple-500 to-pink-500 p-6 shadow-lg text-white">
+            <div className="rounded-lg bg-linear-to-br from-purple-500 to-pink-500 p-6 shadow-lg text-white">
               <div className="flex items-center gap-3 mb-4">
                 <MapPin className="w-8 h-8" />
                 <h2 className="text-2xl font-black">In-Person Workshops</h2>
@@ -364,7 +364,7 @@ function WorkshopsPage() {
           {/* Premium Appearance Section - Deal Sweetener */}
           <div className="relative py-20 px-4 md:px-8">
             <div className="max-w-4xl mx-auto text-center">
-              <div className="inline-block p-1 rounded-full bg-gradient-to-br from-amber-300 to-amber-600 mb-6 shadow-lg">
+              <div className="inline-block p-1 rounded-full bg-linear-to-br from-amber-300 to-amber-600 mb-6 shadow-lg">
                 <img
                   src="https://github.com/tannerlinsley.png"
                   alt="Tanner Linsley"
@@ -494,9 +494,9 @@ function TestimonialsMarquee() {
       </div>
       <div className="relative w-full">
         {/* Left fade overlay */}
-        <div className="absolute left-0 top-0 bottom-0 w-48 z-10 bg-gradient-to-r from-gray-50 dark:from-gray-900 via-gray-50/80 dark:via-gray-900/80 to-transparent pointer-events-none" />
+        <div className="absolute left-0 top-0 bottom-0 w-48 z-10 bg-linear-to-r from-gray-50 dark:from-gray-900 via-gray-50/80 dark:via-gray-900/80 to-transparent pointer-events-none" />
         {/* Right fade overlay */}
-        <div className="absolute right-0 top-0 bottom-0 w-48 z-10 bg-gradient-to-l from-gray-50 dark:from-gray-900 via-gray-50/80 dark:via-gray-900/80 to-transparent pointer-events-none" />
+        <div className="absolute right-0 top-0 bottom-0 w-48 z-10 bg-linear-to-l from-gray-50 dark:from-gray-900 via-gray-50/80 dark:via-gray-900/80 to-transparent pointer-events-none" />
         <div
           className="flex gap-8 items-stretch will-change-transform animate-[testimonials_linear_infinite]"
           style={{