✨feature: Refactor footer layout and styles for improved design consistency

styles/base/colors.css

@@ -7,9 +7,9 @@
     --color-background: oklch(89.75% 0 0);
     --color-text:       var(--color-black);
 
-    --color-cwc-blue-01: oklch(47.31% 0.1141 242.9);
-    --color-cwc-blue-02: oklch(28.99% 0.0614 237.9);
-    --color-cwc-blue-03: oklch(80.63% 0.0724 230.4);
+    --color-cwc-blue-01:   oklch(47.31% 0.1141 242.9);
+    --color-cwc-blue-02:   oklch(28.99% 0.0614 237.9);
+    --color-cwc-blue-03:   oklch(80.63% 0.0724 230.4);
     --color-cwc-orange-01: oklch(63.53% 0.1751 29.61);
 
     --color-primary:     var(--color-cwc-blue-01);

styles/base/typography.css

@@ -20,6 +20,7 @@
  * Font sizes at standard viewport widths:
  *           | 360px | 640px | 768px | 1024px | 1280px | 1440px | 1920px
  * --------- | ----- | ----- | ----- | ------ | ------ | ------ | ------
+ * text-12px | 10.00 | 10.36 | 10.52 |  10.85 |  11.18 |  11.38 |  12.00
  * text-14px | 12.00 | 12.36 | 12.52 |  12.85 |  13.18 |  13.38 |  14.00
  * text-16px | 14.00 | 14.36 | 14.52 |  14.85 |  15.18 |  15.38 |  16.00
  * text-18px | 16.00 | 16.36 | 16.52 |  16.85 |  17.18 |  17.38 |  18.00
@@ -41,6 +42,7 @@
     --line-height: 1.6;
 
     --text-base: 1rem;
+    --text-12px: round(down, clamp(0.625rem, 0.5962rem + 0.1282vw, 0.75rem), 1px);
     --text-14px: round(up, clamp(0.75rem, 0.7212rem + 0.1282vw, 0.875rem), 2px);
     --text-16px: round(up, clamp(0.875rem, 0.8462rem + 0.1282vw, 1rem), 2px);
     --text-18px: round(up, clamp(1rem, 0.9712rem + 0.1282vw, 1.125rem), 2px);

styles/blocks/buttons.css

@@ -76,24 +76,6 @@
 
 .btn:active, .button:active { transform: scale(99%); }
 
-/* Back To Top Button */
-#backToTopBtn {
-    background: var(--color-primary);
-    border: none;
-    border-radius: 2em;
-    bottom: 2rem;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-    color: #fff;
-    cursor: pointer;
-    display: none;
-    font-size: 1.1rem;
-    padding: 0.75em 1.5em;
-    position: fixed;
-    right: 2rem;
-    transition: opacity 0.2s;
-    z-index: 1000;
-}
-
 /**
  * Variants
  *
@@ -159,21 +141,35 @@ x-button:has(.button[data-button-width="full"]) { @apply w-full; }
     --button-hover-color:        var(--color-dark);
 }
 
-.back-to-top {
-    background: var(--color-primary, #3857BC);
-    border: none;
-    border-radius: 2em;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-    color: #fff;
+/* Back To Top Button */
+#backToTopBtn {
+    align-items: center;
+    background: var(--color-secondary);
+    border: 1px solid transparent;
+    border-radius: 100%;
+    color: var(--color-white);
     cursor: pointer;
-    font-size: 1.1rem;
-    opacity: 0.85;
-    padding: 0.75em 1.5em;
+    display: flex;
+    font-size: 1rem;
+    height: 1rem;
+    justify-content: center;
+    line-height: 1;
+    outline: 1px solid transparent;
+    padding: 1rem;
     transition: opacity 0.2s, background 0.2s;
-}
+    width: 1rem;
 
-.back-to-top:hover, .back-to-top:focus {
-    background: var(--color-info, #233a7a);
-    opacity: 1;
-    outline: 2px solid var(--color-info, #233a7a);
+    i {
+        font-weight: bold;
+        display: inline-block;
+        margin: -4px 0 0 0;
+    }
+
+    &:hover, &:focus {
+        background: var(--color-secondary-800);
+        border: 1px solid var(--color-secondary);
+        color: var(--color-white);
+        opacity: 1;
+        outline: 1px solid var(--color-secondary);
+    }
 }

styles/components/site-footer.css

@@ -1,41 +1,21 @@
 /* Footer styles */
 
 .site-footer {
-  #footRight {
-    div {
-      @apply col-span-1 md:col-span-4 lg:col-span-1;
+    border-bottom: 1rem solid var(--color-orange, #F26B53);
 
-      h3 {
-        @apply font-bold text-secondary-300 text-20px mb-4 pb-2 border-b border-b-secondary-300
-      }
-
-      a {
-        @apply text-footlinks hover:opacity-60;
-      }
-    }
+    a { @apply text-white transition-colors duration-300 hover:text-secondary-400 focus-visible:text-secondary-400; }
 
     .widget {
-      li {
-        @apply text-16px my-1 mb-2 leading-4;
-      }
+        li { @apply text-16px my-1 mb-2 leading-4; }
 
-      h4 {
-        @apply font-bold text-18px text-secondary mb-2;
-      }
-
-      a {
-        @apply transition-colors duration-300 hover:text-success focus-visible:text-success;
-      }
+        h4 { @apply font-bold text-18px text-secondary mb-2; }
     }
 
-    .menu-footer-menu-container {
-      @apply grow;
+    .menu-footer-menu-container { @apply grow; }
+
+    .copyright {
+        p { @apply text-white leading-none m-0 p-0; }
+
+        a { @apply text-white hover:text-primary-500 underline underline-offset-2; }
     }
-  }
-
-  .copyright {
-    p { @apply leading-none m-0 p-0; }
-
-    a { @apply text-white hover:text-primary-500 underline underline-offset-2; }
-  }
 }

styles/fonts/lineicons.css

@@ -26,7 +26,8 @@ Lineicons regular icon font
     /* For safety - reset parent styles, that can break glyph codes*/
     font-variant: normal;
     text-transform: none;
-    font-size: 120%;
+    font-size: 110%;
+    line-height: 1;
     /* Font smoothing. That was taken from TWBS */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -37,11 +38,21 @@ Lineicons regular icon font
     */
 }
 
+.social-links{
+    @apply flex flex-row justify-end w-full;
+
+    a {
+        margin-right: 1rem;
+
+        &:last-child { margin-right: 0 !important; }
+    }
+}
+
 /* Circular Icons */
 .circular-icon {
-    @apply box-content bg-secondary rounded-full text-gray-800 inline-block;
+    @apply box-content bg-secondary rounded-full text-white flex justify-center items-center;
 
-    --size: 3rem;
+    --size: 2rem;
     height: var(--size);
     text-align: center;
     width: var(--size);
@@ -49,7 +60,8 @@ Lineicons regular icon font
     i {
         display: inline-block;
         height: var(--size);
-        line-height: var(--size);
+        line-height: 1;
+        margin-top: 0.5rem;
         text-align: center;
         vertical-align: middle;
         width: var(--size);