new text and style

content/css/style.css

@@ -412,3 +412,95 @@ a {
         font-weight: 700;    
     }
 }
+
+/* --- STILE LISTE MARKDOWN --- */
+
+.markdown-body ul {
+    list-style: none; /* Rimuoviamo i pallini standard */
+    padding-left: 10px;
+    margin-bottom: 2rem;
+}
+
+.markdown-body li {
+    position: relative;
+    padding-left: 30px;
+    margin-bottom: 12px;
+    font-size: 1.1rem;
+    color: #bdbdbd;
+    line-height: 1.6;
+    transition: var(--transition);
+}
+
+/* Creiamo un bullet personalizzato (un quadratino rosso) */
+.markdown-body li::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 10px; /* Allineamento verticale */
+    width: 6px;
+    height: 6px;
+    background-color: var(--accent);
+    transform: rotate(45deg); /* Effetto diamante */
+    transition: var(--transition);
+}
+
+/* Effetto hover sulla riga */
+.markdown-body li:hover {
+    color: #ffffff;
+    transform: translateX(5px);
+}
+
+.markdown-body li:hover::before {
+    box-shadow: 0 0 10px var(--accent);
+    transform: rotate(45deg) scale(1.2);
+}
+
+/* Gestione liste annidate (opzionale) */
+.markdown-body ul ul {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding-left: 20px;
+}
+
+.markdown-body ul ul li::before {
+    background-color: transparent;
+    border: 1px solid var(--accent); /* Bullet vuoto per le sottoliste */
+}
+
+/* Mobile check */
+@media (max-width: 768px) {
+    .markdown-body li {
+        font-size: 1rem;
+        padding-left: 25px;
+    }
+}
+
+/* --- ANIMAZIONE PARAGRAFI --- */
+
+.markdown-body p {
+    position: relative;
+    padding-left: 20px; /* Spazio costante per non far saltare il testo */
+    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Curva più fluida */
+    border-left: 2px solid transparent;
+}
+
+.markdown-body p:hover {
+    color: #ffffff;
+    transform: translateX(8px); /* Spostamento elegante */
+    border-left: 2px solid var(--accent);
+    /* Effetto glow soffuso sul bordo */
+    box-shadow: -5px 0 15px -5px rgba(249, 39, 39, 0.4); 
+}
+
+/* Opzionale: aggiungiamo un leggerissimo gradiente di sfondo all'hover */
+.markdown-body p:hover {
+    background: linear-gradient(90deg, rgba(249, 39, 39, 0.05) 0%, transparent 100%);
+}
+
+/* --- MOBILE --- */
+@media (max-width: 768px) {
+    .markdown-body p:hover {
+        transform: translateX(4px); /* Movimento ridotto su mobile */
+    }
+}
+