CSS and @font-face fixes

package.json

@@ -1,6 +1,6 @@
 {
     "name": "mifi-ventures-landing",
-    "version": "4.0.1",
+    "version": "4.0.2",
     "private": true,
     "repository": "https://git.mifi.dev/mifi-ventures/landing.git",
     "packageManager": "pnpm@10.31.0+sha512.e3927388bfaa8078ceb79b748ffc1e8274e84d75163e67bc22e06c0d3aed43dd153151cbf11d7f8301ff4acb98c68bdc5cadf6989532801ffafe3b3e4a63c268",
@@ -12,11 +12,11 @@
         "dev": "vite dev",
         "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
         "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-        "format": "prettier --write \"src/**/*.{ts,js,svelte,css,json}\"",
+        "format": "prettier --write \"src/**/*.{ts,js,svelte,css,json}\" \"static/**/*.{css,html,js}\"",
         "lint": "eslint .",
         "lint:fix": "eslint . --fix",
-        "lint:css": "stylelint \"src/**/*.css\" \"src/**/*.svelte\"",
+        "lint:css": "stylelint \"src/**/*.css\" \"src/**/*.svelte\" \"static/**/*.css\"",
-        "lint:css:fix": "stylelint \"src/**/*.css\" \"src/**/*.svelte\" --fix",
+        "lint:css:fix": "stylelint \"src/**/*.css\" \"src/**/*.svelte\" \"static/**/*.css\" --fix",
         "preview": "serve dist -p 4173",
         "test": "vitest run",
         "test:unit": "vitest run",

src/app.css

@@ -131,6 +131,42 @@
     }
 }
 
