/* THEME VARIABLES AND SHARED UTILITIES */ :root { /* Brand */ --color-primary: #4f46e5; /* indigo-600 (purple) */ --color-primary-hover: #4338ca; /* indigo-700 */ --color-on-primary: #ffffff; /* App surfaces */ --app-bg: #f3f4f6; /* gray-100 */ --surface: #ffffff; /* white */ --border: #e5e7eb; /* gray-200 */ /* Text */ --text: #111827; /* gray-900 */ --muted: #6b7280; /* gray-500/600 */ /* Sidebar */ --sidebar-bg: #1f2937; /* gray-800 */ --sidebar-hover: #374151;/* gray-700 */ --sidebar-text: #ffffff; /* Accents */ --danger: #ef4444; /* red-500 */ --danger-hover: #dc2626; /* red-600 */ --secondary: #e5e7eb; /* gray-200 */ --secondary-hover: #d1d5db; /* gray-300 */ /* Badges */ --badge-bg: #f3f4f6; /* gray-100 */ --badge-text: #374151; /* gray-700 */ /* Chatbot styling variables */ --chat-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; --chat-input-bg: var(--surface); --chat-input-text: var(--text); --chat-input-border: var(--border); } /***** Optional dark theme hook (enable with ) *****/ [data-theme="dark"] { --app-bg: #0f172a; /* slate-900 */ --surface: #111827; /* gray-900 */ --border: #1f2937; /* gray-800 */ --text: #e5e7eb; /* gray-200 */ --muted: #9ca3af; /* gray-400 */ --sidebar-bg: #0b1220; --sidebar-hover: #1f2937; --sidebar-text: #e5e7eb; --badge-bg: #1f2937; --badge-text: #e5e7eb; } /* Utility helpers that can be reused across components */ .app-bg { background-color: var(--app-bg); } .surface { background-color: var(--surface); } .text-muted { color: var(--muted); } /* Brand helpers */ .text-primary { color: var(--color-primary); } .bg-primary { background-color: var(--color-primary); } /* Borders */ .border-default { border: 1px solid var(--border); } /* Primary border helper */ .border-primary { border-color: var(--color-primary); } /* Hover helpers */ .hover-text-primary:hover { color: var(--color-primary); } /* Layout helpers (dashboard sticky sidebar) */ .dashboard-page aside.w-64 { position: sticky; top: 0; height: 100vh; align-self: flex-start; } .dashboard-page main.flex-1 { height: 100vh; overflow-y: auto; } /* Sidebar helpers */ .sidebar { background-color: var(--sidebar-bg); color: var(--sidebar-text); } .nav-link { transition: background-color .2s ease; color: var(--text); } .sidebar .nav-link { color: var(--sidebar-text); } .nav-link:hover { background-color: var(--sidebar-hover); } .nav-link.active { background-color: var(--sidebar-hover); } /* Improve dark-mode nav contrast on gray backgrounds */ [data-theme="dark"] .nav-link { color: #f9fafb; } [data-theme="dark"] header nav a { color: #f9fafb; } header nav a { color: var(--text); } header nav a:hover { color: var(--color-primary); } /* High-contrast nav links */ html:not([data-theme="dark"]) header nav a { color: #111827 !important; } [data-theme="dark"] header nav a { color: #f9fafb !important; } header nav a:hover { color: var(--color-primary) !important; } /* Text color overrides */ [data-theme="dark"] .text-gray-700 { color: var(--text); /* ensure readable light text in dark mode; was nearly black */ } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .5rem 1rem; border-radius: .375rem; font-weight: 500; border: 1px solid transparent; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .btn-primary { background-color: var(--color-primary); color: var(--color-on-primary); } .btn-primary:hover { background-color: var(--color-primary-hover); } .btn-secondary { background-color: var(--secondary); color: var(--text); border-color: var(--border); } .btn-secondary:hover { background-color: var(--secondary-hover); } .btn-danger { background-color: var(--danger); color: #fff; } .btn-danger:hover { background-color: var(--danger-hover); } /* Badges */ .badge { background-color: var(--badge-bg); color: var(--badge-text); font-size: .75rem; line-height: 1rem; padding: .125rem .5rem; border-radius: .375rem; } /* Chatbot host defaults */ deep-chat { font-family: var(--chat-font-family) !important; } /* Chatbot input area styling */ deep-chat input[type="text"], deep-chat input[type="email"], deep-chat input[type="tel"], deep-chat textarea { background: var(--chat-input-bg) !important; color: var(--chat-input-text) !important; border: 1px solid var(--chat-input-border) !important; border-radius: 10px !important; } deep-chat input::placeholder, deep-chat textarea::placeholder { color: var(--muted) !important; } deep-chat input:focus, deep-chat textarea:focus { outline: 2px solid var(--color-primary) !important; outline-offset: 1px !important; border-color: var(--color-primary) !important; } /* end chatbot additions */ /* === Marketing: Features section unique styles === */ .section-features { background: radial-gradient(1200px 800px at 90% -10%, rgba(79, 70, 229, 0.12), transparent 60%), radial-gradient(900px 600px at -10% 10%, rgba(6, 182, 212, 0.10), transparent 60%), linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.04) 100%); } [data-theme="dark"] .section-features { background: radial-gradient(1200px 800px at 90% -10%, rgba(139, 92, 246, 0.18), transparent 60%), radial-gradient(900px 600px at -10% 10%, rgba(34, 211, 238, 0.14), transparent 60%), linear-gradient(180deg, rgba(2, 6, 23, 0.6) 0%, rgba(2, 6, 23, 0.9) 100%); } .section-eyebrow { background: rgba(79, 70, 229, 0.12); color: var(--color-primary); border: 1px solid rgba(79, 70, 229, 0.25); } [data-theme="dark"] .section-eyebrow { background: rgba(139, 92, 246, 0.18); border-color: rgba(139, 92, 246, 0.35); color: #e9d5ff; } .feature-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.25rem; /* 20px */ box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); transition: transform .15s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease; } .feature-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,.14); border-color: rgba(79, 70, 229, 0.35); } [data-theme="dark"] .feature-card { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); } /* Accent variant with subtle brand tint */ .feature-card--accent { background: linear-gradient(180deg, rgba(79, 70, 229, 0.08), rgba(79, 70, 229, 0.02)), var(--surface); border-color: rgba(79, 70, 229, 0.35); } [data-theme="dark"] .feature-card--accent { background: linear-gradient(180deg, rgba(139, 92, 246, 0.18), rgba(139, 92, 246, 0.06)), var(--surface); border-color: rgba(139, 92, 246, 0.45); } .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 9999px; color: #ffffff; background: radial-gradient(88% 88% at 30% 20%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.15) 60%, rgba(255,255,255,0) 100%), var(--color-primary); box-shadow: 0 6px 14px rgba(79, 70, 229, 0.35); margin-bottom: .75rem; } [data-theme="dark"] .feature-icon { box-shadow: 0 8px 24px rgba(139, 92, 246, 0.45); } /* Optional grid polish (keeps Tailwind grid) */ .feature-grid { isolation: isolate; } /* === End features section styles === */ /* Keep existing styles below */ /* Base */ html, body { height: 100%; } html { scroll-behavior: smooth; } #marketing-root { min-height: 100%; } /* Header fallback shadow (in addition to Tailwind's) */ #header { box-shadow: 0 2px 12px rgba(0,0,0,0.06); } /* Hero background - light overlay by default */ .hero-bg { background-color: #0b1220; background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url('/images/jungle_office.png'); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Dark mode: stronger overlay */ [data-theme="dark"] .hero-bg { background-image: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url('/images/jungle_office.png'); } /* Improve text readability on dark hero */ .hero-bg h1, .hero-bg p { text-shadow: 0 1px 2px rgba(0,0,0,0.35); } /* Minor utility */ .container { max-width: 1200px; }