feat(fonts): self-host Poppins 400/500/600/700 — Pass BFeat/poppins fonts

BASELINE.md

@@ -0,0 +1,6 @@
+# Velobiotics theme baseline marker
+
+Captured: 2026-05-08
+Atlas baseline: 111 scripts, 61 stylesheets, 1.14 MB HTML, LCP 2,364 ms, INP 234 ms, CLS 0
+Dawn fork baseline (unmodified): 64 scripts, 42 stylesheets, 301 KB HTML, 718 KB transferred
+Targets: 20 scripts, 10 stylesheets, LCP <= 1,800 ms, INP <= 200 ms

assets/fonts.css.liquid

@@ -0,0 +1,40 @@
+/* ============================================================
+   Velobiotics — Poppins self-hosted fonts (Pass B)
+   File: assets/fonts.css.liquid
+   ------------------------------------------------------------
+   Served as text/css after Liquid asset_url resolution.
+   woff2-only (modern browsers ≥ 2020). font-display: swap so
+   text renders immediately in fallback while Poppins loads.
+   ============================================================ */
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('{{ "poppins-400.woff2" | asset_url }}') format('woff2');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('{{ "poppins-500.woff2" | asset_url }}') format('woff2');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('{{ "poppins-600.woff2" | asset_url }}') format('woff2');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('{{ "poppins-700.woff2" | asset_url }}') format('woff2');
+}

assets/tokens.css

