/* Mobile-friendly Dark Mode Toggle - Touch optimized */ .mobile-theme-toggle-wrapper { position: fixed; top: 14px; right: 12px; z-index: 9999; display: flex; align-items: center; gap: 8px; -webkit-tap-highlight-color: transparent; } .mobile-theme-toggle { width: 50px; height: 50px; min-width: 50px; min-height: 50px; border-radius: 999px; background: #ffffff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border: 2px solid rgba(0,0,0,0.06); transition: transform 200ms cubic-bezier(.2,.8,.2,1), background 200ms ease, color 200ms ease; touch-action: manipulation; -webkit-user-select: none; user-select: none; } .mobile-theme-toggle:active { transform: scale(0.96); } .mobile-theme-toggle:focus { outline: none; box-shadow: 0 0 0 4px rgba(66,153,225,0.18); } .mobile-theme-toggle .toggle-icon { font-size: 22px; line-height: 1; transition: transform 300ms ease, opacity 200ms ease; will-change: transform, opacity; } /* Dark mode styles (simple, lightweight, mobile-optimized) Applying `.dark-mode` to the or reduces bright areas and switches key components to darker backgrounds to save OLED power. */ .dark-mode, .dark-mode body, .dark-mode .container-fluid { background: #071022 !important; color: #ffffff !important; } .dark-mode .service-card, .dark-mode .post-type-card, .dark-mode .tab-navigation { background: #0b1220 !important; color: #ffffff !important; border-color: rgba(255,255,255,0.04) !important; box-shadow: none !important; } .dark-mode .badge-modern { background: rgba(255,255,255,0.03); color: #ffffff; } /* Respect reduced motion preferences */ @media (prefers-reduced-motion: reduce) { .mobile-theme-toggle, .hero-section::before, .hero-section::after, .floating-cloud, .floating-particle, .floating-animation { animation-duration: 1ms !important; transition-duration: 1ms !important; } } /* Slight reposition for larger devices */ @media (min-width: 768px) { .mobile-theme-toggle-wrapper { top: 18px; right: 18px; } }