@gv-sh/specgen-user/src/styles/globals.css

[](https://github.com/gv-sh/specgen-user)

/* src/styles/globals.css */

/* Typography */
h1, h2, h3, h4, h5, h6 {
    @apply font-medium tracking-tight text-foreground;
  }
  
  h1 {
    @apply text-4xl lg:text-5xl;
  }
  
  h2 {
    @apply text-3xl lg:text-4xl;
  }
  
  h3 {
    @apply text-2xl lg:text-3xl;
  }
  
  h4 {
    @apply text-xl lg:text-2xl;
  }
  
  h5 {
    @apply text-lg lg:text-xl;
  }
  
  p {
    @apply leading-7 [&:not(:first-child)]:mt-6;
  }
  
  blockquote {
    @apply mt-6 border-l-2 pl-6 italic;
  }
  
  /* Focus styles */
  *:focus-visible {
    @apply outline-none ring-2 ring-ring ring-offset-2;
  }
  
  /* Animation defaults */
  .animate-in {
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
  }
  
  .fade-in {
    opacity: 0;
  }
  
  .slide-in-from-top {
    transform: translateY(-10px);
  }
  
  .slide-in-from-bottom {
    transform: translateY(10px);
  }

@keyframes highlight {
  0% {
    background-color: hsl(var(--primary) / 0.2);
  }
  100% {
    background-color: transparent;
  }
}

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

.animate-highlight {
  animation: highlight 1s ease-out;
}

.animate-shimmer {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 25%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.3) 75%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  background-position: -100% 0;
  background-repeat: no-repeat;
  background-blend-mode: soft-light;
  animation: shimmer 2.5s infinite;
}

@theme{
  --spacing : 1px;
}