@@ -0,0 +1,159 @@
+/* ============================================================
+   Velobiotics brand tokens — Pass A
+   Pure CSS variables. Prefixed with --vb- to avoid colliding
+   with any of Dawn's existing variables.
+   Dawn's color-scheme variables (--color-foreground,
+   --color-background, etc.) are aliased into --vb-text and
+   --vb-bg so future Velobiotics sections can use --vb-* only
+   and Dawn color schemes still drive the surface colors.
+   ============================================================ */
+
+:root {
+  /* --- Brand greens (from BRAND_TOKENS.md) --- */
+  --vb-green-50:  #f1f8ef;
+  --vb-green-100: #dcecd7;
+  --vb-green-200: #b9d9b0;
+  --vb-green-300: #95c688;
+  --vb-green-400: #71b260;
+  --vb-green-500: #5b9f4f;
+  --vb-green-600: #4d8c44;   /* Brand primary, sampled from live header */
+  --vb-green-700: #3e7137;
+  --vb-green-800: #2f562a;
+  --vb-green-900: #1f3a1c;
+
+  /* --- Neutrals --- */
+  --vb-neutral-0:   #ffffff;
+  --vb-neutral-50:  #fafafa;
+  --vb-neutral-100: #f4f4f5;
+  --vb-neutral-200: #e4e4e7;
+  --vb-neutral-300: #d4d4d8;
+  --vb-neutral-400: #a1a1aa;
+  --vb-neutral-500: #71717a;
+  --vb-neutral-600: #52525b;
+  --vb-neutral-700: #3f3f46;
+  --vb-neutral-800: #27272a;
+  --vb-neutral-900: #18181b;
+
+  /* --- Brand semantic (overridable by theme settings, see theme.liquid) --- */
+  --vb-brand:        var(--vb-green-600);
+  --vb-brand-hover:  var(--vb-green-700);
+  --vb-brand-soft:   var(--vb-green-50);
+  --vb-brand-on:     var(--vb-neutral-0);   /* text on brand */
+  --vb-accent:       var(--vb-green-500);
+
+  /* --- Dawn alias layer (Q2: Yes) --- */
+  --vb-text: rgb(var(--color-foreground));
+  --vb-bg:   rgb(var(--color-background));
+  --vb-text-muted: rgba(var(--color-foreground), 0.72);
+  --vb-border:     rgba(var(--color-foreground), 0.12);
+
+  /* --- Type scale (rem-based, mobile-first) --- */
+  --vb-fs-12: 0.75rem;
+  --vb-fs-14: 0.875rem;
+  --vb-fs-16: 1rem;
+  --vb-fs-18: 1.125rem;
+  --vb-fs-20: 1.25rem;
+  --vb-fs-24: 1.5rem;
+  --vb-fs-30: 1.875rem;
+  --vb-fs-36: 2.25rem;
+  --vb-fs-48: 3rem;
+  --vb-fs-60: 3.75rem;
+
+  --vb-lh-tight:  1.15;
+  --vb-lh-snug:   1.3;
+  --vb-lh-normal: 1.5;
+  --vb-lh-relaxed: 1.7;
+
+  --vb-fw-regular: 400;
+  --vb-fw-medium:  500;
+  --vb-fw-semi:    600;
+  --vb-fw-bold:    700;
+
+  /* Pass A: alias to Dawn's chosen fonts so we change nothing visually
+     until Pass B self-hosts Poppins. */
+  --vb-font-body:    var(--font-body-family);
+  --vb-font-heading: var(--font-heading-family);
+
+  /* --- Spacing scale (4-8-12-16-24-32-48-64) --- */
+  --vb-space-0:  0;
+  --vb-space-1:  0.25rem;   /* 4 */
+  --vb-space-2:  0.5rem;    /* 8 */
+  --vb-space-3:  0.75rem;   /* 12 */
+  --vb-space-4:  1rem;      /* 16 */
+  --vb-space-6:  1.5rem;    /* 24 */
+  --vb-space-8:  2rem;      /* 32 */
+  --vb-space-12: 3rem;      /* 48 */
+  --vb-space-16: 4rem;      /* 64 */
+  --vb-space-24: 6rem;      /* 96 */
+
+  /* --- Radii --- */
+  --vb-radius-none: 0;
+  --vb-radius-sm:   0.25rem;
+  --vb-radius-md:   0.5rem;
+  --vb-radius-lg:   0.75rem;
+  --vb-radius-xl:   1rem;
+  --vb-radius-pill: 9999px;
+  --vb-radius:      var(--vb-radius-md);   /* default, overridable */
+
+  /* --- Shadows --- */
+  --vb-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
+  --vb-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
+  --vb-shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
+  --vb-shadow-lg: 0 12px 32px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.05);
+  --vb-shadow:    var(--vb-shadow-sm);
+
+  /* --- Focus ring (WCAG-friendly) --- */
+  --vb-focus-ring: 0 0 0 3px rgba(77, 140, 68, 0.45);
+
+  /* --- Motion --- */
+  --vb-ease:     cubic-bezier(0.2, 0.8, 0.2, 1);
+  --vb-dur-fast: 120ms;
+  --vb-dur-base: 200ms;
+  --vb-dur-slow: 320ms;
+
+  /* --- Container --- */
+  --vb-container: 1280px;
+}
+
+/* Reduced-motion respect */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --vb-dur-fast: 0ms;
+    --vb-dur-base: 0ms;
+    --vb-dur-slow: 0ms;
+  }
+  /* ============================================================
+   Velobiotics typography tokens (Pass B — added with Poppins)
+   ============================================================ */
+
+:root {
+  /* System-stack fallback for instant render before Poppins arrives */
+  --vb-font-stack-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+
+  /* Primary Velobiotics font stack */
+  --vb-font-sans: 'Poppins', var(--vb-font-stack-fallback);
+
+  /* Weight scale (matches loaded weights — don't reference any value not in the @font-face list) */
+  --vb-fw-regular: 400;
+  --vb-fw-medium: 500;
+  --vb-fw-semibold: 600;
+  --vb-fw-bold: 700;
+}
+
+/* Apply Poppins as the default body font.
+   Dawn's section-specific font-family declarations (h1, h2, .button, etc.)
+   will continue to win cascade where they exist; this only catches anything
+   that doesn't have an explicit family. */
+body {
+  font-family: var(--vb-font-sans);
+}
+
+/* Optional utility classes for Velobiotics-specific surfaces.
+   Use sparingly — prefer setting font-family at the component level
+   when porting sections in Phase 3. */
+.vb-font-sans { font-family: var(--vb-font-sans); }
+.vb-fw-regular { font-weight: var(--vb-fw-regular); }
+.vb-fw-medium { font-weight: var(--vb-fw-medium); }
+.vb-fw-semibold { font-weight: var(--vb-fw-semibold); }
+.vb-fw-bold { font-weight: var(--vb-fw-bold); }
+}

