paseo/packages/website/src/styles.css

@import 'tailwindcss';

/* Title font - centralized for easy changes */
.font-title {
  font-family: inherit;
}

/* Inline code styling - applies to code elements not inside pre blocks */
:not(pre) > code {
  background-color: var(--color-muted);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
}

/* Markdown rendering styles for /changelog */
.changelog-markdown {
  color: rgba(250, 250, 250, 0.82);
  line-height: 1.7;
}

.changelog-markdown h1 {
  color: var(--color-foreground);
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 600;
  margin-bottom: 1rem;
}

.changelog-markdown h2 {
  color: var(--color-foreground);
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.changelog-markdown h3 {
  color: var(--color-foreground);
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.changelog-markdown p {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.changelog-markdown ul {
  list-style: disc;
  margin-left: 1.25rem;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  display: grid;
  gap: 0.5rem;
}

.changelog-markdown li {
  padding-left: 0.125rem;
}

.changelog-markdown a {
  color: var(--color-foreground);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.changelog-markdown a:hover {
  color: rgba(250, 250, 250, 0.8);
}

@theme {
  --color-background: #0a0a0a;
  --color-foreground: #fafafa;
  --color-muted: #262626;
  --color-muted-foreground: #a1a1aa;
  --color-card: #171717;
  --color-border: #27272a;
  --color-primary: #3b82f6;
  --color-primary-foreground: #ffffff;
  --color-secondary: #27272a;
  --color-secondary-foreground: #fafafa;

  --animate-flutter-left: flutter-left 0.6s ease-in-out infinite;
  --animate-flutter-right: flutter-right 0.6s ease-in-out infinite;
  --animate-float: float 8s ease-in-out infinite;
  --animate-flutter-body: flutter-body 0.5s ease-in-out infinite;
}

@keyframes flutter-left {
  0%,
  100% {
    transform: rotateY(0deg) rotateZ(0deg);
  }
  50% {
    transform: rotateY(50deg) rotateZ(-5deg);
  }
}

@keyframes flutter-right {
  0%,
  100% {
    transform: rotateY(0deg) rotateZ(0deg);
  }
  50% {
    transform: rotateY(-50deg) rotateZ(5deg);
  }
}

@keyframes flutter-body {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-2px) rotate(-3deg);
  }
}

@keyframes float-1 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  20% {
    transform: translate(12px, -18px) rotate(5deg);
  }
  40% {
    transform: translate(-8px, -30px) rotate(-3deg);
  }
  60% {
    transform: translate(-15px, -12px) rotate(2deg);
  }
  80% {
    transform: translate(5px, 8px) rotate(-4deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes float-2 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  15% {
    transform: translate(-10px, -12px) rotate(-4deg);
  }
  35% {
    transform: translate(8px, -25px) rotate(3deg);
  }
  55% {
    transform: translate(15px, -8px) rotate(-2deg);
  }
  75% {
    transform: translate(-5px, 10px) rotate(5deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes float-3 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(18px, -10px) rotate(3deg);
  }
  50% {
    transform: translate(5px, -35px) rotate(-5deg);
  }
  75% {
    transform: translate(-12px, -15px) rotate(4deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}