| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
| :root { |
| --primary-color: #3b82f6; |
| --secondary-color: #8b5cf6; |
| } |
|
|
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
|
|
| body { |
| font-family: 'Inter', sans-serif; |
| line-height: 1.6; |
| } |
|
|
| .container { |
| max-width: 1200px; |
| } |
|
|
| .btn-primary { |
| background-color: var(--primary-color); |
| color: white; |
| border: none; |
| padding: 12px 24px; |
| border-radius: 8px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
|
|
| .btn-primary:hover { |
| background-color: #2563eb; |
| transform: translateY(-2px); |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); |
| } |
|
|
| .btn-secondary { |
| background-color: var(--secondary-color); |
| color: white; |
| border: none; |
| padding: 12px 24px; |
| border-radius: 8px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
|
|
| .btn-secondary:hover { |
| background-color: #7c3aed; |
| transform: translateY(-2px); |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); |
| } |
|
|
| .card { |
| background: white; |
| border-radius: 12px; |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); |
| padding: 24px; |
| transition: transform 0.3s ease, box-shadow 0.3s ease; |
| } |
|
|
| .card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); |
| } |
|
|
| .gradient-bg { |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); |
| } |
|
|
| .text-gradient { |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
|
|
| footer { |
| background-color: #f9fafb; |
| border-top: 1px solid #e5e7eb; |
| } |
|
|
| @media (max-width: 768px) { |
| .container { |
| padding: 0 16px; |
| } |
| |
| .card { |
| padding: 16px; |
| } |
| } |
