valknar/worldcup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add football net background pattern and glass card styling

Browse Source 
Diagonal ±45° goal-net texture on body background. All card surfaces
converted from opaque #0a1810 to glass-card (backdrop-blur + semi-transparent
rgba) or glass-card-hero (gradient rgba) so the net pattern shows through.
Covers all pages: home, groups, history, search, stats, teams, tournaments,
players, match cards, and 404.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-06-14 22:01:40 +02:00
parent 479c3d93e4
commit 767236739b
11 changed files with 60 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+32 -1
View File
@@ -25,13 +25,44 @@
html { scroll-behavior: smooth; }
body {
background: #040d08;
background-color: #040d08;
/* 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: #dff5e8;
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 rgba(34,197,94,0.15);
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 rgba(34,197,94,0.28);
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: rgba(34,197,94,0.25); border-radius: 4px; }