feat(ui): unify site visual language across key pages

src/pages/hire.astro

@@ -17,14 +17,14 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
   <main class="min-h-screen">
     <!-- Hire Page Hero -->
     <section class="py-24 relative overflow-hidden">
-      <div class="absolute inset-0 bg-gradient-to-br from-blue-900/20 via-primary/10 to-blue-900/20 dark:from-blue-900/30 dark:via-primary/20 dark:to-blue-900/30"></div>
+      <div class="page-hero-overlay"></div>
 
       <Container className="relative z-10">
         <div class="text-center mb-16">
           <span class="inline-block px-4 py-1 bg-primary/20 text-primary dark:text-primary rounded-full text-sm font-medium mb-4">
             {lang === 'zh' ? '专业合作' : 'Professional Collaboration'}
           </span>
-          <h1 class="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-gray-900 via-primary to-primary dark:from-white dark:via-blue-200 dark:to-orange-300 bg-clip-text text-transparent">
+          <h1 class="page-title-gradient text-5xl md:text-6xl font-bold mb-6">
             {lang === 'zh' ? '合作' : 'Hire Me'}
           </h1>
           <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
@@ -50,7 +50,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
           </div>
 
           <div class="grid md:grid-cols-2 gap-6">
-            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-primary/20 p-6">
+            <div class="page-surface p-6">
               <h3 class="text-lg font-bold mb-3">
                 {lang === 'zh' ? '初创公司' : 'Startups'}
               </h3>
@@ -61,7 +61,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
               </p>
             </div>
 
-            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-primary/20 p-6">
+            <div class="page-surface p-6">
               <h3 class="text-lg font-bold mb-3">
                 {lang === 'zh' ? '独立创始人' : 'Indie Hackers'}
               </h3>
@@ -72,7 +72,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
               </p>
             </div>
 
-            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-primary/20 p-6">
+            <div class="page-surface p-6">
               <h3 class="text-lg font-bold mb-3">
                 {lang === 'zh' ? '传统企业' : 'Traditional Businesses'}
               </h3>
@@ -83,7 +83,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
               </p>
             </div>
 
-            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-primary/20 p-6">
+            <div class="page-surface p-6">
               <h3 class="text-lg font-bold mb-3">
                 {lang === 'zh' ? '技术团队' : 'Technical Teams'}
               </h3>
@@ -99,7 +99,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
     </section>
 
     <!-- What I Build -->
-    <section class="py-16 relative bg-white/5 dark:bg-gray-900/50">
+    <section class="py-16 relative page-section-soft">
       <Container>
         <div class="max-w-4xl mx-auto">
           <div class="flex items-center gap-4 mb-8">
@@ -112,7 +112,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
           </div>
 
           <div class="space-y-6">
-            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-blue-500/20 p-8">
+            <div class="page-surface p-8">
               <div class="flex items-start gap-4">
                 <div class="w-12 h-12 bg-gradient-to-br from-primary to-blue-600 rounded-xl flex items-center justify-center flex-shrink-0">
                   <span class="text-2xl">⚡</span>
@@ -128,7 +128,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
               </div>
             </div>
 
-            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-blue-500/20 p-8">
+            <div class="page-surface p-8">
               <div class="flex items-start gap-4">
                 <div class="w-12 h-12 bg-gradient-to-br from-green-600 to-teal-600 rounded-xl flex items-center justify-center flex-shrink-0">
                   <span class="text-2xl">🌐</span>
@@ -144,7 +144,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
               </div>
             </div>
 
-            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-blue-500/20 p-8">
+            <div class="page-surface p-8">
               <div class="flex items-start gap-4">
                 <div class="w-12 h-12 bg-gradient-to-br from-orange-600 to-red-600 rounded-xl flex items-center justify-center flex-shrink-0">
                   <span class="text-2xl">📱</span>
@@ -178,7 +178,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
           </div>
 
           <div class="grid md:grid-cols-3 gap-6">
-            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-green-500/20 p-6 text-center">
+            <div class="page-surface p-6 text-center">
               <div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center mx-auto mb-4">
                 <span class="text-2xl">🤝</span>
               </div>
@@ -192,7 +192,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
               </p>
             </div>
 
-            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-green-500/20 p-6 text-center">
+            <div class="page-surface p-6 text-center">
               <div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center mx-auto mb-4">
                 <span class="text-2xl">💰</span>
               </div>
@@ -206,7 +206,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
               </p>
             </div>
 
-            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-green-500/20 p-6 text-center">
+            <div class="page-surface p-6 text-center">
               <div class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center mx-auto mb-4">
                 <span class="text-2xl">⏰</span>
               </div>
@@ -225,7 +225,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
     </section>
 
     <!-- Delivery Style -->
-    <section class="py-16 relative bg-white/5 dark:bg-gray-900/50">
+    <section class="py-16 relative page-section-soft">
       <Container>
         <div class="max-w-4xl mx-auto">
           <div class="flex items-center gap-4 mb-8">
@@ -237,7 +237,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
             </h2>
           </div>
 
-          <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-yellow-500/20 p-8">
+          <div class="page-surface p-8">
             <ul class="space-y-4">
               <li class="flex items-start gap-3">
                 <span class="text-green-500 text-xl">✓</span>
@@ -310,7 +310,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
             </h2>
           </div>
 
-          <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-red-500/20 p-8">
+          <div class="page-surface p-8">
             <div class="flex items-center gap-4 mb-6">
               <div class="w-4 h-4 bg-green-500 rounded-full animate-pulse"></div>
               <span class="text-lg font-semibold">
@@ -339,7 +339,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
     </section>
 
     <!-- Contact CTA -->
-    <section class="py-16 relative bg-gradient-to-br from-blue-900/20 to-blue-900/20 dark:from-blue-900/30 dark:to-blue-900/30">
+    <section class="py-16 relative page-section-soft">
       <Container>
         <div class="max-w-4xl mx-auto text-center">
           <h2 class="text-3xl font-bold mb-6">