detail prog. point fadeout fix, slider undo hover

source/_patterns/00-atoms/18-collapsibles/container-collapsed.mustache

-<div class="container container-default container-collapsible text-center">
+<div class="container container-default container-collapsible relative text-center">
 
-  <div class="container-collapsible-content max-h-screen">
+  <div class="container-collapsible-content" style="height: 50vh;">
 	  {{> molecules-content-block(classes: "max-w-full") }}
   </div>
   <div class="container-collapsible-button-container">

source/_patterns/01-molecules/27-carousel/carousel-card-list.mustache

@@ -6,18 +6,18 @@
             <carousel :per-page=1 :navigation-enabled="true" class="article-card-list pb-8">
               <slide>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-8">
-                {{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů", description: "Short description" )}}
-                {{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů", description: "Short description" )}}
-                {{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů", description: "Short description" )}}
-                {{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů", description: "Long description. Long description. Long description. Long description. Long description. Long description. Long description. Long description. Long description. Long description. " )}}
+                {{> atoms-colored-card(bodyClasses: "p-4", title: "Otevřenost a zapojení občanů", description: "Short description" )}}
+                {{> atoms-colored-card(bodyClasses: "p-4", title: "Otevřenost a zapojení občanů", description: "Short description" )}}
+                {{> atoms-colored-card(bodyClasses: "p-4", title: "Otevřenost a zapojení občanů", description: "Short description" )}}
+                {{> atoms-colored-card(bodyClasses: "p-4", title: "Otevřenost a zapojení občanů", description: "Long description. Long description. Long description. Long description. Long description. Long description. Long description. Long description. Long description. Long description. " )}}
                </div>
               </slide>
               <slide>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-8">
-                {{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů", description: "Short description" )}}
-                {{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů", description: "Short description" )}}
-                {{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů", description: "Short description" )}}
-                {{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů", description: "Long description. Long description. Long description. Long description. Long description. Long description. Long description. Long description. Long description. Long description. " )}}
+                {{> atoms-colored-card(bodyClasses: "p-4", title: "Otevřenost a zapojení občanů", description: "Short description" )}}
+                {{> atoms-colored-card(bodyClasses: "p-4", title: "Otevřenost a zapojení občanů", description: "Short description" )}}
+                {{> atoms-colored-card(bodyClasses: "p-4", title: "Otevřenost a zapojení občanů", description: "Short description" )}}
+                {{> atoms-colored-card(bodyClasses: "p-4", title: "Otevřenost a zapojení občanů", description: "Long description. Long description. Long description. Long description. Long description. Long description. Long description. Long description. Long description. Long description. " )}}
                </div>
               </slide>
             </carousel>

source/_patterns/03-templates/coalition-program-points/detail-program-pirati-stan.mustache

 {{> organisms-navbar-pirati-stan }}
 
-<div class="container container-default container-collapsible pt-4 pb-20">
+<div class="container container-default pt-4 pb-20">
 
-  <div class="w-full lg:w-4/6 relative container-collapsible-content" style="max-height: 250vh;">
+  <div class="w-full lg:w-4/6 relative container-collapsible">
 
         {{> molecules-floating-nav-pirati-stan}}
         
@@ -18,6 +18,7 @@
         <div class="problem-pack">
             {{> molecules-problems-pirati-stan}}
         </div>
+        <div class="container-collapsible-content" style="height: 50vh;">
 
             <h3 class="head-alt-base mb-8">Navrhovaná opatření:</h3>
 
@@ -100,10 +101,8 @@
             {{> atoms-source(sourceNumber: 8) }}
             {{> atoms-source(sourceNumber: 9) }}
             {{> atoms-source(sourceNumber: 10) }}
-
         </div>
-
-  <div class="container-collapsible-button-container w-full lg:w-4/6">
+        <div class="container-collapsible-button-container w-full">
               <button class="container-collapsible-button btn btn--icon text-lg block mx-auto" onclick="this.parentElement.parentElement.classList.add('container-collapsible-open');">
                   <div class="btn__body-wrap">
                     <div class="btn__body py-8 leading-4">Zobrazit více</div>
@@ -114,6 +113,7 @@
               </button>
         </div>
     </div>
+</div>
 
 
 {{> organisms-footer-pirati-stan }}

source/css/atoms/collapsibles.pcss

@@ -62,23 +62,28 @@
 	}
 }
 .container-collapsible{
+	/*can be applied to even higher parents. Hides floating nav if inside it */
 	&:not(.container-collapsible-open){
 		.container-collapsible-content{
 			@apply overflow-hidden;
 			&::after {
 			    content: "";
 			    background-image: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0) 20rem);
-			    @apply absolute bottom-0 left-0 w-full h-full;
+			    @apply absolute bottom-0 left-0 w-full;
+			    height: inherit;
 			}
 		}
 		.container-collapsible-button{
 			transform: translateY(-50%);
 		}
+		#floatingNavBarWrapper{
+			@apply hidden;
+		}
 	}
 	&.container-collapsible-open{
 		.container-collapsible-content{
 			@apply overflow-y-visible;
-			max-height: none!important;
+			height: auto!important;
 		}
 		.container-collapsible-button-container{
 			@apply hidden;