1  :root {
  2    /* Restored original color palette */
  3    --primary-color: #00aaa0; /* Teal/turquoise - main accent */
  4    --primary-dark: #008e87; /* Darker teal for hover states */
  5    --secondary-color: #2d3436; /* Dark gray/almost black for header/footer */
  6    --background-color: #f5f7fa; /* Light gray background */
  7    --text-color: #2d3436; /* Dark text */
  8    --card-bg: #ffffff; /* White card backgrounds */
  9    --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); /* Subtle shadow */
 10    --highlight-color: #e67e22; /* Orange for highlights/accents */
 11    --button-color: #00aaa0; /* Teal for buttons */
 12    --button-hover: #008e87; /* Darker teal for button hover */
 13    --code-bg: #f0f2f5; /* Light gray for code blocks */
 14    --border-color: #eaeaea; /* Very light gray for borders */
 15  }
 16  
 17  body {
 18    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
 19      Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 20    line-height: 1.6;
 21    color: var(--text-color);
 22    background-color: var(--background-color);
 23    margin: 0;
 24    padding: 0;
 25  }
 26  
 27  .container {
 28    max-width: 1200px;
 29    margin: 0 auto;
 30    padding: 0 20px;
 31  }
 32  
 33  header {
 34    background-color: var(--secondary-color);
 35    color: white;
 36    padding: 30px 0;
 37    text-align: center;
 38    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 39    position: relative;
 40    overflow: hidden;
 41  }
 42  
 43  header::after {
 44    content: "";
 45    position: absolute;
 46    bottom: 0;
 47    left: 0;
 48    right: 0;
 49    height: 4px;
 50    background: var(--primary-color);
 51  }
 52  
 53  header h1 {
 54    margin-bottom: 10px;
 55    color: white;
 56  }
 57  
 58  header p {
 59    font-size: 1.2rem;
 60    margin: 0;
 61    opacity: 0.9;
 62  }
 63  
 64  nav {
 65    background-color: var(--secondary-color);
 66    position: sticky;
 67    top: 0;
 68    z-index: 100;
 69    border-bottom: 4px solid var(--primary-color);
 70  }
 71  
 72  nav ul {
 73    display: flex;
 74    list-style-type: none;
 75    margin: 0;
 76    padding: 0;
 77    justify-content: center;
 78    flex-wrap: wrap;
 79  }
 80  
 81  nav li {
 82    margin: 0;
 83  }
 84  
 85  nav a {
 86    display: block;
 87    color: white;
 88    text-decoration: none;
 89    padding: 15px 20px;
 90    transition: background-color 0.3s;
 91  }
 92  
 93  nav a:hover {
 94    background-color: var(--primary-color);
 95  }
 96  
 97  section {
 98    padding: 40px 0;
 99    scroll-margin-top: 60px;
100  }
101  
102  h2,
103  h3 {
104    color: var(--primary-color);
105  }
106  
107  .github-buttons {
108    margin-top: 20px;
109  }
110  
111  .github-buttons a {
112    display: inline-block;
113    background-color: var(--button-color);
114    color: white;
115    padding: 10px 20px;
116    text-decoration: none;
117    border-radius: 4px;
118    margin: 5px;
119    transition: background-color 0.3s;
120    font-weight: 500;
121  }
122  
123  .github-buttons a:hover {
124    background-color: var(--code-bg);
125    color: var(--button-hover);
126  }
127  
128  .screenshot {
129    max-width: 100%;
130    display: block;
131    margin: 20px auto;
132    border-radius: 8px;
133    box-shadow: var(--card-shadow);
134    border: 1px solid var(--border-color);
135  }
136  
137  .features-grid {
138    display: grid;
139    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
140    gap: 20px;
141    margin: 30px 0;
142  }
143  
144  /* Feature cards - restore original styling */
145  .feature-card {
146    background-color: var(--card-bg);
147    border-radius: 8px;
148    padding: 20px;
149    box-shadow: var(--card-shadow);
150    border-top: 3px solid var(--primary-color);
151    transition: transform 0.2s ease;
152  }
153  
154  /* Remove alternating colors that were added */
155  .feature-card:nth-child(3n-1),
156  .feature-card:nth-child(3n) {
157    border-top-color: var(--primary-color);
158  }
159  
160  .feature-card:hover {
161    transform: translateY(-3px);
162  }
163  
164  .feature-card h3 {
165    margin-top: 0;
166    color: var(--primary-color);
167  }
168  
169  .code-block {
170    background-color: var(--code-bg);
171    border-left: 4px solid var(--primary-color);
172    padding: 15px;
173    margin: 20px 0;
174    overflow-x: auto;
175    border-radius: 0 4px 4px 0;
176  }
177  
178  .code-block pre {
179    margin: 0;
180    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
181    font-size: 14px;
182  }
183  
184  footer {
185    background-color: var(--secondary-color);
186    color: white;
187    text-align: center;
188    padding: 20px 0;
189    margin-top: 40px;
190    position: relative;
191  }
192  
193  footer::before {
194    content: "";
195    position: absolute;
196    top: 0;
197    left: 0;
198    right: 0;
199    height: 4px;
200    background: var(--primary-color);
201  }
202  
203  footer a {
204    color: var(--primary-color);
205    text-decoration: underline;
206  }
207  
208  footer a:hover {
209    color: white;
210  }
211  
212  /* Language toggle */
213  .language-toggle {
214    position: absolute;
215    top: 10px;
216    right: 20px;
217  }
218  
219  .language-toggle button {
220    background: transparent;
221    color: white;
222    border: 1px solid var(--primary-color);
223    padding: 5px 10px;
224    cursor: pointer;
225    transition: background-color 0.3s;
226  }
227  
228  .language-toggle button:hover {
229    background-color: var(--primary-color);
230  }
231  
232  .language-toggle button.active {
233    background-color: var(--primary-color);
234    color: white;
235  }
236  
237  /* Add fixed language toggle for scrolled state */
238  .floating-language-toggle {
239    position: fixed;
240    top: 20px;
241    right: 20px; /* Changed from left: 20px to right: 20px */
242    display: flex;
243    flex-direction: column;
244    gap: 5px;
245    z-index: 1000;
246    opacity: 0;
247    transform: translateX(
248      20px
249    ); /* Changed from translateX(-20px) to translateX(20px) */
250    transition: all 0.3s ease;
251    pointer-events: none;
252  }
253  
254  .floating-language-toggle.visible {
255    opacity: 0.8;
256    transform: translateX(0);
257    pointer-events: all;
258  }
259  
260  .floating-language-toggle:hover {
261    opacity: 1;
262  }
263  
264  .floating-language-toggle button {
265    background-color: var(--secondary-color);
266    color: white;
267    border: 1px solid var(--primary-color);
268    padding: 8px 10px;
269    cursor: pointer;
270    border-radius: 4px;
271    font-weight: 600;
272    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
273    transition: all 0.2s;
274    width: 40px;
275  }
276  
277  .floating-language-toggle button:hover {
278    background-color: var(--primary-color);
279    transform: translateY(-2px);
280  }
281  
282  .floating-language-toggle button.active {
283    background-color: var(--primary-color);
284  }
285  
286  /* Responsive design */
287  @media (max-width: 768px) {
288    nav ul {
289      flex-direction: column;
290    }
291  
292    nav li {
293      width: 100%;
294      text-align: center;
295    }
296  }
297  
298  /* Language specific content */
299  .de {
300    display: none;
301  }
302  
303  body.german .en {
304    display: none;
305  }
306  
307  body.german .de {
308    display: block;
309  }
310  
311  /* Additional styling */
312  a {
313    color: var(--primary-color);
314    text-decoration: none;
315  }
316  
317  a:hover {
318    text-decoration: underline;
319    color: var(--primary-dark);
320  }
321  
322  strong {
323    color: var(--primary-dark);
324  }
325  
326  ul li,
327  ol li {
328    margin-bottom: 8px;
329  }
330  
331  /* Audio wave decoration for header */
332  .wave-decoration {
333    position: absolute;
334    bottom: 4px;
335    left: 0;
336    right: 0;
337    height: 30px;
338    opacity: 0.1;
339    background: repeating-linear-gradient(
340      45deg,
341      transparent,
342      transparent 10px,
343      rgba(255, 255, 255, 0.5) 10px,
344      rgba(255, 255, 255, 0.5) 20px
345    );
346  }
347  
348  /* Tab Interface Styles */
349  .tab-container {
350    width: 100%;
351    margin: 20px 0;
352  }
353  
354  .tab-buttons {
355    display: flex;
356    overflow-x: auto;
357    border-bottom: 2px solid var(--primary-color);
358  }
359  
360  .tab-button {
361    background-color: #f0f2f5;
362    border: none;
363    padding: 15px 25px;
364    margin-right: 5px;
365    cursor: pointer;
366    font-weight: 500;
367    border-radius: 5px 5px 0 0;
368    transition: background-color 0.3s, color 0.3s;
369  }
370  
371  .tab-button:hover {
372    background-color: #e0e2e5;
373  }
374  
375  .tab-button.active {
376    background-color: var(--primary-color);
377    color: white;
378  }
379  
380  .tab-content {
381    display: none;
382    padding: 10px 40px;
383    background-color: var(--card-bg);
384    box-shadow: var(--card-shadow);
385    border-radius: 0 5px 5px 5px;
386  }
387  
388  .tab-content.active {
389    display: block;
390    animation: fadeIn 0.5s;
391  }
392  
393  /* Back to top button */
394  .back-to-top {
395    position: fixed;
396    bottom: 20px;
397    right: 20px;
398    background-color: var(--primary-color);
399    color: white;
400    width: 50px;
401    height: 50px;
402    text-align: center;
403    line-height: 50px;
404    border-radius: 50%;
405    cursor: pointer;
406    opacity: 0;
407    transition: opacity 0.3s;
408    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
409    z-index: 1000;
410  }
411  
412  .back-to-top.visible {
413    opacity: 0.8;
414  }
415  
416  .back-to-top:hover {
417    opacity: 1;
418  }
419  
420  @keyframes fadeIn {
421    from {
422      opacity: 0;
423    }
424    to {
425      opacity: 1;
426    }
427  }
428  
429  /* Monospaced subtitle */
430  .mono-subtitle {
431    font-family: "JetBrains Mono", "Space Mono", monospace;
432    font-size: 1.2rem;
433    letter-spacing: 0.5px;
434    margin: 10px 0;
435    padding: 5px 10px;
436    background-color: rgba(0, 0, 0, 0.15);
437    display: inline-block;
438    border-radius: 3px;
439    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
440    border-left: 3px solid var(--primary-color);
441    border-right: 3px solid var(--primary-color);
442    transition: all 0.3s ease;
443  }
444  
445  .mono-subtitle:hover {
446    transform: translateY(-2px);
447    background-color: rgba(0, 0, 0, 0.25);
448  }
449  
450  /* Screenshot container */
451  .screenshot-container {
452    margin: auto;
453    text-align: center;
454    max-width: 90%;
455    margin-top: 90px;
456  }
457  
458  .screenshot-container figcaption {
459    font-style: italic;
460    color: #555;
461    margin-top: 10px;
462    font-size: 0.9rem;
463  }
464  
465  .screenshot {
466    border: 1px solid var(--border-color);
467    border-radius: 8px;
468    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
469    max-width: 100%;
470    height: auto;
471  }
472  
473  .intro {
474    margin: auto;
475    max-width: 70%;
476    font-weight: 500;
477    text-align: center;
478  }
479  
480  /* Add these styles for the installation section */
481  .installation-options {
482    display: grid;
483    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
484    gap: 25px;
485    margin: 20px 0;
486  }
487  
488  /* Installation options - restore original styling */
489  .installation-option {
490    background-color: var(--card-bg);
491    border-radius: 8px;
492    padding: 20px;
493    box-shadow: var(--card-shadow);
494    border-left: 3px solid var(--primary-color);
495  }
496  
497  /* Remove alternating colors that were added */
498  .installation-option:nth-child(even) {
499    border-left-color: var(--primary-color);
500  }
501  
502  .installation-option h3 {
503    margin-top: 0;
504    color: var(--primary-color);
505    border-bottom: 1px solid var(--border-color);
506    padding-bottom: 10px;
507  }
508  
509  .installation-option ol {
510    padding-left: 20px;
511  }
512  
513  .installation-option li {
514    margin-bottom: 10px;
515  }
516  
517  /* Note box - restore original styling */
518  .note-box {
519    background-color: rgba(255, 240, 200, 0.5);
520    border-left: 4px solid var(--highlight-color);
521    padding: 10px 15px;
522    margin-top: 15px;
523    border-radius: 0 4px 4px 0;
524  }
525  
526  .note-box p {
527    margin: 0;
528  }
529  
530  code {
531    background-color: var(--code-bg);
532    padding: 2px 5px;
533    border-radius: 3px;
534    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
535    font-size: 0.9em;
536  }
537  
538  /* Warning box - restore original styling */
539  .warning-box {
540    background-color: rgba(255, 221, 87, 0.2);
541    border-left: 4px solid #ffbb00;
542    padding: 10px 15px;
543    margin: 15px 0;
544    border-radius: 0 4px 4px 0;
545  }
546  
547  .warning-box p {
548    margin: 0;
549    color: #664d03;
550  }
551  
552  .warning-box strong {
553    color: #664d03;
554  }
555  
556  .muted {
557    color: #6c757d;
558    font-style: italic;
559    font-size: 0.9em;
560  }
561  
562  /* Sponsor logos in footer */
563  .sponsors {
564    margin: 20px 0 30px;
565    text-align: center;
566    padding: 35px 0;
567    border-top: 1px solid rgba(255, 255, 255, 0.2);
568    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
569  }
570  
571  .sponsors p {
572    font-weight: 500;
573    margin-bottom: 25px;
574    font-size: 1.05rem;
575    color: white;
576  }
577  
578  .sponsor-logos {
579    display: flex;
580    align-items: center;
581    justify-content: center;
582    flex-wrap: wrap;
583    gap: 60px;
584    margin: 0 auto;
585    max-width: 90%;
586  }
587  
588  .sponsor-logos a {
589    text-decoration: none;
590    transition: transform 0.3s;
591    display: flex;
592    align-items: center;
593    justify-content: center;
594  }
595  
596  .sponsor-logos a:hover {
597    transform: scale(1.03);
598  }
599  
600  /* Significantly larger logos */
601  .sponsor-logo {
602    height: auto;
603    width: auto;
604    max-width: 400px;
605    object-fit: contain;
606    transition: transform 0.2s;
607  }
608  
609  /* Only apply subtle effects on hover */
610  .sponsor-logo:hover {
611    transform: translateY(-2px);
612  }
613  
614  /* Special handling for PrototypeFund logo */
615  a[href="https://prototypefund.de"] .sponsor-logo
616  {
617    filter: brightness(0) invert(1);
618  }
619  
620  /* Responsive adjustments for logos */
621  @media (max-width: 992px) {
622    .sponsor-logos {
623      gap: 40px;
624    }
625  
626    .sponsor-logo {
627      max-height: 100px;
628      max-width: 350px;
629    }
630  }
631  
632  @media (max-width: 768px) {
633    .sponsor-logos {
634      flex-direction: column;
635      gap: 40px;
636    }
637  
638    .sponsor-logo {
639      max-height: 90px;
640      max-width: 320px;
641    }
642  
643    nav ul {
644      flex-direction: column;
645    }
646  
647    nav li {
648      width: 100%;
649      text-align: center;
650    }
651  }
652  
653  /* Language-specific visibility classes */
654  .en-only {
655    display: block;
656  }
657  
658  .de-only {
659    display: none;
660  }
661  
662  body.german .en-only {
663    display: none;
664  }
665  
666  body.german .de-only {
667    display: block;
668  }
669  
670  /* Video examples styling */
671  .video-example {
672    margin-bottom: 50px;
673    padding: 20px;
674    background-color: var(--card-bg);
675    border-radius: 8px;
676    box-shadow: var(--card-shadow);
677  }
678  
679  .video-example h3 {
680    color: var(--primary-color);
681    margin-top: 0;
682    border-bottom: 1px solid var(--border-color);
683    padding-bottom: 10px;
684  }
685  
686  .video-container {
687    position: relative;
688    width: 100%;
689    padding-bottom: 56.25%; /* 16:9 aspect ratio */
690    height: 0;
691    margin-top: 20px;
692  }
693  
694  .video-container iframe {
695    position: absolute;
696    top: 0;
697    left: 0;
698    width: 100%;
699    height: 100%;
700    border-radius: 4px;
701  }
702  
703  /* Add subtle hover effect to video containers */
704  .video-container:hover {
705    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
706  }
707  
708  /* Before/after comparison container for videos (if needed later) */
709  .comparison-container {
710    display: grid;
711    grid-template-columns: 1fr 1fr;
712    gap: 20px;
713    margin: 30px 0;
714  }
715  
716  @media (max-width: 768px) {
717    .comparison-container {
718      grid-template-columns: 1fr;
719    }
720  }
721  
722  /* Instruction box styling */
723  .instruction-box {
724    background-color: #e8f4f2;
725    border-left: 4px solid var(--primary-color);
726    padding: 15px 20px;
727    margin: 20px 0 30px 0;
728    border-radius: 4px;
729    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
730  }
731  
732  .instruction-box h3 {
733    margin-top: 0;
734    font-size: 1.2rem;
735    color: var(--primary-color);
736  }
737  
738  .instruction-box p {
739    margin-bottom: 0;
740    line-height: 1.5;
741  }
742  
743  /* Add icon to instruction box */
744  .instruction-box h3::before {
745    content: "▶ ";
746    color: var(--primary-color);
747  }