@penjc/homepage/app/globals.css

个人主页模板，支持博客、随笔等功能

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #ffffff;
  }
  
  .dark body {
    background-color: #0f172a;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
  }
  
  /* 滚动条样式 */
  ::-webkit-scrollbar {
    width: 6px;
  }
  
  ::-webkit-scrollbar-track {
    @apply bg-gray-50 dark:bg-gray-900;
  }
  
  ::-webkit-scrollbar-thumb {
    @apply bg-gray-300 dark:bg-gray-700 rounded-full;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400 dark:bg-gray-600;
  }
}

@layer components {
  .container-custom {
    @apply max-w-6xl mx-auto px-4 sm:px-6 lg:px-8;
  }
  
  .btn-primary {
    @apply bg-primary-800 hover:bg-primary-900 text-white font-medium py-2.5 px-6 rounded-md transition-colors duration-200 border border-primary-800 hover:border-primary-900;
  }
  
  .btn-secondary {
    @apply bg-white hover:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100 font-medium py-2.5 px-6 rounded-md transition-colors duration-200 border border-gray-200 dark:border-gray-700;
  }
  
  .card {
    @apply bg-white dark:bg-gray-900 rounded-lg shadow-sm border border-gray-200 dark:border-gray-800 transition-all duration-200;
  }
  
  .card-hover {
    @apply card hover:shadow-md hover:border-gray-300 dark:hover:border-gray-700;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  .gradient-text {
    @apply text-primary-800 dark:text-primary-200;
  }
  
  .backdrop-blur-glass {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  
  /* 搜索高亮样式 */
  .search-highlight {
    @apply bg-yellow-100 text-yellow-900 dark:bg-yellow-900 dark:text-yellow-100;
  }
  
  /* 简约滑块样式 */
  .slider {
    background: #e2e8f0;
  }
  
  .dark .slider {
    background: #334155;
  }
  
  .slider::-webkit-slider-thumb {
    appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #1e293b;
    border: none;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  .dark .slider::-webkit-slider-thumb {
    background: #f1f5f9;
  }
  
  .slider::-moz-range-thumb {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #1e293b;
    border: none;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  .dark .slider::-moz-range-thumb {
    background: #f1f5f9;
  }

  /* Loading animations */
  .loading-shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
  }

  .dark .loading-shimmer {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 200% 100%;
  }

  @keyframes shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }

  /* Skeleton loading for cards */
  .skeleton {
    @apply bg-gray-200 dark:bg-gray-700 rounded animate-pulse;
  }

  .skeleton-text {
    @apply h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse;
  }

  .skeleton-text-sm {
    @apply h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse;
  }

  /* Fade in animation */
  .fade-in {
    animation: fadeIn 0.3s ease-in-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Wave animation for loading spinner */
  @keyframes wave {
    0%, 100% {
      transform: scaleY(0.4);
    }
    50% {
      transform: scaleY(1);
    }
  }

  /* Orbit animation for tech elements */
  @keyframes orbit {
    from {
      transform: rotate(0deg) translateX(40px) rotate(0deg);
    }
    to {
      transform: rotate(360deg) translateX(40px) rotate(-360deg);
    }
  }

  /* Breathing effect */
  @keyframes breathe {
    0%, 100% {
      transform: scale(1);
      opacity: 0.3;
    }
    50% {
      transform: scale(1.05);
      opacity: 0.6;
    }
  }

  /* Loading overlay */
  .loading-overlay {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
  }

  .dark .loading-overlay {
    background: rgba(17, 24, 39, 0.8);
  }
}