valknar
b141356247
- Add --color-green-mid token (#4a7a55) to @theme for dimmer stat values
- Replace all text-[#hex]/bg-[#hex] arbitrary values with named tokens:
text-green, text-green-light, text-green-sec, text-green-muted,
text-green-dark, text-green-mid, text-text, bg-card, bg-bg, border-border
- Replace rgba(34,197,94,X) inline styles with bg-green/X opacity modifiers
- Convert single-prop style={{ borderColor/background }} to className
- Fix SVG stroke="#dff5e8" → stroke="currentColor"
- Use CSS variables in globals.css base styles (background-color, color)
- Move app/data/wikipedia/ → data/ (project root, not inside Next.js app dir)
- Update Dockerfile, seed.ts, scrape-wikipedia.ts paths accordingly
- Remove unused app/data/world_cup.csv
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
94 lines
2.5 KiB
CSS
94 lines
2.5 KiB
CSS
@import "tailwindcss";
|
|
@import "flag-icons/css/flag-icons.min.css";
|
|
|
|
@custom-variant hover (&:hover);
|
|
|
|
@theme {
|
|
--color-bg: #040d08;
|
|
--color-card: #0a1810;
|
|
--color-hero: #0d2416;
|
|
--color-green: #22c55e;
|
|
--color-green-light: #4ade80;
|
|
--color-green-sec: #6abf7a;
|
|
--color-green-muted: #2a5c35;
|
|
--color-green-dark: #1a3a22;
|
|
--color-green-mid: #4a7a55;
|
|
--color-text: #dff5e8;
|
|
--color-border: rgba(34,197,94,0.15);
|
|
|
|
--font-display: "Bebas Neue", cursive;
|
|
--font-body: "Space Grotesk", system-ui, sans-serif;
|
|
}
|
|
|
|
@layer base {
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
html { scroll-behavior: smooth; }
|
|
|
|
body {
|
|
background-color: var(--color-bg);
|
|
/* Diagonal goal-net pattern */
|
|
background-image:
|
|
repeating-linear-gradient(
|
|
-45deg,
|
|
rgba(34,197,94,0.028) 0, rgba(34,197,94,0.028) 1px,
|
|
transparent 1px, transparent 28px
|
|
),
|
|
repeating-linear-gradient(
|
|
45deg,
|
|
rgba(34,197,94,0.028) 0, rgba(34,197,94,0.028) 1px,
|
|
transparent 1px, transparent 28px
|
|
);
|
|
color: var(--color-text);
|
|
font-family: "Space Grotesk", system-ui, sans-serif;
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Glass card — semi-transparent over the body net pattern */
|
|
.glass-card {
|
|
background: rgba(4, 18, 8, 0.78);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 1rem;
|
|
overflow: hidden;
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.glass-card-hero {
|
|
background: linear-gradient(145deg, rgba(13,32,22,0.82), rgba(16,42,28,0.82));
|
|
border: 1px solid color-mix(in srgb, var(--color-green) 28%, transparent);
|
|
border-radius: 1rem;
|
|
overflow: hidden;
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
|
|
::-webkit-scrollbar { width: 5px; }
|
|
::-webkit-scrollbar-track { background: #020a04; }
|
|
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-green) 25%, transparent); border-radius: 4px; }
|
|
|
|
@keyframes livePulse {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.2; transform: scale(0.6); }
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.animate-live { animation: livePulse 2s ease-in-out infinite; }
|
|
.animate-fade-in { animation: fadeIn 0.3s ease-out; }
|
|
|
|
.pitch-grid {
|
|
background-image: repeating-linear-gradient(
|
|
0deg,
|
|
transparent,
|
|
transparent 44px,
|
|
rgba(34,197,94,0.018) 44px,
|
|
rgba(34,197,94,0.018) 88px
|
|
);
|
|
}
|
|
}
|