:root{ --bg-body:#f8fafc; --text-main:#0f172a; --primary:#3b82f6; --primary-hover:#2563eb; --navbar-bg:#ffffff; --border:#e2e8f0; } /* Dark Mode Variables */ [data-theme="dark"]{ --bg-body:#0f172a; --text-main:#f8fafc; --navbar-bg:#1e293b; --border:#334155; } [data-theme="dark"] .ai-architecture{ background-color:#0b1121; border-top:1px solid var(--border); } [data-theme="dark"] .features{ background-color:var(--bg-body); color:var(--text-main); } [data-theme="dark"] .features-header h2{ color:var(--text-main); } [data-theme="dark"] .feature-card,[data-theme="dark"] .industry-card{ background:#1e293b; border-color:var(--border); } [data-theme="dark"] .feature-card h3,[data-theme="dark"] .industry-card h3{ color:var(--text-main); } [data-theme="dark"] .text-wrap strong{ color:var(--text-main); } [data-theme="dark"] .text-wrap p{ color:#94a3b8; } [data-theme="dark"] .feature-icon{ background:#0f172a; } [data-theme="dark"] .btn-icon{ color:#f8fafc; } [data-theme="dark"] .top-bar,[data-theme="dark"] .top-bar a{ color:var(--text-main); } body{ margin:0; font-family:'Inter',sans-serif; background-color:var(--bg-body); color:var(--text-main); } .top-bar{ background-color:var(--bg-body); color:#64748b; font-size:0.85rem; padding:0.4rem 4rem; border-bottom:1px solid var(--border); } .top-bar-container{ display:flex; justify-content:flex-end; align-items:center; gap:1.5rem; max-width:1400px; margin:0 auto; } .top-bar a{ color:#64748b; text-decoration:none; display:flex; align-items:center; transition:color 0.2s; font-weight:500; } .top-bar a:hover{ color:var(--primary); } .top-phone{ display:flex; align-items:center; font-weight:600; } .navbar{ display:flex; justify-content:space-between; align-items:center; padding:0.15rem 4rem; background:var(--navbar-bg); box-shadow:0 4px 6px -1px rgba(0,0,0,0.05); position:sticky; top:0; z-index:1000; } .logo{ font-size:1.5rem; font-weight:800; color:var(--primary); } nav{ display:flex; align-items:center; gap:0.5rem; } nav a{ margin-left:1.5rem; text-decoration:none; color:var(--text-main); font-weight:500; } .btn-icon{ display:flex; align-items:center; justify-content:center; padding:0.5rem; color:var(--text-main); transition:color 0.2s; } .btn-icon:hover{ color:var(--primary); } .btn{ padding:0.5rem 1.25rem; border-radius:6px; font-weight:600; text-decoration:none; display:inline-block; } .btn-primary{ background-color:var(--primary); color:white; } .btn-primary:hover{ background-color:var(--primary-hover); } .hero{ display:flex; align-items:center; padding:8rem 4rem; /* slightly increased padding so the background is more visible */ gap:4rem; background-image:url('/images/chat_background.png'); background-size:cover; background-position:center; position:relative; overflow:hidden; } .hero::before{ content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(135deg,rgba(15,23,42,0.9) 0%,rgba(30,58,138,0.6) 100%); z-index:1; } .hero > *{ position:relative; z-index:2; } .hero-content{ flex:1; color:white; /* Removed individual border radius/padding since it's full width now */ } .hero h1{ font-size:3.5rem; line-height:1.2; margin-top:0; margin-bottom:1rem; color:white; } .hero p{ font-size:1.25rem; color:#e2e8f0; margin-bottom:2rem; } .hero-image{ flex:1; display:flex; justify-content:center; } .mock-widget{ background:var(--navbar-bg); width:350px; height:450px; border-radius:16px; box-shadow:0 25px 50px -12px rgba(59,130,246,0.25); border:1px solid var(--border); padding:1.5rem; padding-top:4.5rem; /* Prevent content sliding under pseudo-element header */ display:flex; align-items:flex-end; position:relative; overflow:hidden; } .mock-widget::before{ content:"Live Chat Support"; position:absolute; top:0; left:0; width:100%; background:var(--primary); color:white; padding:1rem 1.5rem; font-weight:600; font-size:0.95rem; box-sizing:border-box; } .mock-message{ background:var(--primary); color:white; padding:1rem; border-radius:12px 12px 12px 0; margin:auto 0 1rem 0; /* Auto margin top forces bubble to bottom layout */ font-size:0.95rem; align-self:flex-start; max-width:85%; line-height:1.4; position:relative; z-index:2; } .mock-footer{ width:calc(100% + 3rem); margin:0 -1.5rem; text-align:center; font-size:0.75rem; color:#94a3b8; padding:0.75rem 0; border-top:1px solid var(--border); background:var(--navbar-bg); position:relative; z-index:2; } .features{ padding:4rem; background-color:white; } .features-header{ text-align:center; margin-bottom:4rem; } .features-header h2{ font-size:2.5rem; margin-bottom:1rem; color:var(--text-main); } .features-header p{ font-size:1.1rem; color:#64748b; max-width:600px; margin:0 auto; } .features-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:3rem; max-width:1200px; margin:0 auto; } .feature-card{ background:var(--bg-body); padding:2rem; border-radius:12px; border:1px solid #e2e8f0; transition:transform 0.2s,box-shadow 0.2s; } .feature-card:hover{ transform:translateY(-5px); box-shadow:0 10px 15px -3px rgba(0,0,0,0.1); } .feature-icon{ width:48px; height:48px; background:#eff6ff; color:var(--primary); border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:1.5rem; } .feature-card h3{ font-size:1.25rem; margin-top:0; margin-bottom:0.5rem; } .feature-card p{ color:#64748b; line-height:1.6; margin:0; font-size:0.95rem; } /* New Elaborate AI Features Layout */ .ai-architecture{ padding:6rem 4rem; background-color:#ffffff; border-top:1px solid var(--border); } .ai-container{ max-width:1400px; margin:0 auto; display:flex; align-items:center; gap:6rem; } .ai-visual{ flex:1; position:relative; border-radius:20px; padding:2rem; } .ai-visual img{ width:100%; height:auto; border-radius:16px; position:relative; z-index:2; box-shadow:0 25px 50px -12px rgba(15,23,42,0.4); border:1px solid rgba(59,130,246,0.2); } .glow-backdrop{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:120%; height:120%; background:radial-gradient(circle at center,rgba(59,130,246,0.15) 0%,transparent 60%); z-index:1; border-radius:50%; } .ai-text{ flex:1; max-width:650px; } .ai-badge{ display:inline-block; padding:0.4rem 1rem; background:#eff6ff; color:var(--primary); font-size:0.85rem; font-weight:700; border-radius:20px; letter-spacing:0.5px; text-transform:uppercase; margin-bottom:1.5rem; } .ai-text h2{ font-size:3rem; line-height:1.1; margin-top:0; margin-bottom:1rem; color:var(--text-main); font-weight:800; } .ai-subtitle{ font-size:1.15rem; color:#64748b; margin-bottom:3rem; line-height:1.6; } .advanced-feature-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:2rem; } .advanced-feature-list li{ display:flex; align-items:flex-start; gap:1.5rem; } .icon-wrap{ min-width:48px; height:48px; background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%); color:white; display:flex; align-items:center; justify-content:center; border-radius:12px; box-shadow:0 10px 15px -3px rgba(59,130,246,0.3); } .text-wrap strong{ display:block; font-size:1.1rem; color:var(--text-main); margin-bottom:0.4rem; } .text-wrap p{ margin:0; font-size:0.95rem; color:#475569; line-height:1.6; } /* Industry Use-Cases */ .industry-section{ padding:6rem 4rem; background-color:var(--bg-body); } .industry-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem; max-width:1400px; margin:0 auto; } .industry-card{ background:var(--navbar-bg); padding:2.5rem; border-radius:16px; border:1px solid var(--border); transition:transform 0.2s,box-shadow 0.2s; text-align:center; } .industry-card:hover{ transform:translateY(-5px); box-shadow:0 15px 30px -10px rgba(0,0,0,0.1); } .industry-card i{ width:40px; height:40px; color:var(--primary); margin-bottom:1.5rem; } .industry-card h3{ font-size:1.35rem; color:var(--text-main); margin-bottom:1rem; margin-top:0; } .industry-card p{ color:#64748b; line-height:1.6; margin:0; font-size:0.95rem; } /* Contact Form Section */ .contact-section{ padding:6rem 4rem; background-color:var(--bg-body); border-top:1px solid var(--border); } .contact-container{ display:flex; max-width:1200px; margin:0 auto; gap:4rem; background:var(--navbar-bg); border-radius:16px; padding:4rem; box-shadow:0 10px 25px -10px rgba(0,0,0,0.05); border:1px solid var(--border); } .contact-info{ flex:1; } .contact-info h2{ font-size:2.5rem; color:var(--text-main); margin-top:0; } .contact-info p{ color:#64748b; font-size:1.1rem; line-height:1.6; } .contact-form-wrapper{ flex:1.2; } .form-row{ display:flex; gap:1rem; } .form-group{ margin-bottom:1.5rem; width:100%; } .form-group label{ display:block; margin-bottom:0.5rem; font-weight:600; color:var(--text-main); font-size:0.9rem; } .form-group input:not([type="checkbox"]),.form-group textarea{ width:100%; padding:0.75rem; border:1px solid var(--border); border-radius:8px; background:var(--bg-body); color:var(--text-main); font-family:inherit; box-sizing:border-box; } .form-group input[type="checkbox"]{ width:auto; padding:0; border:none; background:none; flex-shrink:0; margin:0; } .checkbox-group{ display:flex; align-items:flex-start; /* Aligns checkbox with the first line of text */ gap:10px; /* Puts a clean space between box and text */ margin-bottom:15px; /* Spacing between the two checkbox rows */ width:100%; /* Ensures it spans the correct width of your form */ max-width:400px; /* Limits width so it doesn't stretch across the screen */ text-align:left; } .checkbox-group input[type="checkbox"]{ margin-top:4px; /* Tweaks the checkbox to center perfectly with text line 1 */ cursor:pointer; } /* Footer styling */ .footer{ background-color:var(--bg-body); color:var(--text-main); padding:4rem 4rem 2rem 4rem; border-top:1px solid var(--border); } .footer-container{ max-width:1400px; margin:0 auto; display:flex; justify-content:space-between; border-bottom:1px solid var(--border); padding-bottom:2rem; margin-bottom:2rem; } .footer-brand p{ max-width:350px; line-height:1.6; margin-top:1rem; color:#64748b; } .footer-links{ display:flex; gap:2rem; } .footer-links a{ color:var(--text-main); text-decoration:none; transition:color 0.2s; } .footer-links a:hover{ color:var(--primary); } .footer-bottom{ text-align:center; color:#64748b; font-size:0.9rem; } [data-theme="dark"] .contact-container{ background:#1e293b; } /* ========================================================================== Responsive Design (Tablets & Mobile) ========================================================================== */ @media (max-width:992px){ .ai-container,.contact-container{ flex-direction:column; gap:3rem; } .ai-text{ max-width:100%; text-align:center; } .hero{ flex-direction:column; padding:5rem 2rem; text-align:center; } .hero-content h1{ font-size:2.8rem; } .hero-image{ width:100%; margin-top:2rem; } .mock-widget{ width:100%; max-width:400px; } } @media (max-width:768px){ .top-bar{ position:fixed; bottom:0; left:0; right:0; z-index:99998; background:var(--navbar-bg); border-top:1px solid var(--border); border-bottom:none; padding:0; box-shadow:0 -4px 10px rgba(0,0,0,0.1); } .top-bar-container{ display:flex; justify-content:space-between; align-items:center; gap:0; } .top-phone,.top-contact,.top-chat{ flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:0.75rem 0; text-decoration:none; color:var(--text-main); border-right:1px solid var(--border); font-weight:600; font-size:0.8rem; gap:0.25rem; } .top-chat{ display:flex !important; border-right:none; color:var(--primary); /* Highlight the chat tab slightly */ } .tb-icon{ margin-right:0 !important; width:18px !important; height:18px !important; } .desktop-text{ display:none; } .mobile-text{ display:inline !important; } .hero-image{ display:none !important; } #chatterai-toggle-btn{ display:none !important; /* Hide floating bubble on mobile since it is in the bottom bar now */ } body{ padding-bottom:65px; /* Prevent content from hiding behind the sticky bar */ } #chatter-host-widget{ bottom:70px !important; /* Raise the widget above the sticky bar */ } .navbar{ padding:1rem 1.5rem; flex-direction:column; align-items:stretch; gap:0; } .nav-brand{ display:flex; justify-content:space-between; align-items:center; width:100%; } .mobile-menu-btn{ display:block !important; padding:0.5rem; } .logo img{ height:60px !important; margin-top:0 !important; } nav#mainNav{ display:none; flex-direction:column; width:100%; gap:1rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border); } nav#mainNav.active{ display:flex; } nav#mainNav a{ margin:0; width:100%; text-align:center; padding:0.5rem 0; } nav#mainNav .btn{ margin-left:0 !important; width:100%; text-align:center; } .features,.ai-architecture,.industry-section,.contact-section{ padding:4rem 1.5rem; } .footer{ padding:3rem 1.5rem 1.5rem 1.5rem; } .footer-container{ flex-direction:column; gap:2rem; text-align:center; } .footer-links{ justify-content:center; flex-wrap:wrap; } .contact-container{ padding:2rem 1.5rem; } .form-row{ flex-direction:column; gap:0; } }