79 lines
2.1 KiB
CSS
79 lines
2.1 KiB
CSS
/* ============================================================
|
|
badges.css — system badges (bottom-right pill stack) + the
|
|
hidden pokeball easter egg tucked inside them.
|
|
Shared across all pages.
|
|
============================================================ */
|
|
|
|
/* ============================================================
|
|
6. SYSTEM BADGES (shared, pinned bottom-right)
|
|
============================================================ */
|
|
.badges {
|
|
position: fixed;
|
|
right: 1rem;
|
|
bottom: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 0.4rem;
|
|
pointer-events: none;
|
|
z-index: 5;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
padding: 0.3rem 0.6rem;
|
|
border-radius: 999px;
|
|
background: var(--surface-0);
|
|
border: 1px solid rgba(var(--accent-rgb), 0.45);
|
|
color: var(--subtext-1);
|
|
font-size: 0.75rem;
|
|
white-space: nowrap;
|
|
transition: border-color 0.6s ease, box-shadow 0.6s ease;
|
|
}
|
|
|
|
.badge:hover {
|
|
border-color: rgb(var(--accent-rgb));
|
|
box-shadow: 0 4px 14px -6px rgba(var(--accent-rgb), 0.5);
|
|
}
|
|
|
|
.badge-icon {
|
|
width: 15px;
|
|
height: 15px;
|
|
filter: invert(78%) sepia(36%) saturate(640%) hue-rotate(280deg) brightness(105%);
|
|
}
|
|
|
|
|
|
/* ============================================================
|
|
12. HIDDEN POKÉBALL (unlocks the Pokémon cats once clicked)
|
|
============================================================ */
|
|
/* Small, low-contrast and tucked among the badges so it has to be
|
|
hunted for. Still clickable — that's the whole point of finding it. */
|
|
#pokeball-secret {
|
|
width: 14px;
|
|
height: 14px;
|
|
opacity: 0.18;
|
|
align-self: center;
|
|
cursor: url('../assets/cursor/default_0.png'), default;
|
|
pointer-events: auto;
|
|
/* parent .badges sets none — re-enable here */
|
|
image-rendering: auto;
|
|
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
-webkit-user-drag: none;
|
|
user-select: none;
|
|
}
|
|
|
|
#pokeball-secret:hover {
|
|
opacity: 0.85;
|
|
transform: scale(1.15);
|
|
}
|
|
|
|
#pokeball-secret.found {
|
|
opacity: 1;
|
|
cursor: url('../assets/cursor/default_0.png'), default;
|
|
filter: drop-shadow(0 0 4px var(--red));
|
|
}
|
|
|
|
|