| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
|
|
| html { |
| scroll-behavior: smooth; |
| } |
|
|
| body { |
| font-family: 'Poppins', sans-serif; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| min-height: 100vh; |
| } |
|
|
| |
| .research-section { |
| background: white; |
| border-radius: 2rem; |
| padding: 3rem; |
| margin-bottom: 3rem; |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08); |
| border: 1px solid rgba(0, 0, 0, 0.05); |
| transition: all 0.3s ease; |
| animation: slide-in 0.6s ease-out; |
| } |
|
|
| .research-section:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 25px 80px rgba(0, 0, 0, 0.12); |
| } |
|
|
| .section-title { |
| font-size: 2.5rem; |
| font-weight: 800; |
| margin-bottom: 2rem; |
| display: flex; |
| align-items: center; |
| background: linear-gradient(90deg, #2563eb, #7c3aed); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
|
|
| .research-content { |
| font-size: 1.125rem; |
| line-height: 1.8; |
| color: #4b5563; |
| } |
|
|
| .research-content p { |
| margin-bottom: 1.5rem; |
| } |
|
|
| |
| .toc-item { |
| display: flex; |
| align-items: center; |
| padding: 1rem 1.5rem; |
| background: white; |
| border-radius: 1rem; |
| border: 2px solid transparent; |
| transition: all 0.3s ease; |
| text-decoration: none; |
| color: #374151; |
| font-weight: 500; |
| } |
|
|
| .toc-item:hover { |
| border-color: #3b82f6; |
| background: #f0f9ff; |
| transform: translateX(10px); |
| } |
|
|
| .toc-item span { |
| font-size: 1.25rem; |
| margin-right: 0.75rem; |
| } |
|
|
| |
| .architecture-diagram { |
| background: linear-gradient(135deg, #f8fafc, #f1f5f9); |
| border-radius: 1.5rem; |
| padding: 2rem; |
| margin: 2rem 0; |
| border: 1px solid #e2e8f0; |
| } |
|
|
| .arch-layer { |
| background: white; |
| border-radius: 1rem; |
| padding: 1.5rem; |
| margin-bottom: 1rem; |
| border-left: 4px solid #3b82f6; |
| transition: all 0.3s ease; |
| } |
|
|
| .arch-layer:hover { |
| transform: translateX(10px); |
| box-shadow: 0 10px 30px rgba(59, 130, 246, 0.15); |
| } |
|
|
| .arch-layer h3 { |
| color: #1e40af; |
| font-weight: 700; |
| margin-bottom: 0.5rem; |
| font-size: 1.25rem; |
| } |
|
|
| .arch-layer p { |
| color: #6b7280; |
| font-size: 1rem; |
| } |
|
|
| |
| .feature-card { |
| background: #f8fafc; |
| border-radius: 1rem; |
| padding: 1.5rem; |
| display: flex; |
| align-items: center; |
| transition: all 0.3s ease; |
| border: 1px solid #e2e8f0; |
| } |
|
|
| .feature-card:hover { |
| background: white; |
| transform: translateY(-3px); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| } |
|
|
| .feature-card i { |
| margin-right: 1rem; |
| flex-shrink: 0; |
| } |
|
|
| .feature-card strong { |
| color: #1f2937; |
| margin-right: 0.5rem; |
| } |
|
|
| |
| .tech-stack-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
| gap: 2rem; |
| margin: 2rem 0; |
| } |
|
|
| .tech-category { |
| background: #f9fafb; |
| border-radius: 1.5rem; |
| padding: 2rem; |
| border: 1px solid #e5e7eb; |
| } |
|
|
| .tech-category h3 { |
| color: #374151; |
| font-size: 1.5rem; |
| font-weight: 700; |
| margin-bottom: 1.5rem; |
| padding-bottom: 0.75rem; |
| border-bottom: 2px solid #3b82f6; |
| } |
|
|
| .tech-item { |
| background: white; |
| border-radius: 1rem; |
| padding: 1.5rem; |
| margin-bottom: 1rem; |
| border: 1px solid #e5e7eb; |
| transition: all 0.3s ease; |
| } |
|
|
| .tech-item:hover { |
| border-color: #3b82f6; |
| transform: translateY(-2px); |
| } |
|
|
| .tech-item h4 { |
| color: #1f2937; |
| font-size: 1.25rem; |
| font-weight: 600; |
| margin-bottom: 0.75rem; |
| } |
|
|
| .tech-stats { |
| display: flex; |
| gap: 1rem; |
| margin-bottom: 0.75rem; |
| flex-wrap: wrap; |
| } |
|
|
| .tech-stats .stat { |
| background: #e0f2fe; |
| color: #0369a1; |
| padding: 0.25rem 0.75rem; |
| border-radius: 9999px; |
| font-size: 0.875rem; |
| font-weight: 500; |
| } |
|
|
| .tech-item p { |
| color: #6b7280; |
| font-size: 0.95rem; |
| line-height: 1.5; |
| } |
|
|
| |
| .code-snippet { |
| background: #1e293b; |
| border-radius: 1rem; |
| padding: 2rem; |
| margin: 2rem 0; |
| overflow-x: auto; |
| position: relative; |
| } |
|
|
| .code-snippet::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 2px; |
| background: linear-gradient(90deg, #8b5cf6, #3b82f6); |
| border-radius: 9999px; |
| } |
|
|
| .code-snippet h4 { |
| color: #e2e8f0; |
| font-size: 1.25rem; |
| font-weight: 600; |
| margin-bottom: 1rem; |
| display: flex; |
| align-items: center; |
| } |
|
|
| .code-snippet h4::before { |
| content: '</>'; |
| margin-right: 0.75rem; |
| color: #8b5cf6; |
| font-weight: 700; |
| } |
|
|
| .code-snippet pre { |
| margin: 0; |
| } |
|
|
| .code-snippet code { |
| color: #cbd5e1; |
| font-family: 'Menlo', 'Monaco', 'Courier New', monospace; |
| font-size: 0.95rem; |
| line-height: 1.5; |
| } |
|
|
| .code-snippet .keyword { |
| color: #f472b6; |
| } |
|
|
| .code-snippet .string { |
| color: #34d399; |
| } |
|
|
| .code-snippet .comment { |
| color: #94a3b8; |
| } |
|
|
| |
| .btn-primary, |
| .btn-secondary { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| padding: 1rem 2rem; |
| border-radius: 9999px; |
| font-weight: 600; |
| font-size: 1.125rem; |
| text-decoration: none; |
| transition: all 0.3s ease; |
| gap: 0.75rem; |
| } |
|
|
| .btn-primary { |
| background: white; |
| color: #3b82f6; |
| box-shadow: 0 10px 30px rgba(59, 130, 246, 0.25); |
| } |
|
|
| .btn-primary:hover { |
| background: #f0f9ff; |
| transform: translateY(-3px) scale(1.05); |
| box-shadow: 0 20px 40px rgba(59, 130, 246, 0.35); |
| } |
|
|
| .btn-secondary { |
| background: rgba(255, 255, 255, 0.15); |
| color: white; |
| backdrop-filter: blur(10px); |
| border: 2px solid rgba(255, 255, 255, 0.3); |
| } |
|
|
| .btn-secondary:hover { |
| background: rgba(255, 255, 255, 0.25); |
| transform: translateY(-3px); |
| border-color: white; |
| } |
|
|
| |
| @keyframes fadeInUp { |
| from { |
| opacity: 0; |
| transform: translateY(30px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| @keyframes glowPulse { |
| 0%, 100% { |
| box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); |
| } |
| 50% { |
| box-shadow: 0 0 40px rgba(59, 130, 246, 0.6); |
| } |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .section-title { |
| font-size: 2rem; |
| } |
| |
| .research-section { |
| padding: 2rem; |
| border-radius: 1.5rem; |
| } |
| |
| .tech-stack-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .toc-item { |
| padding: 0.875rem 1rem; |
| } |
| } |
|
|
| @media (max-width: 480px) { |
| .section-title { |
| font-size: 1.75rem; |
| flex-direction: column; |
| align-items: flex-start; |
| } |
| |
| .section-title i { |
| margin-bottom: 0.5rem; |
| margin-right: 0; |
| } |
| |
| .feature-card { |
| flex-direction: column; |
| text-align: center; |
| align-items: center; |
| } |
| |
| .feature-card i { |
| margin-right: 0; |
| margin-bottom: 0.75rem; |
| } |
| } |
|
|
| |
| ::-webkit-scrollbar { |
| width: 10px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: #f1f5f9; |
| border-radius: 9999px; |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: linear-gradient(180deg, #3b82f6, #8b5cf6); |
| border-radius: 9999px; |
| } |
|
|
| ::-webkit-scrollbar-thumb:hover { |
| background: linear-gradient(180deg, #2563eb, #7c3aed); |
| } |
|
|
| |
| ::selection { |
| background: rgba(59, 130, 246, 0.3); |
| color: inherit; |
| } |
|
|
| |
| @media print { |
| .research-section { |
| break-inside: avoid; |
| box-shadow: none; |
| border: 1px solid #ddd; |
| } |
| |
| .btn-primary, |
| .btn-secondary, |
| .toc-item { |
| display: none; |
| } |
| } |
