/* ===================================================================== Morreale Digital — Colors & Type The single source of truth for brand color, typography, and rhythm. Three colours. One typeface. No exceptions. ===================================================================== */ /* Outfit (variable) — display + brand wordmark. Locally hosted; the only file shipped with this system. */ @font-face { font-family: "Outfit"; src: url("../fonts/Outfit-VariableFont_wght.ttf") format("truetype-variations"), url("../fonts/Outfit-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; } /* Inter — UI typeface in the live delivery portal (loaded via next/font). Pulled from Google Fonts CDN here so the design system is portable. Substitute with @next/font's variable in production. */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); :root { /* --------------------------------------------------------------- PALETTE — three colours, full stop. Pure white and true black are NOT in the system. Use Oatmeal as the white substitute, Charcoal as the black one. --------------------------------------------------------------- */ --md-green: #1e3932; /* Primary brand. Dark surfaces, primary buttons, marks. */ --md-oatmeal: #e1e1d9; /* Warm neutral. Light surfaces, type on green, marks on green. */ --md-charcoal: #262626; /* Type on oatmeal, near-black. Substitutes for #000. */ /* Functional shifts — derived from the three core colours. Use sparingly. Do NOT introduce foreign hues. */ --md-green-deep: #152b25; /* Pressed / active state of green */ --md-green-soft: #2a4f45; /* Hover lift on green, subtle elevation */ --md-oatmeal-deep: #c8c8bf; /* Borders, dividers on oatmeal surfaces */ --md-oatmeal-soft: #f0f0eb; /* Subtle hover on oatmeal, page wash */ --md-charcoal-soft: #3a3a3a; /* Secondary type, slightly lifted from charcoal */ /* --------------------------------------------------------------- SEMANTIC ROLES — what to reach for in components. Default theme is light (Oatmeal surface, Charcoal type). --------------------------------------------------------------- */ /* Surfaces */ --md-surface: var(--md-oatmeal-soft); /* page background */ --md-surface-raised: #ffffff; /* cards on light surfaces — used in repo */ --md-surface-sunken: var(--md-oatmeal); /* inset wells, code, file rows */ --md-surface-inverse: var(--md-green); /* dark surfaces, headers, hero */ /* Foreground / type */ --md-fg: var(--md-charcoal); /* primary text on light */ --md-fg-muted: rgba(38, 38, 38, 0.60); /* secondary text */ --md-fg-subtle: rgba(38, 38, 38, 0.40); /* tertiary, metadata */ --md-fg-faint: rgba(38, 38, 38, 0.30); /* hints, watermarks */ --md-fg-on-inverse: var(--md-oatmeal); /* text on green */ --md-fg-on-inverse-muted: rgba(225, 225, 217, 0.60); /* Lines */ --md-border: rgba(225, 225, 217, 0.60); /* hairline on white cards */ --md-border-strong: var(--md-oatmeal-deep); /* input borders, strong dividers */ --md-border-on-inverse: rgba(225, 225, 217, 0.18); /* Brand-flavored utilities */ --md-brand: var(--md-green); --md-brand-hover: var(--md-green-deep); --md-brand-soft-bg: rgba(30, 57, 50, 0.05); /* tints — drop-zone hover, halo */ --md-brand-ring: rgba(30, 57, 50, 0.30); /* focus ring */ /* State colours — derived from the palette, never foreign hues. Success leans green-deep; warning is a desaturated amber within the warm range; error is a muted brick; info reuses brand. */ --md-success-bg: rgba(30, 57, 50, 0.10); --md-success-fg: var(--md-green-deep); --md-warning-bg: rgba(168, 124, 50, 0.12); /* warm amber tint */ --md-warning-fg: #6b4a18; --md-danger-bg: rgba(143, 47, 47, 0.10); --md-danger-fg: #8f2f2f; /* --------------------------------------------------------------- TYPE — two roles, one job each. UI (Inter) body, buttons, forms, navigation, data Display (Outfit) headlines, eyebrows, hero copy, brand moments Wordmark (Outfit) the lockup itself — always prefer the PNG Why two: the live delivery portal codebase loads Inter via next/font for UI; Outfit is reserved for brand/display contexts. This split keeps the design system honest with what production actually ships, while preserving Outfit's voice where it matters. --------------------------------------------------------------- */ --md-font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --md-font-display: "Outfit", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --md-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Backward-compat alias — older cards reference --md-font-sans. Points at the UI face (Inter) so existing usages stay correct. */ --md-font-sans: var(--md-font-ui); /* Weights — keep contrast clear: body 400/500, display 600/700, wordmark 800/900 */ --md-w-regular: 400; --md-w-medium: 500; --md-w-semibold: 600; --md-w-bold: 700; --md-w-heavy: 800; /* wordmark range — UI shouldn't reach here */ --md-w-black: 900; /* wordmark range */ /* Type scale — modest, calm, generous line-heights. Geometric sans warmth requires a touch more leading than Inter. */ --md-text-xs: 12px; --md-text-sm: 14px; --md-text-base: 16px; --md-text-md: 18px; --md-text-lg: 20px; --md-text-xl: 24px; --md-text-2xl: 30px; --md-text-3xl: 36px; --md-text-4xl: 48px; --md-text-5xl: 60px; --md-text-6xl: 76px; --md-leading-tight: 1.15; --md-leading-snug: 1.30; --md-leading-normal: 1.50; --md-leading-relaxed: 1.65; /* Tracking — Outfit's geometry has natural warmth. Tight tracking is reserved for the wordmark and large display headlines. Body should NEVER be tracked tighter than 0. */ --md-track-wordmark: -0.02em; /* lockup-only */ --md-track-display: -0.015em; /* H1/H2 */ --md-track-tight: -0.005em; /* H3/H4 */ --md-track-normal: 0; --md-track-eyebrow: 0.18em; /* small all-caps eyebrow labels */ /* --------------------------------------------------------------- SPACING & RHYTHM — 4px base, calm density. --------------------------------------------------------------- */ --md-space-0: 0; --md-space-1: 4px; --md-space-2: 8px; --md-space-3: 12px; --md-space-4: 16px; --md-space-5: 20px; --md-space-6: 24px; --md-space-8: 32px; --md-space-10: 40px; --md-space-12: 48px; --md-space-16: 64px; --md-space-20: 80px; --md-space-24: 96px; /* --------------------------------------------------------------- RADII — generously rounded, calm. Pills for badges, never sharp 0. --------------------------------------------------------------- */ --md-radius-xs: 6px; --md-radius-sm: 8px; /* small buttons, inputs */ --md-radius-md: 12px; /* default — buttons, inputs, file rows */ --md-radius-lg: 16px; /* cards */ --md-radius-xl: 24px; /* CTA "Download all" */ --md-radius-pill: 9999px; /* --------------------------------------------------------------- ELEVATION — soft, low-contrast. Cards lift gently; nothing floats high. Shadows are warm grey, never pure black. --------------------------------------------------------------- */ --md-shadow-card: 0 1px 3px 0 rgba(38, 38, 38, 0.06), 0 1px 2px -1px rgba(38, 38, 38, 0.04); --md-shadow-card-md: 0 4px 6px -1px rgba(38, 38, 38, 0.07), 0 2px 4px -2px rgba(38, 38, 38, 0.05); --md-shadow-card-lg: 0 10px 15px -3px rgba(38, 38, 38, 0.08), 0 4px 6px -4px rgba(38, 38, 38, 0.04); --md-shadow-focus: 0 0 0 3px var(--md-brand-ring); /* --------------------------------------------------------------- MOTION — short, calm, no bounce. Colour transitions, not transforms. --------------------------------------------------------------- */ --md-dur-fast: 100ms; --md-dur-base: 150ms; --md-dur-slow: 250ms; --md-ease: cubic-bezier(0.4, 0, 0.2, 1); } /* ===================================================================== ELEMENT DEFAULTS Apply these directly with the .md-prose / .md-app helpers. ===================================================================== */ .md-app, .md-prose { font-family: var(--md-font-ui); color: var(--md-fg); font-size: var(--md-text-base); line-height: var(--md-leading-normal); font-weight: var(--md-w-regular); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--md-surface); font-feature-settings: "cv11" on; /* Inter's straight-sided alts read cleaner in UI */ } /* Display / heading scale — Outfit, set in display contexts. Use h1 sparingly — the wordmark already does heavy lifting. */ .md-h1, .md-prose h1 { font-family: var(--md-font-display); font-size: clamp(36px, 4vw + 1rem, var(--md-text-5xl)); font-weight: var(--md-w-semibold); line-height: var(--md-leading-tight); letter-spacing: var(--md-track-display); color: var(--md-fg); margin: 0; } .md-h2, .md-prose h2 { font-family: var(--md-font-display); font-size: var(--md-text-3xl); font-weight: var(--md-w-semibold); line-height: var(--md-leading-tight); letter-spacing: var(--md-track-display); color: var(--md-fg); margin: 0; } .md-h3, .md-prose h3 { font-family: var(--md-font-display); font-size: var(--md-text-xl); font-weight: var(--md-w-semibold); line-height: var(--md-leading-snug); letter-spacing: var(--md-track-tight); color: var(--md-fg); margin: 0; } .md-h4, .md-prose h4 { font-family: var(--md-font-display); font-size: var(--md-text-md); font-weight: var(--md-w-semibold); line-height: var(--md-leading-snug); color: var(--md-fg); margin: 0; } .md-eyebrow { font-family: var(--md-font-display); font-size: var(--md-text-xs); font-weight: var(--md-w-semibold); letter-spacing: var(--md-track-eyebrow); text-transform: uppercase; color: rgba(30, 57, 50, 0.60); /* brand-tinted eyebrow as in client portal */ } .md-body, .md-prose p { font-size: var(--md-text-base); line-height: var(--md-leading-relaxed); color: var(--md-fg); margin: 0; text-wrap: pretty; } .md-body-sm { font-size: var(--md-text-sm); line-height: var(--md-leading-normal); color: var(--md-fg-muted); } .md-meta { font-size: var(--md-text-xs); line-height: var(--md-leading-normal); color: var(--md-fg-subtle); } .md-mono { font-family: var(--md-font-mono); font-size: 0.92em; } /* Wordmark utility — only ever used to wrap the company name in heavy type. The IMAGE assets are still preferred for the official lockup. */ .md-wordmark { font-family: var(--md-font-display); font-weight: var(--md-w-heavy); text-transform: uppercase; letter-spacing: var(--md-track-wordmark); line-height: 0.95; }