/* Inter is self-hosted via css/fonts.css (GDPR-friendly, no external request). */ :root { --primary: #E62A10; /* A deep, rich red matching the logo */ --primary-hover: #C5200A; --bg-texture: none; --card: rgba(255, 255, 255, 0.03); /* Subtle dark gray for cards */ --border: rgba(255, 255, 255, 0.08); /* Soft white border */ --ann-h: 40px; /* height of the beta announcement bar above the navbar */ } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body, html { width: 100%; font-family: 'Inter', -apple-system, sans-serif; color: #ffffff; overflow-x: clip; background-color: #050505; /* Deep dark background */ } /* Push all content down by the announcement-bar height (navbar is fixed below the bar). !important overrides the inline `padding:0` on the tags. */ body { padding-top: var(--ann-h) !important; } /* ── Keyboard focus visibility (a11y) ── A clear red focus ring for keyboard/AT users only; never shown on mouse click. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible, .tab-btn:focus-visible, .btn-plan:focus-visible, .lang-switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; } :focus:not(:focus-visible) { outline: none; } /* ── Container System ── */ .container { width: 100%; max-width: 1400px; /* Made wider from 1200px */ margin: 0 auto; padding: 0 24px; } /* ── Premium High-Converting Button Design ── */ .btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; /* Slightly taller for max clickability */ box-sizing: border-box; background: linear-gradient(180deg, #F94D35 0%, #E62A10 100%); color: #fff; padding: 0 36px; border-radius: 14px; text-decoration: none; font-size: 17px; font-weight: 700; border: 1px solid #C5200A; border-top-color: #FF705C; /* Deep layered 3D shadow & inner glow */ box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.45), inset 0px -2px 1px rgba(0, 0, 0, 0.15); text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; cursor: pointer; } /* Glass shine effect sweeping across */ .btn::after { content: ""; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); transform: skewX(-20deg); transition: left 0.6s ease; } .btn:hover { background: linear-gradient(180deg, #FF6048 0%, #D8240D 100%); transform: translateY(-3px); box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.5), inset 0px -2px 1px rgba(0, 0, 0, 0.2); } .btn:hover::after { left: 150%; } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; height: 52px; /* Sync height perfectly */ box-sizing: border-box; background: transparent; color: rgba(255, 255, 255, 0.85); padding: 0 24px; border-radius: 14px; text-decoration: none; font-size: 16px; font-weight: 600; border: 1px solid rgba(255, 255, 255, 0.15); cursor: pointer; transition: all 0.2s ease; } .btn-ghost:hover { background-color: rgba(255, 255, 255, 0.05); color: #fff; border-color: rgba(255, 255, 255, 0.4); } /* ── Navbar ── */ .navbar { padding: 12px 0; position: fixed; top: var(--ann-h); /* sits directly below the announcement bar */ width: 100%; z-index: 1000; background: rgba(10, 10, 10, 0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 255, 255, 0.05); transition: all 0.3s ease; } /* ── Beta announcement bar (above the navbar, site-wide) ── */ .announce-bar { position: fixed; top: 0; left: 0; right: 0; height: var(--ann-h); z-index: 1001; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 0 16px; background: linear-gradient(90deg, #E62A10 0%, #C5200A 100%); border-bottom: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 6px 20px rgba(230, 42, 16, 0.25); overflow: hidden; } .announce-text { margin: 0; font-size: 13.5px; font-weight: 500; color: #fff; letter-spacing: 0.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .announce-text strong { font-weight: 800; } .announce-cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; background: #fff; color: #C5200A; font-size: 12.5px; font-weight: 800; border-radius: 100px; text-decoration: none; white-space: nowrap; transition: transform 0.2s ease, box-shadow 0.2s ease; } .announce-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); } @media (max-width: 768px) { :root { --ann-h: 60px; } .announce-bar { gap: 10px; padding: 6px 12px; justify-content: space-between; } .announce-extra { display: none; } /* hide the "just sign up…" tail on phones */ .announce-text { white-space: normal; font-size: 11px; line-height: 1.3; text-align: left; } .announce-cta { display: inline-flex; padding: 6px 13px; font-size: 11px; } /* keep the CTA visible on phones */ } .nav-container { max-width: 1400px; /* Wider layout */ margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .brand { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 700; color: #fff; text-decoration: none; letter-spacing: -0.03em; } .brand-logo-img { height: 28px; /* Reduced logo size */ width: auto; display: block; } /* ── Navigation Dropdowns ── */ .nav-links { display: flex; gap: 4px; /* Tighter gap */ align-items: center; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); padding: 6px; border-radius: 100px; } .nav-item { position: relative; } .nav-link { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.7); text-decoration: none; font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: 100px; transition: all 0.2s; } .nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.08); } .nav-link.active { color: #fff; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } .nav-icon { width: 16px; height: 16px; stroke-width: 2.5; opacity: 0.8; color: var(--primary); /* Makes the icons pop matching the branding */ } .nav-item:hover .nav-link { color: #fff; } .nav-item.has-dropdown::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 20px; /* Invisible hover bridge */ } .dropdown-menu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(10px); min-width: 200px; background: #111; /* removed shine */ border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 8px; opacity: 0; visibility: hidden; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05); z-index: 100; } .nav-item.has-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .dropdown-menu a { display: block; padding: 10px 16px; color: rgba(255, 255, 255, 0.6); text-decoration: none; font-size: 14px; font-weight: 500; border-radius: 6px; transition: all 0.2s; } .dropdown-menu a:hover { color: #fff; background: rgba(255, 255, 255, 0.05); padding-left: 20px; /* Subtle indent effect */ } .nav-actions { display: flex; align-items: center; gap: 16px; } .nav-actions-mobile { display: none; } .hamburger { display: none; } /* ── Hero Content ── */ .hero { position: relative; width: 100%; height: calc(100vh - 100px); /* Strictly below the navbar */ display: flex; align-items: center; z-index: 10; overflow: hidden; /* Prevent video from escaping the hero section */ } .hero-container { display: flex; align-items: center; justify-content: flex-start; z-index: 2; /* Text stays above video */ } .hero-text-box { max-width: 850px; /* Wider so the 3-line headline has space */ } /* ── Right-Side Embedded Video ── */ .video-background { position: absolute; top: 50%; transform: translateY(-50%); right: -5%; /* Slight push off-screen to avoid harsh right edges */ width: 55%; height: 85%; /* Gives breathing room top and bottom */ z-index: -1; /* Behind the text */ border-radius: 24px; overflow: hidden; } .video-background video { width: 100%; height: 100%; object-fit: cover; opacity: 1; } /* Perfect fading borders around the video to embed it smoothly */ .video-background::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to right, #050505 0%, transparent 35%), linear-gradient(to bottom, #050505 0%, transparent 15%), linear-gradient(to top, #050505 0%, transparent 15%); pointer-events: none; } /* ── Typography & Elements ── */ .trust-badge { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; } .avatars { display: flex; } .avatars img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #050505; margin-left: -12px; object-fit: cover; } .avatars img:first-child { margin-left: 0; } .brand-avatar-wrap { display: flex; align-items: center; justify-content: center; } .brand-app-icon { width: 36px; height: 36px; object-fit: contain; } .trust-text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.7); } .svg-stars { display: flex; gap: 2px; } .hero-title { font-size: clamp(40px, 4.5vw, 64px); font-weight: 700; /* Reduced from 900 to make it less thick */ line-height: 1.1; letter-spacing: -0.04em; margin-bottom: 24px; } .text-gradient { /* Solid primary red — no gradient */ background: none; color: var(--primary); -webkit-text-fill-color: var(--primary); } .hero-sub { font-size: 18px; font-weight: 500; color: rgba(255, 255, 255, 0.8); line-height: 1.6; margin-bottom: 40px; max-width: 600px; } /* --- Hero Logo Marquee --- */ .hero-logo-marquee { position: absolute; bottom: 20px; /* Positioned closer to the bottom to increase space above and decrease space below */ left: 50%; transform: translateX(-50%); width: 1300px; max-width: 90%; overflow: hidden; z-index: 3; -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); } .marquee-track { display: flex; width: max-content; animation: scrollMarquee 25s linear infinite; } @keyframes scrollMarquee { 0% { transform: translateX(-50%); } 100% { transform: translateX(0%); } } .marquee-group { display: flex; align-items: center; justify-content: space-around; width: 1300px; gap: 40px; padding: 0 20px; } .marquee-group img { height: 35px; max-width: 180px; object-fit: contain; filter: grayscale(100%) opacity(0.3); transition: all 0.3s ease; } .marquee-group img:hover { filter: grayscale(0%) opacity(0.8); } /* Short viewports (tablet landscape, small laptops) keep the desktop horizontal hero, but let it grow vertically so tall hero content (e.g. the Translator "Unterstützte Plattformen" banner) never clips the trust badge at the top nor collides with the absolutely-positioned logo marquee at the bottom. */ @media (min-width: 901px) and (max-height: 860px) { .hero { height: auto; min-height: calc(100vh - 100px); padding-top: 100px; padding-bottom: 90px; } } @media (max-width: 900px) { /* Hamburger button styling */ .hamburger { display: flex; flex-direction: column; justify-content: space-between; width: 24px; height: 18px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1010; } .hamburger-line { width: 100%; height: 2px; background-color: #fff; transition: all 0.3s ease; border-radius: 2px; } /* Hamburger active state (animating to X) */ .hamburger.is-active .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); } .hamburger.is-active .hamburger-line:nth-child(2) { opacity: 0; } .hamburger.is-active .hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Make nav-links a vertical slide-down menu */ .nav-links { display: none; /* overrides default flex */ position: fixed; top: calc(var(--ann-h) + 60px); /* below the announcement bar + navbar */ left: 0; width: 100%; height: calc(100vh - var(--ann-h) - 60px); background: rgba(10, 10, 10, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); flex-direction: column; padding: 30px 24px; gap: 12px; border-radius: 0; border: none; border-top: 1px solid rgba(255, 255, 255, 0.05); align-items: flex-start; overflow-y: auto; z-index: 1000; } .nav-links.is-active { display: flex; } .nav-item { width: 100%; position: relative; } .nav-link { width: 100%; font-size: 16px; padding: 14px 20px; box-sizing: border-box; display: flex; justify-content: flex-start; border-radius: 12px; } /* Dropdowns inside mobile nav - Hidden for mobile direct links */ .dropdown-menu { display: none !important; } .nav-actions { display: none; /* Hide desktop action buttons */ } /* Show actions inside nav-links on mobile — clean aligned row: round flag + CTA filling the rest */ .nav-links .nav-actions-mobile { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.05); } .nav-links .nav-actions-mobile .lang-switch { flex-shrink: 0; width: 48px; height: 48px; margin: 0; } .nav-links .nav-actions-mobile .btn { flex: 1; width: auto; text-align: center; justify-content: center; } /* Video Background mobile spacing & layout */ .video-background { display: block !important; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; transform: none; border-radius: 0; z-index: -1; } .video-background video { width: 100%; height: 100%; object-fit: cover; opacity: 0.35 !important; /* Made more visible so it's clearly recognizable in the background */ } .video-background::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(5, 5, 5, 0.65) 0%, rgba(5, 5, 5, 0.85) 60%, #050505 100%) !important; /* Stronger dark overlay to keep text contrast high */ pointer-events: none; z-index: 1; } /* Hero adjustments */ .hero { display: flex; flex-direction: column; align-items: center; height: auto; min-height: auto; padding-top: 120px; padding-bottom: 25px; background: radial-gradient(circle at top center, rgba(249, 77, 53, 0.12) 0%, rgba(5, 5, 5, 0) 70%); /* Premium SaaS style radial glow background */ } .hero-container { justify-content: center; text-align: center; display: flex; flex-direction: column; padding: 0 20px; } .hero-text-box { max-width: 100%; display: flex; flex-direction: column; align-items: center; } .trust-badge { justify-content: center; margin-bottom: 24px; } .hero-title { font-size: clamp(36px, 8vw, 50px) !important; line-height: 1.15 !important; margin-bottom: 20px !important; } .hero-sub { font-size: 16px; max-width: 90%; margin-bottom: 30px; line-height: 1.5; } .btn-group { display: flex; justify-content: center; width: 100%; margin-bottom: 10px; } .btn-group .btn { width: 100%; max-width: 340px; font-size: 15px !important; padding: 0 20px !important; white-space: nowrap !important; } .partner-logos { justify-content: center; } /* Reset absolute logo marquee positioning so it flows naturally under the content */ .hero-logo-marquee { position: relative; bottom: auto; left: auto; transform: none; margin-top: 40px !important; width: 100%; max-width: 100%; padding: 10px 0; } .marquee-track { animation-duration: 15s; } .marquee-group { gap: 60px; /* Increased from 20px so logos are not too close to each other on mobile */ width: auto; } .marquee-group img { height: 24px; } /* Hide desktop line breaks */ .desktop-only { display: none !important; } } @media (max-width: 480px) { .hero-title { font-size: 32px !important; line-height: 1.15 !important; } .hero-sub { font-size: 14px; } } /* ── Respect the OS "reduce motion" setting (accessibility) ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* These images are normally revealed by a looping animation – keep them permanently visible so nothing disappears when motion is reduced. */ .p-app-img, .ph-app-img { animation: none !important; opacity: 1 !important; } } /* ── Language switcher (DE ⇄ EN) ── */ .lang-switch { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin-right: 10px; border-radius: 50%; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.04); cursor: pointer; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .lang-switch:hover { transform: scale(1.08); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(249, 77, 53, 0.15); } .lang-switch .flag { display: none; /* JS shows the target language's flag */ width: 24px; height: 24px; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); } .lang-switch .flag svg { display: block; width: 100%; height: 100%; } .nav-actions-mobile .lang-switch { margin-right: 0; margin-bottom: 12px; }