updateeeeee

public/assets/css/styles.css

@@ -29,45 +29,145 @@
     }
 }
 
-/* Light Mode (Default) */
+/*
+ * =================================================================================================
+ * ✨💅 GAY, SLAY & FABULOUS THEME 💅✨
+ *
+ * A Bootstrap override that's unapologetically queer, vibrant, and readable.
+ * Because your website deserves to be as iconic as you are.
+ *
+ * Designed with love, glitter, and a whole lot of sass.
+ * =================================================================================================
+ */
+
 :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 */
+    /* 🌈✨ The Main Attraction: A Vibrant & Proud Palette ✨🌈 */
+    --bs-red:     #FF3860;   /* 🍒 Cherry Pop Realness */
+    --bs-orange:  #FF9F43;   /* 🍊 Tangerine Dream Queen */
+    --bs-yellow:  #FFE156;   /* 🌟 Superstar Spotlight */
+    --bs-green:   #34C759;   /* 🌿 Growth & chosen family */
+    --bs-teal:    #20c997;   /* 🧜‍♀️ Mermaid's Grotto */
+    --bs-cyan:    #4ED6FF;   /* 🧊 Iced Genderfluid */
+    --bs-blue:    #5AC8FA;   /* 🦋 Blue Bi You */
+    --bs-indigo:  #6C63FF;   /* 🦄 Unicorn Energy */
+    --bs-purple:  #AF52DE;   /* 💜 Violets for Visibility */
+    --bs-pink:    #FF6F91;   /* 💖 Queerberry Kiss */
 
-    /* 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;
+    /* 💅 Neutrals That Are Anything But Neutral 💅 */
+    --bs-black:       #1A202C; /* 🕶️ Midnight Manifesto */
+    --bs-white:       #F8F7FF; /* ☁️ Cloud Nine Comfort */
+    --bs-gray:        #A0AEC0; /* 🌫️ Foggy Festival Morning */
+    --bs-gray-dark:   #2D3748; /* 🖤 Emo Afterparty */
+    --bs-gray-100:    #F7FAFC;
+    --bs-gray-200:    #EDF2F7;
+    --bs-gray-300:    #E2E8F0;
+    --bs-gray-400:    #CBD5E1;
+    --bs-gray-500:    #A0AEC0;
+    --bs-gray-600:    #718096;
+    --bs-gray-700:    #4A5568;
+    --bs-gray-800:    #2D3748;
+    --bs-gray-900:    #1A202C;
+
+    /* 💖 Semantic Roles: Give Every Color a Job 💖 */
+    --bs-primary:     var(--bs-indigo); /* Main Character Energy */
+    --bs-secondary:   var(--bs-pink);   /* Sassy Sidekick */
+    --bs-success:     var(--bs-green);  /* Yas, Queen! (Success) */
+    --bs-info:        var(--bs-cyan);   /* The Tea (Information) */
+    --bs-warning:     var(--bs-orange); /* Hun, Be Careful (Warning) */
+    --bs-danger:      var(--bs-red);    /* Not Today, Satan (Danger) */
+    --bs-light:       var(--bs-gray-100); /* Daytime Disco */
+    --bs-dark:        var(--bs-gray-900); /* Velvet Rope */
+
+    /* 📖 Fonts with Personality 📖 */
+    /* Recommendation: Import "Quicksand" and "Fira Mono" from Google Fonts for the full effect! */
+    --bs-font-sans-serif: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --bs-font-monospace: "Fira Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+    /* ✨ The Gradient That Slays ✨ */
+    --bs-gradient: linear-gradient(93deg, var(--bs-indigo), var(--bs-pink) 50%, var(--bs-orange));
+
+    /* 🎨 Core Styles for a Flawless Look 🎨 */
+    --bs-body-color: var(--bs-gray-800);
+    --bs-body-bg: var(--bs-white);
+    --bs-emphasis-color: var(--bs-black);
+    --bs-secondary-color: rgba(45, 55, 72, 0.75);
+    --bs-secondary-bg: var(--bs-gray-200);
+    --bs-tertiary-color: rgba(45, 55, 72, 0.5);
+    --bs-tertiary-bg: var(--bs-gray-100);
+    --bs-heading-color: inherit;
+    --bs-link-color: var(--bs-primary);
+    --bs-link-hover-color: var(--bs-purple);
+    --bs-code-color: var(--bs-pink);
+    --bs-highlight-bg: #fff9c4; /* A soft, buttery highlight */
+    --bs-border-color: var(--bs-gray-300);
+    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
+    --bs-border-radius: 0.5rem;      /* A little softer, a little friendlier */
+    --bs-border-radius-lg: 0.75rem;
+    --bs-border-radius-sm: 0.25rem;
+    --bs-box-shadow: 0 0.25rem 1.5rem rgba(45, 55, 72, 0.1);
+    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(45, 55, 72, 0.07);
+    --bs-box-shadow-lg: 0 1rem 3rem rgba(45, 55, 72, 0.15);
 }
 
