/* 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); } /* Theme toggle: moon in light mode, sun in dark mode */ .theme-toggle-btn .theme-icon-sun, .theme-toggle-btn .theme-icon-moon { display: none; } html:not(.dark) .theme-toggle-btn .theme-icon-moon, [data-theme='light'] .theme-toggle-btn .theme-icon-moon { display: inline; } html.dark .theme-toggle-btn .theme-icon-sun, [data-theme='dark'] .theme-toggle-btn .theme-icon-sun { display: inline; } /* 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; } /* Horizontal banner ads (Adsterra): mobile 320×50, desktop 728×90 */ .iwe-ad-banner-group { width: 100%; } .iwe-ad-slot { display: flex; justify-content: center; align-items: center; overflow: hidden; } .iwe-ad-mobile { width: 320px; min-height: 50px; } .iwe-ad-desktop { display: none; width: 728px; min-height: 90px; max-width: 100%; } @media (min-width: 800px) { .iwe-ad-mobile { display: none; } .iwe-ad-desktop { display: flex; } } /* Vertical banners (160×300): fixed corners, desktop only — do not style .iwe-ad-banner-group */ .iwe-ad-vertical-wrapper { display: none; position: fixed; bottom: 10px; z-index: 100; width: 160px; min-height: 300px; pointer-events: auto; } .iwe-ad-vertical-left { left: 10px; } .iwe-ad-vertical-right { right: 10px; } .iwe-ad-vertical { width: 160px; min-height: 300px; } @media (min-width: 1100px) { .iwe-ad-vertical-wrapper { display: block; } /* Narrow main only; horizontal banner group stays width: 100% inside main */ main.iwe-main-with-side-ads { width: calc(100% - 340px); margin-left: auto; margin-right: auto; } } /* Language switcher */ .lang-switcher { position: relative; } .lang-switcher-btn { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 0.75rem; border: 1px solid rgba(148, 163, 184, 0.35); padding: 0.45rem 0.65rem; font-weight: 600; font-size: 0.8125rem; line-height: 1; background: rgba(255, 255, 255, 0.85); color: #334155; } html.dark .lang-switcher-btn { background: rgba(15, 23, 42, 0.6); color: #e2e8f0; border-color: rgba(148, 163, 184, 0.25); } .lang-switcher-flag { display: block; width: 20px; height: 15px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08); } .lang-switcher-code { letter-spacing: 0.02em; } .lang-switcher-chevron { width: 1rem; height: 1rem; opacity: 0.65; } .lang-switcher-menu { position: absolute; top: calc(100% + 0.35rem); right: 0; z-index: 50; min-width: 11.5rem; margin: 0; padding: 0.35rem; list-style: none; border-radius: 0.85rem; border: 1px solid rgba(148, 163, 184, 0.35); background: #fff; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12); } html.dark .lang-switcher-menu { background: #0f172a; border-color: rgba(148, 163, 184, 0.25); box-shadow: 0 12px 30px rgba(2, 6, 23, 0.45); } .lang-switcher-option { display: flex; align-items: center; gap: 0.625rem; padding: 0.55rem 0.65rem; border-radius: 0.55rem; color: #334155; text-decoration: none; font-size: 0.875rem; } html.dark .lang-switcher-option { color: #e2e8f0; } .lang-switcher-option:hover { background: rgba(59, 130, 246, 0.08); } html.dark .lang-switcher-option:hover { background: rgba(59, 130, 246, 0.16); } .lang-switcher-option.is-active { background: rgba(59, 130, 246, 0.12); font-weight: 600; } .lang-switcher-name { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; gap: 0.1rem; } .lang-switcher-language { font-weight: inherit; } .lang-switcher-country { font-size: 0.75rem; font-weight: 500; color: #64748b; } html.dark .lang-switcher-country { color: #94a3b8; } .lang-switcher-check { width: 1rem; height: 1rem; color: #2563eb; } html.dark .lang-switcher-check { color: #93c5fd; }