Final Menu

1
@import 'tailwindcss';
2

3
@theme {
4
  --color-final-menu-white: oklch(100% 0.0000000000000005 0deg);
5
  --color-final-menu-classic-red-50: oklch(44.318% 0.1819 29.234);
6
  --color-final-menu-classic-red-950: oklch(31.202% 0.1247 11.553);
7
  --color-final-menu-modern-red-50: oklch(47.549% 0.1951 29.234);
8
  --color-final-menu-modern-red-200: oklch(37.669% 0.1546 29.234);
9
  --color-final-menu-modern-red-700: oklch(27.083% 0.1111 29.234);
10
  --color-final-menu-modern-red-950: oklch(15.293% 0.0628 29.234);
11
  --color-final-menu-classic-green-50: oklch(61.15% 0.2081 142.495);
12
  --color-final-menu-classic-green-950: oklch(43.061% 0.1351 138.776);
13
  --color-final-menu-modern-green-50: oklch(65.607% 0.2232 142.495);
14
  --color-final-menu-modern-green-200: oklch(51.975% 0.1769 142.495);
15
  --color-final-menu-modern-green-700: oklch(37.368% 0.1272 142.495);
16
  --color-final-menu-modern-green-950: oklch(21.101% 0.0718 142.495);
17
  --color-final-menu-classic-blue-50: oklch(31.901% 0.2211 264.052);
18
  --color-final-menu-classic-blue-950: oklch(27.239% 0.1197 261.264);
19
  --color-final-menu-modern-blue-50: oklch(34.227% 0.2372 264.052);
20
  --color-final-menu-modern-blue-200: oklch(27.115% 0.1879 264.052);
21
  --color-final-menu-modern-blue-700: oklch(19.495% 0.1351 264.052);
22
  --color-final-menu-modern-blue-950: oklch(11.008% 0.0763 264.052);
23
  --color-final-menu-black: oklch(0% 0.0000000000000005 0deg);
24

25

26
  --background-image-classic-red:
27
    linear-gradient(
28
      to bottom,
29
      var(--color-final-menu-classic-red-950) 0%,
30
      var(--color-final-menu-classic-red-50) 100%
31
    );
32

33
  --background-image-linear-red:
34
    linear-gradient(
35
      to bottom,
36
      var(--color-final-menu-modern-red-50),
37
      var(--color-final-menu-modern-red-700)
38
    ),
39
    linear-gradient(
40
      to bottom,
41
      var(--color-final-menu-modern-red-200),
42
      var(--color-final-menu-modern-red-950)
43
    );
44

45
  --background-image-radial-red:
46
    radial-gradient(
47
      ellipse at 0% 0%,
48
      var(--color-final-menu-modern-red-50) 0%,
49
      transparent 70%
50
    ),
51
    radial-gradient(
52
      ellipse at 100% 0%,
53
      var(--color-final-menu-modern-red-200) 0%,
54
      transparent 70%
55
    ),
56
    radial-gradient(
57
      ellipse at 0% 100%,
58
      var(--color-final-menu-modern-red-700) 0%,
59
      transparent 70%
60
    ),
61
    radial-gradient(
62
      ellipse at 100% 100%,
63
      var(--color-final-menu-modern-red-950) 0%,
64
      transparent 70%
65
    );
66

67

68
  --background-image-classic-green:
69
    linear-gradient(
70
      to bottom,
71
      var(--color-final-menu-classic-green-950) 0%,
72
      var(--color-final-menu-classic-green-50) 100%
73
    );
74

75
  --background-image-linear-green:
76
    linear-gradient(
77
      to bottom,
78
      var(--color-final-menu-modern-green-50),
79
      var(--color-final-menu-modern-green-700)
80
    ),
81
    linear-gradient(
82
      to bottom,
83
      var(--color-final-menu-modern-green-200),
84
      var(--color-final-menu-modern-green-950)
85
    );
86

87
  --background-image-radial-green:
88
    radial-gradient(
89
      ellipse at 0% 0%,
90
      var(--color-final-menu-modern-green-50) 0%,
91
      transparent 70%
92
    ),
93
    radial-gradient(
94
      ellipse at 100% 0%,
95
      var(--color-final-menu-modern-green-200) 0%,
96
      transparent 70%
97
    ),
98
    radial-gradient(
99
      ellipse at 0% 100%,
100
      var(--color-final-menu-modern-green-700) 0%,
101
      transparent 70%
102
    ),
103
    radial-gradient(
104
      ellipse at 100% 100%,
105
      var(--color-final-menu-modern-green-950) 0%,
106
      transparent 70%
107
    );
108

109

110
  --background-image-classic-blue:
111
    linear-gradient(
112
      to bottom,
113
      var(--color-final-menu-classic-blue-950) 0%,
114
      var(--color-final-menu-classic-blue-50) 100%
115
    );
116

117
  --background-image-linear-blue:
118
    linear-gradient(
119
      to bottom,
120
      var(--color-final-menu-modern-blue-50),
121
      var(--color-final-menu-modern-blue-700)
122
    ),
123
    linear-gradient(
124
      to bottom,
125
      var(--color-final-menu-modern-blue-200),
126
      var(--color-final-menu-modern-blue-950)
127
    );
128

129
  --background-image-radial-blue:
130
    radial-gradient(
131
      ellipse at 0% 0%,
132
      var(--color-final-menu-modern-blue-50) 0%,
133
      transparent 70%
134
    ),
135
    radial-gradient(
136
      ellipse at 100% 0%,
137
      var(--color-final-menu-modern-blue-200) 0%,
138
      transparent 70%
139
    ),
140
    radial-gradient(
141
      ellipse at 0% 100%,
142
      var(--color-final-menu-modern-blue-700) 0%,
143
      transparent 70%
144
    ),
145
    radial-gradient(
146
      ellipse at 100% 100%,
147
      var(--color-final-menu-modern-blue-950) 0%,
148
      transparent 70%
149
    );
150

151
 /** Override backgrounds so we can use image gradients **/
152
 --background-image-background: var(--background);
153
 --background-image-card: var(--card);
154
 --background-image-popover: var(--popover);
155
 --background-image-muted: var(--muted);
156
 --background-image-accent: var(--accent);
157
}