/* Minimal stylesheet. The UI is primarily Tailwind-based; this file exists to avoid 404s and to provide small site-wide tweaks without inline styles. */ html, body { height: 100%; } /* Tailwind fallback helpers If the Tailwind CDN fails to load (blocked/offline), critical layout classes like `hidden` should still work so mobile/desktop UI doesn't break. */ .hidden { display: none !important; } @media (min-width: 768px) { .md\:hidden { display: none !important; } .md\:flex { display: flex !important; } } /* Explicit responsive helpers (do not rely on Tailwind at all) */ .desktop-only { display: none !important; } .mobile-only { display: inline-flex !important; } @media (min-width: 768px) { .desktop-only { display: flex !important; } .mobile-only { display: none !important; } } /* Theme support Tailwind is loaded via CDN and most markup uses fixed utility classes (bg-white, text-gray-900, etc). We implement dark mode by toggling the `dark` class on and overriding a small set of common utilities to keep the existing markup readable without a full rewrite. (color-scheme omitted to avoid conflicts with ad content.) */ html.dark body { background: #0b1220 !important; } /* Common surface + text utilities */ html.dark .bg-white { background-color: #0f172a !important; } /* slate-900-ish */ html.dark .bg-gray-50 { background-color: #0b1220 !important; } html.dark .bg-gray-900 { background-color: #020617 !important; } /* slate-950 */ html.dark .text-gray-900 { color: #f8fafc !important; } /* slate-50 */ html.dark .text-gray-800 { color: #e2e8f0 !important; } /* slate-200 */ html.dark .text-gray-700 { color: #cbd5e1 !important; } /* slate-300 */ html.dark .text-gray-600 { color: #94a3b8 !important; } /* slate-400 */ html.dark .text-gray-500 { color: #64748b !important; } /* slate-500 */ html.dark .text-gray-400 { color: #94a3b8 !important; } html.dark .text-gray-300 { color: #cbd5e1 !important; } html.dark .border-gray-200 { border-color: rgba(148, 163, 184, 0.25) !important; } html.dark .border-gray-300 { border-color: rgba(148, 163, 184, 0.35) !important; } /* Soft colored cards (features) */ html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.12) !important; } html.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.12) !important; } html.dark .bg-purple-50 { background-color: rgba(168, 85, 247, 0.12) !important; } html.dark .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.12) !important; } html.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.12) !important; } html.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.12) !important; } html.dark .border-blue-200, html.dark .border-green-200, html.dark .border-purple-200, html.dark .border-yellow-200, html.dark .border-red-200, html.dark .border-indigo-200 { border-color: rgba(148, 163, 184, 0.22) !important; } /* Links */ html.dark a.text-blue-600 { color: #93c5fd !important; } /* blue-300 */ html.dark a.hover\:text-blue-600:hover { color: #bfdbfe !important; } /* blue-200 */ /* Inputs */ html.dark input, html.dark textarea, html.dark select { background-color: rgba(15, 23, 42, 0.75) !important; color: #e2e8f0 !important; border-color: rgba(148, 163, 184, 0.35) !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: rgba(148, 163, 184, 0.8) !important; } /* Theme toggle button (small helper; keeps consistent appearance) */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 0.75rem; border: 1px solid rgba(148, 163, 184, 0.35); padding: 0.5rem 0.75rem; font-weight: 600; font-size: 0.875rem; line-height: 1.25rem; background: rgba(255, 255, 255, 0.7); color: #334155; backdrop-filter: blur(6px); } html.dark .theme-toggle-btn { background: rgba(15, 23, 42, 0.6); color: #e2e8f0; border-color: rgba(148, 163, 184, 0.25); } /* Hero section - dark mode */ html.dark .hero-icon-wrap { background-color: rgba(59, 130, 246, 0.2) !important; } html.dark .hero-icon { color: #93c5fd !important; } html.dark .hero-badge.bg-green-100 { background-color: rgba(34, 197, 94, 0.2) !important; color: #86efac !important; } html.dark .hero-badge.bg-blue-100 { background-color: rgba(59, 130, 246, 0.2) !important; color: #93c5fd !important; } html.dark .hero-badge.bg-indigo-100 { background-color: rgba(99, 102, 241, 0.2) !important; color: #a5b4fc !important; } html.dark .hero-cta:hover { color: #bfdbfe !important; } /* Improve focus visibility for keyboard users */ :focus-visible { outline: 2px solid rgba(59, 130, 246, 0.9); /* blue-500 */ outline-offset: 2px; } /* Ensure fixed side ad doesn't overlap clickable areas on narrow desktops */ @media (min-width: 1100px) { .vertical-ad-wrapper { pointer-events: auto; } } /* Horizontal Ad (Ad-1): exact size per screen width (stable height) */ .iwe-adslot-1 { width: 320px; height: 100px; } @media (min-width: 500px) { .iwe-adslot-1 { width: 468px; height: 60px; } } @media (min-width: 800px) { .iwe-adslot-1 { width: 728px; height: 90px; } }