global.css raw
1 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
2 :root {
3 --primary: #98a76c;
4 --primary-hover: #83915d;
5 --primary-light: #dce4c8;
6 --primary-pale: #f4f7ee;
7 --text: #2c2c2c;
8 --text-light: #666;
9 --bg: #fafaf8;
10 --bg-alt: #f0f4e8;
11 --white: #fff;
12 --shadow: 0 2px 12px rgba(0,0,0,0.08);
13 --radius: 8px;
14 --max-w: 1200px;
15 }
16 html { scroll-behavior: smooth; }
17 body {
18 font-family: 'Roboto', Tahoma, Geneva, sans-serif;
19 color: var(--text);
20 background: var(--bg);
21 line-height: 1.6;
22 -webkit-font-smoothing: antialiased;
23 }
24 h1, h2, h3, h4 { font-family: 'Roboto Condensed', 'Roboto', Tahoma, sans-serif; font-weight: 600; line-height: 1.2; }
25 a { color: var(--primary); text-decoration: none; }
26 a:hover { color: var(--primary); }
27 img { max-width: 100%; height: auto; display: block; }
28 .container { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; }
29
30 /* header */
31 .site-header {
32 background: var(--white);
33 border-bottom: 1px solid #eee;
34 position: sticky;
35 top: 0;
36 z-index: 100;
37 }
38 .header-inner {
39 display: flex;
40 align-items: center;
41 justify-content: space-between;
42 height: 70px;
43 }
44 .logo img { height: 45px; width: auto; }
45 .main-nav { display: flex; gap: 32px; }
46 .main-nav a {
47 font-size: 14px;
48 font-weight: 500;
49 text-transform: uppercase;
50 letter-spacing: 1px;
51 color: var(--text);
52 transition: color 0.2s;
53 }
54 .main-nav a:hover, .main-nav a.active { color: var(--primary); }
55 .header-actions { display: flex; gap: 12px; align-items: center; }
56 .cart-btn, .auth-btn {
57 background: none;
58 border: none;
59 cursor: pointer;
60 padding: 8px;
61 position: relative;
62 color: var(--text);
63 }
64 .cart-count {
65 position: absolute;
66 top: 0;
67 right: 0;
68 background: var(--primary);
69 color: var(--white);
70 font-size: 11px;
71 font-weight: 700;
72 width: 18px;
73 height: 18px;
74 border-radius: 50%;
75 display: flex;
76 align-items: center;
77 justify-content: center;
78 }
79
80 /* hero */
81 .hero {
82 position: relative;
83 min-height: 100vh;
84 display: flex;
85 align-items: center;
86 justify-content: center;
87 overflow: hidden;
88 }
89 .hero-bg {
90 position: absolute;
91 inset: -10% 0;
92 background: url('/images/hero-bg.jpg') center/cover;
93 will-change: transform;
94 z-index: 0;
95 }
96
97 /* home page: header overlays hero, transparent bg, centered 2x logo */
98 .header.home {
99 position: absolute;
100 top: 0;
101 left: 0;
102 right: 0;
103 z-index: 100;
104 background: transparent;
105 box-shadow: none;
106 }
107 .header.home .header-inner {
108 justify-content: center;
109 }
110 .header.home .logo img {
111 height: 75px;
112 margin-top: 1em;
113 }
114 .nav-row {
115 display: flex;
116 align-items: center;
117 justify-content: center;
118 width: 100%;
119 max-width: 1200px;
120 margin-top: 0.5em;
121 padding: 0 20px;
122 gap: 32px;
123 }
124 .nav-row .home-nav {
125 display: flex;
126 gap: 32px;
127 justify-content: center;
128 }
129 .nav-row .home-nav a {
130 color: var(--text);
131 font-weight: 400;
132 font-size: 14px;
133 text-decoration: none;
134 text-transform: uppercase;
135 }
136 .nav-row .home-nav a.active { color: var(--primary); }
137 .nav-row .home-nav a:hover { color: var(--primary); }
138 .nav-row .header-actions {
139 display: flex;
140 gap: 12px;
141 align-items: center;
142 }
143 .header.home .header-inner {
144 flex-direction: column;
145 justify-content: center;
146 height: auto;
147 padding: 2em 0 0;
148 }
149 .header.home .hamburger { color: var(--text); position: absolute; left: 20px; top: 2em; }
150 @media (max-width: 768px) {
151 .nav-row { flex-direction: column; }
152 .nav-row .home-nav { flex-wrap: wrap; gap: 16px; }
153 .nav-row .header-actions { margin-left: 0; margin-top: 0.5rem; }
154 .header.home .main-nav {
155 display: flex;
156 flex-direction: column;
157 position: fixed;
158 top: 0;
159 left: -280px;
160 width: 260px;
161 height: 100vh;
162 height: 100dvh;
163 background: #fff;
164 box-shadow: 4px 0 24px rgba(0,0,0,0.12);
165 z-index: 1001;
166 padding: 80px 24px 32px;
167 gap: 16px;
168 transition: left 0.3s ease;
169 }
170 .header.home .main-nav.open { left: 0; }
171 .header.home .logo img { height: 70px; }
172 .header.home .header-actions { position: static; transform: none; margin-top: 0.5rem; }
173 }
174 .header.home .icon-btn { color: var(--text); }
175 .header.home .icon-btn:hover { color: var(--primary); }
176 .header.home .icon-btn.active { color: var(--primary); }
177 .hero-content {
178 position: relative;
179 z-index: 1;
180 color: var(--text);
181 text-align: center;
182 padding: 0 20px;
183 }
184 .hero-title {
185 font-family: Tahoma, Geneva, sans-serif;
186 font-size: clamp(2.2rem, 6vw, 4.5rem);
187 font-weight: 500;
188 margin-bottom: 16px;
189 line-height: 1.1;
190 letter-spacing: 0.02em;
191 }
192 .hero-subtitle {
193 font-family: 'Roboto', sans-serif;
194 font-weight: 300;
195 font-size: 1.15rem;
196 margin-bottom: 32px;
197 line-height: 1.7;
198 color: var(--text);
199 }
200 .btn-hero {
201 display: inline-block;
202 background: var(--primary);
203 color: var(--white);
204 border: none;
205 padding: 12px 32px;
206 font-family: 'Roboto Condensed', sans-serif;
207 font-size: 0.95rem;
208 font-weight: 300;
209 text-transform: uppercase;
210 text-decoration: none;
211 border-radius: 4px;
212 transition: background 0.2s;
213 }
214 .btn-hero:hover { background: var(--primary-hover); color: var(--white); }
215
216 /* about page hero */
217 .about-hero {
218 position: relative;
219 min-height: 45vh;
220 display: flex;
221 align-items: center;
222 justify-content: center;
223 overflow: hidden;
224 margin-top: 0;
225 }
226 .about-hero-bg {
227 position: absolute;
228 inset: -10% 0;
229 background-size: cover;
230 background-position: center;
231 background-repeat: no-repeat;
232 will-change: transform;
233 z-index: 0;
234 }
235 .about-hero-bg::before {
236 content: '';
237 position: absolute;
238 inset: 0;
239 background: rgba(0,0,0,0.35);
240 z-index: 1;
241 }
242 .about-hero-content {
243 position: relative;
244 z-index: 2;
245 text-align: center;
246 }
247 .about-hero-title {
248 font-family: Tahoma, Geneva, sans-serif;
249 font-size: clamp(2rem, 5vw, 3.5rem);
250 font-weight: 500;
251 color: var(--white);
252 }
253
254 .about-content {
255 position: relative;
256 overflow: hidden;
257 padding-top: 0;
258 }
259 .about-content-bg {
260 position: absolute;
261 inset: 0;
262 background-size: cover;
263 background-position: center;
264 background-repeat: no-repeat;
265 z-index: 0;
266 }
267 .about-content .content-page {
268 position: relative;
269 z-index: 1;
270 color: var(--text);
271 padding: 3rem 2rem;
272 }
273 .about-content .content-page h2,
274 .about-content .content-page h3,
275 .about-content .content-page p,
276 .about-content .content-page li { color: var(--text); }
277 .about-content .content-page h3 { font-family: 'Roboto Condensed', sans-serif; font-weight: 600; font-size: 1.2rem; margin-top: 1em; }
278
279 /* buttons */
280 .btn {
281 display: inline-flex;
282 align-items: center;
283 justify-content: center;
284 padding: 12px 28px;
285 border-radius: var(--radius);
286 font-weight: 600;
287 font-size: 14px;
288 cursor: pointer;
289 transition: all 0.2s;
290 border: 2px solid transparent;
291 -webkit-appearance: none;
292 appearance: none;
293 text-decoration: none;
294 text-transform: uppercase;
295 letter-spacing: 0.5px;
296 }
297 .btn-primary {
298 background: var(--primary);
299 color: var(--white);
300 border-color: var(--primary);
301 }
302 .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--white); }
303 .btn-outline {
304 background: transparent;
305 border-color: var(--primary);
306 color: var(--primary);
307 }
308 .btn-outline:hover { background: var(--primary); color: var(--white); }
309 .btn-sm { padding: 8px 16px; font-size: 12px; }
310 .btn-lg { padding: 16px 36px; font-size: 16px; }
311
312 /* sections */
313 .section { padding: 80px 0; }
314 .section-alt { background: var(--bg-alt); }
315 .section-title {
316 text-align: center;
317 font-size: 2rem;
318 margin-bottom: 48px;
319 color: var(--primary);
320 }
321
322 /* product grid */
323 .product-grid {
324 display: grid;
325 grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
326 gap: 24px;
327 }
328 .product-card {
329 background: var(--white);
330 border-radius: var(--radius);
331 overflow: hidden;
332 box-shadow: var(--shadow);
333 transition: transform 0.2s, box-shadow 0.2s;
334 display: flex;
335 flex-direction: column;
336 }
337 .product-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
338 .product-card-image {
339 aspect-ratio: 1;
340 overflow: hidden;
341 background: var(--primary-pale);
342 }
343 .product-card-image img {
344 width: 100%;
345 height: 100%;
346 object-fit: cover;
347 transition: transform 0.3s;
348 }
349 .product-card:hover .product-card-image img { transform: scale(1.05); }
350 .product-card-body {
351 padding: 16px;
352 flex: 1;
353 display: flex;
354 flex-direction: column;
355 gap: 8px;
356 }
357 .product-card-body h3 { font-size: 1.1rem; font-family: 'Roboto Condensed', sans-serif; }
358 .product-price { font-weight: 600; color: var(--primary); font-size: 1.1rem; }
359 .product-card-body .btn { margin-top: auto; }
360
361 /* about preview */
362 .about-preview {
363 display: grid;
364 grid-template-columns: 1fr 1fr;
365 gap: 60px;
366 align-items: center;
367 }
368 .about-preview-text h2 { font-size: 2rem; margin-bottom: 20px; color: var(--primary); }
369 .about-preview-text p { margin-bottom: 24px; color: var(--text-light); line-height: 1.8; }
370 .about-preview-image img { border-radius: var(--radius); }
371
372 /* page header */
373 .page-header {
374 background: var(--primary);
375 color: var(--white);
376 padding: 60px 0;
377 text-align: center;
378 }
379 .page-header h1 { font-size: 2.5rem; margin-bottom: 8px; }
380 .page-header p { opacity: 0.8; }
381
382 /* shop layout */
383 .shop-layout { display: grid; grid-template-columns: 220px 1fr; gap: 40px; }
384 .shop-sidebar h3 { margin-bottom: 16px; font-family: 'Roboto', sans-serif; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; }
385 .category-list { list-style: none; }
386 .category-list li { margin-bottom: 8px; }
387 .category-list a {
388 display: block;
389 padding: 8px 12px;
390 border-radius: 6px;
391 font-size: 14px;
392 transition: background 0.2s;
393 }
394 .category-list a:hover, .category-list a.active { background: var(--primary-pale); color: var(--primary); }
395
396 /* product detail */
397 .product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
398 .product-detail-image { border-radius: var(--radius); overflow: hidden; background: var(--primary-pale); }
399 .product-detail-info h1 { font-size: 2rem; margin-bottom: 12px; }
400 .product-price-large { font-size: 1.5rem; font-weight: 700; color: var(--primary); margin-bottom: 20px; }
401 .product-description { color: var(--text-light); line-height: 1.8; margin-bottom: 32px; }
402 .product-actions { display: flex; gap: 16px; align-items: center; }
403 .qty-selector {
404 display: flex;
405 align-items: center;
406 border: 2px solid #ddd;
407 border-radius: var(--radius);
408 overflow: hidden;
409 }
410 .qty-selector button {
411 width: 40px;
412 height: 40px;
413 border: none;
414 background: var(--bg);
415 cursor: pointer;
416 font-size: 18px;
417 font-weight: 600;
418 color: var(--text);
419 }
420 .qty-selector button:hover { background: var(--primary-pale); }
421 .qty-selector input {
422 width: 50px;
423 height: 40px;
424 text-align: center;
425 border: none;
426 border-left: 2px solid #ddd;
427 border-right: 2px solid #ddd;
428 font-size: 16px;
429 font-weight: 600;
430 }
431
432 /* cart */
433 .cart-items { display: flex; flex-direction: column; gap: 16px; }
434 .cart-item {
435 display: grid;
436 grid-template-columns: 80px 1fr auto auto auto;
437 gap: 16px;
438 align-items: center;
439 padding: 16px;
440 background: var(--white);
441 border-radius: var(--radius);
442 box-shadow: var(--shadow);
443 }
444 .cart-item img { border-radius: 6px; width: 80px; height: 80px; object-fit: cover; }
445 .cart-item-info h3 { font-size: 1rem; font-family: 'Roboto', sans-serif; }
446 .cart-item-info p { font-size: 14px; color: var(--text-light); }
447 .cart-item-qty { display: flex; align-items: center; gap: 8px; }
448 .cart-item-qty button {
449 width: 32px;
450 height: 32px;
451 border: none;
452 border-radius: 6px;
453 background: #000;
454 color: #fff;
455 cursor: pointer;
456 font-size: 16px;
457 }
458 .cart-item-qty button:hover { background: #333; }
459 .cart-item-total { font-weight: 600; }
460 .cart-item-remove {
461 background: none;
462 border: none;
463 font-size: 24px;
464 cursor: pointer;
465 color: #999;
466 padding: 4px;
467 }
468 .cart-item-remove:hover { color: #e74c3c; }
469 .cart-summary {
470 margin-top: 32px;
471 padding: 24px;
472 background: var(--white);
473 border-radius: var(--radius);
474 box-shadow: var(--shadow);
475 display: flex;
476 justify-content: space-between;
477 align-items: center;
478 }
479 .cart-total { font-size: 1.3rem; font-weight: 700; }
480
481 /* checkout */
482 .checkout-layout { display: grid; grid-template-columns: 1fr 350px; gap: 40px; align-items: start; }
483 .checkout-form h2 { font-size: 1.3rem; margin-bottom: 20px; margin-top: 32px; }
484 .checkout-form h2:first-child { margin-top: 0; }
485 .form-group { margin-bottom: 16px; }
486 .form-group label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
487 .form-group input, .form-group select {
488 width: 100%;
489 padding: 12px;
490 border: 2px solid #ddd;
491 border-radius: var(--radius);
492 font-size: 15px;
493 transition: border-color 0.2s;
494 }
495 .form-group input:focus, .form-group select:focus { outline: none; border-color: var(--primary); }
496 .payment-options { display: flex; flex-direction: column; gap: 12px; }
497 .payment-option {
498 display: flex;
499 align-items: center;
500 gap: 12px;
501 padding: 12px 16px;
502 border: 2px solid #ddd;
503 border-radius: var(--radius);
504 cursor: pointer;
505 transition: border-color 0.2s;
506 }
507 .payment-option:hover { border-color: var(--primary-light); }
508 .payment-option input:checked + span { font-weight: 600; }
509 .payment-option:has(input:checked) { border-color: var(--primary); background: var(--primary-pale); }
510 .checkout-summary {
511 background: var(--white);
512 padding: 24px;
513 border-radius: var(--radius);
514 box-shadow: var(--shadow);
515 position: sticky;
516 top: 90px;
517 }
518 .checkout-summary h2 { font-size: 1.2rem; margin-bottom: 16px; }
519 .checkout-item { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; border-bottom: 1px solid #eee; }
520 .checkout-total { display: flex; justify-content: space-between; padding-top: 16px; margin-top: 16px; border-top: 2px solid var(--primary); font-size: 1.1rem; }
521
522 /* content page */
523 .content-page { max-width: 800px; }
524 .content-page h2 { font-size: 1.8rem; margin: 40px 0 16px; color: var(--primary); }
525 .content-page h2:first-child { margin-top: 0; }
526 .content-page p { margin-bottom: 16px; line-height: 1.8; color: var(--text-light); text-align: justify; }
527 .content-page ul { margin-bottom: 24px; padding-left: 24px; }
528 .content-page li { margin-bottom: 8px; line-height: 1.6; color: var(--text-light); }
529
530 /* footer */
531 .site-footer {
532 background: url('/images/footer-bg.jpg') center/cover no-repeat;
533 color: var(--text);
534 padding: 40px 0;
535 }
536 .footer-grid {
537 display: flex;
538 justify-content: center;
539 padding-bottom: 0;
540 }
541 .footer-grid h4 { color: var(--text); margin-bottom: 16px; font-size: 1.1rem; }
542 .footer-grid p { margin-bottom: 8px; font-size: 14px; line-height: 1.6; }
543 .footer-sep {
544 width: 60px;
545 height: 1px;
546 background: var(--primary);
547 margin: 1.5rem auto;
548 }
549 .footer-social {
550 display: flex;
551 justify-content: center;
552 gap: 28px;
553 margin-top: 0.25rem;
554 }
555 .footer-social a {
556 color: var(--primary);
557 text-decoration: none;
558 font-size: 28px;
559 display: inline-flex;
560 align-items: center;
561 justify-content: center;
562 }
563 .footer-social a:hover { color: var(--primary-hover); }
564 .payment-icons { display: flex; flex-direction: column; gap: 8px; }
565 .payment-icons span { font-size: 14px; }
566
567 /* responsive */
568 @media (max-width: 768px) {
569 .main-nav {
570 display: flex;
571 flex-direction: column;
572 position: fixed;
573 top: 0;
574 left: -280px;
575 width: 260px;
576 height: 100vh;
577 height: 100dvh;
578 background: #fff;
579 box-shadow: 4px 0 24px rgba(0,0,0,0.12);
580 z-index: 999;
581 padding: 80px 24px 32px;
582 gap: 16px;
583 transition: left 0.3s ease;
584 }
585 .main-nav.open { left: 0; }
586 .main-nav a { font-size: 1.1rem; padding: 0.5rem 0; border-bottom: 1px solid #f0f0f0; }
587 .header-actions { gap: 8px; }
588 .about-preview { grid-template-columns: 1fr; gap: 32px; }
589 .shop-layout { grid-template-columns: 1fr; }
590 .product-detail { grid-template-columns: 1fr; gap: 32px; }
591 .checkout-layout { grid-template-columns: 1fr; }
592 .footer-grid { display: flex; justify-content: center; }
593 .cart-item { grid-template-columns: 60px 1fr auto; }
594 .cart-item-total { display: none; }
595 .section { padding: 48px 0; }
596 .hero { min-height: 100vh; }
597 .hero-bg { inset: 0; }
598 .about-hero { min-height: 35vh; }
599 .about-hero-bg { inset: 0; }
600 }
601 .icon-btn {
602 background: none;
603 border: none;
604 cursor: pointer;
605 padding: 8px;
606 color: var(--text);
607 font-size: 14px;
608 font-weight: 600;
609 display: flex;
610 align-items: center;
611 gap: 4px;
612 }
613 .icon-btn:hover { color: var(--primary); }
614 .icon-btn.active { color: var(--primary); }
615 #lang-label { font-size: 13px; font-weight: 700; letter-spacing: 0.5px; }
616
617 .delivery-type-options {
618 display: flex;
619 gap: 12px;
620 }
621 .delivery-type-option {
622 display: flex;
623 align-items: center;
624 gap: 8px;
625 padding: 10px 16px;
626 border: 2px solid #ddd;
627 border-radius: var(--radius);
628 cursor: pointer;
629 transition: border-color 0.2s;
630 }
631 .delivery-type-option:hover { border-color: var(--primary-light); }
632 .delivery-type-option:has(input:checked) { border-color: var(--primary); background: var(--primary-pale); }
633
634 #office-search {
635 width: 100%;
636 padding: 10px;
637 border: 2px solid #ddd;
638 border-radius: var(--radius);
639 margin-bottom: 8px;
640 font-size: 14px;
641 }
642 #office-search:focus { outline: none; border-color: var(--primary); }
643 #office-filter {
644 width: 100%;
645 padding: 10px;
646 border: 2px solid #ddd;
647 border-radius: var(--radius);
648 margin-bottom: 8px;
649 font-size: 14px;
650 }
651 #office-filter:focus { outline: none; border-color: var(--primary); }
652 #office {
653 width: 100%;
654 border: 2px solid #ddd;
655 border-radius: var(--radius);
656 padding: 4px;
657 min-height: 120px;
658 }
659 #office option {
660 padding: 8px;
661 cursor: pointer;
662 }
663 #office option:hover { background: var(--primary-pale); }
664
665 .office-scroll {
666 max-height: 300px;
667 overflow-y: auto;
668 border: 1px solid #ddd;
669 border-radius: 6px;
670 }
671 .office-entry {
672 padding: 8px 12px;
673 cursor: pointer;
674 border-bottom: 1px solid #f0f0f0;
675 font-size: 0.9rem;
676 }
677 .office-entry:hover { background: var(--primary-pale); }
678 .office-entry.selected { background: var(--primary); color: var(--white); }
679 .office-entry.selected small { color: rgba(255,255,255,0.8); }
680 .office-entry small { color: #888; }
681
682 .payment-ui { margin: 16px 0; }
683 .payment-info {
684 padding: 16px;
685 background: var(--primary-pale);
686 border-radius: var(--radius);
687 border-left: 4px solid var(--primary);
688 }
689 .payment-info p { margin: 0; font-size: 14px; color: var(--primary); }
690
691 /* login modal */
692 .modal-overlay {
693 position: fixed;
694 inset: 0;
695 background: rgba(0,0,0,0.5);
696 display: flex;
697 align-items: center;
698 justify-content: center;
699 z-index: 1000;
700 }
701 .modal {
702 background: #fff;
703 border-radius: 12px;
704 padding: 2rem;
705 max-width: 400px;
706 width: 90%;
707 position: relative;
708 box-shadow: 0 20px 60px rgba(0,0,0,0.2);
709 }
710 .modal h3 {
711 margin: 0 0 1.5rem;
712 font-family: 'Roboto Condensed', 'Roboto', Tahoma, sans-serif;
713 font-size: 1.5rem;
714 }
715 .modal-close {
716 position: absolute;
717 top: 0.75rem;
718 right: 1rem;
719 background: none;
720 border: none;
721 font-size: 1.5rem;
722 cursor: pointer;
723 color: #666;
724 }
725 .modal-close:hover { color: #000; }
726 .modal input {
727 width: 100%;
728 padding: 0.75rem;
729 margin-bottom: 0.75rem;
730 border: 1px solid #ddd;
731 border-radius: 8px;
732 font-size: 1rem;
733 box-sizing: border-box;
734 }
735 .modal input:focus {
736 outline: none;
737 border-color: #4a7c59;
738 }
739 .modal-divider {
740 text-align: center;
741 margin: 1rem 0;
742 color: #999;
743 position: relative;
744 }
745 .modal-divider::before,
746 .modal-divider::after {
747 content: '';
748 position: absolute;
749 top: 50%;
750 width: 42%;
751 height: 1px;
752 background: #eee;
753 }
754 .modal-divider::before { left: 0; }
755 .modal-divider::after { right: 0; }
756 .modal-divider span { background: #fff; padding: 0 0.75rem; }
757 .error-msg {
758 color: #d32f2f;
759 font-size: 0.875rem;
760 margin-top: 0.75rem;
761 }
762
763 /* hamburger */
764 .hamburger {
765 display: none;
766 flex-direction: column;
767 justify-content: center;
768 gap: 5px;
769 background: none;
770 border: none;
771 cursor: pointer;
772 padding: 4px;
773 z-index: 1001;
774 }
775 .hamburger span {
776 display: block;
777 width: 24px;
778 height: 2px;
779 background: var(--text, #333);
780 transition: transform 0.3s, opacity 0.3s;
781 border-radius: 2px;
782 }
783 .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
784 .hamburger.active span:nth-child(2) { opacity: 0; }
785 .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
786
787 /* nav backdrop */
788 .nav-backdrop {
789 display: none;
790 position: fixed;
791 inset: 0;
792 background: rgba(0,0,0,0.3);
793 z-index: 998;
794 }
795 .nav-backdrop.open { display: block; }
796 @media (max-width: 768px) {
797 .hamburger { display: flex; }
798 }
799
800 /* featured panel */
801 .featured-panel {
802 display: grid;
803 grid-template-columns: 2fr 3fr;
804 min-height: 400px;
805 }
806 .featured-panel-image {
807 background: center/cover no-repeat;
808 min-height: 300px;
809 }
810 .featured-panel-text {
811 background: center/cover no-repeat;
812 display: flex;
813 align-items: center;
814 padding: 2rem clamp(1.5rem, 5vw, 6rem);
815 }
816 .featured-panel-body {
817 max-width: 480px;
818 }
819 .featured-panel-body h3 {
820 font-family: Tahoma, Geneva, sans-serif;
821 font-size: clamp(1.5rem, 3.5vw, 2.2rem);
822 font-weight: 500;
823 color: var(--white);
824 margin-bottom: 1rem;
825 }
826 .featured-panel-body p {
827 color: var(--white);
828 font-weight: 300;
829 font-size: 1rem;
830 line-height: 1.8;
831 }
832 .featured-panel-body .btn {
833 margin-top: 1.5rem;
834 display: inline-block;
835 background: var(--white);
836 color: var(--primary);
837 border: none;
838 padding: 10px 28px;
839 font-family: 'Roboto Condensed', sans-serif;
840 font-size: 0.9rem;
841 font-weight: 400;
842 text-transform: uppercase;
843 text-decoration: none;
844 border-radius: 4px;
845 transition: background 0.2s, color 0.2s;
846 }
847 .featured-panel-body .btn:hover {
848 background: transparent;
849 color: var(--white);
850 outline: 1px solid var(--white);
851 }
852 @media (max-width: 768px) {
853 .featured-panel { grid-template-columns: 1fr; min-height: auto; }
854 .featured-panel-image { min-height: 200px; }
855 .featured-panel-text { padding: 2rem 1.25rem; }
856 }
857
858 /* markdown content rendered by marked */
859 .md-content { line-height: 1.8; }
860 .md-content h1, .md-content h2, .md-content h3, .md-content h4, .md-content h5, .md-content h6 { margin: 0 0 1.6em; line-height: 1.3; }
861 .md-content h1 { font-size: 1.4rem; }
862 .md-content h2 { font-size: 1.2rem; }
863 .md-content h3 { font-size: 1.1rem; }
864 .md-content h4 { font-size: 1rem; }
865 .md-content p { margin: 0 0 1.6em; }
866 .md-content ul, .md-content ol { margin: 0 0 1.6em; padding-left: 2em; list-style-position: outside; }
867 .md-content li { margin: 0; padding-left: 0.25em; }
868 .md-content blockquote { margin: 0 0 1.6em; padding: 0.5em 1em; border-left: 3px solid var(--primary); background: #f9faf7; }
869 .md-content code { background: #f0f0f0; padding: 0.15em 0.3em; border-radius: 3px; font-size: 0.9em; }
870 .md-content pre { background: #f5f5f5; padding: 0.75rem; border-radius: 6px; overflow-x: auto; margin: 0 0 1.6em; }
871 .md-content pre code { background: none; padding: 0; }
872 .md-content a { color: var(--primary); }
873 .md-content strong { font-weight: 600; }
874 .md-content em { font-style: italic; }
875 .md-content hr { border: none; border-top: 1px solid #ddd; margin: 0 0 1.6em; }
876 .md-content img { max-width: 100%; border-radius: 6px; margin: 0 0 1.6em; display: block; }
877 .md-content table { border-collapse: collapse; width: 100%; margin: 0 0 1.6em; }
878 .md-content th, .md-content td { border: 1px solid #ddd; padding: 0.4em 0.6em; text-align: left; }
879 .md-content th { background: #f5f5f5; }
880 }
881
882