- Create HeroSection with animated search bar and stat counters - Add LiveMatchTicker with auto-scrolling recent matches - Build FlashLeaderboard "Wall of Shame" with podium display - Implement FeatureShowcase with scroll-triggered animations - Add NeonCTA call-to-action section with trust badges - Create reusable NeonButton component with glow effects Accessibility improvements: - Add aria-labels, aria-hidden for decorative elements - Implement focus-visible ring styles for keyboard navigation - Support prefers-reduced-motion across all animations - Use semantic HTML (article, nav, dl) for screen readers - Improve color contrast ratios for WCAG compliance 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
144 lines
3.2 KiB
JavaScript
144 lines
3.2 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: ['./src/**/*.{html,js,svelte,ts}'],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// CS2 Team colors
|
|
terrorist: {
|
|
DEFAULT: '#d4a74a',
|
|
light: '#e5c674',
|
|
dark: '#b38a3a'
|
|
},
|
|
ct: {
|
|
DEFAULT: '#5e98d9',
|
|
light: '#7eaee5',
|
|
dark: '#4a7ab3'
|
|
},
|
|
// Neon Esports colors
|
|
neon: {
|
|
blue: '#00d4ff',
|
|
gold: '#ffd700',
|
|
red: '#ff3366',
|
|
green: '#00ff88',
|
|
purple: '#8b5cf6'
|
|
},
|
|
void: {
|
|
DEFAULT: '#0a0a0f',
|
|
light: '#12121a'
|
|
}
|
|
},
|
|
fontFamily: {
|
|
sans: [
|
|
'Inter',
|
|
'system-ui',
|
|
'-apple-system',
|
|
'BlinkMacSystemFont',
|
|
'"Segoe UI"',
|
|
'Roboto',
|
|
'sans-serif'
|
|
],
|
|
mono: [
|
|
'"JetBrains Mono"',
|
|
'"Fira Code"',
|
|
'Consolas',
|
|
'Monaco',
|
|
'"Courier New"',
|
|
'monospace'
|
|
]
|
|
},
|
|
animation: {
|
|
ticker: 'ticker 60s linear infinite',
|
|
float: 'float 6s ease-in-out infinite',
|
|
'glow-pulse': 'glow-pulse 2s ease-in-out infinite',
|
|
'fade-up': 'fade-up 0.6s ease-out forwards'
|
|
},
|
|
keyframes: {
|
|
ticker: {
|
|
'0%': { transform: 'translateX(0)' },
|
|
'100%': { transform: 'translateX(-50%)' }
|
|
},
|
|
float: {
|
|
'0%, 100%': { transform: 'translateY(0)' },
|
|
'50%': { transform: 'translateY(-10px)' }
|
|
},
|
|
'glow-pulse': {
|
|
'0%, 100%': { opacity: '1' },
|
|
'50%': { opacity: '0.5' }
|
|
},
|
|
'fade-up': {
|
|
'0%': { opacity: '0', transform: 'translateY(20px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' }
|
|
}
|
|
},
|
|
backgroundImage: {
|
|
'grid-pattern':
|
|
'linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px)'
|
|
},
|
|
backgroundSize: {
|
|
grid: '50px 50px'
|
|
}
|
|
}
|
|
},
|
|
plugins: [require('daisyui')],
|
|
daisyui: {
|
|
themes: [
|
|
{
|
|
cs2light: {
|
|
primary: '#5e98d9',
|
|
'primary-focus': '#4a7ab3',
|
|
'primary-content': '#ffffff',
|
|
secondary: '#d4a74a',
|
|
'secondary-focus': '#b38a3a',
|
|
'secondary-content': '#ffffff',
|
|
accent: '#37cdbe',
|
|
'accent-focus': '#2aa79b',
|
|
'accent-content': '#ffffff',
|
|
neutral: '#2a2e37',
|
|
'neutral-focus': '#16181d',
|
|
'neutral-content': '#ffffff',
|
|
'base-100': '#ffffff',
|
|
'base-200': '#f9fafb',
|
|
'base-300': '#efefef',
|
|
'base-content': '#1f2937',
|
|
info: '#3abff8',
|
|
success: '#36d399',
|
|
warning: '#fbbd23',
|
|
error: '#f87272'
|
|
},
|
|
cs2dark: {
|
|
primary: '#5e98d9',
|
|
'primary-focus': '#7eaee5',
|
|
'primary-content': '#ffffff',
|
|
secondary: '#d4a74a',
|
|
'secondary-focus': '#e5c674',
|
|
'secondary-content': '#ffffff',
|
|
accent: '#37cdbe',
|
|
'accent-focus': '#2aa79b',
|
|
'accent-content': '#ffffff',
|
|
neutral: '#1f2937',
|
|
'neutral-focus': '#111827',
|
|
'neutral-content': '#d1d5db',
|
|
'base-100': '#0f172a',
|
|
'base-200': '#1e293b',
|
|
'base-300': '#334155',
|
|
'base-content': '#e2e8f0',
|
|
info: '#3abff8',
|
|
success: '#36d399',
|
|
warning: '#fbbd23',
|
|
error: '#f87272'
|
|
}
|
|
},
|
|
'light',
|
|
'dark'
|
|
],
|
|
darkTheme: 'cs2dark',
|
|
base: true,
|
|
styled: true,
|
|
utils: true,
|
|
prefix: '',
|
|
logs: true,
|
|
themeRoot: ':root'
|
|
}
|
|
};
|