188 lines
7 KiB
CSS
188 lines
7 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;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* =================================================================================================
|
|
* ✨💅 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;
|
|
}
|
|
}
|