/* ═══════════════════════════════════════════════════════ TechCare Services GmbH – Custom Stylesheet Farben: Navy #00426A (brand) · Gelb #FBE91B (accent) Light Mode Standard · Dark Mode via .dark auf ═══════════════════════════════════════════════════════ */ /* ─── Base ──────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 76px; } body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ─── Scrollbar ─────────────────────────────────────── */ ::-webkit-scrollbar { width: 7px; } ::-webkit-scrollbar-track { background: #f0f4f7; } ::-webkit-scrollbar-thumb { background: #b3cede; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #00426A; } .dark ::-webkit-scrollbar-track { background: #0a1628; } .dark ::-webkit-scrollbar-thumb { background: #1e4d72; } .dark ::-webkit-scrollbar-thumb:hover { background: #00426A; } /* ─── Gradient Text (Navy → Gelb) ───────────────────── */ .gradient-text { background: linear-gradient(130deg, #00426A 0%, #2a6ea0 50%, #FBE91B 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ─── Slogan / we create connection ────────────────── */ .slogan-text { background: linear-gradient(90deg, #00426A 0%, #1e6a9e 60%, #FBE91B 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: 0.12em; } .dark .slogan-text { background: linear-gradient(90deg, #7eb8d8 0%, #a8d4e8 60%, #FBE91B 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ─── Hero grid pattern ─────────────────────────────── */ .hero-grid-pattern { background-image: linear-gradient(to right, rgba(0,66,106,0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,66,106,0.04) 1px, transparent 1px); background-size: 44px 44px; } .dark .hero-grid-pattern { background-image: linear-gradient(to right, rgba(0,66,106,0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,66,106,0.1) 1px, transparent 1px); } /* ─── Blob animations ───────────────────────────────── */ .blob { animation: morphBlob 11s ease-in-out infinite; } .blob-1 { animation-delay: 0s; } .blob-2 { animation-delay: -4s; } .blob-3 { animation-delay: -8s; } @keyframes morphBlob { 0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: scale(1); } 33% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: scale(1.04); } 66% { border-radius: 50% 60% 30% 40% / 40% 50% 60% 50%; transform: scale(0.97); } } /* ─── Float animation ───────────────────────────────── */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .animate-float { animation: float 5s ease-in-out infinite; } /* ─── Floating hero badges ──────────────────────────── */ .float-badge { animation: float 6s ease-in-out infinite; } .float-badge-2 { animation: float 7s ease-in-out infinite; animation-delay: -3.5s; } /* ─── Navbar scroll state ───────────────────────────── */ #navbar.scrolled .navbar-inner { background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(28px) saturate(200%); -webkit-backdrop-filter: blur(28px) saturate(200%); border-color: rgba(255, 255, 255, 0.6); box-shadow: 0 2px 32px rgba(0, 66, 106, 0.08), 0 1px 0 rgba(255,255,255,0.7) inset; } .dark #navbar.scrolled .navbar-inner { background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border-color: rgba(255, 255, 255, 0.07); box-shadow: 0 2px 32px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255,255,255,0.04) inset; } /* ─── Active nav link ───────────────────────────────── */ .nav-link.active { color: #00426A; background-color: #e6eef4; } .dark .nav-link.active { color: #7eb8d8; background-color: rgba(0, 66, 106, 0.2); } /* ─── Mobile menu animation ─────────────────────────── */ #mobileMenu { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; } #mobileMenu.open { max-height: 480px; opacity: 1; } #mobileMenu.hidden { display: block !important; max-height: 0; opacity: 0; } /* ─── Logo – white version in dark contexts ─────────── */ /* Used in footer and contact card (dark blue bg) */ .logo-white { filter: brightness(0) invert(1); } /* In dark mode the main navbar logo: .st0 (navy) → white / .st1 (yellow) stays yellow */ .dark #site-logo .st0 { fill: #e2e8f0; } /* Yellow accent stays in dark mode */ .dark #site-logo .st1 { fill: #FBE91B; } /* ─── Form inputs ───────────────────────────────────── */ .form-input { transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s; } .form-input:focus { box-shadow: 0 0 0 3px rgba(0, 66, 106, 0.12); } .dark .form-input:focus { box-shadow: 0 0 0 3px rgba(0, 66, 106, 0.25); } /* ─── Scroll reveal ─────────────────────────────────── */ .reveal-up, .reveal-left, .reveal-right { opacity: 0; transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .reveal-up { transform: translateY(40px); } .reveal-left { transform: translateX(-40px); } .reveal-right { transform: translateX(40px); } .reveal-up.is-visible, .reveal-left.is-visible, .reveal-right.is-visible { opacity: 1; transform: none; } /* ─── Service cards ─────────────────────────────────── */ .service-card { position: relative; overflow: hidden; } .service-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,66,106,0) 0%, rgba(0,66,106,0.025) 100%); opacity: 0; transition: opacity 0.3s ease; } .service-card:hover::before { opacity: 1; } /* ─── Job card left-border reveal ───────────────────── */ .job-card { position: relative; overflow: hidden; } .job-card::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(to bottom, #00426A, #FBE91B); transform: scaleY(0); transform-origin: top; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .job-card:hover::after { transform: scaleY(1); } /* ─── Scroll-to-top button ──────────────────────────── */ .scroll-top-btn { display: none; opacity: 0; transition: opacity 0.3s ease, transform 0.2s ease; } .scroll-top-btn.visible { display: flex !important; opacity: 1; } /* ─── Focus styles ──────────────────────────────────── */ :focus-visible { outline: 2px solid #00426A; outline-offset: 2px; border-radius: 4px; } /* ─── Selection ─────────────────────────────────────── */ ::selection { background: #c0d4e3; color: #00426A; } .dark ::selection { background: #00426A; color: #e0f0f8; } /* ─── Hero Flow Animation ──────────────────────────── */ @keyframes hero-flow-h { 0% { left: 2px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 9px); opacity: 0; } } @keyframes hero-flow-h-rev { 0% { left: calc(100% - 9px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 2px; opacity: 0; } } @keyframes hero-flow-v { 0% { top: 2px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 9px); opacity: 0; } } .hero-dot-h, .hero-dot-h-rev, .hero-dot-v { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #FBE91B; box-shadow: 0 0 8px rgba(251,233,27,0.5); } .hero-dot-h { top: -3.5px; animation: hero-flow-h 2.2s ease-in-out infinite; } .hero-dot-h-rev { top: -3.5px; animation: hero-flow-h-rev 2.2s ease-in-out infinite; } .hero-dot-v { left: -3.5px; animation: hero-flow-v 1.4s ease-in-out infinite; } #heroPhaseText { transition: opacity 0.2s ease; } /* ─── Plus-node pulse ──────────────────────────────── */ .hero-plus-node { animation: heroPlusPulse 2.5s ease-in-out infinite; } @keyframes heroPlusPulse { 0%, 100% { border-color: rgba(0,66,106,0.2); transform: scale(1); } 50% { border-color: rgba(0,66,106,0.5); transform: scale(1.08); } } .dark .hero-plus-node { animation-name: heroPlusPulseDark; } @keyframes heroPlusPulseDark { 0%, 100% { border-color: rgba(102,170,188,0.25); transform: scale(1); } 50% { border-color: rgba(102,170,188,0.55); transform: scale(1.08); } } /* ─── Reduced motion ────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .blob, .animate-float, .float-badge, .float-badge-2, .reveal-up, .reveal-left, .reveal-right { animation: none !important; transition: opacity 0.01s !important; opacity: 1 !important; transform: none !important; } } /* ─── Print ─────────────────────────────────────────── */ @media print { #navbar, #scrollTop, .blob { display: none !important; } body { background: white !important; color: #111 !important; } }