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:
nmemmertandClaude Sonnet 4.6 committed 2026-08-04 16:53:37 -04:00
1 parent 21d828b7c7
commit dcdf4bf1fd
2 files changed
+62 -10

No files matched your search

+61 -9
View File
@@ -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"] {