bottomBar responsive

assets/css/components/_bottom-bar.scss

@@ -16,10 +16,6 @@
     transition: bottom var(--transition-scroll);
 
 
-  
-
-    // border-top: 2px solid var(--grey-800);
-
     .progress-container{
         position: absolute;
         top: 0;
@@ -90,4 +86,21 @@
 
       
     }
+
+
+      @media #{$small} {
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        .bottom-bar__inner{
+           height: calc(var(--header-h)*0.5);
+            justify-content: center;
+            align-items: center;
+         }
+
+       
+
+        .title-group, .btn--download, .btn--back-to-top{ display: none; }
+    }
 }

assets/css/components/_list-socials.scss

@@ -3,65 +3,82 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    max-width: 400px;
+    max-width: 350px;
     a{
         display: flex;
         align-items: center;
         text-decoration: none;
     }
+
+    li{
+        --size-icon: 20px;
+    }
+
+    li[data-socials="youtube"]{
+        --size-icon: 26px;
+    }
+
+
     
     .icon{
-        width: 20px;
-        height: 20px;
+        width: var(--size-icon);
+        height: var(--size-icon);
         position: relative;
         top: -2px;
     }
     svg{
         display: flex;
         align-items: center;
-        width: 20px;
-        height: 20px;
+        width: var(--size-icon);
+        height: var(--size-icon);
+        fill: var(--color-txt);
       
     }
 
-    .text{ display: none; }
+    
+
+    a:hover{
+        svg{
+               fill: var(--color-txt-light);
+        }
+    }
 }
 
 
 
 // with text
-@media #{$small-up}{
-    .footer__socials .list-socials{
+// @media #{$small-up}{
+//     .footer__socials .list-socials{
 
-        display: block;
+//         display: block;
         
-        li{
-            margin-bottom: calc(var(--spacing)*0.25);
-            break-inside: avoid;
-            font-size: var(--fs-small);
+//         li{
+//             margin-bottom: calc(var(--spacing)*0.25);
+//             break-inside: avoid;
+//             font-size: var(--fs-small);
           
-        }
+//         }
         
-        a{
-            gap: 1ch;
+//         a{
+//             gap: 1ch;
         
-            height: calc(var(--spacing)*1);
-            &::after{
-                content: '↗';
-                color: var(--grey-300);
-            }
+//             height: calc(var(--spacing)*1);
+//             &::after{
+//                 content: '↗';
+//                 color: var(--grey-300);
+//             }
 
-            &:hover{
-                color: var(--color-accent);
-                &::after{
-                    color: var(--color-accent);
-                    opacity: 0.5;
-                }
-            }
-        }
-        .text{
-            display: block;
-            line-height: 1;
-        }
-    }
-}
+//             &:hover{
+//                 color: var(--color-accent);
+//                 &::after{
+//                     color: var(--color-accent);
+//                     opacity: 0.5;
+//                 }
+//             }
+//         }
+//         .text{
+//             display: block;
+//             line-height: 1;
+//         }
+//     }
+// }

assets/css/components/_support-bar.scss

@@ -0,0 +1,63 @@
+#support-bar {
+    height: var(--header-h);
+    background-color: var(--color-accent);
+    color: var(--color-bg);
+    padding: 0 var(--padding-body);
+
+    
+
+    .support-bar__container {
+        max-width: var(--max-w-cards);
+        margin: 0 auto;
+
+        height: 100%;
+        display: flex;
+
+        @media #{$small-up} {
+
+            align-items: center;
+            justify-content: space-between;
+            gap: 2ch;
+        }
+
+        @media #{$small} {
+            flex-direction: column;
+            font-size: var(--fs-small);
+            line-height: 1.1;
+            align-items: flex-start;
+            justify-content: center;
+        }
+
+    }
+
+    .baseline {
+        text-transform: uppercase;
+        font-weight: 500;
+
+    }
+
+    .btn {
+        text-transform: uppercase;
+        color: var(--color-bg);
+        font-weight: 500;
+        text-decoration: underline;
+        text-underline-offset: 2px;
+        word-wrap: nowrap;
+        white-space: nowrap;
+
+        &:hover {
+            opacity: 0.7;
+        }
+    }
+
+
+     @media #{$small} {
+            height: auto;
+            padding: calc(var(--spacing)*0.75) var(--padding-body);
+            .btn{
+                margin-top: calc(var(--spacing)*0.75);
+            }
+    }
+
+
+}