diff --git a/CLAUDE_PROJECT_README.md b/CLAUDE_PROJECT_README.md index 4cd49f5..9012649 100644 --- a/CLAUDE_PROJECT_README.md +++ b/CLAUDE_PROJECT_README.md @@ -1,13 +1,13 @@ -# website-main + # website-main *This README was automatically generated by Claude Project Manager* ## Project Overview -- **Path**: `A:/GiTea/website-main` -- **Files**: 11 files -- **Size**: 103.7 KB -- **Last Modified**: 2025-07-12 15:48 +- **Path**: `C:/Users/hendr/Desktop/IntelSight/Projektablage/website-main` +- **Files**: 12 files +- **Size**: 137.5 KB +- **Last Modified**: 2025-08-14 22:51 ## Technology Stack @@ -24,6 +24,7 @@ index.html README.md robots.txt script.js +Sitemap_IntelSight_UG.docx styles.css Logo/ ├── intelsight-dark-no-tagline-website-cropped.svg @@ -52,5 +53,5 @@ This project is managed with Claude Project Manager. To work with this project: ## Development Log - README generated on 2025-07-03 23:25:48 -- README updated on 2025-07-12 15:48:18 -- README updated on 2025-07-16 22:31:38 +- README updated on 2025-08-14 22:51:36 +- README updated on 2025-08-14 22:51:56 diff --git a/assets/fonts/BebasNeue-Regular.ttf b/assets/fonts/BebasNeue-Regular.ttf new file mode 100644 index 0000000..85c1805 Binary files /dev/null and b/assets/fonts/BebasNeue-Regular.ttf differ diff --git a/assets/fonts/Inter-Bold.ttf b/assets/fonts/Inter-Bold.ttf new file mode 100644 index 0000000..aecc86e Binary files /dev/null and b/assets/fonts/Inter-Bold.ttf differ diff --git a/assets/fonts/Inter-Light.ttf b/assets/fonts/Inter-Light.ttf new file mode 100644 index 0000000..3c64d3f Binary files /dev/null and b/assets/fonts/Inter-Light.ttf differ diff --git a/assets/fonts/Inter-Regular.ttf b/assets/fonts/Inter-Regular.ttf new file mode 100644 index 0000000..399a6e0 Binary files /dev/null and b/assets/fonts/Inter-Regular.ttf differ diff --git a/assets/fonts/Inter-SemiBold.ttf b/assets/fonts/Inter-SemiBold.ttf new file mode 100644 index 0000000..4a57a1a Binary files /dev/null and b/assets/fonts/Inter-SemiBold.ttf differ diff --git a/assets/handshake.svg b/assets/handshake.svg new file mode 100644 index 0000000..d67a2b0 --- /dev/null +++ b/assets/handshake.svg @@ -0,0 +1,38 @@ + + + + + + + + + \ No newline at end of file diff --git a/assets/images/flags/flag-de.svg b/assets/images/flags/flag-de.svg new file mode 100644 index 0000000..20a017e --- /dev/null +++ b/assets/images/flags/flag-de.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/assets/images/flags/flag-en.svg b/assets/images/flags/flag-en.svg new file mode 100644 index 0000000..016c075 --- /dev/null +++ b/assets/images/flags/flag-en.svg @@ -0,0 +1,50 @@ + + + \ No newline at end of file diff --git a/assets/images/icons/arrow-down.svg b/assets/images/icons/arrow-down.svg new file mode 100644 index 0000000..3fde56f --- /dev/null +++ b/assets/images/icons/arrow-down.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/images/icons/check-circle-filled.svg b/assets/images/icons/check-circle-filled.svg new file mode 100644 index 0000000..09f1f71 --- /dev/null +++ b/assets/images/icons/check-circle-filled.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/images/icons/check-circle.svg b/assets/images/icons/check-circle.svg new file mode 100644 index 0000000..09f1f71 --- /dev/null +++ b/assets/images/icons/check-circle.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/images/icons/chevron-down.svg b/assets/images/icons/chevron-down.svg new file mode 100644 index 0000000..24b755d --- /dev/null +++ b/assets/images/icons/chevron-down.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/images/icons/clock-circle.svg b/assets/images/icons/clock-circle.svg new file mode 100644 index 0000000..916e222 --- /dev/null +++ b/assets/images/icons/clock-circle.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/images/icons/clock.svg b/assets/images/icons/clock.svg new file mode 100644 index 0000000..1517cfa --- /dev/null +++ b/assets/images/icons/clock.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/images/icons/cube.svg b/assets/images/icons/cube.svg new file mode 100644 index 0000000..8442aff --- /dev/null +++ b/assets/images/icons/cube.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/images/icons/document.svg b/assets/images/icons/document.svg new file mode 100644 index 0000000..9b1436c --- /dev/null +++ b/assets/images/icons/document.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/images/icons/german-flag.svg b/assets/images/icons/german-flag.svg new file mode 100644 index 0000000..fa0b512 --- /dev/null +++ b/assets/images/icons/german-flag.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/images/icons/globe.svg b/assets/images/icons/globe.svg new file mode 100644 index 0000000..a5d738d --- /dev/null +++ b/assets/images/icons/globe.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/assets/images/icons/location.svg b/assets/images/icons/location.svg new file mode 100644 index 0000000..4b64bfc --- /dev/null +++ b/assets/images/icons/location.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/images/icons/lock.svg b/assets/images/icons/lock.svg new file mode 100644 index 0000000..07987ee --- /dev/null +++ b/assets/images/icons/lock.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/images/icons/plus-circle.svg b/assets/images/icons/plus-circle.svg new file mode 100644 index 0000000..0328cd2 --- /dev/null +++ b/assets/images/icons/plus-circle.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/images/icons/pyramid.svg b/assets/images/icons/pyramid.svg new file mode 100644 index 0000000..0831566 --- /dev/null +++ b/assets/images/icons/pyramid.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/images/icons/shield-check.svg b/assets/images/icons/shield-check.svg new file mode 100644 index 0000000..9727e16 --- /dev/null +++ b/assets/images/icons/shield-check.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/images/icons/shield-play.svg b/assets/images/icons/shield-play.svg new file mode 100644 index 0000000..a2a2197 --- /dev/null +++ b/assets/images/icons/shield-play.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/images/icons/shield.svg b/assets/images/icons/shield.svg new file mode 100644 index 0000000..ee3f889 --- /dev/null +++ b/assets/images/icons/shield.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/images/icons/video-camera.svg b/assets/images/icons/video-camera.svg new file mode 100644 index 0000000..c56f1fa --- /dev/null +++ b/assets/images/icons/video-camera.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/images/logos/intelsight-name-light.svg b/assets/images/logos/intelsight-name-light.svg new file mode 100644 index 0000000..5d77715 --- /dev/null +++ b/assets/images/logos/intelsight-name-light.svg @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/nrw.png b/assets/images/nrw.png new file mode 100644 index 0000000..d34db31 Binary files /dev/null and b/assets/images/nrw.png differ diff --git a/assets/videos/README.md b/assets/videos/README.md new file mode 100644 index 0000000..6c992b2 --- /dev/null +++ b/assets/videos/README.md @@ -0,0 +1,56 @@ +# Hero Section Videos + +## Benötigte Video-Dateien + +Die Hero-Section benötigt 4 rotierende Hintergrund-Videos. Diese sollten folgende Eigenschaften haben: + +### Video-Spezifikationen: +- **Format:** MP4 (H.264 codec) +- **Auflösung:** 1920x1080 (Full HD) minimum +- **Länge:** 10-15 Sekunden Loop +- **Dateigröße:** Max. 5MB pro Video (komprimiert) +- **Framerate:** 24-30 fps +- **Audio:** Keine (Videos werden stumm abgespielt) + +### Benötigte Videos: + +1. **hero-tech-pattern.mp4** + - Abstrakte Tech-Muster oder Code-Visualisierung + - Helle, sanfte Bewegungen + - Farben: Weiß, Hellgrau, Hellblau + +2. **hero-data-flow.mp4** + - Datenströme oder Partikel-Animationen + - Fließende Bewegungen + - Minimalistisch und hell + +3. **hero-network-viz.mp4** + - Netzwerk-Nodes und Verbindungen + - Geometrische Formen + - Subtile Animationen + +4. **hero-code-abstract.mp4** + - Code-Editor oder Terminal-Output + - Verschwommen/abstrakt + - Heller Hintergrund + +### Empfohlene Tools zum Erstellen: +- After Effects (für professionelle Animationen) +- DaVinci Resolve (kostenlos) +- Blender (für 3D-Animationen) +- Online: Canva, Renderforest + +### Kostenlose Stock-Video Quellen: +- Pexels Videos (https://www.pexels.com/videos/) +- Pixabay (https://pixabay.com/videos/) +- Videvo (https://www.videvo.net/) +- Coverr (https://coverr.co/) + +### Komprimierung: +```bash +# FFmpeg Befehl zum Komprimieren: +ffmpeg -i input.mp4 -c:v libx264 -crf 23 -preset slow -vf scale=1920:1080 -an output.mp4 +``` + +### Fallback: +Falls keine Videos vorhanden sind, funktioniert die Website trotzdem - es wird nur der statische Gradient-Hintergrund mit Particle-Animation angezeigt. \ No newline at end of file diff --git a/css/about-modern.css b/css/about-modern.css new file mode 100644 index 0000000..9ae2d3b --- /dev/null +++ b/css/about-modern.css @@ -0,0 +1,612 @@ +/* Modern About Section Redesign */ + +/* About Section Background */ +.about-section { + background: linear-gradient(135deg, #ffffff 0%, #f8fafb 100%); + position: relative; + overflow: hidden; + padding: 100px 0; +} + +.about-section::before { + content: ''; + position: absolute; + top: -50%; + right: -20%; + width: 60%; + height: 60%; + background: radial-gradient(circle, rgba(15, 114, 181, 0.05) 0%, transparent 70%); + border-radius: 50%; + animation: float-slow 20s ease-in-out infinite; +} + +@keyframes float-slow { + 0%, 100% { transform: translate(0, 0) scale(1); } + 33% { transform: translate(-30px, -30px) scale(1.05); } + 66% { transform: translate(30px, -20px) scale(0.95); } +} + +/* Modern Tab Navigation */ +.about-tabs { + display: flex; + justify-content: center; + gap: 20px; + margin-bottom: 4rem; + position: relative; + padding: 10px; + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(10px); + border-radius: 100px; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); + max-width: 800px; + margin-left: auto; + margin-right: auto; + border: none; +} + +.about-tab { + background: transparent; + border: none; + color: #666; + padding: 15px 30px; + cursor: pointer; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + font-size: 1rem; + font-weight: 600; + border-radius: 50px; + position: relative; + overflow: hidden; + z-index: 1; +} + +.about-tab::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + border-radius: 50px; + background: linear-gradient(135deg, #0f72b5, #00406e); + transform: translate(-50%, -50%); + transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); + z-index: -1; +} + +.about-tab.active::before { + width: 100%; + height: 100%; +} + +.about-tab.active { + color: #ffffff; + transform: scale(1.05); + box-shadow: 0 8px 20px rgba(15, 114, 181, 0.3); +} + +.about-tab:hover:not(.active) { + color: #0f72b5; + transform: translateY(-2px); + background: rgba(15, 114, 181, 0.05); +} + +/* Tab Content Panels */ +.about-content { + max-width: 1200px; + margin: 0 auto; + position: relative; +} + +.about-panel { + display: none; + animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1); +} + +.about-panel.active { + display: block; +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Company Tab - Cards Layout */ +#who-we-are .panel-text { + display: flex; + gap: 40px; + align-items: stretch; + min-height: 500px; +} + +.company-cards-wrapper { + display: flex; + flex-direction: column; + gap: 30px; + width: 50%; + justify-content: space-between; +} + +.company-card { + background: white; + border-radius: 20px; + padding: 40px; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); + position: relative; + overflow: hidden; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + flex: 1; + display: flex; + flex-direction: column; +} + +.company-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 4px; + height: 100%; + background: linear-gradient(180deg, #0f72b5, #00406e); + transform: scaleY(0); + transition: transform 0.4s; +} + +.company-card:hover::before { + transform: scaleY(1); +} + +.company-card:hover { + transform: translateX(10px); + box-shadow: 0 15px 50px rgba(15, 114, 181, 0.15); +} + +.company-card h4 { + color: #0f72b5; + font-size: 1.4rem; + margin-bottom: 15px; + display: flex; + align-items: center; + gap: 15px; +} + +.company-card-icon { + width: 70px; + height: 70px; + background: linear-gradient(135deg, rgba(15, 114, 181, 0.1), rgba(0, 64, 110, 0.05)); + border-radius: 20px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + transition: all 0.4s; +} + +.company-card:hover .company-card-icon { + transform: scale(1.1) rotate(5deg); + background: linear-gradient(135deg, #0f72b5, #00406e); +} + +.company-card-icon img { + width: 35px; + height: 35px; + filter: brightness(0) saturate(100%) invert(42%) sepia(82%) saturate(723%) hue-rotate(178deg) brightness(98%) contrast(92%); + transition: filter 0.4s; +} + +.company-card:hover .company-card-icon img { + filter: brightness(0) saturate(100%) invert(100%); +} + +/* Mission & Values - Modern Grid */ +.mission-grid { + text-align: left; +} + +.mission-header { + background: linear-gradient(135deg, #0f72b5, #00406e); + color: white; + padding: 60px; + border-radius: 30px; + margin-bottom: 40px; + position: relative; + overflow: hidden; +} + +.mission-header::after { + content: ''; + position: absolute; + top: -50%; + right: -10%; + width: 50%; + height: 200%; + background: rgba(255, 255, 255, 0.1); + transform: rotate(45deg); +} + +.mission-header h3 { + font-size: 2.5rem; + margin-bottom: 20px; + position: relative; + z-index: 1; + color: #ffffff; +} + +.mission-header p { + font-size: 1.2rem; + position: relative; + z-index: 1; + opacity: 0.95; +} + +.values-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 30px; + margin: 3rem 0; +} + +.value-card { + background: white; + border-radius: 24px; + padding: 35px; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + border: 2px solid transparent; + cursor: pointer; +} + +.value-card::after { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(135deg, rgba(15, 114, 181, 0.1) 0%, transparent 100%); + opacity: 0; + transition: opacity 0.4s; +} + +.value-card:hover::after { + opacity: 1; +} + +.value-card:hover { + transform: translateY(-10px) scale(1.02); + box-shadow: 0 20px 60px rgba(15, 114, 181, 0.2); + border-color: #0f72b5; +} + +.value-icon { + width: 100px; + height: 100px; + margin-bottom: 20px; + background: linear-gradient(135deg, rgba(15, 114, 181, 0.1), rgba(0, 64, 110, 0.05)); + border-radius: 30px; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.4s; +} + +.value-icon img { + width: 50px; + height: 50px; + filter: brightness(0) saturate(100%) invert(42%) sepia(82%) saturate(723%) hue-rotate(178deg) brightness(98%) contrast(92%); + transition: filter 0.4s; +} + +.value-card:hover .value-icon { + transform: scale(1.1) rotate(5deg); + background: linear-gradient(135deg, #0f72b5, #00406e); +} + +.value-card:hover .value-icon img { + filter: brightness(0) saturate(100%) invert(100%); +} + +/* Competencies - Timeline Style */ +.competencies-list { + position: relative; + padding-left: 40px; +} + +.competencies-list::before { + content: ''; + position: absolute; + left: 10px; + top: 0; + width: 3px; + height: 100%; + background: linear-gradient(180deg, #0f72b5, #00406e); + border-radius: 2px; +} + +.competency-item { + display: grid; + grid-template-columns: auto 1fr; + gap: 30px; + align-items: center; + padding: 30px; + margin-bottom: 30px; + background: white; + border-radius: 20px; + position: relative; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); +} + +.competency-item::before { + content: ''; + position: absolute; + left: -30px; + top: 50%; + transform: translateY(-50%); + width: 20px; + height: 20px; + background: white; + border: 4px solid #0f72b5; + border-radius: 50%; + z-index: 1; +} + +.competency-item:hover { + transform: translateX(20px); + box-shadow: 0 10px 40px rgba(15, 114, 181, 0.15); +} + +.competency-number { + font-size: 3rem; + font-weight: 700; + background: linear-gradient(135deg, #0f72b5, #00406e); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + opacity: 1; +} + +/* Why IntelSight - 2x2 Grid */ +.why-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 30px; + grid-auto-rows: minmax(250px, auto); +} + +.why-card { + grid-column: span 1; + grid-row: span 1; +} + +.why-card { + background: white; + border-radius: 24px; + padding: 35px; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: space-between; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); + border: 2px solid transparent; +} + +.why-card:hover { + transform: translateY(-5px); + box-shadow: 0 15px 40px rgba(15, 114, 181, 0.15); + border-color: rgba(15, 114, 181, 0.3); +} + +.why-icon { + width: 100px; + height: 100px; + margin: 0 auto 25px; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, rgba(15, 114, 181, 0.1), rgba(0, 64, 110, 0.05)); + border-radius: 30px; + transition: all 0.4s; +} + +.why-icon img { + width: 50px; + height: 50px; + filter: brightness(0) saturate(100%) invert(42%) sepia(82%) saturate(723%) hue-rotate(178deg) brightness(98%) contrast(92%); + transition: filter 0.4s; +} + +/* German Flag Icon Special Styling */ +.german-flag-icon { + background: transparent !important; + padding: 15px; +} + +.german-flag-icon img { + width: 70px !important; + height: 42px !important; + border-radius: 4px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + filter: none !important; +} + +.why-card:hover .german-flag-icon { + background: transparent !important; + transform: scale(1.15); +} + +.why-card:hover .german-flag-icon img { + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); + filter: none !important; +} + +.why-card:hover .why-icon { + transform: scale(1.1) rotate(5deg); + background: linear-gradient(135deg, #0f72b5, #00406e); +} + +.why-card:hover .why-icon img { + filter: brightness(0) saturate(100%) invert(100%); +} + +.why-card h4 { + font-size: 1.6rem; + margin-bottom: 20px; + color: #0f72b5; + text-align: center; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.why-card p { + color: #666; + line-height: 1.8; + flex-grow: 1; + text-align: center; + font-size: 1.05rem; +} + +/* Location Section with Map */ +.location-section { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 45%; + margin-left: auto; + height: 100%; +} + +.mini-germany-map { + flex: 1; + width: 100%; + max-width: 350px; + padding: 30px; + background: white; + border-radius: 20px; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s; + margin-bottom: 20px; + position: relative; + overflow: hidden; +} + +.mini-germany-map::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient(circle at 35% 45%, rgba(15, 114, 181, 0.3) 0%, transparent 40%); + opacity: 0; + transition: opacity 0.4s ease; + pointer-events: none; + z-index: 2; +} + +.mini-germany-map:hover::before { + opacity: 1; +} + +.mini-germany-map:hover { + transform: scale(1.02); + box-shadow: 0 15px 50px rgba(15, 114, 181, 0.15); +} + +.mini-germany-map img { + width: 100%; + height: auto; + max-height: 100%; + object-fit: contain; + transition: all 0.4s ease; + position: relative; + z-index: 1; +} + +.mini-germany-map:hover img { + filter: brightness(1.1) contrast(1.1); +} + +/* Pulsing glow effect for NRW region */ +@keyframes nrwPulse { + 0%, 100% { + filter: drop-shadow(0 0 10px rgba(15, 114, 181, 0.5)); + } + 50% { + filter: drop-shadow(0 0 25px rgba(15, 114, 181, 0.8)); + } +} + +.mini-germany-map:hover img { + animation: nrwPulse 2s ease-in-out infinite; +} + +/* Location Badge Enhancement */ +.location-badge { + display: inline-flex; + align-items: center; + gap: 12px; + padding: 12px 24px; + background: linear-gradient(135deg, rgba(15, 114, 181, 0.1), rgba(0, 64, 110, 0.05)); + border-radius: 100px; + color: #0f72b5; + font-weight: 600; + border: 2px solid rgba(15, 114, 181, 0.2); + transition: all 0.3s; +} + +.location-badge:hover { + background: linear-gradient(135deg, #0f72b5, #00406e); + color: white; + transform: scale(1.05); + box-shadow: 0 10px 30px rgba(15, 114, 181, 0.3); +} + +.location-badge svg { + width: 24px; + height: 24px; + transition: all 0.3s; +} + +.location-badge:hover svg { + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; +} + +@keyframes ping { + 0%, 100% { + transform: scale(1); + opacity: 1; + } + 50% { + transform: scale(1.2); + opacity: 0.8; + } +} + +/* Responsive Design */ +@media (max-width: 768px) { + .about-tabs { + flex-direction: column; + border-radius: 20px; + gap: 10px; + } + + .why-grid { + grid-template-columns: 1fr; + } + + .competencies-list { + padding-left: 20px; + } +} \ No newline at end of file diff --git a/css/animations-enhanced.css b/css/animations-enhanced.css new file mode 100644 index 0000000..edb1287 --- /dev/null +++ b/css/animations-enhanced.css @@ -0,0 +1,371 @@ +/* Enhanced Modern Animations & Effects */ + +/* Glassmorphism Base */ +.glass { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.2); +} + +.glass-dark { + background: rgba(0, 0, 0, 0.3); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.1); +} + +/* Premium Glow Effects */ +.glow-blue { + box-shadow: + 0 0 20px rgba(15, 114, 181, 0.5), + 0 0 40px rgba(15, 114, 181, 0.3), + 0 0 60px rgba(15, 114, 181, 0.1); +} + +.text-glow { + text-shadow: + 0 0 10px rgba(15, 114, 181, 0.8), + 0 0 20px rgba(15, 114, 181, 0.6), + 0 0 30px rgba(15, 114, 181, 0.4); +} + +/* Smooth Fade In Animations */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fadeInScale { + from { + opacity: 0; + transform: scale(0.9); + } + to { + opacity: 1; + transform: scale(1); + } +} + +@keyframes slideInRight { + from { + opacity: 0; + transform: translateX(-50px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +/* Staggered Animation Classes */ +.animate-in { + opacity: 0; + animation: fadeInUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; +} + +.animate-in-scale { + opacity: 0; + animation: fadeInScale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; +} + +.stagger-1 { animation-delay: 0.1s; } +.stagger-2 { animation-delay: 0.2s; } +.stagger-3 { animation-delay: 0.3s; } +.stagger-4 { animation-delay: 0.4s; } +.stagger-5 { animation-delay: 0.5s; } + +/* Floating Animation */ +@keyframes float { + 0%, 100% { transform: translateY(0px); } + 50% { transform: translateY(-20px); } +} + +.floating { + animation: float 6s ease-in-out infinite; +} + +/* Pulse Glow Animation */ +@keyframes pulseGlow { + 0%, 100% { + box-shadow: + 0 0 5px rgba(15, 114, 181, 0.5), + 0 0 10px rgba(15, 114, 181, 0.3); + } + 50% { + box-shadow: + 0 0 20px rgba(15, 114, 181, 0.8), + 0 0 30px rgba(15, 114, 181, 0.5), + 0 0 40px rgba(15, 114, 181, 0.3); + } +} + +.pulse-glow { + animation: pulseGlow 2s ease-in-out infinite; +} + +/* Gradient Animation */ +@keyframes gradientShift { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } +} + +.gradient-animated { + background: linear-gradient( + -45deg, + #0f72b5, + #00406e, + #0f72b5, + #1e90ff + ); + background-size: 400% 400%; + animation: gradientShift 15s ease infinite; +} + +/* Text Reveal Animation */ +@keyframes textReveal { + from { + clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); + } + to { + clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); + } +} + +.text-reveal { + animation: textReveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) forwards; +} + +/* Typewriter Effect */ +@keyframes typewriter { + from { width: 0; } + to { width: 100%; } +} + +@keyframes blink { + 50% { border-color: transparent; } +} + +.typewriter { + overflow: hidden; + white-space: nowrap; + border-right: 3px solid #0f72b5; + animation: + typewriter 3s steps(40) forwards, + blink 0.75s step-end infinite; +} + +/* Morphing Blob Background */ +@keyframes morph { + 0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } + 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } + 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } +} + +.blob { + background: linear-gradient(45deg, #0f72b5, #00406e); + animation: morph 8s ease-in-out infinite; + filter: blur(40px); + opacity: 0.7; +} + +/* Card Hover Effects */ +.card-hover-lift { + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.card-hover-lift:hover { + transform: translateY(-10px) scale(1.02); + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.15), + 0 0 20px rgba(15, 114, 181, 0.3); +} + +/* Magnetic Button Effect */ +.magnetic-button { + position: relative; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); +} + +.magnetic-button::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + border-radius: 50%; + background: rgba(255, 255, 255, 0.3); + transform: translate(-50%, -50%); + transition: width 0.6s, height 0.6s; +} + +.magnetic-button:hover::before { + width: 300px; + height: 300px; +} + +/* Parallax Layers */ +.parallax-slow { transform: translateZ(-1px) scale(1.5); } +.parallax-medium { transform: translateZ(-2px) scale(2); } +.parallax-fast { transform: translateZ(-3px) scale(2.5); } + +/* Reveal on Scroll */ +.reveal { + opacity: 0; + transform: translateY(50px); + transition: all 1s cubic-bezier(0.4, 0, 0.2, 1); +} + +.reveal.active { + opacity: 1; + transform: translateY(0); +} + +/* Glitch Effect */ +@keyframes glitch { + 0%, 100% { + text-shadow: + 0.05em 0 0 rgba(255, 0, 0, 0.75), + -0.05em -0.025em 0 rgba(0, 255, 0, 0.75), + 0.025em 0.05em 0 rgba(0, 0, 255, 0.75); + } + 14% { + text-shadow: + 0.05em 0 0 rgba(255, 0, 0, 0.75), + -0.05em -0.025em 0 rgba(0, 255, 0, 0.75), + 0.025em 0.05em 0 rgba(0, 0, 255, 0.75); + } + 15% { + text-shadow: + -0.05em -0.025em 0 rgba(255, 0, 0, 0.75), + 0.025em 0.025em 0 rgba(0, 255, 0, 0.75), + -0.05em -0.05em 0 rgba(0, 0, 255, 0.75); + } + 49% { + text-shadow: + -0.05em -0.025em 0 rgba(255, 0, 0, 0.75), + 0.025em 0.025em 0 rgba(0, 255, 0, 0.75), + -0.05em -0.05em 0 rgba(0, 0, 255, 0.75); + } + 50% { + text-shadow: + 0.025em 0.05em 0 rgba(255, 0, 0, 0.75), + 0.05em 0 0 rgba(0, 255, 0, 0.75), + 0 -0.05em 0 rgba(0, 0, 255, 0.75); + } + 99% { + text-shadow: + 0.025em 0.05em 0 rgba(255, 0, 0, 0.75), + 0.05em 0 0 rgba(0, 255, 0, 0.75), + 0 -0.05em 0 rgba(0, 0, 255, 0.75); + } +} + +.glitch { + animation: glitch 1s linear infinite; +} + +/* Smooth Scroll Indicator */ +@keyframes scrollDown { + 0% { + transform: translateY(0); + opacity: 0; + } + 40% { + opacity: 1; + } + 80% { + transform: translateY(20px); + opacity: 0; + } + 100% { + opacity: 0; + } +} + +.scroll-indicator-animated { + animation: scrollDown 2s infinite; +} + +/* Loading Shimmer */ +@keyframes shimmer { + 0% { + background-position: -1000px 0; + } + 100% { + background-position: 1000px 0; + } +} + +.shimmer { + background: linear-gradient( + 90deg, + rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 0.3) 50%, + rgba(255, 255, 255, 0) 100% + ); + background-size: 1000px 100%; + animation: shimmer 2s infinite; +} + +/* Orbit Animation */ +@keyframes orbit { + from { transform: rotate(0deg) translateX(100px) rotate(0deg); } + to { transform: rotate(360deg) translateX(100px) rotate(-360deg); } +} + +.orbit { + animation: orbit 20s linear infinite; +} + +/* Perspective Tilt */ +.tilt-card { + transform-style: preserve-3d; + transition: transform 0.5s; +} + +.tilt-card:hover { + transform: perspective(1000px) rotateX(10deg) rotateY(-10deg) scale(1.05); +} + +/* Neon Glow Text */ +.neon-text { + color: #fff; + text-shadow: + 0 0 7px #fff, + 0 0 10px #fff, + 0 0 21px #fff, + 0 0 42px #0f72b5, + 0 0 82px #0f72b5, + 0 0 92px #0f72b5, + 0 0 102px #0f72b5, + 0 0 151px #0f72b5; +} + +/* Water Ripple Effect */ +@keyframes ripple { + 0% { + transform: scale(0); + opacity: 1; + } + 100% { + transform: scale(4); + opacity: 0; + } +} + +.ripple::before { + content: ''; + position: absolute; + border: 1px solid #0f72b5; + border-radius: 50%; + animation: ripple 1s ease-out; +} \ No newline at end of file diff --git a/css/animations.css b/css/animations.css new file mode 100644 index 0000000..41cc9b3 --- /dev/null +++ b/css/animations.css @@ -0,0 +1,2715 @@ +/* Global Styles */ +:root { + --primary-blue: #0f72b5; + --dark-blue: #00406e; + --accent-blue: #0f72b5; + --secondary-blue: #00406e; + --light-gray: #f4f4f4; + --white: #FFFFFF; + --text-dark: #333333; + --border-gray: #e0e0e0; + --alert-red: #FF4444; + --success-green: #4CAF50; + --warning-yellow: #FFC107; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; + background-color: var(--white); + color: var(--text-dark); + overflow-x: hidden; + line-height: 1.6; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +/* Typography */ +h1, h2, h3, h4 { + font-family: 'Bebas Neue', cursive; + letter-spacing: 1px; +} + +.section-title { + font-size: 3.5rem; + text-align: center; + margin-bottom: 1rem; + position: relative; + display: inline-block; + width: 100%; +} + +.section-subtitle { + font-size: 1.2rem; + text-align: center; + opacity: 0.8; + margin-bottom: 3rem; + font-weight: 300; +} + +/* Navigation */ +.navbar { + position: fixed; + top: 0; + width: 100%; + z-index: 1000; + transition: all 0.3s ease; + background: var(--white); + border-bottom: 1px solid var(--border-gray); + box-shadow: 0 2px 4px rgba(0,0,0,0.1); +} + +.nav-container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.5rem 2rem; +} + +.logo-img { + height: 55px; + width: auto; + filter: none; +} + +.nav-menu { + display: flex; + list-style: none; + gap: 2rem; +} + +.nav-menu a { + color: var(--text-dark); + text-decoration: none; + font-weight: 500; + font-size: 1rem; + transition: all 0.3s ease; + position: relative; +} + +.nav-menu a::after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + width: 0; + height: 2px; + background: var(--primary-blue); + transition: width 0.3s ease; +} + +.nav-menu a:hover::after { + width: 100%; +} + +.nav-extras { + display: flex; + align-items: center; + gap: 1rem; +} + +.lang-toggle { + background: transparent; + border: 1px solid var(--primary-blue); + color: var(--primary-blue); + padding: 0.5rem 1rem; + border-radius: 4px; + cursor: pointer; + transition: all 0.3s ease; + font-weight: 500; +} + +.lang-toggle:hover { + background: var(--primary-blue); + color: var(--white); +} + +.cta-button, .primary-button, .secondary-button { + padding: 0.75rem 1.5rem; + border: none; + border-radius: 4px; + font-weight: 500; + cursor: pointer; + transition: all 0.3s ease; + text-transform: none; + letter-spacing: 0.5px; +} + +.cta-button, .primary-button { + background: var(--primary-blue); + color: var(--white); +} + +.cta-button:hover, .primary-button:hover { + background: var(--dark-blue); + transform: translateY(-2px); + box-shadow: 0 5px 20px rgba(15, 114, 181, 0.3); +} + +.secondary-button { + background: transparent; + color: var(--primary-blue); + border: 2px solid var(--primary-blue); +} + +.secondary-button:hover { + background: var(--primary-blue); + color: var(--white); +} + +.large { + padding: 1rem 2rem; + font-size: 1.1rem; +} + +/* Hero Section */ +.hero { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + padding-top: 100px; + background: #000000; +} + +/* Clean transition */ +.hero::after { + display: none; +} + +/* Video Background */ +.hero-video { + position: absolute; + top: 50%; + left: 50%; + min-width: 100%; + min-height: 100%; + width: auto; + height: auto; + transform: translate(-50%, -50%); + z-index: 0; + object-fit: cover; +} + +/* Video Overlay to match brand colors */ +.video-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(135deg, + rgba(15, 114, 181, 0.7) 0%, + rgba(0, 64, 110, 0.7) 50%, + rgba(15, 114, 181, 0.7) 100%); + mix-blend-mode: multiply; + z-index: 1; +} + +#particleCanvas { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 2; +} + +.hero-content { + text-align: center; + z-index: 3; + position: relative; +} + +.hero-title { + margin-bottom: 2rem; +} + +.subtitle { + display: block; + font-size: 1.2rem; + margin-bottom: 0.5rem; + color: var(--text-dark); + font-weight: 400; + letter-spacing: 1px; +} + +.main-title { + display: block; + font-size: 3.5rem; + letter-spacing: 2px; + color: var(--primary-blue); + font-weight: 700; +} + +.hero-text { + font-size: 1.1rem; + margin-bottom: 3rem; + color: var(--text-dark); +} + + +.hero-cta { + display: flex; + gap: 1rem; + justify-content: center; + margin-top: 2rem; +} + +.trust-indicators { + position: absolute; + bottom: 50px; + left: 50%; + transform: translateX(-50%); + display: flex; + gap: 4rem; + z-index: 3; +} + +.indicator { + text-align: center; +} + +.indicator-value { + font-size: 2.5rem; + font-weight: 700; + display: block; + color: var(--primary-blue); +} + +.indicator-label { + font-size: 0.9rem; + color: var(--text-dark); +} + +/* Digital Beat Section - Removed */ +.digital-beat { + display: none; +} + +.digital-beat::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + repeating-linear-gradient( + 0deg, + transparent, + transparent 2px, + rgba(0, 212, 255, 0.03) 2px, + rgba(0, 212, 255, 0.03) 4px + ), + repeating-linear-gradient( + 90deg, + transparent, + transparent 2px, + rgba(0, 212, 255, 0.03) 2px, + rgba(0, 212, 255, 0.03) 4px + ); + pointer-events: none; +} + +.timeline { + position: relative; + padding: 50px 0; + perspective: 1000px; +} + +/* Liquid Timeline */ +.timeline::before { + content: ''; + position: absolute; + left: 50%; + top: 0; + bottom: 0; + width: 4px; + transform: translateX(-50%); + background: transparent; + filter: blur(1px); +} + +.liquid-timeline { + position: absolute; + left: 50%; + top: 0; + bottom: 0; + width: 4px; + transform: translateX(-50%); + overflow: hidden; +} + +.liquid-timeline::before { + content: ''; + position: absolute; + top: -100%; + left: 0; + right: 0; + height: 200%; + background: linear-gradient( + 180deg, + transparent 0%, + var(--accent-blue) 20%, + transparent 40%, + var(--accent-blue) 60%, + transparent 80%, + var(--accent-blue) 100% + ); + animation: liquidFlow 8s linear infinite; +} + +@keyframes liquidFlow { + to { transform: translateY(50%); } +} + +.timeline-item { + display: flex; + align-items: center; + margin-bottom: 80px; + position: relative; + opacity: 0; + transform: translateY(50px) rotateX(-10deg); + transform-style: preserve-3d; + transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); +} + +.timeline-item.visible { + opacity: 1; + transform: translateY(0) rotateX(0); +} + +.timeline-item:nth-child(even) { + flex-direction: row-reverse; +} + +/* Glitch time display */ +.timeline-item::before { + content: attr(data-time); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: -40px; + font-size: 2rem; + font-weight: 700; + font-family: 'Bebas Neue', monospace; + color: var(--accent-blue); + text-shadow: + 2px 2px 0 rgba(255, 0, 128, 0.5), + -2px -2px 0 rgba(0, 255, 255, 0.5); + animation: glitchText 10s infinite; + background: rgba(0, 0, 0, 0.8); + padding: 5px 15px; + border-radius: 20px; + backdrop-filter: blur(10px); +} + +/* Alternate positioning for even items */ +.timeline-item:nth-child(even)::before { + left: calc(50% + 100px); +} + +.timeline-item:nth-child(odd)::before { + left: calc(50% - 100px); +} + +@keyframes glitchText { + 0%, 90%, 100% { + text-shadow: + 2px 2px 0 rgba(255, 0, 128, 0.5), + -2px -2px 0 rgba(0, 255, 255, 0.5); + } + 92% { + text-shadow: + -2px 2px 0 rgba(255, 0, 128, 0.8), + 2px -2px 0 rgba(0, 255, 255, 0.8); + } + 94% { + text-shadow: + 2px -2px 0 rgba(255, 0, 128, 0.5), + -2px 2px 0 rgba(0, 255, 255, 0.5); + } +} + +/* Morphing Icons */ +.timeline-icon { + width: 100px; + height: 100px; + background: rgba(0, 0, 0, 0.8); + border: 2px solid var(--accent-blue); + display: flex; + align-items: center; + justify-content: center; + position: relative; + z-index: 2; + clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); + transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); + animation: iconFloat 6s ease-in-out infinite; +} + +.timeline-item:nth-child(1) .timeline-icon { animation-delay: 0s; } +.timeline-item:nth-child(2) .timeline-icon { animation-delay: 1.5s; } +.timeline-item:nth-child(3) .timeline-icon { animation-delay: 3s; } +.timeline-item:nth-child(4) .timeline-icon { animation-delay: 4.5s; } + +@keyframes iconFloat { + 0%, 100% { transform: translateY(0) rotate(0deg); } + 50% { transform: translateY(-10px) rotate(180deg); } +} + +.timeline-icon::before { + content: ''; + position: absolute; + inset: -20px; + background: radial-gradient(circle, var(--accent-blue), transparent); + opacity: 0.3; + filter: blur(20px); + animation: pulse 2s ease-in-out infinite; +} + +.timeline-icon svg { + width: 50px; + height: 50px; + color: var(--accent-blue); + filter: drop-shadow(0 0 10px currentColor); + animation: iconMorph 4s ease-in-out infinite; +} + +@keyframes iconMorph { + 0%, 100% { transform: scale(1) rotate(0deg); } + 50% { transform: scale(1.2) rotate(90deg); } +} + +/* Holographic content */ +.timeline-content { + flex: 1; + padding: 0 80px; + position: relative; +} + +.timeline-content::before { + content: ''; + position: absolute; + top: -10px; + left: 20px; + right: 20px; + bottom: -10px; + background: linear-gradient( + 135deg, + rgba(0, 212, 255, 0.1), + rgba(255, 0, 128, 0.1) + ); + filter: blur(40px); + opacity: 0; + transition: opacity 0.6s ease; +} + +.timeline-item:hover .timeline-content::before { + opacity: 1; +} + +.timeline-item:nth-child(even) .timeline-content { + text-align: right; +} + +.timeline-content h3 { + font-size: 2.2rem; + margin-bottom: 0.5rem; + background: linear-gradient( + 45deg, + var(--white), + var(--accent-blue), + var(--white) + ); + background-size: 200% 100%; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + animation: shimmer 3s linear infinite; +} + +@keyframes shimmer { + to { background-position: -200% 0; } +} + +.timeline-content p { + opacity: 0.7; + font-size: 1.1rem; + letter-spacing: 0.5px; + position: relative; + padding: 10px 0; +} + +/* Chromatic aberration on hover */ +.timeline-item:hover .timeline-content h3 { + animation: chromaticAberration 0.3s ease-out; +} + +@keyframes chromaticAberration { + 0%, 100% { text-shadow: none; } + 50% { + text-shadow: + -3px 0 rgba(255, 0, 0, 0.5), + 3px 0 rgba(0, 255, 255, 0.5); + } +} + +/* Intelligence Visualization - Neural Network */ +.intelligence-viz { + padding: 100px 0; + background: #000; + position: relative; + overflow: hidden; + min-height: 100vh; +} + +.intelligence-viz::before { + content: ''; + position: absolute; + inset: 0; + background: + radial-gradient(circle at 20% 50%, rgba(0, 212, 255, 0.1) 0%, transparent 50%), + radial-gradient(circle at 80% 50%, rgba(255, 0, 128, 0.1) 0%, transparent 50%); + filter: blur(100px); +} + +/* Dunkler Overlay für bessere Lesbarkeit */ +.intelligence-viz .container { + position: relative; + z-index: 10; +} + +.viz-container { + position: relative; + display: flex; + align-items: center; + justify-content: center; +} + +/* 3D Neural Network Canvas */ +#neuralCanvas { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + pointer-events: none; +} + +/* Data Particles */ +.data-particles { + position: absolute; + width: 100%; + height: 100%; + overflow: hidden; +} + +.data-particle { + position: absolute; + width: 4px; + height: 4px; + background: var(--accent-blue); + border-radius: 50%; + filter: blur(1px); + animation: dataFlow 20s linear infinite; +} + +@keyframes dataFlow { + from { + transform: translate(-100px, -100px); + } + to { + transform: translate(calc(100vw + 100px), calc(100vh + 100px)); + } +} + +/* Feature Nodes - Clean Tech Style */ +.feature-nodes { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 60px; + position: relative; + z-index: 3; + padding: 0 40px; +} + +.node { + background: rgba(0, 0, 0, 0.8); + backdrop-filter: blur(5px); + -webkit-backdrop-filter: blur(5px); + border: 1px solid rgba(0, 212, 255, 0.2); + border-radius: 0; + padding: 40px; + cursor: pointer; + transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + transform-style: preserve-3d; + perspective: 1000px; + clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); +} + +/* Holographic Shimmer */ +.node::before { + content: ''; + position: absolute; + top: -200%; + left: -50%; + width: 200%; + height: 400%; + background: linear-gradient( + 45deg, + transparent 30%, + rgba(0, 212, 255, 0.1) 35%, + rgba(255, 0, 128, 0.1) 40%, + transparent 45% + ); + animation: holographicSweep 6s linear infinite; + pointer-events: none; +} + +@keyframes holographicSweep { + to { + transform: translateX(100%) translateY(100%); + } +} + +/* Glitch Effect on Hover */ +.node:hover { + transform: translateY(-10px) rotateX(-5deg); + box-shadow: + 0 20px 40px rgba(0, 212, 255, 0.3), + inset 0 0 20px rgba(0, 212, 255, 0.1); + animation: glitchNode 0.3s ease-out; +} + +@keyframes glitchNode { + 0%, 100% { transform: translateY(-10px) rotateX(-5deg); } + 25% { transform: translateY(-10px) rotateX(-5deg) translateX(-2px); } + 75% { transform: translateY(-10px) rotateX(-5deg) translateX(2px); } +} + +/* ASCII/Matrix Rain Background */ +.node::after { + content: '01001001 01101110 01110100 01100101 01101100'; + position: absolute; + top: 10px; + left: 10px; + right: 10px; + font-family: monospace; + font-size: 10px; + color: rgba(0, 212, 255, 0.1); + word-break: break-all; + line-height: 1.2; + pointer-events: none; + animation: matrixRain 20s linear infinite; +} + +@keyframes matrixRain { + to { transform: translateY(100%); } +} + +.node-icon { + width: 80px; + height: 80px; + margin-bottom: 1.5rem; + filter: drop-shadow(0 0 20px currentColor); + animation: iconPulse 3s ease-in-out infinite; + display: flex; + align-items: center; + justify-content: center; +} + +.node-icon svg { + width: 100%; + height: 100%; + color: var(--accent-blue); +} + +@keyframes iconPulse { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.1); } +} + +.node-info h4 { + font-size: 1.8rem; + margin-bottom: 0.8rem; + text-transform: uppercase; + letter-spacing: 2px; + background: linear-gradient( + 90deg, + var(--white), + var(--accent-blue), + var(--white) + ); + background-size: 200% 100%; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + animation: textShimmer 4s linear infinite; +} + +@keyframes textShimmer { + to { background-position: -200% 0; } +} + +.node-info p { + opacity: 0.7; + font-size: 1.1rem; + line-height: 1.6; +} + +/* Chromatic Aberration for Icons */ +.node:hover .node-icon { + animation: chromaticIcon 0.3s ease-out forwards; +} + +@keyframes chromaticIcon { + 0%, 100% { + filter: drop-shadow(0 0 20px currentColor); + } + 50% { + filter: + drop-shadow(-2px 0 0 rgba(255, 0, 0, 0.8)) + drop-shadow(2px 0 0 rgba(0, 255, 255, 0.8)) + drop-shadow(0 0 20px currentColor); + } +} + +/* German Engineering - Matrix Style */ +.german-engineering { + padding: 100px 0; + background: #000; + position: relative; + overflow: hidden; +} + +/* Digital Grid Background */ +.german-engineering::before { + content: ''; + position: absolute; + top: -50px; /* Erweitert über die Grenzen */ + left: -50px; + right: -50px; + bottom: -50px; + background-image: + linear-gradient(rgba(0, 212, 255, 0.1) 1px, transparent 1px), + linear-gradient(90deg, rgba(0, 212, 255, 0.1) 1px, transparent 1px), + radial-gradient(circle at 25% 25%, rgba(0, 212, 255, 0.05) 0%, transparent 50%), + radial-gradient(circle at 75% 75%, rgba(255, 0, 128, 0.05) 0%, transparent 50%); + background-size: 50px 50px, 50px 50px, 100% 100%, 100% 100%; + animation: gridMove 20s linear infinite; + z-index: 0; +} + +@keyframes gridMove { + to { transform: translate(50px, 50px); } +} + +.engineering-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 60px; + position: relative; + z-index: 2; +} + +.engineering-card { + background: rgba(0, 0, 0, 0.8); + border: 1px solid var(--accent-blue); + padding: 50px 40px; + text-align: center; + position: relative; + overflow: hidden; + transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); + clip-path: polygon( + 0 0, + calc(100% - 30px) 0, + 100% 30px, + 100% 100%, + 30px 100%, + 0 calc(100% - 30px) + ); +} + +/* Scanning Line Effect */ +.engineering-card::before { + content: ''; + position: absolute; + top: -100%; + left: 0; + right: 0; + height: 100%; + background: linear-gradient( + 0deg, + transparent 0%, + rgba(0, 212, 255, 0.1) 50%, + transparent 100% + ); + animation: scanCard 6s linear infinite; +} + +@keyframes scanCard { + to { top: 100%; } +} + +.engineering-card:hover { + transform: translateY(-10px) scale(1.02); + border-color: var(--white); + background: rgba(0, 212, 255, 0.05); + box-shadow: + 0 20px 40px rgba(0, 212, 255, 0.4), + inset 0 0 60px rgba(0, 212, 255, 0.1); +} + +/* Tech Icons Container */ +.card-icon { + position: relative; + display: inline-block; + margin-bottom: 30px; + width: 120px; + height: 120px; +} + +/* Rotating Tech Circle */ +.icon-bg { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + height: 100%; + border: 2px solid rgba(0, 212, 255, 0.3); + border-radius: 50%; + animation: rotateCircle 10s linear infinite; +} + +.icon-bg::before, +.icon-bg::after { + content: ''; + position: absolute; + inset: -10px; + border: 1px solid rgba(0, 212, 255, 0.1); + border-radius: 50%; + animation: rotateCircle 15s linear infinite reverse; +} + +.icon-bg::after { + inset: -20px; + animation-duration: 20s; +} + +@keyframes rotateCircle { + to { transform: translate(-50%, -50%) rotate(360deg); } +} + +.card-icon svg { + position: relative; + z-index: 2; + width: 60px; + height: 60px; + color: var(--accent-blue); + filter: drop-shadow(0 0 20px currentColor); + animation: iconFloat 4s ease-in-out infinite; +} + +@keyframes iconFloat { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-10px); } +} + +.engineering-card h3 { + font-size: 2rem; + margin-bottom: 1rem; + text-transform: uppercase; + letter-spacing: 3px; + background: linear-gradient(45deg, var(--white), var(--accent-blue)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.engineering-card p { + margin-bottom: 30px; + opacity: 0.7; + font-size: 1.1rem; + line-height: 1.6; +} + +/* Live Progress Bars */ +.stat-bar { + width: 100%; + height: 10px; + background: rgba(0, 0, 0, 0.5); + border: 1px solid rgba(0, 212, 255, 0.2); + position: relative; + overflow: hidden; +} + +.stat-fill { + height: 100%; + background: var(--accent-blue); + position: relative; + animation: fillBar 2s ease-out forwards; +} + +/* Glowing Pulse Effect */ +.stat-fill::after { + content: ''; + position: absolute; + top: 0; + right: 0; + width: 20px; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8)); + animation: statPulse 2s linear infinite; +} + +@keyframes statPulse { + to { transform: translateX(-200px); } +} + +/* Percentage Display */ +.stat-value { + position: absolute; + right: -40px; + top: 50%; + transform: translateY(-50%); + font-family: 'Bebas Neue', monospace; + font-size: 1.2rem; + color: var(--accent-blue); + text-shadow: 0 0 10px currentColor; +} + +/* Command Center - Living Dashboard */ +.command-center { + padding: 100px 0; + background: #000; + position: relative; + overflow: hidden; +} + +/* Schwarzer Übergang am Ende */ +.command-center::after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + right: 0; + height: 10px; + background: #000; + z-index: 100; +} + +/* Scanlines Effect */ +.command-center::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + repeating-linear-gradient( + 0deg, + transparent, + transparent 2px, + rgba(0, 212, 255, 0.03) 2px, + rgba(0, 212, 255, 0.03) 4px + ); + pointer-events: none; + animation: scanlines 8s linear infinite; +} + +@keyframes scanlines { + to { transform: translateY(10px); } +} + +.preview-container { + background: rgba(0, 0, 0, 0.6); + backdrop-filter: blur(20px) saturate(180%); + -webkit-backdrop-filter: blur(20px) saturate(180%); + border: 1px solid rgba(0, 212, 255, 0.3); + border-radius: 20px; + overflow: hidden; + box-shadow: + 0 30px 60px rgba(0, 0, 0, 0.8), + inset 0 0 100px rgba(0, 212, 255, 0.05); + position: relative; +} + +/* Holographic Effect */ +.preview-container::before { + content: ''; + position: absolute; + top: -100%; + left: -100%; + right: -100%; + bottom: -100%; + background: + linear-gradient( + 45deg, + transparent 40%, + rgba(0, 212, 255, 0.1) 50%, + transparent 60% + ); + animation: hologramSweep 4s linear infinite; +} + +@keyframes hologramSweep { + to { transform: translate(100%, 100%); } +} + +.preview-header { + background: rgba(0, 0, 0, 0.8); + padding: 20px 30px; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid rgba(0, 212, 255, 0.2); + position: relative; +} + +/* Glitch Header */ +.preview-header::after { + content: 'COMMAND CENTER'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 0.8rem; + font-family: monospace; + color: rgba(0, 212, 255, 0.1); + letter-spacing: 2px; + pointer-events: none; + animation: glitchHeader 10s infinite; +} + +@keyframes glitchHeader { + 0%, 95%, 100% { opacity: 0; } + 96% { opacity: 1; transform: translate(-50%, -50%) translateX(-2px); } + 97% { opacity: 1; transform: translate(-50%, -50%) translateX(2px); } + 98% { opacity: 1; transform: translate(-50%, -50%) translateY(-2px); } +} + +.window-controls { + display: flex; + gap: 12px; + z-index: 2; +} + +.control { + width: 14px; + height: 14px; + border-radius: 50%; + position: relative; + cursor: pointer; + transition: all 0.3s ease; +} + +.control::before { + content: ''; + position: absolute; + inset: -2px; + border-radius: 50%; + opacity: 0; + transition: opacity 0.3s ease; +} + +.control:hover::before { + opacity: 1; +} + +.control.red { + background: #FF5F56; + box-shadow: 0 0 10px rgba(255, 95, 86, 0.5); +} +.control.red::before { background: rgba(255, 95, 86, 0.3); } + +.control.yellow { + background: #FFBD2E; + box-shadow: 0 0 10px rgba(255, 189, 46, 0.5); +} +.control.yellow::before { background: rgba(255, 189, 46, 0.3); } + +.control.green { + background: #27C93F; + box-shadow: 0 0 10px rgba(39, 201, 63, 0.5); +} +.control.green::before { background: rgba(39, 201, 63, 0.3); } + +.preview-tabs { + display: flex; + gap: 30px; + z-index: 2; +} + +.tab { + background: transparent; + border: none; + color: rgba(255, 255, 255, 0.6); + padding: 10px 20px; + cursor: pointer; + transition: all 0.3s ease; + border-radius: 10px; + text-transform: uppercase; + letter-spacing: 1px; + font-size: 0.9rem; + position: relative; +} + +.tab::before { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 2px; + background: var(--accent-blue); + transform: scaleX(0); + transition: transform 0.3s ease; +} + +.tab.active, .tab:hover { + color: var(--white); + background: rgba(0, 212, 255, 0.1); +} + +.tab.active::before { + transform: scaleX(1); +} + +.preview-content { + padding: 50px; + position: relative; +} + +.dashboard-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 30px; +} + +/* Living Widgets */ +.widget { + background: rgba(0, 0, 0, 0.4); + backdrop-filter: blur(10px); + border: 1px solid rgba(0, 212, 255, 0.2); + border-radius: 15px; + padding: 30px; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; +} + +/* Data Stream Background */ +.widget::before { + content: attr(data-value); + position: absolute; + font-size: 100px; + font-weight: 700; + top: -20px; + right: -20px; + color: rgba(0, 212, 255, 0.03); + font-family: 'Bebas Neue', monospace; + pointer-events: none; +} + +.widget:hover { + transform: translateY(-5px) scale(1.02); + border-color: var(--accent-blue); + box-shadow: + 0 10px 40px rgba(0, 212, 255, 0.3), + inset 0 0 30px rgba(0, 212, 255, 0.1); +} + +.widget h4 { + font-size: 0.9rem; + margin-bottom: 20px; + text-transform: uppercase; + letter-spacing: 2px; + color: rgba(255, 255, 255, 0.5); + font-weight: 600; +} + +/* Animated Threat Level */ +.threat-indicator { + padding: 15px 25px; + border-radius: 10px; + text-align: center; + font-weight: 700; + letter-spacing: 2px; + position: relative; + overflow: hidden; + text-transform: uppercase; +} + +.threat-indicator::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + animation: threatSweep 3s infinite; +} + +@keyframes threatSweep { + to { left: 100%; } +} + +.threat-indicator.low { + background: linear-gradient(135deg, #1a5f1a, #2d7a2d); + color: #4CAF50; + text-shadow: 0 0 20px currentColor; + box-shadow: + inset 0 0 20px rgba(76, 175, 80, 0.3), + 0 0 30px rgba(76, 175, 80, 0.2); +} + +/* Live Counting Numbers */ +.case-count, .time-display { + font-size: 3rem; + font-weight: 700; + font-family: 'Bebas Neue', monospace; + background: linear-gradient(45deg, var(--accent-blue), var(--white)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + text-shadow: 0 0 30px rgba(0, 212, 255, 0.5); + display: inline-block; + min-width: 100px; +} + +/* 3D Terrain Map */ +.map-view { + position: relative; +} + +.map-placeholder { + height: 200px; + background: #000; + border-radius: 10px; + position: relative; + overflow: hidden; +} + +/* Topographic Grid */ +.map-placeholder::before { + content: ''; + position: absolute; + inset: 0; + background-image: + linear-gradient(rgba(0, 212, 255, 0.1) 1px, transparent 1px), + linear-gradient(90deg, rgba(0, 212, 255, 0.1) 1px, transparent 1px); + background-size: 20px 20px; + transform: perspective(500px) rotateX(60deg); + transform-origin: center bottom; +} + +/* Radar Sweep */ +.map-placeholder::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 200%; + height: 200%; + background: conic-gradient( + from 0deg, + transparent 0deg, + rgba(0, 212, 255, 0.3) 30deg, + transparent 60deg + ); + transform: translate(-50%, -50%); + animation: radarSweep 4s linear infinite; +} + +@keyframes radarSweep { + to { transform: translate(-50%, -50%) rotate(360deg); } +} + +/* Active Points */ +.map-points { + position: absolute; + inset: 0; +} + +.map-point { + position: absolute; + width: 8px; + height: 8px; + background: var(--accent-blue); + border-radius: 50%; + box-shadow: 0 0 20px currentColor; + animation: pointPulse 2s ease-in-out infinite; +} + +@keyframes pointPulse { + 0%, 100% { + transform: scale(1); + opacity: 1; + } + 50% { + transform: scale(1.5); + opacity: 0.6; + } +} + +/* Final CTA - Futuristic Design */ +.final-cta { + padding: 150px 0; + background: #000; + text-align: center; + position: relative; + overflow: hidden; + margin-top: -10px; /* Starke Überlappung */ + z-index: 10; /* Definitiv über Command Center */ + box-shadow: 0 -10px 20px rgba(0, 0, 0, 1); /* Schatten nach oben */ +} + +/* Matrix Rain Background */ +.final-cta::before { + content: '10110101 00101011 11010010 01001101 10110101 00101011 11010010 01001101'; + position: absolute; + top: -100%; + left: 0; + right: 0; + height: 200%; + font-family: monospace; + font-size: 20px; + color: rgba(0, 212, 255, 0.05); + word-break: break-all; + line-height: 1.2; + animation: matrixFall 20s linear infinite; + pointer-events: none; +} + +@keyframes matrixFall { + to { transform: translateY(50%); } +} + +/* Holographic Grid */ +.final-cta::after { + content: ''; + position: absolute; + inset: 0; + background-image: + linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px), + linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px); + background-size: 100px 100px; + animation: gridShift 10s linear infinite; +} + +@keyframes gridShift { + to { transform: translate(100px, 100px); } +} + +.cta-content { + position: relative; + z-index: 2; +} + +.cta-title { + font-size: 4rem; + margin-bottom: 1.5rem; + text-transform: uppercase; + letter-spacing: 4px; + position: relative; + display: inline-block; +} + +/* Glitch Title Effect */ +.cta-title::before, +.cta-title::after { + content: attr(data-text); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.cta-title::before { + animation: glitchCTA1 0.5s infinite; + color: rgba(0, 212, 255, 0.8); + z-index: -1; +} + +.cta-title::after { + animation: glitchCTA2 0.5s infinite; + color: rgba(255, 0, 128, 0.8); + z-index: -2; +} + +@keyframes glitchCTA1 { + 0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); } + 20% { clip-path: inset(20% 0 60% 0); transform: translate(-2px, 2px); } + 40% { clip-path: inset(50% 0 20% 0); transform: translate(2px, -2px); } + 60% { clip-path: inset(80% 0 0 0); transform: translate(-1px, 1px); } +} + +@keyframes glitchCTA2 { + 0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); } + 30% { clip-path: inset(10% 0 80% 0); transform: translate(2px, -1px); } + 50% { clip-path: inset(40% 0 40% 0); transform: translate(-2px, 2px); } + 70% { clip-path: inset(70% 0 10% 0); transform: translate(1px, -2px); } +} + +.cta-subtitle { + font-size: 1.5rem; + margin-bottom: 4rem; + opacity: 0.7; + letter-spacing: 2px; + animation: fadeInOut 4s ease-in-out infinite; +} + +@keyframes fadeInOut { + 0%, 100% { opacity: 0.7; } + 50% { opacity: 1; } +} + +/* Futuristic CTA Buttons */ +.cta-buttons { + display: flex; + gap: 40px; + justify-content: center; + margin-bottom: 80px; +} + +.cta-buttons .primary-button, +.cta-buttons .secondary-button { + position: relative; + padding: 20px 40px; + font-size: 1.2rem; + text-transform: uppercase; + letter-spacing: 2px; + overflow: hidden; + clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); +} + +.cta-buttons .primary-button::before { + content: ''; + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + background: linear-gradient(45deg, var(--accent-blue), transparent, var(--accent-blue)); + animation: rotateGradient 3s linear infinite; + z-index: -1; +} + +@keyframes rotateGradient { + to { transform: rotate(360deg); } +} + +.cta-buttons .secondary-button { + background: transparent; + border: 2px solid var(--accent-blue); + position: relative; +} + +.cta-buttons .secondary-button::after { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.4), transparent); + animation: buttonSweep 3s infinite; +} + +@keyframes buttonSweep { + to { left: 100%; } +} + +/* Certification Cards */ +.certifications { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 30px; + max-width: 600px; + margin: 0 auto; +} + +.cert-card { + background: rgba(0, 0, 0, 0.6); + border: 1px solid rgba(0, 212, 255, 0.2); + padding: 30px; + position: relative; + overflow: hidden; + transition: all 0.3s ease; +} + + +.cert-card:hover { + transform: translateY(-5px); + border-color: var(--accent-blue); + box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3); +} + +.cert-icon { + width: 60px; + height: 60px; + margin: 0 auto 15px; + display: flex; + align-items: center; + justify-content: center; +} + +.cert-icon svg { + width: 100%; + height: 100%; + color: var(--accent-blue); + filter: drop-shadow(0 0 10px currentColor); +} + +.cert-name { + font-family: 'Bebas Neue', monospace; + font-size: 1.2rem; + letter-spacing: 2px; + color: rgba(255, 255, 255, 0.8); +} + +/* Footer */ +.footer { + background: #000; + padding: 80px 0 30px; + position: relative; + overflow: hidden; +} + +/* Animated Grid Background */ +.footer::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-image: + linear-gradient(rgba(0, 212, 255, 0.05) 1px, transparent 1px), + linear-gradient(90deg, rgba(0, 212, 255, 0.05) 1px, transparent 1px); + background-size: 50px 50px; + animation: gridSlide 20s linear infinite; + pointer-events: none; +} + +/* Top Border Animation */ +.footer::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 2px; + background: linear-gradient( + 90deg, + transparent, + var(--accent-blue) 20%, + var(--accent-blue) 80%, + transparent + ); + animation: borderGlow 3s ease-in-out infinite; +} + +@keyframes borderGlow { + 0%, 100% { opacity: 0.5; transform: scaleX(0.5); } + 50% { opacity: 1; transform: scaleX(1); } +} + +.footer-content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 60px; + margin-bottom: 60px; + position: relative; + z-index: 2; +} + +/* Logo Section Enhancement */ +.footer-section:first-child { + position: relative; +} + +.footer-section:first-child::before { + content: ''; + position: absolute; + top: -20px; + left: -20px; + width: 100px; + height: 100px; + background: radial-gradient(circle, rgba(0, 212, 255, 0.2), transparent); + filter: blur(40px); + animation: pulse 4s ease-in-out infinite; +} + +.footer-section h4 { + font-size: 1.5rem; + margin-bottom: 25px; + text-transform: uppercase; + letter-spacing: 2px; + position: relative; + display: inline-block; + background: linear-gradient(45deg, var(--white), var(--accent-blue)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +/* Animated underline for headers */ +.footer-section h4::after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + width: 50px; + height: 2px; + background: var(--accent-blue); + box-shadow: 0 0 10px var(--accent-blue); + animation: expandWidth 2s ease-out forwards; +} + +@keyframes expandWidth { + from { width: 0; } + to { width: 50px; } +} + +.footer-section ul { + list-style: none; +} + +.footer-section ul li { + margin-bottom: 15px; + position: relative; + padding-left: 20px; +} + +/* Animated bullet points */ +.footer-section ul li::before { + content: ''; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 6px; + height: 6px; + background: var(--accent-blue); + border-radius: 50%; + box-shadow: 0 0 10px var(--accent-blue); + animation: bulletPulse 2s ease-in-out infinite; +} + +@keyframes bulletPulse { + 0%, 100% { transform: translateY(-50%) scale(1); opacity: 0.5; } + 50% { transform: translateY(-50%) scale(1.5); opacity: 1; } +} + +.footer-section a { + color: var(--white); + text-decoration: none; + opacity: 0.7; + transition: all 0.3s ease; + position: relative; + display: inline-block; +} + +.footer-section a:hover { + opacity: 1; + color: var(--accent-blue); + transform: translateX(5px); +} + +/* Glitch effect on hover */ +.footer-section a:hover::before { + content: attr(data-text); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + animation: glitchText 0.3s ease-out; +} + +/* Contact info styling */ +.footer-section p { + opacity: 0.8; + margin-bottom: 10px; +} + +/* Only apply icons to contact section */ +.footer-section:last-child p { + display: flex; + align-items: center; + gap: 10px; +} + +/* Add icons for contact */ +.footer-section:last-child p::before { + content: ''; + width: 20px; + height: 20px; + display: inline-block; + background: var(--accent-blue); + mask-size: contain; + -webkit-mask-size: contain; +} + +.footer-section:last-child p:first-of-type::before { + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E"); +} + +.footer-section:last-child p:last-of-type::before { + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); +} + +/* Copyright section */ +.copyright { + margin-top: 60px; + padding-top: 40px; + border-top: 1px solid rgba(0, 212, 255, 0.1); + font-size: 0.9rem; + opacity: 0.6; + text-align: center; + position: relative; +} + +/* Bottom decoration */ +.footer-content::after { + content: ''; + position: absolute; + bottom: -50px; + right: -50px; + width: 200px; + height: 200px; + background: radial-gradient(circle, rgba(0, 212, 255, 0.1), transparent); + filter: blur(60px); + animation: float 6s ease-in-out infinite; +} + +/* Animations */ +@keyframes fadeInUp { + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +/* Noise/Grain Effect */ +body::after { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + opacity: 0.02; + z-index: 10000; + background-image: + repeating-radial-gradient( + circle at 0 0, + transparent 0, + #000 1px, + transparent 2px, + transparent 4px + ); + animation: grain 8s steps(10) infinite; +} + +@keyframes grain { + 0%, 100% { transform: translate(0, 0); } + 10% { transform: translate(-5%, -10%); } + 20% { transform: translate(-15%, 5%); } + 30% { transform: translate(7%, -25%); } + 40% { transform: translate(-5%, 25%); } + 50% { transform: translate(-15%, 10%); } + 60% { transform: translate(15%, 0%); } + 70% { transform: translate(0%, 15%); } + 80% { transform: translate(3%, 35%); } + 90% { transform: translate(-10%, 10%); } +} + +/* Section Transitions - REMOVED */ + +/* About Section Styles */ +.about-section { + padding: 100px 0; + background: #0a0a0a; + position: relative; +} + +.about-tabs { + display: flex; + justify-content: center; + gap: 2rem; + margin-bottom: 3rem; +} + +.about-tab { + background: transparent; + border: 2px solid rgba(0, 212, 255, 0.3); + color: var(--white); + padding: 1rem 2rem; + border-radius: 30px; + cursor: pointer; + transition: all 0.3s ease; + font-weight: 600; + position: relative; + overflow: hidden; +} + +.about-tab:hover { + border-color: var(--accent-blue); + transform: translateY(-2px); +} + +.about-tab.active { + background: var(--accent-blue); + color: var(--dark-blue); + border-color: var(--accent-blue); +} + +.about-content { + max-width: 1000px; + margin: 0 auto; +} + +.about-panel { + display: none; + animation: fadeIn 0.5s ease; +} + +.about-panel.active { + display: block; +} + +.panel-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; + align-items: center; +} + +.panel-text h3 { + font-size: 2rem; + margin-bottom: 1rem; + color: var(--accent-blue); +} + +.panel-text p { + margin-bottom: 1rem; + line-height: 1.8; +} + +.location-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + background: rgba(0, 212, 255, 0.1); + border: 1px solid rgba(0, 212, 255, 0.3); + border-radius: 20px; + margin-top: 1rem; +} + +.location-badge svg { + width: 20px; + height: 20px; +} + +.shield-animation svg { + width: 100%; + height: auto; + animation: shieldPulse 3s ease-in-out infinite; +} + +@keyframes shieldPulse { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.05); } +} + +.mission-grid { + text-align: center; +} + +.mission-statement { + margin-bottom: 3rem; +} + +.values-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; + margin-bottom: 2rem; +} + +.value-card { + background: rgba(0, 212, 255, 0.05); + border: 1px solid rgba(0, 212, 255, 0.2); + border-radius: 15px; + padding: 2rem; + transition: all 0.3s ease; +} + +.value-card:hover { + transform: translateY(-5px); + background: rgba(0, 212, 255, 0.1); + border-color: var(--accent-blue); +} + +.value-icon { + width: 50px; + height: 50px; + margin: 0 auto 1rem; +} + +.value-icon svg { + width: 100%; + height: 100%; +} + +.principle-note { + background: rgba(0, 212, 255, 0.1); + border-left: 3px solid var(--accent-blue); + padding: 1rem 2rem; + margin-top: 2rem; +} + +.competencies-list { + display: grid; + gap: 2rem; +} + +.competency-item { + display: flex; + gap: 2rem; + align-items: center; + padding: 1.5rem; + background: rgba(0, 212, 255, 0.05); + border-radius: 10px; + transition: all 0.3s ease; +} + +.competency-item:hover { + background: rgba(0, 212, 255, 0.1); + transform: translateX(10px); +} + +.competency-number { + font-size: 3rem; + font-weight: bold; + color: var(--accent-blue); + opacity: 0.5; +} + +.competency-content h4 { + margin-bottom: 0.5rem; + color: var(--accent-blue); +} + +.why-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 2rem; +} + +.why-card { + background: rgba(0, 212, 255, 0.05); + border: 1px solid rgba(0, 212, 255, 0.2); + border-radius: 15px; + padding: 2rem; + transition: all 0.3s ease; +} + +.why-card:hover { + transform: translateY(-5px); + background: rgba(0, 212, 255, 0.1); + border-color: var(--accent-blue); +} + +.why-icon { + width: 60px; + height: 60px; + margin-bottom: 1rem; +} + +.why-icon svg { + width: 100%; + height: 100%; +} + +/* Products Section Styles */ +.products-section { + padding: 100px 0; + background: #000; + position: relative; +} + +.product-showcase { + background: rgba(0, 212, 255, 0.05); + border: 1px solid rgba(0, 212, 255, 0.2); + border-radius: 20px; + padding: 3rem; + margin-bottom: 3rem; +} + +.product-header { + text-align: center; + margin-bottom: 3rem; +} + +.product-header h3 { + font-size: 2.5rem; + color: var(--accent-blue); + margin-bottom: 1rem; +} + +.product-description { + max-width: 800px; + margin: 0 auto; + line-height: 1.8; +} + +.tools-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + margin-bottom: 3rem; +} + +.tool-card { + background: rgba(0, 212, 255, 0.05); + border: 1px solid rgba(0, 212, 255, 0.2); + border-radius: 15px; + padding: 2rem; + transition: all 0.3s ease; + cursor: pointer; +} + +.tool-card:hover { + transform: translateY(-5px); + background: rgba(0, 212, 255, 0.1); + border-color: var(--accent-blue); + box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3); +} + +.tool-icon { + width: 60px; + height: 60px; + margin-bottom: 1rem; +} + +.tool-icon svg { + width: 100%; + height: 100%; +} + +.tool-card h4 { + color: var(--accent-blue); + margin-bottom: 1rem; +} + +.tool-features ul { + list-style: none; +} + +.tool-features li { + position: relative; + padding-left: 25px; + margin-bottom: 0.8rem; + line-height: 1.6; +} + +.tool-features li::before { + content: '→'; + position: absolute; + left: 0; + color: var(--accent-blue); +} + +.product-cta { + text-align: center; + display: flex; + gap: 1rem; + justify-content: center; +} + +.product-protected { + background: linear-gradient(135deg, rgba(35, 45, 83, 0.1), rgba(0, 212, 255, 0.05)); + border: 2px solid var(--accent-blue); + border-radius: 20px; + padding: 3rem; + text-align: center; +} + +.protected-header { + margin-bottom: 2rem; +} + +.lock-icon { + width: 80px; + height: 80px; + margin: 0 auto 1rem; +} + +.lock-icon svg { + width: 100%; + height: 100%; + animation: lockPulse 2s ease-in-out infinite; +} + +@keyframes lockPulse { + 0%, 100% { transform: scale(1); opacity: 0.8; } + 50% { transform: scale(1.1); opacity: 1; } +} + +.protected-notice { + color: var(--accent-blue); + font-size: 1.2rem; + margin-top: 0.5rem; +} + +/* Contact Section Styles */ +.contact-section { + padding: 100px 0; + background: #0a0a0a; +} + +.contact-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + margin-bottom: 3rem; +} + +.contact-form { + display: grid; + gap: 1.5rem; +} + +.form-group { + display: flex; + flex-direction: column; +} + +.form-group label { + margin-bottom: 0.5rem; + font-weight: 600; + color: var(--accent-blue); +} + +.form-group input, +.form-group textarea { + background: rgba(0, 212, 255, 0.05); + border: 1px solid rgba(0, 212, 255, 0.2); + color: var(--white); + padding: 1rem; + border-radius: 10px; + transition: all 0.3s ease; +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--accent-blue); + background: rgba(0, 212, 255, 0.1); +} + +.checkbox-label { + display: flex; + align-items: center; + gap: 0.5rem; + cursor: pointer; +} + +.checkbox-label input[type="checkbox"] { + width: 20px; + height: 20px; + cursor: pointer; +} + +.checkbox-label a { + color: var(--accent-blue); + text-decoration: underline; +} + +.contact-items { + display: grid; + gap: 2rem; +} + +.contact-item { + display: flex; + gap: 1rem; + align-items: start; +} + +.contact-icon { + width: 40px; + height: 40px; + flex-shrink: 0; +} + +.contact-icon svg { + width: 100%; + height: 100%; +} + +.contact-details h4 { + color: var(--accent-blue); + margin-bottom: 0.5rem; +} + +.contact-details a { + color: var(--white); + text-decoration: none; + transition: color 0.3s ease; +} + +.contact-details a:hover { + color: var(--accent-blue); +} + +.secure-note { + font-size: 0.9rem; + opacity: 0.7; + margin-top: 0.5rem; +} + +.security-notice { + background: rgba(0, 212, 255, 0.05); + border: 1px solid rgba(0, 212, 255, 0.2); + border-radius: 15px; + padding: 1.5rem; + display: flex; + gap: 1rem; + align-items: center; + margin-top: 2rem; +} + +.notice-icon { + width: 50px; + height: 50px; + flex-shrink: 0; +} + +.notice-icon svg { + width: 100%; + height: 100%; +} + +.notice-text h4 { + color: var(--accent-blue); + margin-bottom: 0.5rem; +} + +.cta-banner { + background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(35, 45, 83, 0.1)); + border-radius: 20px; + padding: 3rem; + text-align: center; +} + +/* Legal Section Styles */ +.legal-section { + padding: 100px 0; + background: #000; +} + +.legal-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; +} + +.legal-card { + background: rgba(0, 212, 255, 0.05); + border: 1px solid rgba(0, 212, 255, 0.2); + border-radius: 15px; + padding: 2rem; +} + +.legal-card h3 { + color: var(--accent-blue); + margin-bottom: 1.5rem; + font-size: 1.8rem; +} + +.legal-content { + line-height: 1.8; +} + +.legal-content h4 { + color: var(--accent-blue); + margin: 1.5rem 0 0.5rem; +} + +.legal-content p { + margin-bottom: 1rem; +} + +/* Section Transitions - REMOVED */ + +/* Circuit Board Transition */ +.transition-circuit { + background: #000; + position: relative; +} + +.transition-circuit::before { + content: ''; + position: absolute; + inset: 0; + background-image: + linear-gradient(90deg, transparent 45%, rgba(0, 212, 255, 0.2) 45%, rgba(0, 212, 255, 0.2) 55%, transparent 55%), + linear-gradient(0deg, transparent 45%, rgba(0, 212, 255, 0.2) 45%, rgba(0, 212, 255, 0.2) 55%, transparent 55%); + background-size: 40px 40px; + animation: circuitPulse 4s ease-in-out infinite; +} + +.transition-circuit::after { + content: ''; + position: absolute; + inset: 0; + background: + radial-gradient(circle at 20% 50%, rgba(0, 212, 255, 0.4) 0%, transparent 4%), + radial-gradient(circle at 40% 30%, rgba(0, 212, 255, 0.4) 0%, transparent 4%), + radial-gradient(circle at 60% 70%, rgba(0, 212, 255, 0.4) 0%, transparent 4%), + radial-gradient(circle at 80% 40%, rgba(0, 212, 255, 0.4) 0%, transparent 4%); + background-size: 100% 100%; + animation: nodePulse 2s ease-in-out infinite; +} + +@keyframes circuitPulse { + 0%, 100% { opacity: 0.5; } + 50% { opacity: 1; } +} + +@keyframes nodePulse { + 0%, 100% { transform: scale(1); opacity: 1; } + 50% { transform: scale(1.2); opacity: 0.6; } +} + +/* Data Flow Transition */ +.transition-dataflow { + background: #000; + position: relative; +} + +.transition-dataflow::before { + content: '0101010110101011101010101101010111010101011010101110101010110101'; + position: absolute; + top: 0; + left: -100%; + right: -100%; + bottom: 0; + font-family: monospace; + font-size: 20px; + color: rgba(0, 212, 255, 0.1); + display: flex; + align-items: center; + justify-content: center; + letter-spacing: 5px; + animation: dataStream 10s linear infinite; + white-space: nowrap; +} + +.transition-dataflow::after { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(90deg, + transparent 0%, + rgba(0, 212, 255, 0.2) 45%, + rgba(0, 212, 255, 0.4) 50%, + rgba(0, 212, 255, 0.2) 55%, + transparent 100% + ); + animation: dataWave 3s linear infinite; +} + +@keyframes dataStream { + to { transform: translateX(50%); } +} + +@keyframes dataWave { + to { transform: translateX(100%); } +} + +/* Neural Wave Transition */ +.transition-neural { + background: #000; + position: relative; +} + +.transition-neural svg { + position: absolute; + width: 100%; + height: 100%; +} + +.transition-neural path { + fill: none; + stroke: rgba(0, 212, 255, 0.3); + stroke-width: 2; + animation: waveAnimation 4s ease-in-out infinite; +} + +@keyframes waveAnimation { + 0%, 100% { + d: path("M0,100 Q250,50 500,100 T1000,100 L1000,200 L0,200 Z"); + } + 50% { + d: path("M0,100 Q250,150 500,100 T1000,100 L1000,200 L0,200 Z"); + } +} + +/* Glitch Bars Transition */ +.transition-glitch { + background: #000; + position: relative; +} + +.glitch-bar { + position: absolute; + left: 0; + right: 0; + height: 4px; + background: var(--accent-blue); + animation: glitchBar 3s linear infinite; +} + +.glitch-bar:nth-child(1) { top: 20%; animation-delay: 0s; } +.glitch-bar:nth-child(2) { top: 40%; animation-delay: 0.5s; } +.glitch-bar:nth-child(3) { top: 60%; animation-delay: 1s; } +.glitch-bar:nth-child(4) { top: 80%; animation-delay: 1.5s; } + +@keyframes glitchBar { + 0%, 10%, 90%, 100% { + transform: translateX(0) scaleX(1); + opacity: 1; + } + 45% { + transform: translateX(-10%) scaleX(0.8); + opacity: 0.5; + } + 50% { + transform: translateX(10%) scaleX(1.2); + opacity: 0.8; + } + 55% { + transform: translateX(-5%) scaleX(0.5); + opacity: 1; + } +} + +/* Tech Grid Transition */ +.transition-techgrid { + background: #000; + position: relative; + clip-path: polygon( + 0 0, 100% 0, + 100% 30%, 95% 35%, 90% 30%, 85% 35%, 80% 30%, 75% 35%, 70% 30%, 65% 35%, 60% 30%, 55% 35%, 50% 30%, 45% 35%, 40% 30%, 35% 35%, 30% 30%, 25% 35%, 20% 30%, 15% 35%, 10% 30%, 5% 35%, 0 30%, + 0 70%, 5% 65%, 10% 70%, 15% 65%, 20% 70%, 25% 65%, 30% 70%, 35% 65%, 40% 70%, 45% 65%, 50% 70%, 55% 65%, 60% 70%, 65% 65%, 70% 70%, 75% 65%, 80% 70%, 85% 65%, 90% 70%, 95% 65%, 100% 70%, + 100% 100%, 0 100% + ); +} + +.transition-techgrid::before { + content: ''; + position: absolute; + inset: 0; + background: + repeating-linear-gradient(90deg, + transparent, + transparent 10px, + rgba(0, 212, 255, 0.1) 10px, + rgba(0, 212, 255, 0.1) 11px + ), + repeating-linear-gradient(0deg, + transparent, + transparent 10px, + rgba(0, 212, 255, 0.1) 10px, + rgba(0, 212, 255, 0.1) 11px + ); + animation: gridSlide 5s linear infinite; +} + +@keyframes gridSlide { + to { transform: translate(11px, 11px); } +} + +/* Parallax Sections */ +section { + position: relative; +} + +.parallax-bg { + position: absolute; + top: -20%; + left: 0; + right: 0; + bottom: -20%; + background-attachment: fixed; + background-position: center; + background-size: cover; + opacity: 0.1; + z-index: -1; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .nav-menu { + display: none; + } + + .main-title { + font-size: 3rem; + } + + .section-title { + font-size: 2.5rem; + } + + /* Video on mobile */ + .hero-video { + width: 100%; + height: 100%; + } + + .timeline::before { + left: 30px; + } + + .timeline-item { + flex-direction: row !important; + } + + .timeline-item::before { + left: 30px; + transform: translateX(0); + } + + .timeline-content { + text-align: left !important; + padding-left: 100px !important; + } + + .feature-nodes { + grid-template-columns: 1fr; + } + + .cta-buttons { + flex-direction: column; + align-items: center; + } + + .trust-indicators { + gap: 2rem; + } + + .engineering-grid { + grid-template-columns: 1fr; + } +} + +/* Accessibility - Keyboard Navigation */ +*:focus { + outline: 3px solid var(--accent-blue); + outline-offset: 2px; +} + +button:focus, +a:focus { + outline: 3px solid var(--accent-blue); + outline-offset: 2px; +} + +/* Skip Navigation Link */ +.skip-nav { + position: absolute; + top: -40px; + left: 0; + background: var(--primary-blue); + color: var(--white); + padding: 8px; + text-decoration: none; + z-index: 100; +} + +.skip-nav:focus { + top: 0; +} + +/* Additional Accessibility for Interactive Elements */ +.timeline-item:focus-within { + transform: scale(1.05); +} + +.node:focus { + transform: translateY(-5px); + box-shadow: 0 10px 40px rgba(0, 212, 255, 0.3); +} + +.node:focus .node-info { + opacity: 1; + transform: translateY(0); +} + +.tab:focus { + background: var(--accent-blue); + color: var(--dark-blue); +} + +/* Make hover effects work on focus too */ +.timeline-item:focus-within .timeline-icon, +.timeline-item:hover .timeline-icon { + transform: scale(1.1); + border-color: var(--white); +} + +.shield:focus { + transform: scale(1.1); +} + +/* Reduced Motion */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + + .stream, + .hero-title span, + .shield, + .indicator-value { + animation: none !important; + } +} \ No newline at end of file diff --git a/css/fonts.css b/css/fonts.css new file mode 100644 index 0000000..a7d4715 --- /dev/null +++ b/css/fonts.css @@ -0,0 +1,41 @@ +/* Local Font Definitions - DSGVO-compliant */ + +@font-face { + font-family: 'Bebas Neue'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('../assets/fonts/BebasNeue-Regular.ttf') format('truetype'); +} + +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url('../assets/fonts/Inter-Light.ttf') format('truetype'); +} + +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('../assets/fonts/Inter-Regular.ttf') format('truetype'); +} + +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url('../assets/fonts/Inter-SemiBold.ttf') format('truetype'); +} + +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url('../assets/fonts/Inter-Bold.ttf') format('truetype'); +} \ No newline at end of file diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..0d2f2e0 --- /dev/null +++ b/css/main.css @@ -0,0 +1,1496 @@ +/* Global Styles - Rheinmetall Design */ +:root { + --primary-blue: #0f72b5; + --dark-blue: #00406e; + --light-gray: #f4f4f4; + --white: #FFFFFF; + --text-dark: #333333; + --text-gray: #666666; + --border-gray: #e0e0e0; + --shadow: 0 2px 8px rgba(0,0,0,0.1); + --shadow-hover: 0 8px 24px rgba(0,0,0,0.15); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + /* Disable text selection */ + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-touch-callout: none; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; + background-color: var(--white); + color: var(--text-dark); + line-height: 1.6; + overflow-x: hidden; +} + +.container { + max-width: 1280px; + margin: 0 auto; + padding: 0 20px; +} + +/* Typography */ +h1, h2, h3, h4, h5, h6 { + font-weight: 600; + line-height: 1.2; + color: var(--text-dark); +} + +h1 { font-size: 3rem; } +h2 { font-size: 2.5rem; } +h3 { font-size: 2rem; } +h4 { font-size: 1.5rem; } +h5 { font-size: 1.25rem; } +h6 { font-size: 1.1rem; } + +.section-title { + font-size: 2.5rem; + text-align: center; + margin-bottom: 1rem; + color: var(--primary-blue); +} + +.section-subtitle { + font-size: 1.1rem; + text-align: center; + color: var(--text-gray); + margin-bottom: 3rem; +} + +/* Skip Navigation */ +.skip-nav { + position: absolute; + top: -40px; + left: 0; + background: var(--primary-blue); + color: var(--white); + padding: 8px; + text-decoration: none; + z-index: 100; +} + +.skip-nav:focus { + top: 0; +} + +/* Navigation */ +.navbar { + position: fixed; + top: 0; + width: 100%; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + box-shadow: 0 1px 0 rgba(0,0,0,0.1); + z-index: 1000; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); +} + +.navbar.scrolled { + background: rgba(255, 255, 255, 0.98); + box-shadow: 0 4px 20px rgba(0,0,0,0.08); +} + +.nav-container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 2rem; + max-width: 1280px; + margin: 0 auto; +} + +.logo-img { + height: 50px; + width: auto; +} + +.nav-menu { + display: flex; + list-style: none; + gap: 2rem; + margin: 0; + padding: 0; +} + +.nav-menu a { + color: #001f3f; + text-decoration: none; + font-weight: 700; + font-size: 1.1rem; + text-transform: uppercase; + letter-spacing: 1px; + transition: color 0.3s ease; + position: relative; + padding: 0.5rem 0; +} + +.nav-menu a:hover { + color: var(--primary-blue); + transform: translateY(-2px); +} + +.nav-menu a::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 0; + height: 2px; + background: var(--primary-blue); + transition: width 0.3s ease; +} + +.nav-menu a:hover::after { + width: 100%; +} + +.nav-extras { + display: flex; + align-items: center; + gap: 1rem; +} + +.lang-toggle { + background: transparent; + border: 1px solid var(--border-gray); + color: #001f3f; + padding: 0.5rem 1rem; + border-radius: 4px; + cursor: pointer; + transition: all 0.3s ease; + font-size: 0.9rem; +} + +.lang-toggle:hover { + background: var(--primary-blue); + color: var(--white); + border-color: var(--primary-blue); + transform: scale(1.05); + box-shadow: 0 4px 15px rgba(15, 114, 181, 0.3); +} + +/* Buttons */ +.cta-button, +.primary-button, +.secondary-button { + padding: 0.75rem 1.5rem; + border: none; + border-radius: 4px; + font-weight: 500; + cursor: pointer; + transition: all 0.3s ease; + font-size: 1rem; +} + +.cta-button, +.primary-button { + background: var(--primary-blue); + color: var(--white); +} + +.cta-button, +.primary-button { + position: relative; + overflow: hidden; +} + +.cta-button::before, +.primary-button::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + border-radius: 50%; + background: rgba(255, 255, 255, 0.3); + transform: translate(-50%, -50%); + transition: width 0.6s, height 0.6s; +} + +.cta-button:hover::before, +.primary-button:hover::before { + width: 300px; + height: 300px; +} + +.cta-button:hover, +.primary-button:hover { + background: var(--dark-blue); + transform: translateY(-3px) scale(1.02); + box-shadow: 0 10px 30px rgba(15, 114, 181, 0.4); +} + +.secondary-button { + background: transparent; + color: var(--primary-blue); + border: 2px solid var(--primary-blue); +} + +.secondary-button:hover { + background: var(--primary-blue); + color: var(--white); +} + +.large { + padding: 1rem 2rem; + font-size: 1.1rem; +} + +/* Hero Section */ +.hero { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + position: relative; + padding-top: 100px; + background: #000000; + overflow: hidden; +} + +/* Hero Video Container */ +.hero-video-container { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + background: #000000; +} + +/* Hero Videos */ +.hero-video { + position: absolute; + top: 50%; + left: 50%; + min-width: 100%; + min-height: 100%; + width: auto; + height: auto; + transform: translate(-50%, -50%); + object-fit: cover; + opacity: 0; + transition: opacity 2s ease-in-out; + filter: brightness(0.8) contrast(1.1); /* Slightly darker and more contrast like Palantir */ +} + +.hero-video.active { + opacity: 0.6; /* Clearly visible like Palantir */ +} + +.hero-video.fading-out { + opacity: 0; +} + +/* Light Overlay */ +.hero-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(135deg, + rgba(0, 0, 0, 0.6) 0%, + rgba(20, 20, 20, 0.5) 50%, + rgba(0, 0, 0, 0.6) 100%); + z-index: 2; +} + +/* Video Indicators removed - clean look without dots */ + +#particleCanvas { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 3; + opacity: 0.4; +} + +.hero-content { + text-align: left; + z-index: 5; + position: relative; + max-width: 1200px; + margin: 0 auto; + padding: 0 2rem; +} + +.hero-title { + margin-bottom: 2rem; + text-align: left; +} + +.subtitle { + display: block; + font-size: 1.2rem; + margin-bottom: 0.5rem; + color: var(--white); + font-weight: 400; + opacity: 0.9; +} + +.main-title { + display: block; + font-size: clamp(3rem, 8vw, 7rem); + color: var(--white); + font-weight: 700; + margin-bottom: 1rem; + line-height: 1.1; + text-align: left; +} + +.hero-text { + font-size: 1.1rem; + margin-bottom: 3rem; + color: var(--white); + opacity: 0.95; + text-align: left; +} + +.hero-cta { + display: flex; + gap: 1rem; + justify-content: center; +} + +.hero-cta .primary-button, +.hero-cta .secondary-button { + background: var(--white); + color: var(--primary-blue); +} + +.hero-cta .primary-button:hover { + background: var(--light-gray); +} + +.hero-cta .secondary-button { + background: transparent; + border: 2px solid var(--white); + color: var(--white); +} + +.hero-cta .secondary-button:hover { + background: var(--white); + color: var(--primary-blue); +} + +.trust-indicators { + position: absolute; + bottom: 50px; + left: 50%; + transform: translateX(-50%); + display: flex; + gap: 4rem; + z-index: 3; + background: rgba(0, 0, 0, 0.3); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + padding: 1.5rem 3rem; + border-radius: 100px; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.indicator { + text-align: center; + color: var(--white); +} + +.indicator-value { + font-size: 2.5rem; + font-weight: 700; + display: block; +} + +.indicator-label { + font-size: 0.9rem; + opacity: 0.9; +} + +/* About Section */ +.about-section { + padding: 80px 0; + background: var(--white); +} + +.about-tabs { + display: flex; + justify-content: center; + gap: 0; + margin-bottom: 3rem; + border-bottom: 1px solid var(--border-gray); +} + +.about-tab { + background: transparent; + border: none; + color: var(--text-gray); + padding: 1rem 2rem; + cursor: pointer; + transition: all 0.3s ease; + font-size: 1rem; + font-weight: 500; + border-bottom: 3px solid transparent; + margin-bottom: -1px; +} + +.about-tab.active { + color: var(--primary-blue); + border-bottom-color: var(--primary-blue); +} + +.about-tab:hover { + color: var(--primary-blue); + background: var(--light-gray); +} + +.about-content { + max-width: 1000px; + margin: 0 auto; +} + +.about-panel { + display: none; + animation: fadeIn 0.5s ease; +} + +.about-panel.active { + display: block; +} + +@keyframes fadeIn { + from { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); } +} + +.panel-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; + align-items: center; +} + +.panel-text h3 { + font-size: 2rem; + margin-bottom: 1rem; + color: var(--primary-blue); +} + +.panel-text p { + margin-bottom: 1rem; + line-height: 1.8; + color: var(--text-dark); +} + +.location-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + background: var(--light-gray); + border-radius: 4px; + margin-top: 1rem; + color: var(--text-dark); +} + +.location-badge svg { + width: 20px; + height: 20px; + color: var(--primary-blue); +} + +.shield-animation { + display: flex; + justify-content: center; + align-items: center; +} + +.shield-animation svg { + width: 300px; + height: 300px; +} + +/* Mission & Values */ +.mission-grid { + text-align: center; +} + +.mission-statement h3 { + color: var(--primary-blue); + margin-bottom: 1rem; +} + +.values-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; + margin: 3rem 0; +} + +.value-card { + background: var(--light-gray); + border-radius: 12px; + padding: 2rem; + transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); + position: relative; + overflow: hidden; +} + +.value-card::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: linear-gradient(45deg, transparent, rgba(15, 114, 181, 0.1), transparent); + transform: rotate(45deg); + transition: all 0.6s; + opacity: 0; +} + +.value-card:hover::before { + animation: shimmer 0.6s; +} + +@keyframes shimmer { + 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); } + 100% { transform: translateX(100%) translateY(100%) rotate(45deg); } +} + +.value-card:hover { + transform: translateY(-8px) scale(1.02); + box-shadow: 0 15px 40px rgba(15, 114, 181, 0.2); + background: linear-gradient(135deg, var(--light-gray) 0%, rgba(15, 114, 181, 0.05) 100%); +} + +.value-icon { + width: 50px; + height: 50px; + margin: 0 auto 1rem; + color: var(--primary-blue); +} + +.value-icon svg { + width: 100%; + height: 100%; +} + +.value-card h4 { + color: var(--primary-blue); + margin-bottom: 0.5rem; +} + +.principle-note { + background: var(--light-gray); + border-left: 4px solid var(--primary-blue); + padding: 1.5rem; + margin-top: 2rem; + text-align: left; +} + +/* Competencies */ +.competencies-list { + display: grid; + gap: 1.5rem; +} + +.competency-item { + display: flex; + gap: 2rem; + align-items: center; + padding: 1.5rem; + background: var(--light-gray); + border-radius: 8px; + transition: all 0.3s ease; +} + +.competency-item:hover { + box-shadow: var(--shadow-hover); + transform: translateX(10px); +} + +.competency-number { + font-size: 2rem; + font-weight: 700; + color: var(--primary-blue); + opacity: 0.3; +} + +.competency-content h4 { + color: var(--primary-blue); + margin-bottom: 0.5rem; +} + +/* Why IntelSight */ +.why-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 2rem; +} + +.why-card { + background: var(--white); + border: 1px solid var(--border-gray); + border-radius: 12px; + padding: 2rem; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 2px 10px rgba(0,0,0,0.05); + position: relative; + overflow: hidden; +} + +.why-card::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 3px; + background: linear-gradient(90deg, transparent, var(--primary-blue), transparent); + transition: left 0.6s; +} + +.why-card:hover::before { + left: 100%; +} + +.why-card:hover { + transform: translateY(-8px) scale(1.02); + box-shadow: 0 15px 35px rgba(15, 114, 181, 0.15); + border-color: var(--primary-blue); + background: linear-gradient(135deg, var(--white) 0%, rgba(15, 114, 181, 0.02) 100%); +} + +.why-card:hover .why-icon { + animation: float 2s ease-in-out infinite; +} + +@keyframes float { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-10px); } +} + +.why-icon { + width: 60px; + height: 60px; + margin-bottom: 1rem; + color: var(--primary-blue); +} + +.why-icon svg { + width: 100%; + height: 100%; +} + +.why-card h4 { + color: var(--primary-blue); + margin-bottom: 0.5rem; +} + +/* Products Section */ +.products-section { + padding: 80px 0; + background: var(--light-gray); +} + +.product-showcase { + background: var(--white); + border-radius: 8px; + padding: 3rem; + margin-bottom: 3rem; + box-shadow: var(--shadow); +} + +.product-header { + text-align: center; + margin-bottom: 3rem; +} + +.product-header h3 { + font-size: 2rem; + color: var(--primary-blue); + margin-bottom: 1rem; +} + +.product-description { + max-width: 800px; + margin: 0 auto; + line-height: 1.8; + color: var(--text-gray); +} + +.tools-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2rem; + margin-bottom: 3rem; + max-height: 1000px; + overflow: hidden; + transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out; +} + +.tools-grid.collapsed { + max-height: 0; + margin-bottom: 0; + opacity: 0; +} + +.expand-button { + display: inline-flex; + align-items: center; + gap: 0.5rem; + margin-top: 1rem; + padding: 0.75rem 1.5rem; + background: transparent; + color: var(--primary-blue); + border: 2px solid var(--primary-blue); + border-radius: 6px; + font-size: 1rem; + font-weight: 500; + cursor: pointer; + transition: all 0.3s ease; +} + +.expand-button:hover { + background: var(--primary-blue); + color: white; +} + +.expand-button .expand-icon { + width: 20px; + height: 20px; + transition: transform 0.3s ease; +} + +.expand-button[data-expanded="true"] .expand-icon { + transform: rotate(180deg); +} + +.tool-card { + background: var(--light-gray); + border-radius: 12px; + padding: 2rem; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + cursor: pointer; + position: relative; + overflow: hidden; + border: 1px solid transparent; +} + +.tool-card::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(135deg, rgba(15, 114, 181, 0.1) 0%, transparent 100%); + opacity: 0; + transition: opacity 0.4s; +} + +.tool-card:hover::after { + opacity: 1; +} + +.tool-card:hover { + transform: translateY(-10px) rotateX(5deg) scale(1.02); + box-shadow: 0 20px 40px rgba(15, 114, 181, 0.25); + border-color: rgba(15, 114, 181, 0.3); + background: linear-gradient(135deg, var(--white) 0%, var(--light-gray) 100%); +} + +.tool-card:hover .tool-icon { + transform: scale(1.1) rotate(5deg); + filter: drop-shadow(0 4px 8px rgba(15, 114, 181, 0.3)); +} + +.tool-icon { + transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +.tool-icon { + width: 60px; + height: 60px; + margin-bottom: 1rem; + color: var(--primary-blue); +} + +.tool-icon svg { + width: 100%; + height: 100%; +} + +.tool-card h4 { + color: var(--primary-blue); + margin-bottom: 1rem; +} + +.tool-features ul { + list-style: none; + padding: 0; +} + +.tool-features li { + position: relative; + padding-left: 25px; + margin-bottom: 0.8rem; + line-height: 1.6; + color: var(--text-dark); +} + +.tool-features li::before { + content: '✓'; + position: absolute; + left: 0; + color: var(--primary-blue); +} + +.product-cta { + text-align: center; + display: flex; + gap: 1rem; + justify-content: center; +} + +/* Protected Product */ +.product-protected { + background: var(--white); + border: 2px solid var(--primary-blue); + border-radius: 8px; + padding: 3rem; + text-align: center; +} + +.protected-header { + margin-bottom: 2rem; +} + +.lock-icon { + width: 80px; + height: 80px; + margin: 0 auto 1rem; +} + +.lock-icon svg { + width: 100%; + height: 100%; +} + +.protected-header h3 { + color: var(--primary-blue); + font-size: 2rem; + margin-bottom: 0.5rem; +} + +.protected-notice { + color: var(--primary-blue); + font-size: 1.1rem; +} + +.protected-content { + color: var(--text-gray); +} + +/* Contact Section */ +.contact-section { + padding: 80px 0; + background: var(--white); +} + +.contact-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + margin-bottom: 3rem; +} + +.contact-form-wrapper h3 { + color: var(--primary-blue); + margin-bottom: 2rem; +} + +.contact-form { + display: grid; + gap: 1.5rem; +} + +.form-group { + display: flex; + flex-direction: column; +} + +.form-group label { + margin-bottom: 0.5rem; + font-weight: 500; + color: var(--text-dark); +} + +.form-group input, +.form-group textarea { + background: var(--white); + border: 1px solid var(--border-gray); + color: var(--text-dark); + padding: 0.75rem; + border-radius: 4px; + transition: all 0.3s ease; + font-family: inherit; +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--primary-blue); + box-shadow: 0 0 0 3px rgba(15, 114, 181, 0.1); +} + +.checkbox-label { + display: flex; + align-items: flex-start; + gap: 0.5rem; + cursor: pointer; +} + +.checkbox-label input[type="checkbox"] { + margin-top: 0.25rem; +} + +.checkbox-label a { + color: var(--primary-blue); + text-decoration: underline; +} + +.contact-info h3 { + color: var(--primary-blue); + margin-bottom: 2rem; +} + +.contact-items { + display: grid; + gap: 2rem; +} + +.contact-item { + display: flex; + gap: 1rem; + align-items: start; +} + +.contact-icon { + width: 40px; + height: 40px; + flex-shrink: 0; + color: var(--primary-blue); +} + +.contact-icon svg { + width: 100%; + height: 100%; +} + +.contact-details h4 { + color: var(--primary-blue); + margin-bottom: 0.5rem; +} + +.contact-details a { + color: var(--text-dark); + text-decoration: none; + transition: color 0.3s ease; +} + +.contact-details a:hover { + color: var(--primary-blue); +} + +.secure-note { + font-size: 0.9rem; + color: var(--text-gray); + margin-top: 0.5rem; +} + +.security-notice { + background: var(--light-gray); + border-left: 4px solid var(--primary-blue); + border-radius: 4px; + padding: 1.5rem; + display: flex; + gap: 1rem; + align-items: center; + margin-top: 2rem; +} + +.notice-icon { + width: 50px; + height: 50px; + flex-shrink: 0; + color: var(--primary-blue); +} + +.notice-icon svg { + width: 100%; + height: 100%; +} + +.notice-text h4 { + color: var(--primary-blue); + margin-bottom: 0.5rem; +} + +/* CTA Banner */ +.cta-banner { + background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue)); + border-radius: 8px; + padding: 3rem; + text-align: center; + color: var(--white); +} + +.cta-title { + font-size: 2.5rem; + margin-bottom: 1rem; +} + +.cta-subtitle { + font-size: 1.2rem; + margin-bottom: 2rem; + opacity: 0.95; +} + +.cta-buttons { + display: flex; + gap: 1rem; + justify-content: center; + margin-bottom: 3rem; +} + +.cta-banner .primary-button, +.cta-banner .secondary-button { + background: var(--white); + color: var(--primary-blue); +} + +.cta-banner .secondary-button { + background: transparent; + border: 2px solid var(--white); + color: var(--white); +} + +.cta-banner .secondary-button:hover { + background: var(--white); + color: var(--primary-blue); +} + +.certifications { + display: flex; + justify-content: center; + gap: 3rem; +} + +.cert-card { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; +} + +.cert-icon { + width: 50px; + height: 50px; + opacity: 0.8; +} + +.cert-icon svg { + width: 100%; + height: 100%; + color: var(--white); +} + +.cert-name { + font-size: 0.9rem; + opacity: 0.9; +} + +/* Legal Section */ +.legal-section { + padding: 80px 0; + background: var(--light-gray); +} + +.legal-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; +} + +.legal-card { + background: var(--white); + border-radius: 8px; + padding: 2rem; + box-shadow: var(--shadow); +} + +.legal-card h3 { + color: var(--primary-blue); + margin-bottom: 1.5rem; +} + +.legal-content { + line-height: 1.8; + color: var(--text-dark); +} + +.legal-content h4 { + color: var(--primary-blue); + margin: 1.5rem 0 0.5rem; +} + +.legal-content p { + margin-bottom: 1rem; +} + +/* Footer */ +.footer { + background: #0a0f1c; + color: var(--white); + padding: 3rem 0 1rem; +} + +.footer-content { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 3rem; + margin-bottom: 2rem; +} + +.footer-section h4 { + color: var(--white); + margin-bottom: 1rem; +} + +.footer-section ul { + list-style: none; + padding: 0; +} + +.footer-section li { + margin-bottom: 0.5rem; +} + +.footer-section a { + color: rgba(255, 255, 255, 0.8); + text-decoration: none; + transition: color 0.3s ease; +} + +.footer-section a:hover { + color: var(--white); +} + +.copyright { + text-align: center; + padding-top: 2rem; + border-top: 1px solid rgba(255, 255, 255, 0.1); + color: rgba(255, 255, 255, 0.6); +} + +/* Responsive Design */ +@media (max-width: 768px) { + .nav-menu { + display: none; + } + + .hero-title .main-title { + font-size: 2rem; + } + + .trust-indicators { + flex-direction: column; + gap: 1rem; + } + + .about-tabs { + flex-wrap: wrap; + } + + .panel-grid, + .values-grid, + .why-grid, + .contact-grid, + .legal-grid, + .footer-content { + grid-template-columns: 1fr; + } + + .tools-grid { + grid-template-columns: 1fr; + } + + .cta-buttons, + .hero-cta { + flex-direction: column; + } +} + +/* Animations */ +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +@keyframes slideIn { + from { transform: translateY(30px); opacity: 0; } + to { transform: translateY(0); opacity: 1; } +} + +/* Germany Map Styles */ +.germany-map-container { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 20px; +} + +.map-wrapper { + position: relative; + width: 100%; + max-width: 400px; + margin: 0 auto; +} + +.germany-base-map { + width: 100%; + height: auto; + display: block; + filter: brightness(0.95) contrast(1.05); + border-radius: 8px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.map-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; +} + +.map-overlay .langenfeld-pin, +.map-overlay .nrw-highlight { + pointer-events: all; +} + +.nrw-highlight { + animation: dashAnimation 20s linear infinite; + transition: all 0.3s ease; +} + +@keyframes dashAnimation { + to { + stroke-dashoffset: -30; + } +} + +.nrw-highlight:hover { + stroke-width: 4; + stroke: #ff0000; +} + +.langenfeld-pin { + cursor: pointer; + transition: all 0.3s ease; +} + +.langenfeld-pin:hover { + transform: translate(210px, 420px) scale(1.15); +} + +.langenfeld-pin .pulse-ring { + animation: pulse 2s infinite; + transform-origin: center; +} + +@keyframes pulse { + 0% { + transform: scale(1); + opacity: 0.8; + } + 50% { + transform: scale(2); + opacity: 0; + } + 100% { + transform: scale(1); + opacity: 0.8; + } +} + +.city-markers text { + font-family: 'Inter', sans-serif; + font-size: 10px; + fill: #6c757d; + pointer-events: none; +} + +.map-legend { + margin-top: 20px; + display: flex; + gap: 20px; + flex-wrap: wrap; + justify-content: center; +} + +.legend-item { + display: flex; + align-items: center; + gap: 8px; + font-size: 0.875rem; + color: #495057; +} + +.legend-box { + width: 20px; + height: 12px; + border: 2px solid #dc3545; + background: rgba(220, 53, 69, 0.1); + border-radius: 2px; +} + +.legend-pin { + width: 12px; + height: 12px; + background: #dc3545; + border-radius: 50%; + position: relative; +} + +.legend-pin::after { + content: ''; + position: absolute; + bottom: -6px; + left: 50%; + transform: translateX(-50%); + width: 2px; + height: 6px; + background: #dc3545; +} + +/* Panel visual adjustments for map */ +.panel-visual { + display: flex; + align-items: center; + justify-content: center; + min-height: 400px; +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .germany-map-container { + padding: 10px; + } + + .germany-map { + max-width: 280px; + } + + .map-legend { + flex-direction: column; + align-items: center; + gap: 10px; + } +} + +/* Scroll Indicator */ +.scroll-indicator { + position: absolute; + bottom: 60px; + left: 50%; + transform: translateX(-50%); + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + cursor: pointer; + z-index: 30; + transition: opacity 0.3s ease; +} + +.scroll-indicator:hover { + opacity: 0.8; +} + +.scroll-text { + color: #ffffff; + font-size: 0.9rem; + font-weight: 600; + letter-spacing: 1px; + text-transform: uppercase; + text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); + background: rgba(0, 0, 0, 0.3); + padding: 8px 16px; + border-radius: 20px; + backdrop-filter: blur(5px); +} + +.scroll-arrow { + width: 32px; + height: 32px; + color: #ffffff; + animation: bounceArrow 2s infinite; + background: rgba(15, 114, 181, 0.2); + border-radius: 50%; + padding: 4px; + box-shadow: 0 4px 12px rgba(15, 114, 181, 0.3); +} + +.scroll-arrow svg { + width: 100%; + height: 100%; + filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5)); +} + +@keyframes bounceArrow { + 0%, 20%, 50%, 80%, 100% { + transform: translateY(0); + } + 40% { + transform: translateY(8px); + } + 60% { + transform: translateY(4px); + } +} + +/* Hide scroll indicator when scrolled */ +.hero.scrolled .scroll-indicator { + opacity: 0; + pointer-events: none; +} + +/* Utility Classes */ +.text-center { text-align: center; } +.mt-1 { margin-top: 0.5rem; } +.mt-2 { margin-top: 1rem; } +.mt-3 { margin-top: 1.5rem; } +.mt-4 { margin-top: 2rem; } +.mb-1 { margin-bottom: 0.5rem; } +.mb-2 { margin-bottom: 1rem; } +.mb-3 { margin-bottom: 1.5rem; } +.mb-4 { margin-bottom: 2rem; } \ No newline at end of file diff --git a/css/products-modern.css b/css/products-modern.css new file mode 100644 index 0000000..c902bb7 --- /dev/null +++ b/css/products-modern.css @@ -0,0 +1,496 @@ +/* Modern Products Section Design */ + +.products-section { + background: #001f3f; + position: relative; + padding: 120px 0; + overflow: hidden; +} + +/* Animated Background */ +.products-section::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + radial-gradient(circle at 20% 50%, rgba(15, 114, 181, 0.1) 0%, transparent 50%), + radial-gradient(circle at 80% 50%, rgba(0, 64, 110, 0.1) 0%, transparent 50%), + radial-gradient(circle at 50% 100%, rgba(15, 114, 181, 0.05) 0%, transparent 50%); + animation: backgroundShift 20s ease-in-out infinite; +} + +@keyframes backgroundShift { + 0%, 100% { transform: translate(0, 0) scale(1); } + 33% { transform: translate(-20px, -20px) scale(1.1); } + 66% { transform: translate(20px, -10px) scale(0.95); } +} + +/* Section Title */ +.products-section .section-title { + color: #ffffff; + font-size: 3.5rem; + text-transform: uppercase; + letter-spacing: 3px; + margin-bottom: 20px; + position: relative; + display: inline-block; + animation: titleGlow 3s ease-in-out infinite; +} + +@keyframes titleGlow { + 0%, 100% { text-shadow: 0 0 20px rgba(15, 114, 181, 0.5); } + 50% { text-shadow: 0 0 40px rgba(15, 114, 181, 0.8), 0 0 60px rgba(15, 114, 181, 0.4); } +} + +.products-section .section-subtitle { + color: rgba(255, 255, 255, 0.7); + font-size: 1.3rem; + margin-bottom: 80px; +} + +/* Products Container */ +.products-container { + max-width: 1400px; + margin: 0 auto; + padding: 0 20px; + position: relative; + z-index: 2; +} + +/* Products Grid */ +.products-grid { + display: flex; + flex-direction: column; + align-items: center; + gap: 30px; + margin-bottom: 60px; +} + +/* Product Card */ +.product-card { + background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(245, 245, 245, 0.95)); + border: 1px solid rgba(15, 114, 181, 0.3); + border-radius: 20px; + padding: 0; + position: relative; + overflow: visible; + transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); + cursor: pointer; + width: 90%; + max-width: 900px; + display: flex; + flex-direction: column; + backdrop-filter: blur(10px); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); +} + +.product-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, transparent 0%, rgba(15, 114, 181, 0.05) 100%); + opacity: 0; + transition: opacity 0.5s; + border-radius: 20px; +} + +.product-card:hover::before { + opacity: 1; +} + +.product-card:hover { + transform: translateY(-10px) scale(1.02); + background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(250, 250, 250, 1)); + border-color: rgba(15, 114, 181, 0.5); + box-shadow: + 0 30px 60px rgba(0, 0, 0, 0.4), + 0 0 80px rgba(15, 114, 181, 0.15), + inset 0 0 20px rgba(15, 114, 181, 0.03); +} + +/* Product Header */ +.product-header { + padding: 40px 40px 30px; + background: linear-gradient(135deg, rgba(15, 114, 181, 0.15) 0%, transparent 50%); + border-bottom: 1px solid rgba(15, 114, 181, 0.25); + display: grid; + grid-template-columns: 80px 1fr; + align-items: center; + gap: 25px; +} + +.product-icon-wrapper { + width: 80px; + height: 80px; + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.product-icon-bg { + position: absolute; + width: 100%; + height: 100%; + background: linear-gradient(135deg, #0f72b5, #00406e); + border-radius: 20px; + opacity: 0.1; + transition: all 0.5s; +} + +.product-card:hover .product-icon-bg { + opacity: 0.2; + transform: rotate(10deg) scale(1.1); +} + +.product-icon { + position: relative; + z-index: 1; + width: 50px; + height: 50px; + filter: brightness(0) saturate(100%) invert(42%) sepia(82%) saturate(723%) hue-rotate(178deg) brightness(98%) contrast(92%); + transition: all 0.5s; +} + +.product-card:hover .product-icon { + transform: scale(1.1); + filter: brightness(0) saturate(100%) invert(42%) sepia(82%) saturate(723%) hue-rotate(178deg) brightness(108%) contrast(92%); +} + +.product-title-wrapper { + display: flex; + flex-direction: column; + gap: 5px; + align-items: center; + text-align: center; + padding-right: 105px; +} + +.product-title { + color: #1a1a1a; + font-size: 1.8rem; + font-weight: 700; + margin: 0; + transition: all 0.3s; +} + +.product-card:hover .product-title { + color: #0f72b5; +} + +.product-tagline { + color: rgba(0, 0, 0, 0.6); + font-size: 0.9rem; + text-transform: uppercase; + letter-spacing: 2px; + font-weight: 500; + margin: 0; +} + +/* Product Body */ +.product-body { + padding: 30px 40px; + flex-grow: 1; + display: flex; + flex-direction: column; +} + +.product-description { + color: rgba(0, 0, 0, 0.7); + line-height: 1.8; + margin-bottom: 30px; + flex-grow: 1; +} + +/* Product Features */ +.product-features { + list-style: none; + padding: 0; + margin: 0 0 30px 0; +} + +.product-features li { + color: rgba(255, 255, 255, 0.7); + padding: 8px 0; + padding-left: 30px; + position: relative; + transition: all 0.3s; +} + +.product-features li::before { + content: '▸'; + position: absolute; + left: 0; + color: #0f72b5; + font-size: 1.2rem; + transition: all 0.3s; +} + +.product-card:hover .product-features li { + color: rgba(255, 255, 255, 0.9); + transform: translateX(5px); +} + +.product-card:hover .product-features li::before { + color: #1e90ff; + transform: translateX(3px); +} + +/* Product Footer */ +.product-footer { + padding: 30px 40px; + background: rgba(15, 114, 181, 0.08); + border-top: 1px solid rgba(15, 114, 181, 0.2); + display: flex; + justify-content: space-between; + align-items: center; +} + +.product-status { + display: flex; + align-items: center; + gap: 10px; +} + +.status-dot { + width: 8px; + height: 8px; + background: #00ff00; + border-radius: 50%; + animation: pulse 2s infinite; +} + +@keyframes pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.5; transform: scale(1.2); } +} + +.status-text { + color: rgba(255, 255, 255, 0.6); + font-size: 0.9rem; +} + +/* Learn More Button */ +.product-learn-more { + background: transparent; + border: 2px solid #0f72b5; + color: #0f72b5; + padding: 10px 25px; + border-radius: 50px; + cursor: pointer; + transition: all 0.3s; + font-size: 0.95rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 1px; + position: relative; + overflow: hidden; +} + +.product-learn-more::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + background: linear-gradient(135deg, #0f72b5, #00406e); + transform: translate(-50%, -50%); + transition: all 0.5s; + border-radius: 50px; +} + +.product-learn-more:hover::before { + width: 100%; + height: 100%; +} + +.product-learn-more:hover { + color: #ffffff; + border-color: transparent; + transform: translateY(-2px); + box-shadow: 0 10px 30px rgba(15, 114, 181, 0.3); +} + +.product-learn-more span { + position: relative; + z-index: 1; +} + +/* Tools Grid Styling - Inside Product Body */ +.product-body .tools-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 15px; + margin-top: 20px; + max-height: 0; + overflow: hidden; + opacity: 0; + transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease-in-out; + visibility: hidden; +} + +.product-body .tools-grid.expanded { + max-height: 2000px; + opacity: 1; + visibility: visible; +} + +/* Responsive grid adjustment */ +@media (max-width: 768px) { + .product-body .tools-grid { + grid-template-columns: 1fr; + } +} + +@media (min-width: 769px) and (max-width: 1024px) { + .product-body .tools-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.tools-grid .tool-card { + background: rgba(0, 0, 0, 0.03); + border-radius: 12px; + padding: 20px; + transition: all 0.3s; + border: 1px solid rgba(0, 0, 0, 0.1); +} + +.tools-grid .tool-card:hover { + transform: translateY(-3px); + background: rgba(0, 0, 0, 0.05); + border-color: rgba(15, 114, 181, 0.3); + box-shadow: 0 5px 15px rgba(15, 114, 181, 0.15); +} + +.tools-grid .tool-icon { + width: 60px; + height: 60px; + margin-bottom: 15px; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, rgba(15, 114, 181, 0.15), rgba(0, 64, 110, 0.1)); + border-radius: 15px; +} + +.tools-grid .tool-icon img { + width: 35px; + height: 35px; + filter: brightness(0) saturate(100%) invert(52%) sepia(82%) saturate(723%) hue-rotate(178deg) brightness(108%) contrast(92%); +} + +.tools-grid h4 { + color: #1a1a1a; + font-size: 1.2rem; + margin-bottom: 15px; + font-weight: 600; +} + +.tools-grid .tool-features ul { + list-style: none; + padding: 0; +} + +.tools-grid .tool-features li { + color: rgba(0, 0, 0, 0.7); + padding: 5px 0; + font-size: 0.9rem; + position: relative; + padding-left: 20px; + line-height: 1.5; +} + +.tools-grid .tool-features li::before { + content: '▸'; + position: absolute; + left: 0; + color: #1e90ff; + font-weight: bold; +} + +/* Responsive Design */ +@media (max-width: 968px) { + .products-grid { + grid-template-columns: 1fr; + } + + .product-card.featured { + grid-column: span 1; + } + + .products-section .section-title { + font-size: 2.5rem; + } +} + +/* Floating Tech Particles */ +.tech-particles { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + overflow: hidden; + pointer-events: none; +} + +.particle { + position: absolute; + background: rgba(15, 114, 181, 0.3); + border-radius: 50%; + pointer-events: none; +} + +.particle:nth-child(1) { + width: 3px; + height: 3px; + top: 10%; + left: 20%; + animation: float1 15s infinite; +} + +.particle:nth-child(2) { + width: 2px; + height: 2px; + top: 70%; + left: 80%; + animation: float2 20s infinite; +} + +.particle:nth-child(3) { + width: 4px; + height: 4px; + top: 40%; + left: 60%; + animation: float3 18s infinite; +} + +@keyframes float1 { + 0%, 100% { transform: translate(0, 0); opacity: 0; } + 10% { opacity: 1; } + 90% { opacity: 1; } + 100% { transform: translate(100px, -100px); opacity: 0; } +} + +@keyframes float2 { + 0%, 100% { transform: translate(0, 0); opacity: 0; } + 10% { opacity: 1; } + 90% { opacity: 1; } + 100% { transform: translate(-100px, -150px); opacity: 0; } +} + +@keyframes float3 { + 0%, 100% { transform: translate(0, 0); opacity: 0; } + 10% { opacity: 1; } + 90% { opacity: 1; } + 100% { transform: translate(50px, -120px); opacity: 0; } +} \ No newline at end of file diff --git a/css/section-transitions.css b/css/section-transitions.css new file mode 100644 index 0000000..4526c6e --- /dev/null +++ b/css/section-transitions.css @@ -0,0 +1,437 @@ +/* Modern Section Transitions & Dividers */ + +/* Simple fade transition between sections */ +.section-fade { + position: relative; + opacity: 0; + transform: translateY(30px); + transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); +} + +.section-fade.visible { + opacity: 1; + transform: translateY(0); +} + +/* Subtle gradient overlay at section edges */ +.section-gradient-top { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100px; + background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); + pointer-events: none; + z-index: 1; +} + +.section-gradient-bottom { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 100px; + background: linear-gradient(to top, rgba(244,244,244,1) 0%, rgba(244,244,244,0) 100%); + pointer-events: none; + z-index: 1; +} + +/* Animated Gradient Divider */ +.gradient-divider { + position: relative; + height: 200px; + margin: -100px 0; + background: linear-gradient( + 135deg, + transparent 0%, + rgba(15, 114, 181, 0.03) 25%, + rgba(15, 114, 181, 0.08) 50%, + rgba(15, 114, 181, 0.03) 75%, + transparent 100% + ); + z-index: 5; + overflow: hidden; +} + +.gradient-divider::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 200%; + height: 100%; + background: linear-gradient( + 90deg, + transparent, + rgba(15, 114, 181, 0.2), + transparent + ); + animation: shimmerDivider 8s infinite; +} + +@keyframes shimmerDivider { + 0% { transform: translateX(-100%); } + 100% { transform: translateX(100%); } +} + +/* Diagonal Section Transitions */ +.diagonal-section { + position: relative; + padding: 120px 0 80px; + margin-top: -50px; + clip-path: polygon(0 50px, 100% 0, 100% 100%, 0 100%); +} + +.diagonal-section-reverse { + position: relative; + padding: 120px 0 80px; + margin-top: -50px; + clip-path: polygon(0 0, 100% 50px, 100% 100%, 0 100%); +} + +/* Blob Divider */ +.blob-divider { + position: absolute; + bottom: -150px; + left: 0; + width: 100%; + height: 300px; + z-index: 5; + pointer-events: none; +} + +.blob-shape { + position: absolute; + width: 100%; + height: 100%; + background: linear-gradient(135deg, #0f72b5, #00406e); + opacity: 0.1; + border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%; + animation: morphBlob 20s ease-in-out infinite; +} + +@keyframes morphBlob { + 0%, 100% { + border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%; + transform: translate(0, 0) scale(1); + } + 33% { + border-radius: 60% 40% 30% 70% / 60% 70% 30% 40%; + transform: translate(-30px, -20px) scale(1.1); + } + 66% { + border-radius: 30% 70% 70% 30% / 30% 60% 40% 70%; + transform: translate(30px, 20px) scale(0.9); + } +} + +/* Particle Bridge */ +.particle-bridge { + position: absolute; + width: 100%; + height: 200px; + bottom: -100px; + left: 0; + z-index: 8; + overflow: hidden; +} + +.particle { + position: absolute; + width: 4px; + height: 4px; + background: #0f72b5; + border-radius: 50%; + opacity: 0.6; +} + +@keyframes floatParticle { + 0% { + transform: translateY(100px) translateX(0); + opacity: 0; + } + 10% { + opacity: 0.6; + } + 90% { + opacity: 0.6; + } + 100% { + transform: translateY(-100px) translateX(100px); + opacity: 0; + } +} + +/* Curved Section */ +.curved-section { + position: relative; + padding-top: 100px; + margin-top: -80px; +} + +.curved-section::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 80px; + background: inherit; + border-radius: 0 0 50% 50% / 0 0 100% 100%; + transform: scaleX(1.5); +} + +/* Glass Transition */ +.glass-transition { + position: relative; + margin: 50px 0; + padding: 40px 0; + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.1) 0%, + rgba(255, 255, 255, 0.05) 100% + ); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-top: 1px solid rgba(15, 114, 181, 0.1); + border-bottom: 1px solid rgba(15, 114, 181, 0.1); +} + +/* Zigzag Border */ +.zigzag-top { + position: relative; + padding-top: 40px; +} + +.zigzag-top::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 30px; + background: linear-gradient( + 135deg, + transparent 33.33%, + #0f72b5 33.33%, + #0f72b5 66.66%, + transparent 66.66% + ); + background-size: 30px 60px; + opacity: 0.1; +} + +/* Flowing Lines */ +.flow-lines { + position: absolute; + width: 100%; + height: 200px; + bottom: -100px; + left: 0; + overflow: hidden; + z-index: 5; +} + +.flow-line { + position: absolute; + height: 2px; + background: linear-gradient(90deg, transparent, #0f72b5, transparent); + animation: flowLine 6s infinite; +} + +.flow-line:nth-child(1) { + top: 20%; + animation-delay: 0s; + width: 60%; +} + +.flow-line:nth-child(2) { + top: 40%; + animation-delay: 1s; + width: 80%; +} + +.flow-line:nth-child(3) { + top: 60%; + animation-delay: 2s; + width: 70%; +} + +.flow-line:nth-child(4) { + top: 80%; + animation-delay: 3s; + width: 90%; +} + +@keyframes flowLine { + 0% { + transform: translateX(-100%); + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + transform: translateX(200%); + opacity: 0; + } +} + +/* Reveal Sections with Mask */ +.section-reveal { + position: relative; + overflow: hidden; +} + +.section-reveal::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.4), + transparent + ); + animation: revealMask 2s ease-out forwards; +} + +@keyframes revealMask { + to { + left: 100%; + } +} + +/* Geometric Pattern Divider */ +.geometric-divider { + position: relative; + height: 100px; + margin: 40px 0; + background-image: + repeating-linear-gradient( + 45deg, + transparent, + transparent 10px, + rgba(15, 114, 181, 0.05) 10px, + rgba(15, 114, 181, 0.05) 20px + ), + repeating-linear-gradient( + -45deg, + transparent, + transparent 10px, + rgba(15, 114, 181, 0.05) 10px, + rgba(15, 114, 181, 0.05) 20px + ); +} + +/* Animated Border */ +.animated-border { + position: relative; + padding: 80px 0; +} + +.animated-border::before, +.animated-border::after { + content: ''; + position: absolute; + left: 0; + width: 100%; + height: 2px; + background: linear-gradient( + 90deg, + transparent, + #0f72b5 20%, + #0f72b5 80%, + transparent + ); +} + +.animated-border::before { + top: 0; + animation: borderSlide 4s infinite; +} + +.animated-border::after { + bottom: 0; + animation: borderSlide 4s infinite reverse; +} + +@keyframes borderSlide { + 0%, 100% { + transform: translateX(-100%); + } + 50% { + transform: translateX(100%); + } +} + +/* Section Fade Transitions */ +.fade-section { + opacity: 0; + transform: translateY(50px); + transition: all 1s cubic-bezier(0.4, 0, 0.2, 1); +} + +.fade-section.visible { + opacity: 1; + transform: translateY(0); +} + +/* Parallax Background Sections */ +.parallax-section { + position: relative; + min-height: 500px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +.parallax-bg { + position: absolute; + top: -20%; + left: 0; + width: 100%; + height: 120%; + background-image: linear-gradient(135deg, rgba(15, 114, 181, 0.05) 0%, transparent 100%); + background-attachment: fixed; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + will-change: transform; +} + +/* Split Color Section */ +.split-section { + position: relative; + overflow: hidden; +} + +.split-section::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: linear-gradient( + 45deg, + transparent 48%, + rgba(15, 114, 181, 0.05) 49%, + rgba(15, 114, 181, 0.05) 51%, + transparent 52% + ); + animation: rotateSplit 20s linear infinite; +} + +@keyframes rotateSplit { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} \ No newline at end of file diff --git a/docs/Sitemap_IntelSight_UG.docx b/docs/Sitemap_IntelSight_UG.docx new file mode 100644 index 0000000..2e35ec0 Binary files /dev/null and b/docs/Sitemap_IntelSight_UG.docx differ diff --git a/docs/datenschutzerklaerung_intelsight_de_de.pdf b/docs/datenschutzerklaerung_intelsight_de_de.pdf new file mode 100644 index 0000000..ae9adaa Binary files /dev/null and b/docs/datenschutzerklaerung_intelsight_de_de.pdf differ diff --git a/docs/impressum_intelsight_de_de.pdf b/docs/impressum_intelsight_de_de.pdf new file mode 100644 index 0000000..90a3a6f Binary files /dev/null and b/docs/impressum_intelsight_de_de.pdf differ diff --git a/js/animations-enhanced.js b/js/animations-enhanced.js new file mode 100644 index 0000000..9543cb2 --- /dev/null +++ b/js/animations-enhanced.js @@ -0,0 +1,303 @@ +/** + * Enhanced Animations and Interactions + * Premium effects for modern web experience + */ + +const EnhancedAnimations = { + init() { + this.initScrollAnimations(); + this.initParallaxEffects(); + this.initMagneticButtons(); + this.initTextAnimations(); + this.initCardTilt(); + this.initSmoothScroll(); + this.initCursorEffects(); + this.initNumberCounters(); + this.initRevealOnScroll(); + this.initNavbarEffects(); + }, + + // Smooth scroll with easing + initSmoothScroll() { + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + if (target) { + const offset = 100; + const targetPosition = target.offsetTop - offset; + window.scrollTo({ + top: targetPosition, + behavior: 'smooth' + }); + } + }); + }); + }, + + // Parallax scrolling effects + initParallaxEffects() { + const parallaxElements = document.querySelectorAll('.parallax'); + let ticking = false; + + function updateParallax() { + const scrolled = window.pageYOffset; + + parallaxElements.forEach(element => { + const speed = element.dataset.speed || 0.5; + const yPos = -(scrolled * speed); + element.style.transform = `translateY(${yPos}px)`; + }); + + ticking = false; + } + + function requestTick() { + if (!ticking) { + window.requestAnimationFrame(updateParallax); + ticking = true; + } + } + + window.addEventListener('scroll', requestTick); + }, + + // Magnetic button effects + initMagneticButtons() { + const magneticButtons = document.querySelectorAll('.primary-button, .secondary-button, .cta-button'); + + magneticButtons.forEach(button => { + button.addEventListener('mousemove', (e) => { + const rect = button.getBoundingClientRect(); + const x = e.clientX - rect.left - rect.width / 2; + const y = e.clientY - rect.top - rect.height / 2; + + button.style.transform = `translate(${x * 0.2}px, ${y * 0.2}px) scale(1.05)`; + }); + + button.addEventListener('mouseleave', () => { + button.style.transform = ''; + }); + }); + }, + + // Advanced text animations + initTextAnimations() { + // Typewriter effect for hero title - DISABLED to prevent duplication + // The title already has CSS animations applied + + /* Commented out to fix duplication issue + const heroTitle = document.querySelector('.main-title'); + if (heroTitle && !heroTitle.dataset.animated) { + heroTitle.dataset.animated = 'true'; + const text = heroTitle.textContent; + heroTitle.textContent = ''; + heroTitle.style.opacity = '1'; + + let index = 0; + const typeWriter = () => { + if (index < text.length) { + heroTitle.textContent += text.charAt(index); + index++; + setTimeout(typeWriter, 50); + } + }; + + // Start typewriter after a short delay + setTimeout(typeWriter, 500); + } + */ + + // Word-by-word reveal for hero text + const heroText = document.querySelector('.hero-text'); + if (heroText) { + const words = heroText.textContent.split(' '); + heroText.innerHTML = words.map(word => + `${word}` + ).join(' '); + + const wordSpans = heroText.querySelectorAll('.word-reveal'); + wordSpans.forEach((word, index) => { + setTimeout(() => { + word.style.opacity = '1'; + word.style.transform = 'translateY(0)'; + }, 1000 + index * 100); + }); + } + }, + + // 3D card tilt effect + initCardTilt() { + const cards = document.querySelectorAll('.tool-card, .value-card, .why-card'); + + cards.forEach(card => { + card.addEventListener('mousemove', (e) => { + const rect = card.getBoundingClientRect(); + const x = e.clientX - rect.left; + const y = e.clientY - rect.top; + + const centerX = rect.width / 2; + const centerY = rect.height / 2; + + const rotateX = (y - centerY) / 10; + const rotateY = (centerX - x) / 10; + + card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.02)`; + }); + + card.addEventListener('mouseleave', () => { + card.style.transform = ''; + }); + }); + }, + + // Custom cursor effects - DISABLED + initCursorEffects() { + // Cursor removed as requested + return; + }, + + // Animated number counters + initNumberCounters() { + const counters = document.querySelectorAll('.indicator-value'); + const animationDuration = 2000; + let hasAnimated = false; + + const animateCounters = () => { + if (hasAnimated) return; + + counters.forEach(counter => { + const target = parseFloat(counter.dataset.target); + const start = 0; + const increment = target / (animationDuration / 16); + let current = start; + + const updateCounter = () => { + current += increment; + if (current < target) { + counter.textContent = Math.floor(current); + requestAnimationFrame(updateCounter); + } else { + counter.textContent = target % 1 === 0 ? target : target.toFixed(1); + } + }; + + updateCounter(); + }); + + hasAnimated = true; + }; + + // Trigger on scroll into view + const observerOptions = { + threshold: 0.5 + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + animateCounters(); + } + }); + }, observerOptions); + + const indicatorsSection = document.querySelector('.trust-indicators'); + if (indicatorsSection) { + observer.observe(indicatorsSection); + } + }, + + // Reveal elements on scroll + initRevealOnScroll() { + const revealElements = document.querySelectorAll('.about-panel, .tool-card, .value-card, .why-card, .competency-item'); + + revealElements.forEach((element, index) => { + element.style.opacity = '0'; + element.style.transform = 'translateY(50px)'; + element.style.transition = 'all 0.8s cubic-bezier(0.4, 0, 0.2, 1)'; + }); + + const revealOnScroll = () => { + const windowHeight = window.innerHeight; + + revealElements.forEach((element, index) => { + const elementTop = element.getBoundingClientRect().top; + const elementVisible = 100; + + if (elementTop < windowHeight - elementVisible) { + setTimeout(() => { + element.style.opacity = '1'; + element.style.transform = 'translateY(0)'; + }, index * 50); + } + }); + }; + + window.addEventListener('scroll', revealOnScroll); + revealOnScroll(); // Check on initial load + }, + + // Scroll-based animations + initScrollAnimations() { + let lastScrollY = window.scrollY; + let ticking = false; + + function updateScrollAnimations() { + const scrollY = window.scrollY; + const scrollDirection = scrollY > lastScrollY ? 'down' : 'up'; + + // Hero parallax + const hero = document.querySelector('.hero-content'); + if (hero) { + hero.style.transform = `translateY(${scrollY * 0.5}px)`; + hero.style.opacity = 1 - (scrollY / 800); + } + + // Video parallax + const heroVideos = document.querySelector('.hero-video-container'); + if (heroVideos) { + heroVideos.style.transform = `translateY(${scrollY * 0.3}px) scale(${1 + scrollY * 0.0003})`; + } + + lastScrollY = scrollY; + ticking = false; + } + + function requestTick() { + if (!ticking) { + window.requestAnimationFrame(updateScrollAnimations); + ticking = true; + } + } + + window.addEventListener('scroll', requestTick); + }, + + // Enhanced navbar effects + initNavbarEffects() { + const navbar = document.querySelector('.navbar'); + let lastScrollY = window.scrollY; + + window.addEventListener('scroll', () => { + const scrollY = window.scrollY; + + if (scrollY > 50) { + navbar.classList.add('scrolled'); + } else { + navbar.classList.remove('scrolled'); + } + + // Keep navbar always visible + navbar.style.transform = 'translateY(0)'; + + lastScrollY = scrollY; + }); + } +}; + +// Initialize when DOM is ready +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', () => EnhancedAnimations.init()); +} else { + EnhancedAnimations.init(); +} \ No newline at end of file diff --git a/js/animations.js b/js/animations.js new file mode 100644 index 0000000..026bbbf --- /dev/null +++ b/js/animations.js @@ -0,0 +1,403 @@ +/** + * Animation module for IntelSight website + * Contains all animation logic and visual effects + */ + +// Particle Animation System +const ParticleAnimation = { + canvas: null, + ctx: null, + particles: [], + + /** + * Initialize particle animation + */ + init() { + this.canvas = document.querySelector(SELECTORS.PARTICLE_CANVAS); + if (!this.canvas) return; + + this.ctx = this.canvas.getContext('2d'); + this.resizeCanvas(); + this.createParticles(); + this.animate(); + + // Handle window resize + window.addEventListener('resize', () => this.resizeCanvas()); + }, + + /** + * Resize canvas to window size + */ + resizeCanvas() { + this.canvas.width = window.innerWidth; + this.canvas.height = window.innerHeight; + }, + + /** + * Create particle objects + */ + createParticles() { + this.particles = []; + for (let i = 0; i < CONFIG.ANIMATION.PARTICLE_COUNT; i++) { + this.particles.push(new Particle(this.canvas)); + } + }, + + /** + * Main animation loop + */ + animate() { + this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); + + // Update and draw particles + this.particles.forEach(particle => { + particle.update(this.canvas); + particle.draw(this.ctx); + }); + + // Draw connections between particles + this.drawConnections(); + + requestAnimationFrame(() => this.animate()); + }, + + /** + * Draw connections between nearby particles + */ + drawConnections() { + for (let a = 0; a < this.particles.length; a++) { + for (let b = a + 1; b < this.particles.length; b++) { + const distance = Math.sqrt( + Math.pow(this.particles[a].x - this.particles[b].x, 2) + + Math.pow(this.particles[a].y - this.particles[b].y, 2) + ); + + if (distance < CONFIG.ANIMATION.CONNECTION_DISTANCE) { + const opacity = 0.15 * (1 - distance / CONFIG.ANIMATION.CONNECTION_DISTANCE); + // Use darker blue for better visibility on light background + this.ctx.strokeStyle = `rgba(15, 114, 181, ${opacity})`; + this.ctx.lineWidth = 1; + this.ctx.beginPath(); + this.ctx.moveTo(this.particles[a].x, this.particles[a].y); + this.ctx.lineTo(this.particles[b].x, this.particles[b].y); + this.ctx.stroke(); + } + } + } + } +}; + +/** + * Particle class for animation + */ +class Particle { + constructor(canvas) { + this.x = Math.random() * canvas.width; + this.y = Math.random() * canvas.height; + this.size = Math.random() * (CONFIG.ANIMATION.PARTICLE_SIZE_MAX - CONFIG.ANIMATION.PARTICLE_SIZE_MIN) + CONFIG.ANIMATION.PARTICLE_SIZE_MIN; + this.speedX = (Math.random() - 0.5) * CONFIG.ANIMATION.PARTICLE_SPEED; + this.speedY = (Math.random() - 0.5) * CONFIG.ANIMATION.PARTICLE_SPEED; + this.opacity = Math.random() * 0.5 + 0.2; + } + + update(canvas) { + this.x += this.speedX; + this.y += this.speedY; + + // Wrap around screen edges + if (this.x > canvas.width) this.x = 0; + else if (this.x < 0) this.x = canvas.width; + + if (this.y > canvas.height) this.y = 0; + else if (this.y < 0) this.y = canvas.height; + } + + draw(ctx) { + // Use darker blue for better visibility on light background + ctx.fillStyle = `rgba(15, 114, 181, ${this.opacity * 0.7})`; + ctx.beginPath(); + ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); + ctx.fill(); + } +} + +// Counter Animation +const CounterAnimation = { + /** + * Animate all counter elements + */ + animateAll() { + const counters = document.querySelectorAll(SELECTORS.INDICATOR_VALUE); + counters.forEach(counter => this.animateCounter(counter)); + }, + + /** + * Animate a single counter + * @param {HTMLElement} counter - Counter element to animate + */ + animateCounter(counter) { + const target = parseFloat(counter.getAttribute(DATA_ATTRS.TARGET)); + const increment = target / CONFIG.ANIMATION.COUNTER_SPEED; + let current = 0; + + const updateCounter = () => { + current += increment; + + if (current < target) { + counter.innerText = Math.ceil(current); + setTimeout(updateCounter, CONFIG.TIMING.COUNTER_UPDATE_INTERVAL); + } else { + // Set final value with proper formatting + if (target === CONFIG.TRUST_INDICATORS.AVAILABILITY) { + counter.innerText = target + '%'; + } else if (target === CONFIG.TRUST_INDICATORS.AUTHORITIES_COUNT) { + counter.innerText = target + '+'; + } else if (target === CONFIG.TRUST_INDICATORS.SUPPORT_HOURS) { + counter.innerText = target + '/7'; + } + } + }; + + updateCounter(); + } +}; + +// Scroll Animations +const ScrollAnimations = { + scrollIndicator: null, + + /** + * Initialize scroll-based animations + */ + init() { + this.scrollIndicator = document.querySelector(SELECTORS.SCROLL_INDICATOR); + this.setupScrollIndicator(); + this.setupIntersectionObserver(); + }, + + /** + * Setup scroll indicator behavior + */ + setupScrollIndicator() { + if (!this.scrollIndicator) return; + + // Click to scroll to about section + this.scrollIndicator.addEventListener('click', () => { + const aboutSection = document.querySelector('#about'); + if (aboutSection) { + aboutSection.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + }); + + // Hide/show based on scroll position + let scrollTimeout; + window.addEventListener('scroll', () => { + const hero = document.querySelector(SELECTORS.HERO); + + if (window.scrollY > CONFIG.ANIMATION.SCROLL_THRESHOLD) { + if (hero) hero.classList.add(CLASSES.SCROLLED); + if (this.scrollIndicator) this.scrollIndicator.style.opacity = '0'; + } else { + if (hero) hero.classList.remove(CLASSES.SCROLLED); + if (this.scrollIndicator) this.scrollIndicator.style.opacity = '1'; + } + + clearTimeout(scrollTimeout); + scrollTimeout = setTimeout(() => { + if (window.scrollY > CONFIG.ANIMATION.SCROLL_THRESHOLD && this.scrollIndicator) { + this.scrollIndicator.style.display = 'none'; + } else if (this.scrollIndicator) { + this.scrollIndicator.style.display = 'flex'; + } + }, CONFIG.TIMING.SCROLL_HIDE_DELAY); + }); + }, + + /** + * Setup intersection observer for scroll-triggered animations + */ + setupIntersectionObserver() { + const observerOptions = { + threshold: CONFIG.OBSERVER.THRESHOLD, + rootMargin: CONFIG.OBSERVER.ROOT_MARGIN + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + // Trust indicators animation + if (entry.target.classList.contains('trust-indicators')) { + CounterAnimation.animateAll(); + observer.unobserve(entry.target); + } + + // Timeline animation + if (entry.target.classList.contains('timeline')) { + const items = entry.target.querySelectorAll('.timeline-item'); + items.forEach((item, index) => { + setTimeout(() => { + item.classList.add(CLASSES.VISIBLE); + }, index * 300); + }); + observer.unobserve(entry.target); + } + + // Feature nodes animation + if (entry.target.classList.contains('feature-nodes')) { + const nodes = entry.target.querySelectorAll('.node'); + nodes.forEach((node, index) => { + setTimeout(() => { + node.style.opacity = '1'; + node.style.transform = 'translateY(0)'; + }, index * 150); + }); + observer.unobserve(entry.target); + } + } + }); + }, observerOptions); + + // Observe elements + const trustIndicators = document.querySelector(SELECTORS.TRUST_INDICATORS); + if (trustIndicators) { + trustIndicators.style.opacity = '0'; + observer.observe(trustIndicators); + } + + const timeline = document.querySelector('.timeline'); + if (timeline) observer.observe(timeline); + + const featureNodes = document.querySelector('.feature-nodes'); + if (featureNodes) { + document.querySelectorAll('.node').forEach(node => { + node.style.opacity = '0'; + node.style.transform = 'translateY(30px)'; + node.style.transition = 'all 0.6s ease'; + }); + observer.observe(featureNodes); + } + } +}; + +// Glitch Effect +const GlitchEffect = { + /** + * Apply glitch effect to element on hover + * @param {HTMLElement} element - Element to apply effect to + */ + apply(element) { + if (!element) return; + + let glitchInterval; + element.addEventListener('mouseenter', () => { + let count = 0; + glitchInterval = setInterval(() => { + element.style.textShadow = ` + ${Math.random() * 5}px ${Math.random() * 5}px 0 rgba(0, 212, 255, 0.5), + ${Math.random() * -5}px ${Math.random() * 5}px 0 rgba(255, 0, 128, 0.5) + `; + count++; + if (count > CONFIG.ANIMATION.GLITCH_ITERATIONS) { + clearInterval(glitchInterval); + element.style.textShadow = 'none'; + } + }, CONFIG.ANIMATION.GLITCH_INTERVAL); + }); + } +}; + +// Interactive Elements +const InteractiveElements = { + /** + * Initialize all interactive element animations + */ + init() { + this.setupNodeHoverEffects(); + this.setupWidgetHoverEffects(); + this.setupInteractiveIcon(); + }, + + /** + * Setup hover effects for node elements + */ + setupNodeHoverEffects() { + document.querySelectorAll('.node').forEach(node => { + node.addEventListener('mouseenter', function() { + const icon = this.querySelector('.node-icon'); + if (icon) icon.style.transform = 'scale(1.2) rotate(5deg)'; + }); + + node.addEventListener('mouseleave', function() { + const icon = this.querySelector('.node-icon'); + if (icon) icon.style.transform = 'scale(1) rotate(0deg)'; + }); + }); + }, + + /** + * Setup hover effects for widget elements + */ + setupWidgetHoverEffects() { + document.querySelectorAll('.widget').forEach(widget => { + widget.addEventListener('mouseenter', function() { + this.style.boxShadow = '0 5px 20px rgba(0, 212, 255, 0.3)'; + }); + + widget.addEventListener('mouseleave', function() { + this.style.boxShadow = 'none'; + }); + }); + }, + + /** + * Setup 3D interactive icon effect + */ + setupInteractiveIcon() { + const icon = document.querySelector(SELECTORS.INTERACTIVE_ICON); + if (!icon) return; + + document.addEventListener('mousemove', (e) => { + const rect = icon.getBoundingClientRect(); + const centerX = rect.left + rect.width / 2; + const centerY = rect.top + rect.height / 2; + + const mouseX = (e.clientX - centerX) / 20; + const mouseY = (e.clientY - centerY) / 20; + + icon.style.transform = `perspective(1000px) rotateY(${mouseX}deg) rotateX(${-mouseY}deg)`; + }); + } +}; + +// Initialize all animations +const Animations = { + /** + * Initialize all animation systems + */ + init() { + // Core animations + ParticleAnimation.init(); + ScrollAnimations.init(); + InteractiveElements.init(); + + // Apply glitch effect to main title + const mainTitle = document.querySelector('.main-title'); + if (mainTitle) { + GlitchEffect.apply(mainTitle); + } + + // Page load animations + window.addEventListener('load', () => { + document.body.classList.add(CLASSES.LOADED); + + // Fade in hero content + setTimeout(() => { + const heroContent = document.querySelector(SELECTORS.HERO_CONTENT); + if (heroContent) { + heroContent.style.opacity = '1'; + heroContent.style.transform = 'translateY(0)'; + } + }, 100); + }); + } +}; \ No newline at end of file diff --git a/js/components.js b/js/components.js new file mode 100644 index 0000000..c721513 --- /dev/null +++ b/js/components.js @@ -0,0 +1,499 @@ +/** + * UI Components module for IntelSight website + * Contains all interactive UI component logic + */ + +// Language Toggle Component +const LanguageToggle = { + element: null, + + /** + * Initialize language toggle + */ + init() { + this.element = document.querySelector(SELECTORS.LANG_TOGGLE); + if (!this.element) return; + + this.element.addEventListener('click', (e) => { + e.preventDefault(); + e.stopPropagation(); + this.toggle(); + }); + }, + + /** + * Toggle between languages + */ + toggle() { + const newLanguage = getCurrentLanguage() === 'de' ? 'en' : 'de'; + switchLanguage(newLanguage); + + // Update expand button text after language change + ProductShowcase.updateExpandButtonText(); + } +}; + +// Navigation Component +const Navigation = { + navbar: null, + + /** + * Initialize navigation component + */ + init() { + this.navbar = document.querySelector(SELECTORS.NAVBAR); + this.setupSmoothScrolling(); + this.setupMobileMenu(); + }, + + /** + * Setup smooth scrolling for anchor links + */ + setupSmoothScrolling() { + document.querySelectorAll(SELECTORS.SMOOTH_LINKS).forEach(anchor => { + anchor.addEventListener('click', function(e) { + e.preventDefault(); + const targetId = this.getAttribute('href'); + const target = document.querySelector(targetId); + + if (target) { + target.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + } + }); + }); + }, + + /** + * Setup mobile menu functionality + */ + setupMobileMenu() { + // Mobile menu logic would go here if needed + // Currently not implemented as per YAGNI principle + } +}; + +// About Section Tabs +const AboutTabs = { + tabs: null, + panels: null, + + /** + * Initialize about section tabs + */ + init() { + this.tabs = document.querySelectorAll(SELECTORS.ABOUT_TABS); + this.panels = document.querySelectorAll(SELECTORS.ABOUT_PANELS); + + if (!this.tabs.length) return; + + this.tabs.forEach(tab => { + tab.addEventListener('click', () => this.switchTab(tab)); + }); + }, + + /** + * Switch to selected tab + * @param {HTMLElement} selectedTab - Tab element that was clicked + */ + switchTab(selectedTab) { + const targetPanelId = selectedTab.getAttribute(DATA_ATTRS.TAB); + + // Remove active class from all tabs and panels + this.tabs.forEach(tab => tab.classList.remove(CLASSES.ACTIVE)); + this.panels.forEach(panel => panel.classList.remove(CLASSES.ACTIVE)); + + // Add active class to selected tab and corresponding panel + selectedTab.classList.add(CLASSES.ACTIVE); + const targetPanel = document.getElementById(targetPanelId); + if (targetPanel) { + targetPanel.classList.add(CLASSES.ACTIVE); + } + } +}; + +// Product Showcase Component +const ProductShowcase = { + expandButton: null, + toolsGrid: null, + + /** + * Initialize product showcase + */ + init() { + this.expandButton = document.querySelector(SELECTORS.EXPAND_BUTTON); + this.toolsGrid = document.querySelector(SELECTORS.TOOLS_GRID); + + if (!this.expandButton || !this.toolsGrid) return; + + this.expandButton.addEventListener('click', () => this.toggleExpand()); + }, + + /** + * Toggle expand/collapse state + */ + toggleExpand() { + const isExpanded = this.expandButton.getAttribute(DATA_ATTRS.EXPANDED) === 'true'; + + if (isExpanded) { + this.collapse(); + } else { + this.expand(); + } + }, + + /** + * Expand the tools grid + */ + expand() { + this.toolsGrid.classList.remove(CLASSES.COLLAPSED); + this.expandButton.setAttribute(DATA_ATTRS.EXPANDED, 'true'); + this.updateExpandButtonText(); + }, + + /** + * Collapse the tools grid + */ + collapse() { + this.toolsGrid.classList.add(CLASSES.COLLAPSED); + this.expandButton.setAttribute(DATA_ATTRS.EXPANDED, 'false'); + this.updateExpandButtonText(); + }, + + /** + * Update expand button text based on state + */ + updateExpandButtonText() { + const expandText = this.expandButton?.querySelector('.expand-text'); + if (!expandText) return; + + const isExpanded = this.expandButton.getAttribute(DATA_ATTRS.EXPANDED) === 'true'; + expandText.textContent = getTranslation(isExpanded ? 'hideDetails' : 'expandDetails'); + } +}; + +// Login Modal Component +const LoginModal = { + modalElement: null, + modalStyles: null, + + /** + * Show login modal + */ + show() { + this.createModal(); + this.attachEventListeners(); + }, + + /** + * Create modal HTML and styles + */ + createModal() { + // Create modal element + this.modalElement = document.createElement('div'); + this.modalElement.className = 'login-modal'; + this.modalElement.innerHTML = this.getModalHTML(); + document.body.appendChild(this.modalElement); + + // Add modal styles if not already added + if (!this.modalStyles) { + this.addModalStyles(); + } + }, + + /** + * Get modal HTML content + * @returns {string} Modal HTML + */ + getModalHTML() { + const t = getTranslation; + return ` +
+ +
+ + + + + +

