/* ══════════════════════════════════════════════════════════════════════ MUNFAR DESIGN SYSTEM — v1 Served from https://munfar.mael.dk/v1/munfar.css Canonical source: D:\Code\munfar-palette.md + design.md Change a token HERE and every MunFar product follows on next page load. HOW TO USE ──────────────────────────────────────────────────────── 1. 2. ← declares which product this is 3. Keep a minimal :root copy of the tokens in your own CSS as a floor, so the site stays on-brand if this file ever fails to load. NEVER hardcode a hex value or a font name in a product. ══════════════════════════════════════════════════════════════════════ */ @import url('/v1/fonts/fonts.css'); @import url('/v1/icons.css'); /* Tokens are defined on `html:root`, not `:root`, on purpose. Specificity (0,1,1) beats a product's own `:root` floor (0,1,0) no matter which stylesheet loads last — which matters because Vite-built products (RecipeVault, greenhouse) inject their CSS after everything in . Without this, a product's floor would silently win and changing a token here would stop propagating. */ html:root { /* ─── BACKGROUNDS — warm charcoal ramp ─── */ --forge-black: #13100B; --charcoal: #1C1813; --ember-slate: #261F16; --raised: #322817; /* ─── METAL — lines & frames ─── */ --copper-line: #4E3A22; --copper: #B87333; --oak: #8B5E3C; /* ─── WARMTH — amber, the craft ─── */ --amber: #E8832A; --amber-glow: #FFB763; /* ─── MAGIC — teal, the electricity ─── */ --teal: #2ABFBF; --teal-soft: #3FA8A4; /* ─── TEXT ─── */ --ink: #F1E7D3; --ink-soft: #CCB99B; --muted: #8C7C64; --faint: #5E5343; /* ─── SEMANTIC — tuned warm, never jarring ─── */ --success: #8FAE4D; --warning: #E6B23A; --danger: #C7492A; --info: #2ABFBF; /* ─── TYPE — three voices ─── */ --font-display: 'Cinzel', Georgia, serif; --font-body: 'Spectral', Georgia, serif; --font-data: 'Azeret Mono', ui-monospace, monospace; } /* ══════════════════════════════════════════════════════════════════════ GLYPHS Single-weight line marks, rune + circuit. Applied as CSS masks so they inherit colour via currentColor. NOTE: an SVG sprite with does NOT work here — external is blocked cross-origin, and products live on other subdomains. Masks load cross-origin fine, which is why this file uses them. ══════════════════════════════════════════════════════════════════════ */ :root { /* Plain :root here on purpose — keeps specificity at (0,1,0) so the [data-app="…"] rules below can override --app-glyph. */ /* The shared default — a rune. Every product starts here. */ --glyph-rune: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M12 8l6-5M12 14l6 5M12 8L6 3M12 14l-6 5'/%3E%3C/svg%3E"); --glyph-fish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12c3-4.5 7-6.5 11-6.5 3.5 0 6 2 7 6.5-1 4.5-3.5 6.5-7 6.5C10 18.5 6 16.5 3 12z'/%3E%3Cpath d='M3 12l-1.2-3.5M3 12l-1.2 3.5'/%3E%3Ccircle cx='16.5' cy='10.5' r='.9' fill='%23000' stroke='none'/%3E%3C/svg%3E"); --glyph-bowl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11h18c0 4.5-4 8-9 8s-9-3.5-9-8z'/%3E%3Cpath d='M9 7c0-1.5 1.5-2 1.5-3.5M13 7c0-1.5 1.5-2 1.5-3.5'/%3E%3Cpath d='M2 21h20'/%3E%3C/svg%3E"); --glyph-tree: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-7'/%3E%3Cpath d='M12 14c-4 0-6.5-2.4-6.5-5.5S8 3 12 3s6.5 2.4 6.5 5.5S16 14 12 14z'/%3E%3Cpath d='M12 21c-1.6 0-3-1-4.5-2M12 21c1.6 0 3-1 4.5-2'/%3E%3Cpath d='M12 11V6M12 8.5l2.5-2M12 8.5L9.5 6.5'/%3E%3C/svg%3E"); --glyph-sprout:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-8'/%3E%3Cpath d='M12 13C12 9 9 7 5 7c0 4 3 6 7 6z'/%3E%3Cpath d='M12 13c0-3.5 2.5-5.5 6-5.5 0 3.5-2.5 5.5-6 5.5z'/%3E%3C/svg%3E"); --glyph-flame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2c1.5 3.5 5 5 5 9a5 5 0 0 1-10 0c0-1.5.6-2.7 1.4-3.7C9 8.6 9.6 9.4 10 10c.4-3.2 1-6 2-8z'/%3E%3Cpath d='M12 22a5 5 0 0 0 5-5'/%3E%3C/svg%3E"); /* Every product resolves to the rune until it claims its own, below. */ --app-glyph: var(--glyph-rune); } /* ─── Per-product glyphs. One line each; add a product by adding a line. ─── */ [data-app="fisk"] { --app-glyph: var(--glyph-fish); } [data-app="opskrift"] { --data-app-note: "RecipeVault"; --app-glyph: var(--glyph-bowl); } [data-app="yggdrasil"] { --app-glyph: var(--glyph-tree); } [data-app="greenhouse"] { --app-glyph: var(--glyph-sprout); } [data-app="munfar"] { --app-glyph: var(--glyph-flame); } /* Declared, but still on the shared rune until artwork exists. Give them a glyph by adding one line — no change needed in the product itself. */ /* [data-app="sprites"] { --app-glyph: var(--glyph-raven); } */ /* [data-app="claude-um"] { --app-glyph: var(--glyph-…); } */ /* [data-app="forest"] { --app-glyph: var(--glyph-…); } */ /* ─── The icon element itself ─── → this product's mark → any other */ .glyph { display: inline-block; width: var(--glyph-size, 24px); height: var(--glyph-size, 24px); background: currentColor; /* inherits text colour */ -webkit-mask: var(--app-glyph) center / contain no-repeat; mask: var(--app-glyph) center / contain no-repeat; flex: none; vertical-align: -.15em; } .glyph.sm { --glyph-size: 20px; } .glyph.lg { --glyph-size: 32px; } .glyph.xl { --glyph-size: 48px; } /* ══════════════════════════════════════════════════════════════════════ ATMOSPHERE — mandatory. This is what stops charcoal reading as flat. Add class="mf-atmosphere" to , and wrap content in .wrap. ══════════════════════════════════════════════════════════════════════ */ .mf-atmosphere::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(90% 60% at 90% -5%, rgba(42,191,191,.10), transparent 55%), radial-gradient(80% 60% at 5% 105%, rgba(232,131,42,.12), transparent 50%); } .mf-atmosphere::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .wrap { position: relative; z-index: 1; } /* ══════════════════════════════════════════════════════════════════════ COMPONENTS — opt-in. Nothing here is applied to bare elements, so dropping this file into an existing product cannot restyle it by surprise. Use the classes where you want them. ══════════════════════════════════════════════════════════════════════ */ .mf-panel { background: linear-gradient(155deg, var(--ember-slate), var(--charcoal)); border: 1px solid var(--copper-line); border-radius: 16px; box-shadow: 0 24px 60px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.03); padding: 26px; transition: transform .25s, border-color .25s; } .mf-panel:hover { transform: translateY(-2px); border-color: var(--copper); } .mf-eyebrow { font-family: var(--font-data); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--teal); display: flex; align-items: center; gap: 12px; } .mf-eyebrow::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--copper-line), transparent); } .mf-btn { background: var(--amber); color: var(--forge-black); font-family: var(--font-data); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 12px 20px; border-radius: 9px; border: none; cursor: pointer; transition: .2s; display: inline-flex; align-items: center; gap: 9px; text-decoration: none; /* works as as well as