kofi-stack-template-generator 2.1.49 → 2.1.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/.turbo/turbo-build.log +6 -6
  2. package/dist/index.js +106 -35
  3. package/package.json +2 -2
  4. package/src/templates.generated.ts +25 -21
  5. package/templates/marketing/nextjs/src/app/globals.css.hbs +495 -10
  6. package/templates/marketing/payload/public/favicon.ico +0 -0
  7. package/templates/marketing/payload/public/favicon.svg +6 -0
  8. package/templates/marketing/payload/public/logo-light.svg +6 -0
  9. package/templates/marketing/payload/public/logo.svg +6 -0
  10. package/templates/marketing/payload/src/Footer/Component.client.tsx +1 -1
  11. package/templates/marketing/payload/src/Footer/config.ts +1 -1
  12. package/templates/marketing/payload/src/Header/Component.client.tsx +1 -1
  13. package/templates/marketing/payload/src/Header/MobileMenu/index.tsx +1 -1
  14. package/templates/marketing/payload/src/app/(docs)/docs/[[...slug]]/page.tsx +6 -6
  15. package/templates/marketing/payload/src/app/(docs)/docs/layout.tsx +1 -1
  16. package/templates/marketing/payload/src/app/(docs)/layout.tsx +3 -3
  17. package/templates/marketing/payload/src/app/(frontend)/api/newsletter/route.ts +15 -15
  18. package/templates/marketing/payload/src/app/(frontend)/globals.css.hbs +1380 -0
  19. package/templates/marketing/payload/src/app/(frontend)/layout.tsx +17 -17
  20. package/templates/marketing/payload/src/app/(frontend)/posts/[slug]/BlogPostContent.tsx +5 -5
  21. package/templates/marketing/payload/src/app/(frontend)/posts/page.tsx +2 -2
  22. package/templates/marketing/payload/src/components/JsonLd/index.tsx +19 -19
  23. package/templates/marketing/payload/src/components/Logo/Logo.tsx +1 -1
  24. package/templates/marketing/payload/src/components/TableOfContents/index.tsx +3 -3
  25. package/templates/marketing/payload/src/heros/ProductShowcase/AnimatedMockup.tsx +3 -3
  26. package/templates/marketing/payload/src/utilities/generateMeta.ts +16 -16
  27. package/templates/marketing/payload/src/utilities/mergeOpenGraph.ts +4 -4
  28. package/templates/marketing/payload/src/app/(frontend)/globals.css +0 -1019
