Spaces:
Running
Running
| :root { | |
| --primary: #3b82f6; | |
| --primary-hover: #2563eb; | |
| --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%); | |
| --shadow-sm: 0 1px 3px rgba(0,0,0,0.1); | |
| --shadow-md: 0 4px 6px rgba(0,0,0,0.1); | |
| } | |
| body { | |
| padding: 0; | |
| margin: 0; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; | |
| background: var(--bg-gradient); | |
| min-height: 100vh; | |
| } | |
| header { | |
| background: var(--primary); | |
| color: white; | |
| padding: 1rem 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| box-shadow: var(--shadow-md); | |
| } | |
| .logo { | |
| font-weight: 700; | |
| font-size: 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| main { | |
| padding: 2rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .card-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 1.5rem; | |
| margin-top: 2rem; | |
| } | |
| .card { | |
| background: white; | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| box-shadow: var(--shadow-sm); | |
| transition: all 0.3s ease; | |
| border: none; | |
| } | |
| .card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .card h1 { | |
| font-size: 1.25rem; | |
| margin: 0 0 0.5rem 0; | |
| color: #1f2937; | |
| } | |
| .card p { | |
| color: #6b7280; | |
| font-size: 0.95rem; | |
| line-height: 1.5; | |
| margin: 0.5rem 0; | |
| } | |
| .card-icon { | |
| font-size: 1.5rem; | |
| color: var(--primary); | |
| margin-bottom: 1rem; | |
| } | |
| .btn { | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| padding: 0.5rem 1rem; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| font-size: 0.9rem; | |
| } | |
| .btn:hover { | |
| background: var(--primary-hover); | |
| } | |
| @media (max-width: 768px) { | |
| main { | |
| padding: 1rem; | |
| } | |
| .card-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |