refactor(login): 登录界面样式优化

src/assets/images/login-bg.svg

@@ -3,71 +3,61 @@
   <defs>
     <style>
       @media (prefers-color-scheme: dark) {
-        #bg-rect { fill: #101a29; }
-        #blueGlow-rect { fill: url(#blueGlowDark); }
-        #blueGlow2-rect { fill: url(#blueGlow2Dark); }
-        #pinkPurpleGlow-rect { fill: url(#pinkPurpleGlowDark); }
+        #bg-layer { fill: url(#bgDark); }
+        #soft-glow { fill: url(#glowDark); }
+        .accent-arc { stroke: rgba(118, 156, 255, 0.35); }
+        .accent-dot { fill: rgba(154, 188, 255, 0.45); }
       }
     </style>
 
-    <!-- 亮色主题渐变 -->
-    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="0%" y2="100%">
-      <stop offset="0%" stop-color="#f9fcff" />
-      <stop offset="100%" stop-color="#f5f9fd" />
+    <linearGradient id="bgLight" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#f3f7ff" />
+      <stop offset="60%" stop-color="#e3edff" />
+      <stop offset="100%" stop-color="#d6e7ff" />
     </linearGradient>
-    
-    <!-- 中间区域淡蓝白光晕 -->
-    <radialGradient id="blueGlow" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
-      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.9" />
-      <stop offset="50%" stop-color="#f0f8ff" stop-opacity="0.5" />
-      <stop offset="100%" stop-color="#eef7fd" stop-opacity="0" />
-    </radialGradient>
-    
-    <!-- 左上角蓝白光晕  -->
-    <radialGradient id="blueGlow2" cx="15%" cy="15%" r="40%" fx="15%" fy="15%">
-      <stop offset="0%" stop-color="#d9efff" stop-opacity="0.85" />
-      <stop offset="40%" stop-color="#e5f4fd" stop-opacity="0.6" />
-      <stop offset="100%" stop-color="#e9f5fd" stop-opacity="0" />
-    </radialGradient>
-    
-    <!-- 右下角粉紫色光晕  -->
-    <radialGradient id="pinkPurpleGlow" cx="85%" cy="85%" r="40%" fx="85%" fy="85%">
-      <stop offset="0%" stop-color="#f7e6f9" stop-opacity="0.8" />
-      <stop offset="35%" stop-color="#f9edf8" stop-opacity="0.6" />
-      <stop offset="100%" stop-color="#f8f2f8" stop-opacity="0" />
+
+    <linearGradient id="bgDark" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0b1324" />
+      <stop offset="60%" stop-color="#162135" />
+      <stop offset="100%" stop-color="#1e2c44" />
+    </linearGradient>
+
+    <radialGradient id="glowLight" cx="20%" cy="15%" r="60%">
+      <stop offset="0%" stop-color="rgba(64,128,255,0.35)" />
+      <stop offset="40%" stop-color="rgba(64,128,255,0.18)" />
+      <stop offset="100%" stop-color="rgba(64,128,255,0)" />
     </radialGradient>
 
-    <!-- 暗色主题渐变 -->
-    <radialGradient id="blueGlowDark" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
-      <stop offset="0%" stop-color="#1e3a5e" stop-opacity="0.6" />
-      <stop offset="50%" stop-color="#1c314e" stop-opacity="0.3" />
-      <stop offset="100%" stop-color="#1a2d47" stop-opacity="0" />
+    <radialGradient id="glowDark" cx="20%" cy="15%" r="60%">
+      <stop offset="0%" stop-color="rgba(98,142,255,0.4)" />
+      <stop offset="50%" stop-color="rgba(98,142,255,0.18)" />
+      <stop offset="100%" stop-color="rgba(98,142,255,0)" />
     </radialGradient>
