Esercizio 8+ fix

JS_Esercizi/JS_Esercizi 08 - DOM+/00_ripasso/style.css

@@ -88,10 +88,15 @@ h1 {
 
 .exercise p {
     margin: 5px 0;
-    color: #555;
     font-size: 0.9rem;
 }
 
+.testo-blu {
+    color: #3498db;
+    font-weight: 500;
+}
+
+
 /* ============ INPUT & BUTTON ============ */
 
 input[type="text"],
@@ -143,7 +148,7 @@ button:active {
     box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
 }
 
-/* ============ RISULTATO ============ */
+/* ============ RISULTATO & AREA OUTPUT ============ */
 
 .risultato {
     background: #f8fafb;
@@ -156,6 +161,20 @@ button:active {
     box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
 }
 
+.area-output {
+    background: #f8fafb;
+    border: 1px solid #d5d8dc;
+    padding: 10px;
+    border-radius: 5px;
+    margin-top: 8px;
+    color: #34495e;
+    font-size: 0.9rem;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
+    min-height: 20px;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+}
+
 /* ============ BOX CLICK ============ */
 
 .box-click {
@@ -187,29 +206,27 @@ button:active {
     transform: translateY(0);
 }
 
-/* ============ RIEPILOGO ============ */
-#riepilogo {
-    background: #f8fafb;
-    color: #2c3e50;
-    padding: 20px;
-    border-radius: 5px;
-    text-align: center;
-    border-bottom: none;
-    border-left: none;
-    border: 1px solid #d5d8dc;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-    border-bottom: none;
-    border-left: none;
-}
+/* ============ ELEMENTO TOGGLE ============ */
 
-.riepilogo h2 {
-    color: #2c3e50;
-    font-size: 1.4rem;
-    margin-top: 0;
-}
-
-#status-completamento {
-    font-size: 1rem;
-    color: #2c3e50;
+.elemento-normale {
+    padding: 15px;
+    border: 2px solid #3498db;
+    border-radius: 8px;
+    background: white;
+    cursor: pointer;
     transition: all 0.3s ease;
+    color: #2c3e50;
+}
+
+.elemento-normale:hover {
+    background: #ecf0f1;
+    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
+}
+
+.elemento-attivo {
+    background: #3498db;
+    color: white;
+    border-color: #2980b9;
+    transform: scale(1.05);
+    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
 }