refactor(footer): improve contact actions and restore brand icons

src/components/FooterSection.module.css

@@ -2,7 +2,7 @@
   position: relative;
   width: 100%;
   max-width: var(--layout-frame);
-  height: 30rem;
+  height: 34rem;
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -16,7 +16,7 @@
   top: 0;
   left: 0;
   width: 100%;
-  height: 30rem;
+  height: 34rem;
   z-index: 1;
 }
 
@@ -49,7 +49,12 @@
   color: var(--text-secondary);
   font-weight: 500;
   letter-spacing: var(--letter-spacing-eyebrow);
-  margin-bottom: 1.5rem;
+  margin-bottom: 1.25rem;
+}
+
+.emailButton {
+  min-height: 3rem;
+  margin-bottom: 2rem;
 }
 
 .socialRow {
@@ -68,6 +73,8 @@
   transition:
     color var(--motion-duration-fast) ease,
     transform var(--motion-duration-default) var(--motion-ease-out);
+  min-width: 5rem;
+  min-height: 4.75rem;
 }
 
 .socialItem:focus-visible {
@@ -89,9 +96,10 @@
   width: 100%;
   height: 100%;
   fill: currentColor;
+  stroke: none;
 }
 
-.giteaCutout {
+.socialIcon .giteaCutout {
   fill: var(--bg-page);
 }
 
@@ -105,7 +113,7 @@
 @media (max-width: 900px) {
   .footerSection {
     height: auto;
-    min-height: 30rem;
+    min-height: 34rem;
     padding: var(--space-10) var(--layout-page-gutter) var(--space-9);
   }
 
@@ -127,7 +135,7 @@
 
 @media (max-width: 560px) {
   .footerSection {
-    min-height: 35rem;
+    min-height: 38rem;
     padding-top: var(--space-9);
   }
 
@@ -144,6 +152,11 @@
     letter-spacing: 0.08em;
   }
 
+  .emailButton {
+    width: 100%;
+    max-width: 20rem;
+  }
+
   .socialRow {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));