-    
-    <!-- 左上角蓝白光晕 - 暗色模式 -->
-    <radialGradient id="blueGlow2Dark" cx="15%" cy="15%" r="40%" fx="15%" fy="15%">
-      <stop offset="0%" stop-color="#1e3858" stop-opacity="0.85" />
-      <stop offset="40%" stop-color="#1a304f" stop-opacity="0.6" />
-      <stop offset="100%" stop-color="#172b45" stop-opacity="0" />
-    </radialGradient>
-    
-    <!-- 右下角粉紫色光晕 - 暗色模式 -->
-    <radialGradient id="pinkPurpleGlowDark" cx="85%" cy="85%" r="40%" fx="85%" fy="85%">
-      <stop offset="0%" stop-color="#2e2335" stop-opacity="0.85" />
-      <stop offset="35%" stop-color="#2a2035" stop-opacity="0.6" />
-      <stop offset="100%" stop-color="#2a202d" stop-opacity="0" />
+
+    <radialGradient id="glowSecondary" cx="80%" cy="70%" r="55%">
+      <stop offset="0%" stop-color="rgba(22,93,255,0.3)" />
+      <stop offset="50%" stop-color="rgba(22,93,255,0.12)" />
+      <stop offset="100%" stop-color="rgba(22,93,255,0)" />
     </radialGradient>
+
+    <linearGradient id="meshLight" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="rgba(255,255,255,0.6)" />
+      <stop offset="35%" stop-color="rgba(255,255,255,0.2)" />
+      <stop offset="100%" stop-color="rgba(255,255,255,0)" />
+    </linearGradient>
   </defs>
-  
-  <!-- 背景层 -->
-  <rect id="bg-rect" width="100%" height="100%" fill="url(#bgGradient)" />
-  
-  <!-- 中间淡蓝白光晕 -->
-  <rect id="blueGlow-rect" width="100%" height="100%" fill="url(#blueGlow)" />
-  
-  <!-- 左上蓝白光晕 -->
-  <rect id="blueGlow2-rect" width="100%" height="100%" fill="url(#blueGlow2)" />
-  
-  <!-- 右下粉紫光晕 -->
-  <rect id="pinkPurpleGlow-rect" width="100%" height="100%" fill="url(#pinkPurpleGlow)" />
-</svg>
+
+  <rect id="bg-layer" width="100%" height="100%" fill="url(#bgLight)" />
+  <rect id="soft-glow" width="100%" height="100%" fill="url(#glowLight)" />
+  <rect width="100%" height="100%" fill="url(#glowSecondary)" />
+  <rect width="100%" height="100%" fill="url(#meshLight)" />
+
+  <!-- 柔和块面光影，替代明显线条 -->
+  <g opacity="0.45">
+    <rect x="-40" y="520" width="520" height="220" rx="180" fill="rgba(255,255,255,0.25)" />
+    <rect x="760" y="90" width="520" height="210" rx="180" fill="rgba(255,255,255,0.22)" />
+    <rect x="420" y="620" width="560" height="190" rx="180" fill="rgba(255,255,255,0.18)" />
+  </g>
+
+  <!-- 去掉点状噪声，仅保留大区域柔光 -->
+</svg>

src/views/login/components/Login.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <h3 text-center m-0 mb-20px>{{ t("login.login") }}</h3>
+  <div class="auth-panel-form">
+    <h3 class="auth-panel-form__title" text-center>{{ t("login.login") }}</h3>
     <el-form
       ref="loginFormRef"
       :model="loginFormData"
