/* ══════════════════════════════════════ SHERRY SCRAWLS — LIGHT MODE THEME Toggle: ══════════════════════════════════════ */ /* ── LIGHT PALETTE ───────────────────── */ [data-theme="light"] body { background: #f5f4ef; color: #101820; } [data-theme="light"]::-webkit-scrollbar-track { background: #f5f4ef; } /* ── NAV ─────────────────────────────── */ [data-theme="light"] #site-header { background: #ffffff; border-bottom-color: var(--lime); box-shadow: 0 2px 16px rgba(16,24,32,0.06); } [data-theme="light"] #site-header.scrolled { box-shadow: 0 4px 30px rgba(16,24,32,0.1); } [data-theme="light"] .logo-text { color: #101820; } [data-theme="light"] .logo { color: #101820; } [data-theme="light"] .main-nav a { color: rgba(16,24,32,0.6); } [data-theme="light"] .main-nav a:hover { color: #101820; } [data-theme="light"] .hamburger span { background: #101820; } [data-theme="light"] .mobile-nav { background: #ffffff; border-top-color: rgba(16,24,32,0.1); } [data-theme="light"] .mobile-nav a { color: #101820; border-bottom-color: rgba(16,24,32,0.08); } /* ── THEME TOGGLE BUTTON ─────────────── */ .theme-toggle-btn { width: 36px; height: 36px; background: rgba(198,220,0,0.12); border: 1px solid rgba(198,220,0,0.3); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--lime); flex-shrink: 0; clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); transition: background 0.2s, border-color 0.2s; } .theme-toggle-btn:hover { background: rgba(198,220,0,0.22); border-color: rgba(198,220,0,0.6); } [data-theme="light"] .theme-toggle-btn { background: rgba(16,24,32,0.07); border-color: rgba(16,24,32,0.2); color: #101820; } [data-theme="light"] .theme-toggle-btn:hover { background: rgba(16,24,32,0.14); } .theme-toggle-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ── HERO (keep dark even in light mode) ── */ [data-theme="light"] #hero { background: #101820; } [data-theme="light"] #about-hero { background: #101820; } [data-theme="light"] .hero-bg-grid { background-image: linear-gradient(rgba(198,220,0,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(198,220,0,0.05) 1px, transparent 1px); } /* ── STATS STRIP (lime - same both modes) */ /* ── PROBLEM SECTION ─────────────────── */ [data-theme="light"] #problem { background: #f5f4ef; } [data-theme="light"] #problem::after { background: radial-gradient(circle, rgba(0,40,220,0.04) 0%, transparent 70%); } [data-theme="light"] .pain-card { background: rgba(16,24,32,0.03); border-color: rgba(16,24,32,0.1); border-left-color: rgba(16,24,32,0.15); } [data-theme="light"] .pain-card:hover { border-left-color: var(--blue); background: rgba(0,40,220,0.04); } [data-theme="light"] .pain-card--accent { background: rgba(198,220,0,0.08) !important; border-color: rgba(198,220,0,0.3) !important; border-left-color: var(--lime) !important; } [data-theme="light"] .pain-icon { color: rgba(16,24,32,0.3); } [data-theme="light"] .pain-card p { color: rgba(16,24,32,0.7); } [data-theme="light"] .pain-card--accent p { color: #101820; } /* ── SERVICES ────────────────────────── */ [data-theme="light"] #services { background: #eceae3; } [data-theme="light"] .services-grid { background: rgba(16,24,32,0.06); } [data-theme="light"] .service-card { background: #f5f4ef; } [data-theme="light"] .service-card::before { background: rgba(16,24,32,0.1); } [data-theme="light"] .service-card:hover { background: rgba(0,40,220,0.04); } [data-theme="light"] .service-card h3 { color: #101820; } [data-theme="light"] .service-card > p { color: rgba(16,24,32,0.6); } [data-theme="light"] .service-num { color: rgba(16,24,32,0.05); } [data-theme="light"] .service-list li { color: rgba(16,24,32,0.65); border-bottom-color: rgba(16,24,32,0.07); } /* ── PROCESS ─────────────────────────── */ [data-theme="light"] #process { background: #f5f4ef; } [data-theme="light"] .process-step { border-bottom-color: rgba(16,24,32,0.07); } [data-theme="light"] .process-step:hover { background: rgba(16,24,32,0.02); } [data-theme="light"] .step-content h3 { color: #101820; } [data-theme="light"] .step-content p { color: rgba(16,24,32,0.6); } /* ── WHY US ──────────────────────────── */ [data-theme="light"] #why-us { background: #eceae3; } [data-theme="light"] .diff-grid { background: rgba(16,24,32,0.06); } [data-theme="light"] .diff-card { background: #f5f4ef; } [data-theme="light"] .diff-card::after { color: rgba(16,24,32,0.04); } [data-theme="light"] .diff-card:hover { background: rgba(0,40,220,0.04); } [data-theme="light"] .diff-card h3 { color: #101820; } [data-theme="light"] .diff-card p { color: rgba(16,24,32,0.6); } /* ── ERP ─────────────────────────────── */ [data-theme="light"] #erp { background: #f5f4ef; } [data-theme="light"] #erp::before { background-image: linear-gradient(rgba(0,40,220,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,40,220,0.03) 1px, transparent 1px); } [data-theme="light"] .erp-features li { color: rgba(16,24,32,0.7); } [data-theme="light"] .erp-window { background: #eceae3; border-color: rgba(0,40,220,0.15); box-shadow: 24px 24px 60px rgba(0,0,0,0.15); } [data-theme="light"] .erp-window-bar { background: #d8d6d0; } [data-theme="light"] .erp-screen { } [data-theme="light"] .erp-row.header { color: rgba(16,24,32,0.4); border-bottom-color: rgba(16,24,32,0.1); } [data-theme="light"] .erp-metric { background: #f5f4ef; border-color: rgba(16,24,32,0.07); } [data-theme="light"] .erp-metric p { color: rgba(16,24,32,0.4); } [data-theme="light"] .erp-metric strong { color: #101820; } /* ── TESTIMONIAL ─────────────────────── */ [data-theme="light"] #testimonial { background: #eceae3; } [data-theme="light"] #testimonial::before { color: rgba(16,24,32,0.04); } [data-theme="light"] .testi-quote { color: #101820; } [data-theme="light"] .testi-meta p { color: rgba(16,24,32,0.5); } [data-theme="light"] .testi-meta strong { color: #101820; } /* ── CONTACT / CTA ───────────────────── */ [data-theme="light"] #contact { background: #f5f4ef; } [data-theme="light"] .contact-details p { color: rgba(16,24,32,0.55); } [data-theme="light"] .contact-form { background: #eceae3; border-color: rgba(16,24,32,0.08); } [data-theme="light"] .form-group label { color: rgba(16,24,32,0.55); } [data-theme="light"] .form-group input, [data-theme="light"] .form-group select, [data-theme="light"] .form-group textarea { background: #ffffff; border-color: rgba(16,24,32,0.12); border-bottom-color: rgba(16,24,32,0.2); color: #101820; } [data-theme="light"] .form-group input::placeholder, [data-theme="light"] .form-group textarea::placeholder { color: rgba(16,24,32,0.3); } [data-theme="light"] .form-group input:focus, [data-theme="light"] .form-group select:focus, [data-theme="light"] .form-group textarea:focus { border-color: var(--lime); border-bottom-color: var(--lime); } [data-theme="light"] .form-group select option { background: #ffffff; color: #101820; } /* ── FOOTER ──────────────────────────── */ [data-theme="light"] #footer { background: #eceae3; border-top-color: rgba(16,24,32,0.08); } [data-theme="light"] .footer-top { border-bottom-color: rgba(16,24,32,0.08); } [data-theme="light"] .footer-tagline { color: rgba(16,24,32,0.35); } [data-theme="light"] .footer-links a { color: rgba(16,24,32,0.55); } [data-theme="light"] .footer-links a:hover { color: #101820; } [data-theme="light"] .footer-bottom p { color: rgba(16,24,32,0.3); } /* ── SECTION HEADING + TEXT ──────────── */ [data-theme="light"] .section-heading { color: #101820; } [data-theme="light"] .body-text { color: rgba(16,24,32,0.7); } /* ══════════════════════════════════ ABOUT PAGE LIGHT OVERRIDES ══════════════════════════════════ */ [data-theme="light"] #founder { background: #ffffff; } [data-theme="light"] .founder-photo-frame { background: #eceae3; border-color: rgba(16,24,32,0.1); } [data-theme="light"] .fss-item { background: #eceae3; border-color: rgba(16,24,32,0.1); color: rgba(16,24,32,0.5); } [data-theme="light"] .fss-item:hover { background: var(--blue); color: #ffffff; } [data-theme="light"] .founder-para { color: rgba(16,24,32,0.7); } [data-theme="light"] .founder-para--bold { color: #101820; } [data-theme="light"] .founder-signature { border-top-color: rgba(16,24,32,0.1); } [data-theme="light"] .sig-title { color: rgba(16,24,32,0.4); } [data-theme="light"] #values { background: #f5f4ef; } [data-theme="light"] .values-grid { background: rgba(16,24,32,0.06); } [data-theme="light"] .value-card { background: #ffffff; } [data-theme="light"] .value-card h3 { color: #101820; } [data-theme="light"] .value-card p { color: rgba(16,24,32,0.6); } [data-theme="light"] .value-num { color: rgba(16,24,32,0.04); } [data-theme="light"] #journey { background: #ffffff; } [data-theme="light"] .tl-content h3 { color: #101820; } [data-theme="light"] .tl-content p { color: rgba(16,24,32,0.58); } [data-theme="light"] .tl-dot { background: #d0d0c8; border-color: rgba(16,24,32,0.2); } [data-theme="light"] .tl-content--featured { background: rgba(198,220,0,0.08); border-color: rgba(198,220,0,0.25); } [data-theme="light"] .tl-content--blue { background: rgba(0,40,220,0.06); border-color: rgba(0,40,220,0.15); } [data-theme="light"] .tl-year { color: rgba(16,24,32,0.35); } [data-theme="light"] #structure { background: #f5f4ef; } [data-theme="light"] .struct-intro { color: rgba(16,24,32,0.6); } [data-theme="light"] .org-box--child { background: #eceae3; border-color: rgba(16,24,32,0.08); } [data-theme="light"] .org-box h3 { color: #101820; } [data-theme="light"] .org-box p { color: rgba(16,24,32,0.7); } [data-theme="light"] .org-box-meta span { color: rgba(16,24,32,0.45); border-color: rgba(16,24,32,0.15); } [data-theme="light"] .org-box-note { color: rgba(16,24,32,0.4); } [data-theme="light"] .struct-note { color: rgba(16,24,32,0.38); } [data-theme="light"] .name-tbd { color: rgba(16,24,32,0.4); } [data-theme="light"] #team { background: #eceae3; } [data-theme="light"] .team-intro { color: rgba(16,24,32,0.58); } [data-theme="light"] .team-grid { background: rgba(16,24,32,0.06); } [data-theme="light"] .team-card { background: #f5f4ef; } [data-theme="light"] .team-info h3 { color: #101820; } [data-theme="light"] .team-info p { color: rgba(16,24,32,0.58); } [data-theme="light"] .team-tags span { color: rgba(16,24,32,0.4); border-color: rgba(16,24,32,0.1); } [data-theme="light"] .team-card:hover .team-tags span { color: rgba(16,24,32,0.7); border-color: rgba(16,24,32,0.25); } [data-theme="light"] .join-team { background: #f5f4ef; border-color: rgba(16,24,32,0.1); } [data-theme="light"] .join-team-content h3 { color: #101820; } [data-theme="light"] .join-team-content p { color: rgba(16,24,32,0.55); } [data-theme="light"] #why-us-about { background: #ffffff; } [data-theme="light"] .why-row { border-bottom-color: rgba(16,24,32,0.07); } [data-theme="light"] .why-row:first-child { border-top-color: rgba(16,24,32,0.07); } [data-theme="light"] .why-row-num { color: rgba(16,24,32,0.07); } [data-theme="light"] .why-row:hover .why-row-num { color: var(--lime); } [data-theme="light"] .why-row-content h3 { color: #101820; } [data-theme="light"] .why-row-content p { color: rgba(16,24,32,0.58); } [data-theme="light"] #about-cta { background: #101820; } /* ══════════════════════════════════ SERVICES PAGE LIGHT OVERRIDES ══════════════════════════════════ */ [data-theme="light"] #services-hero { background: #101820; } [data-theme="light"] .sticky-service-nav { background: #ffffff; border-bottom-color: rgba(16,24,32,0.1); } [data-theme="light"] .ssn-btn { color: rgba(16,24,32,0.55); } [data-theme="light"] .ssn-btn:hover, [data-theme="light"] .ssn-btn.active { color: #101820; } [data-theme="light"] #packages { background: #eceae3; } [data-theme="light"] .pkg-card { background: #f5f4ef; border-color: rgba(16,24,32,0.08); } [data-theme="light"] .pkg-card:hover { background: #ffffff; } [data-theme="light"] .pkg-card h3 { color: #101820; } [data-theme="light"] .pkg-card p { color: rgba(16,24,32,0.6); } [data-theme="light"] .pkg-price { color: #101820; } [data-theme="light"] .pkg-price-label { color: rgba(16,24,32,0.5); } [data-theme="light"] .pkg-list li { color: rgba(16,24,32,0.65); border-color: rgba(16,24,32,0.07); } [data-theme="light"] .pkg-note { color: rgba(16,24,32,0.45); } [data-theme="light"] #service-details { background: #f5f4ef; } [data-theme="light"] .svc-detail-row { border-bottom-color: rgba(16,24,32,0.07); } [data-theme="light"] .svc-detail-row:hover { background: rgba(16,24,32,0.02); } [data-theme="light"] .svc-detail-text h3 { color: #101820; } [data-theme="light"] .svc-detail-text p { color: rgba(16,24,32,0.6); } [data-theme="light"] .svc-detail-items { background: #eceae3; } [data-theme="light"] .sdi-item { border-color: rgba(16,24,32,0.08); color: rgba(16,24,32,0.65); } [data-theme="light"] #industries { background: #eceae3; } [data-theme="light"] .industry-card { background: #f5f4ef; border-color: rgba(16,24,32,0.08); } [data-theme="light"] .industry-card:hover { background: #ffffff; } [data-theme="light"] .industry-card h3 { color: #101820; } [data-theme="light"] .industry-count { color: rgba(16,24,32,0.35); } [data-theme="light"] #svc-process { background: #f5f4ef; } [data-theme="light"] .svc-step { border-bottom-color: rgba(16,24,32,0.07); } [data-theme="light"] .svc-step:hover { background: rgba(16,24,32,0.02); } [data-theme="light"] .svc-step h3 { color: #101820; } [data-theme="light"] .svc-step p { color: rgba(16,24,32,0.6); } [data-theme="light"] #svc-faq { background: #eceae3; } [data-theme="light"] .sfaq-item { border-bottom-color: rgba(16,24,32,0.08); } [data-theme="light"] .sfaq-q { color: #101820; } [data-theme="light"] .sfaq-a { color: rgba(16,24,32,0.65); } [data-theme="light"] #svc-cta { background: #101820; } /* ══════════════════════════════════ CONTACT PAGE LIGHT OVERRIDES ══════════════════════════════════ */ [data-theme="light"] #cpage-hero { background: #101820; } [data-theme="light"] #cpage-main { background: #f5f4ef; } [data-theme="light"] .cform-wrap { background: #eceae3; border-color: rgba(16,24,32,0.08); } [data-theme="light"] .cfield input, [data-theme="light"] .cfield textarea, [data-theme="light"] .cfield select { background: #ffffff; border-color: rgba(16,24,32,0.12); color: #101820; } [data-theme="light"] .cfield input::placeholder, [data-theme="light"] .cfield textarea::placeholder { color: rgba(16,24,32,0.3); } [data-theme="light"] .cfield-label { color: rgba(16,24,32,0.55); } [data-theme="light"] .cinfo-method { background: #ffffff; border-color: rgba(16,24,32,0.08); } [data-theme="light"] .cinfo-method p { color: rgba(16,24,32,0.6); } [data-theme="light"] .cinfo-method a { color: #101820; } [data-theme="light"] #cpage-alt { background: #eceae3; } [data-theme="light"] .alt-card { background: #f5f4ef; border-color: rgba(16,24,32,0.08); } [data-theme="light"] .alt-card h3 { color: #101820; } [data-theme="light"] .alt-card p { color: rgba(16,24,32,0.6); } [data-theme="light"] #cpage-faq { background: #ffffff; } [data-theme="light"] .cfaq-item { border-bottom-color: rgba(16,24,32,0.08); } [data-theme="light"] .cfaq-q { color: #101820; } [data-theme="light"] .cfaq-a { color: rgba(16,24,32,0.65); } [data-theme="light"] #cpage-map { background: #f5f4ef; } [data-theme="light"] #cpage-cta { background: #101820; } /* ── CLIENTS CAROUSEL ────────────────── */ [data-theme="light"] #clients { background: #eceae3; } [data-theme="light"] .clients-label { color: rgba(16,24,32,0.35); } [data-theme="light"] .logos-strip::before { background: linear-gradient(to right, #eceae3, transparent); } [data-theme="light"] .logos-strip::after { background: linear-gradient(to left, #eceae3, transparent); } [data-theme="light"] .logo-item { color: rgba(16,24,32,0.4); border-color: rgba(16,24,32,0.1); } [data-theme="light"] .logo-item:hover { color: #101820; border-color: rgba(198,220,0,0.5); } [data-theme="light"] .logo-item svg { color: #101820; } [data-theme="light"] .logo-item:hover svg { color: #101820; } [data-theme="light"] .logo-item img.logo-img { filter: invert(1) brightness(0.15); opacity: 0.75; } [data-theme="light"] .logo-item:hover img.logo-img { filter: invert(1) brightness(0.15); opacity: 1; } /* ── SCROLLBAR LIGHT ─────────────────── */ [data-theme="light"]::-webkit-scrollbar-track { background: #f5f4ef; } [data-theme="light"]::-webkit-scrollbar-thumb { background: var(--black); } /* ── TRANSITION FOR SMOOTH SWITCH ─────── */ body, #site-header, .service-card, .diff-card, .value-card, .team-card, .pain-card, .contact-form, .cform-wrap, .alt-card, .pkg-card, .industry-card, .founder-photo-frame, .org-box--child, .mobile-nav, .footer-inner, #footer { transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }