|
23 | 23 | .about-header h1 { |
24 | 24 | font-size: 3rem; |
25 | 25 | font-weight: 700; |
26 | | - color: #1f2937; |
| 26 | + color: var(--text-primary); |
27 | 27 | margin: 1rem 0 0.75rem 0; |
28 | 28 | letter-spacing: -0.5px; |
29 | 29 | } |
30 | 30 |
|
31 | 31 | .about-header .tagline { |
32 | 32 | font-size: 1.25rem; |
33 | | - color: #6b7280; |
| 33 | + color: var(--text-tertiary); |
34 | 34 | margin: 0; |
35 | 35 | font-weight: 400; |
36 | 36 | } |
37 | 37 |
|
38 | 38 | .about-intro { |
39 | | - background: #e5e9f4; |
| 39 | + background: var(--bg-primary); |
40 | 40 | padding: 3rem; |
41 | 41 | border-radius: 24px; |
42 | 42 | margin-bottom: 4rem; |
43 | 43 | box-shadow: |
44 | | - inset 8px 8px 16px #d1d5db, |
45 | | - inset -8px -8px 16px #ffffff; |
| 44 | + inset 8px 8px 16px var(--shadow-dark), |
| 45 | + inset -8px -8px 16px var(--shadow-light); |
46 | 46 | } |
47 | 47 |
|
48 | 48 | .about-intro p { |
49 | 49 | font-size: 1.15rem; |
50 | 50 | line-height: 1.9; |
51 | | - color: #374151; |
| 51 | + color: var(--text-secondary); |
52 | 52 | margin: 0; |
53 | 53 | text-align: center; |
54 | 54 | max-width: 900px; |
|
63 | 63 | } |
64 | 64 |
|
65 | 65 | .stat-card { |
66 | | - background: #e5e9f4; |
| 66 | + background: var(--bg-primary); |
67 | 67 | padding: 2.5rem 2rem; |
68 | 68 | border-radius: 20px; |
69 | 69 | text-align: center; |
70 | 70 | transition: all 0.3s ease; |
71 | 71 | box-shadow: |
72 | | - 8px 8px 16px #d1d5db, |
73 | | - -8px -8px 16px #ffffff; |
| 72 | + 8px 8px 16px var(--shadow-dark), |
| 73 | + -8px -8px 16px var(--shadow-light); |
74 | 74 | position: relative; |
75 | 75 | overflow: hidden; |
76 | 76 | } |
|
82 | 82 | left: -50%; |
83 | 83 | width: 200%; |
84 | 84 | height: 200%; |
85 | | - background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%); |
86 | | - opacity: 0; |
| 85 | + background: radial-gradient(circle, var(--accent-color) 0%, transparent 70%); |
| 86 | + opacity: 0.1; |
87 | 87 | transition: opacity 0.3s ease; |
88 | 88 | } |
89 | 89 |
|
|
94 | 94 | .stat-card:hover { |
95 | 95 | transform: translateY(-4px) scale(1.02); |
96 | 96 | box-shadow: |
97 | | - 12px 12px 24px #d1d5db, |
98 | | - -12px -12px 24px #ffffff; |
| 97 | + 12px 12px 24px var(--shadow-dark), |
| 98 | + -12px -12px 24px var(--shadow-light); |
99 | 99 | } |
100 | 100 |
|
101 | 101 | .stat-number { |
102 | 102 | font-size: 3rem; |
103 | 103 | font-weight: 800; |
104 | | - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| 104 | + background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-hover) 100%); |
105 | 105 | -webkit-background-clip: text; |
106 | 106 | -webkit-text-fill-color: transparent; |
107 | 107 | background-clip: text; |
|
111 | 111 |
|
112 | 112 | .stat-label { |
113 | 113 | font-size: 0.95rem; |
114 | | - color: #6b7280; |
| 114 | + color: var(--text-tertiary); |
115 | 115 | text-transform: uppercase; |
116 | 116 | letter-spacing: 1px; |
117 | 117 | font-weight: 600; |
|
124 | 124 | .section-title { |
125 | 125 | font-size: 1.75rem; |
126 | 126 | font-weight: 700; |
127 | | - color: #1f2937; |
| 127 | + color: var(--text-primary); |
128 | 128 | margin-bottom: 2.5rem; |
129 | 129 | text-align: center; |
130 | 130 | text-transform: uppercase; |
|
141 | 141 | transform: translateX(-50%); |
142 | 142 | width: 60px; |
143 | 143 | height: 3px; |
144 | | - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| 144 | + background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-hover) 100%); |
145 | 145 | border-radius: 2px; |
146 | 146 | } |
147 | 147 |
|
|
152 | 152 | } |
153 | 153 |
|
154 | 154 | .about-card { |
155 | | - background: #e5e9f4; |
| 155 | + background: var(--bg-primary); |
156 | 156 | padding: 2.5rem; |
157 | 157 | border-radius: 24px; |
158 | 158 | cursor: pointer; |
159 | 159 | transition: all 0.3s ease; |
160 | 160 | text-decoration: none; |
161 | | - color: #1f2937; |
| 161 | + color: var(--text-primary); |
162 | 162 | display: flex; |
163 | 163 | flex-direction: column; |
164 | 164 | position: relative; |
165 | 165 | overflow: hidden; |
166 | 166 | box-shadow: |
167 | | - 8px 8px 16px #d1d5db, |
168 | | - -8px -8px 16px #ffffff; |
| 167 | + 8px 8px 16px var(--shadow-dark), |
| 168 | + -8px -8px 16px var(--shadow-light); |
169 | 169 | } |
170 | 170 |
|
171 | 171 | .about-card::before { |
|
175 | 175 | left: 0; |
176 | 176 | right: 0; |
177 | 177 | height: 4px; |
178 | | - background: linear-gradient(90deg, var(--accent-color, #667eea), var(--accent-color, #764ba2)); |
| 178 | + background: linear-gradient(90deg, var(--accent-color), var(--accent-hover)); |
179 | 179 | transform: scaleX(0); |
180 | 180 | transition: transform 0.3s ease; |
181 | 181 | } |
|
187 | 187 | .about-card:hover { |
188 | 188 | transform: translateY(-6px); |
189 | 189 | box-shadow: |
190 | | - 16px 16px 32px #d1d5db, |
191 | | - -16px -16px 32px #ffffff; |
| 190 | + 16px 16px 32px var(--shadow-dark), |
| 191 | + -16px -16px 32px var(--shadow-light); |
192 | 192 | } |
193 | 193 |
|
194 | 194 | .about-card:active { |
195 | 195 | transform: translateY(-2px); |
196 | 196 | box-shadow: |
197 | | - inset 4px 4px 8px #d1d5db, |
198 | | - inset -4px -4px 8px #ffffff; |
| 197 | + inset 4px 4px 8px var(--shadow-dark), |
| 198 | + inset -4px -4px 8px var(--shadow-light); |
199 | 199 | } |
200 | 200 |
|
201 | 201 | .card-icon { |
202 | 202 | width: 64px; |
203 | 203 | height: 64px; |
204 | | - background: #fff; |
| 204 | + background: var(--bg-tertiary); |
205 | 205 | border-radius: 16px; |
206 | 206 | display: flex; |
207 | 207 | align-items: center; |
208 | 208 | justify-content: center; |
209 | 209 | margin: 0 auto 1.75rem auto; |
210 | 210 | box-shadow: |
211 | | - 4px 4px 8px #d1d5db, |
212 | | - -4px -4px 8px #ffffff; |
| 211 | + 4px 4px 8px var(--shadow-dark), |
| 212 | + -4px -4px 8px var(--shadow-light); |
213 | 213 | font-size: 1.75rem; |
214 | | - color: var(--accent-color, #667eea); |
| 214 | + color: var(--accent-color); |
215 | 215 | transition: all 0.3s ease; |
216 | 216 | flex-shrink: 0; |
217 | 217 | } |
218 | 218 |
|
219 | 219 | .about-card:hover .card-icon { |
220 | 220 | transform: scale(1.1) rotate(5deg); |
221 | 221 | box-shadow: |
222 | | - 6px 6px 12px #d1d5db, |
223 | | - -6px -6px 12px #ffffff; |
| 222 | + 6px 6px 12px var(--shadow-dark), |
| 223 | + -6px -6px 12px var(--shadow-light); |
224 | 224 | } |
225 | 225 |
|
226 | 226 | .about-card { |
|
231 | 231 | .card-title { |
232 | 232 | font-size: 1.35rem; |
233 | 233 | font-weight: 700; |
234 | | - color: #1f2937; |
| 234 | + color: var(--text-primary); |
235 | 235 | margin: 0 0 1rem 0; |
236 | 236 | line-height: 1.3; |
237 | 237 | } |
238 | 238 |
|
239 | 239 | .card-content { |
240 | 240 | font-size: 1rem; |
241 | | - color: #6b7280; |
| 241 | + color: var(--text-tertiary); |
242 | 242 | line-height: 1.7; |
243 | 243 | margin: 0; |
244 | 244 | } |
|
254 | 254 | } |
255 | 255 |
|
256 | 256 | .feature-item { |
257 | | - background: #e5e9f4; |
| 257 | + background: var(--bg-primary); |
258 | 258 | padding: 2.5rem 2rem; |
259 | 259 | border-radius: 20px; |
260 | 260 | text-align: center; |
261 | 261 | transition: all 0.3s ease; |
262 | 262 | box-shadow: |
263 | | - 8px 8px 16px #d1d5db, |
264 | | - -8px -8px 16px #ffffff; |
| 263 | + 8px 8px 16px var(--shadow-dark), |
| 264 | + -8px -8px 16px var(--shadow-light); |
265 | 265 | } |
266 | 266 |
|
267 | 267 | .feature-item:hover { |
268 | 268 | transform: translateY(-4px); |
269 | 269 | box-shadow: |
270 | | - 12px 12px 24px #d1d5db, |
271 | | - -12px -12px 24px #ffffff; |
| 270 | + 12px 12px 24px var(--shadow-dark), |
| 271 | + -12px -12px 24px var(--shadow-light); |
272 | 272 | } |
273 | 273 |
|
274 | 274 | .feature-icon { |
|
284 | 284 | .feature-title { |
285 | 285 | font-size: 1.1rem; |
286 | 286 | font-weight: 600; |
287 | | - color: #1f2937; |
| 287 | + color: var(--text-primary); |
288 | 288 | margin: 0 0 0.5rem 0; |
289 | 289 | } |
290 | 290 |
|
291 | 291 | .feature-desc { |
292 | 292 | font-size: 0.95rem; |
293 | | - color: #6b7280; |
| 293 | + color: var(--text-tertiary); |
294 | 294 | line-height: 1.6; |
295 | 295 | margin: 0; |
296 | 296 | } |
|
341 | 341 | </style> |
342 | 342 | {{ partial "aboutseo.html" . }} |
343 | 343 | </head> |
344 | | -<body style="background-color: #e5e9f4;"> |
| 344 | +<body> |
345 | 345 | {{ partial "skip-link.html" . }} |
346 | 346 | <main id="main-content" role="main"> |
347 | 347 | <div class="MainButtonParent"> |
@@ -459,5 +459,6 @@ <h3 class="card-title">{{ .title }}</h3> |
459 | 459 | </main> |
460 | 460 | {{ partial "footer.html" . }} |
461 | 461 | <script src="/js/feedback.js"></script> |
| 462 | + <script src="/js/theme.js"></script> |
462 | 463 | </body> |
463 | 464 | </html> |
0 commit comments