-/* 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 */
+/*
+ * =================================================================================================
+ * 🌙✨ DARK MODE: VOGUE AFTER MIDNIGHT ✨🌙
+ *
+ * Because fabulousness doesn't sleep. This is for the night owls, the dreamers,
+ * and everyone who knows the party really starts after dark.
+ * =================================================================================================
+ */
 
-        --bs-body-bg: #2a102d;
-        --bs-body-color: #fff7fa;
-        --bs-link-color: #ff9cd7;
-        --bs-link-hover-color: #b39afd;
-        --bs-border-color: #6e3a6e;
-    }
+[data-bs-theme=dark] {
+    color-scheme: dark;
+
+    /* 💅 Dark Mode Neutrals: Still Chic 💅 */
+    --bs-body-color: var(--bs-gray-300);
+    --bs-body-bg: var(--bs-gray-900);
+    --bs-emphasis-color: var(--bs-white);
+    --bs-secondary-color: rgba(237, 242, 247, 0.75);
+    --bs-secondary-bg: var(--bs-gray-800);
+    --bs-tertiary-color: rgba(237, 242, 247, 0.5);
+    --bs-tertiary-bg: #222938; /* A slightly bluer dark gray */
+
+    /* 💖 Semantic Roles: Nightlife Edition 💖 */
+    /* We use the same vibrant colors but adjust text emphasis and backgrounds for contrast */
+    --bs-primary-text-emphasis: #A3A0FF;
+    --bs-secondary-text-emphasis: #FFA8B9;
+    --bs-success-text-emphasis: #79F3B3;
+    --bs-info-text-emphasis: #99E5FF;
+    --bs-warning-text-emphasis: #FFC98B;
+    --bs-danger-text-emphasis: #FF7B96;
+    --bs-light-text-emphasis: #F7FAFC;
+    --bs-dark-text-emphasis: #E2E8F0;
+
+    --bs-primary-bg-subtle: #2A2859;
+    --bs-secondary-bg-subtle: #592432;
+    --bs-success-bg-subtle: #144A29;
+    --bs-info-bg-subtle: #194A59;
+    --bs-warning-bg-subtle: #593918;
+    --bs-danger-bg-subtle: #591422;
+    --bs-light-bg-subtle: var(--bs-gray-800);
+    --bs-dark-bg-subtle: var(--bs-gray-900);
+
+    --bs-primary-border-subtle: #4D49A6;
+    --bs-secondary-border-subtle: #A6435C;
+    --bs-success-border-subtle: #248047;
+    --bs-info-border-subtle: #2D8DA6;
+    --bs-warning-border-subtle: #A66629;
+    --bs-danger-border-subtle: #A6273D;
+    --bs-light-border-subtle: var(--bs-gray-700);
+    --bs-dark-border-subtle: var(--bs-gray-800);
+
+    /* 🎨 Core Styles for the Afterparty 🎨 */
+    --bs-heading-color: inherit;
+    --bs-link-color: var(--bs-blue);
+    --bs-link-hover-color: var(--bs-cyan);
+    --bs-code-color: var(--bs-secondary);
+    --bs-highlight-bg: #403d07;
+    --bs-border-color: var(--bs-gray-700);
+    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
 }
-
 /* Top Navigation Bar Styles */
 main {
     margin-top: 20px;