| import type { Config } from "tailwindcss"; |
|
|
| const config: Config = { |
| content: ["./index.html", "./src/**/*.{ts,tsx}"], |
| theme: { |
| extend: { |
| colors: { |
| brand: { |
| 50: "#e6f0ff", |
| 100: "#cce0ff", |
| 400: "#4d94ff", |
| 500: "#1a6bff", |
| 600: "#0055e6", |
| 700: "#003db3", |
| }, |
| surface: { |
| 900: "#0a0c10", |
| 800: "#0f1218", |
| 700: "#161b24", |
| 600: "#1e2530", |
| 500: "#252d3a", |
| 400: "#2e3847", |
| }, |
| }, |
| fontFamily: { |
| sans: ["Inter", "system-ui", "sans-serif"], |
| mono: ["JetBrains Mono", "monospace"], |
| }, |
| animation: { |
| "spin-slow": "spin 3s linear infinite", |
| "pulse-slow": "pulse 3s ease-in-out infinite", |
| "fade-in": "fadeIn 0.4s ease-out forwards", |
| "slide-up": "slideUp 0.4s ease-out forwards", |
| "bounce-subtle": "bounceSubtle 2s ease-in-out infinite", |
| shimmer: "shimmer 2s linear infinite", |
| }, |
| keyframes: { |
| fadeIn: { |
| from: { opacity: "0" }, |
| to: { opacity: "1" }, |
| }, |
| slideUp: { |
| from: { opacity: "0", transform: "translateY(20px)" }, |
| to: { opacity: "1", transform: "translateY(0)" }, |
| }, |
| bounceSubtle: { |
| "0%, 100%": { transform: "translateY(0)" }, |
| "50%": { transform: "translateY(-6px)" }, |
| }, |
| shimmer: { |
| "0%": { backgroundPosition: "-200% 0" }, |
| "100%": { backgroundPosition: "200% 0" }, |
| }, |
| }, |
| backgroundImage: { |
| "grid-pattern": |
| "linear-gradient(rgba(30,37,48,0.8) 1px, transparent 1px), linear-gradient(90deg, rgba(30,37,48,0.8) 1px, transparent 1px)", |
| "hero-glow": |
| "radial-gradient(ellipse 80% 50% at 50% -20%, rgba(26,107,255,0.3), transparent)", |
| "card-glow": |
| "radial-gradient(ellipse 60% 40% at 50% 0%, rgba(26,107,255,0.08), transparent)", |
| }, |
| }, |
| }, |
| plugins: [], |
| }; |
|
|
| export default config; |
|
|
