1  /* ===== SHARED ADMIN PAGE STYLES ===== */
  2  
  3  /* Base Styles */
  4  html, body {
  5    height: 100%;
  6    background: #fff;
  7    color: #111;
  8    font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif;
  9    margin: 0;
 10    padding: 0;
 11    min-height: 100vh;
 12    scroll-behavior: smooth;
 13    overflow-x: hidden;
 14    scroll-snap-type: y mandatory;
 15    cursor: none !important;
 16  }
 17  
 18  body {
 19    opacity: 1;
 20    transition: opacity 0.4s;
 21  }
 22  
 23  body.fade {
 24    opacity: 0;
 25    transition: opacity 0.4s;
 26  }
 27  
 28  * {
 29    box-sizing: border-box;
 30    user-select: none !important;
 31    -webkit-user-select: none !important;
 32    -ms-user-select: none !important;
 33    -moz-user-select: none !important;
 34    -webkit-user-drag: none !important;
 35    touch-action: manipulation;
 36  }
 37  
 38  /* Typography */
 39  @font-face {
 40    font-family: 'NeueHaasGrotesk';
 41    src: url('../fonts/neuehaasgrotdispround-75bold.otf') format('opentype');
 42    font-weight: 700;
 43    font-style: normal;
 44    font-display: swap;
 45  }
 46  
 47  @font-face {
 48    font-family: 'SuperBrigadeCond';
 49    src: url('../fonts/superbrigadecond.ttf') format('truetype');
 50    font-weight: normal;
 51    font-style: normal;
 52    font-display: swap;
 53  }
 54  
 55  /* Custom Cursor */
 56  .custom-cursor {
 57    position: fixed;
 58    width: 20px;
 59    height: 20px;
 60    background-color: #111;
 61    border-radius: 50%;
 62    pointer-events: none;
 63    z-index: 10001;
 64    transition: transform 0.15s, background-color 0.25s;
 65    transform: translate(-50%, -50%) scale(1);
 66  }
 67  
 68  .custom-cursor.expand {
 69    transform: translate(-50%, -50%) scale(2.5);
 70    background-color: #11111144;
 71  }
 72  
 73  .custom-cursor.cursor-hover {
 74    transform: translate(-50%, -50%) scale(1.5);
 75    background-color: #111111cc;
 76  }
 77  
 78  /* Header */
 79  .main-header {
 80    position: fixed;
 81    top: 0;
 82    left: 0;
 83    width: 100vw;
 84    background: #000;
 85    color: #fff;
 86    z-index: 9999;
 87    display: flex;
 88    flex-direction: column;
 89    align-items: center;
 90    justify-content: flex-start;
 91    padding: 0.6rem 0 0.4rem 0;
 92    border-bottom: 1px solid #222;
 93  }
 94  
 95  .main-header-title {
 96    font-family: 'SuperBrigadeCond', sans-serif;
 97    font-size: 1.1rem;
 98    letter-spacing: normal;
 99    line-height: 1.5;
100    text-align: center;
101    font-weight: bold;
102  }
103  
104  /* Breadcrumb Navigation */
105  .breadcrumb {
106    background: #f8f8f8;
107    padding: 1rem 8vw;
108    border-bottom: 1px solid #e0e0e0;
109    margin-top: 2.2rem;
110    font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif;
111  }
112  
113  .breadcrumb a {
114    color: #666;
115    text-decoration: none;
116    font-size: 0.9rem;
117    transition: color 0.2s ease;
118  }
119  
120  .breadcrumb a:hover {
121    color: #111;
122  }
123  
124  /* Main Content */
125  .admin-section {
126    min-height: 100vh;
127    width: 100vw;
128    display: flex;
129    align-items: center;
130    justify-content: center;
131    position: relative;
132    padding: 0;
133    overflow: hidden;
134    color: #111;
135    background-size: cover;
136    background-position: center center;
137    transition: background-image 0.5s ease;
138  }
139  
140  .admin-content {
141    width: 90vw;
142    max-width: 1200px;
143    display: flex;
144    flex-direction: column;
145    align-items: center;
146    justify-content: center;
147    text-align: center;
148    z-index: 2;
149    position: relative;
150  }
151  
152  .admin-title {
153    font-size: 4rem;
154    font-weight: 900;
155    margin-bottom: 2rem;
156    line-height: 1.2;
157    color: #111;
158  }
159  
160  .admin-subtitle {
161    font-size: 1.5rem;
162    font-weight: 700;
163    margin-bottom: 3rem;
164    line-height: 1.4;
165    color: #666;
166    max-width: 600px;
167  }
168  
169  .admin-description {
170    font-size: 1.1rem;
171    font-weight: 500;
172    margin-bottom: 3rem;
173    line-height: 1.6;
174    color: #444;
175    max-width: 800px;
176  }
177  
178  /* Content Sections */
179  .content-section {
180    margin-top: 3rem;
181    text-align: left;
182    width: 100%;
183    max-width: 800px;
184  }
185  
186  .content-section h2 {
187    font-size: 2rem;
188    font-weight: 700;
189    margin-bottom: 1.5rem;
190    color: #111;
191  }
192  
193  .content-section h3 {
194    font-size: 1.5rem;
195    font-weight: 700;
196    margin-bottom: 1rem;
197    color: #111;
198    margin-top: 2rem;
199  }
200  
201  .content-section p {
202    font-size: 1rem;
203    color: #444;
204    line-height: 1.6;
205    margin-bottom: 1rem;
206  }
207  
208  .content-section ul {
209    margin-bottom: 1rem;
210    padding-left: 2rem;
211  }
212  
213  .content-section li {
214    font-size: 1rem;
215    color: #444;
216    line-height: 1.6;
217    margin-bottom: 0.5rem;
218  }
219  
220  .content-section blockquote {
221    font-style: italic;
222    color: #666;
223    border-left: 4px solid #111;
224    padding-left: 1rem;
225    margin: 2rem 0;
226    font-size: 1.1rem;
227  }
228  
229  /* Social Icons */
230  .social-icons {
231    display: flex;
232    gap: 1.5rem;
233    margin-top: 3rem;
234    flex-wrap: wrap;
235    justify-content: center;
236  }
237  
238  .social-icon {
239    display: flex;
240    align-items: center;
241    gap: 0.5rem;
242    padding: 1rem 1.5rem;
243    background: #f8f8f8;
244    border: 2px solid #e0e0e0;
245    border-radius: 8px;
246    text-decoration: none;
247    color: #111;
248    transition: all 0.3s ease;
249  }
250  
251  .social-icon:hover {
252    background: #111;
253    color: #fff;
254    border-color: #111;
255    transform: translateY(-2px);
256  }
257  
258  .social-icon i {
259    font-size: 1.2rem;
260  }
261  
262  /* Back Button */
263  .back-btn {
264    position: fixed;
265    top: 2rem;
266    left: 2rem;
267    background: #111;
268    color: #fff;
269    border: none;
270    padding: 1rem 2rem;
271    border-radius: 8px;
272    font-size: 1rem;
273    font-weight: 700;
274    cursor: none !important;
275    text-decoration: none;
276    transition: all 0.3s ease;
277    z-index: 1000;
278  }
279  
280  .back-btn:hover {
281    background: #333;
282    transform: translateY(-2px);
283  }
284  
285  /* FAQ Styles */
286  .faq-section {
287    margin-top: 3rem;
288    text-align: left;
289    width: 100%;
290    max-width: 800px;
291  }
292  
293  .faq-item {
294    margin-bottom: 2rem;
295    border-bottom: 1px solid #e0e0e0;
296    padding-bottom: 1.5rem;
297  }
298  
299  .faq-question {
300    font-size: 1.2rem;
301    font-weight: 700;
302    margin-bottom: 1rem;
303    color: #111;
304    cursor: none !important;
305    transition: color 0.2s ease;
306  }
307  
308  .faq-question:hover {
309    color: #666;
310  }
311  
312  .faq-answer {
313    font-size: 1rem;
314    color: #444;
315    line-height: 1.6;
316    margin-bottom: 0;
317  }
318  
319  /* Privacy Policy Styles */
320  .privacy-section {
321    margin-top: 3rem;
322    text-align: left;
323    width: 100%;
324    max-width: 800px;
325  }
326  
327  .privacy-section h2 {
328    font-size: 2rem;
329    font-weight: 700;
330    margin-bottom: 1.5rem;
331    color: #111;
332    margin-top: 3rem;
333  }
334  
335  .privacy-section h3 {
336    font-size: 1.5rem;
337    font-weight: 700;
338    margin-bottom: 1rem;
339    color: #111;
340    margin-top: 2rem;
341  }
342  
343  .privacy-section p {
344    font-size: 1rem;
345    color: #444;
346    line-height: 1.6;
347    margin-bottom: 1rem;
348  }
349  
350  .privacy-section ul {
351    margin-bottom: 1rem;
352    padding-left: 2rem;
353  }
354  
355  .privacy-section li {
356    font-size: 1rem;
357    color: #444;
358    line-height: 1.6;
359    margin-bottom: 0.5rem;
360  }
361  
362  /* 404 Error Page Styles */
363  .error-section {
364    min-height: 100vh;
365    width: 100vw;
366    display: flex;
367    align-items: center;
368    justify-content: center;
369    position: relative;
370    padding: 0;
371    overflow: hidden;
372    color: #111;
373    background: #f8f8f8;
374  }
375  
376  .error-content {
377    width: 90vw;
378    max-width: 800px;
379    display: flex;
380    flex-direction: column;
381    align-items: center;
382    justify-content: center;
383    text-align: center;
384    z-index: 2;
385    position: relative;
386  }
387  
388  .error-title {
389    font-size: 8rem;
390    font-weight: 900;
391    margin-bottom: 2rem;
392    line-height: 1;
393    color: #111;
394  }
395  
396  .error-subtitle {
397    font-size: 2rem;
398    font-weight: 700;
399    margin-bottom: 3rem;
400    line-height: 1.4;
401    color: #666;
402    max-width: 600px;
403  }
404  
405  .error-description {
406    font-size: 1.2rem;
407    font-weight: 500;
408    margin-bottom: 3rem;
409    line-height: 1.6;
410    color: #444;
411    max-width: 600px;
412  }
413  
414  .error-buttons {
415    display: flex;
416    gap: 1.5rem;
417    margin-top: 3rem;
418    flex-wrap: wrap;
419    justify-content: center;
420  }
421  
422  .error-btn {
423    background: #111;
424    color: #fff;
425    border: 2px solid #111;
426    padding: 1rem 2rem;
427    border-radius: 8px;
428    font-size: 1rem;
429    font-weight: 700;
430    cursor: none !important;
431    text-decoration: none;
432    transition: all 0.3s ease;
433  }
434  
435  .error-btn:hover {
436    background: #fff;
437    color: #111;
438    transform: translateY(-2px);
439  }
440  
441  .error-btn.secondary {
442    background: #fff;
443    color: #111;
444    border-color: #111;
445  }
446  
447  .error-btn.secondary:hover {
448    background: #111;
449    color: #fff;
450  }
451  
452  /* Info Links */
453  .info-links {
454    display: flex;
455    gap: 1.5rem;
456    margin-top: 3rem;
457    flex-wrap: wrap;
458    justify-content: center;
459  }
460  
461  .info-link {
462    color: #666;
463    text-decoration: none;
464    font-size: 1rem;
465    transition: color 0.2s ease;
466  }
467  
468  .info-link:hover {
469    color: #111;
470  }
471  
472  /* Mobile Responsiveness */
473  @media (max-width: 768px) {
474    .custom-cursor {
475      display: none !important;
476    }
477    
478    html, body {
479      cursor: none !important;
480    }
481    
482    * {
483      cursor: none !important;
484    }
485    
486    /* Ensure side menu cursor visibility even on mobile */
487    .side-menu,
488    .side-menu * {
489      cursor: none !important;
490    }
491    
492    .side-menu-close,
493    .side-menu-link,
494    .side-menu-bottom-link,
495    .side-menu-social-link {
496      cursor: none !important;
497    }
498    
499    /* Ensure custom cursor is visible when side menu is active */
500    .side-menu.active ~ .custom-cursor {
501      z-index: 10002 !important;
502      opacity: 1 !important;
503      visibility: visible !important;
504    }
505    
506    /* Ensure cursor visibility when hovering over side menu elements */
507    .side-menu:hover,
508    .side-menu *:hover {
509      cursor: none !important;
510    }
511    
512    .side-menu-close:hover,
513    .side-menu-link:hover,
514    .side-menu-bottom-link:hover,
515    .side-menu-social-link:hover {
516      cursor: none !important;
517    }
518    
519    .admin-title {
520      font-size: 2.5rem;
521      margin-bottom: 1.5rem;
522    }
523    
524    .admin-subtitle {
525      font-size: 1.2rem;
526      margin-bottom: 2rem;
527    }
528    
529    .admin-description {
530      font-size: 1rem;
531      margin-bottom: 2rem;
532    }
533    
534    .back-btn {
535      top: 1rem;
536      left: 1rem;
537      padding: 0.8rem 1.5rem;
538      font-size: 0.9rem;
539    }
540    
541    .social-icons {
542      gap: 1rem;
543      margin-top: 2rem;
544    }
545    
546    .social-icon {
547      padding: 0.8rem 1.2rem;
548    }
549    
550    .error-title {
551      font-size: 4rem;
552      margin-bottom: 1.5rem;
553    }
554    
555    .error-subtitle {
556      font-size: 1.5rem;
557      margin-bottom: 2rem;
558    }
559    
560    .error-description {
561      font-size: 1rem;
562      margin-bottom: 2rem;
563    }
564    
565    .error-buttons {
566      gap: 1rem;
567      margin-top: 2rem;
568    }
569    
570    .error-btn {
571      padding: 0.8rem 1.5rem;
572      font-size: 0.9rem;
573    }
574  }
575  
576  @media (max-width: 600px) {
577    .breadcrumb {
578      padding: 0.8rem 4vw;
579      margin-top: 2.7rem;
580    }
581    
582    .admin-title {
583      font-size: 2rem;
584      margin-bottom: 1rem;
585    }
586    
587    .admin-subtitle {
588      font-size: 1.1rem;
589      margin-bottom: 1.5rem;
590    }
591    
592    .admin-description {
593      font-size: 0.9rem;
594      margin-bottom: 1.5rem;
595    }
596    
597    .back-btn {
598      top: 0.5rem;
599      left: 0.5rem;
600      padding: 0.6rem 1.2rem;
601      font-size: 0.8rem;
602    }
603    
604    .content-section h2 {
605      font-size: 1.5rem;
606      margin-bottom: 1rem;
607    }
608    
609    .content-section h3 {
610      font-size: 1.2rem;
611      margin-bottom: 0.8rem;
612    }
613    
614    .content-section p {
615      font-size: 0.9rem;
616      margin-bottom: 0.8rem;
617    }
618    
619    .error-title {
620      font-size: 3rem;
621      margin-bottom: 1rem;
622    }
623    
624    .error-subtitle {
625      font-size: 1.2rem;
626      margin-bottom: 1.5rem;
627    }
628    
629    .error-description {
630      font-size: 0.9rem;
631      margin-bottom: 1.5rem;
632    }
633  }