| @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap'); |
|
|
| body { |
| font-family: 'Space Mono', monospace; |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| } |
|
|
| .card-container { |
| background-color: #ffffff; |
| border-radius: 1rem; |
| box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); |
| overflow: hidden; |
| transition: background-color 0.3s; |
| } |
| .dark .card-container { |
| background-color: #1f2937; |
| } |
|
|
| .tab-button { |
| background-color: transparent; |
| font-weight: 500; |
| color: #4b5563; |
| padding: 1rem; |
| border: none; |
| border-bottom: 3px solid transparent; |
| transition: all 0.2s ease-in-out; |
| cursor: pointer; |
| width: 100%; |
| } |
| .dark .tab-button { |
| color: #9ca3af; |
| } |
|
|
| .tab-button:hover { |
| background-color: #f9fafb; |
| color: #111827; |
| } |
| .dark .tab-button:hover { |
| background-color: #374151; |
| color: #ffffff; |
| } |
|
|
| .tab-button.active { |
| color: #3b82f6; |
| border-bottom-color: #3b82f6; |
| font-weight: 700; |
| } |
| .dark .tab-button.active { |
| color: #60a5fa; |
| border-bottom-color: #60a5fa; |
| } |
|
|
| .content-section h1 { |
| font-size: 2.25rem; |
| font-weight: 700; |
| margin-bottom: 1.5rem; |
| color: #111827; |
| } |
| .dark .content-section h1 { |
| color: #ffffff; |
| } |
|
|
| .content-section h2 { |
| font-size: 1.5rem; |
| font-weight: 700; |
| margin-top: 2.5rem; |
| margin-bottom: 1rem; |
| padding-bottom: 0.5rem; |
| border-bottom: 1px solid #e5e7eb; |
| color: #111827; |
| } |
| .dark .content-section h2 { |
| border-bottom-color: #4b5563; |
| color: #ffffff; |
| } |
|
|
| .content-section h3 { |
| font-size: 1.25rem; |
| font-weight: 700; |
| margin-top: 2rem; |
| margin-bottom: 0.75rem; |
| color: #1f2937; |
| } |
| .dark .content-section h3 { |
| color: #d1d5db; |
| } |
|
|
| .content-section p, |
| .content-section ul { |
| margin-bottom: 1.25rem; |
| line-height: 1.8; |
| color: #374151; |
| } |
| .dark .content-section p, |
| .dark .content-section ul { |
| color: #9ca3af; |
| } |
|
|
| .content-section ul { |
| list-style-type: disc; |
| padding-left: 1.5rem; |
| } |
|
|
| .content-section strong { |
| font-weight: 700; |
| color: #111827; |
| } |
| .dark .content-section strong { |
| color: #f9fafb; |
| } |
|
|
| |
| .custom-scrollbar::-webkit-scrollbar { |
| width: 8px; |
| } |
| .custom-scrollbar::-webkit-scrollbar-track { |
| background: #f1f1f1; |
| } |
| .dark .custom-scrollbar::-webkit-scrollbar-track { |
| background: #1f2937; |
| } |
| .custom-scrollbar::-webkit-scrollbar-thumb { |
| background: #d1d5db; |
| border-radius: 10px; |
| } |
| .dark .custom-scrollbar::-webkit-scrollbar-thumb { |
| background: #4b5563; |
| } |
| .custom-scrollbar::-webkit-scrollbar-thumb:hover { |
| background: #9ca3af; |
| } |
| .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover { |
| background: #6b7280; |
| } |
|
|
| .lang-button { |
| border: 1px solid #d1d5db; |
| padding: 0.25rem 0.5rem; |
| border-radius: 0.375rem; |
| font-size: 0.875rem; |
| color: #4b5563; |
| transition: all 0.2s ease-in-out; |
| } |
| .dark .lang-button { |
| border-color: #4b5563; |
| color: #9ca3af; |
| } |
| .lang-button.active { |
| background-color: #3b82f6; |
| color: white; |
| border-color: #3b82f6; |
| } |
| .dark .lang-button.active { |
| background-color: #60a5fa; |
| border-color: #60a5fa; |
| } |
|
|
| .invite-button { |
| display: inline-block; |
| background-color: #4f46e5; |
| color: white; |
| padding: 0.75rem 1.5rem; |
| border-radius: 0.5rem; |
| font-weight: 700; |
| text-decoration: none; |
| transition: background-color 0.2s; |
| margin-top: 1rem; |
| } |
| .invite-button:hover { |
| background-color: #4338ca; |
| } |
| .dark .invite-button { |
| background-color: #6366f1; |
| } |
| .dark .invite-button:hover { |
| background-color: #818cf8; |
| } |
|
|
