/* Base styles and resets */ :root { /* Colors */ --color-primary: #4a90e2; --color-primary-dark: #2a6fc9; --color-text: #333; --color-text-light: #666; --color-bg: #f8f9fa; --color-border: #e9ecef; --color-white: #fff; --color-black: #000; /* Typography */ --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; --font-size-base: 1rem; --line-height-base: 1.5; /* Spacing */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; /* Border radius */ --border-radius-sm: 4px; --border-radius-md: 8px; --border-radius-lg: 12px; /* Transitions */ --transition-base: all 0.2s ease; --transition-slow: all 0.3s ease; } /* Reset and base styles */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { height: 100%; font-size: 16px; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } body { margin: 0; min-height: 100%; font-family: var(--font-family); line-height: var(--line-height-base); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Main content */ .container { max-width: 1200px; margin: 0 auto; padding: 6rem 1.5rem 2rem; /* Add top padding to account for fixed header */ min-height: calc(100vh - 200px); /* Ensure footer stays at bottom */ } /* Sections */ section { margin: 2rem 0; padding: 2rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } section h2 { color: var(--color-primary); margin-top: 0; margin-bottom: 1.5rem; font-size: 2rem; } section p { color: var(--color-text); line-height: 1.6; margin-bottom: 1.5rem; } .main-heading { font-size: 2.5rem; margin: 0 0 2rem 0; color: var(--color-text); font-weight: 700; line-height: 1.2; display: flex; align-items: center; justify-content: center; gap: 1rem; text-align: center; } .main-heading .mic-icon { display: inline-flex; animation: pulse 2s infinite; transform-origin: center; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } /* Typography */ h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: var(--spacing-md); font-weight: 600; line-height: 1.2; } p { margin-top: 0; margin-bottom: var(--spacing-md); } a { color: var(--color-primary); text-decoration: none; transition: var(--transition-base); } a:hover { color: var(--color-primary-dark); text-decoration: underline; } /* Images */ img { max-width: 100%; height: auto; vertical-align: middle; border-style: none; } /* Lists */ ul, ol { padding-left: var(--spacing-lg); margin-bottom: var(--spacing-md); } /* Loading animation */ .app-loading { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; background: var(--color-white); z-index: 9999; transition: opacity var(--transition-slow); text-align: center; padding: 2rem; color: var(--color-text); } .app-loading > div:first-child { margin-bottom: 1rem; font-size: 2rem; } .app-loading.hidden { opacity: 0; pointer-events: none; } .app-content { opacity: 1; transition: opacity var(--transition-slow); } /* This class can be used for initial fade-in if needed */ .app-content.initial-load { opacity: 0; } .app-content.loaded { opacity: 1; } /* Utility classes */ .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; }