matefluency 1.0.0

package/dist/matefluency.css

@@ -0,0 +1,562 @@
+/*!
+ * MateFluency Design System v1.0.0
+ * EcoWestern Naturalism Design Language
+ * Copyright (c) 2026 EcoWestern. All rights reserved.
+ * https://ecowestern.net
+ *
+ * Proprietary license — free to use, no derivatives or redistribution.
+ * See LICENSE or https://ecowestern.net/matefluency/license for full terms.
+ */
+
+/**
+ * MateFluency Design System — Base Layer
+ *
+ * Foundational body styles, CSS custom properties (design tokens),
+ * resets, and the signature fractal noise texture.
+ */
+
+/* ─── Design Tokens ──────────────────────────── */
+
+:root {
+    /* Brand colors */
+    --mf-green: #086d00;
+    --mf-green-focus: #1db100;
+    --mf-green-hover: #065a00;
+
+    /* Neutrals */
+    --mf-ink: #1d1d1f;
+    --mf-text-2: #515154;
+    --mf-text-3: #6e6e73;
+    --mf-separator: #e8e8ed;
+    --mf-canvas: #f7f7f2;
+
+    /* Typography */
+    --mf-font: "Google Sans", system-ui, -apple-system, BlinkMacSystemFont,
+        "Segoe UI", Roboto, sans-serif;
+    --mf-font-mono: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+
+    /* Easing — "release" feel: fast start, very soft landing */
+    --mf-ease: cubic-bezier(0.25, 1, 0.5, 1);
+
+    /* Radius */
+    --mf-radius-organic: 2rem;
+
+    /* Noise texture (inline SVG — no external request needed) */
+    --mf-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
+    --mf-noise-surface: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+}
+
+/* ─── Document ──────────────────────────────── */
+
+html {
+    scroll-behavior: smooth;
+    box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: inherit;
+}
+
+/* ─── Body ───────────────────────────────────── */
+
+body {
+    font-family: var(--mf-font);
+    font-weight: 400;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    line-height: 1.6;
+    color: var(--mf-ink);
+    background-color: var(--mf-canvas);
+    background-image: var(--mf-noise);
+}
+
+/* ─── Focus & Accessibility ──────────────────── */
+
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible {
+    outline: 2px solid var(--mf-green-focus);
+    outline-offset: 2px;
+}
+
+button:focus,
+a:focus {
+    outline: 2px solid var(--mf-green-focus);
+    outline-offset: 2px;
+}
+
+/* ─── Resets ─────────────────────────────────── */
+
+code,
+pre,
+kbd,
+samp {
+    font-family: var(--mf-font-mono);
+}
+
+ul,
+ol {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+img,
+video,
+svg {
+    display: block;
+    max-width: 100%;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin: 0;
+    line-height: 1.1;
+}
+
+p {
+    margin: 0;
+}
+
+/**
+ * MateFluency Design System — Components Layer
+ *
+ * The core MateFluency surface system (.biodegradable),
+ * buttons, and geometry helpers. No Tailwind required —
+ * these are plain CSS classes that work in any framework.
+ */
+
+/* ─── Surfaces ───────────────────────────────── */
+
+/**
+ * .biodegradable
+ * The signature MateFluency surface. Frosted glass, but
+ * warmer and more grounded — like sunlight through paper.
+ *
+ * Usage: apply to any card, panel, navbar, or hero section.
+ */
+.biodegradable {
+    background-color: rgba(255, 255, 255, 0.82);
+    backdrop-filter: blur(32px) saturate(110%);
+    -webkit-backdrop-filter: blur(32px) saturate(110%);
+
+    border: 1px solid rgba(0, 0, 0, 0.04);
+    box-shadow:
+        0 2px 4px -1px rgba(0, 0, 0, 0.01),
+        inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+    /* Tactile physical edge */
+
+    transition: all 0.5s var(--mf-ease, cubic-bezier(0.25, 1, 0.5, 1));
+    position: relative;
+    overflow: hidden;
+    /* Clips the ::before noise overlay */
+}
+
+/* Physical texture overlay — layered fractal noise on every surface */
+.biodegradable::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: 0.02;
+    background-image: var(--mf-noise-surface,
+            url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"));
+    z-index: 0;
+}
+
+/* Ensure direct children sit above the texture overlay */
+.biodegradable>* {
+    position: relative;
+    z-index: 1;
+}
+
+.biodegradable:hover {
+    background-color: rgba(255, 255, 255, 0.9);
+    border-color: rgba(0, 0, 0, 0.08);
+    transform: translateY(-2px);
+}
+
+/**
+ * .biodegradable-dark
+ * Dark variant for sidebars, modals, and dark-mode surfaces.
+ */
+.biodegradable-dark {
+    background-color: rgba(29, 29, 31, 0.85);
+    backdrop-filter: blur(30px);
+    -webkit-backdrop-filter: blur(30px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: #ffffff;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.5s var(--mf-ease, cubic-bezier(0.25, 1, 0.5, 1));
+}
+
+.biodegradable-dark::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: 0.03;
+    background-image: var(--mf-noise-surface,
+            url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"));
+    z-index: 0;
+}
+
+.biodegradable-dark>* {
+    position: relative;
+    z-index: 1;
+}
+
+/* ─── Geometry ───────────────────────────────── */
+
+/**
+ * .rounded-organic
+ * The signature leaf-like corner radius (2rem).
+ * Pair with .biodegradable on every card and panel.
+ */
+.rounded-organic {
+    border-radius: var(--mf-radius-organic, 2rem);
+}
+
+/* ─── Buttons ────────────────────────────────── */
+
+/**
+ * .mate-button
+ * Base button styles. Always pair with a variant:
+ *   .mate-button-primary   — brand green CTA
+ *   .mate-button-secondary — neutral grey action
+ */
+.mate-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.625rem 1.5rem;
+    /* py-2.5 px-6 */
+    border-radius: 9999px;
+    /* pill shape */
+    font-size: 0.875rem;
+    /* text-sm */
+    font-weight: 600;
+    font-family: var(--mf-font, inherit);
+    border: none;
+    cursor: pointer;
+    text-decoration: none;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+}
+
+.mate-button-primary {
+    background-color: var(--mf-green, #086d00);
+    color: #ffffff;
+}
+
+.mate-button-primary:hover {
+    background-color: var(--mf-green-hover, #065a00);
+    transform: scale(1.02);
+}
+
+.mate-button-secondary {
+    background-color: #e5e7eb;
+    color: var(--mf-ink, #1d1d1f);
+}
+
+.mate-button-secondary:hover {
+    background-color: #d1d5db;
+    transform: scale(1.02);
+}
+
+/* ─── Accent Bar ─────────────────────────────── */
+
+/**
+ * .mate-accent-bar
+ * The animated green bar used on feature cards.
+ * Grows from 3rem → 6rem when a parent has .group:hover
+ * (Tailwind) OR when a parent has the .is-hovered class.
+ *
+ * For Tailwind v4 users: use group-hover:w-24 inline.
+ */
+.mate-accent-bar {
+    height: 0.375rem;
+    /* h-1.5 */
+    width: 3rem;
+    /* w-12 */
+    background-color: var(--mf-green, #086d00);
+    border-radius: 9999px;
+    transition: width 0.5s var(--mf-ease, cubic-bezier(0.25, 1, 0.5, 1));
+}
+
+/* Works when a parent container gains .is-hovered on mouseenter */
+.is-hovered .mate-accent-bar,
+:hover>.mate-accent-bar {
+    width: 6rem;
+    /* w-24 */
+}
+
+/**
+ * MateFluency Design System — Utilities & Motion Layer
+ *
+ * Animation keyframes, utility classes, and the full animation
+ * vocabulary used across the MateFluency design language.
+ */
+
+/* ─── Keyframes ──────────────────────────────── */
+
+@keyframes mf-fade-in-up {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes mf-scroll {
+    0% {
+        transform: translateX(0);
+    }
+
+    100% {
+        transform: translateX(-50%);
+    }
+}
+
+@keyframes mf-scroll-reverse {
+    0% {
+        transform: translateX(-50%);
+    }
+
+    100% {
+        transform: translateX(0);
+    }
+}
+
+@keyframes mf-blob {
+    0% {
+        transform: translate(0px, 0px) scale(1);
+    }
+
+    33% {
+        transform: translate(30px, -50px) scale(1.1);
+    }
+
+    66% {
+        transform: translate(-20px, 20px) scale(0.9);
+    }
+
+    100% {
+        transform: translate(0px, 0px) scale(1);
+    }
+}
+
+@keyframes mf-float {
+    0% {
+        transform: translateY(0px);
+    }
+
+    50% {
+        transform: translateY(-20px);
+    }
+
+    100% {
+        transform: translateY(0px);
+    }
+}
+
+@keyframes mf-breathe {
+
+    0%,
+    100% {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(1.05);
+    }
+}
+
+/* ─── Animation Utility Classes ──────────────── */
+
+/**
+ * .mf-animate-in
+ * Page-entry animation — fades content up from 20px.
+ * Apply to the first visible section on each page.
+ */
+.mf-animate-in {
+    animation: mf-fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+/**
+ * .mf-scroll  /  .mf-scroll-reverse
+ * Infinite marquee strip. Apply to TWO duplicate containers
+ * inside a parent with overflow: hidden; display: flex.
+ * Both children must have the same class to avoid a reset flash.
+ */
+.mf-scroll {
+    animation: mf-scroll 20s linear infinite;
+}
+
+.mf-scroll-reverse {
+    animation: mf-scroll-reverse 20s linear infinite;
+}
+
+/**
+ * .mf-blob
+ * Ambient background blob drift. Use on large blurred circles
+ * behind hero sections.
+ */
+.mf-blob {
+    animation: mf-blob 7s infinite;
+}
+
+/**
+ * .mf-float
+ * Slow vertical float. Great for illustration SVGs or product
+ * images in hero sections.
+ */
+.mf-float {
+    animation: mf-float 6s ease-in-out infinite;
+}
+
+/**
+ * .mf-breathe
+ * Subtle scale pulse. Use on ambient background shapes to make
+ * them feel alive.
+ */
+.mf-breathe {
+    animation: mf-breathe 4s ease-in-out infinite;
+}
+
+/* ─── Text Utilities ─────────────────────────── */
+
+/**
+ * .mf-text-balance
+ * Prevents awkward single-word last lines in headings.
+ * Especially useful on H1/H2 copy.
+ */
+.mf-text-balance {
+    text-wrap: balance;
+}
+
+/* ─── Layout Utilities ───────────────────────── */
+
+/**
+ * .mf-container
+ * The standard MateFluency page container.
+ * max-width: 72rem (1152px), centered, with responsive horizontal padding.
+ */
+.mf-container {
+    max-width: 72rem;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1.5rem;
+    /* px-6 */
+    padding-right: 1.5rem;
+}
+
+@media (min-width: 768px) {
+    .mf-container {
+        padding-left: 2.5rem;
+        /* md:px-10 */
+        padding-right: 2.5rem;
+    }
+}
+
+/* ─── Typography Presets ─────────────────────── */
+
+/**
+ * These classes mirror the canonical MateFluency type scale.
+ * You don't have to use them — they're provided as a convenience
+ * for non-Tailwind projects.
+ */
+
+.mf-eyebrow {
+    font-size: 0.65rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.3em;
+    color: var(--mf-green, #086d00);
+}
+
+@media (min-width: 768px) {
+    .mf-eyebrow {
+        font-size: 0.75rem;
+    }
+}
+
+.mf-h1 {
+    font-size: 2.25rem;
+    /* text-4xl */
+    font-weight: 800;
+    letter-spacing: -0.025em;
+    line-height: 1.05;
+    color: var(--mf-ink, #1d1d1f);
+    text-wrap: balance;
+}
+
+@media (min-width: 640px) {
+    .mf-h1 {
+        font-size: 3rem;
+    }
+}
+
+/* sm:text-5xl */
+@media (min-width: 768px) {
+    .mf-h1 {
+        font-size: 4.5rem;
+    }
+}
+
+/* md:text-7xl */
+
+.mf-h2 {
+    font-size: 1.875rem;
+    /* text-3xl */
+    font-weight: 700;
+    letter-spacing: -0.025em;
+    color: var(--mf-ink, #1d1d1f);
+}
+
+.mf-h3 {
+    font-size: 1.5rem;
+    /* text-2xl */
+    font-weight: 700;
+    color: var(--mf-ink, #1d1d1f);
+}
+
+.mf-body {
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 1.75;
+    color: var(--mf-text-2, #515154);
+    text-wrap: balance;
+}
+
+@media (min-width: 768px) {
+    .mf-body {
+        font-size: 1.25rem;
+        /* md:text-xl */
+    }
+}
+
+.mf-meta {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--mf-text-3, #6e6e73);
+}

package/dist/tailwind.css

@@ -0,0 +1,18 @@
+/*!
+ * MateFluency — Tailwind CSS v4 Add-on v1.0.0
+ * Import this file in your globals.css (before or after @import "tailwindcss")
+ */
+
+@import "./matefluency.css";
+
+@theme {
+  --font-sans:    var(--mf-font);
+  --font-display: var(--mf-font);
+
+  --animate-scroll:         mf-scroll 20s linear infinite;
+  --animate-scroll-reverse: mf-scroll-reverse 20s linear infinite;
+  --animate-blob:           mf-blob 7s infinite;
+  --animate-float:          mf-float 6s ease-in-out infinite;
+  --animate-breathe:        mf-breathe 4s ease-in-out infinite;
+  --animate-in-up:          mf-fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}