| |
| |
| |
| |
| |
| |
| |
| |
|
|
| |
| |
| |
|
|
| :root { |
| |
| --primary: #10b981; |
| --primary-dark: #059669; |
| --primary-light: #6ee7b7; |
| --primary-lighter: #d1fae5; |
| |
| |
| --secondary: #8b5cf6; |
| --secondary-dark: #7c3aed; |
| --secondary-light: #a78bfa; |
| --secondary-lighter: #ede9fe; |
| |
| |
| --accent: #f59e0b; |
| --accent-dark: #d97706; |
| --accent-light: #fbbf24; |
| |
| |
| --success: #10b981; |
| --warning: #f59e0b; |
| --danger: #ef4444; |
| --info: #3b82f6; |
| |
| |
| --bg-dark: #0f172a; |
| --bg-darker: #0a0e27; |
| --bg-card: #1e293b; |
| --bg-card-hover: #334155; |
| --bg-overlay: rgba(15, 23, 42, 0.95); |
| |
| |
| --text-primary: #e2e8f0; |
| --text-secondary: #cbd5e1; |
| --text-muted: #94a3b8; |
| --text-disabled: #64748b; |
| |
| |
| --border: #475569; |
| --border-light: #64748b; |
| --border-lighter: #94a3b8; |
| |
| |
| --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); |
| --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); |
| --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); |
| --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15); |
| --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25); |
| --shadow-glow: 0 0 20px rgba(16, 185, 129, 0.3); |
| |
| |
| --space-xs: 0.25rem; |
| --space-sm: 0.5rem; |
| --space-md: 1rem; |
| --space-lg: 1.5rem; |
| --space-xl: 2rem; |
| --space-2xl: 3rem; |
| --space-3xl: 4rem; |
| |
| |
| --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| --font-mono: 'Courier New', monospace; |
| --font-size-xs: 0.75rem; |
| --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: 1.875rem; |
| --font-size-4xl: 2.25rem; |
| |
| |
| --line-height-tight: 1.2; |
| --line-height-normal: 1.5; |
| --line-height-relaxed: 1.75; |
| |
| |
| --radius-sm: 4px; |
| --radius-md: 8px; |
| --radius-lg: 12px; |
| --radius-xl: 16px; |
| --radius-full: 9999px; |
| |
| |
| --transition-fast: 150ms ease-out; |
| --transition-base: 300ms ease-out; |
| --transition-slow: 500ms ease-out; |
| |
| |
| --z-dropdown: 1000; |
| --z-modal: 1100; |
| --z-popover: 1200; |
| --z-tooltip: 1300; |
| --z-notification: 1400; |
| } |
|
|
| |
| @media (prefers-color-scheme: dark) { |
| :root { |
| color-scheme: dark; |
| } |
| } |
|
|
| |
| |
| |
|
|
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
|
|
| *::before, |
| *::after { |
| box-sizing: border-box; |
| } |
|
|
| html { |
| scroll-behavior: smooth; |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| } |
|
|
| body { |
| font-family: var(--font-family); |
| font-size: var(--font-size-base); |
| line-height: var(--line-height-normal); |
| color: var(--text-primary); |
| background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-darker) 100%); |
| background-attachment: fixed; |
| overflow-x: hidden; |
| min-height: 100vh; |
| } |
|
|
| |
| |
| |
|
|
| h1, h2, h3, h4, h5, h6 { |
| font-weight: 700; |
| line-height: var(--line-height-tight); |
| margin-bottom: var(--space-md); |
| color: var(--text-primary); |
| } |
|
|
| h1 { |
| font-size: var(--font-size-4xl); |
| background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
|
|
| h2 { |
| font-size: var(--font-size-3xl); |
| color: var(--primary); |
| } |
|
|
| h3 { |
| font-size: var(--font-size-2xl); |
| color: var(--primary); |
| } |
|
|
| h4 { |
| font-size: var(--font-size-xl); |
| } |
|
|
| h5 { |
| font-size: var(--font-size-lg); |
| } |
|
|
| h6 { |
| font-size: var(--font-size-base); |
| } |
|
|
| p { |
| margin-bottom: var(--space-md); |
| color: var(--text-secondary); |
| line-height: var(--line-height-relaxed); |
| } |
|
|
| a { |
| color: var(--primary); |
| text-decoration: none; |
| transition: color var(--transition-base); |
| } |
|
|
| a:hover { |
| color: var(--primary-light); |
| text-decoration: underline; |
| } |
|
|
| code { |
| font-family: var(--font-mono); |
| font-size: var(--font-size-sm); |
| background: var(--bg-card); |
| color: var(--accent); |
| padding: var(--space-xs) var(--space-sm); |
| border-radius: var(--radius-sm); |
| } |
|
|
| pre { |
| background: var(--bg-card); |
| color: var(--text-primary); |
| padding: var(--space-lg); |
| border-radius: var(--radius-md); |
| overflow-x: auto; |
| margin-bottom: var(--space-lg); |
| border-left: 4px solid var(--primary); |
| } |
|
|
| pre code { |
| background: none; |
| color: inherit; |
| padding: 0; |
| } |
|
|
| |
| |
| |
|
|
| header { |
| position: fixed; |
| top: 0; |
| width: 100%; |
| background: var(--bg-overlay); |
| backdrop-filter: blur(10px); |
| border-bottom: 2px solid var(--primary); |
| z-index: var(--z-dropdown); |
| box-shadow: var(--shadow-lg); |
| } |
|
|
| nav { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: var(--space-md) var(--space-lg); |
| max-width: 1400px; |
| margin: 0 auto; |
| width: 100%; |
| } |
|
|
| .logo { |
| font-size: var(--font-size-xl); |
| font-weight: 900; |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| display: flex; |
| align-items: center; |
| gap: var(--space-sm); |
| transition: transform var(--transition-base); |
| } |
|
|
| .logo:hover { |
| transform: scale(1.05); |
| } |
|
|
| .logo-icon { |
| font-size: var(--font-size-2xl); |
| animation: float 3s ease-in-out infinite; |
| } |
|
|
| @keyframes float { |
| 0%, 100% { transform: translateY(0px); } |
| 50% { transform: translateY(-10px); } |
| } |
|
|
| nav ul { |
| display: flex; |
| list-style: none; |
| gap: var(--space-xl); |
| align-items: center; |
| } |
|
|
| nav a { |
| color: var(--text-secondary); |
| font-weight: 500; |
| transition: color var(--transition-base); |
| position: relative; |
| } |
|
|
| nav a::after { |
| content: ''; |
| position: absolute; |
| bottom: -2px; |
| left: 0; |
| width: 0; |
| height: 2px; |
| background: var(--primary); |
| transition: width var(--transition-base); |
| } |
|
|
| nav a:hover { |
| color: var(--primary); |
| } |
|
|
| nav a:hover::after { |
| width: 100%; |
| } |
|
|
| |
| |
| |
|
|
| .btn { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: var(--space-sm); |
| padding: var(--space-md) var(--space-lg); |
| border-radius: var(--radius-md); |
| border: none; |
| cursor: pointer; |
| font-weight: 600; |
| font-size: var(--font-size-base); |
| transition: all var(--transition-base); |
| text-decoration: none; |
| white-space: nowrap; |
| user-select: none; |
| } |
|
|
| .btn:disabled { |
| opacity: 0.5; |
| cursor: not-allowed; |
| } |
|
|
| |
| .btn-primary { |
| background: var(--primary); |
| color: white; |
| box-shadow: var(--shadow-md); |
| } |
|
|
| .btn-primary:hover:not(:disabled) { |
| background: var(--primary-dark); |
| transform: translateY(-2px); |
| box-shadow: var(--shadow-glow); |
| } |
|
|
| .btn-primary:active:not(:disabled) { |
| transform: translateY(0); |
| } |
|
|
| |
| .btn-secondary { |
| background: transparent; |
| color: var(--primary); |
| border: 2px solid var(--primary); |
| } |
|
|
| .btn-secondary:hover:not(:disabled) { |
| background: rgba(16, 185, 129, 0.1); |
| transform: translateY(-2px); |
| } |
|
|
| |
| .btn-danger { |
| background: var(--danger); |
| color: white; |
| } |
|
|
| .btn-danger:hover:not(:disabled) { |
| background: #dc2626; |
| transform: translateY(-2px); |
| box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); |
| } |
|
|
| |
| .btn-success { |
| background: var(--success); |
| color: white; |
| } |
|
|
| .btn-success:hover:not(:disabled) { |
| background: #059669; |
| transform: translateY(-2px); |
| box-shadow: var(--shadow-glow); |
| } |
|
|
| |
| .btn-sm { |
| padding: var(--space-sm) var(--space-md); |
| font-size: var(--font-size-sm); |
| } |
|
|
| |
| .btn-lg { |
| padding: var(--space-lg) var(--space-2xl); |
| font-size: var(--font-size-lg); |
| } |
|
|
| |
| .btn-icon { |
| width: 40px; |
| height: 40px; |
| padding: 0; |
| border-radius: var(--radius-full); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| |
| |
| |
|
|
| .card { |
| background: var(--bg-card); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-lg); |
| padding: var(--space-lg); |
| transition: all var(--transition-base); |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .card::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 4px; |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); |
| opacity: 0; |
| transition: opacity var(--transition-base); |
| } |
|
|
| .card:hover { |
| border-color: var(--primary); |
| transform: translateY(-4px); |
| box-shadow: var(--shadow-xl); |
| } |
|
|
| .card:hover::before { |
| opacity: 1; |
| } |
|
|
| .card-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: var(--space-md); |
| padding-bottom: var(--space-md); |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .card-title { |
| font-size: var(--font-size-lg); |
| font-weight: 700; |
| color: var(--primary); |
| } |
|
|
| .card-body { |
| color: var(--text-secondary); |
| } |
|
|
| .card-footer { |
| margin-top: var(--space-lg); |
| padding-top: var(--space-lg); |
| border-top: 1px solid var(--border); |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
|
|
| |
| |
| |
|
|
| .form-group { |
| margin-bottom: var(--space-lg); |
| } |
|
|
| label { |
| display: block; |
| margin-bottom: var(--space-sm); |
| font-weight: 600; |
| color: var(--text-primary); |
| } |
|
|
| input, |
| textarea, |
| select { |
| width: 100%; |
| padding: var(--space-md); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-md); |
| background: var(--bg-dark); |
| color: var(--text-primary); |
| font-family: var(--font-family); |
| font-size: var(--font-size-base); |
| transition: all var(--transition-base); |
| } |
|
|
| input::placeholder, |
| textarea::placeholder { |
| color: var(--text-muted); |
| } |
|
|
| input:focus, |
| textarea:focus, |
| select:focus { |
| outline: none; |
| border-color: var(--primary); |
| box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); |
| background: rgba(16, 185, 129, 0.02); |
| } |
|
|
| input:disabled, |
| textarea:disabled, |
| select:disabled { |
| background: var(--bg-card); |
| color: var(--text-disabled); |
| cursor: not-allowed; |
| } |
|
|
| textarea { |
| resize: vertical; |
| min-height: 120px; |
| } |
|
|
| select { |
| cursor: pointer; |
| appearance: none; |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2310b981' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); |
| background-repeat: no-repeat; |
| background-position: right var(--space-md) center; |
| padding-right: var(--space-2xl); |
| } |
|
|
| |
| |
| |
|
|
| section { |
| padding: var(--space-3xl) var(--space-lg); |
| max-width: 1400px; |
| margin: 0 auto; |
| } |
|
|
| section:nth-child(odd) { |
| background: linear-gradient(180deg, rgba(139, 92, 246, 0.05) 0%, transparent 100%); |
| } |
|
|
| section:nth-child(even) { |
| background: linear-gradient(180deg, transparent 0%, rgba(16, 185, 129, 0.05) 100%); |
| } |
|
|
| .container { |
| max-width: 1400px; |
| margin: 0 auto; |
| padding: 0 var(--space-lg); |
| } |
|
|
| .grid { |
| display: grid; |
| gap: var(--space-lg); |
| } |
|
|
| .grid-2 { |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
| } |
|
|
| .grid-3 { |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
| } |
|
|
| .grid-4 { |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| } |
|
|
| .flex { |
| display: flex; |
| gap: var(--space-md); |
| } |
|
|
| .flex-center { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .flex-between { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| } |
|
|
| .flex-column { |
| flex-direction: column; |
| } |
|
|
| |
| |
| |
|
|
| .hero { |
| margin-top: 80px; |
| padding: var(--space-3xl) var(--space-lg); |
| text-align: center; |
| background: linear-gradient(180deg, rgba(16, 185, 129, 0.1) 0%, transparent 100%); |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .hero-content { |
| max-width: 900px; |
| margin: 0 auto; |
| } |
|
|
| .hero h1 { |
| font-size: 3.5rem; |
| margin-bottom: var(--space-md); |
| line-height: 1.2; |
| } |
|
|
| .hero-subtitle { |
| font-size: var(--font-size-xl); |
| color: var(--text-secondary); |
| margin-bottom: var(--space-lg); |
| font-weight: 300; |
| } |
|
|
| .hero-description { |
| font-size: var(--font-size-lg); |
| color: var(--text-muted); |
| margin-bottom: var(--space-lg); |
| line-height: var(--line-height-relaxed); |
| } |
|
|
| .hero-buttons { |
| display: flex; |
| gap: var(--space-md); |
| justify-content: center; |
| flex-wrap: wrap; |
| margin-bottom: var(--space-3xl); |
| } |
|
|
| .stats { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| gap: var(--space-lg); |
| margin-top: var(--space-3xl); |
| padding-top: var(--space-3xl); |
| border-top: 1px solid var(--border); |
| } |
|
|
| .stat { |
| text-align: center; |
| } |
|
|
| .stat-number { |
| font-size: 2.5rem; |
| font-weight: bold; |
| color: var(--primary); |
| margin-bottom: var(--space-sm); |
| } |
|
|
| .stat-label { |
| color: var(--text-muted); |
| font-size: var(--font-size-sm); |
| } |
|
|
| |
| |
| |
|
|
| .badge { |
| display: inline-block; |
| padding: var(--space-xs) var(--space-sm); |
| border-radius: var(--radius-full); |
| font-size: var(--font-size-xs); |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
|
|
| .badge-primary { |
| background: rgba(16, 185, 129, 0.2); |
| color: var(--primary); |
| } |
|
|
| .badge-success { |
| background: rgba(16, 185, 129, 0.2); |
| color: var(--success); |
| } |
|
|
| .badge-warning { |
| background: rgba(245, 158, 11, 0.2); |
| color: var(--warning); |
| } |
|
|
| .badge-danger { |
| background: rgba(239, 68, 68, 0.2); |
| color: var(--danger); |
| } |
|
|
| .badge-info { |
| background: rgba(59, 130, 246, 0.2); |
| color: var(--info); |
| } |
|
|
| .status-indicator { |
| display: inline-block; |
| width: 8px; |
| height: 8px; |
| border-radius: var(--radius-full); |
| margin-right: var(--space-sm); |
| animation: pulse 2s infinite; |
| } |
|
|
| .status-live { |
| background: var(--success); |
| } |
|
|
| .status-active { |
| background: var(--warning); |
| } |
|
|
| .status-ready { |
| background: var(--info); |
| } |
|
|
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| } |
|
|
| |
| |
| |
|
|
| .modal-overlay { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: rgba(0, 0, 0, 0.7); |
| backdrop-filter: blur(4px); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| z-index: var(--z-modal); |
| opacity: 0; |
| visibility: hidden; |
| transition: all var(--transition-base); |
| } |
|
|
| .modal-overlay.active { |
| opacity: 1; |
| visibility: visible; |
| } |
|
|
| .modal { |
| background: var(--bg-card); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-lg); |
| padding: var(--space-2xl); |
| max-width: 500px; |
| width: 90%; |
| box-shadow: var(--shadow-2xl); |
| transform: scale(0.95); |
| transition: transform var(--transition-base); |
| } |
|
|
| .modal-overlay.active .modal { |
| transform: scale(1); |
| } |
|
|
| .modal-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: var(--space-lg); |
| padding-bottom: var(--space-lg); |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .modal-title { |
| font-size: var(--font-size-xl); |
| font-weight: 700; |
| } |
|
|
| .modal-close { |
| background: none; |
| border: none; |
| color: var(--text-muted); |
| font-size: var(--font-size-lg); |
| cursor: pointer; |
| transition: color var(--transition-base); |
| } |
|
|
| .modal-close:hover { |
| color: var(--text-primary); |
| } |
|
|
| .modal-body { |
| margin-bottom: var(--space-lg); |
| } |
|
|
| .modal-footer { |
| display: flex; |
| gap: var(--space-md); |
| justify-content: flex-end; |
| } |
|
|
| |
| |
| |
|
|
| .alert { |
| padding: var(--space-lg); |
| border-radius: var(--radius-md); |
| border-left: 4px solid; |
| margin-bottom: var(--space-lg); |
| display: flex; |
| gap: var(--space-md); |
| align-items: flex-start; |
| } |
|
|
| .alert-success { |
| background: rgba(16, 185, 129, 0.1); |
| border-color: var(--success); |
| color: var(--text-primary); |
| } |
|
|
| .alert-warning { |
| background: rgba(245, 158, 11, 0.1); |
| border-color: var(--warning); |
| color: var(--text-primary); |
| } |
|
|
| .alert-danger { |
| background: rgba(239, 68, 68, 0.1); |
| border-color: var(--danger); |
| color: var(--text-primary); |
| } |
|
|
| .alert-info { |
| background: rgba(59, 130, 246, 0.1); |
| border-color: var(--info); |
| color: var(--text-primary); |
| } |
|
|
| .alert-icon { |
| font-size: var(--font-size-lg); |
| flex-shrink: 0; |
| } |
|
|
| .alert-close { |
| margin-left: auto; |
| background: none; |
| border: none; |
| color: var(--text-muted); |
| cursor: pointer; |
| transition: color var(--transition-base); |
| } |
|
|
| .alert-close:hover { |
| color: var(--text-primary); |
| } |
|
|
| |
| |
| |
|
|
| table { |
| width: 100%; |
| border-collapse: collapse; |
| margin-bottom: var(--space-lg); |
| } |
|
|
| thead { |
| background: var(--bg-card); |
| border-bottom: 2px solid var(--border); |
| } |
|
|
| th { |
| padding: var(--space-md); |
| text-align: left; |
| font-weight: 700; |
| color: var(--primary); |
| } |
|
|
| td { |
| padding: var(--space-md); |
| border-bottom: 1px solid var(--border); |
| color: var(--text-secondary); |
| } |
|
|
| tbody tr:hover { |
| background: rgba(16, 185, 129, 0.05); |
| } |
|
|
| |
| |
| |
|
|
| footer { |
| background: var(--bg-darker); |
| border-top: 1px solid var(--border); |
| padding: var(--space-3xl) var(--space-lg); |
| margin-top: var(--space-3xl); |
| } |
|
|
| .footer-content { |
| max-width: 1400px; |
| margin: 0 auto; |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| gap: var(--space-lg); |
| margin-bottom: var(--space-lg); |
| } |
|
|
| .footer-section h3 { |
| color: var(--primary); |
| margin-bottom: var(--space-md); |
| font-weight: bold; |
| } |
|
|
| .footer-section ul { |
| list-style: none; |
| } |
|
|
| .footer-section ul li { |
| margin-bottom: var(--space-sm); |
| } |
|
|
| .footer-section a { |
| color: var(--text-secondary); |
| transition: color var(--transition-base); |
| } |
|
|
| .footer-section a:hover { |
| color: var(--primary); |
| } |
|
|
| .footer-bottom { |
| border-top: 1px solid var(--border); |
| padding-top: var(--space-lg); |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| flex-wrap: wrap; |
| gap: var(--space-md); |
| } |
|
|
| .footer-credits { |
| color: var(--text-muted); |
| font-size: var(--font-size-sm); |
| } |
|
|
| .social-links { |
| display: flex; |
| gap: var(--space-md); |
| } |
|
|
| .social-link { |
| width: 40px; |
| height: 40px; |
| background: var(--bg-card); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-full); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: var(--text-secondary); |
| text-decoration: none; |
| transition: all var(--transition-base); |
| font-size: var(--font-size-lg); |
| } |
|
|
| .social-link:hover { |
| background: var(--primary); |
| color: white; |
| border-color: var(--primary); |
| transform: translateY(-2px); |
| } |
|
|
| |
| |
| |
|
|
| @keyframes fadeIn { |
| from { |
| opacity: 0; |
| transform: translateY(20px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| @keyframes slideInLeft { |
| from { |
| opacity: 0; |
| transform: translateX(-30px); |
| } |
| to { |
| opacity: 1; |
| transform: translateX(0); |
| } |
| } |
|
|
| @keyframes slideInRight { |
| from { |
| opacity: 0; |
| transform: translateX(30px); |
| } |
| to { |
| opacity: 1; |
| transform: translateX(0); |
| } |
| } |
|
|
| @keyframes scaleIn { |
| from { |
| opacity: 0; |
| transform: scale(0.95); |
| } |
| to { |
| opacity: 1; |
| transform: scale(1); |
| } |
| } |
|
|
| @keyframes shimmer { |
| 0% { |
| background-position: -1000px 0; |
| } |
| 100% { |
| background-position: 1000px 0; |
| } |
| } |
|
|
| @keyframes glow { |
| 0%, 100% { |
| box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); |
| } |
| 50% { |
| box-shadow: 0 0 40px rgba(16, 185, 129, 0.6); |
| } |
| } |
|
|
| .fade-in { |
| animation: fadeIn 0.6s ease-out; |
| } |
|
|
| .slide-in-left { |
| animation: slideInLeft 0.6s ease-out; |
| } |
|
|
| .slide-in-right { |
| animation: slideInRight 0.6s ease-out; |
| } |
|
|
| .scale-in { |
| animation: scaleIn 0.6s ease-out; |
| } |
|
|
| .glow { |
| animation: glow 2s ease-in-out infinite; |
| } |
|
|
| |
| |
| |
|
|
| .skeleton { |
| background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%); |
| background-size: 1000px 100%; |
| animation: shimmer 2s infinite; |
| border-radius: var(--radius-md); |
| } |
|
|
| .skeleton-text { |
| height: 1rem; |
| margin-bottom: var(--space-sm); |
| } |
|
|
| .skeleton-avatar { |
| width: 40px; |
| height: 40px; |
| border-radius: var(--radius-full); |
| } |
|
|
| .spinner { |
| display: inline-block; |
| width: 20px; |
| height: 20px; |
| border: 3px solid var(--border); |
| border-top-color: var(--primary); |
| border-radius: var(--radius-full); |
| animation: spin 0.8s linear infinite; |
| } |
|
|
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
|
|
| |
| |
| |
|
|
| @media (max-width: 1024px) { |
| section { |
| padding: var(--space-2xl) var(--space-lg); |
| } |
| |
| h1 { |
| font-size: 2.5rem; |
| } |
| |
| h2 { |
| font-size: 1.875rem; |
| } |
| |
| .grid-2, |
| .grid-3, |
| .grid-4 { |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| } |
| } |
|
|
| @media (max-width: 768px) { |
| header { |
| position: relative; |
| } |
| |
| nav { |
| flex-direction: column; |
| gap: var(--space-md); |
| } |
| |
| nav ul { |
| flex-direction: column; |
| gap: var(--space-md); |
| width: 100%; |
| } |
| |
| nav a { |
| display: block; |
| padding: var(--space-md); |
| } |
| |
| .hero { |
| margin-top: 0; |
| padding: var(--space-2xl) var(--space-md); |
| } |
| |
| .hero h1 { |
| font-size: 2rem; |
| } |
| |
| .hero-buttons { |
| flex-direction: column; |
| } |
| |
| .btn { |
| width: 100%; |
| } |
| |
| .stats { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| |
| .grid-2, |
| .grid-3, |
| .grid-4 { |
| grid-template-columns: 1fr; |
| } |
| |
| .footer-bottom { |
| flex-direction: column; |
| text-align: center; |
| } |
| |
| .modal { |
| width: 95%; |
| padding: var(--space-lg); |
| } |
| } |
|
|
| @media (max-width: 480px) { |
| :root { |
| --font-size-base: 0.9rem; |
| --space-lg: 1rem; |
| --space-xl: 1.5rem; |
| } |
| |
| h1 { |
| font-size: 1.5rem; |
| } |
| |
| h2 { |
| font-size: 1.25rem; |
| } |
| |
| .hero-subtitle { |
| font-size: var(--font-size-base); |
| } |
| |
| .stats { |
| grid-template-columns: 1fr; |
| } |
| |
| .btn { |
| padding: var(--space-sm) var(--space-md); |
| } |
| |
| table { |
| font-size: var(--font-size-sm); |
| } |
| |
| th, td { |
| padding: var(--space-sm); |
| } |
| } |
|
|
| |
| |
| |
|
|
| |
| *:focus-visible { |
| outline: 2px solid var(--primary); |
| outline-offset: 2px; |
| } |
|
|
| |
| @media (prefers-reduced-motion: reduce) { |
| * { |
| animation-duration: 0.01ms !important; |
| animation-iteration-count: 1 !important; |
| transition-duration: 0.01ms !important; |
| } |
| } |
|
|
| |
| @media (prefers-contrast: more) { |
| :root { |
| --border: #ffffff; |
| --text-primary: #ffffff; |
| --text-secondary: #e0e0e0; |
| } |
| } |
|
|
| |
| |
| |
|
|
| @media print { |
| body { |
| background: white; |
| color: black; |
| } |
| |
| header, |
| footer, |
| .btn, |
| .modal-overlay { |
| display: none; |
| } |
| |
| section { |
| page-break-inside: avoid; |
| } |
| |
| a { |
| text-decoration: underline; |
| } |
| } |
|
|
| |
| |
| |
|
|
| .hidden { |
| display: none !important; |
| } |
|
|
| .visible { |
| display: block !important; |
| } |
|
|
| .invisible { |
| visibility: hidden; |
| } |
|
|
| .sr-only { |
| position: absolute; |
| width: 1px; |
| height: 1px; |
| padding: 0; |
| margin: -1px; |
| overflow: hidden; |
| clip: rect(0, 0, 0, 0); |
| white-space: nowrap; |
| border-width: 0; |
| } |
|
|
| .text-center { |
| text-align: center; |
| } |
|
|
| .text-left { |
| text-align: left; |
| } |
|
|
| .text-right { |
| text-align: right; |
| } |
|
|
| .text-primary { |
| color: var(--primary); |
| } |
|
|
| .text-secondary { |
| color: var(--text-secondary); |
| } |
|
|
| .text-muted { |
| color: var(--text-muted); |
| } |
|
|
| .text-danger { |
| color: var(--danger); |
| } |
|
|
| .text-success { |
| color: var(--success); |
| } |
|
|
| .text-warning { |
| color: var(--warning); |
| } |
|
|
| .text-info { |
| color: var(--info); |
| } |
|
|
| .font-bold { |
| font-weight: 700; |
| } |
|
|
| .font-semibold { |
| font-weight: 600; |
| } |
|
|
| .font-normal { |
| font-weight: 400; |
| } |
|
|
| .font-light { |
| font-weight: 300; |
| } |
|
|
| .mt-0 { margin-top: 0; } |
| .mt-xs { margin-top: var(--space-xs); } |
| .mt-sm { margin-top: var(--space-sm); } |
| .mt-md { margin-top: var(--space-md); } |
| .mt-lg { margin-top: var(--space-lg); } |
| .mt-xl { margin-top: var(--space-xl); } |
| .mt-2xl { margin-top: var(--space-2xl); } |
|
|
| .mb-0 { margin-bottom: 0; } |
| .mb-xs { margin-bottom: var(--space-xs); } |
| .mb-sm { margin-bottom: var(--space-sm); } |
| .mb-md { margin-bottom: var(--space-md); } |
| .mb-lg { margin-bottom: var(--space-lg); } |
| .mb-xl { margin-bottom: var(--space-xl); } |
| .mb-2xl { margin-bottom: var(--space-2xl); } |
|
|
| .p-0 { padding: 0; } |
| .p-xs { padding: var(--space-xs); } |
| .p-sm { padding: var(--space-sm); } |
| .p-md { padding: var(--space-md); } |
| .p-lg { padding: var(--space-lg); } |
| .p-xl { padding: var(--space-xl); } |
| .p-2xl { padding: var(--space-2xl); } |
|
|
| .opacity-0 { opacity: 0; } |
| .opacity-25 { opacity: 0.25; } |
| .opacity-50 { opacity: 0.5; } |
| .opacity-75 { opacity: 0.75; } |
| .opacity-100 { opacity: 1; } |
|
|
| .rounded { border-radius: var(--radius-md); } |
| .rounded-sm { border-radius: var(--radius-sm); } |
| .rounded-lg { border-radius: var(--radius-lg); } |
| .rounded-full { border-radius: var(--radius-full); } |
|
|
| .shadow { box-shadow: var(--shadow-md); } |
| .shadow-sm { box-shadow: var(--shadow-sm); } |
| .shadow-lg { box-shadow: var(--shadow-lg); } |
| .shadow-xl { box-shadow: var(--shadow-xl); } |
| .shadow-glow { box-shadow: var(--shadow-glow); } |
|
|
| .cursor-pointer { cursor: pointer; } |
| .cursor-default { cursor: default; } |
| .cursor-not-allowed { cursor: not-allowed; } |
|
|
| .select-none { user-select: none; } |
| .select-text { user-select: text; } |
|
|
| .overflow-hidden { overflow: hidden; } |
| .overflow-auto { overflow: auto; } |
| .overflow-x-auto { overflow-x: auto; } |
|
|
| .whitespace-nowrap { white-space: nowrap; } |
| .whitespace-normal { white-space: normal; } |
|
|
| .truncate { |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| .line-clamp-1 { |
| display: -webkit-box; |
| -webkit-line-clamp: 1; |
| -webkit-box-orient: vertical; |
| overflow: hidden; |
| } |
|
|
| .line-clamp-2 { |
| display: -webkit-box; |
| -webkit-line-clamp: 2; |
| -webkit-box-orient: vertical; |
| overflow: hidden; |
| } |
|
|
| .line-clamp-3 { |
| display: -webkit-box; |
| -webkit-line-clamp: 3; |
| -webkit-box-orient: vertical; |
| overflow: hidden; |
| } |
|
|
| |
| |
| |
|
|
