/* ============================================= SOFT HOST — DARK MODE STYLES Activated by 'dark' class on Dark palette: --dk-base: #0b1120 (page body — deepest) --dk-subtle: #0f172a (gray-50 alternate sections) --dk-surface: #182033 (white sections / panels) --dk-card: #1e2d42 (cards / elevated surfaces) --dk-raised: #253550 (gray-100 interactive elements) --dk-border: #1e2d42 (subtle borders — gray-100) --dk-border2: #2d4060 (standard borders — gray-200) ============================================= */ /* ---- Global transition on theme switch ---- */ html.dark body, html.dark body * { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease !important; } html.dark { color-scheme: dark; } /* ============================================= BASE ============================================= */ html.dark body { background-color: #0b1120 !important; color: #c8d6ea !important; } /* ============================================= NAVIGATION ============================================= */ html.dark nav { background-color: rgba(11, 17, 32, 0.96) !important; border-color: #1a2840 !important; box-shadow: 0 1px 0 #1a2840, 0 4px 12px rgba(0,0,0,0.35) !important; } html.dark #navbar { background-color: rgba(11, 17, 32, 0.96) !important; } /* Desktop nav links */ html.dark .nav-link.text-gray-600 { color: #8ba3be !important; } html.dark .nav-link:hover, html.dark .nav-link.hover\:text-brand-600:hover { color: #38bdf8 !important; background-color: rgba(14, 165, 233, 0.08) !important; } /* Mobile menu panel */ html.dark #mobile-menu { background-color: #0f172a !important; border-color: #1a2840 !important; box-shadow: 0 16px 40px rgba(0,0,0,0.55) !important; } html.dark #mobile-menu .border-t { border-color: #1a2840 !important; } /* ============================================= SECTION BACKGROUNDS (alternating layers) ============================================= */ /* Gray-50 sections → deep base */ html.dark .bg-gray-50 { background-color: #0f172a !important; } /* White sections → slightly elevated */ html.dark .bg-white { background-color: #182033 !important; } /* glass overlay */ html.dark .glass-panel { background: rgba(24, 32, 51, 0.88) !important; border-color: rgba(45, 64, 96, 0.55) !important; } /* Hero gradient backgrounds — all page variants */ html.dark .bg-gradient-to-br.from-brand-50, html.dark .bg-gradient-to-br.from-sky-50, html.dark .bg-gradient-to-br.from-blue-50, html.dark .bg-gradient-to-br.from-pink-50, html.dark .bg-gradient-to-br.from-orange-50, html.dark .bg-gradient-to-br.from-indigo-50, html.dark .bg-gradient-to-br.from-purple-50 { background-image: linear-gradient(to bottom right, #0d1626, #0f172a) !important; } /* Gray-100 elevated elements (billing toggle, domain badges, social btn bg) */ html.dark .bg-gray-100 { background-color: #1e2d42 !important; } /* ============================================= CARD SURFACES (bg-white cards inside sections) Cards need slightly more elevation than section bg ============================================= */ /* Pricing, testimonial, hosting-type cards, tech-stack cards */ html.dark .pricing-card.bg-white, html.dark .bg-white.rounded-2xl, html.dark .bg-white.rounded-xl, html.dark .bg-white[class*="border"], html.dark .bg-white.p-8, html.dark .bg-white.p-6, html.dark .bg-white.p-5 { background-color: #1e2d42 !important; } /* Feature cards (bg-gray-50 with hover:bg-white) */ html.dark .group.bg-gray-50 { background-color: #182033 !important; } html.dark .group.bg-gray-50:hover { background-color: #1e2d42 !important; } /* ============================================= COLORED TINT BACKGROUNDS ============================================= */ html.dark .bg-brand-50 { background-color: rgba(14, 165, 233, 0.09) !important; } html.dark .bg-brand-100 { background-color: rgba(14, 165, 233, 0.15) !important; } html.dark .bg-brand-200 { background-color: rgba(14, 165, 233, 0.22) !important; } html.dark .bg-sky-50 { background-color: rgba(14, 165, 233, 0.07) !important; } html.dark .bg-sky-100 { background-color: rgba(14, 165, 233, 0.12) !important; } html.dark .bg-sky-200 { background-color: rgba(14, 165, 233, 0.18) !important; } html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.09) !important; } html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.15) !important; } html.dark .bg-green-50 { background-color: rgba(16, 185, 129, 0.09) !important; } html.dark .bg-green-100 { background-color: rgba(16, 185, 129, 0.15) !important; } html.dark .bg-purple-50 { background-color: rgba(139, 92, 246, 0.09) !important; } html.dark .bg-purple-100{ background-color: rgba(139, 92, 246, 0.15) !important; } html.dark .bg-orange-50 { background-color: rgba(249, 115, 22, 0.09) !important; } html.dark .bg-orange-100{ background-color: rgba(249, 115, 22, 0.15) !important; } html.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.09) !important; } html.dark .bg-pink-50 { background-color: rgba(236, 72, 153, 0.09) !important; } html.dark .bg-pink-100 { background-color: rgba(236, 72, 153, 0.15) !important; } html.dark .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.09) !important; } html.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.09) !important; } html.dark .bg-indigo-100{ background-color: rgba(99, 102, 241, 0.15) !important; } /* Featured pricing card (stays dark — deepen slightly) */ html.dark .bg-gray-900 { background-color: #060d1a !important; } html.dark .bg-gray-800 { background-color: #0a1424 !important; } /* ============================================= BORDERS ============================================= */ html.dark .border-gray-100 { border-color: #1e2d42 !important; } html.dark .border-gray-200 { border-color: #2d4060 !important; } html.dark .border-gray-800 { border-color: #111c30 !important; } html.dark .border-sky-200 { border-color: rgba(14, 165, 233, 0.25) !important; } html.dark .border-blue-200 { border-color: rgba(59, 130, 246, 0.25) !important; } html.dark .border-pink-200 { border-color: rgba(236, 72, 153, 0.25) !important; } html.dark .border-green-200 { border-color: rgba(16, 185, 129, 0.25) !important; } html.dark .border-orange-200 { border-color: rgba(249, 115, 22, 0.25) !important; } html.dark .border-indigo-200 { border-color: rgba(99, 102, 241, 0.25) !important; } html.dark .border-purple-200 { border-color: rgba(139, 92, 246, 0.25) !important; } html.dark .border-brand-100 { border-color: rgba(14, 165, 233, 0.25) !important; } html.dark .border-brand-200 { border-color: rgba(14, 165, 233, 0.3) !important; } html.dark .border-b-\[\#\] { border-color: #1e2d42 !important; } /* Only target specific structural dividers, not all border-b/t */ html.dark .faq-item.border { border-color: #2d4060 !important; } html.dark .divide-gray-100 > * + * { border-color: #1e2d42 !important; } html.dark .divide-gray-200 > * + * { border-color: #2d4060 !important; } /* Nav bottom border */ html.dark nav .border-b { border-color: #1a2840 !important; } /* Mobile menu top border */ html.dark #mobile-menu .border-t { border-color: #1a2840 !important; } /* Footer top border */ html.dark footer .border-t { border-color: #111c30 !important; } /* Section border-b dividers (e.g. stats, legal) */ html.dark .border-b { border-bottom-color: #1e2d42 !important; } /* ============================================= TEXT COLORS ============================================= */ html.dark .text-gray-900 { color: #edf2f9 !important; } html.dark .text-gray-800 { color: #d8e4f0 !important; } html.dark .text-gray-700 { color: #b8cce0 !important; } html.dark .text-gray-600 { color: #8ba3be !important; } html.dark .text-gray-500 { color: #607d96 !important; } html.dark .text-gray-400 { color: #4a6278 !important; } /* ============================================= HOVER & INTERACTIVE STATES ============================================= */ html.dark .hover\:bg-sky-50:hover { background-color: rgba(14, 165, 233, 0.08) !important; } html.dark .hover\:bg-sky-100:hover { background-color: rgba(14, 165, 233, 0.14) !important; } html.dark .hover\:text-sky-600:hover { color: #38bdf8 !important; } html.dark .hover\:bg-pink-50:hover { background-color: rgba(236, 72, 153, 0.08) !important; } html.dark .hover\:text-pink-600:hover { color: #f472b6 !important; } html.dark .hover\:bg-orange-50:hover { background-color: rgba(249, 115, 22, 0.08) !important; } html.dark .hover\:text-orange-600:hover{ color: #fb923c !important; } html.dark .hover\:bg-indigo-50:hover { background-color: rgba(99, 102, 241, 0.08) !important; } html.dark .hover\:text-indigo-600:hover{ color: #818cf8 !important; } html.dark .hover\:bg-purple-50:hover { background-color: rgba(139, 92, 246, 0.08) !important; } html.dark .hover\:text-purple-600:hover{ color: #c084fc !important; } html.dark .hover\:bg-brand-50:hover { background-color: rgba(14, 165, 233, 0.1) !important; } html.dark .hover\:bg-brand-100:hover { background-color: rgba(14, 165, 233, 0.18) !important; } html.dark .hover\:bg-white:hover { background-color: #1e2d42 !important; } html.dark .hover\:bg-gray-50:hover { background-color: #182033 !important; } html.dark .hover\:bg-gray-100:hover { background-color: #253550 !important; } html.dark .hover\:bg-gray-200:hover { background-color: #253550 !important; } html.dark .hover\:shadow-lg:hover { box-shadow: 0 10px 28px -5px rgba(0,0,0,0.55) !important; } html.dark .hover\:shadow-xl:hover { box-shadow: 0 20px 40px -8px rgba(0,0,0,0.65) !important; } html.dark .hover\:shadow-md:hover { box-shadow: 0 4px 14px -2px rgba(0,0,0,0.45) !important; } /* Support page — article links */ html.dark .hover\:border-brand-200:hover { border-color: rgba(14, 165, 233, 0.4) !important; } /* Contact page — social icon buttons */ html.dark .hover\:text-brand-600:hover { color: #38bdf8 !important; } /* ============================================= FORM INPUTS ============================================= */ html.dark input, html.dark textarea, html.dark select { background-color: #182033 !important; border-color: #2d4060 !important; color: #d8e4f0 !important; } html.dark input.bg-gray-50, html.dark textarea.bg-gray-50, html.dark input.bg-white, html.dark textarea.bg-white { background-color: #182033 !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #4a6278 !important; } html.dark input:focus, html.dark textarea:focus, html.dark select:focus { background-color: #1e2d42 !important; border-color: #0ea5e9 !important; box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18) !important; outline: none !important; } /* Newsletter email input (sits on gradient section — keep white text) */ html.dark section .bg-gradient-to-r input { background-color: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.25) !important; color: #ffffff !important; } /* ============================================= BILLING TOGGLE (pricing page) ============================================= */ html.dark .bg-gray-100.rounded-full { background-color: #1e2d42 !important; border-color: #2d4060 !important; } /* Active tab inside the toggle */ html.dark .bg-gray-100.rounded-full .bg-white { background-color: #253550 !important; color: #edf2f9 !important; } /* ============================================= DOMAIN SEARCH OVERLAY ============================================= */ html.dark #domain-search-overlay { background-color: rgba(5, 10, 22, 0.80) !important; } html.dark #domain-search-box { background-color: #1e2d42 !important; border-color: #2d4060 !important; } /* ============================================= SHADOWS ============================================= */ html.dark .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.35) !important; } html.dark .shadow-md { box-shadow: 0 4px 10px rgba(0,0,0,0.45) !important; } html.dark .shadow-lg { box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important; } html.dark .shadow-xl { box-shadow: 0 20px 40px rgba(0,0,0,0.55) !important; } html.dark .shadow-2xl { box-shadow: 0 24px 50px rgba(0,0,0,0.65) !important; } /* ============================================= THEME TOGGLE BUTTON ============================================= */ #theme-toggle { width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.5rem; cursor: pointer; background: transparent; border: 1.5px solid transparent; color: #6b7280; font-size: 1rem; flex-shrink: 0; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } #theme-toggle:hover { background-color: #eff6ff; color: #0284c7; border-color: #dbeafe; } html.dark #theme-toggle { color: #607d96; border-color: transparent; } html.dark #theme-toggle:hover { background-color: rgba(14, 165, 233, 0.12); color: #38bdf8; border-color: rgba(14, 165, 233, 0.25); } /* Sun / Moon icon swap */ #theme-toggle .icon-sun { display: none; } #theme-toggle .icon-moon { display: block; } html.dark #theme-toggle .icon-sun { display: block; } html.dark #theme-toggle .icon-moon { display: none; }