From c3bac71ad2ce410984077d48f30e432387150e42 Mon Sep 17 00:00:00 2001
From: Alex Speaker <alexspeaker@git.asv.ovh>
Date: Wed, 4 Feb 2026 01:02:11 +0100
Subject: [PATCH] Update css/style.css

correzione css
---
 css/style.css | 850 +++++++++++++++++++++++++-------------------------
 1 file changed, 425 insertions(+), 425 deletions(-)

diff --git a/css/style.css b/css/style.css
index 829ff9d..d4ee786 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,426 +1,426 @@
-@font-face {
-  font-family: 'Poppins';
-  src: url('fonts/Poppins-Black.ttf') format('truetype');
-  font-weight: 900;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Poppins';
-  src: url('fonts/Poppins-BlackItalic.ttf') format('truetype');
-  font-weight: 900;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Poppins';
-  src: url('fonts/Poppins-Bold.ttf') format('truetype');
-  font-weight: 700;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Poppins';
-  src: url('fonts/Poppins-BoldItalic.ttf') format('truetype');
-  font-weight: 700;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Poppins';
-  src: url('fonts/Poppins-Medium.ttf') format('truetype');
-  font-weight: 500;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Poppins';
-  src: url('fonts/Poppins-MediumItalic.ttf') format('truetype');
-  font-weight: 500;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Poppins';
-  src: url('fonts/Poppins-Regular.ttf') format('truetype');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Poppins';
-  src: url('fonts/Poppins-Italic.ttf') format('truetype');
-  font-weight: 400;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Poppins';
-  src: url('fonts/Poppins-Light.ttf') format('truetype');
-  font-weight: 300;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Poppins';
-  src: url('fonts/Poppins-LightItalic.ttf') format('truetype');
-  font-weight: 300;
-  font-style: italic;
-}
-
-body {
-  font-family: 'Poppins', sans-serif !important;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  user-select: none;
-}
-
-html,
-body {
-  overscroll-behavior: none;
-}
-
-body {
-  font-family: "Poppins", sans-serif;
-  height: 100vh;
-  overflow: hidden;
-}
-
-
-
-/* DESKTOP SECTION */
-body.desktopBody {
-  background: #2a377e;
-  color: white;
-}
-
-div.dbox,
-div.dbox_mobile {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: #4358ca8f;
-  padding: 25px;
-  border-radius: 50px;
-  text-align: center;
-  width: 500px;
-}
-
-div.dbox_mobile {
-  width: 90%;
-  max-width: 450px;
-  color: white;
-  border-radius: 10px;
-  max-height: 475px;
-  overflow: auto;
-}
-
-div.dbox>h1.title,
-div.dbox_mobile>h1.title {
-  margin-bottom: 0px;
-}
-
-div.dbox>hr,
-div.dbox_mobile>hr {
-  margin: 2rem 0;
-}
-
-div.dbox>.dbtn,
-div.dbox_mobile>.dbtn {
-  border: none;
-  border-radius: 50px;
-  padding: 10px 20px;
-  background: #f0f0f0;
-  color: black;
-  text-decoration: none;
-  font-weight: 600;
-  -webkit-appearance: button;
-}
-
-div.dbox>.dbtn:hover {
-  background: #e0e0e0;
-  cursor: pointer;
-}
-
-div.dfooter {
-  position: fixed;
-  bottom: 15px;
-  left: 50%;
-  transform: translateX(-50%);
-  text-align: center;
-  color: #ffffff90;
-  font-size: 13px;
-  width: 100%;
-}
-
-
-
-/* MOBILE SECTION */
-
-.appBody {
-  background-color: #10194b;
-  max-width: 450px;
-  min-width: 330px;
-  margin: auto;
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
-.header>.logo-section,
-.header>.menu-section {
-  text-align: center;
-}
-
-.header>.logo-section,
-.footer>.copyright-section {
-  background-color: #2a377e;
-  padding: 15px 0;
-}
-
-.header>.menu-section {
-  background-color: #3849a8;
-  padding: 13px 0;
-}
-
-.header>.logo-section>img {
-  width: 250px;
-}
-
-.header>.menu-section>.navLink {
-  color: white;
-  text-decoration: none;
-  margin: 0 15px;
-}
-
-.header>.menu-section>.navLink.active {
-  color: #2a377e;
-  margin: 0;
-  padding: 3px 15px;
-  background: white;
-  border-radius: 50px;
-  font-weight: 500;
-}
-
-main {
-  background-color: white;
-  flex: 1;
-  overflow: auto;
-}
-
-.titlePage {
-  text-align: center;
-  font-weight: 600;
-  margin: 15px 0 20px;
-}
-
-.subtitlePage {
-  text-align: center;
-  font-weight: 500;
-  margin: -15px 0 20px;
-}
-
-.linkBox {
-  text-decoration: none;
-  color: black;
-}
-
-.clickBox {
-  width: 100%;
-  border: 2px solid #2a377e;
-  text-align: center;
-  border-radius: 20px;
-  font-weight: 500;
-  /* margin-bottom: 10px; */
-  padding: 4px;
-}
-
-.clickBox.Squared {
-  font-weight: 600;
-  border: solid 4px #2a377e;
-}
-
-.clickBox>img {
-  width: 80%;
-}
-
-.changelogTitle {
-  font-weight: 600;
-  padding: 0 13px;
-  margin: 0 0 15px;
-}
-
-.changelogList,
-.tec,
-.stationList {
-  padding: 0 13px;
-  margin: 0 0 7px;
-  text-align: justify;
-  hyphens: auto;
-}
-
-.stationList {
-  text-align: center;
-}
-
-.stationCard>a.stationLink {
-  padding: 0;
-}
-
-.stationCard>a.stationLink>img {
-  width: 100%;
-  border-radius: 20px;
-}
-
-/* .stationCard>.thematicBadge {
-  position: relative;
-  background: #f7b835;
-  padding: 1px 5px;
-  font-size: 0.8rem;
-  border-radius: 27px;
-  font-style: italic;
-  font-weight: 600;
-  top: 31px;
-  left: 35px;
-  margin: 0;
-} */
-
-.stationCard.isthematic {
-  text-align: right;
-  margin-top: -24px;
-}
-
-.stationCard.isthematic:before {
-  content: "Tematica";
-  position: relative;
-  background: #f7b835;
-  padding: 1px 5px;
-  font-size: 0.8rem;
-  border-radius: 27px;
-  font-style: italic;
-  font-weight: 600;
-  top: 30px;
-  right: 7px;
-  margin: 0;
-}
-
-iframe.contentplayer {
-  position: absolute;
-  left: 50%;
-  height: calc(100vh - 312px);
-  width: 100%;
-  max-width: 450px;
-  transform: translateX(-50%);
-}
-
-.footer_player {
-  background: #f7b835;
-  color: #2a377d;
-  position: fixed;
-  z-index: 90;
-  bottom: 70px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 100%;
-  max-width: 450px;
-  height: 100px;
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-  padding: 20px;
-}
-
-.footer_player>.row>.col-2>img {
-  border-radius: 5px;
-}
-
-button#playPauseBtn {
-  background: none;
-  border: none;
-}
-
-.footer,
-.header {
-  z-index: 1000;
-}
-
-.footer>.menu-section {
-  background: #3849a8;
-  font-size: 0.7rem;
-  padding: 7px 0;
-  text-align: center;
-}
-
-.footer>.menu-section>a {
-  color: white;
-  text-decoration: none;
-  margin: 0 5px;
-}
-
-.footer>.copyright-section {
-  color: white;
-  font-size: 0.8rem;
-  text-align: center;
-  padding: 10px;
-  font-weight: 500;
-}
-
-@media (max-width: 450px) {
-  .appBody {
-    background-color: #2a377e;
-  }
-}
-
-
-/* Loading spinner */
-.loading {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 200px;
-}
-
-.spinner {
-  width: 40px;
-  height: 40px;
-  border: 4px solid rgba(0, 0, 0, 0.1);
-  border-radius: 50%;
-  border-top-color: #3498db;
-  animation: spin 1s ease-in-out infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-
-/* Forza orientamento portrait - nasconde contenuto in landscape */
-@media screen and (orientation: landscape) and (max-height: 450px) {
-  body.appBody::after {
-    content: "Ruota il dispositivo in verticale";
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: #2a377e;
-    color: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.2rem;
-    font-weight: 600;
-    z-index: 9999;
-    text-align: center;
-    padding: 20px;
-  }
-
-  body.appBody>* {
-    display: none !important;
-  }
+@font-face {
+  font-family: 'Poppins';
+  src: url('fonts/Poppins-Black.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('fonts/Poppins-BlackItalic.ttf') format('truetype');
+  font-weight: 900;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('fonts/Poppins-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('fonts/Poppins-BoldItalic.ttf') format('truetype');
+  font-weight: 700;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('fonts/Poppins-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('fonts/Poppins-MediumItalic.ttf') format('truetype');
+  font-weight: 500;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('fonts/Poppins-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('fonts/Poppins-Italic.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('fonts/Poppins-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('fonts/Poppins-LightItalic.ttf') format('truetype');
+  font-weight: 300;
+  font-style: italic;
+}
+
+body {
+  font-family: 'Poppins', sans-serif !important;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  user-select: none;
+}
+
+html,
+body {
+  overscroll-behavior: none;
+}
+
+body {
+  font-family: "Poppins", sans-serif;
+  height: 100vh;
+  overflow: hidden;
+}
+
+
+
+/* DESKTOP SECTION */
+body.desktopBody {
+  background: #2a377e;
+  color: white;
+}
+
+div.dbox,
+div.dbox_mobile {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #4358ca8f;
+  padding: 25px;
+  border-radius: 50px;
+  text-align: center;
+  width: 500px;
+}
+
+div.dbox_mobile {
+  width: 90%;
+  max-width: 450px;
+  color: white;
+  border-radius: 10px;
+  max-height: 475px;
+  overflow: auto;
+}
+
+div.dbox>h1.title,
+div.dbox_mobile>h1.title {
+  margin-bottom: 0px;
+}
+
+div.dbox>hr,
+div.dbox_mobile>hr {
+  margin: 2rem 0;
+}
+
+div.dbox>.dbtn,
+div.dbox_mobile>.dbtn {
+  border: none;
+  border-radius: 50px;
+  padding: 10px 20px;
+  background: #f0f0f0;
+  color: black;
+  text-decoration: none;
+  font-weight: 600;
+  -webkit-appearance: button;
+}
+
+div.dbox>.dbtn:hover {
+  background: #e0e0e0;
+  cursor: pointer;
+}
+
+div.dfooter {
+  position: fixed;
+  bottom: 15px;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+  color: #ffffff90;
+  font-size: 13px;
+  width: 100%;
+}
+
+
+
+/* MOBILE SECTION */
+
+.appBody {
+  background-color: #10194b;
+  max-width: 450px;
+  min-width: 330px;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.header>.logo-section,
+.header>.menu-section {
+  text-align: center;
+}
+
+.header>.logo-section,
+.footer>.copyright-section {
+  background-color: #2a377e;
+  padding: 15px 0;
+}
+
+.header>.menu-section {
+  background-color: #3849a8;
+  padding: 13px 0;
+}
+
+.header>.logo-section>img {
+  width: 250px;
+}
+
+.header>.menu-section>.navLink {
+  color: white;
+  text-decoration: none;
+  margin: 0 15px;
+}
+
+.header>.menu-section>.navLink.active {
+  color: #2a377e;
+  margin: 0;
+  padding: 3px 15px;
+  background: white;
+  border-radius: 50px;
+  font-weight: 500;
+}
+
+main {
+  background-color: white;
+  flex: 1;
+  overflow: auto;
+}
+
+.titlePage {
+  text-align: center;
+  font-weight: 600;
+  margin: 15px 0 20px;
+}
+
+.subtitlePage {
+  text-align: center;
+  font-weight: 500;
+  margin: -15px 0 20px;
+}
+
+.linkBox {
+  text-decoration: none;
+  color: black;
+}
+
+.clickBox {
+  width: 100%;
+  border: 2px solid #2a377e;
+  text-align: center;
+  border-radius: 20px;
+  font-weight: 500;
+  /* margin-bottom: 10px; */
+  padding: 4px;
+}
+
+.clickBox.Squared {
+  font-weight: 600;
+  border: solid 4px #2a377e;
+}
+
+.clickBox>img {
+  width: 80%;
+}
+
+.changelogTitle {
+  font-weight: 600;
+  padding: 0 13px;
+  margin: 0 0 15px;
+}
+
+.changelogList,
+.tec,
+.stationList {
+  padding: 0 13px;
+  margin: 0 0 7px;
+  text-align: justify;
+  hyphens: auto;
+}
+
+.stationList {
+  text-align: center;
+}
+
+.stationCard>a.stationLink {
+  padding: 0;
+}
+
+.stationCard>a.stationLink>img {
+  width: 100%;
+  border-radius: 20px;
+}
+
+/* .stationCard>.thematicBadge {
+  position: relative;
+  background: #f7b835;
+  padding: 1px 5px;
+  font-size: 0.8rem;
+  border-radius: 27px;
+  font-style: italic;
+  font-weight: 600;
+  top: 31px;
+  left: 35px;
+  margin: 0;
+} */
+
+.stationCard.isthematic {
+  text-align: right;
+  margin-top: -24px;
+}
+
+.stationCard.isthematic:before {
+  content: "Tematica";
+  position: relative;
+  background: #f7b835;
+  padding: 1px 5px;
+  font-size: 0.8rem;
+  border-radius: 27px;
+  font-style: italic;
+  font-weight: 600;
+  top: 30px;
+  right: 7px;
+  margin: 0;
+}
+
+iframe.contentplayer {
+  position: absolute;
+  left: 50%;
+  height: calc(100vh - 312px);
+  width: 100%;
+  max-width: 450px;
+  transform: translateX(-50%);
+}
+
+.footer_player {
+  background: #f7b835;
+  color: #2a377d;
+  position: fixed;
+  z-index: 90;
+  bottom: 70px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  max-width: 450px;
+  height: 100px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  padding: 20px;
+}
+
+.footer_player>.row>.col-2>img {
+  border-radius: 5px;
+}
+
+button#playPauseBtn {
+  background: none;
+  border: none;
+}
+
+.footer,
+.header {
+  z-index: 10000;
+}
+
+.footer>.menu-section {
+  background: #3849a8;
+  font-size: 0.7rem;
+  padding: 7px 0;
+  text-align: center;
+}
+
+.footer>.menu-section>a {
+  color: white;
+  text-decoration: none;
+  margin: 0 5px;
+}
+
+.footer>.copyright-section {
+  color: white;
+  font-size: 0.8rem;
+  text-align: center;
+  padding: 10px;
+  font-weight: 500;
+}
+
+@media (max-width: 450px) {
+  .appBody {
+    background-color: #2a377e;
+  }
+}
+
+
+/* Loading spinner */
+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  border-radius: 50%;
+  border-top-color: #3498db;
+  animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+
+/* Forza orientamento portrait - nasconde contenuto in landscape */
+@media screen and (orientation: landscape) and (max-height: 450px) {
+  body.appBody::after {
+    content: "Ruota il dispositivo in verticale";
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #2a377e;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+    font-weight: 600;
+    z-index: 9999;
+    text-align: center;
+    padding: 20px;
+  }
+
+  body.appBody>* {
+    display: none !important;
+  }
 }
\ No newline at end of file