/** * Amplifier Stories - Unified Design System * Aligned with withamplifier.com brand * * Import this file in each deck's : * */ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@500;600;700;800&family=Epilogue:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ═══════════════════════════════════════════════════════════════════════ FONT FAMILIES - Aligned with withamplifier.com ═══════════════════════════════════════════════════════════════════════ */ --font-heading: 'Syne', system-ui, -apple-system, sans-serif; --font-body: 'Epilogue', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace; /* ═══════════════════════════════════════════════════════════════════════ TYPOGRAPHY SCALE - Presentation-optimized, site-aligned ratios ═══════════════════════════════════════════════════════════════════════ */ /* Headlines */ --fs-display: clamp(36px, 10vw, 80px); /* Hero slides */ --fs-headline: clamp(28px, 6vw, 56px); /* Section titles */ --fs-title: clamp(24px, 5vw, 40px); /* Card titles */ --fs-subhead: clamp(18px, 3vw, 28px); /* Subtitles */ /* Body text */ --fs-body-lg: clamp(16px, 2.5vw, 20px); /* Lead paragraphs */ --fs-body: clamp(15px, 2vw, 18px); /* Body text */ --fs-caption: clamp(13px, 1.8vw, 15px); /* Labels */ --fs-micro: clamp(11px, 1.5vw, 13px); /* Fine print */ /* Code */ --fs-code: clamp(13px, 2vw, 16px); /* Code blocks */ --fs-code-sm: clamp(12px, 1.6vw, 14px); /* Inline code */ /* Stats/Numbers */ --fs-stat: clamp(48px, 12vw, 96px); /* Big numbers */ --fs-stat-sm: clamp(36px, 8vw, 64px); /* Medium numbers */ --fs-icon: clamp(20px, 3vw, 24px); /* Icons, emojis */ --fs-icon-lg: clamp(36px, 8vw, 48px); /* Large icons */ /* ═══════════════════════════════════════════════════════════════════════ LETTER SPACING - Use relative units for scale-independence ═══════════════════════════════════════════════════════════════════════ */ --tracking-display: -0.03em; --tracking-headline: -0.02em; --tracking-body: -0.015em; --tracking-eyebrow: 0.06em; /* ═══════════════════════════════════════════════════════════════════════ LINE HEIGHTS ═══════════════════════════════════════════════════════════════════════ */ --leading-tight: 1.05; /* Display headlines */ --leading-snug: 1.15; /* Section headlines */ --leading-normal: 1.4; /* Body text */ --leading-relaxed: 1.6; /* Long-form reading */ /* ═══════════════════════════════════════════════════════════════════════ FONT WEIGHTS ═══════════════════════════════════════════════════════════════════════ */ --weight-bold: 700; --weight-semibold: 600; --weight-medium: 500; --weight-regular: 400; /* ═══════════════════════════════════════════════════════════════════════ SPACING SCALE ═══════════════════════════════════════════════════════════════════════ */ --space-xs: clamp(4px, 0.5vw, 8px); --space-sm: clamp(8px, 1.5vw, 12px); --space-md: clamp(12px, 2vw, 16px); --space-lg: clamp(16px, 3vw, 24px); --space-xl: clamp(24px, 4vw, 40px); --space-2xl: clamp(32px, 6vw, 60px); /* Slide padding */ --padding-slide: clamp(24px, 6vw, 60px) clamp(20px, 5vw, 80px); /* ═══════════════════════════════════════════════════════════════════════ BORDER RADIUS ═══════════════════════════════════════════════════════════════════════ */ --radius-sm: clamp(6px, 1vw, 8px); --radius-md: clamp(8px, 1.5vw, 12px); --radius-lg: clamp(12px, 2vw, 16px); --radius-xl: clamp(16px, 2.5vw, 24px); /* ═══════════════════════════════════════════════════════════════════════ GRID GAPS ═══════════════════════════════════════════════════════════════════════ */ --gap-grid: clamp(16px, 3vw, 32px); --gap-cards: clamp(16px, 2.5vw, 24px); --gap-flow: clamp(12px, 2vw, 20px); /* ═══════════════════════════════════════════════════════════════════════ COLORS - Unified with withamplifier.com (Signal purple) ═══════════════════════════════════════════════════════════════════════ */ --color-accent: #5B4DE3; --color-accent-dim: rgba(91, 77, 227, 0.15); --color-accent-glow: rgba(91, 77, 227, 0.25); /* Semantic colors */ --color-success: #10B981; --color-warning: #F59E0B; --color-error: #EF4444; /* Text hierarchy */ --color-text: #ffffff; --color-text-secondary: rgba(255, 255, 255, 0.7); --color-text-muted: rgba(255, 255, 255, 0.5); --color-text-subtle: rgba(255, 255, 255, 0.3); /* Surfaces */ --color-bg: #0A0A0B; --color-surface: rgba(255, 255, 255, 0.04); --color-surface-hover: rgba(255, 255, 255, 0.08); --color-border: rgba(255, 255, 255, 0.1); --color-border-strong: rgba(255, 255, 255, 0.2); } /* ═══════════════════════════════════════════════════════════════════════════ BASE STYLES ═══════════════════════════════════════════════════════════════════════════ */ body { font-family: var(--font-body); background: var(--color-bg); color: var(--color-text); font-size: var(--fs-body); line-height: var(--leading-normal); letter-spacing: var(--tracking-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ═══════════════════════════════════════════════════════════════════════════ TYPOGRAPHY CLASSES ═══════════════════════════════════════════════════════════════════════════ */ .headline { font-family: var(--font-heading); font-size: var(--fs-display); font-weight: var(--weight-bold); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); color: var(--color-text); } .medium-headline { font-family: var(--font-heading); font-size: var(--fs-headline); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-headline); line-height: var(--leading-snug); } .section-label { font-family: var(--font-body); font-size: var(--fs-caption); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-accent); } .subhead { font-family: var(--font-body); font-size: var(--fs-subhead); font-weight: var(--weight-regular); color: var(--color-text-secondary); line-height: var(--leading-normal); } .card-title { font-family: var(--font-heading); font-size: var(--fs-title); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-headline); color: var(--color-accent); } .card-text { font-size: var(--fs-body); color: var(--color-text-secondary); line-height: var(--leading-relaxed); } /* ═══════════════════════════════════════════════════════════════════════════ CODE STYLING ═══════════════════════════════════════════════════════════════════════════ */ code, .code-block, pre { font-family: var(--font-mono); } .code-block { font-size: var(--fs-code); line-height: var(--leading-relaxed); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md); } .code-block-compact { font-size: var(--fs-code-sm); padding: var(--space-sm); } /* ═══════════════════════════════════════════════════════════════════════════ UTILITY CLASSES ═══════════════════════════════════════════════════════════════════════════ */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-accent { color: var(--color-accent); } .text-muted { color: var(--color-text-muted); } .text-secondary { color: var(--color-text-secondary); } .flex-center { display: flex; align-items: center; justify-content: center; } .big-stat { font-family: var(--font-heading); font-size: var(--fs-stat); font-weight: var(--weight-bold); letter-spacing: var(--tracking-display); line-height: 1; color: var(--color-accent); } .big-stat-inline { font-family: var(--font-heading); font-size: var(--fs-stat-sm); font-weight: var(--weight-bold); color: var(--color-accent); } /* ═══════════════════════════════════════════════════════════════════════════ RESPONSIVE ADJUSTMENTS ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 600px) { .force-stack-mobile { grid-template-columns: 1fr !important; } .hide-mobile { display: none !important; } } @media (hover: none) { .touch-target { min-height: 44px; min-width: 44px; } }