v4.0.6 - Simplicity focus

src/lib/components/ui/Footer.svelte

@@ -4,6 +4,8 @@
   import { locationPages } from '$lib/content/locations';
 
   export let footer: FooterContent;
+  // 'minimal' is a typography test running on the /variants/* pages.
+  export let variant: 'default' | 'minimal' = 'default';
 
 
   const socialLinks: LinkItem[] = [
@@ -35,7 +37,7 @@
   $: navigationLinks = withAboutLink(footer.navigationLinks);
 </script>
 
-<footer data-track-location="footer">
+<footer data-track-location="footer" class:footer--min={variant === 'minimal'}>
   <div class="footer-inner">
     <div class="footer-brand">
       <enhanced:img
@@ -125,3 +127,61 @@
     </button>
   </div>
 </footer>
+
+<style>
+  /*
+   * Minimal footer variant (typography test on /variants/* pages). One calm
+   * type scale, lighter weights, more air. Structure and colour unchanged.
+   * Two sizes do all the work: 14px for links/text, 12px for meta. Labels drop
+   * the display font for tracked body caps, which reads cleaner at small sizes.
+   */
+  .footer--min :global(.footer-logo) {
+    height: 26px;
+    margin-bottom: 22px;
+  }
+
+  .footer--min :global(.footer-brand p) {
+    font-size: 14px;
+    line-height: 1.75;
+    opacity: 0.78;
+  }
+
+  .footer--min :global(.footer-col-label) {
+    font-family: var(--font-body);
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.18em;
+    opacity: 0.5;
+    margin-bottom: 18px;
+  }
+
+  .footer--min :global(.footer-nav a),
+  .footer--min :global(.footer-contact-link) {
+    font-size: 14px;
+    font-weight: 400;
+    letter-spacing: 0.005em;
+    opacity: 0.72;
+  }
+
+  .footer--min :global(.footer-nav a) {
+    padding: 7px 0;
+  }
+
+  .footer--min :global(.footer-nav a:hover),
+  .footer--min :global(.footer-contact-link:hover) {
+    opacity: 1;
+  }
+
+  .footer--min :global(.footer-bottom) {
+    font-size: 12px;
+    letter-spacing: 0.01em;
+    opacity: 0.5;
+  }
+
+  .footer--min :global(.footer-back-top) {
+    font-size: 12px;
+    font-weight: 500;
+    letter-spacing: 0.01em;
+    text-transform: none;
+  }
+</style>