/* SQL Harmony web — dark theme matching the desktop page (h_web). Loaded after Tailwind 2 on the old landing page only; it re-skins the existing utility classes, so the template markup and its JS stay as they are. Remove the one to go back to the light page. */ :root { --hd-bg: #070910; --hd-surface-1: #1e1f23; --hd-surface-2: #222328; --hd-surface-3: #28292d; --hd-border: #3c3d41; --hd-border-strong: #4a4b50; --hd-fg: #f7f8f8; --hd-fg-muted: #d0d6e0; --hd-fg-subtle: #8a8f98; --hd-primary: #5e6ad2; --hd-highlight: #828fff; --hd-font: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif; --hd-mono: "JetBrains Mono", ui-monospace, monospace; color-scheme: dark; } html body, html body.bg-gray-50 { background: var(--hd-bg); color: var(--hd-fg); font-family: var(--hd-font); -webkit-font-smoothing: antialiased; } /* ---- Page background: same dotted atmosphere as the desktop hero ---- */ body .min-h-screen { background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(94, 106, 210, 0.18), transparent 70%), radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1.5px) 0 0 / 22px 22px, var(--hd-bg); } body .bg-gradient-to-br.from-blue-50 { background: transparent; } body .floating-circle, body .geometric-shape, body .database-icon { display: none; } body .abstract-line { stroke: rgba(130, 143, 255, 0.12); } /* ---- Surfaces ---- */ body .bg-white, body .bg-gray-50 { background-color: transparent; } body section.bg-white, body section.bg-gray-50 { border-top: 1px solid var(--hd-border); } body .rounded-lg.bg-white, body .rounded-xl.bg-white, body .rounded-2xl.bg-white, body .shadow-sm, body .shadow-lg.bg-white, body .shadow-xl.bg-white { background-color: var(--hd-surface-1); border-color: var(--hd-border); } body .border-gray-100, body .border-gray-200, body .border-gray-300 { border-color: var(--hd-border); } body .shadow-sm { box-shadow: none; } body .shadow-lg, body .shadow-xl { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 24px 60px -20px rgba(0, 0, 0, 0.8); } /* ---- Type ---- */ body h1, body h2, body h3, body h4 { font-family: var(--hd-font); font-weight: 510; letter-spacing: -0.02em; } body .text-gray-900, body .text-gray-800 { color: var(--hd-fg); } body .text-gray-700, body .text-gray-600 { color: var(--hd-fg-muted); } body .text-gray-500 { color: var(--hd-fg-subtle); } body .text-blue-600, body .text-blue-800, body .text-indigo-500, body .text-indigo-600 { color: var(--hd-highlight); } body .hover\:text-blue-600:hover, body .hover\:text-blue-700:hover, body .hover\:text-indigo-600:hover, body .hover\:text-gray-700:hover { color: var(--hd-fg); } /* Headline accent: the gradient text becomes the desktop page's silver fade */ body h1 .bg-clip-text.from-blue-600 { background-image: linear-gradient(180deg, #ffffff 0%, #b4bccd 100%); } /* ---- Badge / pill ---- */ body .bg-blue-100 { background-color: color-mix(in oklab, var(--hd-primary) 14%, var(--hd-surface-2)); color: var(--hd-fg-muted); box-shadow: 0 0 0 1px color-mix(in oklab, var(--hd-primary) 30%, var(--hd-border)); } /* ---- Buttons ---- */ /* Primary ("Register Free", modal submit buttons): the desktop "Download" button */ body .bg-gradient-to-r.from-gray-600, body .bg-indigo-500 { color: #f7f8ff; background-image: linear-gradient(180deg, #626cd0 0%, #4e58b8 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 0 1px rgba(130, 143, 255, 0.45), 0 14px 36px -8px rgba(94, 106, 210, 0.55); } body .bg-gradient-to-r.from-gray-600:hover, body .hover\:bg-indigo-600:hover { background-image: linear-gradient(180deg, #646cd0 0%, #5860c0 100%); } /* Secondary ("Log In", "Desktop Version", footer buttons): the desktop "Open web version" button */ body .border-blue-600, body .border-indigo-600, body .border-white.border-2 { color: var(--hd-fg); background-color: color-mix(in oklab, var(--hd-primary) 10%, var(--hd-surface-2)); border-color: color-mix(in oklab, var(--hd-primary) 55%, var(--hd-border)); } body .hover\:bg-blue-100:hover, body .hover\:bg-indigo-100:hover, body .hover\:bg-blue-50:hover, body .hover\:bg-white:hover { background-color: color-mix(in oklab, var(--hd-primary) 18%, var(--hd-surface-2)); color: var(--hd-fg); } /* ---- Bottom call-to-action band ---- */ body .bg-gradient-to-br.from-gray-900 { background-image: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(94, 106, 210, 0.28), transparent 70%); background-color: var(--hd-bg); border-top: 1px solid var(--hd-border); } body .text-blue-100 { color: var(--hd-fg-muted); } /* Bottom band "Create Free Account" (white button) becomes the primary button */ body .from-gray-900 a.bg-white, body .from-gray-900 button.bg-white { color: #f7f8ff; background-image: linear-gradient(180deg, #626cd0 0%, #4e58b8 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 0 1px rgba(130, 143, 255, 0.45), 0 14px 36px -8px rgba(94, 106, 210, 0.55); } /* ---- Video ---- */ body iframe { background-color: #000; box-shadow: 0 0 0 1px var(--hd-border), 0 24px 60px -20px rgba(0, 0, 0, 0.8); } /* ---- Code sample ---- */ body pre, body code { font-family: var(--hd-mono); } body pre { background-color: #101116; color: var(--hd-fg-muted); } /* ---- Modals (login, registration, recovery) ---- */ body .bg-gray-900.bg-opacity-75 { background-color: rgba(3, 4, 8, 0.8); } body #loginModal > div, body #registrationModal > div, body #recoveryModal > div, body #successModal > div { background-color: var(--hd-surface-1); border-color: var(--hd-border); } body input, body select, body textarea { background-color: var(--hd-bg); color: var(--hd-fg); border-color: var(--hd-border); } body input:focus, body select:focus, body textarea:focus { outline: none; border-color: var(--hd-highlight); box-shadow: 0 0 0 3px rgba(130, 143, 255, 0.25); } /* ---- "Free desktop version" notice ---- */ body .bg-red-600 { background-image: linear-gradient(180deg, #626cd0 0%, #4e58b8 100%); box-shadow: 0 0 0 1px rgba(130, 143, 255, 0.45), 0 14px 36px -8px rgba(94, 106, 210, 0.55); }