- Catalogo: Aggiunta di Schede

src/css/app.scss

@@ -1,3 +1,12 @@
+@use "sass:color";
+
+@font-face {
+  font-family: 'AGaramondPro-Regular'; 
+  src: url('~src/assets/fonts/AGaramondPro-Regular.otf') format('opentype'); 
+  font-weight: normal;
+  font-style: normal;
+}
+
 body {
   font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   -webkit-font-smoothing: antialiased;
@@ -977,11 +986,6 @@ h3 {
   margin-right: auto;
   min-width: 800px;
 
-  @media (max-width: 1024px) {
-    max-width: 1024px;
-    min-width: 300px;
-  }
-
   padding-bottom: 20px;
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -989,6 +993,10 @@ h3 {
 
   // transition: transform .2s ease-out;
 
+  @media (max-width: 1024px) {
+    max-width: 1024px;
+    min-width: 300px;
+  }
 }
 
 .my-card-shadow:hover {
@@ -1844,17 +1852,17 @@ h3 {
 .buttons_bottom {
   max-width: 700px !important;
 
-  @media (max-width: 700px) {
-    /* Versione Mobile */
-    max-width: 400px;
-  }
-
   margin-left: auto;
   justify-content: space-around;
   margin-right: auto;
   text-align: center;
   padding-top: 8px;
   padding-bottom: 8px;
+
+  @media (max-width: 700px) {
+    /* Versione Mobile */
+    max-width: 400px;
+  }
 }
 
 .body--light {
@@ -1888,9 +1896,6 @@ h3 {
 }
 
 .visudialog {
-  @media (max-width: 600px) {
-    /* ... */
-  }
 
   else {
     width: 700px !important;
@@ -2004,13 +2009,12 @@ h3 {
 }
 
 .fake-link {
+  font-weight: bold;
   @media (max-width: 600px) {
     color: #1976D2;
     text-decoration: underline !important;
     cursor: pointer;
   }
-
-  font-weight: bold;
 }
 
 .fake-link:hover {
@@ -2199,9 +2203,23 @@ $coloreprincipale: lightblue;
 }
 
 .sfondo_gradiente_rosso {
-  background: linear-gradient(180deg, rgba(red($rosso), green($rosso), blue($rosso), $trasparenza), $coloreprincipale, rgba(red($rosso), green($rosso), blue($rosso), $trasparenza)) !important;
+  background: linear-gradient(
+    180deg,
+    rgba(
+      color.channel($rosso, "red", $space: rgb),
+      color.channel($rosso, "green", $space: rgb),
+      color.channel($rosso, "blue", $space: rgb),
+      $trasparenza
+    ),
+    $coloreprincipale,
+    rgba(
+      color.channel($rosso, "red", $space: rgb),
+      color.channel($rosso, "green", $space: rgb),
+      color.channel($rosso, "blue", $space: rgb),
+      $trasparenza
+    )
+  ) !important;
 }
-
 .card-carousel-container {
   width: 100%;
   overflow: hidden;
@@ -2249,9 +2267,9 @@ $coloreprincipale: lightblue;
   display: flex;
   flex-wrap: nowrap;
   flex-direction: row;
-  gap: 1rem;
+  gap: 0.5rem;
   height: 100%;
-  padding: 1rem;
+  padding: 0.5rem;
 }
 
 .flex-card {
@@ -2461,7 +2479,7 @@ body.body--dark {
   display: flex; /* Rende il div un container flex per allineare i contenuti */
   justify-content: center; /* Allineamento orizzontale al centro */
   align-items: center; /* Allineamento verticale al centro */
-  padding: 10px;
+  padding: 0px;
   flex-grow: 1; /* Opzionale: permette agli elementi di crescere uniformemente */
 
   break-inside: avoid;
@@ -2475,7 +2493,7 @@ body.body--dark {
 
 .card-row {
   display: flex;
-  justify-content: flex-start;
+  justify-content: center;
 }
 
 .cards-container {