mwf975_git/tippspiel
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: match Stitch glassmorphism — backdrop-blur, flag glow auras, deeper shadows

Browse Source 
Hero card now uses glassmorphism (rgba + backdrop-blur) from Stitch design.
Each flag has individual blur-glow aura behind it.
Rounded corners increased to 2rem. Shadow depth increased.
Stats tiles and nudges also refined with rounder corners.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ronny
2026-04-12 12:08:29 +02:00
parent 23116a847a
commit 8503592c7b
1 changed files with 50 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/DashboardPage.module.css
+50 -24
View File
@@ -12,16 +12,20 @@
═══════════════════════════════════════ */
.hero {
position: relative;
border-radius: var(--radius-lg);
padding: 24px 20px 20px;
border-radius: 2rem;
padding: 28px 22px 22px;
cursor: pointer;
overflow: hidden;
background: linear-gradient(165deg, #141e38 0%, #0d1526 40%, #091020 100%);
border: 1px solid rgba(75, 183, 248, 0.12);
/* Glassmorphism like Stitch design */
background: rgba(49, 52, 66, 0.4);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
/* Gradient border effect */
border: 1px solid rgba(75, 183, 248, 0.2);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
0 2px 8px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
0 40px 80px -15px rgba(0, 0, 0, 0.6),
0 8px 24px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
transition: transform 0.2s;
}
@@ -29,15 +33,15 @@
transform: scale(1.01);
}
/* Radial glow behind the teams */
/* Radial glow behind the teams — stronger, like Stitch */
.heroGlow {
position: absolute;
top: 40%;
top: 45%;
left: 50%;
width: 280px;
height: 200px;
width: 320px;
height: 280px;
transform: translate(-50%, -50%);
background: radial-gradient(ellipse, rgba(75, 183, 248, 0.12) 0%, rgba(254, 174, 50, 0.06) 40%, transparent 70%);
background: radial-gradient(circle at center, rgba(75, 183, 248, 0.15) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
@@ -125,23 +129,34 @@
}
.heroCrestBox {
width: 72px;
height: 72px;
border-radius: 18px;
position: relative;
width: 80px;
height: 80px;
border-radius: 20px;
background: var(--surface-high);
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.08);
0 8px 24px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* Glow aura behind each flag */
.heroCrestBox::before {
content: '';
position: absolute;
inset: -16px;
background: rgba(75, 183, 248, 0.2);
filter: blur(24px);
border-radius: 50%;
z-index: -1;
}
.heroCrest {
width: 52px;
height: 52px;
width: 58px;
height: 58px;
object-fit: contain;
}
@@ -225,8 +240,10 @@
}
.statTile {
padding: 16px 8px;
padding: 18px 8px;
text-align: center;
border-radius: 1.5rem !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.statValue {
@@ -263,10 +280,12 @@
.nudge {
display: flex;
align-items: center;
gap: 12px;
gap: 14px;
padding: 14px 16px;
cursor: pointer;
transition: background 0.2s, transform 0.15s;
transition: all 0.2s;
border-radius: 1.25rem !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.nudge:hover {
@@ -274,7 +293,14 @@
}
.nudgeIcon {
font-size: 1.2rem;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(75, 183, 248, 0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}