88 lines
2.2 KiB
CSS
88 lines
2.2 KiB
CSS
|
|
/* Emoji Footprint Animation */
|
|
.emoji-footprint {
|
|
position: absolute;
|
|
font-size: 1.6rem;
|
|
pointer-events: none;
|
|
animation: emojiFade 1s ease-out forwards;
|
|
transform: translate(-50%, -50%) scale(1);
|
|
opacity: 1;
|
|
z-index: 9999;
|
|
text-shadow:
|
|
0 0 4px #ff00bf,
|
|
0 0 8px #ff80df,
|
|
0 0 12px #ffccff;
|
|
}
|
|
|
|
@keyframes emojiFade {
|
|
0% {
|
|
transform: translate(-50%, -50%) scale(1);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: translate(-50%, -50%) scale(1.5);
|
|
opacity: 0.7;
|
|
}
|
|
100% {
|
|
transform: translate(-50%, -50%) scale(2);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* Light Mode (Default) */
|
|
:root {
|
|
--bs-primary: #ff47a3; /* Hot Pink */
|
|
--bs-secondary: #7367f0; /* Lavender */
|
|
--bs-success: #53e69d; /* Minty Green */
|
|
--bs-info: #51caff; /* Sky Blue */
|
|
--bs-warning: #ffd53e; /* Sunshine Yellow */
|
|
--bs-danger: #ff5666; /* Coral Red */
|
|
--bs-light: #fff7fa; /* Almost-white Pink */
|
|
--bs-dark: #3b233d; /* Deep Purple */
|
|
|
|
/* Quirk it up further */
|
|
--bs-body-bg: #fff7fa;
|
|
--bs-body-color: #3b233d;
|
|
--bs-link-color: #ff47a3;
|
|
--bs-link-hover-color: #7367f0;
|
|
--bs-border-color: #ffb8e1;
|
|
}
|
|
|
|
/* Dark Mode (Bootstrap's preferred way) */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bs-primary: #ff9cd7; /* Pastel Pink */
|
|
--bs-secondary: #b39afd; /* Light Lavender */
|
|
--bs-success: #8fffd9; /* Lighter Mint */
|
|
--bs-info: #90e7ff; /* Pastel Sky Blue */
|
|
--bs-warning: #fff4b1; /* Pale Yellow */
|
|
--bs-danger: #ffb1b8; /* Soft Coral */
|
|
--bs-light: #2a102d; /* Deep Purple-Black */
|
|
--bs-dark: #fff7fa; /* Reverse for dark backgrounds */
|
|
|
|
--bs-body-bg: #2a102d;
|
|
--bs-body-color: #fff7fa;
|
|
--bs-link-color: #ff9cd7;
|
|
--bs-link-hover-color: #b39afd;
|
|
--bs-border-color: #6e3a6e;
|
|
}
|
|
}
|
|
|
|
/* Top Navigation Bar Styles */
|
|
main {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.navbar-brand {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.navbar-text {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.navbar-text {
|
|
display: none;
|
|
}
|
|
}
|