/* =================================================== DARK THEME - Coderz Academy Applied via [data-theme="dark"] on =================================================== */ /* ============================================ CSS VARIABLE OVERRIDES ============================================ */ [data-theme="dark"] { /* === Text Colors === */ --text-primary: #E2E8F0; --text-secondary: #A0AEC0; --text-muted: #718096; --text-light: #4A5568; --text-inverse: #1A202C; /* === Background Colors === */ --bg-primary: #0F1219; --bg-secondary: #161B26; --bg-tertiary: #1E2433; --bg-dark: #0A0D14; --bg-dark-secondary: #161B26; --bg-dark-tertiary: #1E2433; /* === Border Colors === */ --border-color: #2D3748; --border-light: #1E2433; --border-dark: #4A5568; /* === Shadows (darker) === */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.4); /* === Brand overrides for dark === */ --c-text-primary: #E2E8F0; --c-text-secondary: #A0AEC0; --c-text-muted: #718096; --c-text-light: #4A5568; --c-bg-white: #0F1219; --c-bg-light: #161B26; --c-bg-secondary: #1E2433; --c-bg-dark: #0A0D14; --c-bg-darker: #060810; --c-border-light: #1E2433; --c-border: #2D3748; --c-border-dark: #4A5568; --c-gray-50: #161B26; --c-gray-100: #1E2433; --c-gray-200: #2D3748; --c-gray-300: #4A5568; --c-gray-400: #718096; --c-gray-500: #A0AEC0; --c-gray-600: #CBD5E0; --c-gray-700: #E2E8F0; --c-gray-800: #EDF2F7; --c-gray-900: #F7FAFC; color-scheme: dark; } /* ============================================ BODY & GLOBAL ============================================ */ [data-theme="dark"] body { background-color: #0F1219; color: #E2E8F0; } /* ============================================ HEADER ============================================ */ [data-theme="dark"] .header { background: rgba(15, 18, 25, 0.95); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } [data-theme="dark"] .header.scrolled { background: rgba(15, 18, 25, 0.98); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .header.header-dark { background: rgba(15, 18, 25, 0.95); } [data-theme="dark"] .header-dark.scrolled { background: rgba(15, 18, 25, 0.98); } /* Nav links in dark mode */ [data-theme="dark"] .nav-link { color: #CBD5E0; } [data-theme="dark"] .nav-link:hover { color: #fff; } [data-theme="dark"] .nav-dropdown-menu { background: #161B26; border: 1px solid #2D3748; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .nav-dropdown-item { color: #A0AEC0; } [data-theme="dark"] .nav-dropdown-item:hover { background: rgba(21, 126, 238, 0.1); color: #fff; } /* Language dropdown */ [data-theme="dark"] .lang-dropdown { background: #161B26; border: 1px solid #2D3748; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .lang-option { color: #CBD5E0; } [data-theme="dark"] .lang-option:hover { background: rgba(21, 126, 238, 0.1); color: #fff; } /* User dropdown */ [data-theme="dark"] .user-dropdown { background: #161B26; border: 1px solid #2D3748; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .user-dropdown-header { background: #1E2433; } [data-theme="dark"] .user-dropdown-item { color: #CBD5E0; } [data-theme="dark"] .user-dropdown-item:hover { background: rgba(21, 126, 238, 0.1); color: #fff; } /* ============================================ MAIN CONTENT AREAS ============================================ */ [data-theme="dark"] main { background: #0F1219; } [data-theme="dark"] .container { color: #E2E8F0; } /* Cards */ [data-theme="dark"] .info-card, [data-theme="dark"] .blog-card, [data-theme="dark"] .course-card, [data-theme="dark"] .bootcamp-card, [data-theme="dark"] .service-card, [data-theme="dark"] .sidebar-widget, [data-theme="dark"] .registration-card { background: #161B26; border-color: #2D3748; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); } [data-theme="dark"] .blog-card:hover, [data-theme="dark"] .course-card:hover { box-shadow: 0 15px 40px rgba(21, 126, 238, 0.1); } /* Card text */ [data-theme="dark"] .card-title a, [data-theme="dark"] .card-title { color: #E2E8F0; } [data-theme="dark"] .card-excerpt { color: #A0AEC0; } [data-theme="dark"] .card-meta span { color: #718096; } /* ============================================ FORMS ============================================ */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background: #1E2433; border-color: #2D3748; color: #E2E8F0; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #4A5568; } [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { border-color: #157EEE; background: #1E2433; box-shadow: 0 0 0 3px rgba(21, 126, 238, 0.15); } [data-theme="dark"] .form-group label { color: #CBD5E0; } /* ============================================ FOOTER ============================================ */ [data-theme="dark"] .footer { background: #0A0D14; border-top: 1px solid #1E2433; } [data-theme="dark"] .footer h4 { color: #E2E8F0; } [data-theme="dark"] .footer-description { color: #718096; } [data-theme="dark"] .footer-links a { color: #A0AEC0; } [data-theme="dark"] .footer-links a:hover { color: #157EEE; } [data-theme="dark"] .footer-contact-item { color: #A0AEC0; } [data-theme="dark"] .footer-contact-item a { color: #A0AEC0; } [data-theme="dark"] .footer-contact-item a:hover { color: #157EEE; } [data-theme="dark"] .footer-bottom { border-top-color: #1E2433; color: #4A5568; } [data-theme="dark"] .footer-bottom a { color: #718096; } [data-theme="dark"] .newsletter-input { background: #1E2433; border-color: #2D3748; color: #E2E8F0; } /* ============================================ MOBILE MENU ============================================ */ [data-theme="dark"] .mobile-menu { background: #0F1219; } [data-theme="dark"] .mobile-menu-header { border-bottom-color: #1E2433; } [data-theme="dark"] .mobile-menu-nav a { color: #CBD5E0; border-bottom-color: #1E2433; } [data-theme="dark"] .mobile-menu-nav a:hover { background: rgba(21, 126, 238, 0.08); color: #157EEE; } [data-theme="dark"] .mobile-user-info { background: #161B26; } /* ============================================ SECTIONS (Homepage, About, etc.) ============================================ */ [data-theme="dark"] section { color: #E2E8F0; } [data-theme="dark"] .section-header h2, [data-theme="dark"] .section-title, [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: #E2E8F0; } [data-theme="dark"] p { color: #A0AEC0; } /* ============================================ TABLES ============================================ */ [data-theme="dark"] table { background: #161B26; } [data-theme="dark"] th { background: #1E2433; color: #E2E8F0; border-color: #2D3748; } [data-theme="dark"] td { color: #CBD5E0; border-color: #2D3748; } [data-theme="dark"] tr:hover td { background: rgba(21, 126, 238, 0.05); } /* ============================================ ALERTS ============================================ */ [data-theme="dark"] .alert.success { background: rgba(40, 199, 111, 0.1); border-color: rgba(40, 199, 111, 0.2); color: #55D98D; } [data-theme="dark"] .alert.error { background: rgba(234, 84, 85, 0.1); border-color: rgba(234, 84, 85, 0.2); color: #EF7879; } /* ============================================ BADGES ============================================ */ [data-theme="dark"] .badge-category { background: rgba(21, 126, 238, 0.15); color: #7DBAF7; } /* ============================================ SCROLLBAR (dark) ============================================ */ [data-theme="dark"] ::-webkit-scrollbar-track { background: #0F1219; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2D3748; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #157EEE; } /* ============================================ MISC OVERRIDES ============================================ */ [data-theme="dark"] .pillars-list li { background: #1E2433; color: #E2E8F0; } [data-theme="dark"] .status-closed { color: #718096; } [data-theme="dark"] .read-more { color: #157EEE; } [data-theme="dark"] hr { border-color: #2D3748 !important; } [data-theme="dark"] .registration-card .card-header { background: linear-gradient(135deg, #157EEE 0%, #0D5BB8 100%); } /* ============================================ COURSE SCHEDULE SECTION (csch-*) ============================================ */ [data-theme="dark"] .csch-section { background: linear-gradient(180deg, #0F1219 0%, #161B26 100%); } [data-theme="dark"] .csch-title { color: #E2E8F0; } [data-theme="dark"] .csch-subtitle { color: #718096; } [data-theme="dark"] .csch-table-wrapper { background: #161B26; border-color: #2D3748; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .csch-table thead { background: #1E2433; border-bottom-color: #2D3748; } [data-theme="dark"] .csch-table th { color: #718096; } [data-theme="dark"] .csch-table tbody tr { border-bottom-color: #1E2433; } [data-theme="dark"] .csch-table tbody tr:hover { background: rgba(21, 126, 238, 0.05); } [data-theme="dark"] .csch-course-name { color: #E2E8F0; } [data-theme="dark"] .csch-course-name:hover { color: #60a5fa; } [data-theme="dark"] .csch-date-cell, [data-theme="dark"] .csch-duration-cell { color: #A0AEC0; } [data-theme="dark"] .csch-date-cell i, [data-theme="dark"] .csch-duration-cell i { color: #4A5568; } [data-theme="dark"] .csch-cat-badge { background: rgba(3, 105, 161, 0.15); color: #7dd3fc; border-color: rgba(186, 230, 253, 0.15); } [data-theme="dark"] .csch-del-online { background: rgba(2, 132, 199, 0.12); color: #7dd3fc; border-color: rgba(186, 230, 253, 0.15); } [data-theme="dark"] .csch-del-inperson { background: rgba(22, 163, 74, 0.12); color: #86efac; border-color: rgba(187, 247, 208, 0.15); } [data-theme="dark"] .csch-del-hybrid { background: rgba(147, 51, 234, 0.12); color: #c4b5fd; border-color: rgba(233, 213, 255, 0.15); } [data-theme="dark"] .csch-st-upcoming { background: rgba(194, 65, 12, 0.12); color: #fdba74; border-color: rgba(254, 215, 170, 0.15); } [data-theme="dark"] .csch-st-open { background: rgba(4, 120, 87, 0.12); color: #6ee7b7; border-color: rgba(167, 243, 208, 0.15); } [data-theme="dark"] .csch-empty { color: #4A5568; } [data-theme="dark"] .csch-empty h4 { color: #718096; } [data-theme="dark"] .csch-empty p { color: #4A5568; } /* Mobile cards */ [data-theme="dark"] .csch-m-card { background: #1E2433; border-color: #2D3748; } [data-theme="dark"] .csch-m-title { color: #E2E8F0; } [data-theme="dark"] .csch-m-info span { color: #718096; } /* ============================================ WHY CHOOSE US / SERVICE CARDS (Home/Index) ============================================ */ [data-theme="dark"] .home-section-why_choose_us { background: #0F1219 !important; } [data-theme="dark"] .service-card { background: #161B26; border-color: #2D3748; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); } [data-theme="dark"] .service-card:hover { box-shadow: 0 15px 40px rgba(21, 126, 238, 0.1); } [data-theme="dark"] .service-title { color: #E2E8F0; } [data-theme="dark"] .service-description { color: #A0AEC0; } [data-theme="dark"] .section-subtitle { color: #718096; } /* Course Training Filter (ctf-*) cards */ [data-theme="dark"] .ctf-card { background: #161B26; border-color: #2D3748; } [data-theme="dark"] .ctf-card-title a { color: #E2E8F0; } [data-theme="dark"] .ctf-card-desc { color: #718096; } [data-theme="dark"] .ctf-card-meta-row { color: #4A5568; border-top-color: #2D3748; } [data-theme="dark"] .ctf-meta-price { color: #E2E8F0 !important; } [data-theme="dark"] .ctf-tab { color: #718096; } [data-theme="dark"] .ctf-tab.active { color: #E2E8F0; } /* ============================================ THEME TOGGLE BUTTON ============================================ */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; border-radius: 12px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.08); } .theme-toggle:hover { background: rgba(255, 255, 255, 0.15); transform: scale(1.05); } .theme-toggle i { font-size: 1.1rem; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); color: #FFD700; } /* Sun icon (shown in dark mode) */ .theme-toggle .fa-sun { display: none; } /* Moon icon (shown in light mode) */ .theme-toggle .fa-moon { display: inline-block; color: rgba(255, 255, 255, 0.85); } [data-theme="dark"] .theme-toggle .fa-sun { display: inline-block; color: #FFD700; } [data-theme="dark"] .theme-toggle .fa-moon { display: none; } [data-theme="dark"] .theme-toggle { background: rgba(255, 215, 0, 0.1); border: 1px solid rgba(255, 215, 0, 0.15); } [data-theme="dark"] .theme-toggle:hover { background: rgba(255, 215, 0, 0.2); } /* Mobile theme toggle */ .mobile-theme-toggle { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border: none; background: rgba(21, 126, 238, 0.05); color: #5D6D7E; border-radius: 10px; cursor: pointer; font-size: 0.9rem; font-weight: 500; width: 100%; transition: all 0.3s ease; font-family: inherit; } .mobile-theme-toggle:hover { background: rgba(21, 126, 238, 0.1); } .mobile-theme-toggle i { font-size: 1.1rem; width: 24px; text-align: center; } [data-theme="dark"] .mobile-theme-toggle { background: rgba(255, 215, 0, 0.08); color: #FFD700; } [data-theme="dark"] .mobile-theme-toggle:hover { background: rgba(255, 215, 0, 0.15); } /* ============================================ SMOOTH TRANSITION FOR THEME SWITCHING ============================================ */ html.theme-transition, html.theme-transition *, html.theme-transition *:before, html.theme-transition *:after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; transition-delay: 0s !important; }