- caaloghi, categorie

src/components/CCatalogoCard/CCatalogoCard.scss

@@ -10,35 +10,6 @@
   place-content: center;
 }
 
-.prod_price {
-  font-size: 1.1rem;
-  font-style: bold;
-
-  @media (max-width: 718px) {
-    font-size: 1rem;
-  }
-}
-
-.prod_sale_price {
-  font-size: 1.10rem;
-  font-style: bold;
-
-  @media (max-width: 718px) {
-    font-size: 1.05rem;
-  }
-}
-
-.prod_off_price {
-  font-size: 1rem;
-
-  @media (max-width: 718px) {
-    font-size: 0.85rem;
-  }
-
-  color: gray;
-  text-decoration: line-through;
-  padding-left: 5px;
-}
 
 .prod_disp {
   font-size: 1.2rem;
@@ -136,18 +107,6 @@
   height: 70px;
 }
 
-.image-container {
-  width: 300px;
-  height: 300px;
-  position: relative;
-  overflow: hidden;
-
-  @media (max-width: 718px) {
-    width: 200px;
-    height: 200px;
-  }
-}
-
 .book-image-fixed{
   max-width: 300px;
   max-height: 600px;
@@ -168,12 +127,6 @@
 }
 
 .book-card {
-  width: 300px;
-  background-color: #f8f8f8;
-}
-
-.book-card {
-  width: 300px;
   background-color: #f8f8f8;
 }
 
@@ -198,19 +151,32 @@
   padding: 20px;
 }
 
+
 .book-title {
   margin: 8px;
   font-family: 'Poppins,sans-serif';
-  font-size: 1.15rem;
-  line-height: 20px;
   font-weight: bold;
   color: #333;
   display: block;
   text-align: center;
+  text-shadow: 1px 1px 1px #555;
+}
+
+.book-title[data-col=c1] {
+  font-size: 1.15rem;
+  line-height: 20px;
+}
+
+.book-title[data-col=c2] {
+  font-size: 1rem;
+  line-height: 19px;
 }
 
 .book-author {
-  font-size: 1.1em; /* Dimensione del font leggermente più grande per enfatizzare l'importanza del nome dell'autore */
+  color: grey; /* Colore scuro per garantire una buona leggibilità */
+}
+
+.author{
   color: darkblue; /* Colore scuro per garantire una buona leggibilità */
   text-transform: capitalize; /* Capitalizzazione delle iniziali per ogni parola del nome */
   background-color: #f9f9f9; /* Sfondo leggermente diverso per evidenziare il nome */
@@ -219,6 +185,30 @@
   font-style: italic; /* Stile del testo in corsivo per evidenziare l'autore */
 }
 
+.author[data-col=c1]{
+  font-size: 1.1em; /* Dimensione del font leggermente più grande per enfatizzare l'importanza del nome dell'autore */
+}
+.author[data-col=c2]{
+  font-size: 1em; /* Dimensione del font leggermente più grande per enfatizzare l'importanza del nome dell'autore */
+}
+
+.book-category {
+  font-size: 1em; /* Dimensione del font leggermente più grande per enfatizzare l'importanza del nome dell'autore */
+  color: grey; /* Colore scuro per garantire una buona leggibilità */
+}
+
+.category{
+  font-size: 1.0em; /* Dimensione del font leggermente più grande per enfatizzare l'importanza del nome dell'autore */
+  color: green; /* Colore scuro per garantire una buona leggibilità */
+  text-transform: capitalize; /* Capitalizzazione delle iniziali per ogni parola del nome */
+  background-color: #f9f9f9; /* Sfondo leggermente diverso per evidenziare il nome */
+  border-radius: 2px; /* Bordi arrotondati per un aspetto più soft-edged */
+  display: inline-block; /* Tratta il blocco come elementi inline-block per adattarlo al contenuto */
+  font-style: italic; /* Stile del testo in corsivo per evidenziare l'autore */
+  box-shadow: 0 0 5px gray;
+
+}
+
 .book-description {
   font-size: 0.85rem;
   color: #777;
@@ -226,12 +216,23 @@
 
 .block-variazione {
   border: 1px solid gray;
+  margin: auto;
   // effetto 3d
   box-shadow: 0 0 5px gray;
   border-radius: 5px;
-  padding: 2px;
-  margin: 2px;
+  padding: 4px;
   cursor: pointer;
+  .q-badge {
+    font-size: 1rem;
+    padding: 4px 6px;
+  }
+}
+
+.colfix_prodotti_1 {
+  width: 350px;
+}
+.colfix_prodotti_2 {
+  width: 175px;
 }
 
 .block-variazione-selected {
@@ -279,4 +280,23 @@
   @media (max-width: 718px) {
     margin-left: 5px;
   } 
-}
+}
+
+
+.book-3d:hover img {
+  transform: translateZ(50px) rotateY(-20deg); /* Applica la trasformazione 3D quando si passa con il mouse sopra */
+}
+
+// Contenitore del libro, con effetto 3d, ed animazione 3D
+.book-3d {
+  perspective: 1000px;
+  transform-style: preserve-3d;
+  transition: transform 0.5s ease-in-out;
+  transform-origin: center center;
+
+
+  img {
+    transform-origin: center center;
+    transition: transform 0.5s ease-in-out;
+  }
+}