config/settings_schema.json

@@ -1451,5 +1451,46 @@
         "default": "scheme-1"
       }
     ]
+  },
+  {
+    "name": "Velobiotics brand",
+    "settings": [
+      {
+        "type": "header",
+        "content": "Velobiotics brand tokens (Pass A)"
+      },
+      {
+        "type": "paragraph",
+        "content": "These settings drive the --vb-* CSS variables loaded from assets/tokens.css. Keep the brand primary aligned with the Velobiotics green (#4D8C44) unless rebranding."
+      },
+      {
+        "type": "color",
+        "id": "vb_brand_color",
+        "label": "Brand primary",
+        "default": "#4D8C44"
+      },
+      {
+        "type": "color",
+        "id": "vb_accent_color",
+        "label": "Brand accent",
+        "default": "#5B9F4F"
+      },
+      {
+        "type": "range",
+        "id": "vb_base_radius",
+        "min": 0,
+        "max": 24,
+        "step": 1,
+        "unit": "px",
+        "label": "Base corner radius",
+        "default": 8
+      },
+      {
+        "type": "checkbox",
+        "id": "vb_shadow_enabled",
+        "label": "Enable subtle shadows on cards/buttons",
+        "default": true
+      }
+    ]
   }
 ]

layout/theme.liquid

@@ -255,6 +255,14 @@
       }
     {% endstyle %}
 
+<link rel="preload" as="font" type="font/woff2" crossorigin href="{{ 'poppins-400.woff2' | asset_url }}">
+    <link rel="preload" as="font" type="font/woff2" crossorigin href="{{ 'poppins-500.woff2' | asset_url }}">
+    <link rel="preload" as="font" type="font/woff2" crossorigin href="{{ 'poppins-600.woff2' | asset_url }}">
+    <link rel="preload" as="font" type="font/woff2" crossorigin href="{{ 'poppins-700.woff2' | asset_url }}">
+    {{ 'fonts.css.liquid' | asset_url | stylesheet_tag }}
+    {{ 'tokens.css' | asset_url | stylesheet_tag }}
+
+    {{ 'tokens.css' | asset_url | stylesheet_tag }}
     {{ 'base.css' | asset_url | stylesheet_tag }}
     <link rel="stylesheet" href="{{ 'component-cart-items.css' | asset_url }}" media="print" onload="this.media='all'">
 
@@ -296,6 +304,21 @@
         document.documentElement.classList.add('shopify-design-mode');
       }
     </script>
+	{%- comment -%} Velobiotics brand tokens — runtime overrides from theme settings (Pass A) {%- endcomment -%}
+    <style>
+      :root {
+        {%- if settings.vb_brand_color != blank %}
+        --vb-brand: {{ settings.vb_brand_color }};
+        {%- endif %}
+        {%- if settings.vb_accent_color != blank %}
+        --vb-accent: {{ settings.vb_accent_color }};
+        {%- endif %}
+        --vb-radius: {{ settings.vb_base_radius | default: 8 }}px;
+        {%- if settings.vb_shadow_enabled == false %}
+        --vb-shadow: none;
+        {%- endif %}
+      }
+    </style>
   </head>
 
   <body class="gradient{% if settings.animations_hover_elements != 'none' %} animate--hover-{{ settings.animations_hover_elements }}{% endif %}">