/** * ╔═══════════════════════════════════════════════════════════════════════════════╗ * ║ ENTERPRISE UI FIXES - Globale Design-Verbesserungen ║ * ║ MyInvest24 - Version 1.0 ║ * ╠═══════════════════════════════════════════════════════════════════════════════╣ * ║ Diese Datei enthält: ║ * ║ - Button Text Fixes (weiße Schrift auf dunklen Buttons) ║ * ║ - Premium Dot Pattern Background ║ * ║ - Water Ripple Hover Effects ║ * ║ - Enterprise-Level Micro-Interactions ║ * ╚═══════════════════════════════════════════════════════════════════════════════╝ */ /* ============================================================================= CSS CUSTOM PROPERTIES - Enterprise Design Tokens ============================================================================= */ :root { --mi24-accent: #18181B; --mi24-accent-dark: #09090B; --mi24-accent-light: #3F3F46; --mi24-white: #ffffff; --mi24-dot-color: rgba(0, 0, 0, 0.08); --mi24-dot-size: 2px; --mi24-transition-smooth: cubic-bezier(0.4, 0, 0.2, 1); --mi24-transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ============================================================================= BUTTON FIX - Erzwinge weiße Schrift auf allen dunklen Buttons ============================================================================= */ /* Primary Buttons - ALLE Varianten */ .btn--primary, .btn.btn--primary, a.btn--primary, button.btn--primary, .header__cta, .mobile-nav__cta, [class*="btn--primary"], [class*="cta-btn"], .mi24-standort-btn--primary { color: var(--mi24-white) !important; -webkit-text-fill-color: var(--mi24-white) !important; } .btn--primary:hover, .btn--primary:focus, .btn--primary:active, .btn.btn--primary:hover, a.btn--primary:hover, button.btn--primary:hover, .header__cta:hover, .mobile-nav__cta:hover, [class*="btn--primary"]:hover, .mi24-standort-btn--primary:hover { color: var(--mi24-white) !important; -webkit-text-fill-color: var(--mi24-white) !important; } /* Outline Buttons - dunkle Schrift */ .btn--outline, .btn.btn--outline, a.btn--outline { color: var(--mi24-accent) !important; -webkit-text-fill-color: var(--mi24-accent) !important; } /* ============================================================================= PREMIUM DOT PATTERN - Sichtbares Enterprise Grid ============================================================================= */ /* Globales Dot Pattern für alle Hero Sections */ .hero, .page-hero, [class*="hero"], .section:first-of-type { position: relative; } /* DOT PATTERN - DISABLED: Now managed centrally in ui-improvements.css */ /* .hero::before, .page-hero::before are now controlled by ui-improvements.css */ /* Subtiler Gradient über Pattern */ .hero::after, .page-hero::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 20% 10%, rgba(24, 24, 27, 0.03) 0%, transparent 50%), radial-gradient(ellipse at 80% 90%, rgba(24, 24, 27, 0.05) 0%, transparent 50%); pointer-events: none; z-index: 1; } /* Content über Pattern */ .hero>*, .page-hero>*, .hero .container, .page-hero .container { position: relative; z-index: 2; } /* ============================================================================= PREMIUM HOVER EFFECTS - Water Ripple & Enterprise Interactions ============================================================================= */ /* Ripple Container für Buttons */ .btn, .header__cta, [class*="btn--primary"], [class*="btn--outline"] { position: relative; overflow: hidden; transform: translateZ(0); /* Hardware Acceleration */ } /* Ripple Effect Base */ .btn::before, .header__cta::before, [class*="cta"]::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 var(--mi24-transition-smooth), height 0.6s var(--mi24-transition-smooth), opacity 0.6s var(--mi24-transition-smooth); opacity: 0; z-index: 0; } .btn:hover::before, .header__cta:hover::before, [class*="cta"]:hover::before { width: 300%; height: 300%; opacity: 1; } /* Button Content über Ripple */ .btn>*, .btn span, .btn svg, .header__cta>* { position: relative; z-index: 1; } /* Premium Lift Effect für Buttons */ .btn:hover, .header__cta:hover, [class*="btn--"]:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 30px rgba(24, 24, 27, 0.25), 0 20px 40px rgba(24, 24, 27, 0.15) !important; } .btn:active, .header__cta:active, [class*="btn--"]:active { transform: translateY(-1px) scale(0.99); transition: all 0.1s ease; } /* ============================================================================= CARD HOVER EFFECTS - Enterprise Glassmorphism ============================================================================= */ /* Only target specific card classes - avoid wildcard selectors */ .feature-card, .benefit-card, .trust-box, .stats-card { transition: transform 0.4s var(--mi24-transition-smooth), box-shadow 0.4s var(--mi24-transition-smooth), border-color 0.3s ease; } .feature-card:hover, .benefit-card:hover, .trust-box:hover, .stats-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important; } /* ============================================================================= LINK HOVER EFFECTS - Animated Underline ============================================================================= */ /* Navigation Links */ .header__link, .footer__links a, a[class*="link"] { position: relative; } .header__link::after, .footer__links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, #18181B, #3F3F46); transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--mi24-transition-smooth); } .header__link:hover::after, .footer__links a:hover::after { transform: scaleX(1); transform-origin: left; } /* ============================================================================= SCROLL REVEAL ANIMATIONS ============================================================================= */ /* Fade-in Animation für Sections */ @keyframes mi24-fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Animation Class - kann per JS hinzugefügt werden */ .mi24-animate-in { animation: mi24-fadeInUp 0.8s var(--mi24-transition-smooth) forwards; } /* ============================================================================= GLASSMORPHISM HEADER ============================================================================= */ .header.scrolled { background: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; } /* ============================================================================= ACCESSIBILITY - Fokus-States ============================================================================= */ .btn:focus-visible, .header__cta:focus-visible, a:focus-visible { outline: 2px solid #18181B; outline-offset: 3px; } /* ============================================================================= LOADING SHIMMER EFFECT (für async Content) ============================================================================= */ @keyframes mi24-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .mi24-loading { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: mi24-shimmer 1.5s infinite; } /* ============================================================================= SMOOTH PAGE TRANSITIONS ============================================================================= */ /* Smooth fade for page content */ main, .main-content, #main { animation: mi24-fadeInUp 0.5s ease-out; }