soccer-bracket/tailwind.config.js at main · qtrandev/soccer-bracket · GitHub

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,jsx}'],
  theme: {
    extend: {
      colors: {
        pitch: {
          950: '#020a05',
          900: '#050d08',
          800: '#091a0f',
          700: '#0f2918',
          600: '#163d22',
          500: '#1e5430',
        },
        grass: {
          400: '#4ade80',
          500: '#22c55e',
          600: '#16a34a',
        },
        gold: {
          400: '#fbbf24',
          500: '#f59e0b',
          600: '#d97706',
        },
      },
      fontFamily: {
        display: ['system-ui', 'sans-serif'],
      },
      animation: {
        'fade-in': 'fadeIn 0.3s ease-out',
        'slide-up': 'slideUp 0.4s ease-out',
        'pulse-green': 'pulseGreen 2s infinite',
        'goal-pop': 'goalPop 0.7s ease-out',
        'goal-toast': 'goalToast 3s ease-out forwards',
        'ball-from-left': 'ballFromLeft 1.2s ease-in-out forwards',
        'ball-from-right': 'ballFromRight 1.2s ease-in-out forwards',
        'stat-bump': 'statBump 0.5s ease-out',
        'overlay-lifecycle': 'overlayLifecycle 6.5s ease-in-out forwards',
        'goal-flag-drop': 'goalFlagDrop 0.65s cubic-bezier(0.34,1.56,0.64,1) forwards',
        'goal-text-in': 'goalTextIn 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.4s both',
        'ball-from-left-alt': 'ballFromLeftAlt 1.1s 0.28s ease-in-out both',
        'ball-from-right-alt': 'ballFromRightAlt 1.1s 0.28s ease-in-out both',
        'goal-card-flash': 'goalCardFlash 1.8s ease-out forwards',
        'score-pop': 'scorePop 0.9s cubic-bezier(0.34,1.56,0.64,1) forwards',
      },
      keyframes: {
        fadeIn: { from: { opacity: 0 }, to: { opacity: 1 } },
        slideUp: { from: { opacity: 0, transform: 'translateY(16px)' }, to: { opacity: 1, transform: 'translateY(0)' } },
        pulseGreen: {
          '0%, 100%': { boxShadow: '0 0 0 0 rgba(34,197,94,0.4)' },
          '50%': { boxShadow: '0 0 0 8px rgba(34,197,94,0)' },
        },
        goalPop: {
          '0%':   { transform: 'scale(1)' },
          '20%':  { transform: 'scale(1.65)' },
          '55%':  { transform: 'scale(1.2)' },
          '78%':  { transform: 'scale(1.4)' },
          '100%': { transform: 'scale(1)' },
        },
        goalToast: {
          '0%':   { opacity: '0', transform: 'translateY(5px) scale(0.8)' },
          '12%':  { opacity: '1', transform: 'translateY(0) scale(1.08)' },
          '75%':  { opacity: '1', transform: 'translateY(0) scale(1)' },
          '100%': { opacity: '0', transform: 'translateY(-5px) scale(0.95)' },
        },
        ballFromLeft: {
          '0%':   { transform: 'translate(calc(-50% - 88px), -50%) scale(0.5)', opacity: '0' },
          '8%':   { opacity: '1' },
          '45%':  { transform: 'translate(-50%, calc(-50% - 20px)) scale(1.5)', opacity: '1' },
          '92%':  { opacity: '0.8' },
          '100%': { transform: 'translate(calc(-50% + 88px), calc(-50% + 4px)) scale(0.35)', opacity: '0' },
        },
        ballFromRight: {
          '0%':   { transform: 'translate(calc(-50% + 88px), -50%) scale(0.5)', opacity: '0' },
          '8%':   { opacity: '1' },
          '45%':  { transform: 'translate(-50%, calc(-50% - 20px)) scale(1.5)', opacity: '1' },
          '92%':  { opacity: '0.8' },
          '100%': { transform: 'translate(calc(-50% - 88px), calc(-50% + 4px)) scale(0.35)', opacity: '0' },
        },
        statBump: {
          '0%':   { transform: 'scale(1)' },
          '35%':  { transform: 'scale(1.7)' },
          '65%':  { transform: 'scale(1.2)' },
          '100%': { transform: 'scale(1)' },
        },
        confettiFall: {
          '0%':   { transform: 'translateY(-10px) rotate(0deg)', opacity: '0' },
          '4%':   { opacity: '1' },
          '85%':  { opacity: '1' },
          '100%': { transform: 'translateY(110vh) rotate(720deg)', opacity: '0' },
        },
        overlayLifecycle: {
          '0%':   { opacity: '0' },
          '5%':   { opacity: '1' },
          '85%':  { opacity: '1' },
          '100%': { opacity: '0' },
        },
        goalFlagDrop: {
          '0%':   { transform: 'translateY(-80px) scale(0.5)', opacity: '0' },
          '55%':  { transform: 'translateY(10px) scale(1.07)', opacity: '1' },
          '75%':  { transform: 'translateY(-4px) scale(0.97)', opacity: '1' },
          '90%':  { transform: 'translateY(2px) scale(1.01)', opacity: '1' },
          '100%': { transform: 'translateY(0) scale(1)', opacity: '1' },
        },
        goalTextIn: {
          '0%':   { transform: 'scale(0.1) rotate(-15deg)', opacity: '0' },
          '55%':  { transform: 'scale(1.18) rotate(4deg)', opacity: '1' },
          '75%':  { transform: 'scale(0.94) rotate(-2deg)', opacity: '1' },
          '100%': { transform: 'scale(1) rotate(0deg)', opacity: '1' },
        },
        ballFromLeftAlt: {
          '0%':   { transform: 'translate(calc(-50% - 110px), calc(-50% + 10px)) scale(0.4)', opacity: '0' },
          '8%':   { opacity: '0.85' },
          '45%':  { transform: 'translate(-50%, calc(-50% - 32px)) scale(1.15)', opacity: '0.85' },
          '92%':  { opacity: '0.6' },
          '100%': { transform: 'translate(calc(-50% + 110px), calc(-50% + 8px)) scale(0.3)', opacity: '0' },
        },
        ballFromRightAlt: {
          '0%':   { transform: 'translate(calc(-50% + 110px), calc(-50% + 10px)) scale(0.4)', opacity: '0' },
          '8%':   { opacity: '0.85' },
          '45%':  { transform: 'translate(-50%, calc(-50% - 32px)) scale(1.15)', opacity: '0.85' },
          '92%':  { opacity: '0.6' },
          '100%': { transform: 'translate(calc(-50% - 110px), calc(-50% + 8px)) scale(0.3)', opacity: '0' },
        },
        goalCardFlash: {
          '0%':   { backgroundColor: 'transparent' },
          '18%':  { backgroundColor: 'rgba(34,197,94,0.18)' },
          '60%':  { backgroundColor: 'rgba(34,197,94,0.06)' },
          '100%': { backgroundColor: 'transparent' },
        },
        scorePop: {
          '0%':   { transform: 'scale(1)',   color: 'inherit', textShadow: 'none' },
          '18%':  { transform: 'scale(3.2)', color: '#4ade80', textShadow: '0 0 28px rgba(34,197,94,1), 0 0 56px rgba(34,197,94,0.5)' },
          '45%':  { transform: 'scale(2.1)', color: '#22c55e', textShadow: '0 0 16px rgba(34,197,94,0.7)' },
          '68%':  { transform: 'scale(1.4)',                   textShadow: '0 0 8px rgba(34,197,94,0.3)' },
          '100%': { transform: 'scale(1)',                     textShadow: 'none' },
        },
      },
    },
  },
  plugins: [],
};