feat: add fade in

packages/base/Resources/Public/Scss/abstracts/_fade-in.scss

@@ -0,0 +1,19 @@
+.fade-in-hidden {
+  opacity: 0;
+  transform: translateY(1.5rem);
+  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
+}
+.fade-in-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Respect prefers-reduced-motion: reduce (for accessibility).
+   If user prefers reduced motion, override transitions. */
+@media (prefers-reduced-motion: reduce) {
+  .fade-in-hidden {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}

packages/base/Resources/Public/Scss/components/_buttons.scss

@@ -7,8 +7,10 @@
   padding: 0.75rem 1.5rem;
   border: none;
   cursor: pointer;
+  transition: background 0.3s;
 
   &:hover {
     background-color: var(--bs-primary-light);
+    color: var(--bs-yellow);
   }
 }

packages/base/Resources/Public/Scss/main.scss

@@ -2,6 +2,7 @@
 @import 'abstracts/mixins';
 @import 'abstracts/fonts';
 @import 'abstracts/icons';
+@import 'abstracts/fade-in';
 @import 'base/base';
 @import 'components/navigation';
 @import 'components/images';