/* ============================================================ Mahad Gems — Foundations: Colors & Typography ------------------------------------------------------------ Premium AI-first B2B gemstone sourcing platform. Drawn directly from the brand lockup: emerald + royal blue gradient on a clean white/off-white surface, with a glass shield mark for the "trust system" idea. ============================================================ */ /* ---------- Webfonts ---------- Display serif: Cormorant Garamond (closest free match to the classical high-contrast serif used in the wordmark — refined, jewellery-grade) UI sans: Manrope (clean modern grotesk for UI, headlines, body, B2B trust feel) Mono / IDs: JetBrains Mono (Stone Passport IDs, carat/origin codes, certificate numbers) */ @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap"); :root { /* ===================================================== COLOR — BRAND CORE The two pillar hues + the gradient that flows between them. These appear on the diamond mark and the "Gems" wordmark. ===================================================== */ --mg-emerald: #0E7A3D; /* primary brand green — "Gem" */ --mg-emerald-deep: #0A5B2D; /* pressed / shadow side */ --mg-emerald-bright: #16A34A; /* highlight / verified pill */ --mg-emerald-tint: #E6F4EC; /* surface tint */ --mg-royal: #1456A8; /* royal blue — wordmark "ms" */ --mg-royal-deep: #0E3F7E; /* pressed */ --mg-royal-tint: #E8EFFA; --mg-navy: #0A2347; /* Mahad — primary text-dark */ --mg-navy-2: #14305C; --mg-navy-tint: #F1F4FA; --mg-teal: #137C8E; /* mid-gradient hinge */ /* The signature brand gradient (logo "Gems" → diamond) */ --mg-grad-brand: linear-gradient(95deg, #0E7A3D 0%, #137C8E 48%, #1456A8 100%); --mg-grad-brand-soft: linear-gradient(95deg, #0E7A3D 0%, #137C8E 50%, #1456A8 100%); --mg-grad-deep: linear-gradient(135deg, #0A2347 0%, #0E3F7E 55%, #0E7A3D 130%); --mg-grad-glass: linear-gradient(135deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.25) 45%, rgba(232,239,250,0.55) 100%); /* ===================================================== COLOR — NEUTRALS A near-white / cool-grey ramp. Backgrounds skew very slightly cool (toward navy) — never warm beige. ===================================================== */ --mg-white: #FFFFFF; --mg-offwhite: #FAFBFD; /* page bg */ --mg-paper: #F4F6FB; /* alt section bg */ --mg-mist: #ECF0F7; /* card bg / chips */ --mg-line: #DCE3EF; /* hairline borders */ --mg-line-2: #C9D2E2; /* stronger divider */ --mg-muted: #94A1B8; /* tertiary text / icon */ --mg-ink-3: #5C6A85; /* secondary text */ --mg-ink-2: #2E3A55; /* body text */ --mg-ink-1: #0A2347; /* primary text == navy */ --mg-black: #050B1A; /* ===================================================== COLOR — SEMANTIC ===================================================== */ --mg-success: #0E7A3D; /* verified, certified */ --mg-success-bg: #E6F4EC; --mg-warning: #B07A0A; /* treatment declared */ --mg-warning-bg: #FBF1DA; --mg-danger: #B3261E; /* risk signal */ --mg-danger-bg: #FBE7E5; --mg-info: #1456A8; /* media / passport */ --mg-info-bg: #E8EFFA; /* Trust-tier accents (used on Stone Passport scores) */ --mg-trust-a: #0E7A3D; /* A — fully verified */ --mg-trust-b: #137C8E; /* B — verified w/ partial */ --mg-trust-c: #B07A0A; /* C — declared, unverified */ /* ===================================================== COLOR — SEMANTIC ROLES (the variables you should actually reach for in components) ===================================================== */ --bg-page: var(--mg-offwhite); --bg-surface: var(--mg-white); --bg-surface-alt: var(--mg-paper); --bg-inverted: var(--mg-navy); --bg-tint-brand: var(--mg-emerald-tint); --fg-1: var(--mg-ink-1); /* h1, primary */ --fg-2: var(--mg-ink-2); /* body */ --fg-3: var(--mg-ink-3); /* secondary */ --fg-muted: var(--mg-muted); /* labels, captions */ --fg-on-brand: var(--mg-white); --border: var(--mg-line); --border-strong: var(--mg-line-2); --accent: var(--mg-emerald); --accent-2: var(--mg-royal); /* ===================================================== RADIUS — generous on cards, capsule on chips/CTAs. Premium B2B sits between "tech-sharp" and "luxe-soft". ===================================================== */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px; /* ===================================================== SHADOW — layered, cool-toned, low spread. Never warm, never plasticky. Hint of navy in the shadow color. ===================================================== */ --shadow-xs: 0 1px 2px rgba(10, 35, 71, 0.06); --shadow-sm: 0 2px 6px rgba(10, 35, 71, 0.06), 0 1px 2px rgba(10, 35, 71, 0.04); --shadow-md: 0 8px 24px -8px rgba(10, 35, 71, 0.14), 0 2px 6px rgba(10, 35, 71, 0.05); --shadow-lg: 0 24px 60px -20px rgba(10, 35, 71, 0.22), 0 6px 14px -6px rgba(10, 35, 71, 0.08); --shadow-glass: inset 0 1px 0 rgba(255,255,255,0.6), 0 8px 32px -12px rgba(10, 35, 71, 0.18); --ring-focus: 0 0 0 3px rgba(20, 86, 168, 0.28); --ring-success: 0 0 0 3px rgba(14, 122, 61, 0.28); /* ===================================================== SPACING — 4pt grid, with named room steps for layout. ===================================================== */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; /* ===================================================== TYPE — families ===================================================== */ --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif; --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* ===================================================== TYPE — scale Display = serif (for hero, section openers, passport) UI / body = sans ===================================================== */ --t-display-xl: 700 84px/0.98 var(--font-display); --t-display-lg: 600 64px/1.02 var(--font-display); --t-display-md: 600 48px/1.08 var(--font-display); --t-display-sm: 600 36px/1.12 var(--font-display); --t-h1: 700 56px/1.05 var(--font-sans); --t-h2: 700 40px/1.12 var(--font-sans); --t-h3: 700 28px/1.20 var(--font-sans); --t-h4: 600 22px/1.28 var(--font-sans); --t-h5: 600 18px/1.30 var(--font-sans); --t-body-lg: 400 18px/1.55 var(--font-sans); --t-body: 400 16px/1.6 var(--font-sans); --t-body-sm: 400 14px/1.55 var(--font-sans); --t-caption: 500 12px/1.4 var(--font-sans); --t-label: 600 12px/1.2 var(--font-sans); --t-eyebrow: 600 12px/1.2 var(--font-sans); --t-mono: 500 13px/1.4 var(--font-mono); --letter-eyebrow: 0.14em; --letter-label: 0.04em; --letter-display: -0.01em; /* ===================================================== MOTION ===================================================== */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 400ms; /* ===================================================== LAYOUT ===================================================== */ --container: 1280px; --container-wide: 1440px; --nav-height: 72px; } /* ============================================================ Base element bindings — when applied to a root element, establishes the brand defaults. ============================================================ */ .mg-root, body.mg { background: var(--bg-page); color: var(--fg-2); font: var(--t-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; } .mg-display-xl { font: var(--t-display-xl); color: var(--fg-1); letter-spacing: var(--letter-display); } .mg-display-lg { font: var(--t-display-lg); color: var(--fg-1); letter-spacing: var(--letter-display); } .mg-display-md { font: var(--t-display-md); color: var(--fg-1); letter-spacing: var(--letter-display); } .mg-display-sm { font: var(--t-display-sm); color: var(--fg-1); letter-spacing: var(--letter-display); } .mg-h1 { font: var(--t-h1); color: var(--fg-1); letter-spacing: -0.01em; } .mg-h2 { font: var(--t-h2); color: var(--fg-1); letter-spacing: -0.005em; } .mg-h3 { font: var(--t-h3); color: var(--fg-1); } .mg-h4 { font: var(--t-h4); color: var(--fg-1); } .mg-h5 { font: var(--t-h5); color: var(--fg-1); } .mg-body-lg { font: var(--t-body-lg); color: var(--fg-2); } .mg-body { font: var(--t-body); color: var(--fg-2); } .mg-body-sm { font: var(--t-body-sm); color: var(--fg-3); } .mg-caption { font: var(--t-caption); color: var(--fg-muted); } .mg-eyebrow { font: var(--t-eyebrow); letter-spacing: var(--letter-eyebrow); text-transform: uppercase; color: var(--mg-emerald); } .mg-label { font: var(--t-label); letter-spacing: var(--letter-label); text-transform: uppercase; color: var(--fg-muted); } .mg-mono { font: var(--t-mono); color: var(--fg-2); } /* Branded gradient text — use sparingly, for the "Gems" word in the wordmark or "Mahad Gem AI" wordmark inline. */ .mg-grad-text { background: var(--mg-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }