/* 🎯 BASE.CSS - Critical CSS optimized for performance */ /* Load inline in for instant render - 2KB max */ /* CSS Reset minimal */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Root Variables - Design System */ :root { /* Colors */ --primary: #1a1a2e; --secondary: #16213e; --accent: #00e5ff; --success: #4caf50; --warning: #ff9800; --error: #f44336; --text-primary: #ffffff; --text-secondary: #b0bec5; --border: rgba(255,255,255,0.1); /* Spacing - 8px system */ --space-xs: 0.5rem; /* 8px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2rem; /* 32px */ --space-xl: 3rem; /* 48px */ /* Typography */ --font-primary: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 2rem; /* Shadows */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.1); --shadow-md: 0 4px 16px rgba(0,0,0,0.15); --shadow-lg: 0 8px 32px rgba(0,0,0,0.2); /* Transitions */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; --transition-slow: 0.3s ease; } /* Base Typography */ body { font-family: var(--font-primary); font-size: var(--font-size-base); color: var(--text-primary); background: var(--primary); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Layout Containers */ .container { max-width: 900px; margin: 0 auto; padding: var(--space-sm); } @media (min-width: 768px) { .container { padding: var(--space-md); } } @media (min-width: 1200px) { .container { padding: var(--space-lg); max-width: 1200px; } } /* Critical Components - Inline for FCP */ .card { background: var(--secondary); border: 1px solid var(--border); border-radius: 12px; padding: var(--space-md); box-shadow: var(--shadow-sm); transition: transform var(--transition-base), box-shadow var(--transition-base); } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; /* Touch-friendly */ padding: var(--space-sm) var(--space-md); font-size: 16px; /* Prevent zoom on iOS */ font-weight: 500; border: none; border-radius: 8px; cursor: pointer; transition: all var(--transition-base); text-decoration: none; white-space: nowrap; position: relative; overflow: hidden; } .button:focus { outline: 2px solid var(--accent); outline-offset: 2px; } .button-primary { background: var(--accent); color: var(--primary); } .button-primary:hover { background: #00d4e8; transform: translateY(-1px); } .button-secondary { background: var(--secondary); color: var(--text-primary); border: 1px solid var(--border); } .button-secondary:hover { background: rgba(255,255,255,0.05); border-color: var(--accent); } .button-danger { background: var(--error); color: white; } .button-danger:hover { background: #d32f2f; } /* Input Components */ .input { width: 100%; min-height: 44px; padding: var(--space-sm); font-size: 16px; /* Prevent zoom on iOS */ background: var(--secondary); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); transition: border-color var(--transition-base); } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.1); } .input::placeholder { color: var(--text-secondary); } /* Status Messages */ .status { padding: var(--space-sm); border-radius: 6px; font-size: var(--font-size-sm); font-weight: 500; margin: var(--space-sm) 0; } .status-success { background: rgba(76, 175, 80, 0.1); color: #4caf50; border: 1px solid rgba(76, 175, 80, 0.2); } .status-error { background: rgba(244, 67, 54, 0.1); color: #f44336; border: 1px solid rgba(244, 67, 54, 0.2); } .status-info { background: rgba(0, 229, 255, 0.1); color: var(--accent); border: 1px solid rgba(0, 229, 255, 0.2); } /* Loading States */ .loading { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--border); border-radius: 50%; border-top: 2px solid var(--accent); animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Utility Classes */ .text-center { text-align: center; } .text-sm { font-size: var(--font-size-sm); } .text-lg { font-size: var(--font-size-lg); } .font-bold { font-weight: 700; } .font-mono { font-family: var(--font-mono); } .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Grid System */ .grid { display: grid; gap: var(--space-md); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 768px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } } /* Performance optimizations */ .gpu-accelerated { will-change: transform; transform: translateZ(0); } /* Reduce motion for accessibility */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Dark mode support */ @media (prefers-color-scheme: light) { :root { --primary: #f5f5f5; --secondary: #ffffff; --text-primary: #333333; --text-secondary: #666666; --border: rgba(0,0,0,0.1); } }