feat: add fade in

packages/base/Configuration/Sets/SitePackage/TypoScript/page.typoscript

@@ -51,6 +51,7 @@ page {
 
   includeJSLibs {
     navigation = EXT:base/Resources/Public/JavaScript/navigation.js
+    fadein = EXT:base/Resources/Public/JavaScript/fade-in.js
   }
 
   includeJSFooter {

packages/base/ContentBlocks/ContentElements/hero/assets/frontend.css

@@ -75,7 +75,7 @@
 }
 
 .frame-type-cloonar_hero .social-icon:hover {
-  background: #1e3810;
+  background: var(--bs-primary-light);
 }
 
 .frame-type-cloonar_hero .hero-image-wrapper {

packages/base/ContentBlocks/ContentElements/text/templates/frontend.html

@@ -1,7 +1,7 @@
 <f:layout name="Default" />
 <f:section name="Main">
     <f:asset.css identifier="CBText" href="{cb:assetPath()}/frontend.css" />
-    <div>
+    <div class="fade-in-on-scroll">
         <f:if condition="{data.header}">
             <f:then><h2>{data.header}</h2></f:then>
         </f:if>

packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html

@@ -13,7 +13,7 @@
     <f:then><f:variable name="sizeClass" value="size-50" /></f:then>
   </f:if>
 
-  <div class="textimage-container image-pos-{data.imageorient}">
+  <div class="textimage-container image-pos-{data.imageorient} fade-in-on-scroll">
     <div class="textimage-image-wrapper {sizeClass}">
       <f:if condition="{data.image}">
         <f:then>

packages/base/Resources/Private/Extensions/News/Partials/List/Item.html

@@ -1,4 +1,4 @@
-<div class="news-list-item {f:if(condition: '{big}', then: ' news-list-item-big')}">
+<div class="news-list-item fade-in-on-scroll{f:if(condition: '{big}', then: ' news-list-item-big')}">
     <f:link.page pageUid="{settings.detailPid}" class="news-item-link" additionalParams="{tx_news_pi1: {news: newsItem.uid, action: 'detail', controller: 'News'}}">
         <f:if condition="{newsItem.media}">
             <f:then>

packages/base/Resources/Public/JavaScript/fade-in.js

@@ -0,0 +1,40 @@
+(function() {
+  document.addEventListener('DOMContentLoaded', function() {
+    // Elements that should fade in when in view
+    var fadeInElements = document.querySelectorAll('.fade-in-on-scroll');
+
+    // If IntersectionObserver is supported, use it for better performance
+    if ('IntersectionObserver' in window) {
+      var observer = new IntersectionObserver(function(entries, observer) {
+        entries.forEach(function(entry) {
+          if (entry.isIntersecting) {
+            entry.target.classList.add('fade-in-visible');
+            observer.unobserve(entry.target);
+          }
+        });
+      }, { threshold: 0.1 });
+
+      fadeInElements.forEach(function(el) {
+        el.classList.add('fade-in-hidden');
+        observer.observe(el);
+      });
+    } else {
+      // Fallback if IntersectionObserver is not supported
+      fadeInElements.forEach(function(el) {
+        el.classList.add('fade-in-hidden');
+      });
+
+      var checkVisibility = function() {
+        var windowBottom = window.innerHeight + window.scrollY;
+        fadeInElements.forEach(function(el) {
+          if (el.getBoundingClientRect().top + window.scrollY < windowBottom - (el.offsetHeight * 0.1)) {
+            el.classList.add('fade-in-visible');
+          }
+        });
+      };
+
+      window.addEventListener('scroll', checkVisibility);
+      checkVisibility();
+    }
+  });
+})();

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';