@@ -225,11 +225,23 @@ function toOtherForm(type: "register" | "resetPwd") {
 </script>
 
 <style lang="scss" scoped>
+.auth-panel-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.auth-panel-form__title {
+  margin: 0 0 0.75rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
 .third-party-login {
   .divider-container {
     display: flex;
     align-items: center;
-    margin: 40px 0;
+    margin: 24px 0;
 
     .divider-line {
       flex: 1;

src/views/login/index.vue

@@ -1,7 +1,6 @@
 <template>
-  <div class="login-container">
-    <!-- 右侧切换主题、语言按钮  -->
-    <div class="login-toolbar">
+  <div class="auth-view">
+    <div class="auth-view__toolbar">
       <el-tooltip :content="t('login.themeToggle')" placement="bottom">
         <CommonWrapper>
           <DarkModeSwitch />
@@ -13,33 +12,61 @@
         </CommonWrapper>
       </el-tooltip>
     </div>
-    <!-- 登录页主体 -->
-    <div class="login-content">
-      <div class="login-card">
-        <div class="login-card__inner">
-          <!-- logo -->
-          <el-image :src="logo" class="w-84px h-auto" />
 
-          <!-- 标题 -->
-          <h2 class="my-4">
-            <el-badge :value="`v ${defaultSettings.version}`" type="success">
-              {{ defaultSettings.title }}
-            </el-badge>
-          </h2>
-
-          <!-- 组件切换 -->
-          <transition name="fade-slide" mode="out-in">
-            <component :is="formComponents[component]" v-model="component" class="w-90%" />
-          </transition>
+    <div class="auth-view__wrapper">
+      <!-- 可选：左侧产品介绍区域，如不需要可整段删除，右侧登录表单会自动居中展示 -->
+      <section class="auth-feature">
+        <div class="auth-feature__badge">
+          <span class="auth-feature__dot" />
+          Enterprise Ready
         </div>
-      </div>
-      <!-- 登录页底部版权 -->
-      <footer class="login-footer">
-        <el-text size="small">
-          Copyright © 2021 - 2025 youlai.tech All Rights Reserved.
-          <a href="http://beian.miit.gov.cn/" target="_blank">皖ICP备20006496号-2</a>
-        </el-text>
-      </footer>
+        <h1 class="auth-feature__title">企业级管理系统</h1>
+        <p class="auth-feature__subtitle">
+          提供安全、高效、可扩展的管理解决方案，助力企业数字化转型与业务增长。
+        </p>
+        <ul class="auth-feature__highlights">
+          <li>
+            <span>⦿</span>
+            统一身份认证与权限管理
+          </li>
+          <li>
+            <span>⦿</span>
+            数据安全与操作审计
+          </li>
+          <li>
+            <span>⦿</span>
+            灵活扩展与高可用架构
+          </li>
+        </ul>
+      </section>
+
+      <section class="auth-panel">
+        <div class="auth-panel__brand">
+          <div class="auth-panel__logo-wrap">
+            <el-image :src="logo" class="auth-panel__logo" />
+          </div>
+          <div class="auth-panel__meta">
+            <div class="auth-panel__title-row">
+              <span class="auth-panel__title">{{ defaultSettings.title }}</span>
+            </div>
+            <div v-if="defaultSettings.version" class="auth-panel__version-row">
+              <span class="auth-panel__version-label">Version</span>
+              <span class="auth-panel__version-pill">v{{ defaultSettings.version }}</span>
+            </div>
+          </div>
+        </div>
+
+        <transition name="fade-slide" mode="out-in">
+          <component :is="formComponents[component]" v-model="component" class="auth-panel__form" />
+        </transition>
+
+        <footer class="auth-panel__footer">
+          <el-text size="small">
+            Copyright © 2021 - 2025 youlai.tech
+            <a href="http://beian.miit.gov.cn/" target="_blank">皖ICP备20006496号-2</a>
+          </el-text>
+        </footer>
+      </section>
     </div>
   </div>
 </template>
@@ -68,7 +95,7 @@ const showVoteNotification = () => {
     title: "⭐ Gitee 2025 开源评选 · 诚邀您的支持！ 🙏",
     message: `我正在参加 Gitee 2025 最受欢迎的开源软件投票活动，快来给我投票吧！<br/><a href="https://gitee.com/activity/2025opensource?ident=I6VXEH" target="_blank" style="color: var(--el-color-primary); text-decoration: none; font-weight: 500;">点击投票 →</a>`,
     type: "success",
-    position: "bottom-right",
+    position: "bottom-left",
     duration: 0,
     dangerouslyUseHTMLString: true,
   });
@@ -87,97 +114,433 @@ onBeforeUnmount(() => {
 </script>
 
 <style lang="scss" scoped>
-$transition-duration: 0.3s;
-$transition-offset: 30px;
-.login-container {
+.auth-view {
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
   width: 100%;
   height: 100%;
+  padding: clamp(1rem, 3vw, 2rem);
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 20% 20%, rgba(64, 128, 255, 0.18), transparent 55%),
+    radial-gradient(circle at 80% 80%, rgba(22, 93, 255, 0.16), transparent 50%);
 
   &::before {
     position: fixed;
-    top: 0;
-    left: 0;
-    z-index: -1;
-    width: 100%;
-    height: 100%;
+    inset: 0;
+    z-index: -2;
     content: "";
-    background: url("@/assets/images/login-bg.svg") center center / cover;
+    background: url("@/assets/images/login-bg.svg") center/cover no-repeat;
+  }
+
+  &::after {
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    pointer-events: none;
+    content: "";
+    background: linear-gradient(120deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
   }
 }
 
-.login-toolbar {
-  position: fixed;
-  top: 10px;
-  right: 10px;
-  z-index: 10;
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  font-size: 1.125rem;
+.auth-view__toolbar {
+  display: inline-flex;
+  gap: 0.75rem;
+  align-self: flex-end;
+  padding: 0.5rem 0.75rem;
+  background-color: rgba(255, 255, 255, 0.85);
+  border: 1px solid rgba(22, 93, 255, 0.15);
+  border-radius: 999px;
+  box-shadow: 0 10px 30px rgba(22, 93, 255, 0.12);
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
 
-  @media (max-width: 480px) {
-    right: auto;
-    left: 10px;
+  &:hover {
+    box-shadow: 0 16px 40px rgba(22, 93, 255, 0.18);
+    transform: translateY(-2px);
   }
 
-  @media (min-width: 640px) {
-    top: 40px;
-    right: 40px;
+  @media (max-width: 640px) {
+    position: fixed;
+    top: 12px;
+    right: 16px;
+    z-index: 20;
+    align-self: flex-end;
+    justify-content: center;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    background-color: rgba(24, 28, 43, 0.8);
+    border-color: rgba(64, 128, 255, 0.3);
   }
 }
 
-.login-content {
-  display: flex;
+/* 应用内暗黑主题下顶部设置面板的深色样式 */
+.dark .auth-view__toolbar {
+  background-color: rgba(24, 28, 43, 0.9);
+  border-color: rgba(64, 128, 255, 0.35);
+  box-shadow:
+    0 10px 30px rgba(0, 0, 0, 0.7),
+    0 0 0 1px rgba(90, 140, 255, 0.25) inset;
+}
+
+.auth-view__wrapper {
+  display: grid;
   flex: 1;
-  align-items: center;
-  justify-content: center;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: clamp(1.5rem, 3vw, 3rem);
+  align-items: stretch;
+  padding: clamp(1.5rem, 2vw, 2.5rem);
 }
 
-.login-card {
-  width: 100%;
-  height: auto;
-  padding: 3rem;
-  border-radius: 0.5rem;
-  box-shadow: var(--el-box-shadow-light);
-
-  @media (min-width: 640px) {
-    width: 450px;
-    height: 700px;
-  }
-}
-
-.login-card__inner {
+.auth-feature {
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  padding: clamp(1.5rem, 3vw, 3rem);
+  color: rgba(20, 40, 80, 0.95);
+  text-shadow: 0 4px 16px rgba(15, 60, 110, 0.12);
+  animation: featureFade 0.8s ease-out;
+
+  @media (prefers-color-scheme: dark) {
+    color: rgba(236, 242, 255, 0.92);
+    text-shadow: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .auth-view__wrapper {
+    display: block;
+    padding: 1.25rem 0.75rem 1.75rem;
+  }
+
+  .auth-feature {
+    display: none;
+  }
+
+  .auth-panel {
+    width: 100%;
+    margin-inline: 0;
+    box-shadow:
+      0 12px 32px rgba(22, 93, 255, 0.18),
+      0 2px 8px rgba(22, 93, 255, 0.12);
+  }
+}
+
+.auth-feature__badge {
+  display: inline-flex;
+  gap: 0.5rem;
   align-items: center;
+  width: fit-content;
+  padding: 0.3rem 0.9rem;
+  font-size: 0.875rem;
+  color: rgba(22, 93, 255, 0.95);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  background: rgba(22, 93, 255, 0.1);
+  border-radius: 999px;
+
+  @media (prefers-color-scheme: dark) {
+    color: rgba(160, 190, 255, 0.95);
+    background: rgba(64, 128, 255, 0.12);
+  }
+}
+
+.auth-feature__dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  background: #165dff;
+  border-radius: 50%;
+  box-shadow: 0 0 12px rgba(22, 93, 255, 0.7);
+
+  @media (prefers-color-scheme: dark) {
+    background: #7aa2ff;
+  }
+}
+
+.auth-feature__title {
+  margin: 1.5rem 0 0.5rem;
+  font-size: clamp(2rem, 4vw, 2.75rem);
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.auth-feature__subtitle {
+  margin-bottom: 1.5rem;
+  font-size: 1rem;
+  line-height: 1.7;
+  color: rgba(35, 40, 65, 0.85);
+
+  @media (prefers-color-scheme: dark) {
+    color: rgba(220, 230, 255, 0.75);
+  }
+}
+
+.auth-feature__highlights {
+  display: grid;
+  gap: 0.75rem;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  li {
+    display: flex;
+    gap: 0.5rem;
+    align-items: flex-start;
+    padding: 0.75rem 1rem;
+    font-weight: 500;
+    color: rgba(32, 37, 60, 0.9);
+    background: rgba(255, 255, 255, 0.55);
+    border: 1px solid rgba(64, 128, 255, 0.08);
+    border-radius: 12px;
+    backdrop-filter: blur(6px);
+
+    span {
+      font-size: 0.75rem;
+      line-height: 1.6;
+      color: rgba(22, 93, 255, 0.8);
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    li {
+      color: rgba(230, 236, 255, 0.85);
+      background: rgba(18, 22, 36, 0.7);
+      border-color: rgba(98, 149, 255, 0.18);
+
+      span {
+        color: rgba(122, 162, 255, 0.9);
+      }
+    }
+  }
+}
+
+.auth-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  justify-content: flex-start;
+  width: min(560px, 100%);
+  padding: clamp(2rem, 3vw, 2.75rem);
+  margin-inline: auto;
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid rgba(22, 93, 255, 0.1);
+  border-radius: 24px;
+  box-shadow:
+    0 16px 48px rgba(22, 93, 255, 0.12),
+    0 4px 16px rgba(22, 93, 255, 0.08),
+    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
+  backdrop-filter: blur(20px);
+  animation: panelLift 0.7s ease;
+
+  @media (prefers-color-scheme: dark) {
+    background: rgba(18, 20, 32, 0.88);
+    border-color: rgba(64, 128, 255, 0.25);
+    box-shadow:
+      0 20px 60px rgba(0, 0, 0, 0.6),
+      0 4px 16px rgba(0, 0, 0, 0.4),
+      0 0 0 1px rgba(90, 140, 255, 0.12) inset;
+  }
+}
+
+/* 应用内暗黑主题（例如 html/body 上挂 .dark 类）下的登录表单样式 */
+.dark .auth-panel {
+  background: rgba(26, 32, 48, 0.9);
+  border-color: rgba(86, 140, 255, 0.28);
+  box-shadow:
+    0 20px 60px rgba(0, 0, 0, 0.58),
+    0 4px 16px rgba(0, 0, 0, 0.36),
+    0 0 0 1px rgba(110, 150, 255, 0.16) inset;
+}
+
+.auth-panel__brand {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 1.25rem;
+  margin-bottom: 1.5rem;
+  border-bottom: 1px solid rgba(22, 93, 255, 0.06);
+
+  @media (prefers-color-scheme: dark) {
+    border-color: rgba(64, 128, 255, 0.12);
+  }
+}
+
+.auth-panel__logo-wrap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 52px;
+  height: 52px;
+  background: radial-gradient(circle at 30% 20%, #ffffff, #e6efff);
+  border-radius: 18px;
+  box-shadow:
+    0 8px 20px rgba(22, 93, 255, 0.16),
+    0 0 0 1px rgba(255, 255, 255, 0.8) inset;
+
+  @media (prefers-color-scheme: dark) {
+    background: radial-gradient(circle at 30% 20%, #1f2438, #141827);
+    box-shadow:
+      0 8px 20px rgba(0, 0, 0, 0.7),
+      0 0 0 1px rgba(90, 140, 255, 0.3) inset;
+  }
+}
+
+.auth-panel__logo {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+}
+
+.auth-panel__meta {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.auth-panel__title-row {
+  display: flex;
+  gap: 0.5rem;
+  align-items: baseline;
+}
+
+.auth-panel__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 1.2rem;
+  font-weight: 650;
+  line-height: 1.4;
+  color: var(--el-text-color-primary);
+  white-space: nowrap;
+}
+
+.auth-panel__version-row {
+  display: inline-flex;
+  gap: 0.5rem;
+  align-items: center;
+  font-size: 0.78rem;
+}
+
+.auth-panel__version-label {
+  color: var(--el-text-color-placeholder);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.auth-panel__version-pill {
+  padding: 0.1rem 0.55rem;
+  font-weight: 500;
+  color: var(--el-color-primary);
+  background: linear-gradient(135deg, rgba(22, 93, 255, 0.12), rgba(64, 150, 255, 0.18));
+  border: 1px solid rgba(22, 93, 255, 0.18);
+  border-radius: 999px;
+}
+
+.auth-panel__form {
   width: 100%;
+  max-width: 100%;
+  margin-inline: auto;
+
+  :deep(.el-form-item) {
+    margin-bottom: 1.25rem;
+  }
+
+  :deep(.el-input__wrapper) {
+    box-shadow: 0 0 0 1px var(--el-border-color) inset;
+    transition: all 0.2s ease;
+
+    &:hover {
+      box-shadow: 0 0 0 1px var(--el-border-color-hover) inset;
+    }
+
+    &.is-focus {
+      box-shadow: 0 0 0 1px var(--el-color-primary) inset;
+    }
+  }
+
+  :deep(.el-card) {
+    background: transparent;
+    box-shadow: none;
+  }
 }
 
-.login-footer {
-  position: fixed;
-  bottom: 0;
-  padding: 0.625rem 0;
+.auth-panel__footer {
+  padding-top: 1.25rem;
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
   text-align: center;
+  border-top: 1px solid rgba(22, 93, 255, 0.06);
+
+  a {
+    margin-left: 0.25rem;
+    color: rgba(22, 93, 255, 0.85);
+    text-decoration: none;
+    transition: color 0.2s ease;
+
+    &:hover {
+      color: rgba(22, 93, 255, 1);
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border-color: rgba(64, 128, 255, 0.12);
+
+    a {
+      color: rgba(140, 170, 255, 0.88);
+
+      &:hover {
+        color: rgba(160, 190, 255, 1);
+      }
+    }
+  }
 }
 
-.fade-slide-leave-active,
-.fade-slide-enter-active {
-  transition: all $transition-duration;
+@keyframes featureFade {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes panelLift {
+  from {
+    opacity: 0;
+    transform: translateY(30px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.fade-slide-enter-active,
+.fade-slide-leave-active {
+  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .fade-slide-enter-from {
   opacity: 0;
-  transform: translateX(-$transition-offset);
+  transform: translateX(-40px) scale(0.95);
 }
 
 .fade-slide-leave-to {
   opacity: 0;
-  transform: translateX($transition-offset);
+  transform: translateX(40px) scale(0.95);
+}
+
+.fade-slide-enter-to,
+.fade-slide-leave-from {
+  opacity: 1;
+  transform: translateX(0) scale(1);
 }
 </style>