diff --git a/news-app/src/main.js b/news-app/src/main.js
index d59a815..7e8ae42 100644
--- a/news-app/src/main.js
+++ b/news-app/src/main.js
@@ -220,8 +220,8 @@ function renderCarModeCard(group, index, total) {
// Determine glow color based on position from end
// Last 2 cards: red glow
// 3 cards before the last 2 (3rd, 4th, 5th from end): orange glow
- // Others: yellow glow (default)
- let glowClass = 'glow-yellow'
+ // Others: yellow glow (default via CSS variables)
+ let glowClass = ''
if (index >= total - 2) {
glowClass = 'glow-red'
} else if (index >= total - 5) {
@@ -301,10 +301,12 @@ function renderCarMode() {
-
-
+
+
Car Mode
+
|
+
News ${state.carModeIndex + 1} / ${state.groups.length}
@@ -411,8 +413,8 @@ function render() {
-
-
+
+
Car Mode
diff --git a/news-app/src/style.css b/news-app/src/style.css
index 21c8de2..7b8c6bd 100644
--- a/news-app/src/style.css
+++ b/news-app/src/style.css
@@ -95,11 +95,19 @@
/* Car Mode Card Transitions */
.car-mode-card {
- animation: cardFadeIn 0.5s ease-out forwards;
+ --glow-color-start: rgba(253, 224, 71, 0.95);
+ --glow-color-mid: rgba(253, 224, 71, 0.8);
+ animation: cardFadeIn 0.5s ease-out forwards, cardGlow 4s ease-out forwards;
}
-.car-mode-card.glow-yellow {
- animation: cardFadeIn 0.5s ease-out forwards, cardGlow 4s ease-out forwards;
+.car-mode-card.glow-orange {
+ --glow-color-start: rgba(251, 146, 60, 0.95);
+ --glow-color-mid: rgba(251, 146, 60, 0.8);
+}
+
+.car-mode-card.glow-red {
+ --glow-color-start: rgba(239, 68, 68, 0.95);
+ --glow-color-mid: rgba(239, 68, 68, 0.8);
}
.car-mode-card.fading-out {
@@ -119,48 +127,16 @@
@keyframes cardGlow {
0% {
- box-shadow: 0 0 80px 30px rgba(253, 224, 71, 0.95); /* Extremely bold start */
+ box-shadow: 0 0 80px 30px var(--glow-color-start);
}
10% {
- box-shadow: 0 0 100px 40px rgba(253, 224, 71, 0.8); /* Max spread early on */
+ box-shadow: 0 0 100px 40px var(--glow-color-mid);
}
100% {
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); /* Settle to dark shadow */
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
}
-@keyframes cardGlowOrange {
- 0% {
- box-shadow: 0 0 80px 30px rgba(251, 146, 60, 0.95); /* Orange bold start */
- }
- 10% {
- box-shadow: 0 0 100px 40px rgba(251, 146, 60, 0.8); /* Orange max spread */
- }
- 100% {
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); /* Settle to dark shadow */
- }
-}
-
-@keyframes cardGlowRed {
- 0% {
- box-shadow: 0 0 80px 30px rgba(239, 68, 68, 0.95); /* Red bold start */
- }
- 10% {
- box-shadow: 0 0 100px 40px rgba(239, 68, 68, 0.8); /* Red max spread */
- }
- 100% {
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); /* Settle to dark shadow */
- }
-}
-
-.car-mode-card.glow-orange {
- animation: cardFadeIn 0.5s ease-out forwards, cardGlowOrange 4s ease-out forwards;
-}
-
-.car-mode-card.glow-red {
- animation: cardFadeIn 0.5s ease-out forwards, cardGlowRed 4s ease-out forwards;
-}
-
@keyframes cardFadeOut {
from {
opacity: 1;