matefluency 1.0.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.
- package/LICENSE +78 -0
- package/README.md +219 -0
- package/dist/base.css +132 -0
- package/dist/components.css +184 -0
- package/dist/matefluency.css +562 -0
- package/dist/tailwind.css +18 -0
- package/dist/utilities.css +264 -0
- package/index.js +43 -0
- package/package.json +38 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
MATEFLUENCY DESIGN SYSTEM LICENSE
|
|
2
|
+
Version 1.0 — March 2026
|
|
3
|
+
Copyright (c) 2026 EcoWestern. All rights reserved.
|
|
4
|
+
|
|
5
|
+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
6
|
+
|
|
7
|
+
GRANT OF USE
|
|
8
|
+
|
|
9
|
+
EcoWestern ("Licensor") grants you ("Licensee") a worldwide,
|
|
10
|
+
royalty-free, non-exclusive, non-transferable license to USE
|
|
11
|
+
the MateFluency Design System (the "Software") in personal and
|
|
12
|
+
commercial projects, subject to the restrictions below.
|
|
13
|
+
|
|
14
|
+
"Use" means importing the compiled CSS or JavaScript files of
|
|
15
|
+
this package into a project, applying the provided CSS classes
|
|
16
|
+
and custom properties in your HTML or stylesheets, and
|
|
17
|
+
overriding CSS custom properties (design tokens such as color
|
|
18
|
+
variables, spacing, and radius values) within your own
|
|
19
|
+
stylesheets to adapt the visual output to your brand. This
|
|
20
|
+
kind of customization is explicitly permitted and encouraged.
|
|
21
|
+
|
|
22
|
+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
23
|
+
|
|
24
|
+
RESTRICTIONS
|
|
25
|
+
|
|
26
|
+
You may NOT, without prior written permission from EcoWestern:
|
|
27
|
+
|
|
28
|
+
1. MODIFY OR DERIVE. Alter, adapt, translate, reverse-engineer,
|
|
29
|
+
decompile, or create derivative works based on the source
|
|
30
|
+
CSS, JavaScript, or any design artifact of the Software.
|
|
31
|
+
This includes changing class names, restructuring the layer
|
|
32
|
+
architecture, altering keyframe logic, or repurposing the
|
|
33
|
+
core design language as a base for a separate design system.
|
|
34
|
+
|
|
35
|
+
2. REDISTRIBUTE. Distribute, sublicense, rent, sell, or
|
|
36
|
+
otherwise transfer copies of the Software or any modified
|
|
37
|
+
version of it, whether as a standalone package, bundled
|
|
38
|
+
product, or as part of a larger framework or toolkit.
|
|
39
|
+
|
|
40
|
+
3. REBRAND. Remove or alter any attribution, copyright notice,
|
|
41
|
+
or branding identifying MateFluency or EcoWestern as the
|
|
42
|
+
origin of the Software.
|
|
43
|
+
|
|
44
|
+
4. CLAIM OWNERSHIP. Present the Software, or any substantial
|
|
45
|
+
portion of its design language, visual identity, or
|
|
46
|
+
implementation, as your own original work.
|
|
47
|
+
|
|
48
|
+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
49
|
+
|
|
50
|
+
ATTRIBUTION
|
|
51
|
+
|
|
52
|
+
Any project that uses the Software must include, in an
|
|
53
|
+
accessible location (such as a README, credits page, or
|
|
54
|
+
package acknowledgment), the following notice:
|
|
55
|
+
|
|
56
|
+
"This project uses MateFluency, the Naturalism design
|
|
57
|
+
system by EcoWestern (https://ecowestern.net)."
|
|
58
|
+
|
|
59
|
+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
60
|
+
|
|
61
|
+
NO WARRANTY
|
|
62
|
+
|
|
63
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
64
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO WARRANTIES OF
|
|
65
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND
|
|
66
|
+
NON-INFRINGEMENT. IN NO EVENT SHALL ECOWESTERN BE LIABLE FOR
|
|
67
|
+
ANY CLAIM, DAMAGES, OR OTHER LIABILITY ARISING FROM THE USE
|
|
68
|
+
OF THE SOFTWARE.
|
|
69
|
+
|
|
70
|
+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
71
|
+
|
|
72
|
+
CONTACT
|
|
73
|
+
|
|
74
|
+
For licensing inquiries, partnership requests, or written
|
|
75
|
+
permission to use the Software outside the scope of this
|
|
76
|
+
license, contact: hello@ecowestern.net
|
|
77
|
+
|
|
78
|
+
https://ecowestern.net
|
package/README.md
ADDED
|
@@ -0,0 +1,219 @@
|
|
|
1
|
+
# MateFluency
|
|
2
|
+
|
|
3
|
+
> **The EcoWestern Naturalism Design System** — organic surfaces, soft textures, and weighted motion for the modern web.
|
|
4
|
+
|
|
5
|
+
MateFluency is a CSS design language built around **Naturalism**: the idea that digital interfaces should feel physical, calm, and organic. It draws on paper textures, soft light diffusion, and weighted motion to remove the "sterile" feeling of flat, modern UIs.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install matefluency
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
## Usage
|
|
18
|
+
|
|
19
|
+
### Option A — Vanilla CSS / Any Framework
|
|
20
|
+
|
|
21
|
+
Import the full bundle in your root CSS file:
|
|
22
|
+
|
|
23
|
+
```css
|
|
24
|
+
@import "matefluency";
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Or import only what you need:
|
|
28
|
+
|
|
29
|
+
```css
|
|
30
|
+
@import "matefluency/css"; /* same as above — full bundle */
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
Or in JavaScript/TypeScript (Vite, Next.js, etc.):
|
|
34
|
+
|
|
35
|
+
```js
|
|
36
|
+
import "matefluency/css";
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### Option B — Tailwind CSS v4
|
|
40
|
+
|
|
41
|
+
Import the Tailwind add-on. This includes the full bundle **plus** registers all MateFluency animation tokens into `@theme` so you can use `animate-scroll`, `animate-blob`, etc. in your markup.
|
|
42
|
+
|
|
43
|
+
```css
|
|
44
|
+
/* globals.css */
|
|
45
|
+
@import "matefluency/css"; /* ← must come before tailwindcss */
|
|
46
|
+
@import "tailwindcss";
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
Or if you want the `@theme` tokens registered automatically:
|
|
50
|
+
|
|
51
|
+
```css
|
|
52
|
+
/* globals.css */
|
|
53
|
+
@import "matefluency/tailwind";
|
|
54
|
+
@import "tailwindcss";
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
---
|
|
58
|
+
|
|
59
|
+
## What's Included
|
|
60
|
+
|
|
61
|
+
| Layer | File | What it does |
|
|
62
|
+
|---|---|---|
|
|
63
|
+
| **Base** | `dist/base.css` | Design tokens (CSS variables), body styles, fractal noise texture, resets |
|
|
64
|
+
| **Components** | `dist/components.css` | `.biodegradable` surface system, `.mate-button`, `.rounded-organic` |
|
|
65
|
+
| **Utilities** | `dist/utilities.css` | Animation keyframes + classes, layout helpers, typography presets |
|
|
66
|
+
| **Tailwind add-on** | `dist/tailwind.css` | Registers tokens into `@theme` for Tailwind v4 |
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
## Design Tokens
|
|
71
|
+
|
|
72
|
+
All tokens are available as CSS custom properties on `:root`:
|
|
73
|
+
|
|
74
|
+
```css
|
|
75
|
+
var(--mf-green) /* #086d00 — brand green */
|
|
76
|
+
var(--mf-green-focus) /* #1db100 — focus ring */
|
|
77
|
+
var(--mf-green-hover) /* #065a00 — button hover */
|
|
78
|
+
var(--mf-ink) /* #1d1d1f — primary text */
|
|
79
|
+
var(--mf-text-2) /* #515154 — secondary text */
|
|
80
|
+
var(--mf-text-3) /* #6e6e73 — tertiary / metadata */
|
|
81
|
+
var(--mf-separator) /* #e8e8ed */
|
|
82
|
+
var(--mf-canvas) /* #f7f7f2 — page background (warm off-white) */
|
|
83
|
+
var(--mf-font) /* "Google Sans", system-ui, ... */
|
|
84
|
+
var(--mf-ease) /* cubic-bezier(0.25, 1, 0.5, 1) — "release" easing */
|
|
85
|
+
var(--mf-radius-organic)/* 2rem */
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
Tokens are also exported as JavaScript from the package entry point:
|
|
89
|
+
|
|
90
|
+
```js
|
|
91
|
+
import { tokens } from "matefluency";
|
|
92
|
+
// tokens.colors.green → "#086d00"
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
---
|
|
96
|
+
|
|
97
|
+
## Core Components
|
|
98
|
+
|
|
99
|
+
### `.biodegradable` — The MateFluency Surface
|
|
100
|
+
|
|
101
|
+
The signature component. Used for every card, panel, navbar, and hero section. Frosted glass, but warmer and more grounded.
|
|
102
|
+
|
|
103
|
+
```html
|
|
104
|
+
<div class="biodegradable rounded-organic">
|
|
105
|
+
<!-- content -->
|
|
106
|
+
</div>
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### `.biodegradable-dark`
|
|
110
|
+
|
|
111
|
+
Dark variant for sidebars, modals, and dark-mode surfaces.
|
|
112
|
+
|
|
113
|
+
```html
|
|
114
|
+
<div class="biodegradable-dark rounded-organic">
|
|
115
|
+
<!-- content -->
|
|
116
|
+
</div>
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
### `.mate-button`
|
|
120
|
+
|
|
121
|
+
Always pair with a variant class:
|
|
122
|
+
|
|
123
|
+
```html
|
|
124
|
+
<!-- Primary CTA — brand green -->
|
|
125
|
+
<button class="mate-button mate-button-primary">Get Started</button>
|
|
126
|
+
|
|
127
|
+
<!-- Secondary action — neutral grey -->
|
|
128
|
+
<button class="mate-button mate-button-secondary">Learn More</button>
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
---
|
|
132
|
+
|
|
133
|
+
## Animation Classes
|
|
134
|
+
|
|
135
|
+
| Class | Effect |
|
|
136
|
+
|---|---|
|
|
137
|
+
| `.mf-animate-in` | Fade up from 20px on page load |
|
|
138
|
+
| `.mf-scroll` | Infinite marquee (left) |
|
|
139
|
+
| `.mf-scroll-reverse` | Infinite marquee (right) |
|
|
140
|
+
| `.mf-blob` | Ambient blob drift |
|
|
141
|
+
| `.mf-float` | Slow vertical float |
|
|
142
|
+
| `.mf-breathe` | Subtle scale pulse |
|
|
143
|
+
|
|
144
|
+
**With Tailwind v4** (after importing `matefluency/tailwind`):
|
|
145
|
+
|
|
146
|
+
```html
|
|
147
|
+
<div class="animate-in-up">...</div>
|
|
148
|
+
<div class="animate-scroll">...</div>
|
|
149
|
+
<div class="animate-blob">...</div>
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
---
|
|
153
|
+
|
|
154
|
+
## Typography Presets
|
|
155
|
+
|
|
156
|
+
For non-Tailwind projects, use these convenience classes:
|
|
157
|
+
|
|
158
|
+
| Class | Maps to |
|
|
159
|
+
|---|---|
|
|
160
|
+
| `.mf-eyebrow` | Small uppercase label in brand green |
|
|
161
|
+
| `.mf-h1` | Page hero heading (responsive) |
|
|
162
|
+
| `.mf-h2` | Section heading |
|
|
163
|
+
| `.mf-h3` | Card heading |
|
|
164
|
+
| `.mf-body` | Body paragraph text |
|
|
165
|
+
| `.mf-meta` | Fine print / metadata |
|
|
166
|
+
|
|
167
|
+
---
|
|
168
|
+
|
|
169
|
+
## Tailwind v3 Users
|
|
170
|
+
|
|
171
|
+
Move the keyframe definitions outside of `@theme` and register animation tokens in `tailwind.config.js`:
|
|
172
|
+
|
|
173
|
+
```js
|
|
174
|
+
// tailwind.config.js
|
|
175
|
+
module.exports = {
|
|
176
|
+
theme: {
|
|
177
|
+
extend: {
|
|
178
|
+
animation: {
|
|
179
|
+
scroll: "mf-scroll 20s linear infinite",
|
|
180
|
+
blob: "mf-blob 7s infinite",
|
|
181
|
+
float: "mf-float 6s ease-in-out infinite",
|
|
182
|
+
"in-up": "mf-fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards",
|
|
183
|
+
},
|
|
184
|
+
},
|
|
185
|
+
},
|
|
186
|
+
};
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
---
|
|
190
|
+
|
|
191
|
+
## Font
|
|
192
|
+
|
|
193
|
+
MateFluency is designed to be used with **Google Sans**. Load it via your framework's font system:
|
|
194
|
+
|
|
195
|
+
**Next.js:**
|
|
196
|
+
```tsx
|
|
197
|
+
import { Google_Sans } from "next/font/google";
|
|
198
|
+
const googleSans = Google_Sans({ subsets: ["latin"], weight: ["400", "500", "700"] });
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
**HTML `<link>`:**
|
|
202
|
+
```html
|
|
203
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
204
|
+
<link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap" rel="stylesheet">
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
If Google Sans is unavailable, MateFluency falls back gracefully to `system-ui` → `Roboto` → `sans-serif`.
|
|
208
|
+
|
|
209
|
+
---
|
|
210
|
+
|
|
211
|
+
## License
|
|
212
|
+
|
|
213
|
+
**Proprietary — All Rights Reserved.**
|
|
214
|
+
|
|
215
|
+
MateFluency is the intellectual property of [EcoWestern](https://ecowestern.net).
|
|
216
|
+
You are free to use it in any project and customize CSS custom properties (design tokens) for your own branding.
|
|
217
|
+
You may **not** modify the source, redistribute it, rebrand it, or use it as a base for a separate design system.
|
|
218
|
+
|
|
219
|
+
See [LICENSE](./LICENSE) for the full terms. For permissions beyond the scope of this license, contact [hello@ecowestern.net](mailto:hello@ecowestern.net).
|
package/dist/base.css
ADDED
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* MateFluency Design System v1.0.0
|
|
3
|
+
* EcoWestern Naturalism Design Language
|
|
4
|
+
* Copyright (c) 2026 EcoWestern. All rights reserved.
|
|
5
|
+
* https://ecowestern.net
|
|
6
|
+
*
|
|
7
|
+
* Proprietary license — free to use, no derivatives or redistribution.
|
|
8
|
+
* See LICENSE or https://ecowestern.net/matefluency/license for full terms.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* MateFluency Design System — Base Layer
|
|
13
|
+
*
|
|
14
|
+
* Foundational body styles, CSS custom properties (design tokens),
|
|
15
|
+
* resets, and the signature fractal noise texture.
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
/* ─── Design Tokens ──────────────────────────── */
|
|
19
|
+
|
|
20
|
+
:root {
|
|
21
|
+
/* Brand colors */
|
|
22
|
+
--mf-green: #086d00;
|
|
23
|
+
--mf-green-focus: #1db100;
|
|
24
|
+
--mf-green-hover: #065a00;
|
|
25
|
+
|
|
26
|
+
/* Neutrals */
|
|
27
|
+
--mf-ink: #1d1d1f;
|
|
28
|
+
--mf-text-2: #515154;
|
|
29
|
+
--mf-text-3: #6e6e73;
|
|
30
|
+
--mf-separator: #e8e8ed;
|
|
31
|
+
--mf-canvas: #f7f7f2;
|
|
32
|
+
|
|
33
|
+
/* Typography */
|
|
34
|
+
--mf-font: "Google Sans", system-ui, -apple-system, BlinkMacSystemFont,
|
|
35
|
+
"Segoe UI", Roboto, sans-serif;
|
|
36
|
+
--mf-font-mono: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
|
|
37
|
+
|
|
38
|
+
/* Easing — "release" feel: fast start, very soft landing */
|
|
39
|
+
--mf-ease: cubic-bezier(0.25, 1, 0.5, 1);
|
|
40
|
+
|
|
41
|
+
/* Radius */
|
|
42
|
+
--mf-radius-organic: 2rem;
|
|
43
|
+
|
|
44
|
+
/* Noise texture (inline SVG — no external request needed) */
|
|
45
|
+
--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");
|
|
46
|
+
--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");
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* ─── Document ──────────────────────────────── */
|
|
50
|
+
|
|
51
|
+
html {
|
|
52
|
+
scroll-behavior: smooth;
|
|
53
|
+
box-sizing: border-box;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
*,
|
|
57
|
+
*::before,
|
|
58
|
+
*::after {
|
|
59
|
+
box-sizing: inherit;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/* ─── Body ───────────────────────────────────── */
|
|
63
|
+
|
|
64
|
+
body {
|
|
65
|
+
font-family: var(--mf-font);
|
|
66
|
+
font-weight: 400;
|
|
67
|
+
-webkit-font-smoothing: antialiased;
|
|
68
|
+
-moz-osx-font-smoothing: grayscale;
|
|
69
|
+
line-height: 1.6;
|
|
70
|
+
color: var(--mf-ink);
|
|
71
|
+
background-color: var(--mf-canvas);
|
|
72
|
+
background-image: var(--mf-noise);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* ─── Focus & Accessibility ──────────────────── */
|
|
76
|
+
|
|
77
|
+
button:focus-visible,
|
|
78
|
+
a:focus-visible,
|
|
79
|
+
input:focus-visible,
|
|
80
|
+
textarea:focus-visible,
|
|
81
|
+
select:focus-visible {
|
|
82
|
+
outline: 2px solid var(--mf-green-focus);
|
|
83
|
+
outline-offset: 2px;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
button:focus,
|
|
87
|
+
a:focus {
|
|
88
|
+
outline: 2px solid var(--mf-green-focus);
|
|
89
|
+
outline-offset: 2px;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/* ─── Resets ─────────────────────────────────── */
|
|
93
|
+
|
|
94
|
+
code,
|
|
95
|
+
pre,
|
|
96
|
+
kbd,
|
|
97
|
+
samp {
|
|
98
|
+
font-family: var(--mf-font-mono);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
ul,
|
|
102
|
+
ol {
|
|
103
|
+
list-style: none;
|
|
104
|
+
padding: 0;
|
|
105
|
+
margin: 0;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
a {
|
|
109
|
+
text-decoration: none;
|
|
110
|
+
color: inherit;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
img,
|
|
114
|
+
video,
|
|
115
|
+
svg {
|
|
116
|
+
display: block;
|
|
117
|
+
max-width: 100%;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
h1,
|
|
121
|
+
h2,
|
|
122
|
+
h3,
|
|
123
|
+
h4,
|
|
124
|
+
h5,
|
|
125
|
+
h6 {
|
|
126
|
+
margin: 0;
|
|
127
|
+
line-height: 1.1;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
p {
|
|
131
|
+
margin: 0;
|
|
132
|
+
}
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* MateFluency Design System v1.0.0
|
|
3
|
+
* EcoWestern Naturalism Design Language
|
|
4
|
+
* Copyright (c) 2026 EcoWestern. All rights reserved.
|
|
5
|
+
* https://ecowestern.net
|
|
6
|
+
*
|
|
7
|
+
* Proprietary license — free to use, no derivatives or redistribution.
|
|
8
|
+
* See LICENSE or https://ecowestern.net/matefluency/license for full terms.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* MateFluency Design System — Components Layer
|
|
13
|
+
*
|
|
14
|
+
* The core MateFluency surface system (.biodegradable),
|
|
15
|
+
* buttons, and geometry helpers. No Tailwind required —
|
|
16
|
+
* these are plain CSS classes that work in any framework.
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
/* ─── Surfaces ───────────────────────────────── */
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* .biodegradable
|
|
23
|
+
* The signature MateFluency surface. Frosted glass, but
|
|
24
|
+
* warmer and more grounded — like sunlight through paper.
|
|
25
|
+
*
|
|
26
|
+
* Usage: apply to any card, panel, navbar, or hero section.
|
|
27
|
+
*/
|
|
28
|
+
.biodegradable {
|
|
29
|
+
background-color: rgba(255, 255, 255, 0.82);
|
|
30
|
+
backdrop-filter: blur(32px) saturate(110%);
|
|
31
|
+
-webkit-backdrop-filter: blur(32px) saturate(110%);
|
|
32
|
+
|
|
33
|
+
border: 1px solid rgba(0, 0, 0, 0.04);
|
|
34
|
+
box-shadow:
|
|
35
|
+
0 2px 4px -1px rgba(0, 0, 0, 0.01),
|
|
36
|
+
inset 0 0 0 1px rgba(255, 255, 255, 0.5);
|
|
37
|
+
/* Tactile physical edge */
|
|
38
|
+
|
|
39
|
+
transition: all 0.5s var(--mf-ease, cubic-bezier(0.25, 1, 0.5, 1));
|
|
40
|
+
position: relative;
|
|
41
|
+
overflow: hidden;
|
|
42
|
+
/* Clips the ::before noise overlay */
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* Physical texture overlay — layered fractal noise on every surface */
|
|
46
|
+
.biodegradable::before {
|
|
47
|
+
content: "";
|
|
48
|
+
position: absolute;
|
|
49
|
+
inset: 0;
|
|
50
|
+
pointer-events: none;
|
|
51
|
+
opacity: 0.02;
|
|
52
|
+
background-image: var(--mf-noise-surface,
|
|
53
|
+
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"));
|
|
54
|
+
z-index: 0;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/* Ensure direct children sit above the texture overlay */
|
|
58
|
+
.biodegradable>* {
|
|
59
|
+
position: relative;
|
|
60
|
+
z-index: 1;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.biodegradable:hover {
|
|
64
|
+
background-color: rgba(255, 255, 255, 0.9);
|
|
65
|
+
border-color: rgba(0, 0, 0, 0.08);
|
|
66
|
+
transform: translateY(-2px);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* .biodegradable-dark
|
|
71
|
+
* Dark variant for sidebars, modals, and dark-mode surfaces.
|
|
72
|
+
*/
|
|
73
|
+
.biodegradable-dark {
|
|
74
|
+
background-color: rgba(29, 29, 31, 0.85);
|
|
75
|
+
backdrop-filter: blur(30px);
|
|
76
|
+
-webkit-backdrop-filter: blur(30px);
|
|
77
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
78
|
+
color: #ffffff;
|
|
79
|
+
position: relative;
|
|
80
|
+
overflow: hidden;
|
|
81
|
+
transition: all 0.5s var(--mf-ease, cubic-bezier(0.25, 1, 0.5, 1));
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.biodegradable-dark::before {
|
|
85
|
+
content: "";
|
|
86
|
+
position: absolute;
|
|
87
|
+
inset: 0;
|
|
88
|
+
pointer-events: none;
|
|
89
|
+
opacity: 0.03;
|
|
90
|
+
background-image: var(--mf-noise-surface,
|
|
91
|
+
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"));
|
|
92
|
+
z-index: 0;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.biodegradable-dark>* {
|
|
96
|
+
position: relative;
|
|
97
|
+
z-index: 1;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/* ─── Geometry ───────────────────────────────── */
|
|
101
|
+
|
|
102
|
+
/**
|
|
103
|
+
* .rounded-organic
|
|
104
|
+
* The signature leaf-like corner radius (2rem).
|
|
105
|
+
* Pair with .biodegradable on every card and panel.
|
|
106
|
+
*/
|
|
107
|
+
.rounded-organic {
|
|
108
|
+
border-radius: var(--mf-radius-organic, 2rem);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* ─── Buttons ────────────────────────────────── */
|
|
112
|
+
|
|
113
|
+
/**
|
|
114
|
+
* .mate-button
|
|
115
|
+
* Base button styles. Always pair with a variant:
|
|
116
|
+
* .mate-button-primary — brand green CTA
|
|
117
|
+
* .mate-button-secondary — neutral grey action
|
|
118
|
+
*/
|
|
119
|
+
.mate-button {
|
|
120
|
+
display: inline-flex;
|
|
121
|
+
align-items: center;
|
|
122
|
+
justify-content: center;
|
|
123
|
+
gap: 0.5rem;
|
|
124
|
+
padding: 0.625rem 1.5rem;
|
|
125
|
+
/* py-2.5 px-6 */
|
|
126
|
+
border-radius: 9999px;
|
|
127
|
+
/* pill shape */
|
|
128
|
+
font-size: 0.875rem;
|
|
129
|
+
/* text-sm */
|
|
130
|
+
font-weight: 600;
|
|
131
|
+
font-family: var(--mf-font, inherit);
|
|
132
|
+
border: none;
|
|
133
|
+
cursor: pointer;
|
|
134
|
+
text-decoration: none;
|
|
135
|
+
transition: all 0.2s ease;
|
|
136
|
+
white-space: nowrap;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.mate-button-primary {
|
|
140
|
+
background-color: var(--mf-green, #086d00);
|
|
141
|
+
color: #ffffff;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.mate-button-primary:hover {
|
|
145
|
+
background-color: var(--mf-green-hover, #065a00);
|
|
146
|
+
transform: scale(1.02);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.mate-button-secondary {
|
|
150
|
+
background-color: #e5e7eb;
|
|
151
|
+
color: var(--mf-ink, #1d1d1f);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.mate-button-secondary:hover {
|
|
155
|
+
background-color: #d1d5db;
|
|
156
|
+
transform: scale(1.02);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
/* ─── Accent Bar ─────────────────────────────── */
|
|
160
|
+
|
|
161
|
+
/**
|
|
162
|
+
* .mate-accent-bar
|
|
163
|
+
* The animated green bar used on feature cards.
|
|
164
|
+
* Grows from 3rem → 6rem when a parent has .group:hover
|
|
165
|
+
* (Tailwind) OR when a parent has the .is-hovered class.
|
|
166
|
+
*
|
|
167
|
+
* For Tailwind v4 users: use group-hover:w-24 inline.
|
|
168
|
+
*/
|
|
169
|
+
.mate-accent-bar {
|
|
170
|
+
height: 0.375rem;
|
|
171
|
+
/* h-1.5 */
|
|
172
|
+
width: 3rem;
|
|
173
|
+
/* w-12 */
|
|
174
|
+
background-color: var(--mf-green, #086d00);
|
|
175
|
+
border-radius: 9999px;
|
|
176
|
+
transition: width 0.5s var(--mf-ease, cubic-bezier(0.25, 1, 0.5, 1));
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
/* Works when a parent container gains .is-hovered on mouseenter */
|
|
180
|
+
.is-hovered .mate-accent-bar,
|
|
181
|
+
:hover>.mate-accent-bar {
|
|
182
|
+
width: 6rem;
|
|
183
|
+
/* w-24 */
|
|
184
|
+
}
|