finalizzazione del progetto

css/classifica.css

@@ -1,19 +1,148 @@
+/* --- VARIABILI COLORI --- */
+:root {
+    --bg-light: #f8fafc;
+    --text-dark: #1e293b;
+    --green-eco: #10b981;
+    --green-dark: #065f46;
+    --gold: #f1c40f;
+    --silver: #95a5a6;
+    --bronze: #cd7f32;
+    --white: #ffffff;
+}
+
+/* --- RESET E BASE --- */
 body {
-    font-family: "Arial";
-}
-table, h1 {
-    margin: auto;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    background-color: var(--bg-light);
+    margin: 0;
+    padding: 40px 20px;
+    color: var(--text-dark);
+    line-height: 1.5;
 }
+
 h1 {
     text-align: center;
-    padding: 15px;
+    color: var(--text-dark);
+    font-size: 2.5rem;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    margin-bottom: 30px;
 }
-table {
-    width: 75vw;
+
+/* --- BOTTONI ORDINAMENTO --- */
+.sorting-buttons {
     text-align: center;
-    border-collapse: collapse;
+    margin-bottom: 30px;
 }
+
+.sort-button {
+    display: inline-block;
+    padding: 12px 25px;
+    margin: 0 10px;
+    background-color: var(--white);
+    color: var(--green-eco);
+    text-decoration: none;
+    border-radius: 12px;
+    border: 2px solid var(--green-eco);
+    font-weight: 600;
+    transition: all 0.3s ease;
+}
+
+.sort-button:hover {
+    background-color: var(--green-eco);
+    color: var(--white);
+    transform: translateY(-2px);
+}
+
+.sort-button.active {
+    background-color: var(--green-eco);
+    color: var(--white);
+    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+}
+
+/* --- TABELLA --- */
+table {
+    width: 100%;
+    max-width: 1100px;
+    margin: 0 auto;
+    border-collapse: separate;
+    border-spacing: 0;
+    background-color: var(--white);
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
+}
+
 th, td {
-    padding: 10px;
-    border: 1px solid black;
+    padding: 18px;
+    text-align: center;
+    border-bottom: 1px solid #edf2f7;
+}
+
+th {
+    background-color: var(--green-eco);
+    color: var(--white);
+    font-weight: 700;
+    text-transform: uppercase;
+    font-size: 0.85rem;
+    letter-spacing: 1px;
+}
+
+/* --- COLORAZIONE PODIO DINAMICA (Basata su Classi) --- */
+
+/* 1° Posto - ORO (Funziona ovunque sia la riga) */
+tr.rank-gold {
+    background-color: rgba(241, 196, 15, 0.08) !important;
+}
+tr.rank-gold td:first-child strong {
+    color: var(--gold);
+    font-size: 1.4rem;
+    display: inline-block;
+}
+
+/* 2° Posto - ARGENTO */
+tr.rank-silver {
+    background-color: rgba(189, 195, 199, 0.08) !important;
+}
+tr.rank-silver td:first-child strong {
+    color: var(--silver);
+    font-size: 1.25rem;
+}
+
+/* 3° Posto - BRONZO */
+tr.rank-bronze {
+    background-color: rgba(205, 127, 50, 0.05) !important;
+}
+tr.rank-bronze td:first-child strong {
+    color: var(--bronze);
+    font-size: 1.15rem;
+}
+
+/* Stile base per la colonna posizione */
+td strong {
+    font-weight: 800;
+    color: var(--text-dark);
+}
+
+/* Effetto al passaggio del mouse sulle righe */
+tr:hover {
+    background-color: #f1f5f9;
+}
+
+/* Arrotondamento angoli inferiori della tabella */
+table tr:last-child td:first-child { border-bottom-left-radius: 20px; }
+table tr:last-child td:last-child { border-bottom-right-radius: 20px; }
+
+/* Rimuove l'ultima linea per pulizia estetica */
+table tr:last-child td {
+    border-bottom: none;
+}
+
+/* --- RESPONSIVE --- */
+@media (max-width: 768px) {
+    body { padding: 20px 10px; }
+    table { font-size: 0.8rem; }
+    th, td { padding: 12px 8px; }
+    h1 { font-size: 1.8rem; }
+    .sort-button { padding: 10px 15px; margin: 5px; }
 }