Feature/rza 260184

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;
+  }
+}