| |
| :root { |
| --font-sans: "Nunito Sans", sans-serif; |
| --font-size-base: 16px; |
| --line-height-base: 1.5; |
| --font-weight-light: 300; |
| --font-weight-bold: 700; |
|
|
| --color-primary: #2563eb; |
| --color-dark: #1e293b; |
| --color-light: #f9fafb; |
| --color-white: #ffffff; |
| --color-text: #374151; |
| --color-muted: #6b7280; |
| } |
|
|
| |
| body { |
| margin: 0; |
| font-family: var(--font-sans); |
| font-size: var(--font-size-base); |
| line-height: var(--line-height-base); |
| color: var(--color-text); |
| background-color: var(--color-white); |
| } |
|
|
| |
| .container { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 1rem; |
| } |
|
|
| .section { |
| padding: 4rem 1rem; |
| } |
|
|
| .text-center { |
| text-align: center; |
| } |
|
|
| |
| .hero-section { |
| position: relative; |
| height: 350px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| text-align: center; |
| color: white; |
| background: url('https://images.unsplash.com/photo-1581090763521-0ea28fe02f53?auto=format&fit=crop&w=1500&q=80') center/cover no-repeat; |
| transition: background 0.3s ease; |
| } |
|
|
| .overlay-gradient { |
| position: absolute; |
| inset: 0; |
| background: linear-gradient(135deg, rgba(107, 107, 107, 0.7), rgba(30, 41, 59, 0.8)); |
| z-index: 1; |
| } |
|
|
| .hero-content { |
| position: relative; |
| z-index: 2; |
| max-width: 800px; |
| padding: 0 1rem; |
| } |
|
|
| |
| .btn { |
| display: inline-block; |
| padding: 0.75rem 1.5rem; |
| font-weight: var(--font-weight-bold); |
| border-radius: 0.5rem; |
| text-decoration: none; |
| transition: all 0.2s ease; |
| } |
|
|
| .btn-primary { |
| background-color: var(--color-white); |
| color: var(--color-primary); |
| } |
|
|
| .btn-primary:hover { |
| background-color: #f0f4ff; |
| } |
|
|
| |
| .table { |
| width: 100%; |
| border-collapse: collapse; |
| } |
|
|
| .table th, |
| .table td { |
| padding: 1rem; |
| border-bottom: 1px solid #e5e7eb; |
| text-align: left; |
| } |
|
|
| .table tbody tr:nth-child(even) { |
| background-color: var(--color-light); |
| } |
|
|
| |
| .footer { |
| background-color: #111827; |
| color: white; |
| padding: 2rem 1rem; |
| text-align: center; |
| } |
|
|
