/* Minimal custom CSS on top of Tailwind */ :root { color-scheme: light; } html { scroll-behavior: smooth; } /* Glass + soft border */ .glass { background: rgba(255,255,255,.75); backdrop-filter: blur(10px); border: 1px solid rgba(15, 23, 42, .08); } /* Subtle grid background */ .bg-grid { background-image: linear-gradient(to right, rgba(15, 23, 42, .06) 1px, transparent 1px), linear-gradient(to bottom, rgba(15, 23, 42, .06) 1px, transparent 1px); background-size: 42px 42px; } /* Dark mode support (toggled with .dark on ) */ .dark body { background: #0b1220; color: #e5e7eb; } .dark .glass { background: rgba(17,24,39,.55); border-color: rgba(148,163,184,.16); } .dark .card { background: rgba(17,24,39,.55); border-color: rgba(148,163,184,.16); color: #e5e7eb; } .dark .muted { color: rgba(229,231,235,.75); } .dark .border-soft { border-color: rgba(148,163,184,.16); } .dark h1, .dark h2, .dark h3, .dark .font-extrabold, .dark .font-bold, .dark .font-semibold { color: #fff; } .dark p { color: #e5e7eb; } .dark .text-gray-900 { color: #e5e7eb !important; } .dark .text-gray-600 { color: rgba(229,231,235,.75) !important; } .dark .text-gray-800 { color: #e5e7eb !important; } .dark .text-gray-500 { color: #9ca3af !important; } .dark .bg-gray-200 { background: rgba(17,24,39,.75) !important; } .dark .bg-gray-50 { background: #0b1220 !important; } .dark .bg-white { background: #111827 !important; } /* Dark mode - Section backgrounds */ .dark .from-blue-50 { --tw-gradient-from: #1e293b !important; } .dark .from-green-50 { --tw-gradient-from: #1e293b !important; } .dark .from-purple-50 { --tw-gradient-from: #1e293b !important; } .dark .to-white { --tw-gradient-to: #111827 !important; } .dark .bg-gradient-to-b { background: linear-gradient(to bottom, #1e293b, #111827) !important; } /* Dark mode - Colored accent boxes */ .dark .bg-blue-50 { background: rgba(30, 64, 175, 0.25) !important; } .dark .bg-indigo-50 { background: rgba(67, 56, 202, 0.25) !important; } .dark .bg-green-50 { background: rgba(22, 101, 52, 0.25) !important; } .dark .bg-purple-50 { background: rgba(107, 33, 168, 0.25) !important; } .dark .bg-purple-100 { background: rgba(107, 33, 168, 0.35) !important; } /* Dark mode - Borders */ .dark .border-gray-100 { border-color: #374151 !important; } .dark .border-gray-200 { border-color: #374151 !important; } .dark .border-blue-100 { border-color: rgba(59, 130, 246, 0.3) !important; } .dark .border-indigo-100 { border-color: rgba(99, 102, 241, 0.3) !important; } .dark .border-green-100 { border-color: rgba(34, 197, 94, 0.3) !important; } .dark .border-purple-100 { border-color: rgba(168, 85, 247, 0.3) !important; } .dark .border-purple-200 { border-color: rgba(168, 85, 247, 0.4) !important; } /* Dark mode - Text colors */ .dark .text-purple-700 { color: #c4b5fd !important; } .dark .text-blue-600 { color: #60a5fa !important; } .dark .text-indigo-600 { color: #818cf8 !important; } .dark .text-green-600 { color: #4ade80 !important; } .dark .text-purple-600 { color: #c084fc !important; } /* Dark mode - Inline dark: classes support */ html.dark .dark\:text-white, .dark .dark\:text-white { color: #fff !important; } html.dark .dark\:text-gray-300, .dark .dark\:text-gray-300 { color: #d1d5db !important; } html.dark .dark\:text-gray-400, .dark .dark\:text-gray-400 { color: #9ca3af !important; } html.dark .dark\:bg-gray-800, .dark .dark\:bg-gray-800 { background: #1f2937 !important; } html.dark .dark\:bg-gray-900, .dark .dark\:bg-gray-900 { background: #111827 !important; } /* Extra dark mode classes for process.html backgrounds */ html.dark [class*="from-blue-50"], html.dark [class*="from-green-50"], html.dark [class*="from-purple-50"], .dark [class*="from-blue-50"], .dark [class*="from-green-50"], .dark [class*="from-purple-50"] { --tw-gradient-from: #1e293b !important; } html.dark [class*="to-white"], .dark [class*="to-white"] { --tw-gradient-to: #111827 !important; } /* Dark mode - Blur backgrounds in hero */ .dark .bg-blue-200 { background: rgba(59, 130, 246, 0.2) !important; } .dark .bg-indigo-200 { background: rgba(99, 102, 241, 0.2) !important; } /* Dark mode - Grid background */ .dark .bg-grid { background-image: linear-gradient(to right, rgba(148, 163, 184, .08) 1px, transparent 1px), linear-gradient(to bottom, rgba(148, 163, 184, .08) 1px, transparent 1px); } /* Card base */ .card { border: 1px solid rgba(15, 23, 42, .08); border-radius: 1rem; background: #fff; } /* Simple “shine” hover */ .shine:hover { transform: translateY(-2px); box-shadow: 0 18px 45px rgba(2, 6, 23, .10); } /* Reduce motion */ @media (prefers-reduced-motion: reduce) { .animate-pulse, .transition, .shine:hover { animation: none !important; transition: none !important; transform: none !important; } } /* ===== MOBILE OPTIMIZATIONS ===== */ /* Improve tap targets on mobile */ @media (max-width: 768px) { /* Larger touch targets */ button, a, input, textarea, select { min-height: 44px; } /* Better mobile header */ header .max-w-6xl { padding-left: 1rem; padding-right: 1rem; } /* Mobile menu styling */ #mobileMenu a, #mobileMenu button { padding: 0.875rem 0; font-size: 1rem; border-bottom: 1px solid rgba(15, 23, 42, .08); } #mobileMenu a:last-of-type { border-bottom: none; } .dark #mobileMenu a, .dark #mobileMenu button { border-bottom-color: rgba(148, 163, 184, .16); } /* Better spacing for mobile content */ main { padding-top: 2rem; padding-bottom: 2rem; } /* Fix hero text on mobile */ h1 { font-size: 1.875rem; line-height: 1.2; } /* Cards stack better on mobile */ .card { padding: 1.25rem; } /* Form inputs more touch-friendly */ input, textarea, select { font-size: 16px !important; /* Prevents iOS zoom on focus */ padding: 1rem; } /* Footer mobile styling */ footer .max-w-6xl { flex-direction: column; text-align: center; gap: 1rem; } footer .flex.items-center.gap-3 { flex-direction: column; text-align: center; } } /* Extra small devices */ @media (max-width: 375px) { h1 { font-size: 1.5rem; } .text-4xl { font-size: 1.5rem; } .text-3xl { font-size: 1.25rem; } } /* Hamburger menu animation */ .menu-btn { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 44px; height: 44px; cursor: pointer; } .menu-btn span { display: block; width: 24px; height: 2px; background: currentColor; transition: all 0.3s ease; margin: 3px 0; } .menu-btn.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .menu-btn.active span:nth-child(2) { opacity: 0; } .menu-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* Safe area insets for modern phones */ @supports (padding: env(safe-area-inset-bottom)) { footer { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); } .fixed.bottom-0 { padding-bottom: env(safe-area-inset-bottom); } } /* Hide scrollbar but allow scrolling */ .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hide::-webkit-scrollbar { display: none; } /* Smooth scrolling for horizontal scroll areas */ .overflow-x-auto { -webkit-overflow-scrolling: touch; }