/* ===================================================== ND THEME — Complete Day / Night Mode System Covers: navbar, footer, chatbot, all pages Smooth transitions via .nd-transitioning class ===================================================== */ /* ──────────────────────────────────────────────────── 1. SMOOTH TRANSITION SYSTEM Applied when .nd-transitioning is briefly added to by the toggle handler in scripts.js ──────────────────────────────────────────────────── */ body.nd-transitioning, body.nd-transitioning *, body.nd-transitioning *::before, body.nd-transitioning *::after { transition: background-color 0.45s ease, background 0.45s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, fill 0.35s ease, stroke 0.35s ease, opacity 0.35s ease !important; } /* ──────────────────────────────────────────────────── 2. BODY — Light Mode Base ──────────────────────────────────────────────────── */ body.light { background: #f5f6fa !important; color: #0f1020 !important; } body.light p { color: rgba(15, 16, 32, 0.62) !important; } body.light h1, body.light h2, body.light h3, body.light h4, body.light h5, body.light h6 { color: #0f1020; } body.light a { color: inherit; } body.light .opacity-7 { color: rgba(15, 16, 32, 0.7) !important; } /* ──────────────────────────────────────────────────── 3. BACKGROUND LINES DECORATION ──────────────────────────────────────────────────── */ body.light .lines { border-right-color: rgba(0, 0, 0, 0.06); border-left-color: rgba(0, 0, 0, 0.06); } body.light .lines::before, body.light .lines::after { border-right-color: rgba(0, 0, 0, 0.06); border-left-color: rgba(0, 0, 0, 0.06); } /* ──────────────────────────────────────────────────── 4. LOADER ──────────────────────────────────────────────────── */ body.light .loader-wrap svg { fill: #e8e9f0; } /* ──────────────────────────────────────────────────── 5. NAVBAR — Full Light Mode Coverage ──────────────────────────────────────────────────── */ /* Nav pill — white glass */ body.light .navbar .navbar-nav { background: rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(24px) saturate(160%) !important; -webkit-backdrop-filter: blur(24px) saturate(160%) !important; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06); } body.light .navbar .navbar-nav .nav-link { color: #0f1020 !important; } body.light .navbar .navbar-nav .nav-link:hover { color: #9F8BE7 !important; } body.light .navbar .navbar-nav .nav-item.active > .nav-link, body.light .navbar .navbar-nav .nav-link.active { color: #9F8BE7 !important; } /* Dropdown */ body.light .navbar .dropdown-menu { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06); } body.light .navbar .dropdown-menu .dropdown-item { color: #0f1020; } body.light .navbar .dropdown-menu .dropdown-item:hover { background: rgba(159, 139, 231, 0.08); color: #9F8BE7; } body.light .navbar .dropdown-menu .dropdown-item:after { background: rgba(0, 0, 0, 0.08); } /* Hamburger icon */ body.light .navbar .icon-bar { color: #0f1020; } /* Theme toggle button */ body.light .navbar .theme-icon { background: rgba(15, 16, 32, 0.07); border-color: rgba(15, 16, 32, 0.12); color: #0f1020; } body.light .navbar .theme-icon:hover { background: rgba(15, 16, 32, 0.12); } /* Scrolled navbar */ body.light .navbar.nav-scroll .navbar-nav { background: rgba(255, 255, 255, 0.96) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); } /* Dropdown toggle arrow */ body.light .navbar .dropdown-toggle::after { border-top-color: #0f1020; } /* ──────────────────────────────────────────────────── 6. NAVBAR — Mobile Responsive ──────────────────────────────────────────────────── */ @media (max-width: 992px) { body.light .navbar .navbar-collapse { background: rgba(245, 246, 250, 0.98); border-top-color: rgba(0, 0, 0, 0.07); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } body.light .navbar .navbar-collapse .nav-link { color: #0f1020 !important; } body.light .navbar .navbar-toggler { color: #0f1020; border-color: rgba(0, 0, 0, 0.15); } body.light .navbar .navbar-nav { box-shadow: none !important; } } /* ──────────────────────────────────────────────────── 7. ND CUSTOM FOOTER ──────────────────────────────────────────────────── */ body.light .nd-footer { border-top-color: rgba(0, 0, 0, 0.1); } body.light .nd-footer-cta { border-bottom-color: rgba(0, 0, 0, 0.1); } body.light .nd-footer-cta h2 { color: #0f1020; } /* Logo text */ body.light .nd-footer-logo .nd-f-brand { color: #0f1020 !important; } body.light .nd-footer-logo .nd-f-sub { color: rgba(0, 0, 0, 0.36) !important; } body.light .nd-footer-logo .nd-f-accent { color: #9F8BE7 !important; } body.light .nd-footer-desc { color: rgba(0, 0, 0, 0.52); } body.light .nd-footer-badge { color: rgba(0, 0, 0, 0.36); } /* Column headings */ body.light .nd-footer-nav-title { color: rgba(0, 0, 0, 0.35); } /* Nav links */ body.light .nd-footer-nav a { color: rgba(0, 0, 0, 0.62); } body.light .nd-footer-nav a:hover { color: #0f1020; } /* Service tags */ body.light .nd-footer-services a { color: rgba(0, 0, 0, 0.56); border-color: rgba(0, 0, 0, 0.1); background: transparent; } body.light .nd-footer-services a:hover { color: #7b5fc0; border-color: rgba(159, 139, 231, 0.38); background: rgba(159, 139, 231, 0.07); } /* Contact items */ body.light .nd-footer-contact-item .nd-ci-icon { border-color: rgba(0, 0, 0, 0.09); color: #7b5fc0; background: rgba(159, 139, 231, 0.06); } body.light .nd-footer-contact-item:hover .nd-ci-icon { background: rgba(159, 139, 231, 0.12); border-color: rgba(159, 139, 231, 0.32); } body.light .nd-footer-contact-item .nd-ci-label { color: rgba(0, 0, 0, 0.32); } body.light .nd-footer-contact-item .nd-ci-value { color: rgba(0, 0, 0, 0.75); } body.light .nd-footer-contact-item .nd-ci-value:hover { color: #0f1020; } /* Social icons */ body.light .nd-footer-social a { border-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.5); } body.light .nd-footer-social a:hover { background: #9F8BE7; border-color: transparent; color: #fff; } /* Newsletter */ body.light .nd-footer-newsletter .nd-nl-label { color: rgba(0, 0, 0, 0.35); } body.light .nd-footer-newsletter input { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.1); color: #0f1020; } body.light .nd-footer-newsletter input:focus { border-color: rgba(159, 139, 231, 0.42); } body.light .nd-footer-newsletter input::placeholder { color: rgba(0, 0, 0, 0.3); } body.light .nd-footer-newsletter .nd-nl-note { color: rgba(0, 0, 0, 0.3); } body.light .nd-footer-newsletter .nd-nl-note a { color: rgba(159, 139, 231, 0.85); } /* Bottom bar */ body.light .nd-footer-bottom { border-top-color: rgba(0, 0, 0, 0.07); } body.light .nd-footer-bottom p, body.light .nd-footer-bottom .nd-bottom-right { color: rgba(0, 0, 0, 0.36); } /* CTA button in footer */ body.light .nd-footer-cta .butn-arrow { background: #0f1020 !important; color: #fff !important; border-color: rgba(15, 16, 32, 0.2) !important; } body.light .nd-footer-cta .butn-arrow .arrow-icon { background: rgba(255, 255, 255, 0.12); } body.light .nd-footer-cta .butn-arrow .arrow-icon svg { stroke: #fff; } /* ──────────────────────────────────────────────────── 8. ND CHATBOT — Light Mode ──────────────────────────────────────────────────── */ /* Chat window */ body.light .nd-chat-box { background: rgba(250, 251, 255, 0.99) !important; border-color: rgba(0, 0, 0, 0.09); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Header */ body.light .nd-cb-header { background: rgba(0, 0, 0, 0.02); border-bottom-color: rgba(0, 0, 0, 0.08); } body.light .nd-header-name { color: #0f1020; } body.light .nd-header-status { color: rgba(0, 0, 0, 0.45); } body.light .nd-hdr-btn { color: rgba(0, 0, 0, 0.42); } body.light .nd-hdr-btn:hover { background: rgba(0, 0, 0, 0.06); color: #0f1020; } /* Messages area scrollbar */ body.light .nd-cb-messages::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); } /* Welcome screen */ body.light .nd-welcome h3 { color: #0f1020; } body.light .nd-welcome-can { color: rgba(0, 0, 0, 0.46); } body.light .nd-capabilities { background: rgba(0, 0, 0, 0.025); border-color: rgba(0, 0, 0, 0.08); } body.light .nd-cap-row { color: rgba(0, 0, 0, 0.74); } /* Quick buttons */ body.light .nd-quick-btn { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.7); } body.light .nd-quick-btn:hover { background: rgba(0, 198, 248, 0.09); border-color: rgba(0, 198, 248, 0.3); color: #007a94; box-shadow: 0 4px 14px rgba(0, 198, 248, 0.1); } /* AI message bubbles */ body.light .nd-msg-row.nd-ai .nd-msg-bubble { background: rgba(0, 0, 0, 0.042); border-color: rgba(0, 0, 0, 0.07); color: #0f1020; } /* Links inside AI messages */ body.light .nd-msg-row.nd-ai .nd-msg-bubble a { color: #007a94; border-bottom-color: rgba(0, 122, 148, 0.28); } body.light .nd-msg-row.nd-ai .nd-msg-bubble a:hover { border-bottom-color: #007a94; } /* Timestamps */ body.light .nd-msg-time { color: rgba(0, 0, 0, 0.37); } /* Date divider */ body.light .nd-date-div span { color: rgba(0, 0, 0, 0.37); } body.light .nd-date-div::before, body.light .nd-date-div::after { background: rgba(0, 0, 0, 0.09); } /* Typing indicator */ body.light .nd-typing-bubble { background: rgba(0, 0, 0, 0.042); border-color: rgba(0, 0, 0, 0.07); } body.light .nd-typing-label { color: rgba(0, 0, 0, 0.4); } /* Input area */ body.light .nd-cb-input { border-top-color: rgba(0, 0, 0, 0.08); background: rgba(0, 0, 0, 0.018); } body.light .nd-input-field { background: rgba(0, 0, 0, 0.042); border-color: rgba(0, 0, 0, 0.1); color: #0f1020; } body.light .nd-input-field::placeholder { color: rgba(0, 0, 0, 0.34); } body.light .nd-input-field:focus { border-color: rgba(0, 198, 248, 0.35); box-shadow: 0 0 0 3px rgba(0, 198, 248, 0.07); } body.light .nd-input-action { color: rgba(0, 0, 0, 0.42); } body.light .nd-input-action:hover { background: rgba(0, 0, 0, 0.05); color: #007a94; } body.light .nd-file-label { color: rgba(0, 0, 0, 0.42); } body.light .nd-file-label:hover { background: rgba(0, 0, 0, 0.05); color: #7b5fc0; } /* ──────────────────────────────────────────────────── 9. CONTACT PAGE ──────────────────────────────────────────────────── */ /* Box-info cards */ body.light .box-info { box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06); } body.light .box-info .fs-40 { color: #9F8BE7; } body.light .box-info h6 { color: #0f1020; } body.light .box-info p a { color: rgba(0, 0, 0, 0.65); } body.light .box-info p a:hover { color: #9F8BE7; } /* Separator line inside box */ body.light .line-bottom { border-bottom-color: rgba(0, 0, 0, 0.1) !important; } /* Form inputs */ body.light .contact .form2 input, body.light .contact .form2 textarea { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.15); color: #0f1020; } body.light .contact .form2 input:focus, body.light .contact .form2 textarea:focus { border-color: #9F8BE7; background: #fff; } body.light .contact .form2 input::placeholder, body.light .contact .form2 textarea::placeholder { color: rgba(0, 0, 0, 0.35); } /* ──────────────────────────────────────────────────── 10. PAGE HERO (pg-hero used in inner pages) ──────────────────────────────────────────────────── */ body.light .pg-hero h1 { color: #0f1020; } body.light .pg-hero .butn-bord-sm { color: #0f1020; } /* ──────────────────────────────────────────────────── 11. FAQ PAGE ──────────────────────────────────────────────────── */ body.light .faq-style1 .accordion-item { border-color: rgba(0, 0, 0, 0.09) !important; background: transparent; } body.light .faq-style1 .accordion-item h6, body.light .faq-style1 .accordion-item .accordion-button { color: #0f1020; } body.light .faq-style1 .accordion-item .accordion-button:not(.collapsed) { color: #0f1020; } body.light .faq-style1 .accordion-body, body.light .faq-style1 .accordion-body p { color: rgba(0, 0, 0, 0.62) !important; } body.light .faq-style1 .accordion-item .arrow { filter: invert(1); } body.light .faq-style1 .accordion-item.active { background: rgba(0, 0, 0, 0.02); } /* ──────────────────────────────────────────────────── 12. PRICING PAGE ──────────────────────────────────────────────────── */ body.light .price-style1 .item { border-color: rgba(0, 0, 0, 0.09) !important; } body.light .price-style1 .item .info h6 { color: #0f1020; } body.light .price-style1 .item .info span, body.light .price-style1 .item p { color: rgba(0, 0, 0, 0.56); } body.light .price-style1 .item .butn-bord-sm { border-color: rgba(0, 0, 0, 0.25); color: #0f1020; } /* ──────────────────────────────────────────────────── 13. SERVICES PAGE ──────────────────────────────────────────────────── */ body.light .serv-style2 .item { border-color: rgba(0, 0, 0, 0.09); } body.light .serv-style4 .item { border-color: rgba(0, 0, 0, 0.2) !important; } body.light .serv-style4 .item:hover { color: #0f1020 !important; } /* ──────────────────────────────────────────────────── 14. TEAM PAGE ──────────────────────────────────────────────────── */ body.light .team-style1 .item { border-color: rgba(0, 0, 0, 0.08) !important; } body.light .team-reval .item-row { border-color: rgba(0, 0, 0, 0.1) !important; } body.light .team-reval .item-row .social-icon a { background: rgba(0, 0, 0, 0.04); color: #0f1020; border-color: rgba(0, 0, 0, 0.08); } /* ──────────────────────────────────────────────────── 15. PORTFOLIO PAGE ──────────────────────────────────────────────────── */ body.light .portfolio-style2 .portfolio-vertical::after { background: linear-gradient(#f5f6fa, transparent, #f5f6fa); } /* ──────────────────────────────────────────────────── 16. BLOG / BLOG DETAILS ──────────────────────────────────────────────────── */ body.light .blog-style1 .item .text { border-color: rgba(0, 0, 0, 0.09) !important; } body.light .sidebar .widget { border-color: rgba(0, 0, 0, 0.08) !important; } body.light .main-post .post-qoute { border-color: rgba(0, 0, 0, 0.1) !important; background: rgba(0, 0, 0, 0.02); color: #0f1020; } body.light .sidebar .search-box input { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.15); } body.light .sidebar .widget.tags a, body.light .main-post .info-area .tags a, body.light .main-post .info-area .share-icon a { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.09); color: rgba(0, 0, 0, 0.65); } /* ──────────────────────────────────────────────────── 17. GENERAL SECTION ELEMENTS ──────────────────────────────────────────────────── */ /* Section head border */ body.light .sec-head.bord { border-top-color: rgba(0, 0, 0, 0.12) !important; } body.light .sec-head h6 { color: rgba(0, 0, 0, 0.55); } body.light .sec-head h6::before { background: #9F8BE7 !important; } /* Numbers section */ body.light .numbers .item { border-color: rgba(0, 0, 0, 0.1) !important; } body.light .numbers .item::before, body.light .numbers .item::after, body.light .numbers .item span::before { background: rgba(0, 0, 0, 0.08) !important; } /* Awards / Item rows */ body.light .awards-reval .item-row { border-color: rgba(0, 0, 0, 0.1) !important; } /* Generic bord helper */ body.light .bord { border-color: rgba(0, 0, 0, 0.1) !important; } /* Horizontal rule */ body.light hr { border-color: rgba(0, 0, 0, 0.1); } /* Stroke text (outline headings) */ body.light .main-marq .box:last-of-type .item:nth-of-type(odd) h4 { -webkit-text-stroke-color: rgba(15, 16, 32, 0.2) !important; } body.light .main-marq::after { background: linear-gradient( to left, #f5f6fa, rgba(245, 246, 250, 0) 250px, rgba(245, 246, 250, 0) calc(100% - 250px), #f5f6fa ) !important; } /* About page - intro style border */ body.light .intro-style1 .box-bord { border-color: rgba(0, 0, 0, 0.1) !important; } /* Testimonials */ body.light .testim-cards .stackCard, body.light .testim-cards .item { background: #edf0f8 !important; } body.light .testim-cards .stackCard.revs, body.light .testim-cards .item.revs { background: #e0e4f2 !important; } /* Interactive gallery */ body.light .interactive-sec .cluom, body.light .hero-style7 .img::after { border-color: rgba(0, 0, 0, 0.08) !important; } body.light .interactive-sec .cluom::after { border-color: rgba(0, 0, 0, 0.5) !important; } /* Features */ body.light .features .item { background: #edf0f8 !important; } /* ──────────────────────────────────────────────────── 18. CONTACT PAGE STYLE2 SPECIFICS ──────────────────────────────────────────────────── */ body.light .contact-style2 { color: #0f1020; } /* ──────────────────────────────────────────────────── 19. ABOUT PAGE SPECIFICS ──────────────────────────────────────────────────── */ body.light .team-intro .item.bg-light { background: #edf0f8 !important; color: #0f1020 !important; } /* ──────────────────────────────────────────────────── 20. ACCORDION (STYLE 2) ──────────────────────────────────────────────────── */ body.light .accordion-style2 .accordion-item { border-color: rgba(0, 0, 0, 0.1); } body.light .accordion-style2 .accordion-button, body.light .accordion-style2 .accordion-button:not(.collapsed) { color: #0f1020; background: transparent; } body.light .accordion-style2 .accordion-body { color: rgba(0, 0, 0, 0.62); } /* ──────────────────────────────────────────────────── 21. SMOOTH SCROLLBAR (SCROLLSMOOTHER) ──────────────────────────────────────────────────── */ body.light #smooth-wrapper { background: #f5f6fa; } /* ──────────────────────────────────────────────────── 22. FORM ELEMENTS (GLOBAL) ──────────────────────────────────────────────────── */ body.light input[type="text"], body.light input[type="email"], body.light input[type="tel"], body.light textarea { color: #0f1020; } body.light input::placeholder, body.light textarea::placeholder { color: rgba(0, 0, 0, 0.35); } /* ──────────────────────────────────────────────────── 23. BRAND / CLIENT LOGOS ──────────────────────────────────────────────────── */ body.light .marq-brand .item a { background: #edf0f8; } body.light .brand-style1 .item { border-color: rgba(0, 0, 0, 0.1) !important; } body.light .brand-style1 .item:hover { background: #0f1020; border-color: #0f1020 !important; } /* ──────────────────────────────────────────────────── 24. SECTION PADDING BACKGROUNDS ──────────────────────────────────────────────────── */ body.light .sub-bg { background: #edf0f8 !important; } body.light .sub-bg2 { background: #dde1f2 !important; } /* ──────────────────────────────────────────────────── 25. THEME TOGGLE ICON — ensure correct display ──────────────────────────────────────────────────── */ body:not(.light) .theme-icon .sun { display: none; } body:not(.light) .theme-icon .moon { display: inline-block; } body.light .theme-icon .sun { display: inline-block; line-height: 0; } body.light .theme-icon .moon { display: none; line-height: 0; }