vibe

public/assets/css/styles.css

@@ -0,0 +1,88 @@
+
+/* 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;
+    }
+}