Dark background + glowing kid cards + parent dashboard card on student home
- Student home gets a deep navy-to-indigo background so card glows pop - Each kid card glows its own theme color via ::after blur pseudo-element with breathing animation; hover cranks it up to full brightness - Floating school emoji opacity increased for visibility on dark bg - 'Parent dashboard' link replaced with a frosted-glass card button Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
1 parent
21d828b7c7
commit
dcdf4bf1fd
2 files changed
+62
-10
No files matched your search
+61
-9
@@ -91,10 +91,19 @@ body:has(#console[hidden])::before {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* ---------- kid picker ---------- */
|
||||
/* ---------- kid picker (dark home screen) ---------- */
|
||||
body:has(#view-home:not([hidden])) {
|
||||
background: linear-gradient(145deg, #0f1628 0%, #1a0f3e 100%);
|
||||
}
|
||||
body:has(#view-home:not([hidden])) .app-title { color: #fff; }
|
||||
body:has(#view-home:not([hidden])) .subtitle,
|
||||
body:has(#view-home:not([hidden])) #no-kids { color: rgba(255,255,255,0.55); }
|
||||
body:has(#view-home:not([hidden])) a.link-btn { color: rgba(255,255,255,0.35); }
|
||||
body:has(#view-home:not([hidden])) .page-confetti span { opacity: 0.7; }
|
||||
|
||||
@keyframes confetti-float {
|
||||
0%, 100% { transform: translateY(0px) rotate(-4deg); opacity: 0.28; }
|
||||
50% { transform: translateY(-20px) rotate(6deg); opacity: 0.52; }
|
||||
0%, 100% { transform: translateY(0px) rotate(-4deg); opacity: 0.45; }
|
||||
50% { transform: translateY(-20px) rotate(6deg); opacity: 0.75; }
|
||||
}
|
||||
.page-confetti {
|
||||
position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
|
||||
@@ -115,29 +124,50 @@ body:has(#console[hidden])::before {
|
||||
75% { transform: rotate(-7deg) scale(1.07); }
|
||||
100% { transform: rotate(0deg) scale(1); }
|
||||
}
|
||||
@keyframes glow-breathe {
|
||||
0%, 100% { opacity: 0.42; }
|
||||
50% { opacity: 0.65; }
|
||||
}
|
||||
|
||||
.kid-cards {
|
||||
display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
|
||||
display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center;
|
||||
margin-bottom: 2.5rem;
|
||||
position: relative; z-index: 1;
|
||||
}
|
||||
.kid-card {
|
||||
background: var(--card);
|
||||
border: 3px solid transparent;
|
||||
border: none;
|
||||
border-top: 5px solid var(--kid-accent, var(--accent));
|
||||
border-radius: var(--radius);
|
||||
padding: 1.5rem 2rem;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 16px rgba(45, 49, 66, 0.1);
|
||||
transition: transform 0.18s ease, box-shadow 0.2s ease;
|
||||
transition: transform 0.2s ease;
|
||||
min-width: 140px;
|
||||
animation: card-enter 0.42s ease backwards;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
}
|
||||
.kid-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -2px;
|
||||
border-radius: var(--radius);
|
||||
background: var(--kid-accent, var(--accent));
|
||||
filter: blur(22px);
|
||||
opacity: 0.42;
|
||||
z-index: -1;
|
||||
animation: glow-breathe 3s ease-in-out infinite;
|
||||
transition: opacity 0.25s ease, filter 0.25s ease;
|
||||
}
|
||||
.kid-card:hover {
|
||||
transform: translateY(-8px) scale(1.07);
|
||||
box-shadow: 0 14px 36px color-mix(in srgb, var(--kid-accent, var(--accent)) 28%, rgba(45,49,66,0.15));
|
||||
transform: translateY(-10px) scale(1.08);
|
||||
}
|
||||
.kid-card:hover::after {
|
||||
opacity: 0.92;
|
||||
filter: blur(32px);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.kid-card:hover .avatar { animation: emoji-wobble 0.48s ease; }
|
||||
.kid-card .avatar { display: block; font-size: 3rem; margin-bottom: 0.5rem; }
|
||||
@@ -568,6 +598,28 @@ table.results tr:nth-child(even) td { background: #faf7ee; }
|
||||
.admin-main h2 { margin: 1.5rem 0 0.5rem; font-size: 1.15rem; }
|
||||
.panel { text-align: left; }
|
||||
|
||||
/* ---------- parent dashboard card (on student home) ---------- */
|
||||
.parent-dash-card {
|
||||
display: inline-flex; align-items: center; gap: 0.6rem;
|
||||
background: rgba(255,255,255,0.12);
|
||||
color: rgba(255,255,255,0.7);
|
||||
border: 1.5px solid rgba(255,255,255,0.18);
|
||||
border-radius: 14px;
|
||||
padding: 0.65rem 1.25rem;
|
||||
font-size: 0.95rem; font-weight: 600;
|
||||
text-decoration: none;
|
||||
backdrop-filter: blur(8px);
|
||||
transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.15s;
|
||||
cursor: pointer;
|
||||
position: relative; z-index: 1;
|
||||
}
|
||||
.parent-dash-card:hover {
|
||||
background: rgba(255,255,255,0.22);
|
||||
color: #fff;
|
||||
border-color: rgba(255,255,255,0.35);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* ---------- filter bar ---------- */
|
||||
.filter-bar { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
|
||||
.filter-bar input[type="search"] {
|
||||
|
||||
Reference in new issue
Block a user