src/index.css - main - kantser/sait

src/index.css
107 строк2 KB
Edward
first commit
05 сен 2025, 22:26
05 сен 2025, 22:26e459197
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    @apply bg-background text-text-primary font-sans text-base leading-relaxed;
    overflow-x: hidden;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-heading font-bold leading-tight tracking-tight;
  }

  h1 {
    @apply text-4xl md:text-5xl lg:text-6xl;
  }

  h2 {
    @apply text-3xl md:text-4xl lg:text-5xl;
  }

  h3 {
    @apply text-2xl md:text-3xl;
  }

  h4 {
    @apply text-xl md:text-2xl;
  }

  p {
    @apply mb-4;
  }

  a {
    @apply transition-colors duration-300 hover:text-accent;
  }

  .section {
    @apply py-16 md:py-24 lg:py-32;
  }

  .container {
    @apply px-4 mx-auto w-full max-w-7xl;
  }

  .btn {
    @apply inline-flex items-center justify-center px-8 py-3 text-base font-medium text-white transition-colors duration-300 rounded-lg bg-accent hover:bg-accent-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent;
  }

  .btn-outline {
    @apply bg-transparent border-2 border-accent text-accent hover:bg-accent hover:text-white;
  }

  .section-title {
    @apply relative inline-block mb-12 text-3xl font-bold text-center md:text-4xl lg:text-5xl text-primary;
  }

  .section-title::after {
    @apply absolute bottom-0 left-1/2 w-20 h-1 -translate-x-1/2 bg-accent content-[''];
    bottom: -12px;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    @apply w-2;
  }

  ::-webkit-scrollbar-track {
    @apply bg-background-dark;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-accent rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-accent-dark;
  }

  /* Animation classes */
  .animate-fade-in {
    @apply animate-fade-in;
  }

  .animate-slide-up {
    @apply animate-slide-up;
  }

  .animate-slide-down {
    @apply animate-slide-down;
  }

  .animate-slide-left {
    @apply animate-slide-left;
  }

  .animate-slide-right {
    @apply animate-slide-right;
  }
}