feat: improve seo, trust signals, and performance

src/styles/animations.css

@@ -274,10 +274,13 @@ body.page-ready {
   top: 0;
   left: 0;
   height: 2px;
-  width: 0%;
+  width: 100%;
   background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-container) 100%);
   z-index: 9999;
-  transition: width 100ms linear;
+  transform: scaleX(0);
+  transform-origin: left center;
+  transition: transform 100ms linear;
+  will-change: transform;
 }
 
 @media (prefers-reduced-motion: reduce) {

src/styles/base.css

@@ -48,9 +48,11 @@ ul, ol {
   list-style: none;
 }
 
-.material-symbols-outlined {
-  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
+.icon {
+  width: var(--icon-size, 1.25rem);
+  height: var(--icon-size, 1.25rem);
   display: inline-block;
   line-height: 1;
   vertical-align: middle;
+  flex-shrink: 0;
 }

src/styles/components.css

@@ -549,6 +549,11 @@
   flex-shrink: 0;
 }
 
+.whatsapp-float-icon .icon {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
 .whatsapp-float span:first-child {
   position: absolute;
   width: 1px;
@@ -619,7 +624,7 @@
 
 .footer-brand p {
   font-size: var(--text-sm);
-  color: var(--color-on-surface-variant);
+  color: var(--color-on-surface);
   max-width: 100%;
   line-height: 1.5;
 }
@@ -649,7 +654,7 @@
 
 .footer-link {
   font-size: var(--text-sm);
-  color: var(--color-on-surface-variant);
+  color: var(--color-on-surface);
   transition: color 200ms;
 }
 
@@ -668,8 +673,7 @@
 
 .footer-bottom p {
   font-size: var(--text-sm);
-  color: var(--color-on-surface-variant);
-  opacity: 0.6;
+  color: var(--color-on-surface);
   line-height: 1.4;
 }
 

src/styles/utilities.css

@@ -117,5 +117,6 @@
 
 /* Icon size */
 .icon-lg {
-  font-size: 2.5rem;
+  width: 2.5rem;
+  height: 2.5rem;
 }