1/* CSS Variables for Theming */
2:root {
3 --primary-color: #3498db;
4 --primary-dark: #2980b9;
5 --secondary-color: #2ecc71;
6 --danger-color: #e74c3c;
7 --dark-color: #2c3e50;
8 --light-color: #ecf0f1;
9 --border-color: #bdc3c7;
10 --text-primary: #2c3e50;
11 --text-secondary: #7f8c8d;
12 --background: #ffffff;
13 --shadow: rgba(0, 0, 0, 0.1);
14 --transition-speed: 0.3s;
15 --max-width: 1200px;
16}
17
18/* Reset and Base Styles */
19* {
20 margin: 0;
21 padding: 0;
22 box-sizing: border-box;
23}
24
25body {
26 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
27 line-height: 1.6;
28 color: var(--text-primary);
29 background-color: var(--light-color);
30 min-height: 100vh;
31 display: flex;
32 flex-direction: column;
33}
34
35/* Container */
36.container {
37 max-width: var(--max-width);
38 margin: 0 auto;
39 padding: 0 20px;
40 width: 100%;
41}
42
43/* Header and Navigation */
44.header {
45 background-color: var(--dark-color);
46 box-shadow: 0 2px 10px var(--shadow);
47 position: sticky;
48 top: 0;
49 z-index: 1000;
50}
51
52.navbar {
53 padding: 1rem 0;
54}
55
56.navbar .container {
57 display: flex;
58 justify-content: space-between;
59 align-items: center;
60}
61
62.brand .logo {
63 color: var(--light-color);
64 font-size: 1.5rem;
65 font-weight: bold;
66 text-decoration: none;
67 transition: color var(--transition-speed);
68}
69
70.brand .logo:hover {
71 color: var(--primary-color);
72}
73
74.nav-menu {
75 display: flex;
76 list-style: none;
77 gap: 2rem;
78}
79
80.nav-link {
81 color: var(--light-color);
82 text-decoration: none;
83 font-weight: 500;
84 padding: 0.5rem 1rem;
85 border-radius: 4px;
86 transition: all var(--transition-speed);
87}
88
89.nav-link:hover,
90.nav-link.active {
91 background-color: var(--primary-color);
92 color: var(--background);
93}
94
95/* Hamburger Menu (Mobile) */
96.hamburger {
97 display: none;
98 flex-direction: column;
99 cursor: pointer;
100}
101
102.hamburger .bar {
103 width: 25px;
104 height: 3px;
105 background-color: var(--light-color);
106 margin: 3px 0;
107 transition: 0.3s;
108}
109
110/* Main Content */
111.main {
112 flex: 1;
113 padding: 2rem 0;
114}
115
116.app-content {
117 background-color: var(--background);
118 padding: 2rem;
119 border-radius: 8px;
120 box-shadow: 0 4px 6px var(--shadow);
121 min-height: 400px;
122}
123
124/* Page Transition Animations */
125.page-enter {
126 animation: fadeIn 0.4s ease-in;
127}
128
129.page-exit {
130 animation: fadeOut 0.3s ease-out;
131}
132
133@keyframes fadeIn {
134 from {
135 opacity: 0;
136 transform: translateY(20px);
137 }
138 to {
139 opacity: 1;
140 transform: translateY(0);
141 }
142}
143
144@keyframes fadeOut {
145 from {
146 opacity: 1;
147 }
148 to {
149 opacity: 0;
150 }
151}
152
153/* Footer */
154.footer {
155 background-color: var(--dark-color);
156 color: var(--light-color);
157 text-align: center;
158 padding: 1.5rem 0;
159 margin-top: auto;
160}
161
162/* Loading Overlay */
163.loading-overlay {
164 display: none;
165 position: fixed;
166 top: 0;
167 left: 0;
168 width: 100%;
169 height: 100%;
170 background-color: rgba(0, 0, 0, 0.5);
171 justify-content: center;
172 align-items: center;
173 z-index: 9999;
174}
175
176.loading-overlay.show {
177 display: flex;
178}
179
180.spinner {
181 width: 50px;
182 height: 50px;
183 border: 5px solid var(--light-color);
184 border-top-color: var(--primary-color);
185 border-radius: 50%;
186 animation: spin 1s linear infinite;
187}
188
189@keyframes spin {
190 to { transform: rotate(360deg); }
191}
192
193/* Component Styles */
194.card {
195 background: var(--background);
196 padding: 1.5rem;
197 margin: 1rem 0;
198 border-radius: 8px;
199 box-shadow: 0 2px 4px var(--shadow);
200 border-left: 4px solid var(--primary-color);
201}
202
203.btn {
204 display: inline-block;
205 padding: 0.75rem 1.5rem;
206 background-color: var(--primary-color);
207 color: var(--background);
208 text-decoration: none;
209 border-radius: 4px;
210 border: none;
211 cursor: pointer;
212 font-size: 1rem;
213 transition: background-color var(--transition-speed);
214}
215
216.btn:hover {
217 background-color: var(--primary-dark);
218}
219
220.btn-secondary {
221 background-color: var(--secondary-color);
222}
223
224/* Form Styles */
225.form-group {
226 margin-bottom: 1.5rem;
227}
228
229.form-label {
230 display: block;
231 margin-bottom: 0.5rem;
232 font-weight: 500;
233}
234
235.form-control {
236 width: 100%;
237 padding: 0.75rem;
238 border: 1px solid var(--border-color);
239 border-radius: 4px;
240 font-size: 1rem;
241 transition: border-color var(--transition-speed);
242}
243
244.form-control:focus {
245 outline: none;
246 border-color: var(--primary-color);
247}
248
249/* Mobile Responsive */
250@media screen and (max-width: 768px) {
251 .nav-menu {
252 position: fixed;
253 left: -100%;
254 top: 70px;
255 flex-direction: column;
256 background-color: var(--dark-color);
257 width: 100%;
258 text-align: center;
259 transition: 0.3s;
260 box-shadow: 0 10px 27px var(--shadow);
261 gap: 0;
262 }
263
264 .nav-menu.active {
265 left: 0;
266 }
267
268 .nav-item {
269 margin: 0;
270 }
271
272 .nav-link {
273 display: block;
274 padding: 1.5rem;
275 }
276
277 .hamburger {
278 display: flex;
279 }
280
281 .hamburger.active .bar:nth-child(2) {
282 opacity: 0;
283 }
284
285 .hamburger.active .bar:nth-child(1) {
286 transform: translateY(9px) rotate(45deg);
287 }
288
289 .hamburger.active .bar:nth-child(3) {
290 transform: translateY(-9px) rotate(-45deg);
291 }
292
293 .app-content {
294 padding: 1rem;
295 }
296}
297
298@media screen and (max-width: 480px) {
299 .brand .logo {
300 font-size: 1.2rem;
301 }
302
303 .app-content {
304 padding: 0.75rem;
305 }
306}