/* ==================================================================== CRITICAL CSS - Inline this in for optimal First Paint Keep this file under 5KB for best performance ==================================================================== */ :root { /* HSL Color System - Dynamic and maintainable */ --hue-primary: 217; --hue-accent: 187; --hue-success: 160; --hue-warning: 38; --hue-danger: 4; /* Primary colors using HSL */ --primary-h: var(--hue-primary); --primary-s: 91%; --primary-l: 60%; --primary-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l)); --primary-hover: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 10%)); --primary-glow: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5); /* Accent colors */ --accent-h: var(--hue-accent); --accent-s: 94%; --accent-l: 44%; --accent-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l)); /* Semantic colors */ --success-color: hsl(var(--hue-success), 74%, 39%); --warning-color: hsl(var(--hue-warning), 92%, 50%); --danger-color: hsl(var(--hue-danger), 84%, 60%); /* Typography */ --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'SF Mono', 'Fira Code', 'Monaco', 'Consolas', monospace; /* Spacing */ --border-radius: 16px; --border-radius-sm: 8px; --border-radius-lg: 24px; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-glow: 0 0 20px var(--primary-glow); /* Focus ring */ --focus-ring-color: var(--primary-color); --focus-ring-offset: 2px; /* Touch targets */ --touch-target-min: 44px; /* Safe areas for notched devices */ --safe-area-top: env(safe-area-inset-top, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px); /* Animation timing */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Transition durations */ --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; } /* Dark Theme */ [data-theme="dark"] { --background-color: hsl(222, 47%, 11%); --surface-color: hsl(217, 33%, 17%); --surface-hover: hsl(215, 25%, 27%); --text-primary: hsl(210, 40%, 98%); --text-secondary: hsl(215, 16%, 65%); --border-color: hsl(215, 25%, 27%); --bg-secondary: hsl(217, 33%, 17%); } /* Light Theme */ [data-theme="light"] { --background-color: hsl(210, 40%, 98%); --surface-color: hsl(0, 0%, 100%); --surface-hover: hsl(210, 40%, 96%); --text-primary: hsl(222, 47%, 11%); --text-secondary: hsl(215, 14%, 45%); --border-color: hsl(214, 32%, 91%); --bg-secondary: hsl(210, 40%, 96%); /* Adjusted shadows for light mode */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-glow: 0 0 20px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.2); } /* Reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-family); background-color: var(--background-color); color: var(--text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; } /* Critical Navbar Styles */ .navbar { background-color: rgba(15, 23, 42, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-color); padding: 1rem 0; position: sticky; top: 0; z-index: 50; } [data-theme="light"] .navbar { background-color: rgba(255, 255, 255, 0.9); } .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } .nav-content { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); text-decoration: none; display: flex; align-items: center; gap: 0.75rem; letter-spacing: -0.025em; } /* Critical Button Styles */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; border-radius: var(--border-radius); font-weight: 600; text-decoration: none; transition: all var(--duration-normal) var(--ease-out-expo); cursor: pointer; border: none; font-size: 0.95rem; white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)); color: white; box-shadow: 0 4px 12px var(--primary-glow); } /* Loading indicator for above-the-fold content */ .skeleton { background: linear-gradient(90deg, var(--surface-color) 0%, rgba(255, 255, 255, 0.05) 20%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 80%, var(--surface-color) 100%); background-size: 200% 100%; animation: shimmer 1.8s ease-in-out infinite; border-radius: var(--border-radius-sm); } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Accessibility */ .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; } @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; } }