/* ============================================================ DESIGN BOOK: marketing-light-3 Type: marketing-light | Date: 2026-04-16 Source: Fintech infrastructure marketing — light theme, geometric variable font, indigo accent, enterprise social proof Superpowers: 6 (Whisper Typography, Indigo Shadows, Breathe Rhythm, Slate Neutrals, Signature Radius, Five-Curve Easing) ============================================================ */ :root { /* ── COLORS ─────────────────────────────────────────────── */ /* Primary — Indigo (action: buttons, links, highlights) */ --ml3-color-primary: #533AFD; --ml3-color-primary-hover: #635BFF; --ml3-color-primary-active: #4730D9; --ml3-color-primary-subtle: #E2E4FF; --ml3-color-primary-pale: #B9B9F9; /* Accent — Purple (decorative gradients, secondary highlights) */ --ml3-color-accent: #9966FF; --ml3-color-accent-alt: #7389FF; /* Neutral scale — Slate Blue-Gray (hue ~210-215°) */ --ml3-color-neutral-50: #F8FAFD; --ml3-color-neutral-100: #F0F4F9; --ml3-color-neutral-200: #E5EDF5; --ml3-color-neutral-300: #ADBDCC; --ml3-color-neutral-400: #7D8BA4; --ml3-color-neutral-500: #506172; --ml3-color-neutral-600: #425466; --ml3-color-neutral-700: #3C4F69; --ml3-color-neutral-800: #273951; --ml3-color-neutral-900: #0A2540; --ml3-color-neutral-950: #061B31; /* Surface */ --ml3-color-bg: #FFFFFF; --ml3-color-surface: #F8FAFD; --ml3-color-surface-raised: #FFFFFF; --ml3-color-surface-dark: #0D1738; /* Text */ --ml3-color-text: #0A2540; --ml3-color-text-secondary: #425466; --ml3-color-text-tertiary: #506172; --ml3-color-text-disabled: #7D8BA4; --ml3-color-text-inverse: #FFFFFF; --ml3-color-text-on-primary: #FFFFFF; /* Border */ --ml3-color-border: #E5EDF5; --ml3-color-border-strong: #ADBDCC; --ml3-color-border-subtle: #F0F4F9; /* Semantic */ --ml3-color-success: #15BE53; --ml3-color-success-subtle: #E6F9ED; --ml3-color-warning: #FFCE48; --ml3-color-warning-subtle: #FFF5D5; --ml3-color-danger: #FF6118; --ml3-color-danger-subtle: #FFF0E9; --ml3-color-info: #0073E6; --ml3-color-info-subtle: #E5F0FF; --ml3-color-teal: #00C4C4; --ml3-color-teal-subtle: #E0FAFA; /* Warning text (on warning-subtle bg) */ --ml3-color-warning-text: #8a6d00; /* ── TYPOGRAPHY ─────────────────────────────────────────── */ /* Geometric variable font → Inter var как free-аналог */ --ml3-font-display: 'Inter var', 'Inter', system-ui, sans-serif; --ml3-font-body: 'Inter var', 'Inter', system-ui, sans-serif; --ml3-font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Оригинал: geometric variable font, system sans-serif fallback */ /* Type scale */ --ml3-font-size-xs: 10px; --ml3-font-size-sm: 12px; --ml3-font-size-base: 14px; --ml3-font-size-md: 15px; --ml3-font-size-lg: 16px; --ml3-font-size-xl: 18px; --ml3-font-size-2xl: 24px; --ml3-font-size-3xl: 32px; --ml3-font-size-4xl: 38px; --ml3-font-size-5xl: 48px; --ml3-font-size-6xl: 56px; /* Weight scale — light (300) dominates, 425 is vf-specific */ --ml3-font-weight-light: 300; --ml3-font-weight-regular: 400; --ml3-font-weight-medium: 425; /* vf — между regular и medium */ --ml3-font-weight-semibold: 500; --ml3-font-weight-bold: 700; /* Line height */ --ml3-line-height-tight: 1.1; /* H1/H2 hero */ --ml3-line-height-snug: 1.2; /* H3/H4 */ --ml3-line-height-normal: 1.4; /* Body text */ --ml3-line-height-relaxed: 1.55; /* Body lg */ --ml3-line-height-loose: 1.75; /* Prose */ /* Letter spacing — негативный tracking на заголовках */ --ml3-letter-spacing-tighter: -0.02em; /* H1: -0.96px при 48px */ --ml3-letter-spacing-tight: -0.016em; /* H2-H3 */ --ml3-letter-spacing-normal: -0.01em; /* Body (слегка минус) */ --ml3-letter-spacing-wide: 0.01em; /* Overline/micro */ /* Heading presets */ /* H1: 48-56px / 300 / 1.1 / -0.02em */ /* H2: 38px / 300 / 1.12 / -0.016em */ /* H3: 26-32px / 400 / 1.2 / -0.016em */ /* H4: 24px / 425 / 1.21 / -0.01em */ /* ── SPACING ─────────────────────────────────────────────── */ /* Base unit: 4px */ --ml3-space-px: 1px; --ml3-space-0: 0px; --ml3-space-0_5: 2px; --ml3-space-1: 4px; --ml3-space-2: 8px; --ml3-space-3: 12px; --ml3-space-4: 16px; --ml3-space-5: 20px; --ml3-space-6: 24px; --ml3-space-8: 32px; --ml3-space-10: 40px; --ml3-space-16: 64px; --ml3-space-20: 80px; --ml3-space-24: 96px; --ml3-space-28: 112px; /* Semantic aliases */ --ml3-space-xs: var(--ml3-space-2); /* 8px */ --ml3-space-sm: var(--ml3-space-3); /* 12px */ --ml3-space-md: var(--ml3-space-4); /* 16px */ --ml3-space-lg: var(--ml3-space-6); /* 24px */ --ml3-space-xl: var(--ml3-space-8); /* 32px */ --ml3-space-2xl: var(--ml3-space-10); /* 40px */ --ml3-space-3xl: var(--ml3-space-16); /* 64px */ /* Layout */ --ml3-container-max: 1264px; /* refreshedNavMaxWidth */ --ml3-container-wide: 1234px; /* measured width */ --ml3-container-narrow: 958px; /* H1 maxWidth */ --ml3-section-py: 112px; /* section padding vertical */ --ml3-section-py-sm: 64px; /* compact sections */ --ml3-grid-gap: 16px; --ml3-grid-gap-lg: 40px; /* hero/feature grid */ /* ── BORDER RADIUS ──────────────────────────────────────── */ --ml3-radius-none: 0px; --ml3-radius-xs: 2px; --ml3-radius-sm: 4px; --ml3-radius-md: 8px; /* cards, nav container */ --ml3-radius-lg: 14px; --ml3-radius-xl: 16.5px; /* SIGNATURE — modal/hero blocks */ --ml3-radius-pill: 9999px; /* pill badges */ --ml3-radius-circle: 50%; /* ── SHADOWS ────────────────────────────────────────────── */ /* Dual-layer pattern: indigo-tinted (50,50,93) + pure black */ --ml3-shadow-sm: 0 2px 5px -1px rgba(50,50,93,0.25), 0 1px 3px -1px rgba(0,0,0,0.30); --ml3-shadow-md: 0 13px 27px -5px rgba(50,50,93,0.25), 0 8px 16px -8px rgba(0,0,0,0.30); --ml3-shadow-lg: 0 30px 60px -12px rgba(50,50,93,0.25), 0 18px 36px -18px rgba(0,0,0,0.30); --ml3-shadow-xl: 0 50px 100px -20px rgba(50,50,93,0.25), 0 30px 60px -30px rgba(0,0,0,0.30); --ml3-shadow-nav: 0 30px 60px -50px rgba(0,0,0,0.10), 0 30px 60px -10px rgba(50,50,93,0.25); --ml3-shadow-menu: 0 18px 36px -18px rgba(0,0,0,0.10), 0 30px 45px -30px rgba(50,50,93,0.25); --ml3-shadow-none: none; /* ── MOTION ─────────────────────────────────────────────── */ --ml3-duration-instant: 50ms; --ml3-duration-fast: 150ms; --ml3-duration-normal: 300ms; --ml3-duration-slow: 800ms; --ml3-duration-very-slow: 1000ms; /* Easing — signature curves */ --ml3-ease-default: cubic-bezier(0.25, 1, 0.5, 1); /* color transitions */ --ml3-ease-slide: cubic-bezier(0.165, 0.84, 0.44, 1); /* transforms */ --ml3-ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); /* slow reveals */ --ml3-ease-sharp: cubic-bezier(0.4, 0, 0.2, 1); /* menu open/close */ --ml3-ease-nav: cubic-bezier(0.45, 0.05, 0.55, 0.95); /* nav container */ --ml3-ease-linear: linear; --ml3-transition: color var(--ml3-duration-normal) var(--ml3-ease-default), background var(--ml3-duration-normal) var(--ml3-ease-default), border var(--ml3-duration-normal) var(--ml3-ease-default), box-shadow var(--ml3-duration-normal) var(--ml3-ease-default), transform var(--ml3-duration-normal) var(--ml3-ease-default), opacity var(--ml3-duration-fast) var(--ml3-ease-linear); /* ── Z-INDEX ────────────────────────────────────────────── */ --ml3-z-base: 1; --ml3-z-raised: 2; --ml3-z-dropdown: 10; --ml3-z-sticky: 20; --ml3-z-nav: 100; --ml3-z-modal: 200; --ml3-z-toast: 300; --ml3-z-overlay: 9999; /* ── EXTENSION: marketing-light ─────────────────────────── */ /* Client logos */ --ml3-logo-strip-bg: var(--ml3-color-bg); --ml3-logo-opacity: 0.6; --ml3-logo-hover-opacity: 1.0; /* Feature cards */ --ml3-feature-card-bg: var(--ml3-color-bg); --ml3-feature-card-border: var(--ml3-color-border); --ml3-feature-icon-bg: var(--ml3-color-primary-subtle); --ml3-feature-icon-color: var(--ml3-color-primary); /* Stats / numbers — oversized typography */ --ml3-stat-number-size: var(--ml3-font-size-5xl); --ml3-stat-number-weight: var(--ml3-font-weight-light); /* 300 — аирный стиль */ --ml3-stat-label-color: var(--ml3-color-text-secondary); /* Pricing */ --ml3-pricing-featured-bg: var(--ml3-color-bg); --ml3-pricing-featured-border: var(--ml3-color-primary); /* Dark section */ --ml3-dark-bg: var(--ml3-color-surface-dark); --ml3-dark-text: var(--ml3-color-text-inverse); --ml3-dark-text-secondary: var(--ml3-color-neutral-300); /* Nav (refreshed) */ --ml3-nav-height: 64px; --ml3-nav-border-radius: var(--ml3-radius-md); --ml3-nav-bg: var(--ml3-color-bg); --ml3-nav-shadow: var(--ml3-shadow-nav); } /* ── REDUCED MOTION ─────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }