/* ========================================================= MB ADS — Design Tokens Colors, typography, spacing, radii, shadows, motion. Import this file into any HTML artifact. ========================================================= */ /* Fonts are loaded via in index.html . Loading them here as @import would chain a network request AFTER this CSS is parsed, blocking render by ~1.7s on 4G. */ :root { /* ---------- Color: neutrals ---------- */ --mb-black: #0A0A0A; /* fonds sombres, titres principaux */ --mb-anthracite: #1F1F1F; /* sections sombres alternatives */ --mb-off-white: #FAFAFA; /* fond clair par défaut */ --mb-white: #FFFFFF; /* surfaces / cards */ --mb-gray-300: #E5E5E5; /* séparateurs, fonds très clairs */ --mb-gray-500: #6B7280; /* texte secondaire, sous-titres */ /* ---------- Color: brand blues ---------- */ --mb-blue-deep: #1E3A8A; /* accent principal, titres importants */ --mb-blue-elec: #3B82F6; /* CTA, hover, liens importants */ --mb-blue-elec-hov:#2563EB; /* hover état CTA */ --mb-blue-ghost: #EFF6FF; /* fonds d'encart, badges */ /* ---------- Semantic: light surface ---------- */ --bg: var(--mb-off-white); --surface: var(--mb-white); --surface-alt: var(--mb-blue-ghost); --border: var(--mb-gray-300); --fg: var(--mb-black); --fg-muted: var(--mb-gray-500); --accent: var(--mb-blue-deep); --accent-strong: var(--mb-blue-elec); /* ---------- Type families ---------- */ --font-display: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", monospace; /* ---------- Type scale (desktop) ---------- */ --fs-h1: clamp(40px, 6vw, 80px); --fs-h2: clamp(28px, 4vw, 48px); --fs-h3: clamp(22px, 2.2vw, 28px); --fs-body-lg: 18px; --fs-body: 16px; --fs-small: 14px; --fs-eyebrow: 13px; /* ---------- Line heights ---------- */ --lh-h1: 1.05; --lh-h2: 1.10; --lh-h3: 1.30; --lh-body: 1.60; --lh-small: 1.50; /* ---------- Letter spacing ---------- */ --ls-display: -0.02em; --ls-tight: -0.01em; --ls-eyebrow: 0.08em; /* ---------- Spacing (8px scale) ---------- */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-6: 48px; --space-8: 64px; --space-12: 96px; --space-16: 128px; /* ---------- Layout ---------- */ --container-max: 1280px; --container-pad: clamp(24px, 4vw, 48px); --section-py: clamp(64px, 10vw, 128px); /* ---------- Radii ---------- */ --radius-sm: 6px; --radius-md: 8px; /* boutons */ --radius-lg: 12px; --radius-xl: 16px; /* cards */ --radius-2xl: 24px; --radius-pill: 999px; /* ---------- Shadows ---------- */ --shadow-xs: 0 1px 2px rgba(10, 10, 10, 0.04); --shadow-sm: 0 1px 3px rgba(10, 10, 10, 0.06), 0 1px 2px rgba(10, 10, 10, 0.04); --shadow-md: 0 4px 12px rgba(10, 10, 10, 0.06), 0 2px 4px rgba(10, 10, 10, 0.04); --shadow-lg: 0 16px 40px rgba(10, 10, 10, 0.08), 0 4px 12px rgba(10, 10, 10, 0.04); --shadow-blue: 0 12px 32px rgba(59, 130, 246, 0.18); /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-std: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-inout: cubic-bezier(0.77, 0, 0.175, 1); --dur-fast: 150ms; --dur-base: 300ms; --dur-slow: 600ms; } /* ---------- Dark surfaces ---------- */ .mb-dark, [data-theme="dark"] { --bg: var(--mb-black); --surface: var(--mb-anthracite); --surface-alt: #161616; --border: rgba(255,255,255,0.08); --fg: var(--mb-off-white); --fg-muted: #9CA3AF; --accent: var(--mb-blue-elec); --accent-strong: var(--mb-blue-elec); } /* ========================================================= Base elements — opt in by adding `class="mb"` on a wrapper, or by importing this stylesheet site-wide. ========================================================= */ .mb, .mb * { box-sizing: border-box; } .mb { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .mb h1, .mb .h1, .mb h2, .mb .h2, .mb h3, .mb .h3 { font-family: var(--font-display); color: var(--fg); margin: 0; text-wrap: balance; } .mb h1, .mb .h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 700; letter-spacing: var(--ls-display); } .mb h2, .mb .h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 700; letter-spacing: var(--ls-display); } .mb h3, .mb .h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; letter-spacing: var(--ls-tight); } .mb p { margin: 0; line-height: var(--lh-body); } .mb .lead { font-size: var(--fs-body-lg); color: var(--fg-muted); } .mb .small { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-muted); } .mb .eyebrow { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent); } .mb a { color: var(--accent-strong); text-decoration: none; transition: color var(--dur-base) var(--ease-out); } .mb a:hover { color: var(--mb-blue-elec-hov); } /* ========================================================= Components ========================================================= */ /* --- Buttons --- */ .mb-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600; line-height: 1; cursor: pointer; border: 1px solid transparent; transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); text-decoration: none; white-space: nowrap; } .mb-btn--primary { background: var(--mb-blue-elec); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, var(--shadow-sm); } .mb-btn--primary:hover { background: var(--mb-blue-elec-hov); transform: scale(1.02); box-shadow: var(--shadow-blue); } .mb-btn--primary:active { transform: scale(0.99); } .mb-btn--secondary { background: transparent; color: var(--fg); border-color: var(--mb-anthracite); } .mb-btn--secondary:hover { background: var(--mb-black); color: #fff; transform: scale(1.02); } .mb-btn--ghost { background: transparent; color: var(--fg); border-color: var(--border); } .mb-btn--ghost:hover { background: var(--mb-blue-ghost); border-color: var(--mb-blue-elec); color: var(--mb-blue-deep); } .mb-btn--sm { padding: 10px 18px; font-size: var(--fs-small); } .mb-btn--lg { padding: 18px 34px; font-size: var(--fs-body-lg); } /* --- Cards --- */ .mb-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 32px; box-shadow: var(--shadow-xs); transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .mb-card:hover { box-shadow: var(--shadow-lg); border-color: #d4d4d4; } /* --- Badges --- */ .mb-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--mb-blue-ghost); color: var(--mb-blue-deep); font-size: var(--fs-small); font-weight: 500; line-height: 1; } .mb-badge--dark { background: rgba(255,255,255,0.06); color: #fff; border: 1px solid rgba(255,255,255,0.12); } /* --- Stat / number badge --- */ .mb-stat__num { font-family: var(--font-display); font-size: clamp(48px, 6vw, 80px); font-weight: 700; line-height: 1; letter-spacing: var(--ls-display); color: var(--mb-blue-deep); display: block; } .mb-stat__label { font-family: var(--font-body); font-size: var(--fs-body); color: var(--fg-muted); margin-top: var(--space-2); } /* --- Divider --- */ .mb-divider { height: 1px; background: var(--border); border: 0; } /* --- Container --- */ .mb-container { max-width: var(--container-max); margin: 0 auto; padding-left: var(--container-pad); padding-right: var(--container-pad); } .mb-section { padding-top: var(--section-py); padding-bottom: var(--section-py); } /* ========================================================= Animation utilities ========================================================= */ @keyframes mb-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .mb-reveal { animation: mb-fade-up var(--dur-slow) var(--ease-out) both; } @keyframes mb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .mb-marquee { display: flex; gap: 64px; width: max-content; animation: mb-marquee 30s linear infinite; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }