Spaces:
Sleeping
Sleeping
File size: 2,893 Bytes
91d209c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
// Deep ocean-inspired dark theme
void: {
50: '#f0f4f8',
100: '#d9e2ec',
200: '#bcccdc',
300: '#9fb3c8',
400: '#829ab1',
500: '#627d98',
600: '#486581',
700: '#334e68',
800: '#243b53',
900: '#102a43',
950: '#0a1929',
},
// Electric coral accent
coral: {
50: '#fff5f5',
100: '#ffe3e3',
200: '#ffc9c9',
300: '#ffa8a8',
400: '#ff8787',
500: '#ff6b6b',
600: '#fa5252',
700: '#f03e3e',
800: '#e03131',
900: '#c92a2a',
},
// Cyan electric accent
electric: {
50: '#e3fafc',
100: '#c5f6fa',
200: '#99e9f2',
300: '#66d9e8',
400: '#3bc9db',
500: '#22b8cf',
600: '#15aabf',
700: '#1098ad',
800: '#0c8599',
900: '#0b7285',
},
// Golden amber for highlights
amber: {
400: '#fbbf24',
500: '#f59e0b',
600: '#d97706',
},
},
fontFamily: {
display: ['Clash Display', 'system-ui', 'sans-serif'],
body: ['Satoshi', 'system-ui', 'sans-serif'],
mono: ['JetBrains Mono', 'Menlo', 'monospace'],
},
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
'mesh-pattern': `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
},
animation: {
'float': 'float 6s ease-in-out infinite',
'pulse-glow': 'pulse-glow 2s ease-in-out infinite',
'shimmer': 'shimmer 2s linear infinite',
'spin-slow': 'spin 3s linear infinite',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' },
},
'pulse-glow': {
'0%, 100%': { opacity: '1', boxShadow: '0 0 20px rgba(255, 107, 107, 0.5)' },
'50%': { opacity: '0.8', boxShadow: '0 0 40px rgba(255, 107, 107, 0.8)' },
},
shimmer: {
'0%': { backgroundPosition: '-200% 0' },
'100%': { backgroundPosition: '200% 0' },
},
},
},
},
plugins: [],
}
|