Feature/rza 260184

src/assets/styles/canvas.css

@@ -130,7 +130,9 @@
 }
 
 .canvas-generator .color-options .color-select option {
-  background: #1e293b;
+  background: #0f172a;
+  color: #ffffff;
+
 }
 
 .canvas-generator label {

src/assets/styles/card-layout.css

@@ -1,5 +1,7 @@
+/* CARD LAYOUT CSS*/
+
 .card__inner {
-  background: var(--background);
+  background: var(--card-bg, var(--background));
   border: 2px solid var(--border);
   border-radius: 1rem;
   padding: clamp(1rem, 3vw, 1.25rem);
@@ -8,76 +10,199 @@
   flex-direction: column;
   justify-content: space-between;
   gap: clamp(0.75rem, 2vw, 1rem);
-  transition: all 0.2s ease;
+  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+}
+
+/* ── Card Hover ── */
+.card:hover .card__inner {
+  transform: translateY(-4px);
+  border-color: var(--primary);
+  box-shadow: var(--shadow-glow, 0 0 20px rgba(124, 58, 237, 0.15));
 }
 
+[data-theme="dark"] .card:hover .card__inner {
+  box-shadow: 0 0 24px rgba(244, 114, 182, 0.2);
+}
+
+/* ── Category Icon ── */
 .category__icon {
   font-size: clamp(2rem, 4vw, 2.5rem);
   margin-bottom: clamp(0.25rem, 2vw, 0.5rem);
   line-height: 1;
 }
 
+/* ── Category Title ── */
 .category__title {
-  font-size: clamp(1.25rem, 3vw, 1.5rem);
-  margin-bottom: 0.75rem;
+  font-size: clamp(1.1rem, 3vw, 1.5rem);
+  margin-bottom: 0.5rem;
+  color: var(--heading, var(--text));
+  line-height: 1.3;
+  font-weight: 700;
 }
 
+/* ── Category Description ── */
 .category__description {
-  font-size: clamp(0.9rem, 2vw, 0.95rem);
+  font-size: clamp(0.85rem, 2vw, 0.95rem);
   line-height: 1.6;
   flex-grow: 1;
+  color: var(--subtext, var(--text-light));
 }
 
+/* BUTTONS*/
+
 .btn {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: clamp(0.5rem, 2vw, 0.75rem) clamp(0.75rem, 2vw, 2rem);
   border-radius: 0.75rem;
   font-weight: 600;
-  font-size: clamp(0.9rem, 2vw, 1.1rem);
-  transition: all 0.2s ease;
+  font-size: clamp(0.85rem, 2vw, 1rem);
+  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
   text-decoration: none;
   flex: 1;
-  min-width: 119px;
+  min-width: 100px;
+  min-height: 44px;
+  /* touch friendly */
+  border: none;
+  cursor: pointer;
+  white-space: nowrap;
 }
 
-.card__actions {
-  display: flex;
-  margin-top: auto;
-  gap: 4px;
+.btn:hover {
+  transform: translateY(-2px);
 }
 
-@media (max-width: 768px) {
-  .btn {
-    width: 100%;
-  }
+.btn:active {
+  transform: translateY(0);
 }
 
+/* Playground Button */
 .btn-playground {
   background: var(--primary);
-  color: var(--background);
+  color: #fff;
 }
 
-.card:hover .card__inner {
-  transform: translateY(-3px);
-  border-color: var(--primary);
+.btn-playground:hover {
+  background: var(--primary-light);
+  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
 }
 
-.btn:hover {
-  transform: translateY(-2px);
+[data-theme="dark"] .btn-playground:hover {
+  box-shadow: 0 4px 12px rgba(244, 114, 182, 0.3);
 }
 
-.btn-playground:hover {
+/* Board Button */
+.btn-board {
+  background: var(--primary);
+  color: #fff;
+}
+
+.btn-board:hover {
   background: var(--primary-light);
+  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
+}
+
+/* ── Card Actions Row ── */
+.card__actions {
+  display: flex;
+  margin-top: auto;
+  gap: 6px;
+  flex-wrap: wrap;
 }
 
+/* ── Card Icon ── */
 .card_icon {
-  font-size: 1.2em;
-  margin-right: 0.5em;
+  font-size: 1.1em;
+  margin-right: 0.4em;
+  flex-shrink: 0;
 }
 
-.btn-board {
-  background: var(--primary);
-  color: var(--background);
+/* TABLET — 1024px*/
+@media (max-width: 1024px) {
+  .card__inner {
+    padding: 1rem;
+    gap: 0.75rem;
+  }
+
+  .btn {
+    min-width: 90px;
+    font-size: 0.88rem;
+  }
 }
+
+/*MOBILE — 768px*/
+@media (max-width: 768px) {
+  .card__inner {
+    padding: 0.875rem;
+    border-radius: 0.75rem;
+    gap: 0.6rem;
+  }
+
+  /* Disable hover lift on touch */
+  .card:hover .card__inner {
+    transform: none;
+  }
+
+  .card:active .card__inner {
+    transform: scale(0.98);
+    border-color: var(--primary);
+  }
+
+  .category__title {
+    font-size: 1.05rem;
+    margin-bottom: 0.35rem;
+  }
+
+  .category__description {
+    font-size: 0.85rem;
+  }
+
+  /* Buttons full width on mobile */
+  .card__actions {
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .btn {
+    width: 100%;
+    flex: none;
+    min-width: unset;
+    padding: 0.65rem 1rem;
+    font-size: 0.9rem;
+    justify-content: center;
+  }
+
+  .btn:hover {
+    transform: none;
+  }
+
+  .btn:active {
+    transform: scale(0.98);
+  }
+}
+
+/* SMALL MOBILE — 480px*/
+@media (max-width: 480px) {
+  .card__inner {
+    padding: 0.75rem;
+    gap: 0.5rem;
+    border-radius: 0.65rem;
+  }
+
+  .category__icon {
+    font-size: 1.75rem;
+  }
+
+  .category__title {
+    font-size: 1rem;
+  }
+
+  .btn {
+    padding: 0.6rem 0.75rem;
+    font-size: 0.85rem;
+    border-radius: 0.6rem;
+  }
+}

src/assets/styles/cards/slider.css

@@ -51,18 +51,20 @@
 }
 
 .gallery-controls {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-  position: relative;
+  display: grid;
+  grid-template-columns: var(--nav-button-size) 1fr var(--nav-button-size);
   gap: 1%;
+  align-items: start;
+  /* align to top, buttons will self-align to image center */
   margin-left: -4rem;
   margin-right: -4rem;
+  position: relative;
 }
 
 .gallery-scroller {
   width: 100%;
   height: calc(var(--item-height) + 200px);
+  /* extra space for item-details below */
   overflow-x: auto;
   overflow-y: hidden;
   scroll-behavior: smooth;
@@ -83,10 +85,12 @@
   height: 100%;
 }
 
+/* ✅ KEY FIX: buttons position themselves at center of image area only */
 .nav-button {
   width: var(--nav-button-size);
   height: var(--nav-button-size);
-  margin-bottom: 12%;
+  margin-top: calc(var(--item-height) / 2 - var(--nav-button-size) / 2 + 2rem);
+  /* center of image */
   border-radius: 50%;
   background: rgba(129, 140, 248, 0.2);
   border: none;
@@ -182,7 +186,7 @@
   pointer-events: none;
 }
 
-.gallery-item.active + .item-details {
+.gallery-item.active+.item-details {
   opacity: 1;
   transform: translateY(0);
 }
@@ -241,6 +245,7 @@
     --item-gap: 30px;
     --nav-button-size: 40px;
   }
+
   .gallery-page {
     margin-left: 15%;
   }
@@ -303,4 +308,4 @@
     width: 20px;
     height: 20px;
   }
-}
+}