${t('authRequired')}

+
+

${t('authDescription')}

+
+
+ + +
+ +
+

${t('noAccess')} ${t('contactUs')}

+
+ `; + }, + + /** + * Add modal styles to document + */ + addModalStyles() { + this.modalStyles = document.createElement('style'); + this.modalStyles.textContent = ` + .login-modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.7); + backdrop-filter: blur(10px); + display: flex; + align-items: center; + justify-content: center; + z-index: 10000; + animation: fadeIn 0.3s ease; + } + .modal-content { + background: #ffffff; + border-radius: 12px; + padding: 2.5rem; + max-width: 400px; + width: 90%; + position: relative; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); + } + .modal-header { + text-align: center; + margin-bottom: 1.5rem; + } + .modal-header .lock-icon { + width: 48px; + height: 48px; + color: #0066cc; + margin-bottom: 1rem; + } + .modal-close { + position: absolute; + top: 1rem; + right: 1rem; + background: none; + border: none; + color: #666; + font-size: 2rem; + cursor: pointer; + transition: all 0.3s ease; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + } + .modal-close:hover { + background: #f0f0f0; + color: #333; + } + .modal-content h3 { + color: #1a1a1a; + margin-bottom: 0.5rem; + font-size: 1.5rem; + font-weight: 600; + } + .modal-content p { + color: #666; + margin-bottom: 2rem; + text-align: center; + } + .modal-content .form-group { + margin-bottom: 1.5rem; + } + .modal-content label { + display: block; + color: #333; + margin-bottom: 0.5rem; + font-weight: 500; + } + .modal-content input { + width: 100%; + padding: 0.875rem; + background: #f8f8f8; + border: 2px solid #e0e0e0; + border-radius: 8px; + color: #333; + font-size: 1rem; + transition: all 0.3s ease; + } + .modal-content input:focus { + outline: none; + border-color: #0066cc; + background: #fff; + } + .modal-content input::placeholder { + color: #999; + } + .modal-content .primary-button { + width: 100%; + padding: 0.875rem; + background: #0066cc; + color: white; + border: none; + border-radius: 8px; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + } + .modal-content .primary-button:hover { + background: #0052a3; + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3); + } + .auth-note { + text-align: center; + margin-top: 1.5rem; + font-size: 0.9rem; + color: #666; + } + .auth-note a { + color: #0066cc; + text-decoration: none; + } + .auth-note a:hover { + text-decoration: underline; + } + `; + document.head.appendChild(this.modalStyles); + }, + + /** + * Attach event listeners to modal + */ + attachEventListeners() { + // Close button + const closeBtn = this.modalElement.querySelector('.modal-close'); + closeBtn.addEventListener('click', () => this.close()); + + // Form submission + const form = this.modalElement.querySelector('#loginForm'); + form.addEventListener('submit', (e) => this.handleSubmit(e)); + + // Click outside to close + this.modalElement.addEventListener('click', (e) => { + if (e.target === this.modalElement) { + this.close(); + } + }); + }, + + /** + * Handle form submission + * @param {Event} e - Submit event + */ + handleSubmit(e) { + e.preventDefault(); + const password = document.getElementById('auth-password').value; + + // Check password (temporarily hardcoded as requested) + if (password === '123456') { + sessionStorage.setItem(CONFIG.AUTH.SESSION_KEY, 'true'); + this.close(); + window.location.href = CONFIG.AUTH.REDIRECT_PAGE; + } else { + alert(getTranslation('wrongCode')); + document.getElementById('auth-password').value = ''; + document.getElementById('auth-password').focus(); + } + }, + + /** + * Close and remove modal + */ + close() { + if (this.modalElement) { + this.modalElement.remove(); + this.modalElement = null; + } + } +}; + +// Contact Form Component +const ContactForm = { + form: null, + + /** + * Initialize contact form + */ + init() { + this.form = document.querySelector(SELECTORS.CONTACT_FORM); + if (!this.form) return; + + this.form.addEventListener('submit', (e) => this.handleSubmit(e)); + }, + + /** + * Handle form submission + * @param {Event} e - Submit event + */ + handleSubmit(e) { + e.preventDefault(); + + // Get form data + const formData = new FormData(this.form); + const data = Object.fromEntries(formData.entries()); + + // In production, this would send data to server + console.log('Form submission:', data); + + // Show success message + alert(getTranslation('contactFormSuccess')); + this.form.reset(); + } +}; + +// Demo Request Handler +const DemoRequest = { + /** + * Initialize demo request buttons + */ + init() { + document.querySelectorAll('.primary-button, .secondary-button, .cta-button').forEach(button => { + if (button.textContent.toLowerCase().includes('demo')) { + button.addEventListener('click', (e) => this.handleDemoRequest(e)); + } + }); + }, + + /** + * Handle demo request + * @param {Event} e - Click event + */ + handleDemoRequest(e) { + e.preventDefault(); + alert(getTranslation('demoRequestAlert')); + } +}; + +// Initialize all components +const Components = { + /** + * Initialize all UI components + */ + init() { + LanguageToggle.init(); + Navigation.init(); + AboutTabs.init(); + ProductShowcase.init(); + ContactForm.init(); + DemoRequest.init(); + } +}; + +// Make showLoginModal globally available for onclick attribute +window.showLoginModal = function() { + LoginModal.show(); +}; + +// Make closeLoginModal globally available for onclick attribute +window.closeLoginModal = function() { + LoginModal.close(); +}; \ No newline at end of file diff --git a/js/config.js b/js/config.js new file mode 100644 index 0000000..c3be805 --- /dev/null +++ b/js/config.js @@ -0,0 +1,156 @@ +/** + * Central configuration file for IntelSight website + * Contains all constants, settings and selectors + */ + +// Application Configuration +const CONFIG = { + // Animation Settings + ANIMATION: { + PARTICLE_COUNT: 100, + PARTICLE_SPEED: 3, + PARTICLE_SIZE_MIN: 1, + PARTICLE_SIZE_MAX: 3, + CONNECTION_DISTANCE: 100, + COUNTER_SPEED: 200, + SCROLL_THRESHOLD: 50, + FADE_DURATION: 500, + GLITCH_ITERATIONS: 5, + GLITCH_INTERVAL: 50 + }, + + // Hero Video Settings + HERO_VIDEOS: { + ROTATION_INTERVAL: 12000, // 12 seconds per video (slower like Palantir) + FADE_DURATION: 3000, // 3 second fade transition (much slower) + VIDEO_SOURCES: [ + 'assets/videos/hero-tech-pattern.mp4', + 'assets/videos/hero-data-flow.mp4', + 'assets/videos/hero-network-viz.mp4', + 'assets/videos/hero-code-abstract.mp4' + ] + }, + + // Language Settings + I18N: { + DEFAULT_LANGUAGE: 'de', + SUPPORTED_LANGUAGES: ['de', 'en'], + STORAGE_KEY: 'intelsight_language' + }, + + // Trust Indicators Target Values + TRUST_INDICATORS: { + AVAILABILITY: 99.9, + AUTHORITIES_COUNT: 500, + SUPPORT_HOURS: 24 + }, + + // Intersection Observer Settings + OBSERVER: { + THRESHOLD: 0.3, + ROOT_MARGIN: '0px' + }, + + // Authentication Settings + AUTH: { + SESSION_KEY: 'accountForgerAuth', + REDIRECT_PAGE: 'accountforger-video.html' + }, + + // Timeouts and Intervals + TIMING: { + SCROLL_HIDE_DELAY: 500, + COUNTER_UPDATE_INTERVAL: 10, + MAP_POINT_SPAWN_INTERVAL: 5000, + RESPONSE_TIMER_UPDATE: 2000, + LIVE_COUNTER_UPDATE: 3000 + } +}; + +// DOM Selectors +const SELECTORS = { + // Navigation + NAVBAR: '.navbar', + NAV_MENU: '.nav-menu', + LANG_TOGGLE: '.lang-toggle', + + // Hero Section + HERO: '.hero', + HERO_CONTENT: '.hero-content', + HERO_VIDEO: '.hero-video', + PARTICLE_CANVAS: '#particleCanvas', + SCROLL_INDICATOR: '.scroll-indicator', + + // Trust Indicators + TRUST_INDICATORS: '.trust-indicators', + INDICATOR_VALUE: '.indicator-value', + + // About Section + ABOUT_TABS: '.about-tab', + ABOUT_PANELS: '.about-panel', + + // Products Section + EXPAND_BUTTON: '.expand-button', + TOOLS_GRID: '.tools-grid', + TOOL_CARDS: '.tool-card', + + // Modals + LOGIN_MODAL: '.login-modal', + MODAL_CLOSE: '.modal-close', + + // Forms + CONTACT_FORM: '#contactForm', + LOGIN_FORM: '#loginForm', + + // Animation Elements + INTERACTIVE_ICON: '#interactiveIcon', + NEURAL_CANVAS: '#neuralCanvas', + DATA_PARTICLES: '#dataParticles', + LIVE_COUNTER: '#liveCounter', + RESPONSE_TIMER: '#responseTimer', + MAP_POINTS: '#mapPoints', + + // Generic + TRANSLATABLE: '[data-translate]', + SMOOTH_LINKS: 'a[href^="#"]', + SKIP_NAV: '.skip-nav' +}; + +// CSS Classes +const CLASSES = { + ACTIVE: 'active', + SCROLLED: 'scrolled', + COLLAPSED: 'collapsed', + VISIBLE: 'visible', + LOADED: 'loaded', + EXPANDED: 'expanded', + HIDDEN: 'hidden', + + // Animation Classes + FADE_IN: 'fade-in', + FADE_OUT: 'fade-out', + SLIDE_UP: 'slide-up', + SLIDE_DOWN: 'slide-down', + + // Component Classes + PARTICLE: 'particle', + DATA_PARTICLE: 'data-particle', + MAP_POINT: 'map-point', + NODE: 'node', + WIDGET: 'widget', + TAB: 'tab', + PANEL: 'panel' +}; + +// Data Attributes +const DATA_ATTRS = { + TRANSLATE: 'data-translate', + TAB: 'data-tab', + EXPANDED: 'data-expanded', + LANG: 'data-lang', + TARGET: 'data-target', + TOOL: 'data-tool' +}; + +// Export for use in other modules (if using module system) +// For now, these are global constants available to all scripts \ No newline at end of file diff --git a/js/hero-videos.js b/js/hero-videos.js new file mode 100644 index 0000000..336d850 --- /dev/null +++ b/js/hero-videos.js @@ -0,0 +1,209 @@ +/** + * Hero Video Rotation System + * Manages rotating background videos in hero section + */ + +const HeroVideoRotation = { + videos: [], + currentIndex: 0, + rotationInterval: null, + isTransitioning: false, + + /** + * Initialize the video rotation system + */ + init() { + // Get all video elements + this.videos = document.querySelectorAll('.hero-video'); + + if (!this.videos.length) return; + + // Setup event listeners + this.setupEventListeners(); + + // Start rotation + this.startRotation(); + + // Ensure first video is playing + this.playVideo(0); + }, + + /** + * Setup event listeners for videos + */ + setupEventListeners() { + // Indicators removed - no click handlers needed + + // Pause rotation on hover (optional) + const heroSection = document.querySelector('.hero'); + if (heroSection) { + heroSection.addEventListener('mouseenter', () => { + // Optional: pause rotation on hover + // this.stopRotation(); + }); + + heroSection.addEventListener('mouseleave', () => { + // Optional: resume rotation + // this.startRotation(); + }); + } + + // Handle video load errors gracefully + this.videos.forEach((video, index) => { + video.addEventListener('error', () => { + console.warn(`Video ${index} failed to load, skipping...`); + // If current video fails, move to next + if (index === this.currentIndex) { + this.nextVideo(); + } + }); + + // Ensure videos are ready to play + video.addEventListener('loadeddata', () => { + console.log(`Video ${index} loaded successfully`); + }); + }); + }, + + /** + * Start automatic rotation + */ + startRotation() { + // Clear any existing interval + this.stopRotation(); + + // Set new interval + this.rotationInterval = setInterval(() => { + this.nextVideo(); + }, CONFIG.HERO_VIDEOS.ROTATION_INTERVAL); + }, + + /** + * Stop automatic rotation + */ + stopRotation() { + if (this.rotationInterval) { + clearInterval(this.rotationInterval); + this.rotationInterval = null; + } + }, + + /** + * Switch to next video + */ + nextVideo() { + const nextIndex = (this.currentIndex + 1) % this.videos.length; + this.switchToVideo(nextIndex); + }, + + /** + * Switch to previous video + */ + previousVideo() { + const prevIndex = (this.currentIndex - 1 + this.videos.length) % this.videos.length; + this.switchToVideo(prevIndex); + }, + + /** + * Switch to specific video by index + * @param {number} index - Video index to switch to + */ + switchToVideo(index) { + if (this.isTransitioning || index === this.currentIndex) return; + + this.isTransitioning = true; + + const currentVideo = this.videos[this.currentIndex]; + const nextVideo = this.videos[index]; + + // Indicators removed - no update needed + + // Prepare next video + this.prepareVideo(nextVideo); + + // Fade out current video + currentVideo.classList.add('fading-out'); + + // After half the fade duration, start fading in the next video + setTimeout(() => { + nextVideo.classList.add('active'); + nextVideo.classList.remove('fading-out'); + + // Play next video + this.playVideo(index); + }, CONFIG.HERO_VIDEOS.FADE_DURATION / 2); + + // Complete transition + setTimeout(() => { + currentVideo.classList.remove('active', 'fading-out'); + this.currentIndex = index; + this.isTransitioning = false; + }, CONFIG.HERO_VIDEOS.FADE_DURATION); + }, + + + /** + * Prepare video for playback + * @param {HTMLVideoElement} video - Video element to prepare + */ + prepareVideo(video) { + // Reset video to beginning + video.currentTime = 0; + + // Ensure video is ready to play + const playPromise = video.play(); + if (playPromise !== undefined) { + playPromise.catch(error => { + console.warn('Video autoplay was prevented:', error); + }); + } + }, + + /** + * Play specific video + * @param {number} index - Index of video to play + */ + playVideo(index) { + const video = this.videos[index]; + if (video) { + const playPromise = video.play(); + if (playPromise !== undefined) { + playPromise.catch(error => { + console.warn(`Could not play video ${index}:`, error); + }); + } + } + }, + + /** + * Pause all videos + */ + pauseAllVideos() { + this.videos.forEach(video => { + video.pause(); + }); + }, + + /** + * Handle page visibility change (pause when tab is not visible) + */ + handleVisibilityChange() { + if (document.hidden) { + this.stopRotation(); + this.pauseAllVideos(); + } else { + this.playVideo(this.currentIndex); + this.startRotation(); + } + } +}; + +// Initialize when DOM is ready +document.addEventListener('DOMContentLoaded', () => { + HeroVideoRotation.init(); +}); + +// Handle page visibility API +document.addEventListener('visibilitychange', () => { + HeroVideoRotation.handleVisibilityChange(); +}); \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..a1aaac8 --- /dev/null +++ b/js/main.js @@ -0,0 +1,277 @@ +/** + * Main application entry point for IntelSight website + * Initializes all modules and coordinates application startup + */ + +/** + * Toggle tools grid visibility + */ +function toggleTools(button) { + // Find the tools grid within the same product card + const productCard = button.closest('.product-card'); + const toolsGrid = productCard.querySelector('.tools-grid'); + + if (toolsGrid) { + const isExpanded = toolsGrid.classList.contains('expanded'); + const currentLang = getCurrentLanguage ? getCurrentLanguage() : 'de'; + + if (isExpanded) { + toolsGrid.classList.remove('expanded'); + toolsGrid.classList.add('collapsed'); + button.setAttribute('data-expanded', 'false'); + button.querySelector('span').textContent = currentLang === 'de' ? 'Details anzeigen' : 'Show Details'; + } else { + // Force browser reflow before adding expanded class + toolsGrid.style.display = 'grid'; + void toolsGrid.offsetHeight; // Trigger reflow + + toolsGrid.classList.remove('collapsed'); + toolsGrid.classList.add('expanded'); + button.setAttribute('data-expanded', 'true'); + button.querySelector('span').textContent = currentLang === 'de' ? 'Details verbergen' : 'Hide Details'; + + // Ensure all tool cards are visible + setTimeout(() => { + const toolCards = toolsGrid.querySelectorAll('.tool-card'); + toolCards.forEach((card, index) => { + card.style.opacity = '1'; + card.style.transform = 'translateY(0)'; + }); + }, 100); + } + } +} + +/** + * Application initialization + */ +const App = { + /** + * Initialize the entire application + */ + init() { + // Check DOM ready state + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', () => this.start()); + } else { + // DOM is already ready + this.start(); + } + }, + + /** + * Start the application after DOM is ready + */ + start() { + console.log('IntelSight Website Initializing...'); + + // Initialize modules in correct order + try { + // 1. Initialize translations first (needed by components) + initTranslations(); + console.log('✓ Translations initialized'); + + // 2. Initialize UI components + Components.init(); + console.log('✓ Components initialized'); + + // 3. Initialize animations + Animations.init(); + console.log('✓ Animations initialized'); + + // 4. Setup error handling + this.setupErrorHandling(); + + // 5. Setup performance monitoring + this.setupPerformanceMonitoring(); + + console.log('IntelSight Website Ready!'); + + } catch (error) { + console.error('Failed to initialize application:', error); + this.handleInitError(error); + } + }, + + /** + * Setup global error handling + */ + setupErrorHandling() { + window.addEventListener('error', (event) => { + console.error('Global error:', event.error); + // In production, this would send errors to monitoring service + }); + + window.addEventListener('unhandledrejection', (event) => { + console.error('Unhandled promise rejection:', event.reason); + // In production, this would send errors to monitoring service + }); + }, + + /** + * Setup performance monitoring + */ + setupPerformanceMonitoring() { + // Monitor page load performance + window.addEventListener('load', () => { + if (window.performance && window.performance.timing) { + const timing = window.performance.timing; + const loadTime = timing.loadEventEnd - timing.navigationStart; + console.log(`Page load time: ${loadTime}ms`); + + // Log other performance metrics + const metrics = { + domContentLoaded: timing.domContentLoadedEventEnd - timing.navigationStart, + domComplete: timing.domComplete - timing.navigationStart, + firstPaint: this.getFirstPaintTime() + }; + + console.log('Performance metrics:', metrics); + } + }); + }, + + /** + * Get first paint time if available + * @returns {number|null} First paint time in milliseconds + */ + getFirstPaintTime() { + if (window.performance && window.performance.getEntriesByType) { + const paintEntries = window.performance.getEntriesByType('paint'); + const firstPaint = paintEntries.find(entry => entry.name === 'first-paint'); + return firstPaint ? Math.round(firstPaint.startTime) : null; + } + return null; + }, + + /** + * Handle initialization errors + * @param {Error} error - The error that occurred + */ + handleInitError(error) { + // Create a fallback error message for users + const errorContainer = document.createElement('div'); + errorContainer.style.cssText = ` + position: fixed; + top: 20px; + right: 20px; + background: #ff4444; + color: white; + padding: 15px 20px; + border-radius: 5px; + z-index: 10000; + max-width: 300px; + box-shadow: 0 2px 10px rgba(0,0,0,0.2); + `; + errorContainer.textContent = 'Ein Fehler ist aufgetreten. Bitte laden Sie die Seite neu.'; + document.body.appendChild(errorContainer); + + // Auto-remove after 5 seconds + setTimeout(() => { + errorContainer.remove(); + }, 5000); + } +}; + +/** + * Utility functions + */ +const Utils = { + /** + * Debounce function to limit function calls + * @param {Function} func - Function to debounce + * @param {number} wait - Wait time in milliseconds + * @returns {Function} Debounced function + */ + debounce(func, wait) { + let timeout; + return function executedFunction(...args) { + const later = () => { + clearTimeout(timeout); + func(...args); + }; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + }; + }, + + /** + * Throttle function to limit function calls + * @param {Function} func - Function to throttle + * @param {number} limit - Time limit in milliseconds + * @returns {Function} Throttled function + */ + throttle(func, limit) { + let inThrottle; + return function(...args) { + if (!inThrottle) { + func.apply(this, args); + inThrottle = true; + setTimeout(() => inThrottle = false, limit); + } + }; + }, + + /** + * Check if element is in viewport + * @param {HTMLElement} element - Element to check + * @returns {boolean} True if element is in viewport + */ + isInViewport(element) { + const rect = element.getBoundingClientRect(); + return ( + rect.top >= 0 && + rect.left >= 0 && + rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && + rect.right <= (window.innerWidth || document.documentElement.clientWidth) + ); + }, + + /** + * Load script dynamically + * @param {string} src - Script source URL + * @returns {Promise} Promise that resolves when script is loaded + */ + loadScript(src) { + return new Promise((resolve, reject) => { + const script = document.createElement('script'); + script.src = src; + script.onload = resolve; + script.onerror = reject; + document.head.appendChild(script); + }); + }, + + /** + * Get cookie value by name + * @param {string} name - Cookie name + * @returns {string|null} Cookie value or null + */ + getCookie(name) { + const value = `; ${document.cookie}`; + const parts = value.split(`; ${name}=`); + if (parts.length === 2) { + return parts.pop().split(';').shift(); + } + return null; + }, + + /** + * Set cookie + * @param {string} name - Cookie name + * @param {string} value - Cookie value + * @param {number} days - Days until expiration + */ + setCookie(name, value, days) { + const date = new Date(); + date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); + const expires = `expires=${date.toUTCString()}`; + document.cookie = `${name}=${value};${expires};path=/`; + } +}; + +// Make Utils globally available if needed +window.Utils = Utils; + +// Start the application +App.init(); \ No newline at end of file diff --git a/js/protection.js b/js/protection.js new file mode 100644 index 0000000..c013c70 --- /dev/null +++ b/js/protection.js @@ -0,0 +1,188 @@ +/** + * Website Protection Script + * Prevents copying, downloading, and inspection of website content + */ + +(function() { + 'use strict'; + + // Disable right-click context menu + document.addEventListener('contextmenu', function(e) { + e.preventDefault(); + return false; + }); + + // Disable text selection + document.addEventListener('selectstart', function(e) { + e.preventDefault(); + return false; + }); + + // Disable drag + document.addEventListener('dragstart', function(e) { + e.preventDefault(); + return false; + }); + + // Disable copy + document.addEventListener('copy', function(e) { + e.preventDefault(); + return false; + }); + + // Disable cut + document.addEventListener('cut', function(e) { + e.preventDefault(); + return false; + }); + + // Disable paste + document.addEventListener('paste', function(e) { + e.preventDefault(); + return false; + }); + + // Disable print + window.addEventListener('beforeprint', function(e) { + e.preventDefault(); + return false; + }); + + // Detect and block DevTools + let devtools = {open: false, orientation: null}; + const threshold = 160; + const emitEvent = (state, orientation) => { + if (state) { + console.clear(); + document.body.style.display = 'none'; + document.body.innerHTML = '

Zugriff verweigert

'; + } + }; + + setInterval(() => { + if (window.outerHeight - window.innerHeight > threshold || + window.outerWidth - window.innerWidth > threshold) { + if (!devtools.open) { + emitEvent(true, null); + devtools.open = true; + } + } else { + if (devtools.open) { + emitEvent(false, null); + devtools.open = false; + } + } + }, 500); + + // Disable F12, Ctrl+Shift+I, Ctrl+Shift+J, Ctrl+U, Ctrl+S + document.addEventListener('keydown', function(e) { + // F12 + if (e.keyCode === 123) { + e.preventDefault(); + return false; + } + // Ctrl+Shift+I (DevTools) + if (e.ctrlKey && e.shiftKey && e.keyCode === 73) { + e.preventDefault(); + return false; + } + // Ctrl+Shift+J (Console) + if (e.ctrlKey && e.shiftKey && e.keyCode === 74) { + e.preventDefault(); + return false; + } + // Ctrl+U (View Source) + if (e.ctrlKey && e.keyCode === 85) { + e.preventDefault(); + return false; + } + // Ctrl+S (Save) + if (e.ctrlKey && e.keyCode === 83) { + e.preventDefault(); + return false; + } + // Ctrl+A (Select All) + if (e.ctrlKey && e.keyCode === 65) { + e.preventDefault(); + return false; + } + // Ctrl+C (Copy) + if (e.ctrlKey && e.keyCode === 67) { + e.preventDefault(); + return false; + } + // Ctrl+X (Cut) + if (e.ctrlKey && e.keyCode === 88) { + e.preventDefault(); + return false; + } + // Ctrl+V (Paste) + if (e.ctrlKey && e.keyCode === 86) { + e.preventDefault(); + return false; + } + }); + + // Disable image dragging + const images = document.getElementsByTagName('img'); + for (let i = 0; i < images.length; i++) { + images[i].addEventListener('dragstart', function(e) { + e.preventDefault(); + return false; + }); + images[i].addEventListener('mousedown', function(e) { + e.preventDefault(); + return false; + }); + } + + // Clear console periodically + setInterval(function() { + console.clear(); + console.log('%cSicherheitswarnung!', 'color: red; font-size: 30px; font-weight: bold;'); + console.log('%cDiese Browser-Funktion ist für Entwickler vorgesehen. Unbefugter Zugriff ist untersagt.', 'color: red; font-size: 16px;'); + }, 1000); + + // Detect console.log override attempts + const originalLog = console.log; + console.log = function() { + originalLog.apply(console, arguments); + console.clear(); + }; + + // Disable text highlighting with CSS + const style = document.createElement('style'); + style.innerHTML = ` + * { + -webkit-user-select: none !important; + -moz-user-select: none !important; + -ms-user-select: none !important; + user-select: none !important; + -webkit-touch-callout: none !important; + -webkit-user-drag: none !important; + } + + img { + pointer-events: none !important; + -webkit-user-drag: none !important; + -khtml-user-drag: none !important; + -moz-user-drag: none !important; + -o-user-drag: none !important; + user-drag: none !important; + } + + @media print { + body { + display: none !important; + } + } + `; + document.head.appendChild(style); + + // Protection against automated tools + if (window.automation || window.callPhantom || window._phantom || window.__nightmare || window.WebDriverException || document.__webdriver_evaluate || document.__selenium_evaluate || document.__webdriver_script_function || document.__webdriver_script_func || document.__webdriver_script_fn || document.__fxdriver_evaluate || document.__driver_unwrapped || document.__webdriver_unwrapped || document.__driver_evaluate || document.__selenium_unwrapped || document.__fxdriver_unwrapped) { + document.body.style.display = 'none'; + document.body.innerHTML = ''; + } + +})(); \ No newline at end of file diff --git a/js/section-transitions.js b/js/section-transitions.js new file mode 100644 index 0000000..e0ac19d --- /dev/null +++ b/js/section-transitions.js @@ -0,0 +1,130 @@ +/** + * Section Transitions & Effects + * Modern animations for section dividers + */ + +const SectionTransitions = { + init() { + this.initParticleBridge(); + this.initScrollReveal(); + this.initWaveAnimation(); + this.initParallaxDividers(); + }, + + // Animated particles between sections + initParticleBridge() { + const bridge = document.getElementById('particleBridge'); + if (!bridge) return; + + // Create floating particles + for (let i = 0; i < 30; i++) { + const particle = document.createElement('div'); + particle.className = 'particle'; + particle.style.left = Math.random() * 100 + '%'; + particle.style.animationDelay = Math.random() * 5 + 's'; + particle.style.animationDuration = (5 + Math.random() * 5) + 's'; + particle.style.animation = `floatParticle ${5 + Math.random() * 5}s linear infinite`; + bridge.appendChild(particle); + } + }, + + // Reveal sections on scroll + initScrollReveal() { + const sections = document.querySelectorAll('.fade-section'); + + const revealSection = (entries, observer) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + + // Add shimmer effect on reveal + const shimmer = document.createElement('div'); + shimmer.style.cssText = ` + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(15, 114, 181, 0.2), transparent); + animation: shimmerPass 1s ease-out forwards; + pointer-events: none; + z-index: 100; + `; + entry.target.style.position = 'relative'; + entry.target.appendChild(shimmer); + + setTimeout(() => shimmer.remove(), 1000); + } + }); + }; + + const observer = new IntersectionObserver(revealSection, { + threshold: 0.1, + rootMargin: '0px 0px -100px 0px' + }); + + sections.forEach(section => observer.observe(section)); + }, + + // Animate wave dividers + initWaveAnimation() { + const waves = document.querySelectorAll('.wave-divider path'); + + waves.forEach(wave => { + let time = 0; + const animateWave = () => { + time += 0.02; + const points = []; + + for (let i = 0; i <= 10; i++) { + const x = (i / 10) * 1200; + const y = Math.sin((i / 10) * Math.PI * 2 + time) * 10 + 56; + points.push(`${x},${y}`); + } + + // Create smooth wave path + const d = `M0,56 Q${points[2]} T${points[4]} T${points[6]} T${points[8]} T1200,56 L1200,0 L0,0 Z`; + wave.setAttribute('d', d); + + requestAnimationFrame(animateWave); + }; + + // Start wave animation + // animateWave(); // Commented out for performance, uncomment for wave motion + }); + }, + + // Parallax effect for dividers + initParallaxDividers() { + const dividers = document.querySelectorAll('.blob-divider, .gradient-divider, .flow-lines'); + + window.addEventListener('scroll', () => { + const scrolled = window.pageYOffset; + + dividers.forEach(divider => { + const speed = divider.dataset.speed || 0.5; + const yPos = -(scrolled * speed); + divider.style.transform = `translateY(${yPos}px)`; + }); + }); + } +}; + +// Add shimmer animation +const style = document.createElement('style'); +style.textContent = ` + @keyframes shimmerPass { + to { + left: 100%; + opacity: 0; + } + } +`; +document.head.appendChild(style); + +// Initialize when DOM is ready +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', () => SectionTransitions.init()); +} else { + SectionTransitions.init(); +} \ No newline at end of file diff --git a/js/translations.js b/js/translations.js new file mode 100644 index 0000000..1cdb0a5 --- /dev/null +++ b/js/translations.js @@ -0,0 +1,410 @@ +/** + * Translation system for IntelSight website + * Supports German (de) and English (en) + */ + +// Translation strings +const translations = { + de: { + // Page meta + pageTitle: 'IntelSight - Sicherheit Made in Germany', + + // Navigation + skipNav: 'Zum Hauptinhalt springen', + navHome: 'Startseite', + navAbout: 'Über uns', + navProducts: 'Produkte & Lösungen', + navContact: 'Kontakt', + langSwitch: 'DE | EN', + + // Hero Section + heroTitle: 'SICHERHEIT MADE IN GERMANY', + heroSubtitle: 'Spezialist für hochsichere, maßgeschneiderte IT-Lösungen für Behörden', + + // Trust Indicators + indicatorAvailability: 'Verfügbarkeit', + indicatorTrust: 'Behörden vertrauen uns', + indicatorSupport: 'Support', + + // Scroll Indicator + scrollToExplore: 'Nach unten scrollen', + + // About Section + aboutTitle: 'ÜBER UNS', + aboutSubtitle: 'Ihr Partner für sichere Behördensoftware', + + // About Tabs + tabWhoWeAre: 'Unternehmen', + tabMission: 'Mission & Werte', + tabCompetencies: 'Kernkompetenzen', + tabWhyUs: 'Unser Versprechen', + + // Who We Are + whoWeAreTitle: 'Unternehmen', + whoWeArePara1: 'IntelSight UG ist Ihr Spezialist für hochsichere, maßgeschneiderte IT-Lösungen aus Nordrhein-Westfalen. Wir entwickeln innovative Software speziell für staatliche Sicherheits- und Ermittlungsbehörden.', + whoWeArePara2: 'Unser Ansatz vereint modernste Technologie mit einem tiefen Verständnis für die besonderen Anforderungen von Behörden. Dabei steht die Balance zwischen Sicherheit, Effizienz und rechtskonformer Umsetzung im Mittelpunkt unserer Arbeit.', + locationBadge: 'Nordrhein-Westfalen, Deutschland', + nrwLabel: 'Nordrhein-Westfalen', + headquartersLabel: 'Unser Standort: Langenfeld', + + // Mission & Values + missionTitle: 'Unsere Mission', + missionStatement: 'Wir schaffen effiziente, sichere und datenschutzkonforme Lösungen für moderne Strafverfolgung und Sicherheitsbehörden.', + valueIntegrityTitle: 'Integrität', + valueIntegrityDesc: 'Höchste ethische Standards in allem was wir tun', + valueTransparencyTitle: 'Transparenz', + valueTransparencyDesc: 'Offene Kommunikation und nachvollziehbare Prozesse', + valueDemocracyTitle: 'Demokratische Prinzipien', + valueDemocracyDesc: 'Kooperation nur mit Behörden im Einklang mit der freiheitlich demokratischen Grundordnung', + principleNote: 'Unser Ziel: Technologie, die Recht und Sicherheit stärkt und die freiheitlich demokratische Grundordnung schützt.', + + // Competencies + competenciesTitle: 'Unsere Kernkompetenzen', + comp1Title: 'Behördenspezifische Software', + comp1Desc: 'Entwicklung mit höchsten Sicherheitsstandards, maßgeschneidert für staatliche Anforderungen', + comp2Title: 'Intuitive Bedienkonzepte', + comp2Desc: 'Benutzerfreundliche Oberflächen trotz komplexer Funktionen für effizientes Arbeiten', + comp3Title: 'Langzeit-Support', + comp3Desc: 'Kontinuierliche Sicherheitsupdates und zuverlässige Wartung über den gesamten Lebenszyklus', + + // Why Us + whyUsTitle: 'Warum IntelSight UG?', + why1Title: 'Enge Zusammenarbeit', + why1Desc: 'Wir arbeiten Hand in Hand mit unseren Kunden für maßgeschneiderte Lösungen', + why2Title: 'Made in Germany', + why2Desc: 'Klare, robuste und sichere Software nach deutschen Qualitätsstandards', + why3Title: 'Verlässliche Partnerschaft', + why3Desc: 'Basierend auf gemeinsamen Werten und langfristigem Vertrauen', + why4Title: 'Nachhaltigkeit', + why4Desc: 'Fokus auf Sicherheit, Professionalität & zukunftssichere Lösungen', + + // Products Section + productsTitle: 'PRODUKTE & LÖSUNGEN', + productsSubtitle: 'Professionelle Werkzeuge für moderne Ermittlungsarbeit', + + // Professional Toolbox + productToolboxTitle: 'Professional Toolbox', + productToolboxDesc: 'Eine leistungsstarke Desktop-Anwendung mit fünf essentiellen Tools für behördliche OSINT-Ermittler und Analysten. Modernes Design, intuitive Bedienung, professionelle Funktionen.', + expandDetails: 'Details anzeigen', + hideDetails: 'Details verbergen', + + // Tools + tool1Title: 'Metadata Analyzer', + tool1Feature1: 'Extrahiert versteckte Informationen (EXIF, GPS, Erstellungsdaten)', + tool1Feature2: 'Forensische Analyse von Dokumenten & Bildern', + tool1Feature3: 'Export als JSON', + + tool2Title: 'Screen Recorder', + tool2Feature1: 'Bildschirmaufnahme mit Audio (System & Mikrofon)', + tool2Feature2: 'Bereichsauswahl oder Vollbild', + tool2Feature3: 'Wählbare Qualitätsstufen', + + tool3Title: 'Video Crawler', + tool3Feature1: 'Download von Videos aus 1000+ Plattformen', + tool3Feature2: 'Automatischer Untertitel-Download', + tool3Feature3: 'Qualitätsauswahl', + + tool4Title: 'Website Crawler', + tool4Feature1: 'Archiviert Webseiten offline', + tool4Feature2: 'Einstellbare Crawling-Tiefe', + tool4Feature3: 'Erhält Originalstruktur inkl. CSS, JS & Medien', + + tool5Title: 'Multimedia Converter', + tool5Feature1: 'Konvertierung von Bildern, Videos, Audio', + tool5Feature2: 'Batch-Verarbeitung', + tool5Feature3: 'Drag & Drop Unterstützung', + + // AccountForger + productAccountForgerTitle: 'AccountForger', + accessRestricted: 'Zugang nur mit Berechtigung', + protectedProductDesc: 'Dieses Produkt ist speziell für autorisierte Behörden entwickelt und erfordert eine Authentifizierung.', + loginForAccess: 'Anmelden für Zugriff', + + // Footer + footerCompanyTitle: 'IntelSight UG (haftungsbeschränkt)', + footerCompanyAddress1: 'Gladbacher Strasse 3-5', + footerCompanyAddress2: '40764 Langenfeld', + footerNavTitle: 'Navigation', + footerNavHome: 'Startseite', + footerNavAbout: 'Über uns', + footerNavProducts: 'Produkte', + footerNavContact: 'Kontakt', + + footerLegalTitle: 'Rechtliches', + footerImprint: 'Impressum', + footerPrivacy: 'Datenschutz', + footerTerms: 'AGB', + + footerContactTitle: 'Kontakt', + copyright: '© 2025 IntelSight UG (haftungsbeschränkt). Alle Rechte vorbehalten.', + + // Modal texts + authRequired: 'Authentifizierung erforderlich', + authDescription: 'Dieser Bereich ist nur für autorisierte Behörden zugänglich.', + accessCode: 'Zugangscode', + accessCodePlaceholder: 'Bitte Zugangscode eingeben', + grantAccess: 'Zugang gewähren', + noAccess: 'Noch keinen Zugang?', + contactUs: 'Kontaktieren Sie uns', + accessGranted: 'Zugang gewährt! AccountForger wird geladen...', + wrongCode: 'Falscher Zugangscode. Bitte versuchen Sie es erneut.', + demoRequestAlert: 'Demo-Anfrage-Funktion würde hier implementiert werden', + contactFormSuccess: 'Vielen Dank für Ihre Nachricht! Wir werden uns schnellstmöglich bei Ihnen melden.' + }, + + en: { + // Page meta + pageTitle: 'IntelSight - Security Made in Germany', + + // Navigation + skipNav: 'Skip to main content', + navHome: 'Home', + navAbout: 'About Us', + navProducts: 'Products & Solutions', + navContact: 'Contact', + langSwitch: 'EN | DE', + + // Hero Section + heroTitle: 'SECURITY MADE IN GERMANY', + heroSubtitle: 'Specialist for highly secure, customized IT solutions for government agencies', + + // Trust Indicators + indicatorAvailability: 'Availability', + indicatorTrust: 'Government agencies trust us', + indicatorSupport: 'Support', + + // Scroll Indicator + scrollToExplore: 'Scroll to Explore', + + // About Section + aboutTitle: 'About Us', + aboutSubtitle: 'Your Partner for Secure Government Software', + + // About Tabs + tabWhoWeAre: 'Company', + tabMission: 'Mission & Values', + tabCompetencies: 'Core Competencies', + tabWhyUs: 'Our Promise', + + // Who We Are + whoWeAreTitle: 'Company', + whoWeArePara1: 'IntelSight UG is your specialist for highly secure, customized IT solutions from North Rhine-Westphalia. We develop innovative software specifically for government security and law enforcement agencies.', + whoWeArePara2: 'Our approach combines cutting-edge technology with a deep understanding of the special requirements of government agencies. The balance between security, efficiency and legally compliant implementation is at the center of our work.', + locationBadge: 'North Rhine-Westphalia, Germany', + nrwLabel: 'North Rhine-Westphalia', + headquartersLabel: 'Our Location: Langenfeld', + + // Mission & Values + missionTitle: 'Our Mission', + missionStatement: 'We create efficient, secure and data protection compliant solutions for modern law enforcement and security agencies.', + valueIntegrityTitle: 'Integrity', + valueIntegrityDesc: 'Highest ethical standards in everything we do', + valueTransparencyTitle: 'Transparency', + valueTransparencyDesc: 'Open communication and comprehensible processes', + valueDemocracyTitle: 'Democratic Principles', + valueDemocracyDesc: 'Cooperation only with agencies in accordance with the liberal democratic basic order', + principleNote: 'Our Goal: Technology that strengthens law and security and protects the liberal democratic basic order.', + + // Competencies + competenciesTitle: 'Our Core Competencies', + comp1Title: 'Agency-Specific Software', + comp1Desc: 'Development with highest security standards, tailored for government requirements', + comp2Title: 'Intuitive Operating Concepts', + comp2Desc: 'User-friendly interfaces despite complex functions for efficient work', + comp3Title: 'Long-term Support', + comp3Desc: 'Continuous security updates and reliable maintenance throughout the entire lifecycle', + + // Why Us + whyUsTitle: 'Why IntelSight UG?', + why1Title: 'Close Collaboration', + why1Desc: 'We work hand in hand with our customers for customized solutions', + why2Title: 'Made in Germany', + why2Desc: 'Clear, robust and secure software according to German quality standards', + why3Title: 'Reliable Partnership', + why3Desc: 'Based on shared values and long-term trust', + why4Title: 'Sustainability', + why4Desc: 'Focus on security, professionalism & future-proof solutions', + + // Products Section + productsTitle: 'Products & Solutions', + productsSubtitle: 'Professional Tools for Modern Investigation Work', + + // Professional Toolbox + productToolboxTitle: 'Professional Toolbox', + productToolboxDesc: 'A powerful desktop application with five essential tools for government OSINT investigators and analysts. Modern design, intuitive operation, professional functions.', + expandDetails: 'Show Details', + hideDetails: 'Hide Details', + + // Tools + tool1Title: 'Metadata Analyzer', + tool1Feature1: 'Extracts hidden information (EXIF, GPS, creation dates)', + tool1Feature2: 'Forensic analysis of documents & images', + tool1Feature3: 'Export as JSON', + + tool2Title: 'Screen Recorder', + tool2Feature1: 'Screen recording with audio (system & microphone)', + tool2Feature2: 'Area selection or full screen', + tool2Feature3: 'Selectable quality levels', + + tool3Title: 'Video Crawler', + tool3Feature1: 'Download videos from 1000+ platforms', + tool3Feature2: 'Automatic subtitle download', + tool3Feature3: 'Quality selection', + + tool4Title: 'Website Crawler', + tool4Feature1: 'Archives websites offline', + tool4Feature2: 'Adjustable crawling depth', + tool4Feature3: 'Preserves original structure incl. CSS, JS & media', + + tool5Title: 'Multimedia Converter', + tool5Feature1: 'Conversion of images, videos, audio', + tool5Feature2: 'Batch processing', + tool5Feature3: 'Drag & Drop support', + + // AccountForger + productAccountForgerTitle: 'AccountForger', + accessRestricted: 'Access by authorization only', + protectedProductDesc: 'This product is specifically developed for authorized agencies and requires authentication.', + loginForAccess: 'Login for Access', + + // Footer + footerCompanyTitle: 'IntelSight UG (haftungsbeschränkt)', + footerCompanyAddress1: 'Gladbacher Strasse 3-5', + footerCompanyAddress2: '40764 Langenfeld', + footerNavTitle: 'Navigation', + footerNavHome: 'Home', + footerNavAbout: 'About Us', + footerNavProducts: 'Products', + footerNavContact: 'Contact', + + footerLegalTitle: 'Legal', + footerImprint: 'Imprint', + footerPrivacy: 'Privacy Policy', + footerTerms: 'Terms & Conditions', + + footerContactTitle: 'Contact', + copyright: '© 2025 IntelSight UG (haftungsbeschränkt). All rights reserved.', + + // Modal texts + authRequired: 'Authentication Required', + authDescription: 'This area is only accessible to authorized agencies.', + accessCode: 'Access Code', + accessCodePlaceholder: 'Please enter access code', + grantAccess: 'Grant Access', + noAccess: 'No access yet?', + contactUs: 'Contact Us', + accessGranted: 'Access granted! AccountForger is loading...', + wrongCode: 'Wrong access code. Please try again.', + demoRequestAlert: 'Demo request function would be implemented here', + contactFormSuccess: 'Thank you for your message! We will get back to you as soon as possible.' + } +}; + +// Current language state +let currentLanguage = CONFIG.I18N.DEFAULT_LANGUAGE; + +/** + * Initialize the translation system + */ +function initTranslations() { + // Try to get saved language from localStorage + const savedLanguage = localStorage.getItem(CONFIG.I18N.STORAGE_KEY); + if (savedLanguage && CONFIG.I18N.SUPPORTED_LANGUAGES.includes(savedLanguage)) { + currentLanguage = savedLanguage; + } + + // Apply initial translations + applyTranslations(currentLanguage); +} + +/** + * Switch to a different language + * @param {string} language - Language code ('de' or 'en') + */ +function switchLanguage(language) { + if (!CONFIG.I18N.SUPPORTED_LANGUAGES.includes(language)) { + console.error(`Language '${language}' is not supported`); + return; + } + + currentLanguage = language; + localStorage.setItem(CONFIG.I18N.STORAGE_KEY, language); + applyTranslations(language); +} + +/** + * Apply translations to all elements with data-translate attribute + * @param {string} language - Language code to apply + */ +function applyTranslations(language) { + const t = translations[language]; + + if (!t) { + console.error(`Translations for language '${language}' not found`); + return; + } + + // Update page title + document.title = t.pageTitle; + + // Update HTML lang attribute + document.documentElement.lang = language; + + // Update all translatable elements + document.querySelectorAll(SELECTORS.TRANSLATABLE).forEach(element => { + const key = element.getAttribute(DATA_ATTRS.TRANSLATE); + + if (t[key]) { + // Check if content contains HTML tags + if (t[key].includes('') || t[key].includes('')) { + element.innerHTML = t[key]; + } else { + element.textContent = t[key]; + } + } + }); + + // Update language toggle button + const langToggle = document.querySelector(SELECTORS.LANG_TOGGLE); + if (langToggle) { + langToggle.textContent = t.langSwitch; + langToggle.setAttribute(DATA_ATTRS.LANG, language); + } + + // Update expand button text if it exists + updateExpandButtonText(language); +} + +/** + * Update expand button text based on current state + * @param {string} language - Current language + */ +function updateExpandButtonText(language) { + const expandButton = document.querySelector(SELECTORS.EXPAND_BUTTON); + if (expandButton) { + const expandText = expandButton.querySelector('.expand-text'); + const isExpanded = expandButton.getAttribute(DATA_ATTRS.EXPANDED) === 'true'; + const t = translations[language]; + + if (expandText && t) { + expandText.textContent = isExpanded ? t.hideDetails : t.expandDetails; + } + } +} + +/** + * Get a specific translation string + * @param {string} key - Translation key + * @returns {string} Translated text + */ +function getTranslation(key) { + return translations[currentLanguage][key] || key; +} + +/** + * Get current language + * @returns {string} Current language code + */ +function getCurrentLanguage() { + return currentLanguage; +} \ No newline at end of file