Change background brightness

Author: MariferVL

src/app/globals.css

@@ -18,21 +18,39 @@
   /* Fondo oscuro intermedio */
 }
 
+
 body {
   background-color: var(--bg-dark);
   color: var(--text-white);
 }
 
 /* Gradiente con tránsito moderado entre los colores */
-.gradient-bg {
+/* .gradient-bg {
   background: linear-gradient(135deg,
       var(--primary-green) 0%,
       var(--accent-yellow) 50%,
       var(--outline-red) 100%);
   background-size: 400% 400%;
   animation: gradient 18s ease infinite;
+} */
+
+/* .gradient-bg {
+  background: 
+    linear-gradient(rgba(0, 0, 0, 0.1), rgba(0,0,0,0.1)), 
+    linear-gradient(135deg, var(--primary-green) 0%, var(--accent-yellow) 50%, var(--outline-red) 100%);
+  background-size: 400% 400%;
+  background-blend-mode: darken;
+  animation: gradient 18s ease infinite;
+} */
+
+.gradient-bg {
+  background: linear-gradient(135deg, var(--primary-green) 0%, var(--accent-yellow) 50%, var(--outline-red) 100%);
+  background-size: 400% 400%;
+  animation: gradient 18s ease infinite;
+  filter: brightness(0.8);
 }
 
+
 @keyframes gradient {
   0% {
     background-position: 0% 50%;
@@ -47,7 +65,6 @@ body {
   }
 }
 
-/* Estilo para el texto del logo */
 .logo-text {
   font-family: sans-serif;
   color: var(--text-white);
@@ -85,4 +102,25 @@ body {
   .container-py {
     @apply max-w-7xl mx-auto px-4 py-12 sm:px-6 lg:px-8;
   }
+
+  .select-theme {
+    background-color: rgba(var(--bg-dark), 0.3);
+    border: 1px solid rgba(var(--primary-green), 0.2);
+    @apply text-[var(--text-white)] rounded-lg px-4 py-2.5 pr-8 text-sm md:text-base transition-all duration-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-[var(--primary-green)] hover:border-[var(--primary-green)];
+  }
+
+  .select-theme option {
+    background-color: var(--primary-green);
+    color: var(--primary-green) !important;
+    border: var(--primary-green) !important;
+    transition: background-color 0.2s ease, color 0.2s ease;
+  }
+
+  .select-theme option:hover,
+  .select-theme option:checked {
+    background-color: rgba(var(--accent-yellow) 0.3) !important;
+    color: var(--text-white) !important;
+  }
+
+
 }

src/app/talks/page.js

@@ -105,7 +105,7 @@ export default function TalksPage() {
             <select
               value={selectedCity}
               onChange={(e) => setSelectedCity(e.target.value)}
-              className="bg-py-dark/30 text-py-text border border-py-text/20 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-py-green"
+              className="select-theme"
             >
               <option value="">Todas las sedes</option>
               {Object.keys(cityData).map((cityKey) => (
@@ -118,7 +118,7 @@ export default function TalksPage() {
             <select
               value={selectedCategory}
               onChange={(e) => setSelectedCategory(e.target.value)}
-              className="bg-py-dark/30 text-py-text border border-py-text/20 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-py-green"
+              className="select-theme"
             >
               <option value="">Todas las categorías</option>
               <option value="tecnica">Técnica</option>