package/templates/marketing/payload/src/app/(frontend)/globals.css.hbs ADDED
@@ -0,0 +1,1380 @@
1
+ @import "tailwindcss";
2
+ @import "tw-animate-css";
3
+ @plugin "@tailwindcss/typography";
4
+
5
+ @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
6
+
7
+ @theme inline {
8
+ /* Colors */
9
+ --color-background: var(--background);
10
+ --color-foreground: var(--foreground);
11
+
12
+ --color-card: var(--card);
13
+ --color-card-foreground: var(--card-foreground);
14
+
15
+ --color-popover: var(--popover);
16
+ --color-popover-foreground: var(--popover-foreground);
17
+
18
+ --color-primary: var(--primary);
19
+ --color-primary-foreground: var(--primary-foreground);
20
+
21
+ --color-secondary: var(--secondary);
22
+ --color-secondary-foreground: var(--secondary-foreground);
23
+
24
+ --color-muted: var(--muted);
25
+ --color-muted-foreground: var(--muted-foreground);
26
+
27
+ --color-accent: var(--accent);
28
+ --color-accent-foreground: var(--accent-foreground);
29
+
30
+ --color-destructive: var(--destructive);
31
+
32
+ --color-border: var(--border);
33
+ --color-input: var(--input);
34
+ --color-ring: var(--ring);
35
+
36
+ --color-chart-1: var(--chart-1);
37
+ --color-chart-2: var(--chart-2);
38
+ --color-chart-3: var(--chart-3);
39
+ --color-chart-4: var(--chart-4);
40
+ --color-chart-5: var(--chart-5);
41
+
42
+ /* Border radius */
43
+ --radius-sm: calc(var(--radius) - 4px);
44
+ --radius-md: calc(var(--radius) - 2px);
45
+ --radius-lg: var(--radius);
46
+ --radius-xl: calc(var(--radius) + 4px);
47
+
48
+ /* Fonts */
49
+ --font-sans: var(--font-inter), system-ui, sans-serif;
50
+ --font-mono: var(--font-geist-mono), monospace;
51
+
52
+ /* Container */
53
+ --container-sm: 40rem;
54
+ --container-md: 48rem;
55
+ --container-lg: 64rem;
56
+ --container-xl: 80rem;
57
+ --container-2xl: 96rem;
58
+
59
+ /* Animations */
60
+ --animate-accordion-down: accordion-down 0.2s ease-out;
61
+ --animate-accordion-up: accordion-up 0.2s ease-out;
62
+ }
63
+
64
+ @keyframes accordion-down {
65
+ from {
66
+ height: 0;
67
+ }
68
+ to {
69
+ height: var(--radix-accordion-content-height);
70
+ }
71
+ }
72
+
73
+ @keyframes accordion-up {
74
+ from {
75
+ height: var(--radix-accordion-content-height);
76
+ }
77
+ to {
78
+ height: 0;
79
+ }
80
+ }
81
+
82
+ /* ========================================
83
+ THEME COLOR VARIABLES
84
+ Each theme color changes --primary, --ring, and --chart-* values
85
+ Base colors (background, card, muted, etc.) remain consistent
86
+ ======================================== */
87
+
88
+ :root {
89
+ --radius: 0.625rem;
90
+ --background: oklch(1 0 0);
91
+ --foreground: oklch(0.145 0 0);
92
+ --card: oklch(1 0 0);
93
+ --card-foreground: oklch(0.145 0 0);
94
+ --popover: oklch(1 0 0);
95
+ --popover-foreground: oklch(0.145 0 0);
96
+ --secondary: oklch(0.97 0 0);
97
+ --secondary-foreground: oklch(0.205 0 0);
98
+ --muted: oklch(0.97 0 0);
99
+ --muted-foreground: oklch(0.556 0 0);
100
+ --accent: oklch(0.97 0 0);
101
+ --accent-foreground: oklch(0.205 0 0);
102
+ --destructive: oklch(0.577 0.245 27.325);
103
+ --border: oklch(0.922 0 0);
104
+ --input: oklch(0.922 0 0);
105
+
106
+ {{#if (eq shadcn.themeColor "neutral")}}
107
+ /* Neutral theme */
108
+ --primary: oklch(0.205 0 0);
109
+ --primary-foreground: oklch(0.985 0 0);
110
+ --ring: oklch(0.708 0 0);
111
+ --chart-1: oklch(0.646 0.222 41.116);
112
+ --chart-2: oklch(0.6 0.118 184.704);
113
+ --chart-3: oklch(0.398 0.07 227.392);
114
+ --chart-4: oklch(0.828 0.189 84.429);
115
+ --chart-5: oklch(0.769 0.188 70.08);
116
+ {{else if (eq shadcn.themeColor "blue")}}
117
+ /* Blue theme */
118
+ --primary: oklch(0.546 0.245 262.881);
119
+ --primary-foreground: oklch(0.985 0.002 247.858);
120
+ --ring: oklch(0.546 0.245 262.881);
121
+ --chart-1: oklch(0.546 0.245 262.881);
122
+ --chart-2: oklch(0.6 0.118 184.704);
123
+ --chart-3: oklch(0.398 0.07 227.392);
124
+ --chart-4: oklch(0.828 0.189 84.429);
125
+ --chart-5: oklch(0.769 0.188 70.08);
126
+ {{else if (eq shadcn.themeColor "green")}}
127
+ /* Green theme */
128
+ --primary: oklch(0.596 0.145 163.225);
129
+ --primary-foreground: oklch(0.982 0.018 155.826);
130
+ --ring: oklch(0.596 0.145 163.225);
131
+ --chart-1: oklch(0.596 0.145 163.225);
132
+ --chart-2: oklch(0.6 0.118 184.704);
133
+ --chart-3: oklch(0.398 0.07 227.392);
134
+ --chart-4: oklch(0.828 0.189 84.429);
135
+ --chart-5: oklch(0.769 0.188 70.08);
136
+ {{else if (eq shadcn.themeColor "purple")}}
137
+ /* Purple theme */
138
+ --primary: oklch(0.627 0.265 303.9);
139
+ --primary-foreground: oklch(0.985 0 0);
140
+ --ring: oklch(0.627 0.265 303.9);
141
+ --chart-1: oklch(0.627 0.265 303.9);
142
+ --chart-2: oklch(0.6 0.118 184.704);
143
+ --chart-3: oklch(0.398 0.07 227.392);
144
+ --chart-4: oklch(0.828 0.189 84.429);
145
+ --chart-5: oklch(0.769 0.188 70.08);
146
+ {{else if (eq shadcn.themeColor "red")}}
147
+ /* Red theme */
148
+ --primary: oklch(0.637 0.237 25.331);
149
+ --primary-foreground: oklch(0.985 0 0);
150
+ --ring: oklch(0.637 0.237 25.331);
151
+ --chart-1: oklch(0.637 0.237 25.331);
152
+ --chart-2: oklch(0.6 0.118 184.704);
153
+ --chart-3: oklch(0.398 0.07 227.392);
154
+ --chart-4: oklch(0.828 0.189 84.429);
155
+ --chart-5: oklch(0.769 0.188 70.08);
156
+ {{else if (eq shadcn.themeColor "orange")}}
157
+ /* Orange theme */
158
+ --primary: oklch(0.705 0.191 47.604);
159
+ --primary-foreground: oklch(0.216 0.006 56.043);
160
+ --ring: oklch(0.705 0.191 47.604);
161
+ --chart-1: oklch(0.705 0.191 47.604);
162
+ --chart-2: oklch(0.6 0.118 184.704);
163
+ --chart-3: oklch(0.398 0.07 227.392);
164
+ --chart-4: oklch(0.828 0.189 84.429);
165
+ --chart-5: oklch(0.769 0.188 70.08);
166
+ {{else if (eq shadcn.themeColor "amber")}}
167
+ /* Amber theme */
168
+ --primary: oklch(0.769 0.188 70.08);
169
+ --primary-foreground: oklch(0.216 0.006 56.043);
170
+ --ring: oklch(0.769 0.188 70.08);
171
+ --chart-1: oklch(0.769 0.188 70.08);
172
+ --chart-2: oklch(0.6 0.118 184.704);
173
+ --chart-3: oklch(0.398 0.07 227.392);
174
+ --chart-4: oklch(0.828 0.189 84.429);
175
+ --chart-5: oklch(0.646 0.222 41.116);
176
+ {{else if (eq shadcn.themeColor "cyan")}}
177
+ /* Cyan theme */
178
+ --primary: oklch(0.715 0.143 215.221);
179
+ --primary-foreground: oklch(0.216 0.006 56.043);
180
+ --ring: oklch(0.715 0.143 215.221);
181
+ --chart-1: oklch(0.715 0.143 215.221);
182
+ --chart-2: oklch(0.6 0.118 184.704);
183
+ --chart-3: oklch(0.398 0.07 227.392);
184
+ --chart-4: oklch(0.828 0.189 84.429);
185
+ --chart-5: oklch(0.769 0.188 70.08);
186
+ {{else if (eq shadcn.themeColor "emerald")}}
187
+ /* Emerald theme */
188
+ --primary: oklch(0.696 0.17 162.48);
189
+ --primary-foreground: oklch(0.985 0 0);
190
+ --ring: oklch(0.696 0.17 162.48);
191
+ --chart-1: oklch(0.696 0.17 162.48);
192
+ --chart-2: oklch(0.6 0.118 184.704);
193
+ --chart-3: oklch(0.398 0.07 227.392);
194
+ --chart-4: oklch(0.828 0.189 84.429);
195
+ --chart-5: oklch(0.769 0.188 70.08);
196
+ {{else if (eq shadcn.themeColor "fuchsia")}}
197
+ /* Fuchsia theme */
198
+ --primary: oklch(0.667 0.295 322.15);
199
+ --primary-foreground: oklch(0.985 0 0);
200
+ --ring: oklch(0.667 0.295 322.15);
201
+ --chart-1: oklch(0.667 0.295 322.15);
202
+ --chart-2: oklch(0.6 0.118 184.704);
203
+ --chart-3: oklch(0.398 0.07 227.392);
204
+ --chart-4: oklch(0.828 0.189 84.429);
205
+ --chart-5: oklch(0.769 0.188 70.08);
206
+ {{else if (eq shadcn.themeColor "indigo")}}
207
+ /* Indigo theme */
208
+ --primary: oklch(0.585 0.233 277.117);
209
+ --primary-foreground: oklch(0.985 0 0);
210
+ --ring: oklch(0.585 0.233 277.117);
211
+ --chart-1: oklch(0.585 0.233 277.117);
212
+ --chart-2: oklch(0.6 0.118 184.704);
213
+ --chart-3: oklch(0.398 0.07 227.392);
214
+ --chart-4: oklch(0.828 0.189 84.429);
215
+ --chart-5: oklch(0.769 0.188 70.08);
216
+ {{else if (eq shadcn.themeColor "lime")}}
217
+ /* Lime theme */
218
+ --primary: oklch(0.768 0.233 130.85);
219
+ --primary-foreground: oklch(0.216 0.006 56.043);
220
+ --ring: oklch(0.768 0.233 130.85);
221
+ --chart-1: oklch(0.768 0.233 130.85);
222
+ --chart-2: oklch(0.6 0.118 184.704);
223
+ --chart-3: oklch(0.398 0.07 227.392);
224
+ --chart-4: oklch(0.828 0.189 84.429);
225
+ --chart-5: oklch(0.769 0.188 70.08);
226
+ {{else if (eq shadcn.themeColor "pink")}}
227
+ /* Pink theme */
228
+ --primary: oklch(0.718 0.202 349.761);
229
+ --primary-foreground: oklch(0.985 0 0);
230
+ --ring: oklch(0.718 0.202 349.761);
231
+ --chart-1: oklch(0.718 0.202 349.761);
232
+ --chart-2: oklch(0.6 0.118 184.704);
233
+ --chart-3: oklch(0.398 0.07 227.392);
234
+ --chart-4: oklch(0.828 0.189 84.429);
235
+ --chart-5: oklch(0.769 0.188 70.08);
236
+ {{else if (eq shadcn.themeColor "rose")}}
237
+ /* Rose theme */
238
+ --primary: oklch(0.645 0.246 16.439);
239
+ --primary-foreground: oklch(0.985 0 0);
240
+ --ring: oklch(0.645 0.246 16.439);
241
+ --chart-1: oklch(0.645 0.246 16.439);
242
+ --chart-2: oklch(0.6 0.118 184.704);
243
+ --chart-3: oklch(0.398 0.07 227.392);
244
+ --chart-4: oklch(0.828 0.189 84.429);
245
+ --chart-5: oklch(0.769 0.188 70.08);
246
+ {{else if (eq shadcn.themeColor "sky")}}
247
+ /* Sky theme */
248
+ --primary: oklch(0.685 0.169 237.323);
249
+ --primary-foreground: oklch(0.985 0 0);
250
+ --ring: oklch(0.685 0.169 237.323);
251
+ --chart-1: oklch(0.685 0.169 237.323);
252
+ --chart-2: oklch(0.6 0.118 184.704);
253
+ --chart-3: oklch(0.398 0.07 227.392);
254
+ --chart-4: oklch(0.828 0.189 84.429);
255
+ --chart-5: oklch(0.769 0.188 70.08);
256
+ {{else if (eq shadcn.themeColor "teal")}}
257
+ /* Teal theme */
258
+ --primary: oklch(0.704 0.14 182.503);
259
+ --primary-foreground: oklch(0.985 0 0);
260
+ --ring: oklch(0.704 0.14 182.503);
261
+ --chart-1: oklch(0.704 0.14 182.503);
262
+ --chart-2: oklch(0.6 0.118 184.704);
263
+ --chart-3: oklch(0.398 0.07 227.392);
264
+ --chart-4: oklch(0.828 0.189 84.429);
265
+ --chart-5: oklch(0.769 0.188 70.08);
266
+ {{else if (eq shadcn.themeColor "violet")}}
267
+ /* Violet theme */
268
+ --primary: oklch(0.606 0.25 292.717);
269
+ --primary-foreground: oklch(0.985 0 0);
270
+ --ring: oklch(0.606 0.25 292.717);
271
+ --chart-1: oklch(0.606 0.25 292.717);
272
+ --chart-2: oklch(0.6 0.118 184.704);
273
+ --chart-3: oklch(0.398 0.07 227.392);
274
+ --chart-4: oklch(0.828 0.189 84.429);
275
+ --chart-5: oklch(0.769 0.188 70.08);
276
+ {{else if (eq shadcn.themeColor "yellow")}}
277
+ /* Yellow theme */
278
+ --primary: oklch(0.795 0.184 86.047);
279
+ --primary-foreground: oklch(0.216 0.006 56.043);
280
+ --ring: oklch(0.795 0.184 86.047);
281
+ --chart-1: oklch(0.795 0.184 86.047);
282
+ --chart-2: oklch(0.6 0.118 184.704);
283
+ --chart-3: oklch(0.398 0.07 227.392);
284
+ --chart-4: oklch(0.646 0.222 41.116);
285
+ --chart-5: oklch(0.769 0.188 70.08);
286
+ {{else}}
287
+ /* Default to neutral */
288
+ --primary: oklch(0.205 0 0);
289
+ --primary-foreground: oklch(0.985 0 0);
290
+ --ring: oklch(0.708 0 0);
291
+ --chart-1: oklch(0.646 0.222 41.116);
292
+ --chart-2: oklch(0.6 0.118 184.704);
293
+ --chart-3: oklch(0.398 0.07 227.392);
294
+ --chart-4: oklch(0.828 0.189 84.429);
295
+ --chart-5: oklch(0.769 0.188 70.08);
296
+ {{/if}}
297
+ }
298
+
299
+ [data-theme="dark"] {
300
+ --background: oklch(0.145 0 0);
301
+ --foreground: oklch(0.985 0 0);
302
+ --card: oklch(0.205 0 0);
303
+ --card-foreground: oklch(0.985 0 0);
304
+ --popover: oklch(0.269 0 0);
305
+ --popover-foreground: oklch(0.985 0 0);
306
+ --secondary: oklch(0.269 0 0);
307
+ --secondary-foreground: oklch(0.985 0 0);
308
+ --muted: oklch(0.269 0 0);
309
+ --muted-foreground: oklch(0.708 0 0);
310
+ --accent: oklch(0.371 0 0);
311
+ --accent-foreground: oklch(0.985 0 0);
312
+ --destructive: oklch(0.704 0.191 22.216);
313
+ --border: oklch(1 0 0 / 10%);
314
+ --input: oklch(1 0 0 / 15%);
315
+
316
+ {{#if (eq shadcn.themeColor "neutral")}}
317
+ /* Neutral theme - dark mode */
318
+ --primary: oklch(0.922 0 0);
319
+ --primary-foreground: oklch(0.205 0 0);
320
+ --ring: oklch(0.556 0 0);
321
+ --chart-1: oklch(0.488 0.243 264.376);
322
+ --chart-2: oklch(0.696 0.17 162.48);
323
+ --chart-3: oklch(0.769 0.188 70.08);
324
+ --chart-4: oklch(0.627 0.265 303.9);
325
+ --chart-5: oklch(0.645 0.246 16.439);
326
+ {{else if (eq shadcn.themeColor "blue")}}
327
+ /* Blue theme - dark mode */
328
+ --primary: oklch(0.623 0.214 262.881);
329
+ --primary-foreground: oklch(0.273 0.033 256.848);
330
+ --ring: oklch(0.623 0.214 262.881);
331
+ --chart-1: oklch(0.623 0.214 262.881);
332
+ --chart-2: oklch(0.696 0.17 162.48);
333
+ --chart-3: oklch(0.769 0.188 70.08);
334
+ --chart-4: oklch(0.627 0.265 303.9);
335
+ --chart-5: oklch(0.645 0.246 16.439);
336
+ {{else if (eq shadcn.themeColor "green")}}
337
+ /* Green theme - dark mode */
338
+ --primary: oklch(0.696 0.17 162.48);
339
+ --primary-foreground: oklch(0.15 0 0);
340
+ --ring: oklch(0.696 0.17 162.48);
341
+ --chart-1: oklch(0.696 0.17 162.48);
342
+ --chart-2: oklch(0.488 0.243 264.376);
343
+ --chart-3: oklch(0.769 0.188 70.08);
344
+ --chart-4: oklch(0.627 0.265 303.9);
345
+ --chart-5: oklch(0.645 0.246 16.439);
346
+ {{else if (eq shadcn.themeColor "purple")}}
347
+ /* Purple theme - dark mode */
348
+ --primary: oklch(0.714 0.203 305.504);
349
+ --primary-foreground: oklch(0.15 0 0);
350
+ --ring: oklch(0.714 0.203 305.504);
351
+ --chart-1: oklch(0.714 0.203 305.504);
352
+ --chart-2: oklch(0.696 0.17 162.48);
353
+ --chart-3: oklch(0.769 0.188 70.08);
354
+ --chart-4: oklch(0.488 0.243 264.376);
355
+ --chart-5: oklch(0.645 0.246 16.439);
356
+ {{else if (eq shadcn.themeColor "red")}}
357
+ /* Red theme - dark mode */
358
+ --primary: oklch(0.704 0.191 22.216);
359
+ --primary-foreground: oklch(0.15 0 0);
360
+ --ring: oklch(0.704 0.191 22.216);
361
+ --chart-1: oklch(0.704 0.191 22.216);
362
+ --chart-2: oklch(0.696 0.17 162.48);
363
+ --chart-3: oklch(0.769 0.188 70.08);
364
+ --chart-4: oklch(0.627 0.265 303.9);
365
+ --chart-5: oklch(0.488 0.243 264.376);
366
+ {{else if (eq shadcn.themeColor "orange")}}
367
+ /* Orange theme - dark mode */
368
+ --primary: oklch(0.792 0.17 52.615);
369
+ --primary-foreground: oklch(0.15 0 0);
370
+ --ring: oklch(0.792 0.17 52.615);
371
+ --chart-1: oklch(0.792 0.17 52.615);
372
+ --chart-2: oklch(0.696 0.17 162.48);
373
+ --chart-3: oklch(0.769 0.188 70.08);
374
+ --chart-4: oklch(0.627 0.265 303.9);
375
+ --chart-5: oklch(0.645 0.246 16.439);
376
+ {{else if (eq shadcn.themeColor "amber")}}
377
+ /* Amber theme - dark mode */
378
+ --primary: oklch(0.828 0.189 84.429);
379
+ --primary-foreground: oklch(0.15 0 0);
380
+ --ring: oklch(0.828 0.189 84.429);
381
+ --chart-1: oklch(0.828 0.189 84.429);
382
+ --chart-2: oklch(0.696 0.17 162.48);
383
+ --chart-3: oklch(0.488 0.243 264.376);
384
+ --chart-4: oklch(0.627 0.265 303.9);
385
+ --chart-5: oklch(0.645 0.246 16.439);
386
+ {{else if (eq shadcn.themeColor "cyan")}}
387
+ /* Cyan theme - dark mode */
388
+ --primary: oklch(0.789 0.154 211.53);
389
+ --primary-foreground: oklch(0.15 0 0);
390
+ --ring: oklch(0.789 0.154 211.53);
391
+ --chart-1: oklch(0.789 0.154 211.53);
392
+ --chart-2: oklch(0.696 0.17 162.48);
393
+ --chart-3: oklch(0.769 0.188 70.08);
394
+ --chart-4: oklch(0.627 0.265 303.9);
395
+ --chart-5: oklch(0.645 0.246 16.439);
396
+ {{else if (eq shadcn.themeColor "emerald")}}
397
+ /* Emerald theme - dark mode */
398
+ --primary: oklch(0.765 0.166 160.391);
399
+ --primary-foreground: oklch(0.15 0 0);
400
+ --ring: oklch(0.765 0.166 160.391);
401
+ --chart-1: oklch(0.765 0.166 160.391);
402
+ --chart-2: oklch(0.488 0.243 264.376);
403
+ --chart-3: oklch(0.769 0.188 70.08);
404
+ --chart-4: oklch(0.627 0.265 303.9);
405
+ --chart-5: oklch(0.645 0.246 16.439);
406
+ {{else if (eq shadcn.themeColor "fuchsia")}}
407
+ /* Fuchsia theme - dark mode */
408
+ --primary: oklch(0.74 0.238 322.16);
409
+ --primary-foreground: oklch(0.15 0 0);
410
+ --ring: oklch(0.74 0.238 322.16);
411
+ --chart-1: oklch(0.74 0.238 322.16);
412
+ --chart-2: oklch(0.696 0.17 162.48);
413
+ --chart-3: oklch(0.769 0.188 70.08);
414
+ --chart-4: oklch(0.488 0.243 264.376);
415
+ --chart-5: oklch(0.645 0.246 16.439);
416
+ {{else if (eq shadcn.themeColor "indigo")}}
417
+ /* Indigo theme - dark mode */
418
+ --primary: oklch(0.673 0.182 276.935);
419
+ --primary-foreground: oklch(0.985 0 0);
420
+ --ring: oklch(0.673 0.182 276.935);
421
+ --chart-1: oklch(0.673 0.182 276.935);
422
+ --chart-2: oklch(0.696 0.17 162.48);
423
+ --chart-3: oklch(0.769 0.188 70.08);
424
+ --chart-4: oklch(0.627 0.265 303.9);
425
+ --chart-5: oklch(0.645 0.246 16.439);
426
+ {{else if (eq shadcn.themeColor "lime")}}
427
+ /* Lime theme - dark mode */
428
+ --primary: oklch(0.841 0.238 128.85);
429
+ --primary-foreground: oklch(0.15 0 0);
430
+ --ring: oklch(0.841 0.238 128.85);
431
+ --chart-1: oklch(0.841 0.238 128.85);
432
+ --chart-2: oklch(0.488 0.243 264.376);
433
+ --chart-3: oklch(0.769 0.188 70.08);
434
+ --chart-4: oklch(0.627 0.265 303.9);
435
+ --chart-5: oklch(0.645 0.246 16.439);
436
+ {{else if (eq shadcn.themeColor "pink")}}
437
+ /* Pink theme - dark mode */
438
+ --primary: oklch(0.775 0.181 349.761);
439
+ --primary-foreground: oklch(0.15 0 0);
440
+ --ring: oklch(0.775 0.181 349.761);
441
+ --chart-1: oklch(0.775 0.181 349.761);
442
+ --chart-2: oklch(0.696 0.17 162.48);
443
+ --chart-3: oklch(0.769 0.188 70.08);
444
+ --chart-4: oklch(0.627 0.265 303.9);
445
+ --chart-5: oklch(0.488 0.243 264.376);
446
+ {{else if (eq shadcn.themeColor "rose")}}
447
+ /* Rose theme - dark mode */
448
+ --primary: oklch(0.712 0.194 13.428);
449
+ --primary-foreground: oklch(0.15 0 0);
450
+ --ring: oklch(0.712 0.194 13.428);
451
+ --chart-1: oklch(0.712 0.194 13.428);
452
+ --chart-2: oklch(0.696 0.17 162.48);
453
+ --chart-3: oklch(0.769 0.188 70.08);
454
+ --chart-4: oklch(0.627 0.265 303.9);
455
+ --chart-5: oklch(0.488 0.243 264.376);
456
+ {{else if (eq shadcn.themeColor "sky")}}
457
+ /* Sky theme - dark mode */
458
+ --primary: oklch(0.756 0.143 232.661);
459
+ --primary-foreground: oklch(0.15 0 0);
460
+ --ring: oklch(0.756 0.143 232.661);
461
+ --chart-1: oklch(0.756 0.143 232.661);
462
+ --chart-2: oklch(0.696 0.17 162.48);
463
+ --chart-3: oklch(0.769 0.188 70.08);
464
+ --chart-4: oklch(0.627 0.265 303.9);
465
+ --chart-5: oklch(0.645 0.246 16.439);
466
+ {{else if (eq shadcn.themeColor "teal")}}
467
+ /* Teal theme - dark mode */
468
+ --primary: oklch(0.777 0.152 181.912);
469
+ --primary-foreground: oklch(0.15 0 0);
470
+ --ring: oklch(0.777 0.152 181.912);
471
+ --chart-1: oklch(0.777 0.152 181.912);
472
+ --chart-2: oklch(0.488 0.243 264.376);
473
+ --chart-3: oklch(0.769 0.188 70.08);
474
+ --chart-4: oklch(0.627 0.265 303.9);
475
+ --chart-5: oklch(0.645 0.246 16.439);
476
+ {{else if (eq shadcn.themeColor "violet")}}
477
+ /* Violet theme - dark mode */
478
+ --primary: oklch(0.702 0.183 293.541);
479
+ --primary-foreground: oklch(0.985 0 0);
480
+ --ring: oklch(0.702 0.183 293.541);
481
+ --chart-1: oklch(0.702 0.183 293.541);
482
+ --chart-2: oklch(0.696 0.17 162.48);
483
+ --chart-3: oklch(0.769 0.188 70.08);
484
+ --chart-4: oklch(0.488 0.243 264.376);
485
+ --chart-5: oklch(0.645 0.246 16.439);
486
+ {{else if (eq shadcn.themeColor "yellow")}}
487
+ /* Yellow theme - dark mode */
488
+ --primary: oklch(0.852 0.199 91.936);
489
+ --primary-foreground: oklch(0.15 0 0);
490
+ --ring: oklch(0.852 0.199 91.936);
491
+ --chart-1: oklch(0.852 0.199 91.936);
492
+ --chart-2: oklch(0.696 0.17 162.48);
493
+ --chart-3: oklch(0.488 0.243 264.376);
494
+ --chart-4: oklch(0.627 0.265 303.9);
495
+ --chart-5: oklch(0.645 0.246 16.439);
496
+ {{else}}
497
+ /* Default to neutral - dark mode */
498
+ --primary: oklch(0.922 0 0);
499
+ --primary-foreground: oklch(0.205 0 0);
500
+ --ring: oklch(0.556 0 0);
501
+ --chart-1: oklch(0.488 0.243 264.376);
502
+ --chart-2: oklch(0.696 0.17 162.48);
503
+ --chart-3: oklch(0.769 0.188 70.08);
504
+ --chart-4: oklch(0.627 0.265 303.9);
505
+ --chart-5: oklch(0.645 0.246 16.439);
506
+ {{/if}}
507
+ }
508
+
509
+ /* ========================================
510
+ BASE STYLES
511
+ ======================================== */
512
+
513
+ * {
514
+ border-color: var(--color-border);
515
+ }
516
+
517
+ body {
518
+ background-color: var(--color-background);
519
+ color: var(--color-foreground);
520
+ min-height: 100vh;
521
+ display: flex;
522
+ flex-direction: column;
523
+ }
524
+
525
+ html {
526
+ opacity: 0;
527
+ }
528
+
529
+ html[data-theme="dark"],
530
+ html[data-theme="light"] {
531
+ opacity: initial;
532
+ }
533
+
534
+ /* Container utility */
535
+ .container {
536
+ width: 100%;
537
+ margin-left: auto;
538
+ margin-right: auto;
539
+ padding-left: 1rem;
540
+ padding-right: 1rem;
541
+ max-width: 96rem;
542
+ }
543
+
544
+ @media (min-width: 640px) {
545
+ .container {
546
+ padding-left: 1.5rem;
547
+ padding-right: 1.5rem;
548
+ }
549
+ }
550
+
551
+ @media (min-width: 1024px) {
552
+ .container {
553
+ padding-left: 2rem;
554
+ padding-right: 2rem;
555
+ }
556
+ }
557
+
558
+ /* ========================================
559
+ HERO TYPOGRAPHY
560
+ ======================================== */
561
+
562
+ .hero-content h1 {
563
+ font-size: 2.25rem !important;
564
+ line-height: 2.5rem !important;
565
+ font-weight: 700 !important;
566
+ letter-spacing: -0.025em !important;
567
+ margin-bottom: 1.5rem !important;
568
+ color: var(--color-foreground) !important;
569
+ }
570
+
571
+ .hero-content p {
572
+ font-size: 1.25rem !important;
573
+ line-height: 1.75rem !important;
574
+ color: var(--color-muted-foreground) !important;
575
+ max-width: 42rem;
576
+ margin-left: auto;
577
+ margin-right: auto;
578
+ margin-bottom: 2rem !important;
579
+ }
580
+
581
+ .hero-content--dark h1 {
582
+ color: white !important;
583
+ }
584
+
585
+ .hero-content--dark p {
586
+ color: rgba(255, 255, 255, 0.8) !important;
587
+ }
588
+
589
+ @media (min-width: 768px) {
590
+ .hero-content h1 {
591
+ font-size: 3.75rem !important;
592
+ line-height: 1 !important;
593
+ }
594
+ }
595
+
596
+ /* Left-aligned hero content */
597
+ .hero-content--left h1 {
598
+ text-align: left !important;
599
+ margin-left: 0 !important;
600
+ margin-right: 0 !important;
601
+ }
602
+
603
+ .hero-content--left p {
604
+ text-align: left !important;
605
+ margin-left: 0 !important;
606
+ margin-right: 0 !important;
607
+ }
608
+
609
+ /* ========================================
610
+ PRODUCT SHOWCASE HERO STYLES
611
+ ======================================== */
612
+
613
+ .hero-showcase {
614
+ position: relative;
615
+ border-radius: 12px;
616
+ overflow: hidden;
617
+ padding: 3rem;
618
+ min-height: 500px;
619
+ }
620
+
621
+ @media (min-width: 768px) {
622
+ .hero-showcase {
623
+ min-height: 600px;
624
+ }
625
+ }
626
+
627
+ @media (min-width: 1024px) {
628
+ .hero-showcase {
629
+ min-height: 700px;
630
+ }
631
+ }
632
+
633
+ .hero-bg-image {
634
+ position: absolute;
635
+ inset: 0;
636
+ z-index: 0;
637
+ }
638
+
639
+ .hero-bg-image img {
640
+ width: 100%;
641
+ height: 100%;
642
+ object-fit: cover;
643
+ object-position: center;
644
+ }
645
+
646
+ .hero-mockup-centered {
647
+ position: relative;
648
+ z-index: 10;
649
+ max-width: 800px;
650
+ margin: 0 auto;
651
+ width: 100%;
652
+ }
653
+
654
+ @media (min-width: 768px) {
655
+ .hero-mockup-centered {
656
+ max-width: 900px;
657
+ }
658
+ }
659
+
660
+ @media (min-width: 1024px) {
661
+ .hero-mockup-centered {
662
+ max-width: 1000px;
663
+ }
664
+ }
665
+
666
+ .mockup-wrapper {
667
+ background: var(--color-background);
668
+ border-radius: 12px;
669
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
670
+ overflow: hidden;
671
+ animation: mockup-entrance 0.8s ease-out;
672
+ width: 100%;
673
+ }
674
+
675
+ .mockup-wrapper img {
676
+ width: 100%;
677
+ height: auto;
678
+ display: block;
679
+ }
680
+
681
+ @keyframes mockup-entrance {
682
+ from {
683
+ opacity: 0;
684
+ transform: translateY(30px);
685
+ }
686
+ to {
687
+ opacity: 1;
688
+ transform: translateY(0);
689
+ }
690
+ }
691
+
692
+ /* Browser chrome */
693
+ .mockup-chrome {
694
+ display: flex;
695
+ align-items: center;
696
+ padding: 12px 16px;
697
+ background: var(--color-muted);
698
+ border-bottom: 1px solid var(--color-border);
699
+ }
700
+
701
+ .mockup-chrome-dots {
702
+ display: flex;
703
+ gap: 6px;
704
+ }
705
+
706
+ .mockup-chrome-dots .dot {
707
+ width: 12px;
708
+ height: 12px;
709
+ border-radius: 50%;
710
+ }
711
+
712
+ .mockup-chrome-dots .dot-red {
713
+ background: #ff5f56;
714
+ }
715
+ .mockup-chrome-dots .dot-yellow {
716
+ background: #ffbd2e;
717
+ }
718
+ .mockup-chrome-dots .dot-green {
719
+ background: #27ca40;
720
+ }
721
+
722
+ .mockup-chrome-title {
723
+ flex: 1;
724
+ text-align: center;
725
+ font-size: 13px;
726
+ font-weight: 500;
727
+ color: var(--color-muted-foreground);
728
+ }
729
+
730
+ .mockup-chrome-actions {
731
+ width: 60px;
732
+ }
733
+
734
+ /* App content layout */
735
+ .mockup-content {
736
+ display: flex;
737
+ min-height: 400px;
738
+ }
739
+
740
+ .mockup-sidebar {
741
+ width: 220px;
742
+ background: var(--color-card);
743
+ border-right: 1px solid var(--color-border);
744
+ flex-shrink: 0;
745
+ }
746
+
747
+ .sidebar-header {
748
+ padding: 16px;
749
+ border-bottom: 1px solid var(--color-border);
750
+ }
751
+
752
+ .sidebar-logo {
753
+ display: flex;
754
+ align-items: center;
755
+ gap: 10px;
756
+ }
757
+
758
+ .logo-icon {
759
+ width: 28px;
760
+ height: 28px;
761
+ background: var(--color-primary);
762
+ color: white;
763
+ border-radius: 6px;
764
+ display: flex;
765
+ align-items: center;
766
+ justify-content: center;
767
+ font-weight: 700;
768
+ font-size: 14px;
769
+ }
770
+
771
+ .logo-text {
772
+ font-weight: 600;
773
+ font-size: 14px;
774
+ color: var(--color-foreground);
775
+ }
776
+
777
+ .sidebar-nav {
778
+ padding: 8px;
779
+ }
780
+
781
+ .sidebar-item {
782
+ display: flex;
783
+ align-items: center;
784
+ gap: 10px;
785
+ padding: 10px 12px;
786
+ border-radius: 6px;
787
+ font-size: 13px;
788
+ color: var(--color-muted-foreground);
789
+ transition: all 0.15s ease;
790
+ cursor: pointer;
791
+ }
792
+
793
+ .sidebar-item:hover {
794
+ background: var(--color-accent);
795
+ color: var(--color-accent-foreground);
796
+ }
797
+
798
+ .sidebar-item--active {
799
+ background: oklch(from var(--color-primary) l c h / 0.12);
800
+ color: var(--color-primary);
801
+ }
802
+
803
+ .sidebar-icon {
804
+ font-size: 16px;
805
+ }
806
+
807
+ .sidebar-label {
808
+ flex: 1;
809
+ }
810
+
811
+ .sidebar-badge {
812
+ background: var(--color-primary);
813
+ color: var(--color-primary-foreground);
814
+ font-size: 11px;
815
+ padding: 2px 6px;
816
+ border-radius: 10px;
817
+ font-weight: 500;
818
+ }
819
+
820
+ /* Main content area */
821
+ .mockup-main {
822
+ flex: 1;
823
+ display: flex;
824
+ flex-direction: column;
825
+ background: var(--color-background);
826
+ }
827
+
828
+ .main-header {
829
+ display: flex;
830
+ align-items: center;
831
+ justify-content: space-between;
832
+ padding: 16px 20px;
833
+ border-bottom: 1px solid var(--color-border);
834
+ }
835
+
836
+ .header-title {
837
+ display: flex;
838
+ flex-direction: column;
839
+ gap: 2px;
840
+ }
841
+
842
+ .header-title h2 {
843
+ font-size: 16px;
844
+ font-weight: 600;
845
+ margin: 0;
846
+ color: var(--color-foreground);
847
+ }
848
+
849
+ .header-breadcrumb {
850
+ font-size: 12px;
851
+ color: var(--color-muted-foreground);
852
+ }
853
+
854
+ .header-actions {
855
+ display: flex;
856
+ align-items: center;
857
+ gap: 8px;
858
+ }
859
+
860
+ .action-btn {
861
+ padding: 8px 16px;
862
+ background: var(--color-primary);
863
+ color: var(--color-primary-foreground);
864
+ border: none;
865
+ border-radius: 6px;
866
+ font-size: 13px;
867
+ font-weight: 500;
868
+ cursor: pointer;
869
+ transition: all 0.3s ease;
870
+ }
871
+
872
+ .action-btn--success {
873
+ background: #27ca40;
874
+ }
875
+
876
+ .action-btn--featured {
877
+ background: var(--color-primary);
878
+ }
879
+
880
+ /* Split view */
881
+ .main-split {
882
+ display: flex;
883
+ flex: 1;
884
+ }
885
+
886
+ .editor-panel {
887
+ flex: 1;
888
+ padding: 20px;
889
+ border-right: 1px solid var(--color-border);
890
+ }
891
+
892
+ .editor-section {
893
+ margin-bottom: 20px;
894
+ }
895
+
896
+ .editor-label {
897
+ display: block;
898
+ font-size: 12px;
899
+ font-weight: 500;
900
+ color: var(--color-muted-foreground);
901
+ margin-bottom: 6px;
902
+ }
903
+
904
+ .editor-input {
905
+ background: var(--color-muted);
906
+ border: 1px solid var(--color-border);
907
+ border-radius: 6px;
908
+ padding: 10px 12px;
909
+ font-size: 14px;
910
+ color: var(--color-foreground);
911
+ display: flex;
912
+ align-items: center;
913
+ }
914
+
915
+ .input-text {
916
+ flex: 1;
917
+ overflow: hidden;
918
+ text-overflow: ellipsis;
919
+ white-space: nowrap;
920
+ }
921
+
922
+ .input-cursor {
923
+ width: 2px;
924
+ height: 18px;
925
+ background: var(--color-primary);
926
+ animation: blink 1s infinite;
927
+ margin-left: 2px;
928
+ }
929
+
930
+ @keyframes blink {
931
+ 0%,
932
+ 50% {
933
+ opacity: 1;
934
+ }
935
+ 51%,
936
+ 100% {
937
+ opacity: 0;
938
+ }
939
+ }
940
+
941
+ .editor-select {
942
+ background: var(--color-muted);
943
+ border: 1px solid var(--color-border);
944
+ border-radius: 6px;
945
+ padding: 10px 12px;
946
+ font-size: 14px;
947
+ color: var(--color-foreground);
948
+ display: flex;
949
+ justify-content: space-between;
950
+ align-items: center;
951
+ }
952
+
953
+ .select-arrow {
954
+ font-size: 10px;
955
+ color: var(--color-muted-foreground);
956
+ }
957
+
958
+ .editor-textarea {
959
+ background: var(--color-muted);
960
+ border: 1px solid var(--color-border);
961
+ border-radius: 6px;
962
+ padding: 10px 12px;
963
+ font-size: 14px;
964
+ color: var(--color-foreground);
965
+ min-height: 80px;
966
+ }
967
+
968
+ .textarea-text {
969
+ transition: all 0.5s ease;
970
+ }
971
+
972
+ .textarea-text--complete {
973
+ color: var(--color-foreground);
974
+ }
975
+
976
+ /* Preview panel */
977
+ .preview-panel {
978
+ width: 320px;
979
+ padding: 20px;
980
+ background: oklch(from var(--color-muted) l c h / 0.5);
981
+ }
982
+
983
+ .preview-header {
984
+ display: flex;
985
+ justify-content: space-between;
986
+ align-items: center;
987
+ margin-bottom: 16px;
988
+ }
989
+
990
+ .preview-label {
991
+ font-size: 12px;
992
+ font-weight: 500;
993
+ color: var(--color-muted-foreground);
994
+ }
995
+
996
+ .preview-url {
997
+ font-size: 11px;
998
+ color: var(--color-muted-foreground);
999
+ font-family: monospace;
1000
+ }
1001
+
1002
+ .preview-card {
1003
+ background: var(--color-card);
1004
+ border: 1px solid var(--color-border);
1005
+ border-radius: 10px;
1006
+ overflow: hidden;
1007
+ position: relative;
1008
+ transition: all 0.3s ease;
1009
+ }
1010
+
1011
+ .preview-badge {
1012
+ position: absolute;
1013
+ top: 10px;
1014
+ right: 10px;
1015
+ background: var(--color-primary);
1016
+ color: white;
1017
+ font-size: 11px;
1018
+ padding: 4px 8px;
1019
+ border-radius: 4px;
1020
+ font-weight: 500;
1021
+ animation: badge-pop 0.3s ease;
1022
+ }
1023
+
1024
+ @keyframes badge-pop {
1025
+ from {
1026
+ transform: scale(0);
1027
+ opacity: 0;
1028
+ }
1029
+ to {
1030
+ transform: scale(1);
1031
+ opacity: 1;
1032
+ }
1033
+ }
1034
+
1035
+ .preview-image {
1036
+ height: 120px;
1037
+ background: linear-gradient(135deg, var(--color-muted) 0%, var(--color-accent) 100%);
1038
+ }
1039
+
1040
+ .preview-image-placeholder {
1041
+ width: 100%;
1042
+ height: 100%;
1043
+ display: flex;
1044
+ align-items: center;
1045
+ justify-content: center;
1046
+ font-size: 40px;
1047
+ }
1048
+
1049
+ .preview-content {
1050
+ padding: 16px;
1051
+ }
1052
+
1053
+ .preview-category-tag {
1054
+ display: inline-block;
1055
+ font-size: 11px;
1056
+ color: var(--color-primary);
1057
+ font-weight: 500;
1058
+ margin-bottom: 8px;
1059
+ }
1060
+
1061
+ .preview-title {
1062
+ font-size: 16px;
1063
+ font-weight: 600;
1064
+ margin: 0 0 8px;
1065
+ color: var(--color-foreground);
1066
+ }
1067
+
1068
+ .preview-description {
1069
+ font-size: 13px;
1070
+ color: var(--color-muted-foreground);
1071
+ line-height: 1.5;
1072
+ margin: 0 0 12px;
1073
+ }
1074
+
1075
+ .preview-meta {
1076
+ display: flex;
1077
+ gap: 8px;
1078
+ font-size: 12px;
1079
+ }
1080
+
1081
+ .meta-rating {
1082
+ color: #ffc24a;
1083
+ }
1084
+
1085
+ .meta-reviews {
1086
+ color: var(--color-muted-foreground);
1087
+ }
1088
+
1089
+ /* State indicators */
1090
+ .mockup-indicators {
1091
+ display: flex;
1092
+ justify-content: center;
1093
+ gap: 24px;
1094
+ padding: 16px;
1095
+ border-top: 1px solid var(--color-border);
1096
+ }
1097
+
1098
+ .indicator {
1099
+ display: flex;
1100
+ align-items: center;
1101
+ gap: 8px;
1102
+ background: none;
1103
+ border: none;
1104
+ cursor: pointer;
1105
+ padding: 6px 12px;
1106
+ border-radius: 20px;
1107
+ transition: all 0.2s ease;
1108
+ }
1109
+
1110
+ .indicator:hover {
1111
+ background: var(--color-accent);
1112
+ }
1113
+
1114
+ .indicator--active {
1115
+ background: oklch(from var(--color-primary) l c h / 0.12);
1116
+ }
1117
+
1118
+ .indicator-dot {
1119
+ width: 8px;
1120
+ height: 8px;
1121
+ border-radius: 50%;
1122
+ background: var(--color-muted-foreground);
1123
+ transition: all 0.2s ease;
1124
+ }
1125
+
1126
+ .indicator--active .indicator-dot {
1127
+ background: var(--color-primary);
1128
+ box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.2);
1129
+ }
1130
+
1131
+ .indicator-label {
1132
+ font-size: 12px;
1133
+ color: var(--color-muted-foreground);
1134
+ }
1135
+
1136
+ .indicator--active .indicator-label {
1137
+ color: var(--color-foreground);
1138
+ font-weight: 500;
1139
+ }
1140
+
1141
+ /* ========================================
1142
+ LOGO BANNER STYLES
1143
+ ======================================== */
1144
+
1145
+ .logo-scroll-container {
1146
+ overflow: hidden;
1147
+ mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
1148
+ }
1149
+
1150
+ .logo-scroll-track {
1151
+ display: flex;
1152
+ animation: logo-scroll 30s linear infinite;
1153
+ }
1154
+
1155
+ .logo-scroll-track:hover {
1156
+ animation-play-state: paused;
1157
+ }
1158
+
1159
+ @keyframes logo-scroll {
1160
+ 0% {
1161
+ transform: translateX(0);
1162
+ }
1163
+ 100% {
1164
+ transform: translateX(-50%);
1165
+ }
1166
+ }
1167
+
1168
+ .logo-item {
1169
+ flex-shrink: 0;
1170
+ min-width: 150px;
1171
+ }
1172
+
1173
+ /* ========================================
1174
+ RESPONSIVE ADJUSTMENTS
1175
+ ======================================== */
1176
+
1177
+ @media (max-width: 768px) {
1178
+ .mockup-content {
1179
+ flex-direction: column;
1180
+ }
1181
+
1182
+ .mockup-sidebar {
1183
+ width: 100%;
1184
+ border-right: none;
1185
+ border-bottom: 1px solid var(--color-border);
1186
+ }
1187
+
1188
+ .sidebar-nav {
1189
+ display: flex;
1190
+ overflow-x: auto;
1191
+ padding: 8px;
1192
+ gap: 4px;
1193
+ }
1194
+
1195
+ .sidebar-item {
1196
+ white-space: nowrap;
1197
+ }
1198
+
1199
+ .main-split {
1200
+ flex-direction: column;
1201
+ }
1202
+
1203
+ .editor-panel {
1204
+ border-right: none;
1205
+ border-bottom: 1px solid var(--color-border);
1206
+ }
1207
+
1208
+ .preview-panel {
1209
+ width: 100%;
1210
+ }
1211
+
1212
+ .mockup-indicators {
1213
+ flex-wrap: wrap;
1214
+ gap: 12px;
1215
+ }
1216
+
1217
+ .indicator-label {
1218
+ display: none;
1219
+ }
1220
+ }
1221
+
1222
+ /* ========================================
1223
+ ANIMATION STYLES
1224
+ ======================================== */
1225
+
1226
+ /* Industry Tabs Animation */
1227
+ .industry-tab-content {
1228
+ animation: tab-fade-in 0.3s ease-out;
1229
+ }
1230
+
1231
+ @keyframes tab-fade-in {
1232
+ from {
1233
+ opacity: 0;
1234
+ transform: translateY(10px);
1235
+ }
1236
+ to {
1237
+ opacity: 1;
1238
+ transform: translateY(0);
1239
+ }
1240
+ }
1241
+
1242
+ /* Feature Showcase Entrance Animation */
1243
+ @keyframes feature-slide-in {
1244
+ from {
1245
+ opacity: 0;
1246
+ transform: translateX(-20px);
1247
+ }
1248
+ to {
1249
+ opacity: 1;
1250
+ transform: translateX(0);
1251
+ }
1252
+ }
1253
+
1254
+ .feature-showcase-content {
1255
+ animation: feature-slide-in 0.5s ease-out;
1256
+ }
1257
+
1258
+ /* Testimonial Card Hover Effects */
1259
+ .testimonial-card {
1260
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
1261
+ }
1262
+
1263
+ .testimonial-card:hover {
1264
+ transform: translateY(-4px);
1265
+ box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
1266
+ }
1267
+
1268
+ /* Stat Number Animation */
1269
+ @keyframes stat-count-up {
1270
+ from {
1271
+ opacity: 0;
1272
+ transform: translateY(20px);
1273
+ }
1274
+ to {
1275
+ opacity: 1;
1276
+ transform: translateY(0);
1277
+ }
1278
+ }
1279
+
1280
+ .stat-number {
1281
+ animation: stat-count-up 0.6s ease-out;
1282
+ }
1283
+
1284
+ /* Trust Column Icon Animation */
1285
+ .trust-icon {
1286
+ transition: transform 0.2s ease, background-color 0.2s ease;
1287
+ }
1288
+
1289
+ .trust-icon:hover {
1290
+ transform: scale(1.1);
1291
+ }
1292
+
1293
+ /* Final CTA Background Animation */
1294
+ @keyframes subtle-float {
1295
+ 0%,
1296
+ 100% {
1297
+ transform: translateY(0);
1298
+ }
1299
+ 50% {
1300
+ transform: translateY(-10px);
1301
+ }
1302
+ }
1303
+
1304
+ .cta-decorative {
1305
+ animation: subtle-float 6s ease-in-out infinite;
1306
+ }
1307
+
1308
+ /* Feature Grid Card Entrance */
1309
+ @keyframes card-entrance {
1310
+ from {
1311
+ opacity: 0;
1312
+ transform: translateY(20px);
1313
+ }
1314
+ to {
1315
+ opacity: 1;
1316
+ transform: translateY(0);
1317
+ }
1318
+ }
1319
+
1320
+ .feature-card {
1321
+ animation: card-entrance 0.4s ease-out;
1322
+ animation-fill-mode: both;
1323
+ }
1324
+
1325
+ .feature-card:nth-child(1) {
1326
+ animation-delay: 0.1s;
1327
+ }
1328
+ .feature-card:nth-child(2) {
1329
+ animation-delay: 0.2s;
1330
+ }
1331
+ .feature-card:nth-child(3) {
1332
+ animation-delay: 0.3s;
1333
+ }
1334
+ .feature-card:nth-child(4) {
1335
+ animation-delay: 0.4s;
1336
+ }
1337
+ .feature-card:nth-child(5) {
1338
+ animation-delay: 0.5s;
1339
+ }
1340
+ .feature-card:nth-child(6) {
1341
+ animation-delay: 0.6s;
1342
+ }
1343
+
1344
+ /* Smooth Section Transitions */
1345
+ section {
1346
+ scroll-margin-top: 80px;
1347
+ }
1348
+
1349
+ /* Button Hover Enhancement */
1350
+ .cta-button {
1351
+ position: relative;
1352
+ overflow: hidden;
1353
+ }
1354
+
1355
+ .cta-button::after {
1356
+ content: "";
1357
+ position: absolute;
1358
+ inset: 0;
1359
+ background: linear-gradient(rgba(255, 255, 255, 0.1), transparent);
1360
+ opacity: 0;
1361
+ transition: opacity 0.3s ease;
1362
+ }
1363
+
1364
+ .cta-button:hover::after {
1365
+ opacity: 1;
1366
+ }
1367
+
1368
+ /* Responsive Image Container */
1369
+ .feature-image-container {
1370
+ position: relative;
1371
+ border-radius: 12px;
1372
+ overflow: hidden;
1373
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
1374
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
1375
+ }
1376
+
1377
+ .feature-image-container:hover {
1378
+ transform: translateY(-4px);
1379
+ box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.2);
1380
+ }