/* ================================================ AI Tools ID — Light Mode Stylesheet light-mode.css Aktif ketika memiliki class "light-mode" ================================================ */ /* ------------------------------------------------ Base ------------------------------------------------ */ body.light-mode { background-color: #F0EEFF !important; color: #1A1535 !important; } body.light-mode .main-content { background-color: #F0EEFF; } /* ------------------------------------------------ Sidebar ------------------------------------------------ */ body.light-mode .sidebar { background: #1A1535 !important; } /* ------------------------------------------------ Navbar / Header ------------------------------------------------ */ body.light-mode .menu-area, body.light-mode header { background: rgba(240,238,255,0.94) !important; backdrop-filter: blur(12px); border-bottom: 1px solid rgba(124,58,237,0.12); } body.light-mode .menu-nav .navigation li > a { color: #1A1535 !important; } body.light-mode .menu-nav .navigation li.active > a, body.light-mode .menu-nav .navigation li > a:hover { color: #7C3AED !important; } /* ------------------------------------------------ Banner / Hero ------------------------------------------------ */ body.light-mode .banner-bg { background: linear-gradient(135deg, #E4DCFF 0%, #CCDEFF 100%) !important; } body.light-mode .banner-content h1, body.light-mode .banner-content p { color: #1A1535 !important; text-shadow: none !important; } /* ------------------------------------------------ Section Titles ------------------------------------------------ */ body.light-mode .section-title .title, body.light-mode h2.title { color: #1A1535 !important; } /* ------------------------------------------------ Page Header / Breadcrumb ------------------------------------------------ */ body.light-mode .page-header-area { background: linear-gradient(135deg, #D8D0FF 0%, #C3D5FF 100%); } body.light-mode .page-header-content h1 { color: #1A1535; } body.light-mode .page-header-content p { color: #4B5563; } body.light-mode .breadcrumb-nav li { color: #4B5563; } /* ------------------------------------------------ Background Areas ------------------------------------------------ */ body.light-mode .area-bg { background: #E8E0FF !important; } /* ------------------------------------------------ Homepage Cards (Top Seller, Collection, Features, News) ------------------------------------------------ */ body.light-mode .top-seller-item { background: #FFFFFF !important; border-color: rgba(124,58,237,0.12) !important; box-shadow: 0 4px 20px rgba(124,58,237,0.08) !important; } body.light-mode .top-seller-content h5 a, body.light-mode .top-seller-content p { color: #1A1535 !important; } body.light-mode .top-collection-item { background: #FFFFFF !important; border-color: rgba(124,58,237,0.12) !important; } body.light-mode .collection-item-content a, body.light-mode .collection-item-top .name { color: #1A1535 !important; } body.light-mode .week-features-item { background: #FFFFFF !important; border-color: rgba(124,58,237,0.12) !important; } body.light-mode .features-avatar-info h5 a { color: #1A1535 !important; } body.light-mode .latest-news-item { background: #FFFFFF !important; border-color: rgba(124,58,237,0.12) !important; box-shadow: 0 4px 20px rgba(124,58,237,0.07) !important; } body.light-mode .latest-news-content h4 a { color: #1A1535 !important; } body.light-mode .latest-news-meta li { color: #8B5CF6 !important; } /* ------------------------------------------------ Search Bar ------------------------------------------------ */ body.light-mode .search-bar-wrap input { background: rgba(255,255,255,0.85); border-color: rgba(124,58,237,0.3); color: #1A1535; } /* ------------------------------------------------ Filter Tabs ------------------------------------------------ */ body.light-mode .filter-tab-btn { background: rgba(124,58,237,0.06); border-color: rgba(124,58,237,0.18); color: #4B5563; } body.light-mode .filter-tab-btn:hover { color: #1A1535; border-color: rgba(124,58,237,0.5); } body.light-mode .filter-tab-btn.active { color: #fff; } /* ------------------------------------------------ Tool Cards ------------------------------------------------ */ body.light-mode .tool-card { background: #FFFFFF; border-color: rgba(124,58,237,0.1); box-shadow: 0 2px 12px rgba(124,58,237,0.05); } body.light-mode .tool-card:hover { border-color: rgba(168,85,247,0.3); box-shadow: 0 8px 28px rgba(168,85,247,0.12); } body.light-mode .tool-card-title { color: #1A1535; } body.light-mode .tool-card-desc { color: #4B5563; } body.light-mode .tool-card-footer { border-top-color: rgba(0,0,0,0.08); } body.light-mode .fav-btn { border-color: rgba(0,0,0,0.1); color: #9CA3AF; } /* ------------------------------------------------ Tool Detail ------------------------------------------------ */ body.light-mode .tool-detail-meta h1 { color: #1A1535; } body.light-mode .tool-content-card { background: #fff; border-color: rgba(124,58,237,0.1); } body.light-mode .tool-content-card h3 { color: #1A1535; border-color: rgba(0,0,0,0.08); } body.light-mode .tool-content-card p, body.light-mode .tool-content-card li { color: #4B5563; } body.light-mode .pros-list li, body.light-mode .cons-list li { color: #4B5563; } body.light-mode .pros-block, body.light-mode .cons-block { background: rgba(0,0,0,0.03); } /* ------------------------------------------------ Koleksi Cards ------------------------------------------------ */ body.light-mode .koleksi-card { background: #fff; border-color: rgba(124,58,237,0.1); } body.light-mode .koleksi-card-title { color: #1A1535; } body.light-mode .koleksi-count { color: #6B7280; } body.light-mode .koleksi-logo-row img { border-color: rgba(0,0,0,0.1); } /* ------------------------------------------------ Article / Blog Cards ------------------------------------------------ */ body.light-mode .article-card { background: #fff; border-color: rgba(124,58,237,0.1); } body.light-mode .article-card-title { color: #1A1535; } body.light-mode .article-card-excerpt { color: #4B5563; } body.light-mode .article-date { color: #6B7280; } /* ------------------------------------------------ Kamus AI ------------------------------------------------ */ body.light-mode .kamus-item { background: #fff; border-color: rgba(124,58,237,0.1); } body.light-mode .kamus-def { color: #4B5563; } /* ------------------------------------------------ Auth Pages (Login / Daftar) ------------------------------------------------ */ body.light-mode .auth-card { background: #fff; border-color: rgba(124,58,237,0.12); box-shadow: 0 10px 40px rgba(124,58,237,0.1); } body.light-mode .auth-title { color: #1A1535; } body.light-mode .auth-subtitle { color: #4B5563; } body.light-mode .auth-bottom { color: #4B5563; } body.light-mode .auth-divider { color: #9CA3AF; } body.light-mode .auth-divider::before, body.light-mode .auth-divider::after { background: rgba(0,0,0,0.1); } body.light-mode .form-group label { color: #4B5563; } body.light-mode .form-control-ai { background: #F8F5FF; border-color: rgba(124,58,237,0.2); color: #1A1535; } body.light-mode .form-control-ai::placeholder { color: #9CA3AF; } /* ------------------------------------------------ Dashboard ------------------------------------------------ */ body.light-mode .dashboard-user-card { background: #f0ebff; border-color: rgba(124,58,237,0.2); } body.light-mode .dashboard-user-info h3 { color: #1A1535; } body.light-mode .dashboard-user-info p { color: #4B5563; } body.light-mode .dash-tabs { background: rgba(124,58,237,0.06); border-color: rgba(124,58,237,0.12); } body.light-mode .dash-tab { color: #4B5563; } body.light-mode .dash-tab:hover:not(.active) { color: #1A1535; } /* ------------------------------------------------ Pagination ------------------------------------------------ */ body.light-mode .page-btn { background: #fff; border-color: rgba(124,58,237,0.15); color: #4B5563; } /* ------------------------------------------------ Footer stays dark regardless of mode ------------------------------------------------ */ body.light-mode footer { background: #1A1535 !important; }