/* 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; } } /* * ================================================================================================= * ✨💅 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 { /* 🌈✨ 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 */ /* 💅 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: 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. * ================================================================================================= */ [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; } .navbar-brand { font-weight: bold; } .navbar-text { font-size: 0.9rem; } @media (max-width: 992px) { .navbar-text { display: none; } }