/* ============================================================ Market Fit Group — Foundations colors_and_type.css ------------------------------------------------------------ Consumed by every UI kit, slide, and prototype in this design system. Import once at the top of . All brand tokens live here so a single edit propagates everywhere. ============================================================ */ /* ---------- Fonts ---------- Display: Newsreader (Google Fonts) — stand-in for Canela / Tiempos Headline Body: Instrument Sans (Google Fonts) — stand-in for Söhne / Founders Grotesk Mono: JetBrains Mono (Google Fonts) — used sparingly, spec callouts only NOTE: the brief names Canela / Saol / Tiempos (display) and Söhne / Founders (body). Neither is free-for-web. If licensed, swap the @import with @font-face declarations pointing at fonts/ and update --font-display / --font-body below. Everything else cascades correctly. */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,300;1,6..72,400&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ============================================================ COLOR — the whole brand sits on a near-monochrome stack. One accent. Navy is the locked default (heritage, conservative). Terracotta is defined below as an unused alternate in case we revisit — flip the semantic aliases to switch in one edit. ============================================================ */ /* Surfaces — off-white, never pure white. The paper feel. */ --mf-paper: #FAFAF7; /* default page background */ --mf-paper-warm: #F4F1EA; /* section alt, factory-card background */ --mf-paper-deep: #ECE7DC; /* dividers, quote blocks */ --mf-white: #FFFFFF; /* used only inside cards on warm paper */ /* Ink — near-black, never pure black. Keeps print feel. */ --mf-ink: #1A1A1A; /* primary text, headlines */ --mf-ink-80: #2E2E2C; /* subheads */ --mf-ink-60: #5A5A57; /* body on paper */ --mf-ink-40: #8A8882; /* meta, captions, labels */ --mf-ink-20: #C8C4BC; /* hairlines, disabled */ --mf-ink-10: #DEDAD1; /* borders on warm */ /* Accent — Navy (LOCKED DEFAULT). Heritage, conservative. */ --mf-navy: #14213D; --mf-navy-hover: #0E1729; --mf-navy-tint: #E1E5EC; --mf-navy-ink: #0A1020; /* Accent — Terracotta (UNUSED ALTERNATE). Kept defined for future reference — do not reference --mf-terracotta-* in new UI. */ --mf-terracotta: #B5533A; --mf-terracotta-hover: #9B4430; --mf-terracotta-tint: #F3E1D8; --mf-terracotta-ink: #6B2A1C; /* Semantic accent aliases — everything downstream reads --mf-accent. Flip these four lines to switch accent direction. */ --mf-accent: var(--mf-navy); --mf-accent-hover: var(--mf-navy-hover); --mf-accent-tint: var(--mf-navy-tint); --mf-accent-ink: var(--mf-navy-ink); /* Supporting — certifications & status only. Not for decoration. */ --mf-grs-teal: #2B8287; /* GRS mark */ --mf-sedex-navy: #0B2B5C; /* SMETA / Sedex */ --mf-bsci-red: #A61D1D; /* amfori BSCI */ --mf-success: #4A6B3E; /* audit passed, inline */ --mf-warning: #B8852A; --mf-error: #8E3232; /* Imagery treatment — factory photography carries a slight warm bias. Product photography (mannequin, light grey) stays neutral. */ --mf-image-tint: color-mix(in oklab, var(--mf-paper) 6%, transparent); /* ============================================================ TYPOGRAPHY — editorial pairing, tight hierarchy. Display sizes use Newsreader italic for longest headlines; body uses Instrument Sans. Mono reserved for specs. ============================================================ */ --font-display: 'Newsreader', 'Tiempos Headline', 'Saol Display', Georgia, serif; --font-body: 'Instrument Sans', 'Söhne', 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Type scale — desktop-first. Mobile uses clamp() below. */ --fs-display-xl: clamp(3.5rem, 7vw, 7rem); /* 56–112px hero headline */ --fs-display-l: clamp(2.75rem, 5vw, 4.75rem); /* 44–76px section headline */ --fs-display-m: clamp(2rem, 3.2vw, 3rem); /* 32–48px sub-section */ --fs-h1: clamp(2rem, 3vw, 2.75rem); /* 32–44px page title */ --fs-h2: clamp(1.5rem, 2vw, 2rem); /* 24–32px */ --fs-h3: 1.25rem; /* 20px */ --fs-h4: 1.0625rem; /* 17px */ --fs-body-l: 1.125rem; /* 18px */ --fs-body: 1rem; /* 16px */ --fs-body-s: 0.9375rem; /* 15px */ --fs-caption: 0.8125rem; /* 13px */ --fs-eyebrow: 0.75rem; /* 12px — uppercase */ --fs-stat-xl: clamp(3rem, 5vw, 4.5rem); /* 48–72px 52 / 8 / 500 / 7 */ /* Line heights */ --lh-display: 1.02; --lh-heading: 1.12; --lh-body: 1.55; --lh-tight: 1.25; /* Letter spacing — serifs at near-zero; small sans caps slightly tracked. */ --tracking-display: -0.015em; --tracking-body: 0; --tracking-eyebrow: 0.12em; --tracking-caps: 0.04em; /* Weights */ --fw-display-light: 300; --fw-display-regular: 400; --fw-display-medium: 500; --fw-body-regular: 400; --fw-body-medium: 500; --fw-body-semibold: 600; /* ============================================================ SPACING — 8pt base, editorial generosity above 64px. ============================================================ */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px; /* between hero and next section */ --s-12: 200px; /* ============================================================ LAYOUT — page gutters, containers, max widths ============================================================ */ --container-max: 1440px; --container-pad: clamp(20px, 4vw, 64px); --measure: 68ch; /* comfortable reading */ --measure-short: 42ch; /* lead paragraphs */ /* ============================================================ RADII — minimal. Brand is square-edged. Only cards + inputs round. ============================================================ */ --radius-none: 0; --radius-sm: 2px; /* inputs, pills */ --radius-md: 4px; /* cards, tiles */ --radius-lg: 8px; /* modals */ --radius-pill: 999px; /* country chips */ /* ============================================================ BORDERS ============================================================ */ --border-hairline: 1px solid var(--mf-ink-20); --border-divider: 1px solid var(--mf-ink-10); --border-strong: 1px solid var(--mf-ink); /* ============================================================ SHADOWS — used sparingly. Editorial, not Material. ============================================================ */ --shadow-none: none; --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.04), 0 1px 1px rgba(26, 26, 26, 0.03); --shadow-card: 0 2px 8px rgba(26, 26, 26, 0.06), 0 12px 32px -12px rgba(26, 26, 26, 0.08); --shadow-lift: 0 4px 16px rgba(26, 26, 26, 0.08), 0 24px 48px -16px rgba(26, 26, 26, 0.10); --shadow-inset: inset 0 0 0 1px var(--mf-ink-10); /* ============================================================ MOTION — slow, confident, no bounces. Editorial cadence. ============================================================ */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 400ms; --dur-reveal: 720ms; /* scroll-reveal fades, video crossfades */ } /* ============================================================ BASE RESET + ELEMENT STYLES These serve as the semantic layer. Headings, paragraphs, etc. never need a class — they inherit the right treatment by tag. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { margin: 0; background: var(--mf-paper); color: var(--mf-ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--tracking-body); font-feature-settings: 'kern', 'liga', 'ss01'; overflow-x: clip; /* prevent any descendant from creating horizontal scroll */ } /* Headings default to display serif for impact. */ h1, h2, h3 { font-family: var(--font-display); font-weight: var(--fw-display-regular); line-height: var(--lh-heading); letter-spacing: var(--tracking-display); margin: 0 0 var(--s-4); color: var(--mf-ink); text-wrap: balance; } h1 { font-size: var(--fs-h1); line-height: var(--lh-display); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } /* h4/h5/h6 stay in the body sans for utility contexts. */ h4, h5, h6 { font-family: var(--font-body); font-weight: var(--fw-body-semibold); line-height: var(--lh-tight); letter-spacing: 0; margin: 0 0 var(--s-3); color: var(--mf-ink); } h4 { font-size: var(--fs-h4); } h5 { font-size: var(--fs-body); } h6 { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--mf-ink-40); } p { margin: 0 0 var(--s-4); max-width: var(--measure); color: var(--mf-ink-80); text-wrap: pretty; } a { color: currentColor; text-decoration: none; border-bottom: 1px solid currentColor; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } a:hover { color: var(--mf-accent); border-color: var(--mf-accent); } strong { font-weight: var(--fw-body-semibold); color: var(--mf-ink); } em { font-style: italic; font-family: var(--font-display); font-weight: 400; } small { font-size: var(--fs-caption); color: var(--mf-ink-40); } code, pre, kbd { font-family: var(--font-mono); font-size: 0.9em; background: var(--mf-paper-warm); padding: 0.1em 0.4em; border-radius: var(--radius-sm); } hr { border: 0; border-top: var(--border-divider); margin: var(--s-7) 0; } figure { margin: 0; } img, video { display: block; max-width: 100%; height: auto; } button { font-family: var(--font-body); font-size: var(--fs-body); cursor: pointer; border: 0; background: none; } /* Input reset — full styling lives in components. */ input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; } /* ============================================================ SEMANTIC UTILITY CLASSES Use these instead of adding new type styles. Keeps hierarchy consistent across prototypes. ============================================================ */ .mf-display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl); line-height: var(--lh-display); font-weight: var(--fw-display-regular); letter-spacing: var(--tracking-display); } .mf-display-l { font-family: var(--font-display); font-size: var(--fs-display-l); line-height: var(--lh-display); font-weight: var(--fw-display-regular); letter-spacing: var(--tracking-display); } .mf-display-m { font-family: var(--font-display); font-size: var(--fs-display-m); line-height: var(--lh-heading); font-weight: var(--fw-display-regular); letter-spacing: var(--tracking-display); } .mf-display-italic { font-style: italic; font-weight: var(--fw-display-light); } .mf-eyebrow { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-body-medium); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--mf-ink-40); margin: 0 0 var(--s-4); } .mf-lead { font-family: var(--font-body); font-size: var(--fs-body-l); line-height: 1.5; color: var(--mf-ink-80); max-width: var(--measure-short); } .mf-meta { font-family: var(--font-body); font-size: var(--fs-caption); color: var(--mf-ink-40); letter-spacing: var(--tracking-caps); text-transform: uppercase; } .mf-stat { font-family: var(--font-display); font-size: var(--fs-stat-xl); font-weight: var(--fw-display-regular); line-height: 1; letter-spacing: -0.02em; color: var(--mf-ink); } .mf-stat-label { font-family: var(--font-body); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--mf-ink-40); margin-top: var(--s-3); } .mf-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); } .mf-rule { height: 1px; background: var(--mf-ink-20); border: 0; margin: var(--s-6) 0; } /* Focus — thin, brand-aware, never removed. */ :where(a, button, input, textarea, select):focus-visible { outline: 2px solid var(--mf-accent); outline-offset: 2px; } /* Selection */ ::selection { background: var(--mf-accent); color: var(--mf-paper); }