celebrations
This commit is contained in:
@@ -928,3 +928,175 @@
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
PERFECT BOARD CELEBRATION
|
||||
========================================================================== */
|
||||
|
||||
.perfect-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1200; /* below the confetti canvas (9999) so confetti falls over the card */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.perfect-overlay.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.perfect-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: min(380px, 100%);
|
||||
padding: 30px 24px 22px;
|
||||
text-align: center;
|
||||
background: var(--bg-secondary);
|
||||
border: 1.5px solid rgba(245, 158, 11, 0.45);
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 0 0 6px rgba(245, 158, 11, 0.08);
|
||||
transform: scale(0.85) translateY(20px);
|
||||
transition: transform 0.45s var(--ease-spring);
|
||||
}
|
||||
|
||||
.perfect-overlay.visible .perfect-card {
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
|
||||
.perfect-glow {
|
||||
position: absolute;
|
||||
inset: -40% -20% auto;
|
||||
height: 70%;
|
||||
background: radial-gradient(circle, rgba(251, 191, 36, 0.35), transparent 65%);
|
||||
pointer-events: none;
|
||||
animation: perfectGlow 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes perfectGlow {
|
||||
0%, 100% { opacity: 0.6; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.08); }
|
||||
}
|
||||
|
||||
.perfect-crown {
|
||||
position: relative;
|
||||
font-size: 3.6rem;
|
||||
line-height: 1;
|
||||
margin-bottom: 6px;
|
||||
filter: drop-shadow(0 6px 14px rgba(245, 158, 11, 0.45));
|
||||
animation: crownDrop 0.8s var(--ease-spring) 0.15s both, crownFloat 2.6s ease-in-out 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes crownDrop {
|
||||
0% { transform: translateY(-60px) rotate(-20deg) scale(0.4); opacity: 0; }
|
||||
100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes crownFloat {
|
||||
0%, 100% { transform: translateY(0) rotate(0); }
|
||||
50% { transform: translateY(-6px) rotate(4deg); }
|
||||
}
|
||||
|
||||
.perfect-title {
|
||||
position: relative;
|
||||
margin: 0 0 6px;
|
||||
font-size: 2.2rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.02em;
|
||||
background: var(--accent-quartile-gradient);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.perfect-praise {
|
||||
position: relative;
|
||||
margin: 0 auto 18px;
|
||||
max-width: 290px;
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.perfect-stats {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.perfect-stat {
|
||||
padding: 10px 4px;
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--radius-md);
|
||||
animation: statPop 0.4s var(--ease-spring) both;
|
||||
}
|
||||
|
||||
.perfect-stat:nth-child(1) { animation-delay: 0.35s; }
|
||||
.perfect-stat:nth-child(2) { animation-delay: 0.45s; }
|
||||
.perfect-stat:nth-child(3) { animation-delay: 0.55s; }
|
||||
|
||||
@keyframes statPop {
|
||||
0% { transform: scale(0.6); opacity: 0; }
|
||||
100% { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
.perfect-stat-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.perfect-stat-label {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.perfect-milestone {
|
||||
position: relative;
|
||||
margin: 0 0 18px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--accent-quartile);
|
||||
}
|
||||
|
||||
.perfect-actions {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.perfect-btn-primary {
|
||||
height: 46px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--accent-quartile-gradient);
|
||||
color: #ffffff;
|
||||
font-weight: 800;
|
||||
font-size: 1rem;
|
||||
box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35);
|
||||
transition: transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.perfect-btn-primary:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.perfect-btn-secondary {
|
||||
height: 40px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user