/* ═══════════════════════════════════════════════════════════ CerebraQ — Full Dark Theme Override Strategy: [data-theme="dark"] on overrides Tailwind ═══════════════════════════════════════════════════════════ */ /* ── Layer 1: Design Tokens ── */ [data-theme="dark"] { --bg-base: #020817; --bg-surface: #0f172a; --bg-raised: #111827; --bg-card: rgba(15, 23, 42, 0.85); --text-1: #f1f5f9; --text-2: #94a3b8; --text-3: #64748b; --border: rgba(255, 255, 255, 0.07); --glow-indigo: rgba(99, 102, 241, 0.25); } /* ── Layer 2: Global Resets ── */ [data-theme="dark"] body { background: var(--bg-base); color: var(--text-1); } /* Animated background mesh — fixed, behind everything */ [data-theme="dark"] body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 70% 40% at 10% 20%, rgba(99, 102, 241, 0.05) 0%, transparent 100%), radial-gradient(ellipse 60% 35% at 85% 60%, rgba(6, 182, 212, 0.03) 0%, transparent 100%), radial-gradient(ellipse 50% 30% at 50% 90%, rgba(139, 92, 246, 0.04) 0%, transparent 100%); } /* ── Layer 3: Section / Container Backgrounds ── */ [data-theme="dark"] .bg-white { background: var(--bg-surface) !important; } [data-theme="dark"] .bg-gray-50 { background: var(--bg-raised) !important; } [data-theme="dark"] .bg-gray-100 { background: #1e293b !important; } [data-theme="dark"] .bg-gray-200 { background: #1e293b !important; } [data-theme="dark"] .bg-blue-50 { background: rgba(59, 130, 246, 0.08) !important; } [data-theme="dark"] .bg-teal-50 { background: rgba(20, 184, 166, 0.08) !important; } [data-theme="dark"] .bg-purple-50{ background: rgba(139, 92, 246, 0.08) !important; } [data-theme="dark"] .bg-green-50 { background: rgba(34, 197, 94, 0.08) !important; } [data-theme="dark"] .bg-red-50 { background: rgba(239, 68, 68, 0.08) !important; } [data-theme="dark"] .bg-yellow-50{ background: rgba(234, 179, 8, 0.08) !important; } [data-theme="dark"] .bg-amber-50 { background: rgba(245, 158, 11, 0.08) !important; } /* ── Layer 4: Text Colors ── */ [data-theme="dark"] .text-gray-900 { color: var(--text-1) !important; } [data-theme="dark"] .text-gray-800 { color: #e2e8f0 !important; } [data-theme="dark"] .text-gray-700 { color: #cbd5e1 !important; } [data-theme="dark"] .text-gray-600 { color: var(--text-2) !important; } [data-theme="dark"] .text-gray-500 { color: var(--text-3) !important; } [data-theme="dark"] .text-gray-400 { color: #475569 !important; } [data-theme="dark"] .text-blue-800 { color: #93c5fd !important; } [data-theme="dark"] .text-blue-700 { color: #93c5fd !important; } [data-theme="dark"] .text-teal-700 { color: #5eead4 !important; } [data-theme="dark"] .text-green-700{ color: #86efac !important; } [data-theme="dark"] .text-red-700 { color: #fca5a5 !important; } /* ── Layer 5: Borders ── */ [data-theme="dark"] .border-gray-100 { border-color: #1e293b !important; } [data-theme="dark"] .border-gray-200 { border-color: #1e293b !important; } [data-theme="dark"] .border-gray-300 { border-color: #334155 !important; } [data-theme="dark"] .divide-gray-100 > * + * { border-color: #1e293b !important; } [data-theme="dark"] .divide-y > * { border-color: #1e293b !important; } /* ── Layer 6: Navbar ── */ [data-theme="dark"] #navbar { background: rgba(2, 8, 23, 0.75) !important; border-bottom: 1px solid rgba(99, 102, 241, 0.12); backdrop-filter: blur(8px); } [data-theme="dark"] #navbar.scrolled { background: rgba(2, 8, 23, 0.96) !important; backdrop-filter: blur(24px); box-shadow: 0 1px 0 rgba(99, 102, 241, 0.15), 0 4px 32px rgba(0,0,0,0.3); } [data-theme="dark"] #navbar a:not([class*="bg-gradient"]):not([class*="from-blue"]):not([class*="from-teal"]) { color: #cbd5e1 !important; } [data-theme="dark"] #navbar a:hover:not([class*="bg-gradient"]):not([class*="from-"]) { color: #818cf8 !important; } [data-theme="dark"] #navbar button:not([class*="bg-"]) { color: #cbd5e1 !important; } [data-theme="dark"] #navbar svg { stroke: currentColor; } [data-theme="dark"] #mobile-menu { background: #080e1d !important; border-color: #1e293b !important; } [data-theme="dark"] #mobile-menu a { color: #cbd5e1 !important; } [data-theme="dark"] #mobile-menu a:hover { background: rgba(99,102,241,0.1) !important; } /* Dropdown panel — nav-dropdown class added to all pages */ [data-theme="dark"] .nav-dropdown { background: #0d1626 !important; border-color: #1e293b !important; } [data-theme="dark"] .nav-dropdown .font-semibold { color: #e2e8f0 !important; } [data-theme="dark"] .nav-dropdown .text-gray-500 { color: #94a3b8 !important; } [data-theme="dark"] .nav-dropdown a:hover, [data-theme="dark"] .nav-dropdown .hover\:bg-teal-50:hover, [data-theme="dark"] .nav-dropdown .hover\:bg-blue-50:hover { background: rgba(99,102,241,0.12) !important; } [data-theme="dark"] .nav-dropdown .bg-blue-50, [data-theme="dark"] .nav-dropdown .bg-teal-50 { background: rgba(99,102,241,0.18) !important; } /* ── Layer 7: Glassmorphism Feature Cards ── */ [data-theme="dark"] .feature-card { background: var(--bg-card) !important; border-color: rgba(99, 102, 241, 0.18) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 4px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04); position: relative; overflow: hidden; isolation: isolate; } [data-theme="dark"] .feature-card:hover { border-color: rgba(99, 102, 241, 0.45) !important; box-shadow: 0 20px 60px rgba(99, 102, 241, 0.18), 0 0 0 1px rgba(99,102,241,0.3), inset 0 1px 0 rgba(255,255,255,0.07) !important; transform: translateY(-6px) !important; } /* Animated rotating conic gradient border on hover */ @property --border-angle { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes spin-border { to { --border-angle: 360deg; } } [data-theme="dark"] .feature-card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: conic-gradient( from var(--border-angle), transparent 40%, #6366f1 55%, #06b6d4 65%, #8b5cf6 72%, transparent 85% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px; animation: spin-border 3s linear infinite paused; opacity: 0; transition: opacity 0.4s ease; z-index: -1; } [data-theme="dark"] .feature-card:hover::before { opacity: 1; animation-play-state: running; } /* Glassmorphism top-sheen */ [data-theme="dark"] .feature-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent); z-index: 1; } /* ── Layer 8: Stat Cards ── */ [data-theme="dark"] .stat-card { background: rgba(15, 23, 42, 0.9) !important; border: 1px solid rgba(99, 102, 241, 0.2) !important; box-shadow: 0 4px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04) !important; } [data-theme="dark"] .stat-card:hover { border-color: rgba(99, 102, 241, 0.4) !important; box-shadow: 0 12px 40px rgba(99,102,241,0.15), inset 0 1px 0 rgba(255,255,255,0.06) !important; } /* Override shimmer to use indigo instead of white */ [data-theme="dark"] .stat-card::after { background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.18), transparent) !important; } /* ── Layer 9: Plan Cards (pricing.html) ── */ [data-theme="dark"] .plan-card { background: rgba(15, 23, 42, 0.9) !important; } [data-theme="dark"] .plan-card.bg-white { background: rgba(15, 23, 42, 0.9) !important; border-color: rgba(99, 102, 241, 0.2) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important; } [data-theme="dark"] .plan-card.border-gray-200 { border-color: rgba(255,255,255,0.1) !important; } [data-theme="dark"] .plan-card.border-green-200 { border-color: rgba(34,197,94,0.35) !important; } [data-theme="dark"] .plan-card.border-violet-200 { border-color: rgba(139,92,246,0.35) !important; } [data-theme="dark"] .plan-card:hover { border-color: rgba(99,102,241,0.4) !important; box-shadow: 0 16px 48px rgba(99,102,241,0.15) !important; } /* ── Layer 10: Icon Boxes ── */ [data-theme="dark"] .icon-blue { background: rgba(59,130,246,0.15) !important; } [data-theme="dark"] .icon-purple { background: rgba(139,92,246,0.15) !important; } [data-theme="dark"] .icon-green { background: rgba(34,197,94,0.15) !important; } [data-theme="dark"] .icon-orange { background: rgba(249,115,22,0.15) !important; } [data-theme="dark"] .icon-red { background: rgba(239,68,68,0.15) !important; } [data-theme="dark"] .icon-teal { background: rgba(20,184,166,0.15) !important; } [data-theme="dark"] .icon-violet { background: rgba(139,92,246,0.15) !important; } /* ── Layer 11: Product Showcase Cards (blue-50/violet-50 gradients) ── */ [data-theme="dark"] .from-blue-50 { --tw-gradient-from: rgba(59,130,246,0.1) !important; } [data-theme="dark"] .to-violet-50 { --tw-gradient-to: rgba(139,92,246,0.1) !important; } [data-theme="dark"] .from-teal-50 { --tw-gradient-from: rgba(20,184,166,0.1) !important; } [data-theme="dark"] .to-green-50 { --tw-gradient-to: rgba(34,197,94,0.1) !important; } [data-theme="dark"] .from-violet-50 { --tw-gradient-from: rgba(139,92,246,0.1) !important; } [data-theme="dark"] .border-blue-100 { border-color: rgba(59,130,246,0.2) !important; } [data-theme="dark"] .border-teal-100 { border-color: rgba(20,184,166,0.2) !important; } [data-theme="dark"] .border-blue-200 { border-color: rgba(59,130,246,0.25) !important; } [data-theme="dark"] .border-teal-200 { border-color: rgba(20,184,166,0.25) !important; } /* ── Layer 12: Contact & Form Inputs ── */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background: #1e293b !important; color: #f1f5f9 !important; border-color: #334155 !important; } [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { border-color: #6366f1 !important; box-shadow: 0 0 0 3px rgba(99,102,241,0.2) !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #64748b !important; } [data-theme="dark"] label { color: #cbd5e1 !important; } /* Contact info icon boxes */ [data-theme="dark"] .bg-blue-100 { background: rgba(59,130,246,0.15) !important; } [data-theme="dark"] .bg-green-100 { background: rgba(34,197,94,0.15) !important; } [data-theme="dark"] .bg-purple-100 { background: rgba(139,92,246,0.15) !important; } [data-theme="dark"] .bg-teal-100 { background: rgba(20,184,166,0.15) !important; } [data-theme="dark"] .bg-yellow-100 { background: rgba(234,179,8,0.15) !important; } /* Business hours box */ [data-theme="dark"] .bg-blue-50.border-2.border-blue-200 { background: rgba(59,130,246,0.08) !important; border-color: rgba(59,130,246,0.3) !important; } /* Form success/error states */ [data-theme="dark"] .bg-green-50.border.border-green-300 { background: rgba(34,197,94,0.1) !important; border-color: rgba(34,197,94,0.4) !important; } [data-theme="dark"] .bg-red-50.border.border-red-300 { background: rgba(239,68,68,0.1) !important; border-color: rgba(239,68,68,0.4) !important; } /* ── Layer 13: FAQ Accordions ── */ [data-theme="dark"] .faq-item, [data-theme="dark"] details { background: rgba(15,23,42,0.8) !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .faq-question, [data-theme="dark"] summary { color: #f1f5f9 !important; } [data-theme="dark"] .faq-answer, [data-theme="dark"] details p { color: #94a3b8 !important; } /* Contact page simple FAQ */ [data-theme="dark"] .bg-white.p-6.rounded-lg.shadow { background: rgba(15,23,42,0.85) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important; } /* ── Layer 14: Pricing Comparison Table ── */ [data-theme="dark"] table { color: var(--text-1); } [data-theme="dark"] th { background: #1e293b !important; color: #f1f5f9 !important; border-color: #334155 !important; } [data-theme="dark"] td { border-color: #1e293b !important; color: var(--text-2); } [data-theme="dark"] tbody tr:nth-child(even) { background: rgba(255,255,255,0.02) !important; } [data-theme="dark"] .bg-gray-100:is(th, td) { background: #1e293b !important; } /* ── Layer 15: Docs Pages — Sidebar ── */ [data-theme="dark"] .sidebar-link { color: #94a3b8 !important; border-left-color: transparent !important; } [data-theme="dark"] .sidebar-link:hover { color: #e2e8f0 !important; background: rgba(99,102,241,0.08) !important; border-left-color: rgba(99,102,241,0.4) !important; } [data-theme="dark"] .sidebar-link.active { color: #818cf8 !important; border-left-color: #818cf8 !important; background: rgba(99,102,241,0.1) !important; } /* ERP docs — teal active state */ [data-theme="dark"] .sidebar-link.active[style*="teal"] { color: #2dd4bf !important; border-left-color: #2dd4bf !important; } /* ── Layer 16: Docs — Callout Boxes ── */ [data-theme="dark"] .tip { background: rgba(20,184,166,0.08) !important; border-left-color: #2dd4bf !important; color: #ccfbf1 !important; } [data-theme="dark"] .warn { background: rgba(245,158,11,0.08) !important; border-left-color: #fbbf24 !important; color: #fef3c7 !important; } [data-theme="dark"] .note { background: rgba(59,130,246,0.08) !important; border-left-color: #60a5fa !important; color: #dbeafe !important; } /* ── Layer 17: Docs — Code Blocks ── */ [data-theme="dark"] code, [data-theme="dark"] kbd, [data-theme="dark"] pre { background: #0d1626 !important; border-color: #1e293b !important; color: #e2e8f0 !important; } [data-theme="dark"] .bg-white.p-4.rounded.border { background: #0d1626 !important; border-color: #1e293b !important; } [data-theme="dark"] .bg-gray-50.rounded-xl { background: #0d1626 !important; } /* ── Layer 18: Docs — Step Circles ── */ [data-theme="dark"] .bg-blue-100.text-blue-700 { background: rgba(59,130,246,0.15) !important; color: #93c5fd !important; } [data-theme="dark"] .bg-teal-100.text-teal-700 { background: rgba(20,184,166,0.15) !important; color: #5eead4 !important; } /* ── Layer 19: Features Page — Callout / Highlight Boxes ── */ [data-theme="dark"] .bg-blue-50.border-l-4.border-blue-600 { background: rgba(59,130,246,0.08) !important; border-left-color: #6366f1 !important; } [data-theme="dark"] .bg-green-50.border-l-4 { background: rgba(34,197,94,0.08) !important; } [data-theme="dark"] .text-green-500 { color: #4ade80 !important; } [data-theme="dark"] .text-blue-600 { color: #818cf8 !important; } /* Keep teal blue-600 links readable but still distinguishable */ [data-theme="dark"] a.text-blue-600 { color: #818cf8 !important; } [data-theme="dark"] a.text-teal-600 { color: #2dd4bf !important; } /* ── Layer 20: Hero Sections (pricing, contact, features, docs) ── */ /* These pages still have a light hero — override to dark */ [data-theme="dark"] .from-blue-50.to-white, [data-theme="dark"] .from-teal-50.to-white { background: var(--bg-surface) !important; } /* Target the hero section directly on those pages */ [data-theme="dark"] section.pt-24.pb-12 { background: var(--bg-surface) !important; } [data-theme="dark"] section.pt-24.pb-12 h1 { color: #f1f5f9 !important; } [data-theme="dark"] section.pt-24.pb-12 p { color: #94a3b8 !important; } /* ── Layer 21: Switching / Migration Cards ── */ [data-theme="dark"] .bg-white.rounded-2xl.p-6.shadow-sm { background: rgba(15,23,42,0.85) !important; border-color: rgba(255,255,255,0.07) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important; } /* ── Layer 22: Testimonial Cards ── */ [data-theme="dark"] .testimonial-card { background: rgba(15,23,42,0.85) !important; border-color: rgba(255,255,255,0.07) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important; } /* ── Layer 23: Pricing Page — Billing Toggle ── */ /* ── Layer 24: 3D Redesign — Neural Cosmos ── */ /* Aurora animated CTA background */ @keyframes aurora { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .aurora-bg { background: linear-gradient(135deg, #020817, #0f172a, #1e1b4b, #0c2a3a, #020817); background-size: 400% 400%; animation: aurora 10s ease infinite; } /* Device mockup — CSS 3D perspective */ .device-float { perspective: 1200px; perspective-origin: 60% 40%; } .device-screen { transform: rotateY(-18deg) rotateX(6deg); border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.10); box-shadow: 30px 30px 70px rgba(0,0,0,0.65), 0 0 0 1px rgba(99,102,241,0.15), 0 0 90px rgba(99,102,241,0.18); transition: transform 0.65s cubic-bezier(0.23,1,0.32,1), box-shadow 0.65s ease; } .device-screen:hover { transform: rotateY(-5deg) rotateX(2deg) translateY(-14px) translateZ(20px); box-shadow: 50px 50px 100px rgba(0,0,0,0.7), 0 0 0 1px rgba(99,102,241,0.3), 0 0 120px rgba(99,102,241,0.28); } .device-screen-right { transform: rotateY(16deg) rotateX(5deg); } .device-screen-right:hover { transform: rotateY(4deg) rotateX(1deg) translateY(-14px) translateZ(20px); } /* Floating badge chips around hero mockup */ @keyframes floatBadge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .float-badge { position: absolute; background: rgba(10,15,35,0.88); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(99,102,241,0.35); border-radius: 50px; padding: 9px 17px; font-size: 13px; font-weight: 600; color: #e2e8f0; animation: floatBadge 4s ease-in-out infinite; white-space: nowrap; z-index: 5; box-shadow: 0 4px 20px rgba(0,0,0,0.4); } /* Stat number glow */ .stat-number { text-shadow: 0 0 30px rgba(99,102,241,0.45); } /* Diagonal clip-path section dividers */ .clip-diagonal-down { clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%); padding-top: 6vw !important; } .clip-diagonal-up { clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%); padding-top: 6vw !important; } /* Neon connecting line between steps */ .step-connector { height: 2px; background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06b6d4); transform-origin: left center; border-radius: 2px; } /* Product showcase rows */ .product-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } @media (max-width: 768px) { .product-row { grid-template-columns: 1fr; gap: 2rem; } .device-float { perspective: 800px; } .device-screen, .device-screen-right { transform: none; } .float-badge { display: none; } } /* Gallery card 3D tilt wrapper */ .gallery-card { border-radius: 16px; overflow: hidden; position: relative; flex: 0 0 280px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.06); } .gallery-card img { width: 100%; height: 200px; object-fit: cover; display: block; } .gallery-card .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(2,8,23,0.9) 0%, transparent 60%); display: flex; align-items: flex-end; padding: 1.25rem; } /* Hero neural canvas */ #neural-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } #hero-neural { position: relative; overflow: hidden; } #hero-neural canvas { pointer-events: all; } /* ── Layer 23: Pricing Page — Billing Toggle ── */ [data-theme="dark"] #billing-toggle-btn { background: #1e293b !important; border-color: #334155 !important; } [data-theme="dark"] #toggle-monthly, [data-theme="dark"] #toggle-annual { color: #94a3b8 !important; } [data-theme="dark"] #toggle-monthly.active, [data-theme="dark"] #toggle-annual.active { color: #f1f5f9 !important; } /* ── Layer 24: "What's Included" / Add-on boxes (pricing.html) ── */ [data-theme="dark"] .bg-gray-50.rounded-2xl { background: rgba(15,23,42,0.8) !important; } /* ── Layer 25: Shadow & scroll progress color adjustments ── */ [data-theme="dark"] .shadow-blue-100 { box-shadow: 0 25px 50px rgba(99,102,241,0.15) !important; } [data-theme="dark"] .shadow-teal-100 { box-shadow: 0 25px 50px rgba(20,184,166,0.15) !important; } /* ── Layer 26: Floating badges on hero image ── */ [data-theme="dark"] .absolute.-bottom-4.-left-4.bg-white, [data-theme="dark"] .absolute.-top-4.-right-4.bg-white { background: rgba(15,23,42,0.95) !important; border-color: rgba(255,255,255,0.1) !important; } /* ── Layer 27: Light-to-light gradient cards (from-*-50 to-*-50) ── */ [data-theme="dark"] .from-blue-50.to-violet-50, [data-theme="dark"] .from-violet-50.to-blue-50, [data-theme="dark"] .from-teal-50.to-green-50, [data-theme="dark"] .from-green-50.to-teal-50, [data-theme="dark"] .from-blue-50.to-indigo-50, [data-theme="dark"] .from-indigo-50.to-blue-50 { background: var(--bg-surface) !important; background-image: none !important; } /* ── Layer 28: Light border colors for card variants ── */ [data-theme="dark"] .border-blue-100 { border-color: rgba(59,130,246,0.22) !important; } [data-theme="dark"] .border-violet-100 { border-color: rgba(139,92,246,0.22) !important; } [data-theme="dark"] .border-teal-100 { border-color: rgba(20,184,166,0.22) !important; } [data-theme="dark"] .border-green-100 { border-color: rgba(34,197,94,0.22) !important; } [data-theme="dark"] .border-gray-200 { border-color: rgba(255,255,255,0.08) !important; } /* ── Layer 29: Navbar scrolled (dark frosted glass) ── */ [data-theme="dark"] #navbar.scrolled { background: rgba(2,8,23,0.92) !important; backdrop-filter: blur(16px) !important; box-shadow: 0 2px 24px rgba(0,0,0,0.6) !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; } [data-theme="dark"] .absolute.-bottom-4.-left-4 .text-gray-500, [data-theme="dark"] .absolute.-top-4.-right-4 .text-gray-500 { color: #64748b !important; } /* ── Layer 27: Reduced-motion safety ── */ @media (prefers-reduced-motion: reduce) { [data-theme="dark"] .feature-card::before { animation: none !important; } [data-theme="dark"] body::before { animation: none !important; } }