+/* ========================================
+   Local Font Faces
+   ======================================== */
+
+@font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('/assets/fonts/inter-v20-latin-regular.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('/assets/fonts/inter-v20-latin-500.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('/assets/fonts/inter-v20-latin-700.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: Fraunces;
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('/assets/fonts/fraunces-v38-latin-600.woff2') format('woff2');
+}
+
 /* ========================================
    Base Styles
    ======================================== */
@@ -178,6 +214,11 @@ body {
     text-rendering: optimizeLegibility;
 }
 
+strong,
+b {
+    font-weight: var(--font-weight-bold);
+}
+
 /* ========================================
    Skip Link (Accessibility)
    ======================================== */

src/routes/+layout.svelte

@@ -47,13 +47,6 @@
         type="font/woff2"
         crossorigin="anonymous"
     />
-    <link
-        rel="preload"
-        href="/assets/fonts/fraunces-v38-latin-700.woff2"
-        as="font"
-        type="font/woff2"
-        crossorigin="anonymous"
-    />
     <link
         rel="preload"
         href="/assets/fonts/inter-v20-latin-regular.woff2"
@@ -61,13 +54,6 @@
         type="font/woff2"
         crossorigin="anonymous"
     />
-    <link
-        rel="preload"
-        href="/assets/fonts/inter-v20-latin-italic.woff2"
-        as="font"
-        type="font/woff2"
-        crossorigin="anonymous"
-    />
     <link
         rel="preload"
         href="/assets/fonts/inter-v20-latin-500.woff2"
@@ -75,13 +61,6 @@
         type="font/woff2"
         crossorigin="anonymous"
     />
-    <link
-        rel="preload"
-        href="/assets/fonts/inter-v20-latin-600.woff2"
-        as="font"
-        type="font/woff2"
-        crossorigin="anonymous"
-    />
     <link
         rel="preload"
         href="/assets/fonts/inter-v20-latin-700.woff2"

src/routes/privacy-policy/+page.svelte

@@ -50,7 +50,9 @@
                     <h2 id={`${section.id}-heading`}>{section.heading}</h2>
                     {#each section.body as para}
                         <p>
-                            {#if section.id === 'contact' && para === 'legal@mifi.ventures'}
+                            {#if section.id === 'contact' && para === 'mifi Ventures LLC'}
+                                <strong>{para}</strong>
+                            {:else if section.id === 'contact' && para === 'legal@mifi.ventures'}
                                 <a href="mailto:legal@mifi.ventures"
                                     >legal@mifi.ventures</a
                                 >

src/routes/terms-of-service/+page.svelte

@@ -28,7 +28,9 @@
                     <h2 id={`${section.id}-heading`}>{section.heading}</h2>
                     {#each section.body as para}
                         <p>
-                            {#if section.id === 'contact' && para === 'legal@mifi.ventures'}
+                            {#if section.id === 'contact' && para === 'mifi Ventures LLC'}
+                                <strong>{para}</strong>
+                            {:else if section.id === 'contact' && para === 'legal@mifi.ventures'}
                                 <a href="mailto:legal@mifi.ventures"
                                     >legal@mifi.ventures</a
                                 >

static/404.html

@@ -1,20 +1,24 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
+    <head>
-    <meta charset="utf-8">
+        <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>404 Not Found — mifi Ventures</title>
-    <meta name="theme-color" content="#0052cc" media="(prefers-color-scheme: light)">
+        <meta
-    <meta name="theme-color" content="#4da6ff" media="(prefers-color-scheme: dark)">
+            name="theme-color"
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+            content="#0052cc"
-    <link rel="stylesheet" href="/assets/error-pages.css">
+            media="(prefers-color-scheme: light)"
-</head>
+        />
-<body class="error-page">
+        <meta name="theme-color" content="#4da6ff" media="(prefers-color-scheme: dark)" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link rel="stylesheet" href="/assets/error-pages.css" />
+    </head>
+    <body class="error-page">
         <main>
             <div class="emoji" aria-hidden="true">🔍</div>
             <h1>404 Not Found</h1>
             <p>This page went off to find itself. We’re not sure it’s coming back.</p>
             <p><a href="/">Back to mifi Ventures →</a></p>
         </main>
-</body>
+    </body>
 </html>

static/410.html

@@ -1,20 +1,24 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
+    <head>
-    <meta charset="utf-8">
+        <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>410 Gone — mifi Ventures</title>
-    <meta name="theme-color" content="#0052cc" media="(prefers-color-scheme: light)">
+        <meta
-    <meta name="theme-color" content="#4da6ff" media="(prefers-color-scheme: dark)">
+            name="theme-color"
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+            content="#0052cc"
-    <link rel="stylesheet" href="/assets/error-pages.css">
+            media="(prefers-color-scheme: light)"
-</head>
+        />
-<body class="error-page">
+        <meta name="theme-color" content="#4da6ff" media="(prefers-color-scheme: dark)" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link rel="stylesheet" href="/assets/error-pages.css" />
+    </head>
+    <body class="error-page">
         <main>
             <div class="emoji" aria-hidden="true">👋</div>
             <h1>410 Gone</h1>
             <p>This page has left the building. We’ve moved on—and so should you.</p>
             <p><a href="/">Back to mifi Ventures →</a></p>
         </main>
-</body>
+    </body>
 </html>

static/assets/error-pages.css

@@ -32,22 +32,33 @@
 }
 
 /* Local fonts — same paths as +layout.svelte preloads */
+
 @font-face {
-    font-family: 'Inter';
+    font-family: Inter;
     font-style: normal;
     font-weight: 400;
     font-display: swap;
     src: url('/assets/fonts/inter-v20-latin-regular.woff2') format('woff2');
 }
+
 @font-face {
-    font-family: 'Inter';
+    font-family: Inter;
     font-style: normal;
     font-weight: 500;
     font-display: swap;
     src: url('/assets/fonts/inter-v20-latin-500.woff2') format('woff2');
 }
+
 @font-face {
-    font-family: 'Fraunces';
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('/assets/fonts/inter-v20-latin-700.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: Fraunces;
     font-style: normal;
     font-weight: 600;
     font-display: swap;
@@ -67,15 +78,18 @@
     color: var(--ep-text);
     background-color: var(--ep-bg-alt);
 }
+
 .error-page main {
     text-align: center;
     padding: 2rem 1.5rem;
     max-width: 28rem;
 }
+
 .error-page .emoji {
     font-size: 4rem;
     margin-bottom: 0.5rem;
 }
+
 .error-page h1 {
     font-family: var(--ep-font-heading);
     font-size: 2rem;
@@ -83,19 +97,23 @@
     margin: 0 0 0.75rem;
     color: var(--ep-text);
 }
+
 .error-page p {
     margin: 0 0 1.5rem;
     color: var(--ep-text-secondary);
 }
+
 .error-page a {
     color: var(--ep-primary);
     font-weight: 500;
     text-decoration: none;
 }
+
 .error-page a:hover {
     color: var(--ep-primary-hover);
     text-decoration: underline;
 }
+
 .error-page a:focus-visible {
     outline: 2px solid var(--ep-primary);
     outline-offset: 2px;

static/assets/js/cookie-consent.js

@@ -69,10 +69,7 @@
         try {
             var clarityScript = document.createElement('script');
             clarityScript.defer = true;
-            setScriptSrc(
+            setScriptSrc(clarityScript, 'https://www.clarity.ms/tag/vuo5q3yf79?ref=bwt');
-                clarityScript,
-                'https://www.clarity.ms/tag/vuo5q3yf79?ref=bwt',
-            );
             document.head.appendChild(clarityScript);
         } catch (e2) {
             console.error('Failed to load Microsoft Clarity', e2);
@@ -142,4 +139,3 @@
         init();
     }
 })();
-

static/assets/js/ga-init.js

@@ -1,8 +1,10 @@
 window.dataLayer = window.dataLayer || [];
-function gtag(){ window.dataLayer.push(arguments); }
+function gtag() {
+    window.dataLayer.push(arguments);
+}
 
-gtag("js", new Date());
+gtag('js', new Date());
-gtag("config", "G-36F29PDKRT", {
+gtag('config', 'G-36F29PDKRT', {
     // optional, but often helpful:
     anonymize_ip: true,
 });

static/assets/js/mobile-menu-helper.js

@@ -1,8 +1,7 @@
 const MOBILE_BREAKPOINT_PX = 768;
 
 /** All focusable elements inside the menu (links). */
-const getMenuFocusables = (menu) =>
+const getMenuFocusables = (menu) => menu.querySelectorAll('a[href]');
-    menu.querySelectorAll('a[href]');
 
 const mobileMenuHelper = () => {
     const mobileMenu = document.getElementById('nav-menu');
@@ -15,10 +14,7 @@ const mobileMenuHelper = () => {
     const syncMenuAriaHidden = () => {
         if (isMobile()) {
             const hidden = !mobileMenuToggle.checked;
-            mobileMenu.setAttribute(
+            mobileMenu.setAttribute('aria-hidden', hidden ? 'true' : 'false');
-                'aria-hidden',
-                hidden ? 'true' : 'false',
-            );
             // inert removes the subtree from the a11y tree and makes descendants non-focusable
             if (hidden) {
                 mobileMenu.setAttribute('inert', '');

static/assets/js/umami-helper.js

@@ -1,9 +1,6 @@
 // Umami: safe track (no-op if script blocked or not loaded)
 function umamiTrack(name, data) {
-    if (
+    if (typeof window.umami !== 'undefined' && typeof window.umami.track === 'function') {
-        typeof window.umami !== 'undefined' &&
-        typeof window.umami.track === 'function'
-    ) {
         if (data != null) window.umami.track(name, data);
         else window.umami.track(name);
     }

tests/unit/cookie-consent.test.ts

@@ -39,7 +39,6 @@ describe('cookie-consent.js', () => {
         dom = createBannerDOM();
 
         const code = readFileSync(SCRIPT_PATH, 'utf8');
-        // eslint-disable-next-line no-eval
         eval(code);
         document.dispatchEvent(new Event('DOMContentLoaded'));
     });
@@ -62,7 +61,6 @@ describe('cookie-consent.js', () => {
         const appendChildSpy = vi.spyOn(document.head, 'appendChild');
 
         const code = readFileSync(SCRIPT_PATH, 'utf8');
-        // eslint-disable-next-line no-eval
         eval(code);
         document.dispatchEvent(new Event('DOMContentLoaded'));
 
@@ -82,7 +80,6 @@ describe('cookie-consent.js', () => {
         const appendChildSpy = vi.spyOn(document.head, 'appendChild');
 
         const code = readFileSync(SCRIPT_PATH, 'utf8');
-        // eslint-disable-next-line no-eval
         eval(code);
         document.dispatchEvent(new Event('DOMContentLoaded'));