forked from lubiana/futtern
booty
This commit is contained in:
parent
c99032044d
commit
5cb66c5012
SSH key fingerprint:
SHA256:vW1EA0fRR3Fw+dD/sM0K+x3Il2gSry6YRYHqOeQwrfk
34 changed files with 1236 additions and 132 deletions
|
|
@ -4,6 +4,19 @@
|
|||
* This file will be included onto the page via the importmap() Twig function,
|
||||
* which should already be in your base.html.twig.
|
||||
*/
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import './styles/app.css';
|
||||
import './styles/modes.css';
|
||||
import './styles/emoji-footprint.css';
|
||||
|
||||
import './javascript/htmx.js';
|
||||
// Import modules
|
||||
import './javascript/theme.js';
|
||||
import './javascript/emoji-footprint.js';
|
||||
import './javascript/modes.js';
|
||||
import './javascript/htmx.js';
|
||||
import 'bootstrap';
|
||||
import { initRadioState } from './javascript/radioState.js';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initRadioState();
|
||||
});
|
||||
19
assets/javascript/emoji-footprint.js
Normal file
19
assets/javascript/emoji-footprint.js
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
// Sparkle effect on mouse move
|
||||
document.addEventListener('mousemove', function (e) {
|
||||
const emojis = ['✨', '💖', '🌟', '💅', '🦄', '🎉', '🌈'];
|
||||
const sparkle = document.createElement('div');
|
||||
sparkle.className = 'emoji-footprint';
|
||||
sparkle.textContent = emojis[Math.floor(Math.random() * emojis.length)];
|
||||
sparkle.style.left = e.pageX + 'px';
|
||||
sparkle.style.top = e.pageY + 'px';
|
||||
document.body.appendChild(sparkle);
|
||||
|
||||
setTimeout(() => {
|
||||
sparkle.remove();
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
export function initEmojiFootprint() {
|
||||
// The sparkle effect is already initialized when this module is imported
|
||||
// This function can be used if we need to control when the effect starts
|
||||
}
|
||||
136
assets/javascript/modes.js
Normal file
136
assets/javascript/modes.js
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
// Bonkers mode functionality
|
||||
function setEmojiLevelClass(mode) {
|
||||
document.body.classList.remove('emoji-normal', 'emoji-enhanced', 'emoji-bonkers');
|
||||
if (mode === 'bonkers') {
|
||||
document.body.classList.add('emoji-bonkers');
|
||||
} else if (mode === 'enhanced') {
|
||||
document.body.classList.add('emoji-enhanced');
|
||||
} else {
|
||||
document.body.classList.add('emoji-normal');
|
||||
}
|
||||
}
|
||||
|
||||
function initBonkersMode() {
|
||||
// Check if we're in bonkers mode
|
||||
const currentMode = document.documentElement.getAttribute('data-website-mode');
|
||||
setEmojiLevelClass(currentMode);
|
||||
|
||||
if (currentMode === 'bonkers') {
|
||||
// Apply bonkers mode immediately
|
||||
document.body.classList.add('bonkers-mode');
|
||||
|
||||
// Start the fabulous effects
|
||||
createExtraSparkles();
|
||||
createSlayEffects();
|
||||
|
||||
console.log('🌈✨ Bonkers mode activated! ✨🌈');
|
||||
} else {
|
||||
// Remove bonkers mode if it was active
|
||||
document.body.classList.remove('bonkers-mode');
|
||||
}
|
||||
}
|
||||
|
||||
// Function to create extra sparkles during bonkers mode
|
||||
function createExtraSparkles() {
|
||||
const currentMode = document.documentElement.getAttribute('data-website-mode');
|
||||
if (currentMode !== 'bonkers') return;
|
||||
|
||||
const extraEmojis = [
|
||||
'💃', '🕺',
|
||||
'🍑', '💦', '😏', '😈', '👅', '💋', '🥵', '😳', '🤤', '😍', '🥴',
|
||||
'💕', '💖', '💗', '💘', '💝', '💞', '💟', '💌', '💏', '💑',
|
||||
'🍆', '🥒', '🍌', '💦', '👀', '😉', '😌', '😍', '🥰', '😘',
|
||||
'😚', '😋', '😏', '😫', '😩', '🥺', '🥵', '🥴',
|
||||
'💖', '💗', '💕', '💞', '💓', '💗', '💖', '💘', '💝',
|
||||
'💋', '💏', '💑'
|
||||
];
|
||||
const sparkle = document.createElement('div');
|
||||
sparkle.className = 'emoji-footprint';
|
||||
sparkle.textContent = extraEmojis[Math.floor(Math.random() * extraEmojis.length)];
|
||||
sparkle.style.left = Math.random() * window.innerWidth + 'px';
|
||||
sparkle.style.top = Math.random() * window.innerHeight + 'px';
|
||||
document.body.appendChild(sparkle);
|
||||
|
||||
setTimeout(() => {
|
||||
if (sparkle.parentNode) {
|
||||
sparkle.remove();
|
||||
}
|
||||
}, 3000);
|
||||
|
||||
// Continue creating extra sparkles while in bonkers mode
|
||||
const newMode = document.documentElement.getAttribute('data-website-mode');
|
||||
if (newMode === 'bonkers') {
|
||||
setTimeout(() => createExtraSparkles(), 150);
|
||||
}
|
||||
}
|
||||
|
||||
// Function to create slay effects
|
||||
function createSlayEffects() {
|
||||
const currentMode = document.documentElement.getAttribute('data-website-mode');
|
||||
if (currentMode !== 'bonkers') return;
|
||||
|
||||
// Create floating "SLAY" text effects
|
||||
const slayWords = [
|
||||
'SLAY', 'QUEEN', 'FABULOUS', 'ICONIC', 'LEGENDARY', 'STUNNING', 'GORGEOUS', 'FLAWLESS',
|
||||
'DAZZLING', 'RADIANT', 'BREATHTAKING', 'EXQUISITE', 'DIVINE'
|
||||
];
|
||||
const slayElement = document.createElement('div');
|
||||
slayElement.className = 'slay-text';
|
||||
slayElement.textContent = slayWords[Math.floor(Math.random() * slayWords.length)];
|
||||
slayElement.style.left = Math.random() * window.innerWidth + 'px';
|
||||
slayElement.style.top = Math.random() * window.innerHeight + 'px';
|
||||
document.body.appendChild(slayElement);
|
||||
|
||||
setTimeout(() => {
|
||||
if (slayElement.parentNode) {
|
||||
slayElement.remove();
|
||||
}
|
||||
}, 3000);
|
||||
|
||||
// Continue creating slay effects while in bonkers mode
|
||||
const newMode = document.documentElement.getAttribute('data-website-mode');
|
||||
if (newMode === 'bonkers') {
|
||||
setTimeout(() => createSlayEffects(), 800);
|
||||
}
|
||||
}
|
||||
|
||||
// Watch for mode changes
|
||||
function watchModeChanges() {
|
||||
// Create a MutationObserver to watch for changes to the data-website-mode attribute
|
||||
const observer = new MutationObserver(function(mutations) {
|
||||
mutations.forEach(function(mutation) {
|
||||
if (mutation.type === 'attributes' && mutation.attributeName === 'data-website-mode') {
|
||||
const newMode = document.documentElement.getAttribute('data-website-mode');
|
||||
|
||||
if (newMode === 'bonkers') {
|
||||
document.body.classList.add('bonkers-mode');
|
||||
setEmojiLevelClass(newMode);
|
||||
|
||||
// Start the fabulous effects
|
||||
createExtraSparkles();
|
||||
createSlayEffects();
|
||||
|
||||
console.log('🌈✨ Switched to bonkers mode! ✨🌈');
|
||||
} else {
|
||||
document.body.classList.remove('bonkers-mode');
|
||||
setEmojiLevelClass(newMode);
|
||||
console.log(`😴 Switched to ${newMode} mode`);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Start observing
|
||||
observer.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ['data-website-mode']
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initBonkersMode();
|
||||
watchModeChanges();
|
||||
});
|
||||
|
||||
export { initBonkersMode, watchModeChanges };
|
||||
55
assets/javascript/numberInputs.js
Normal file
55
assets/javascript/numberInputs.js
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
// Function to initialize number input buttons
|
||||
function initNumberInputs(container = document) {
|
||||
container.querySelectorAll('.number-input-wrapper').forEach(function(wrapper) {
|
||||
const input = wrapper.querySelector('input[type="number"]');
|
||||
const decreaseBtn = wrapper.querySelector('[data-action="decrease"]');
|
||||
const increaseBtn = wrapper.querySelector('[data-action="increase"]');
|
||||
|
||||
if (!input || !decreaseBtn || !increaseBtn) return;
|
||||
|
||||
// Skip if already initialized
|
||||
if (decreaseBtn.hasAttribute('data-initialized')) return;
|
||||
|
||||
const step = parseFloat(input.getAttribute('step')) || 1;
|
||||
const min = 0;
|
||||
const max = input.getAttribute('max') ? parseFloat(input.getAttribute('max')) : null;
|
||||
|
||||
decreaseBtn.addEventListener('click', function() {
|
||||
const currentValue = parseFloat(input.value) || 0;
|
||||
const newValue = currentValue - step;
|
||||
|
||||
if (min === null || newValue >= min) {
|
||||
input.value = newValue;
|
||||
input.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
}
|
||||
});
|
||||
|
||||
increaseBtn.addEventListener('click', function() {
|
||||
const currentValue = parseFloat(input.value) || 0;
|
||||
const newValue = currentValue + step;
|
||||
|
||||
if (max === null || newValue <= max) {
|
||||
input.value = newValue;
|
||||
input.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
}
|
||||
});
|
||||
|
||||
// Validate input on change
|
||||
input.addEventListener('input', function() {
|
||||
const value = parseFloat(this.value);
|
||||
|
||||
if (min !== null && value < min) {
|
||||
this.value = min;
|
||||
}
|
||||
if (max !== null && value > max) {
|
||||
this.value = max;
|
||||
}
|
||||
});
|
||||
|
||||
// Mark as initialized
|
||||
decreaseBtn.setAttribute('data-initialized', 'true');
|
||||
increaseBtn.setAttribute('data-initialized', 'true');
|
||||
});
|
||||
}
|
||||
|
||||
export { initNumberInputs };
|
||||
35
assets/javascript/radioState.js
Normal file
35
assets/javascript/radioState.js
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
// Radio button state management with localStorage
|
||||
function initRadioState() {
|
||||
// Store and retrieve radio button state
|
||||
const radioButtons = document.querySelectorAll('input[name="mode"]');
|
||||
|
||||
// Load saved state on page load
|
||||
const savedMode = localStorage.getItem('selectedMode');
|
||||
if (savedMode) {
|
||||
const radioToCheck = document.getElementById(savedMode);
|
||||
if (radioToCheck) {
|
||||
radioToCheck.checked = true;
|
||||
// Set the data attribute to match the saved mode
|
||||
document.documentElement.setAttribute('data-website-mode', savedMode);
|
||||
}
|
||||
} else {
|
||||
// If no saved state, set to the currently checked radio button
|
||||
const checkedRadio = document.querySelector('input[name="mode"]:checked');
|
||||
if (checkedRadio) {
|
||||
document.documentElement.setAttribute('data-website-mode', checkedRadio.id);
|
||||
}
|
||||
}
|
||||
|
||||
// Save state when radio button changes
|
||||
radioButtons.forEach(radio => {
|
||||
radio.addEventListener('change', function() {
|
||||
if (this.checked) {
|
||||
localStorage.setItem('selectedMode', this.id);
|
||||
// Update the data attribute when mode changes
|
||||
document.documentElement.setAttribute('data-website-mode', this.id);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export { initRadioState };
|
||||
18
assets/javascript/theme.js
Normal file
18
assets/javascript/theme.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// Theme detection and switching
|
||||
const getPreferredTheme = () => {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
||||
}
|
||||
|
||||
const setTheme = theme => {
|
||||
document.documentElement.setAttribute('data-bs-theme', theme)
|
||||
}
|
||||
|
||||
// Set initial theme
|
||||
setTheme(getPreferredTheme())
|
||||
|
||||
// Listen for changes in user's preferred color scheme
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
setTheme(getPreferredTheme())
|
||||
})
|
||||
|
||||
export { getPreferredTheme, setTheme };
|
||||
|
|
@ -1,3 +1,179 @@
|
|||
body {
|
||||
background-color: skyblue;
|
||||
}
|
||||
/*
|
||||
* =================================================================================================
|
||||
* 💖 BUBBLEGUM PUNK THEME (LIGHT) 💖
|
||||
*
|
||||
* This isn't just a theme. It's a statement.
|
||||
* Unapologetically loud, pink, and quirky.
|
||||
* =================================================================================================
|
||||
*/
|
||||
:root,
|
||||
[data-bs-theme=light] {
|
||||
/* --- CORE VIBE --- */
|
||||
--bs-pink: #FF007A; /* 💖 Hyper Pink (Our Queen) */
|
||||
--bs-green: #CFFF50; /* 🧪 Toxic Slime */
|
||||
--bs-purple: #A328D6; /* 👾 Graffiti Purple */
|
||||
--bs-yellow: #F9F871; /* ⚡ Neon Lemon */
|
||||
--bs-cyan: #00F5D4; /* 💎 Glitchy Teal */
|
||||
--bs-blue: #00A9E0; /* 💦 Splash Zone */
|
||||
|
||||
/* Let's redefine ALL the core colors to match the new energy */
|
||||
--bs-primary: var(--bs-pink);
|
||||
--bs-secondary: var(--bs-green);
|
||||
--bs-success: var(--bs-cyan);
|
||||
--bs-info: var(--bs-blue);
|
||||
--bs-warning: var(--bs-yellow);
|
||||
--bs-danger: #FF3D3D; /* 🚨 Code Red Rave */
|
||||
|
||||
/* --- BACKGROUNDS & TEXT --- */
|
||||
/* No more boring white! */
|
||||
--bs-body-bg: #FFF5FD; /* A soft, dreamy pink canvas */
|
||||
--bs-body-color: #4A003D; /* Dark Plum (instead of black) for text */
|
||||
--bs-heading-color: var(--bs-purple); /* Make headings POP */
|
||||
--bs-secondary-color: rgba(74, 0, 61, 0.75); /* Plum, but softer */
|
||||
--bs-tertiary-color: rgba(74, 0, 61, 0.5);
|
||||
|
||||
/* Make cards and containers pure white to contrast the pink background */
|
||||
--bs-tertiary-bg: #FFFFFF;
|
||||
--bs-secondary-bg: #FEF9FE;
|
||||
|
||||
/* --- LINKS & CODE --- */
|
||||
--bs-link-color: var(--bs-pink);
|
||||
--bs-link-hover-color: var(--bs-purple);
|
||||
--bs-code-color: var(--bs-purple);
|
||||
|
||||
/* --- BORDERS & SHADOWS: LET'S GET QUIRKY --- */
|
||||
--bs-border-width: 2px; /* Chunky borders! */
|
||||
--bs-border-color: #FFD6F5; /* Pink-tinted border color */
|
||||
--bs-border-color-translucent: rgba(74, 0, 61, 0.2);
|
||||
--bs-border-radius: 1rem; /* Super bubbly and round */
|
||||
--bs-border-radius-sm: 0.5rem;
|
||||
--bs-border-radius-lg: 1.5rem;
|
||||
--bs-border-radius-pill: 50rem;
|
||||
|
||||
/* Say goodbye to black shadows, hello to colored glows! */
|
||||
--bs-box-shadow: 0 4px 12px rgba(255, 0, 122, 0.2);
|
||||
--bs-box-shadow-sm: 0 2px 4px rgba(255, 0, 122, 0.15);
|
||||
--bs-box-shadow-lg: 0 8px 30px rgba(255, 0, 122, 0.25);
|
||||
--bs-box-shadow-inset: inset 0 1px 4px rgba(74, 0, 61, 0.2);
|
||||
|
||||
/* --- THE GRADIENT: THE SOUL OF THE THEME --- */
|
||||
--bs-gradient: linear-gradient(75deg, var(--bs-primary), var(--bs-secondary));
|
||||
|
||||
/* --- Don't forget the RGB values for Bootstrap components! --- */
|
||||
--bs-primary-rgb: 255, 0, 122;
|
||||
--bs-secondary-rgb: 207, 255, 80;
|
||||
--bs-body-color-rgb: 74, 0, 61;
|
||||
--bs-body-bg-rgb: 255, 245, 253;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* =================================================================================================
|
||||
* 🌙🦇 CYBER GOTH THEME (DARK) 🦇🌙
|
||||
*
|
||||
* The lights are out, the neon is ON.
|
||||
* A dark, moody theme with vibrant, glowing accents.
|
||||
* =================================================================================================
|
||||
*/
|
||||
[data-bs-theme=dark] {
|
||||
color-scheme: dark;
|
||||
|
||||
/* --- BACKGROUNDS & TEXT --- */
|
||||
--bs-body-bg: #1D001A; /* Deep, dark space purple */
|
||||
--bs-body-color: #FFE9FA; /* Light pink text for high contrast */
|
||||
--bs-heading-color: var(--bs-cyan); /* Glowing cyan headings */
|
||||
|
||||
--bs-tertiary-bg: #2E0028; /* A slightly lighter container background */
|
||||
--bs-secondary-bg: #3A0033;
|
||||
--bs-secondary-color: rgba(255, 233, 250, 0.75);
|
||||
--bs-tertiary-color: rgba(255, 233, 250, 0.5);
|
||||
|
||||
/* --- LINKS & CODE --- */
|
||||
/* Using the Toxic Slime for links gives it that cyber look */
|
||||
--bs-link-color: var(--bs-green);
|
||||
--bs-link-hover-color: var(--bs-cyan);
|
||||
--bs-code-color: var(--bs-pink);
|
||||
|
||||
/* --- BORDERS & SHADOWS: NEON GLOWS --- */
|
||||
--bs-border-color: #5C004F;
|
||||
--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
|
||||
|
||||
/* Redefine shadows to be neon glows */
|
||||
--bs-box-shadow: 0 0 15px rgba(var(--bs-primary-rgb), 0.4);
|
||||
--bs-box-shadow-lg: 0 0 30px rgba(var(--bs-primary-rgb), 0.5);
|
||||
|
||||
/* --- EMPHASIS & SUBTLE BACKGROUNDS --- */
|
||||
/* These are for alerts, badges, etc. They'll be dark with glowing text. */
|
||||
--bs-primary-text-emphasis: #FF8AD1;
|
||||
--bs-secondary-text-emphasis: #E2FF8A;
|
||||
--bs-success-text-emphasis: #8AFFEB;
|
||||
--bs-info-text-emphasis: #7ADCF5;
|
||||
--bs-warning-text-emphasis: #FAF8A8;
|
||||
--bs-danger-text-emphasis: #FF8A8A;
|
||||
|
||||
--bs-primary-bg-subtle: #3D002B;
|
||||
--bs-secondary-bg-subtle: #415215;
|
||||
--bs-success-bg-subtle: #00332B;
|
||||
--bs-info-bg-subtle: #00313D;
|
||||
--bs-warning-bg-subtle: #3E3D1C;
|
||||
--bs-danger-bg-subtle: #520E0E;
|
||||
}
|
||||
|
||||
/* === EMOJI LEVELS === */
|
||||
.emoji-normal .emoji-normal { display: inline; }
|
||||
.emoji-normal .emoji-enhanced,
|
||||
.emoji-normal .emoji-bonkers { display: none; }
|
||||
|
||||
.emoji-enhanced .emoji-enhanced { display: inline; }
|
||||
.emoji-enhanced .emoji-normal,
|
||||
.emoji-enhanced .emoji-bonkers { display: none; }
|
||||
|
||||
.emoji-bonkers .emoji-bonkers { display: inline; }
|
||||
.emoji-bonkers .emoji-normal,
|
||||
.emoji-bonkers .emoji-enhanced { display: none; }
|
||||
/*
|
||||
* =================================================================================================
|
||||
* 🌈 RAINBOW PRIDE ELEMENTS 🌈
|
||||
*
|
||||
* Fabulous rainbow-themed elements to celebrate diversity and pride!
|
||||
* =================================================================================================
|
||||
*/
|
||||
.bg-rainbow {
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
#FF5757, /* Red */
|
||||
#FFBD59, /* Orange */
|
||||
#F9F871, /* Yellow */
|
||||
#CFFF50, /* Green */
|
||||
#00F5D4, /* Teal */
|
||||
#00A9E0, /* Blue */
|
||||
#A328D6 /* Purple */
|
||||
);
|
||||
color: white;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.fun-fact {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.6;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Add a subtle rainbow border to the fun facts card */
|
||||
.card:has(.fun-fact) {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-image: linear-gradient(
|
||||
to right,
|
||||
#FF5757, /* Red */
|
||||
#FFBD59, /* Orange */
|
||||
#F9F871, /* Yellow */
|
||||
#CFFF50, /* Green */
|
||||
#00F5D4, /* Teal */
|
||||
#00A9E0, /* Blue */
|
||||
#A328D6 /* Purple */
|
||||
) 1;
|
||||
box-shadow: 0 4px 15px rgba(163, 40, 214, 0.2);
|
||||
}
|
||||
|
|
|
|||
30
assets/styles/emoji-footprint.css
Normal file
30
assets/styles/emoji-footprint.css
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
565
assets/styles/modes.css
Normal file
565
assets/styles/modes.css
Normal file
|
|
@ -0,0 +1,565 @@
|
|||
/* 🌈✨ BONKERS MODE ANIMATIONS ✨🌈 */
|
||||
@keyframes rainbowGradient {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
@keyframes discoFlash {
|
||||
0%, 100% {
|
||||
background-color: var(--bs-pink);
|
||||
box-shadow: 0 0 20px var(--bs-pink), 0 0 40px var(--bs-pink);
|
||||
}
|
||||
16.66% {
|
||||
background-color: var(--bs-purple);
|
||||
box-shadow: 0 0 20px var(--bs-purple), 0 0 40px var(--bs-purple);
|
||||
}
|
||||
33.33% {
|
||||
background-color: var(--bs-cyan);
|
||||
box-shadow: 0 0 20px var(--bs-cyan), 0 0 40px var(--bs-cyan);
|
||||
}
|
||||
50% {
|
||||
background-color: var(--bs-yellow);
|
||||
box-shadow: 0 0 20px var(--bs-yellow), 0 0 40px var(--bs-yellow);
|
||||
}
|
||||
66.66% {
|
||||
background-color: var(--bs-green);
|
||||
box-shadow: 0 0 20px var(--bs-green), 0 0 40px var(--bs-green);
|
||||
}
|
||||
83.33% {
|
||||
background-color: var(--bs-orange);
|
||||
box-shadow: 0 0 20px var(--bs-orange), 0 0 40px var(--bs-orange);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wiggle {
|
||||
0%, 100% { transform: rotate(0deg); }
|
||||
25% { transform: rotate(-2deg); }
|
||||
75% { transform: rotate(2deg); }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes rainbowText {
|
||||
0% { color: var(--bs-red); }
|
||||
14.28% { color: var(--bs-orange); }
|
||||
28.57% { color: var(--bs-yellow); }
|
||||
42.85% { color: var(--bs-green); }
|
||||
57.14% { color: var(--bs-cyan); }
|
||||
71.42% { color: var(--bs-purple); }
|
||||
85.71% { color: var(--bs-pink); }
|
||||
100% { color: var(--bs-red); }
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
0% { left: -100%; }
|
||||
50% { left: 100%; }
|
||||
100% { left: 100%; }
|
||||
}
|
||||
|
||||
@keyframes slayFloat {
|
||||
0% {
|
||||
transform: translateY(0) scale(0.5);
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
transform: translateY(-20px) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
80% {
|
||||
transform: translateY(-60px) scale(1.2);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-100px) scale(1.5);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 🎭 BONKERS MODE CLASSES 🎭 */
|
||||
.bonkers-mode {
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.bonkers-mode .btn {
|
||||
animation: discoFlash 0.3s infinite, wiggle 0.2s infinite;
|
||||
background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan), var(--bs-yellow), var(--bs-green), var(--bs-orange), var(--bs-red));
|
||||
background-size: 400% 400%;
|
||||
animation: discoFlash 0.3s infinite, wiggle 0.2s infinite, rainbowGradient 1s ease infinite;
|
||||
border: 4px solid var(--bs-white);
|
||||
font-weight: bold;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.bonkers-mode .btn:hover {
|
||||
animation: discoFlash 0.2s infinite, wiggle 0.1s infinite, rainbowGradient 0.5s ease infinite;
|
||||
box-shadow: 0 0 30px var(--bs-pink), 0 0 60px var(--bs-purple);
|
||||
}
|
||||
|
||||
.bonkers-mode .btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.5), transparent);
|
||||
transform: rotate(45deg);
|
||||
animation: spin 0.5s linear infinite;
|
||||
}
|
||||
|
||||
.bonkers-mode .navbar {
|
||||
background: linear-gradient(90deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan), var(--bs-yellow), var(--bs-green), var(--bs-orange), var(--bs-red));
|
||||
background-size: 200% 200%;
|
||||
animation: rainbowGradient 2s ease infinite;
|
||||
box-shadow: 0 0 50px rgba(255, 105, 180, 0.9);
|
||||
height: auto !important;
|
||||
min-height: 56px;
|
||||
}
|
||||
|
||||
.bonkers-mode .navbar-brand {
|
||||
animation: rainbowText 0.8s infinite, wiggle 0.4s infinite;
|
||||
font-size: 1.8em;
|
||||
text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bonkers-mode .navbar-brand::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
|
||||
transform: rotate(45deg);
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
.bonkers-mode .navbar-nav .nav-link {
|
||||
animation: rainbowText 1.2s infinite, wiggle 0.3s infinite;
|
||||
font-weight: bold;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
||||
border: 2px solid transparent;
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
margin: 0 4px;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bonkers-mode .navbar-nav .nav-link::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
|
||||
animation: shine 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.bonkers-mode .navbar-nav .nav-link:hover {
|
||||
background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple));
|
||||
border-color: var(--bs-white);
|
||||
box-shadow: 0 0 20px var(--bs-pink);
|
||||
animation: discoFlash 0.5s infinite, wiggle 0.2s infinite;
|
||||
}
|
||||
|
||||
.bonkers-mode .navbar-nav .nav-link.active {
|
||||
background: linear-gradient(45deg, var(--bs-yellow), var(--bs-orange));
|
||||
border-color: var(--bs-white);
|
||||
box-shadow: 0 0 25px var(--bs-yellow);
|
||||
animation: discoFlash 0.8s infinite, wiggle 0.3s infinite;
|
||||
}
|
||||
|
||||
.bonkers-mode .navbar-text {
|
||||
animation: rainbowText 1.5s infinite, wiggle 0.5s infinite;
|
||||
font-weight: bold;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
||||
border: 2px solid var(--bs-white);
|
||||
border-radius: 8px;
|
||||
padding: 6px 12px;
|
||||
background: linear-gradient(45deg, var(--bs-cyan), var(--bs-blue));
|
||||
box-shadow: 0 0 15px var(--bs-cyan);
|
||||
}
|
||||
|
||||
.bonkers-mode .navbar-toggler {
|
||||
border: 3px solid var(--bs-white);
|
||||
background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple));
|
||||
animation: discoFlash 0.6s infinite, wiggle 0.4s infinite;
|
||||
box-shadow: 0 0 20px var(--bs-pink);
|
||||
}
|
||||
|
||||
.bonkers-mode .navbar-toggler:focus {
|
||||
box-shadow: 0 0 30px var(--bs-pink), 0 0 0 0.2rem rgba(255, 105, 180, 0.5);
|
||||
}
|
||||
|
||||
.bonkers-mode .navbar-toggler-icon {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.bonkers-mode .dropdown-menu {
|
||||
background: linear-gradient(135deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan));
|
||||
border: 3px solid var(--bs-white);
|
||||
box-shadow: 0 0 30px rgba(255,105,180,0.8);
|
||||
animation: rainbowGradient 2s ease infinite;
|
||||
}
|
||||
|
||||
.bonkers-mode .dropdown-item {
|
||||
animation: rainbowText 1.8s infinite, wiggle 0.6s infinite;
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.bonkers-mode .dropdown-item:hover {
|
||||
background: linear-gradient(45deg, var(--bs-yellow), var(--bs-orange));
|
||||
color: var(--bs-white);
|
||||
box-shadow: 0 0 15px var(--bs-yellow);
|
||||
animation: discoFlash 0.5s infinite, wiggle 0.3s infinite;
|
||||
}
|
||||
|
||||
.bonkers-mode .navbar-collapse {
|
||||
background: linear-gradient(135deg, rgba(255,105,180,0.1), rgba(138,43,226,0.1));
|
||||
border-radius: 8px;
|
||||
margin-top: 8px;
|
||||
padding: 8px;
|
||||
border: 2px solid var(--bs-pink);
|
||||
}
|
||||
|
||||
.bonkers-mode h1, .bonkers-mode h2, .bonkers-mode h3 {
|
||||
animation: rainbowText 1.5s infinite;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.bonkers-mode .table {
|
||||
background: linear-gradient(135deg, rgba(255,105,180,0.2), rgba(138,43,226,0.2), rgba(0,255,255,0.2));
|
||||
animation: rainbowGradient 3s ease infinite;
|
||||
border: 3px solid var(--bs-pink);
|
||||
box-shadow: 0 0 30px rgba(255,105,180,0.5);
|
||||
}
|
||||
|
||||
.bonkers-mode .table th {
|
||||
background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple));
|
||||
color: var(--bs-white);
|
||||
animation: discoFlash 0.8s infinite;
|
||||
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.bonkers-mode .form-control {
|
||||
border: 3px solid var(--bs-pink);
|
||||
box-shadow: 0 0 15px var(--bs-pink);
|
||||
animation: pulse 0.6s infinite;
|
||||
}
|
||||
|
||||
.bonkers-mode .alert {
|
||||
animation: discoFlash 0.6s infinite, wiggle 0.3s infinite;
|
||||
border: 4px solid var(--bs-white);
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.bonkers-mode .card {
|
||||
background: linear-gradient(45deg, rgba(255,105,180,0.2), rgba(138,43,226,0.2));
|
||||
border: 3px solid var(--bs-purple);
|
||||
box-shadow: 0 0 35px rgba(138,43,226,0.6);
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
|
||||
.bonkers-mode .modal-content {
|
||||
background: linear-gradient(135deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan));
|
||||
border: 4px solid var(--bs-white);
|
||||
box-shadow: 0 0 50px rgba(255,105,180,0.8);
|
||||
animation: rainbowGradient 2s ease infinite;
|
||||
}
|
||||
|
||||
.bonkers-mode .modal-header {
|
||||
background: linear-gradient(90deg, var(--bs-yellow), var(--bs-orange));
|
||||
animation: discoFlash 0.8s infinite;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.bonkers-mode .number-input-wrapper {
|
||||
animation: wiggle 0.4s infinite;
|
||||
}
|
||||
|
||||
.bonkers-mode .number-input-wrapper .btn {
|
||||
animation: discoFlash 0.3s infinite, wiggle 0.2s infinite;
|
||||
}
|
||||
|
||||
/* Enhanced mode styles (for future use) */
|
||||
[data-website-mode="enhanced"] .btn {
|
||||
background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan), var(--bs-yellow), var(--bs-green), var(--bs-orange), var(--bs-red));
|
||||
background-size: 400% 400%;
|
||||
animation: rainbowGradient 1s ease infinite;
|
||||
border: 4px solid var(--bs-white);
|
||||
font-weight: bold;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .btn:hover {
|
||||
animation: rainbowGradient 0.5s ease infinite;
|
||||
box-shadow: 0 0 30px var(--bs-pink), 0 0 60px var(--bs-purple);
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.5), transparent);
|
||||
transform: rotate(45deg);
|
||||
animation: spin 0.5s linear infinite;
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .navbar {
|
||||
background: linear-gradient(90deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan), var(--bs-yellow), var(--bs-green), var(--bs-orange), var(--bs-red));
|
||||
background-size: 200% 200%;
|
||||
animation: rainbowGradient 2s ease infinite;
|
||||
box-shadow: 0 0 50px rgba(255, 105, 180, 0.9);
|
||||
height: auto !important;
|
||||
min-height: 56px;
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .navbar-brand {
|
||||
animation: rainbowText 0.8s infinite;
|
||||
font-size: 1.8em;
|
||||
text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .navbar-brand::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
|
||||
transform: rotate(45deg);
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .navbar-nav .nav-link {
|
||||
animation: rainbowText 1.2s infinite;
|
||||
font-weight: bold;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
||||
border: 2px solid transparent;
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
margin: 0 4px;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .navbar-nav .nav-link::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
|
||||
animation: shine 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .navbar-nav .nav-link:hover {
|
||||
background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple));
|
||||
border-color: var(--bs-white);
|
||||
box-shadow: 0 0 20px var(--bs-pink);
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .navbar-nav .nav-link.active {
|
||||
background: linear-gradient(45deg, var(--bs-yellow), var(--bs-orange));
|
||||
border-color: var(--bs-white);
|
||||
box-shadow: 0 0 25px var(--bs-yellow);
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .navbar-text {
|
||||
animation: rainbowText 1.5s infinite;
|
||||
font-weight: bold;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
||||
border: 2px solid var(--bs-white);
|
||||
border-radius: 8px;
|
||||
padding: 6px 12px;
|
||||
background: linear-gradient(45deg, var(--bs-cyan), var(--bs-blue));
|
||||
box-shadow: 0 0 15px var(--bs-cyan);
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .navbar-toggler {
|
||||
border: 3px solid var(--bs-white);
|
||||
background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple));
|
||||
animation: rainbowGradient 0.6s ease infinite;
|
||||
box-shadow: 0 0 20px var(--bs-pink);
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .navbar-toggler:focus {
|
||||
box-shadow: 0 0 30px var(--bs-pink), 0 0 0 0.2rem rgba(255, 105, 180, 0.5);
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .navbar-toggler-icon {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .dropdown-menu {
|
||||
background: linear-gradient(135deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan));
|
||||
border: 3px solid var(--bs-white);
|
||||
box-shadow: 0 0 30px rgba(255,105,180,0.8);
|
||||
animation: rainbowGradient 2s ease infinite;
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .dropdown-item {
|
||||
animation: rainbowText 1.8s infinite;
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .dropdown-item:hover {
|
||||
background: linear-gradient(45deg, var(--bs-yellow), var(--bs-orange));
|
||||
color: var(--bs-white);
|
||||
box-shadow: 0 0 15px var(--bs-yellow);
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .navbar-collapse {
|
||||
background: linear-gradient(135deg, rgba(255,105,180,0.1), rgba(138,43,226,0.1));
|
||||
border-radius: 8px;
|
||||
margin-top: 8px;
|
||||
padding: 8px;
|
||||
border: 2px solid var(--bs-pink);
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] h1, [data-website-mode="enhanced"] h2, [data-website-mode="enhanced"] h3 {
|
||||
animation: rainbowText 1.5s infinite;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .table {
|
||||
background: linear-gradient(135deg, rgba(255,105,180,0.2), rgba(138,43,226,0.2), rgba(0,255,255,0.2));
|
||||
animation: rainbowGradient 3s ease infinite;
|
||||
border: 3px solid var(--bs-pink);
|
||||
box-shadow: 0 0 30px rgba(255,105,180,0.5);
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .table th {
|
||||
background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple));
|
||||
color: var(--bs-white);
|
||||
animation: rainbowGradient 0.8s ease infinite;
|
||||
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .form-control {
|
||||
border: 3px solid var(--bs-pink);
|
||||
box-shadow: 0 0 15px var(--bs-pink);
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .alert {
|
||||
animation: rainbowGradient 0.6s ease infinite;
|
||||
border: 4px solid var(--bs-white);
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .card {
|
||||
background: linear-gradient(45deg, rgba(255,105,180,0.2), rgba(138,43,226,0.2));
|
||||
border: 3px solid var(--bs-purple);
|
||||
box-shadow: 0 0 35px rgba(138,43,226,0.6);
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .modal-content {
|
||||
background: linear-gradient(135deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan));
|
||||
border: 4px solid var(--bs-white);
|
||||
box-shadow: 0 0 50px rgba(255,105,180,0.8);
|
||||
animation: rainbowGradient 2s ease infinite;
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .modal-header {
|
||||
background: linear-gradient(90deg, var(--bs-yellow), var(--bs-orange));
|
||||
animation: rainbowGradient 0.8s ease infinite;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .number-input-wrapper {
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .number-input-wrapper .btn {
|
||||
animation: rainbowGradient 0.3s ease infinite;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 💅 SLAY TEXT EFFECTS 💅 */
|
||||
.slay-text {
|
||||
position: fixed;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
pointer-events: none;
|
||||
z-index: 10000;
|
||||
animation: slayFloat 3s ease-out forwards;
|
||||
text-shadow:
|
||||
0 0 10px #ff00bf,
|
||||
0 0 20px #ff80df,
|
||||
0 0 30px #ffccff,
|
||||
2px 2px 4px rgba(0,0,0,0.5);
|
||||
background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan), var(--bs-yellow));
|
||||
background-size: 400% 400%;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
animation: slayFloat 3s ease-out forwards, rainbowGradient 1s ease infinite;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue