npm - ferst-core - Versions diffs - 0.1.0 - Mend

ferst-core 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/LICENSE +201 -0
package/NOTICE +12 -0
package/README.md +73 -0
package/components/Button.astro +208 -0
package/components/Card.astro +59 -0
package/components/CookiePreferences.astro +232 -0
package/components/DocLayout.astro +292 -0
package/components/GroupCard.astro +164 -0
package/components/LatestPostList.astro +64 -0
package/components/PaginationNav.astro +81 -0
package/components/PostCard.astro +262 -0
package/components/PostsToolbar.astro +83 -0
package/components/SecondaryLogo.astro +63 -0
package/components/SiteFooter.astro +245 -0
package/components/SiteHeader.astro +1130 -0
package/content/collections.ts +40 -0
package/content/filters.ts +107 -0
package/content/schemas.ts +210 -0
package/layouts/Base.astro +414 -0
package/lib/mailLinks.ts +13 -0
package/lib/mapsLink.ts +7 -0
package/lib/siteSettings.ts +78 -0
package/package.json +48 -0
package/styles/fonts.css +76 -0
package/styles/theme.css +90 -0
package/utils/excerpt.ts +56 -0
package/utils/formatDate.ts +22 -0
package/utils/freshness.ts +5 -0
package/utils/scrollReveal.ts +40 -0

package/layouts/Base.astro ADDED Viewed

@@ -0,0 +1,414 @@
+---
+/**
+ * Shared page chrome. After the refactor this file is a thin wrapper:
+ * <head>, the early-paint theme script, and three composed components —
+ * <SiteHeader />, <SiteFooter />, <CookiePreferences />. Everything brand-specific
+ * (brand name, navbar links, footer links, the Facebook URL, the
+ * contact email) is read from the `siteSettings` collection so a single
+ * JSON edit propagates to every page that uses this layout.
+ *
+ * No general "essential cookies" notice: this site sets no cookies of its
+ * own (see /cookie-policy/), so there's nothing to ask consent for — a
+ * one-button "Got it" banner would be pure FYI, not a real decision, and
+ * it duplicated the one place there IS a real decision (the Google
+ * Calendar embed's own consent gate, /calendar/). <CookiePreferences />
+ * — opened from the footer — is that one real choice.
+ *
+ * Pages opt in to the secondary-logo footer block with `<Base showSecondaryLogo>`
+ * instead of importing `<SecondaryLogo />` themselves — fewer imports,
+ * fewer placement decisions, same visual outcome.
+ */
+import '../styles/theme.css';
+import '../styles/fonts.css';
+import SiteHeader from '../components/SiteHeader.astro';
+import SiteFooter from '../components/SiteFooter.astro';
+import CookiePreferences from '../components/CookiePreferences.astro';
+import SecondaryLogo from '../components/SecondaryLogo.astro';
+import { loadSiteSettings } from '../lib/siteSettings';
+interface Props {
+  title: string;
+  description?: string;
+  heroImage?: string;
+  headerClass?: string;
+  mainClass?: string;
+  footerClass?: string;
+  /** Render the secondary logo centred at the bottom of the page content. */
+  showSecondaryLogo?: boolean;
+}
+const {
+  title,
+  description,
+  heroImage,
+  headerClass,
+  mainClass,
+  footerClass,
+  showSecondaryLogo = false,
+} = Astro.props;
+const settings = await loadSiteSettings();
+const { identity, contact, navigation, theme } = settings;
+const path = Astro.url.pathname;
+// Client design-token overrides → an inline <style> that layers over the
+// core's neutral defaults (styles/theme.css). Selectors are doubled
+// (`:root:root`, `:root[data-theme="dark"]`) so they win by specificity
+// regardless of stylesheet order. Keys are sanitised to `--custom-prop`
+// form and values that could break out of the declaration are dropped —
+// the source is trusted repo JSON, but this keeps a stray value honest.
+function tokenBlock(selector: string, tokens: Record<string, string>): string {
+  const decls = Object.entries(tokens ?? {})
+    .filter(([k, v]) => /^--?[a-zA-Z0-9-]+$/.test(k) && !/[<>{};]/.test(String(v)))
+    .map(([k, v]) => `${k.startsWith('--') ? k : `--${k}`}:${String(v).trim()}`)
+    .join(';');
+  return decls ? `${selector}{${decls}}` : '';
+}
+const themeCss = [
+  tokenBlock(':root:root', theme.light),
+  tokenBlock(':root[data-theme="dark"]', theme.dark),
+]
+  .filter(Boolean)
+  .join('');
+// Logos: schema marks them optional so legacy data files keep validating.
+// Fall back to paths that exist under `public/uploads/` in this repo (there is
+// no `uploads/branding/` tree — using it here caused broken images whenever
+// JSON omitted the keys or site settings fell back to schema defaults).
+const primaryLogoLight = settings.primaryLogoLight ?? '/uploads/logo-light.png';
+const primaryLogoDark = settings.primaryLogoDark ?? '/uploads/logo-dark.png';
+const secondaryLogoLight = settings.secondaryLogoLight;
+const secondaryLogoDark = settings.secondaryLogoDark;
+const secondaryLogoLink = settings.secondaryLogoLink;
+const brandAlt = [identity.shortName, identity.location].filter(Boolean).join(', ');
+const metaDescription = description ?? identity.description;
+---
+<!doctype html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <slot name="head" />
+    <meta name="description" content={metaDescription} />
+    <title>{title} — {identity.siteTitle}</title>
+    {themeCss && <style is:inline set:html={themeCss} />}
+    <!-- Self-hosted (see src/styles/fonts.css) — h1 (Poppins 700) and body copy
+         (Inter 400) are what virtually every page needs at first paint. -->
+    <link rel="preload" as="font" type="font/woff2" href="/fonts/poppins-latin-700-normal.woff2" crossorigin />
+    <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-latin-400-normal.woff2" crossorigin />
+    {heroImage && <link rel="preload" as="image" href={heroImage} />}
+    <!--
+      Early-paint theme detection: localStorage override → system preference.
+      Must be inline + run before <body> paints, otherwise dark-mode users see
+      a light-mode flash. Also preloads the correct brand logo for that theme.
+    -->
+    <script is:inline define:vars={{ primaryLogoDark, primaryLogoLight }}>
+      (function () {
+        var source = localStorage.getItem('theme-source');
+        var saved = localStorage.getItem('theme');
+        var t;
+        if (source === 'user' && (saved === 'light' || saved === 'dark')) {
+          t = saved;
+        } else {
+          t = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+        document.documentElement.dataset.theme = t;
+        var logoHref = t === 'dark' ? primaryLogoDark : primaryLogoLight;
+        var link = document.createElement('link');
+        link.rel = 'preload';
+        link.as = 'image';
+        link.href = logoHref;
+        document.head.appendChild(link);
+      })();
+    </script>
+    <script>
+      // Pages that opt into Astro's <ClientRouter /> (currently /posts/)
+      // swap <html>'s attributes to match the newly-fetched document by
+      // default. Since dark/light mode is only ever set client-side above
+      // (never baked into the server-rendered HTML, which doesn't know the
+      // visitor's localStorage), that wipe resets data-theme on every
+      // transition — the whole page flips back to light mode after every
+      // filter click. Carry the current theme over before the swap applies.
+      import type { TransitionBeforeSwapEvent } from 'astro:transitions/client';
+      document.addEventListener('astro:before-swap', ((event: TransitionBeforeSwapEvent) => {
+        const theme = document.documentElement.dataset.theme;
+        if (theme) {
+          event.newDocument.documentElement.dataset.theme = theme;
+        }
+      }) as EventListener);
+    </script>
+  </head>
+  <body>
+    <SiteHeader
+      path={path}
+      headerClass={headerClass}
+      primaryLogoLight={primaryLogoLight}
+      primaryLogoDark={primaryLogoDark}
+      brandAlt={brandAlt}
+      primaryNav={navigation.primary}
+      dropdown={navigation.dropdown}
+    />
+    <main class:list={['site-main', mainClass]}>
+      <slot name="hero" />
+      <slot />
+      {showSecondaryLogo && (secondaryLogoLight || secondaryLogoDark) && (
+        <SecondaryLogo logoLight={secondaryLogoLight} logoDark={secondaryLogoDark} link={secondaryLogoLink} />
+      )}
+    </main>
+    <SiteFooter
+      facebookUrl={contact.facebookUrl}
+      footerLinks={navigation.footer}
+      footerClass={footerClass}
+      shortName={identity.shortName}
+      tagline={identity.description}
+    />
+    <CookiePreferences />
+    <style is:global>
+      /* ── Global resets & typography ─────────────────────────────────────
+         Anything that affects every page's body / typography / article
+         content lives here. Header, footer, and cookie banner each own
+         their own <style is:global> in their component file. Theme tokens
+         (`:root`, `[data-theme=dark]`) come from styles/theme.css and are
+         overridable per-client via the themeSettings collection. Every
+         colour below reads a token, so light/dark and any client palette
+         all flow from the same variables — no per-mode hex overrides here.
+      */
+      * { box-sizing: border-box; }
+      html, body { margin: 0; padding: 0; }
+      html {
+        height: 100%;
+        overflow-x: clip;
+        overscroll-behavior-x: none;
+      }
+      body {
+        font-family: 'Inter', 'Lato', Georgia, serif;
+        color: var(--fg);
+        background: var(--bg);
+        line-height: 1.6;
+        min-height: 100%;
+        display: flex;
+        flex-direction: column;
+        overflow-x: clip;
+        overscroll-behavior-x: none;
+      }
+      h1, h2, h3, h4 {
+        font-family: 'Playfair Display', Georgia, serif;
+      }
+      h1 {
+        font-family: 'Poppins', sans-serif;
+        color: var(--fg);
+        font-size: clamp(2rem, 0.95rem + 4.5vw, 3.35rem);
+        font-weight: 700;
+        line-height: 1.34;
+        letter-spacing: -0.01em;
+        margin: 0;
+      }
+      .site-main h1 {
+        text-align: center;
+      }
+      h2 {
+        font-family: 'Playfair Display', Georgia, serif;
+        color: var(--fg);
+        font-size: clamp(1.75rem, 1.45rem + 1vw, 2.25rem);
+        line-height: 1.3;
+        margin: 0;
+        text-align: center;
+      }
+      h3 {
+        font-family: 'Poppins', sans-serif;
+        color: var(--fg);
+        font-size: clamp(1.375rem, 1.2rem + 0.55vw, 1.625rem);
+        font-weight: 600;
+        line-height: 1.35;
+        margin: 0;
+      }
+      h4 {
+        font-family: 'Poppins', sans-serif;
+        color: var(--accent);
+        font-size: clamp(0.6875rem, 0.9vw, 0.75rem);
+        font-weight: 500;
+        letter-spacing: 0.2em;
+        text-transform: uppercase;
+        margin: 0;
+      }
+      p, li {
+        font-family: 'Inter', sans-serif;
+        color: var(--muted);
+        font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
+        font-weight: 400;
+        line-height: 1.65;
+        margin: 0;
+      }
+      time {
+        color: var(--muted);
+        font-size: clamp(0.7rem, 0.62rem + 0.25vw, 0.8rem);
+        letter-spacing: 0.04em;
+      }
+      /* ── Typography utility classes (mobile-first, fluid via clamp).
+         Apply explicitly to elements: .t-h1/.t-h2/.t-h3 for headings,
+         .t-body for body copy, .t-lead for intro paragraphs, .t-meta for small/meta text.
+         Mobile baseline matches iOS Human Interface Guidelines (Dynamic Type, "Large").
+         Large Title 34 / Title1 28 / Title2 22 / Title3 ~22px mobile → max 26px / Body 17 / Footnote 13. */
+      .t-h1 {
+        font-size: clamp(2.125rem, 1.6rem + 1.75vw, 3rem);
+        line-height: 1.2;
+      }
+      .t-h2 {
+        font-size: clamp(1.75rem, 1.45rem + 1vw, 2.25rem);
+        line-height: 1.3;
+        margin: 0;
+      }
+      .t-h3 {
+        font-size: var(--type-h3-size);
+        line-height: 1.35;
+        margin: 0;
+      }
+      .t-body {
+        font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
+        line-height: 1.65;
+      }
+      .t-lead {
+        font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
+        line-height: 1.7;
+      }
+      .t-meta {
+        font-size: clamp(0.8125rem, 0.76rem + 0.18vw, 0.9375rem);
+        line-height: 1.5;
+      }
+      /* Reveal-on-scroll utility — paired with the `armReveal()` helper in
+         src/utils/scrollReveal.ts. An element only gets hidden once JS adds
+         .js-reveal, so it stays fully visible with no JS or under
+         prefers-reduced-motion. Global (not page-scoped) since it's shared
+         by the homepage and the /posts/ listing. */
+      .js-reveal {
+        opacity: 0;
+        transform: translateY(16px);
+        transition: opacity 0.6s ease, transform 0.6s ease;
+      }
+      .js-reveal.is-visible {
+        opacity: 1;
+        transform: none;
+      }
+      /* Optimal reading measure for long-form article content. Below this
+         breakpoint the viewport itself is already narrower than 65ch, so
+         the cap only needs to do work on wider (tablet/desktop) screens. */
+      article :where(p, ul, ol, blockquote, h2, h3, h4) {
+        max-width: 65ch;
+      }
+      @media (max-width: 47.9375em) {
+        article :where(p, ul, ol, blockquote, h2, h3, h4) {
+          max-width: none;
+        }
+      }
+      article :where(img, picture, video, table, figure, iframe) {
+        max-width: 100%;
+      }
+      article img:not(.group-card__img) {
+        display: block;
+        margin: 1.5rem auto;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+      }
+      @media (min-width: 44em) {
+        article img:not(.group-card__img) {
+          border-radius: 12px;
+        }
+      }
+      a {
+        font-family: 'Inter', sans-serif;
+        font-size: clamp(0.875rem, 0.82rem + 0.25vw, 1rem);
+        font-weight: 600;
+        color: var(--accent);
+        text-decoration: none;
+        transition: color 0.2s ease;
+      }
+      h1 a, h2 a, h3 a, h4 a {
+        font-size: inherit;
+        font-family: inherit;
+        font-weight: inherit;
+        line-height: inherit;
+      }
+      /* ── Fluid media: never overflow container ── */
+      img:not(.group-card__img):not(.primary-logo), picture, video {
+        max-width: 100%;
+        height: auto;
+      }
+      .group-card__img {
+        max-width: 100%;
+        height: auto;
+      }
+      .site-main {
+        flex: 1;
+        min-width: 0;
+        width: min(100%, 72rem);
+        max-width: 72rem;
+        margin-inline: auto;
+        padding-inline: clamp(1rem, 3vw, 2.5rem);
+      }
+      .site-main {
+        display: flex;
+        flex-direction: column;
+        gap: clamp(2rem, 4vw, 3rem);
+        padding-block: clamp(3rem, 6vw, 5rem);
+      }
+      .site-main > * {
+        margin-block: 0;
+      }
+      /* ── Secondary logo block: centered ── */
+      .secondary-logo {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        box-sizing: border-box;
+      }
+      .secondary-logo__img {
+        display: block;
+        max-width: min(150px, 100%);
+        height: auto;
+      }
+      html:not([data-theme='dark']) .secondary-logo__img {
+        opacity: 0.85;
+        mix-blend-mode: multiply;
+      }
+      html[data-theme='dark'] .secondary-logo__img {
+        mix-blend-mode: normal;
+        opacity: 1;
+        filter: var(--secondary-logo-filter);
+      }
+      @media (max-width: 22.5em) {
+        .site-main { padding-inline: 1rem; }
+      }
+    </style>
+    <script is:inline>
+      // Remove the "New" flag from posts older than 3 days. Inline so it
+      // runs as soon as it's parsed (before LCP), without an extra request.
+      (function () {
+        var WINDOW = 3 * 24 * 60 * 60 * 1000;
+        var now = Date.now();
+        document.querySelectorAll('.new-flag[data-fresh-since]').forEach(function (el) {
+          var ts = Date.parse(el.getAttribute('data-fresh-since') || '');
+          if (!isNaN(ts) && now - ts >= WINDOW) el.remove();
+        });
+      })();
+    </script>
+  </body>
+</html>

package/lib/mailLinks.ts ADDED Viewed

@@ -0,0 +1,13 @@
+/**
+ * Build a single well-formed mailto URI for use in `<a href>`.
+ * Strips duplicated `mailto:` prefixes (CMS / paste errors) without
+ * rewriting valid `?subject=` / `&body=` query pairs on the remainder.
+ */
+export function normalizeMailtoHref(raw: string): string {
+  let s = raw.trim();
+  while (s.toLowerCase().startsWith('mailto:')) {
+    s = s.slice(7).trimStart();
+  }
+  if (!s) return '';
+  return `mailto:${s}`;
+}

package/lib/mapsLink.ts ADDED Viewed

@@ -0,0 +1,7 @@
+/**
+ * Free-form maps query → real URL. encodeURIComponent for safety; the live
+ * site has historically used `+` for spaces — both are equivalent to Google.
+ */
+export function mapsLink(query: string): string {
+  return `https://maps.google.com/?q=${encodeURIComponent(query)}`;
+}

package/lib/siteSettings.ts ADDED Viewed

@@ -0,0 +1,78 @@
+/**
+ * Single accessor merging all the site-settings content entries into one
+ * combined object.
+ *
+ * Storage is split across several small collections (identity+contact,
+ * logos, posts, calendar, navbar, footer) so each is also its own focused
+ * Sveltia CMS pane instead of one long mixed-purpose form — see
+ * `src/content/schemas.ts`. Every existing consumer (`Base.astro`,
+ * `/calendar/`, `/contact/`, `/`) reads a single combined shape though, so
+ * this loader re-assembles that shape (including the `navigation.primary`
+ * / `navigation.footer` grouping, even though navbar and footer links now
+ * live in two separate collections) at read time — the only place that
+ * needs to know the storage is split.
+ *
+ * `getEntry(...)` yields `data` typed per-collection when the entry exists,
+ * but the content runtime does not always apply nested Zod defaults the same
+ * way a plain `schema.parse()` does. We always re-parse each entry's data
+ * through its own schema so nested defaults (`identity`, `contact`,
+ * `secondaryLogoLink`) are fully populated, including when a file is missing.
+ */
+import { getEntry } from 'astro:content';
+import {
+  calendarSettingsSchema,
+  footerSettingsSchema,
+  logoSettingsSchema,
+  navbarSettingsSchema,
+  postsSettingsSchema,
+  siteSettingsSchema,
+  themeSettingsSchema,
+  type CalendarSettings,
+  type LogoSettings,
+  type NavLink,
+  type NavGroup,
+  type PostsSettings,
+  type SiteSettings,
+  type ThemeSettings,
+} from '../content/schemas';
+export type LoadedSiteSettings = SiteSettings &
+  LogoSettings &
+  PostsSettings &
+  CalendarSettings & {
+    navigation: { primary: NavLink[]; footer: NavLink[]; dropdown?: NavGroup };
+    /** Client-provided design-token overrides (empty objects if none). */
+    theme: ThemeSettings;
+  };
+let cached: LoadedSiteSettings | null = null;
+export async function loadSiteSettings(): Promise<LoadedSiteSettings> {
+  if (cached) return cached;
+  const [siteSettingsEntry, logoEntry, postsEntry, calendarEntry, navbarEntry, footerEntry, themeEntry] =
+    await Promise.all([
+      getEntry('siteSettings', 'index'),
+      getEntry('logoSettings', 'index'),
+      getEntry('postsSettings', 'index'),
+      getEntry('calendarSettings', 'index'),
+      getEntry('navbarSettings', 'index'),
+      getEntry('footerSettings', 'index'),
+      getEntry('themeSettings', 'index'),
+    ]);
+  cached = {
+    ...siteSettingsSchema.parse(siteSettingsEntry?.data ?? {}),
+    ...logoSettingsSchema.parse(logoEntry?.data ?? {}),
+    ...postsSettingsSchema.parse(postsEntry?.data ?? {}),
+    ...calendarSettingsSchema.parse(calendarEntry?.data ?? {}),
+    navigation: {
+      primary: navbarSettingsSchema.parse(navbarEntry?.data ?? {}).primary,
+      footer: footerSettingsSchema.parse(footerEntry?.data ?? {}).footer,
+      dropdown: navbarSettingsSchema.parse(navbarEntry?.data ?? {}).dropdown,
+    },
+    theme: themeSettingsSchema.parse(themeEntry?.data ?? {}),
+  };
+  return cached;
+}

package/package.json ADDED Viewed

@@ -0,0 +1,48 @@
+{
+  "name": "ferst-core",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Ferst Core — the shared, brand-agnostic client-site system: Astro components, layouts, content schemas, the layered config resolver, and a neutral styling architecture that every client overrides.",
+  "license": "Apache-2.0",
+  "author": "MyAI4 Ltd (https://ferst.co.uk)",
+  "homepage": "https://ferst.co.uk",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MyAI4WebDev/myai4-ferst-core.git",
+    "directory": "packages/core"
+  },
+  "bugs": {
+    "url": "https://github.com/MyAI4WebDev/myai4-ferst-core/issues"
+  },
+  "keywords": [
+    "astro",
+    "astro-component",
+    "cms",
+    "sveltia",
+    "website",
+    "design-tokens",
+    "ferst"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "components",
+    "layouts",
+    "content",
+    "lib",
+    "utils",
+    "styles",
+    "README.md",
+    "NOTICE"
+  ],
+  "dependencies": {
+    "zod": "^3.25.0"
+  },
+  "peerDependencies": {
+    "astro": "^5.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/styles/fonts.css ADDED Viewed

@@ -0,0 +1,76 @@
+/* Self-hosted fonts — see scripts/setup-fonts.mjs for how public/fonts/ gets
+   populated (from @fontsource, regenerated on `npm install`, gitignored).
+   Loaded same-origin instead of from fonts.googleapis.com/fonts.gstatic.com
+   so visiting this site no longer sends every visitor's IP to Google on
+   every page (see /cookie-policy/). Latin subset, normal style only —
+   every weight below is one actually referenced somewhere in src/; no
+   unicode-range needed since each file ships exactly one subset.
+   Inter, Playfair Display, and Poppins are all SIL Open Font License 1.1 —
+   self-hosting/redistribution is explicitly permitted. */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/inter-latin-400-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('/fonts/inter-latin-500-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('/fonts/inter-latin-600-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('/fonts/playfair-display-latin-700-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('/fonts/poppins-latin-300-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/poppins-latin-400-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('/fonts/poppins-latin-500-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('/fonts/poppins-latin-600-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('/fonts/poppins-latin-700-normal.woff2') format('woff2');
+}