/* 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 */ white-space: nowrap; /* feste Hoehe vertraegt keinen Zeilenumbruch */ 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; /* Fade the video's own bottom edge to transparent so its baked-in red glow cannot leak a line at the bottom — this masks the pixels directly, so it works regardless of overlay/compositing order. */ -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 22%); mask-image: linear-gradient(to top, transparent 0%, #000 22%); } /* 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 20%); 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; padding-bottom: 26px; /* room inside the clip box for the "coming soon" caption below each logo */ 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: flex-start; /* top-align: logos stay on one line even when some carry a "coming soon" below */ 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); } /* Every logo sits on the same line regardless of whether it carries a "coming soon" caption: the item box is exactly logo-height, and the caption is taken out of flow (absolutely positioned below) so it never pushes the logo up. */ .marquee-item { position: relative; display: flex; align-items: flex-start; justify-content: center; } .marquee-soon { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: rgba(255, 255, 255, 0.35); white-space: nowrap; line-height: 1; } /* 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; /* .navbar hat backdrop-filter -> das erzeugt einen Containing Block fuer position:fixed. `top` zaehlt hier also ab der NAVBAR, nicht ab dem Viewport. Das alte calc(var(--ann-h) + 60px) hat die Ankuendigungsleiste dadurch doppelt gerechnet und das Menue 60px zu tief gesetzt. 100% = Hoehe der Navbar -> Menue beginnt exakt an deren Unterkante. */ top: 100%; 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 30px; /* keep room below each logo for the "coming soon" caption (the clip box would otherwise cut it off on mobile) */ } .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; } /* ────────────────────────────────────────────────────────────────────────── Scroll reveal — subtle fade-up for INDIVIDUAL containers + section headings. Scoped to standalone cards/items and heading text only (never whole sections, hero boxes or the super-grid/zig-zag cells), so the layout and the existing per-section animations stay untouched. • Movement uses the independent `translate` property, NOT the `transform` shorthand — so hover transforms and base transforms (e.g. the popular pricing card's `scale(1.06)`) are never touched or overridden. • The hidden start-state applies only while carries `.uf-anim`, which js/components.js adds in BEFORE first paint — and only when reduced-motion is off. No JS / reduced motion ⇒ everything just shows. • js/main.js adds `.uf-in` (via IntersectionObserver) to play the reveal, then `.uf-shown` once it finishes. `.uf-shown` drops every rule below so each element returns to its fully natural styles. ────────────────────────────────────────────────────────────────────────── */ html.uf-anim :is( .bento-card, .link-card, .macro-card, .trans-card, .featured-card, .minimal-card, .blog-card, .faq-item, .stat-box, .premium-offer-card, .w-feature, .crm-zz-card, .pricing-card, .section-title, .section-sub, .section-label, .webapp-title, .webapp-sub, .trans-chart-title, .testi-header, .blog-title ):not(.uf-shown) { transition: opacity .7s cubic-bezier(.22, .61, .36, 1), translate .7s cubic-bezier(.22, .61, .36, 1); will-change: opacity, translate; } html.uf-anim :is( .bento-card, .link-card, .macro-card, .trans-card, .featured-card, .minimal-card, .blog-card, .faq-item, .stat-box, .premium-offer-card, .w-feature, .crm-zz-card, .pricing-card, .section-title, .section-sub, .section-label, .webapp-title, .webapp-sub, .trans-chart-title, .testi-header, .blog-title ):not(.uf-in):not(.uf-shown) { opacity: 0; translate: 0 24px; } html.uf-anim :is( .bento-card, .link-card, .macro-card, .trans-card, .featured-card, .minimal-card, .blog-card, .faq-item, .stat-box, .premium-offer-card, .w-feature, .crm-zz-card, .pricing-card, .section-title, .section-sub, .section-label, .webapp-title, .webapp-sub, .trans-chart-title, .testi-header, .blog-title ).uf-in:not(.uf-shown) { opacity: 1; translate: 0 0; } /* ============================================================================ CO-BRAND BADGE — " × UserFlow" collaboration lockup (hero). Refined glass pill with an animated gradient sheen flowing around the border (the signature touch) — but soft neutral depth instead of a loud coloured halo, and a slim muted "×" glyph between the two logos. Reusable across the platform subpages — set --cb on the element for a per-platform accent. ============================================================================ */ @property --cb-angle { syntax: ""; initial-value: 0deg; inherits: false; } .cobrand { --cb: var(--primary); position: relative; display: inline-flex; align-items: center; gap: 14px; margin-bottom: 26px; padding: 9px 18px; border-radius: 100px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); isolation: isolate; /* Premium = restraint: crisp hairline ring + soft neutral depth, only a whisper of the brand accent — no loud coloured halo. */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 10px 28px -14px rgba(0, 0, 0, 0.7), 0 0 24px -18px color-mix(in srgb, var(--cb) 60%, transparent); } /* animated gradient sheen flowing around the border — the signature touch */ .cobrand::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--cb-angle), transparent 0deg, color-mix(in srgb, var(--cb) 85%, #fff) 45deg, var(--cb) 95deg, transparent 155deg, transparent 205deg, color-mix(in srgb, var(--cb) 85%, #fff) 305deg, var(--cb) 340deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: cbSpin 4.5s linear infinite; pointer-events: none; } @keyframes cbSpin { to { --cb-angle: 360deg; } } .cobrand-logo { display: block; width: auto; } .cobrand-logo--m { height: 20px; } .cobrand-logo--uf { height: 15px; opacity: 0.95; } /* slim "×" collab glyph between the two logos — hairline, muted, no chrome */ .cobrand-x { display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 300; line-height: 1; color: rgba(255, 255, 255, 0.32); transform: translateY(-0.5px); } @media (prefers-reduced-motion: reduce) { .cobrand::before { animation: none; } }