YOLO mode effects

This commit is contained in:
Auto
2026-01-09 08:08:59 +02:00
parent 45ba266f71
commit a195d6de08
2 changed files with 60 additions and 16 deletions

View File

@@ -163,21 +163,29 @@
transform: none;
}
/* YOLO Mode Button - Fiery gradient for when YOLO mode is enabled */
/* Uses darker orange colors for better contrast with white text (WCAG AA) */
/* YOLO Mode Button - Animated fire effect for when YOLO mode is enabled */
.neo-btn-yolo {
background: linear-gradient(135deg, #d64500, #e65c00);
background: linear-gradient(
0deg,
#8b0000 0%,
#d64500 30%,
#ff6a00 60%,
#ffa500 100%
);
background-size: 100% 200%;
color: #ffffff;
box-shadow:
4px 4px 0 var(--color-neo-border),
0 0 12px rgba(255, 84, 0, 0.4);
animation: fireGlow 0.8s ease-in-out infinite, fireGradient 1.5s ease-in-out infinite;
}
.neo-btn-yolo:hover {
background: linear-gradient(135deg, #ff5400, #ff6a00);
box-shadow:
6px 6px 0 var(--color-neo-border),
0 0 16px rgba(255, 84, 0, 0.5);
background: linear-gradient(
0deg,
#a00000 0%,
#e65c00 30%,
#ff7800 60%,
#ffb700 100%
);
background-size: 100% 200%;
}
/* Inputs */
@@ -371,6 +379,42 @@
}
}
@keyframes fireGlow {
0%, 100% {
box-shadow:
4px 4px 0 var(--color-neo-border),
0 0 10px rgba(255, 100, 0, 0.5),
0 0 20px rgba(255, 60, 0, 0.3);
}
25% {
box-shadow:
4px 4px 0 var(--color-neo-border),
0 0 15px rgba(255, 80, 0, 0.6),
0 0 30px rgba(255, 40, 0, 0.4);
}
50% {
box-shadow:
4px 4px 0 var(--color-neo-border),
0 0 12px rgba(255, 120, 0, 0.7),
0 0 25px rgba(255, 50, 0, 0.5);
}
75% {
box-shadow:
4px 4px 0 var(--color-neo-border),
0 0 18px rgba(255, 70, 0, 0.55),
0 0 35px rgba(255, 30, 0, 0.35);
}
}
@keyframes fireGradient {
0%, 100% {
background-position: 0% 100%;
}
50% {
background-position: 100% 0%;
}
}
/* ============================================================================
Utilities Layer
============================================================================ */