Files
csgowtf/tailwind.config.cjs
vikingowl 1ddda81d93 feat: Add neon esports landing page with WCAG accessibility
- 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>
2025-12-07 16:10:13 +01:00

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'
}
};