Spaces:
Running
Running
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| background-color: #1D1F21; | |
| color: #F3F4F6; | |
| min-height: 100vh; | |
| padding: 1rem; | |
| } | |
| header, footer { text-align: center; } | |
| header { | |
| padding: 1rem; | |
| background-color: #2B3035; | |
| border-radius: 12px; | |
| margin-bottom: 1rem; | |
| } | |
| footer { | |
| padding: 1rem; | |
| background-color: #2B3035; | |
| border-radius: 12px; | |
| margin-top: 2rem; | |
| font-size: 0.85rem; | |
| color: #B0B0B0; | |
| } | |
| .card { | |
| background-color: #2B3035; | |
| border-radius: 12px; | |
| padding: 1rem; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.5); | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| } | |
| .card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 8px 24px rgba(0,0,0,0.6); | |
| } | |
| .price { | |
| color: #F59E0B; | |
| font-weight: 600; | |
| } | |
| .bonus { | |
| color: #10B981; | |
| font-weight: 500; | |
| } | |
| input[type="number"], input[type="text"], select { | |
| border-radius: 8px; | |
| padding: 0.5rem; | |
| border: 1px solid #374151; | |
| background-color: #1D1F21; | |
| color: #F3F4F6; | |
| width: 100%; | |
| margin-bottom: 0.5rem; | |
| } | |
| button { | |
| background-color: #F59E0B; | |
| color: #1D1F21; | |
| font-weight: 600; | |
| padding: 0.75rem; | |
| border-radius: 8px; | |
| width: 100%; | |
| transition: background-color 0.2s; | |
| } | |
| button:hover { background-color: #D97706; } | |
| .tab-active { border-bottom: 3px solid #F59E0B; font-weight: 600; } | |
| /* Modal */ | |
| .modal-bg { | |
| display: none; | |
| position: fixed; | |
| z-index: 50; | |
| left: 0; top: 0; | |
| width: 100%; height: 100%; | |
| background-color: rgba(0,0,0,0.6); | |
| } | |
| .modal-content { | |
| background-color: #2B3035; | |
| margin: 5% auto; | |
| padding: 1.5rem; | |
| border-radius: 12px; | |
| max-width: 600px; | |
| color: #F3F4F6; | |
| box-shadow: 0 8px 24px rgba(0,0,0,0.8); | |
| white-space: pre-line; | |
| } | |
| .modal-header { font-weight: 700; font-size: 1.2rem; margin-bottom: 1rem; } | |
| .modal-close { | |
| float: right; | |
| font-weight: bold; | |
| cursor: pointer; | |
| color: #F59E0B; | |
| } |