practice_code/web/czr/app/index.css

@import "@radix-ui/themes/styles.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --transition-duration: 150ms;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --hljs-theme: 'github';
}

:root[class~="dark"] {
  --hljs-theme: 'github-dark';
}

/* 确保 Radix UI 主题类包裹整个应用 */
.radix-themes {
  transition:
    background-color var(--transition-duration) var(--transition-easing),
    color var(--transition-duration) var(--transition-easing);
  min-height: 100%;
}

/* 基础布局样式 */
html, 
body {
  height: 100%;
}

/* 添加暗色模式支持 */
.radix-themes-dark {
  @apply dark;
}

/* 隐藏不活跃的主题样式 */
[data-theme="light"] .hljs-dark {
  display: none;
}

[data-theme="dark"] .hljs-light {
  display: none;
}

/* 导航栏基础样式 */
.nav-container {
  @apply fixed top-0 left-0 right-0 z-50;
  @apply bg-white/80 dark:bg-gray-900/80;
  @apply backdrop-blur-sm;
  @apply border-b border-gray-200 dark:border-gray-700;
}

.nav-content {
  @apply container mx-auto px-4;
  @apply flex items-center justify-between;
  @apply h-16;
}

.nav-logo {
  @apply text-xl font-bold;
  @apply text-gray-800 dark:text-white;
  @apply hover:text-gray-600 dark:hover:text-gray-300;
  @apply transition-colors duration-200;
}

.nav-links {
  @apply hidden md:flex items-center space-x-8;
}

.nav-link {
  @apply text-gray-600 dark:text-gray-300;
  @apply hover:text-gray-900 dark:hover:text-white;
  @apply transition-colors duration-200;
  @apply font-medium;
}

/* 移动端菜单按钮 */
.mobile-menu-button {
  @apply md:hidden;
  @apply p-2 rounded-md;
  @apply text-gray-600 dark:text-gray-300;
  @apply hover:bg-gray-100 dark:hover:bg-gray-800;
  @apply transition-colors duration-200;
}

/* 移动端导航菜单 */
.mobile-nav {
  @apply md:hidden;
  @apply fixed top-16 left-0 right-0;
  @apply bg-white dark:bg-gray-900;
  @apply border-b border-gray-200 dark:border-gray-700;
  @apply shadow-lg;
}

.mobile-nav-links {
  @apply flex flex-col space-y-4;
  @apply p-4;
}

.mobile-nav-link {
  @apply text-gray-600 dark:text-gray-300;
  @apply hover:text-gray-900 dark:hover:text-white;
  @apply transition-colors duration-200;
  @apply font-medium;
  @apply block;
  @apply py-2;
}

/* 激活状态的导航链接 */
.nav-link.active,
.mobile-nav-link.active {
  @apply text-blue-600 dark:text-blue-400;
}



/* 注意：每个路径都需要在 SVG 中设置 --path-length 变量 */
.animated-text {
  max-width: 100%;
  height: auto;
}

.animated-text path {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 2;
  /* 使用每个路径自己的长度 */
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: var(--path-length);
  animation: logo-anim 15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin: center;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes logo-anim {
  0% {
    stroke-dashoffset: var(--path-length);
    stroke-dasharray: var(--path-length) var(--path-length);
    opacity: 0;
    fill: transparent;
  }

  5% {
    opacity: 1;
    stroke-dashoffset: var(--path-length);
    stroke-dasharray: var(--path-length) var(--path-length);
  }

  50% {
    stroke-dashoffset: 0;
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: transparent;
  }

  60% {
    stroke-dashoffset: 0;
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: currentColor;
    opacity: 1;
  }

  75% {
    stroke-dashoffset: 0;
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: currentColor;
    opacity: 1;
  }

  85% {
    stroke-dashoffset: 0;
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: transparent;
    opacity: 1;
  }

  95% {
    stroke-dashoffset: var(--path-length);
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: transparent;
    opacity: 1;
  }

  100% {
    stroke-dashoffset: var(--path-length);
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: transparent;
    opacity: 0;
  }
}

/* 确保在暗色模式下的颜色正确 */
@media (prefers-color-scheme: dark) {
  .animated-text path {
    stroke: currentColor;
  }
}