/* * theme-light.css — Nexalith Technologies * Light theme overrides. Applied when . * Smooth transition on all affected elements via the body transition below. */ /* ── Global Transition for Smooth Switching ─────────────────────── */ body[data-theme='light'], body[data-theme='light'] *:not(script):not(style) { transition: background-color 0.4s ease, background 0.4s ease, color 0.35s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; } /* ── CSS Variable Overrides ─────────────────────────────────────── */ body[data-theme='light'] { --body-bg: #f0f4f8; --theme-color2: #f5f7fa; --theme-color3: #e8ecf1; --theme-color2-rgb: 245, 247, 250; --theme-color3-rgb: 232, 236, 241; --theme-color2-text-color: #111; --theme-color3-text-color: #111; --text-color: #444; --headings-color: #111; --theme-color-white: #111; --theme-color-white-rgb: 17, 17, 17; --theme-color-black: #f5f7fa; --theme-color-black-rgb: 245, 247, 250; --theme-color-dark: #d8dde6; --border-color1-rgba: rgba(0, 0, 0, 0.12); --border-color2-rgba: rgba(0, 0, 0, 0.08); --bg-theme-color2: #f5f7fa; --bg-theme-color3: #e8ecf1; --link-hover-color: #0a7a7a; } /* ── Body & Page Wrapper ────────────────────────────────────────── */ body[data-theme='light'] { background-color: var(--body-bg); color: var(--text-color); } body[data-theme='light'] .page-wrapper { background-color: var(--body-bg); } /* ── Headings & Text ────────────────────────────────────────────── */ body[data-theme='light'] h1, body[data-theme='light'] h2, body[data-theme='light'] h3, body[data-theme='light'] h4, body[data-theme='light'] h5, body[data-theme='light'] h6 { color: #111; } body[data-theme='light'] p, body[data-theme='light'] .text { color: #555; } body[data-theme='light'] b, body[data-theme='light'] strong { color: #111; } /* ── Main Header ────────────────────────────────────────────────── */ body[data-theme='light'] .main-header, body[data-theme='light'] .header-lower, body[data-theme='light'] .main-box, body[data-theme='light'] .sticky-header { background-color: #fff; border-bottom: 1px solid rgba(0,0,0,0.08); } body[data-theme='light'] .main-menu .navigation > li > a, body[data-theme='light'] .main-menu .navigation li a { color: #222; } body[data-theme='light'] .main-menu .navigation > li > a:hover, body[data-theme='light'] .main-menu .navigation > li.current > a { color: var(--theme-color1); } /* Dropdown menus */ body[data-theme='light'] .main-menu .navigation li ul { background-color: #fff; border: 1px solid rgba(0,0,0,0.09); box-shadow: 0 8px 32px rgba(0,0,0,0.10); } body[data-theme='light'] .main-menu .navigation li ul li a { color: #222; border-bottom: 1px solid rgba(0,0,0,0.06); } body[data-theme='light'] .main-menu .navigation li ul li a:hover { color: var(--theme-color1); background: rgba(0,0,0,0.03); } /* Logo text */ body[data-theme='light'] .logo a, body[data-theme='light'] .logo a span { color: #111 !important; } /* Header btn */ body[data-theme='light'] .header-btn { background-color: var(--theme-color1); color: #0a1a1a; } /* ── Search icon in header ───────────────────────────────────────── */ /* The search button sits on a white header — force dark icon colour */ body[data-theme='light'] .ui-btn-search button, body[data-theme='light'] .ui-btn-search .ui-btn, body[data-theme='light'] .search-btn, body[data-theme='light'] .main-header__search, body[data-theme='light'] .outer-box .ui-btn { color: #222 !important; background: transparent; border-color: rgba(0,0,0,0.18); } body[data-theme='light'] .ui-btn-search button i, body[data-theme='light'] .search-btn i, body[data-theme='light'] .main-header__search i, body[data-theme='light'] .outer-box .ui-btn i { color: #222 !important; } body[data-theme='light'] .ui-btn-search button:hover, body[data-theme='light'] .search-btn:hover { color: var(--theme-color1) !important; } body[data-theme='light'] .ui-btn-search button:hover i, body[data-theme='light'] .search-btn:hover i { color: var(--theme-color1) !important; } /* ── Mobile Menu ─────────────────────────────────────────────────── */ body[data-theme='light'] .mobile-menu .menu-box { background-color: #fff; } body[data-theme='light'] .mobile-menu .navigation li a { color: #222; border-bottom: 1px solid rgba(0,0,0,0.07); } body[data-theme='light'] .mobile-menu .upper-box { background-color: #f5f7fa; border-bottom: 1px solid rgba(0,0,0,0.08); } body[data-theme='light'] .mobile-menu .nav-logo a, body[data-theme='light'] .mobile-menu .nav-logo a span { color: #111 !important; } /* ── Preloader ─────────────────────────────────────────────────── */ body[data-theme='light'] .preloader { background-color: #fff; } /* ── Sections with dark backgrounds ─────────────────────────────── */ body[data-theme='light'] section, body[data-theme='light'] .section-bg, body[data-theme='light'] .bg-black, body[data-theme='light'] [class*="bg-dark"], body[data-theme='light'] [style*="background: #0"], body[data-theme='light'] [style*="background-color: #0"] { background-color: #f0f4f8 !important; } /* Keep accent-color sections intact */ body[data-theme='light'] [class*="bg-theme-color1"], body[data-theme='light'] .bg-theme-color1 { background-color: var(--theme-color1) !important; } /* ── Cards / Boxes ────────────────────────────────────────────── */ body[data-theme='light'] .service-block-one .inner-box, body[data-theme='light'] .feature-block-one .inner-box, body[data-theme='light'] .project-block-one .inner-box, body[data-theme='light'] .team-block-one .inner-box, body[data-theme='light'] .testimonial-block-one .inner-box, body[data-theme='light'] .news-block-one .inner-box, body[data-theme='light'] .about-section .content-box, body[data-theme='light'] .contact-form-section .form-inner, body[data-theme='light'] .faq-section .accordion-box { background-color: #fff; border: 1px solid rgba(0,0,0,0.07); box-shadow: 0 4px 24px rgba(0,0,0,0.06); } /* ── Banner / Hero Section ───────────────────────────────────────── */ body[data-theme='light'] .banner-section, body[data-theme='light'] .banner-section-one, body[data-theme='light'] .banner-section-two, body[data-theme='light'] .main-slider { background-color: #e4eaf2 !important; } body[data-theme='light'] .banner-section h1, body[data-theme='light'] .banner-section .title, body[data-theme='light'] .main-slider h1, body[data-theme='light'] .main-slider .title { color: #0a1a1a; } /* ── Footer — FULLY LIGHT ────────────────────────────────────────── */ body[data-theme='light'] .footer-section { background-color: #f0f4f8 !important; background-image: none !important; } /* Footer headings */ body[data-theme='light'] .footer-section h1, body[data-theme='light'] .footer-section h2, body[data-theme='light'] .footer-section h3, body[data-theme='light'] .footer-section h4, body[data-theme='light'] .footer-section h5, body[data-theme='light'] .footer-section h6, body[data-theme='light'] .footer-section .title { color: #111 !important; } /* Footer text & spans */ body[data-theme='light'] .footer-section p, body[data-theme='light'] .footer-section .text, body[data-theme='light'] .footer-section span:not(.fcl-text):not(.fcl-icon):not(.theme-icon) { color: #555; } /* Footer links */ body[data-theme='light'] .footer-section a:not(.floating-contact-label):not(.theme-toggle-btn) { color: #444; } body[data-theme='light'] .footer-section a:not(.floating-contact-label):not(.theme-toggle-btn):hover { color: var(--theme-color1); } body[data-theme='light'] .footer-section .footer-menu li a, body[data-theme='light'] .footer-section .user-links li a { color: #555; } body[data-theme='light'] .footer-section .footer-menu li a:hover, body[data-theme='light'] .footer-section .user-links li a:hover { color: var(--theme-color1); } /* "Let's Talk" section */ body[data-theme='light'] .footer-section .lets-talk-content .title, body[data-theme='light'] .footer-section .footer-top-wrapper h2 { color: #111 !important; } body[data-theme='light'] .footer-section .arrow-icon { color: #111; border-color: rgba(0,0,0,0.2); } body[data-theme='light'] .footer-section .arrow-icon:hover { color: #fff; background-color: var(--theme-color1); border-color: var(--theme-color1); } /* Footer copyright bar */ body[data-theme='light'] .footer-bottom { border-top: 1px solid rgba(0,0,0,0.1); } body[data-theme='light'] .footer-bottom p { color: #666; } /* Footer social icons */ body[data-theme='light'] .footer-section .social-icon a { color: #444; background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.12); } body[data-theme='light'] .footer-section .social-icon a:hover { background: var(--theme-color1); color: #0a1a1a; border-color: var(--theme-color1); } /* Footer email input */ body[data-theme='light'] .footer-section input[type='text'], body[data-theme='light'] .footer-section input[type='email'], body[data-theme='light'] .footer-section form input { background-color: #fff; border: 1px solid rgba(0,0,0,0.18); color: #222; } body[data-theme='light'] .footer-section form input::placeholder { color: #888 !important; } /* Footer widget "Quick Link" & "Our Solutions" headings */ body[data-theme='light'] .footer-section .font-size-24 { color: #111 !important; } /* Footer divider line shape image — hide or dim */ body[data-theme='light'] .footer-section .footer-top-wrapper { border-bottom: 1px solid rgba(0,0,0,0.1); } /* ── Scroll-to-top ───────────────────────────────────────────────── */ body[data-theme='light'] .scroll-to-top { background-color: var(--theme-color1); color: #0a1a1a; } /* ── Buttons ─────────────────────────────────────────────────────── */ body[data-theme='light'] .theme-btn, body[data-theme='light'] .btn-style-one { background-color: var(--theme-color1); color: #0a1a1a; } body[data-theme='light'] .theme-btn:hover, body[data-theme='light'] .btn-style-one:hover { background-color: #0d9a9a; color: #fff; } /* ── Forms ───────────────────────────────────────────────────────── */ body[data-theme='light'] .form-control, body[data-theme='light'] .input-text, body[data-theme='light'] input[type="text"], body[data-theme='light'] input[type="email"], body[data-theme='light'] input[type="tel"], body[data-theme='light'] textarea { background-color: #fff; border: 1px solid rgba(0,0,0,0.15); color: #222; } body[data-theme='light'] .form-control::placeholder, body[data-theme='light'] input::placeholder, body[data-theme='light'] textarea::placeholder { color: #888 !important; opacity: 1 !important; } body[data-theme='light'] .form-control:focus { color: #222 !important; border-color: var(--theme-color1); } /* ── Search Popup ────────────────────────────────────────────────── */ body[data-theme='light'] .search-popup { background-color: rgba(255,255,255,0.97); } body[data-theme='light'] .search-popup input { background-color: #f0f4f8; color: #222; border-color: rgba(0,0,0,0.12); } /* ── Accordion / FAQ ─────────────────────────────────────────────── */ body[data-theme='light'] .accordion-item, body[data-theme='light'] .accordion-button { background-color: #fff; color: #222; border: 1px solid rgba(0,0,0,0.08); } body[data-theme='light'] .accordion-button:not(.collapsed) { background-color: #e4eaf2; color: #111; } /* ── Section title / subtitles ───────────────────────────────────── */ body[data-theme='light'] .sec-title .title, body[data-theme='light'] .sec-title h2, body[data-theme='light'] .section-title h2 { color: #111; } body[data-theme='light'] .sec-title .sub-title, body[data-theme='light'] .section-title .sub-title { color: #666; } /* ── Borders & Dividers ──────────────────────────────────────────── */ body[data-theme='light'] hr, body[data-theme='light'] .border-top, body[data-theme='light'] .border-bottom { border-color: rgba(0,0,0,0.10) !important; } /* ── Custom cursor ───────────────────────────────────────────────── */ body[data-theme='light'] #cursorDot { background-color: var(--theme-color1); mix-blend-mode: multiply; } /* ── Skill section progress bars ────────────────────────────────── */ /* style-2 (Apps Dev) and style-3 (Web Dev) bars are near-black in dark theme — make them readable on light background */ body[data-theme='light'] .skill-section1 .progress { background-color: #dce4ef; } body[data-theme='light'] .skill-section1 .progress.style-2 .progress-bar, body[data-theme='light'] .skill-section1 .progress.style-2 { background-color: #2b3b52; } body[data-theme='light'] .skill-section1 .progress.style-3 .progress-bar, body[data-theme='light'] .skill-section1 .progress.style-3 { background-color: #3a4d66; } body[data-theme='light'] .skill-section1 .progress.style-3 h3, body[data-theme='light'] .skill-section1 .progress.style-3 .box-title, body[data-theme='light'] .skill-section1 .progress.style-3 .progress-value { color: #fff !important; } body[data-theme='light'] .skill-section1 .progress.style-2 h3, body[data-theme='light'] .skill-section1 .progress.style-2 .box-title, body[data-theme='light'] .skill-section1 .progress.style-2 .progress-value { color: #fff !important; } /* skill box titles (Figma, XD, etc.) */ body[data-theme='light'] .skill-section1 .skill-box .skill-thumb h6.title { color: #222; } /* ── Service cards (about page) — light-mode hover ──────────────── ROOT CAUSE: .service-block-two::before has a dark radial-gradient that expands (width 0→100%, opacity 0→1) on hover. We neutralize the ::before and restore a light hover instead. ──────────────────────────────────────────────────────────────────── */ /* Kill the dark ::before pseudo-element in light mode */ body[data-theme='light'] .service-block-two::before, body[data-theme='light'] .service-block-two:before { background: transparent !important; opacity: 0 !important; display: none !important; } /* Default (resting) card */ body[data-theme='light'] .service-block-two { background-color: #fff !important; border: 1px solid rgba(0,0,0,0.08) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.05) !important; border-radius: 12px; } body[data-theme='light'] .service-block-two .head .num { color: var(--theme-color1) !important; } body[data-theme='light'] .service-block-two .content h3.title, body[data-theme='light'] .service-block-two .content h3.title a, body[data-theme='light'] .service-block-two .content .title { color: #111 !important; } body[data-theme='light'] .service-block-two .content p, body[data-theme='light'] .service-block-two .content p.text { color: #555 !important; } body[data-theme='light'] .service-block-two .head .icon i { color: var(--theme-color1) !important; } /* Hover — white card lifts with cyan border (no dark fill) */ body[data-theme='light'] .service-block-two:hover { background-color: #ffffff !important; border-color: hsl(185, 100%, 56%) !important; box-shadow: 0 12px 36px rgba(0,0,0,0.10) !important; transform: translateY(-4px); } /* Force all text to stay dark on hover */ body[data-theme='light'] .service-block-two:hover .content h3.title, body[data-theme='light'] .service-block-two:hover .content h3.title a, body[data-theme='light'] .service-block-two:hover .content .title { color: #111 !important; } body[data-theme='light'] .service-block-two:hover .content p, body[data-theme='light'] .service-block-two:hover .content p.text { color: #444 !important; } body[data-theme='light'] .service-block-two:hover .head .num { color: var(--theme-color1) !important; } body[data-theme='light'] .service-block-two:hover .head .icon i { color: var(--theme-color1) !important; } /* style-1 variant */ body[data-theme='light'] .service-block-two.style-1 { background-color: #fff !important; border: 1px solid rgba(0,0,0,0.08) !important; } body[data-theme='light'] .service-block-two.style-1:hover { background-color: #fff !important; border-color: hsl(185, 100%, 56%) !important; box-shadow: 0 12px 36px rgba(0,0,0,0.10) !important; transform: translateY(-4px); }