/* ========================================================= DARK MODE Activated by [data-theme="dark"] on , toggled in main.js ========================================================= */ [data-theme="dark"]{ --cream:#121A33; --white:#0E1630; --ink:#F4F7FF; --ink-soft:#C7D2F2; --border:#243057; --navy:#070E24; --navy-deep:#04081A; --shadow-soft: 0 10px 30px rgba(0,0,0,.35); } [data-theme="dark"] body{ background:var(--white); color:var(--ink); } [data-theme="dark"] .site-header{ background:rgba(7,14,36,.85); border-bottom-color:var(--border); } [data-theme="dark"] .main-nav a{ color:var(--ink); } [data-theme="dark"] .main-nav{ background:#0E1630; } [data-theme="dark"] .icon-btn{ background:#131B3A; border-color:var(--border); color:var(--ink); } [data-theme="dark"] .icon-btn:hover{ background:#1B2550; } [data-theme="dark"] .lang-menu{ background:#131B3A; border-color:var(--border); } [data-theme="dark"] .lang-menu li:hover{ background:#1B2550; } [data-theme="dark"] .login-btn{ border-color:var(--border); color:var(--ink); } [data-theme="dark"] .hamburger span{ background:var(--ink); } [data-theme="dark"] .nav-close{ color:var(--ink); } [data-theme="dark"] .eyebrow{ background:#1B2550; color:#9FC1FF; } [data-theme="dark"] .stat-card, [data-theme="dark"] .program-card, [data-theme="dark"] .testimonial-card, [data-theme="dark"] .facility-card, [data-theme="dark"] .dash-card{ background:#131B3A; border-color:var(--border); } [data-theme="dark"] .facility-card p{ color:var(--ink); } [data-theme="dark"] .stat-arrow{ background:#1B2550; color:var(--ink); } [data-theme="dark"] .stat-card strong{ color:var(--ink); } [data-theme="dark"] .stat-card p{ color:var(--ink-soft); } [data-theme="dark"] .stat-icon{ background:var(--cream); color:var(--ink); border:1px solid var(--border); } [data-theme="dark"] .stat-card .icon-blue, [data-theme="dark"] .stat-card .icon-purple, [data-theme="dark"] .stat-card .icon-orange, [data-theme="dark"] .stat-card .icon-pink{ background:#1B2550; color:var(--ink); } [data-theme="dark"] .programs{ background:#0A1230; } [data-theme="dark"] .facilities-layout .facility-mascot{ background:linear-gradient(160deg,#182352,#0E1630); } [data-theme="dark"] .mascot-moon{ background:radial-gradient(circle at 35% 30%, #2A3768, #131B3A 70%); } [data-theme="dark"] .mascot-caption{ color:var(--ink); } [data-theme="dark"] .portal-preview{ background:#0A1230; } [data-theme="dark"] .dash-main{ background:#131B3A; } [data-theme="dark"] .dash-topbar strong{ color:var(--ink); } [data-theme="dark"] .dash-card strong{ color:var(--ink); } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4{ color:var(--ink); } [data-theme="dark"] .t-head strong{ color:var(--ink); } [data-theme="dark"] .t-avatar{ background:#1B2550; } [data-theme="dark"] .back-to-top{ box-shadow:0 10px 24px rgba(143,209,63,.25); } [data-theme="dark"] .site-footer{ background:#04081A; } /* ========================================================= ABOUT PAGE — DARK MODE Activated by [data-theme="dark"] on . Ensures every text/background pairing on the About page stays readable when dark mode is on. ========================================================= */ [data-theme="dark"] .about-hero{ background:linear-gradient(180deg,#141B3D 0%, #0E1630 82%); } [data-theme="dark"] .eyebrow-purple{ background:#241A4D; color:#C6B4FF; } [data-theme="dark"] .about-hero-text, [data-theme="dark"] .about-story-copy p, [data-theme="dark"] .values-copy p, [data-theme="dark"] .value-item p, [data-theme="dark"] .milestone p, [data-theme="dark"] .leader-card p{ color:var(--ink-soft); } [data-theme="dark"] .hero-nav-arrow, [data-theme="dark"] .hero-edge-btn{ background:#131B3A; border-color:var(--border); color:var(--ink); } [data-theme="dark"] .hero-nav-arrow:hover, [data-theme="dark"] .hero-edge-btn:hover{ background:var(--purple); color:#fff; } [data-theme="dark"] .hero-step{ color:var(--ink-soft); } [data-theme="dark"] .hero-step.active{ color:#C6B4FF; } [data-theme="dark"] .hero-step-line{ background:var(--border); } [data-theme="dark"] .watch-video-link{ color:var(--ink); } [data-theme="dark"] .btn-outline-brand{ color:var(--ink); border-color:var(--border); } [data-theme="dark"] .btn-outline-brand:hover{ background:#131B3A; color:#C6B4FF; border-color:#C6B4FF; } [data-theme="dark"] .sign-script{ color:#C6B4FF; } [data-theme="dark"] .sign-meta{ border-left-color:var(--border); } [data-theme="dark"] .sign-meta strong{ color:var(--ink); } [data-theme="dark"] .milestones-card{ background:#131B3A; } [data-theme="dark"] .milestones-head{ color:var(--ink); } [data-theme="dark"] .milestone-icon{ background:#0E1630; box-shadow:none; border:1px solid var(--border); } [data-theme="dark"] .milestone strong{ color:var(--ink); } [data-theme="dark"] .milestones-track::before{ background:repeating-linear-gradient(90deg, var(--border) 0 8px, transparent 8px 14px); } [data-theme="dark"] .milestones-decor{ opacity:.2; } [data-theme="dark"] .about-stats-banner{ background:#070E24; } [data-theme="dark"] .about-stat p{ color:var(--ink-soft); } [data-theme="dark"] .value-item strong{ color:var(--ink); } [data-theme="dark"] .about-video-media{ box-shadow:none; border:1px solid var(--border); } [data-theme="dark"] .quote-card{ background:#131B3A; box-shadow:none; border:1px solid var(--border); } [data-theme="dark"] .quote-card p{ color:var(--ink); } [data-theme="dark"] .quote-card span{ color:var(--ink-soft); } [data-theme="dark"] .video-play-btn{ background:rgba(19,27,58,.92); color:#C6B4FF; } [data-theme="dark"] .about-leadership{ background:#0E1630; } [data-theme="dark"] .leadership-head h2{ color:var(--ink); } [data-theme="dark"] .leader-card{ background:#131B3A; box-shadow:none; border:1px solid var(--border); } [data-theme="dark"] .leader-card strong{ color:var(--ink); } [data-theme="dark"] .leader-card span{ color:#C6B4FF; } [data-theme="dark"] .leader-avatar{ box-shadow:none; border:1px solid var(--border); } [data-theme="dark"] .about-cta{ background:linear-gradient(120deg,#3B2C86,#241A4D); } [data-theme="dark"] .about-cta-copy p{ color:rgba(255,255,255,.8); } [data-theme="dark"] .btn-cta{ color:#3A2900; } /* ========================================================= PARENT DASHBOARD — DARK MODE ========================================================= */ [data-theme="dark"] .pd-body{ background:#0E1630; } [data-theme="dark"] .pd-sidebar{ background:#131B3A; border-color:var(--border); } [data-theme="dark"] .pd-nav a{ color:var(--ink-soft); } [data-theme="dark"] .pd-nav a:hover{ background:#0E1630; color:var(--ink); } [data-theme="dark"] .pd-nav a.active{ background:var(--purple); color:#fff; } [data-theme="dark"] .pd-sidebar-promo{ background:#1B1440; } [data-theme="dark"] .promo-icon{ background:#0E1630; box-shadow:none; } [data-theme="dark"] .pd-sidebar-promo strong{ color:var(--ink); } [data-theme="dark"] .btn-light-pill{ background:#0E1630; color:#C6B4FF; } [data-theme="dark"] .btn-light-pill:hover{ background:#131B3A; } [data-theme="dark"] .pd-topbar{ background:#131B3A; border-color:var(--border); } [data-theme="dark"] .pd-menu-btn, [data-theme="dark"] .pd-bell{ background:#0E1630; color:var(--ink); } [data-theme="dark"] .pd-user-meta strong{ color:var(--ink); } [data-theme="dark"] .pd-date-pill{ background:#131B3A; border-color:var(--border); box-shadow:none; } [data-theme="dark"] .pd-date-icon{ background:#0E1630; color:#C6B4FF; } [data-theme="dark"] .pd-date-pill strong{ color:var(--ink); } [data-theme="dark"] .pd-stat-card, [data-theme="dark"] .pd-card{ background:#131B3A; box-shadow:none; border:1px solid var(--border); } [data-theme="dark"] .pd-stat-value{ color:var(--ink); } [data-theme="dark"] .pd-card-head h2{ color:var(--ink); } [data-theme="dark"] .pd-progress{ background:#0E1630; } [data-theme="dark"] .pd-month-select{ background:#0E1630; border-color:var(--border); color:var(--ink); } [data-theme="dark"] .pd-donut::before{ background:#131B3A; } [data-theme="dark"] .pd-donut-value{ color:var(--ink); } [data-theme="dark"] .dot-gray{ background:var(--border); } [data-theme="dark"] .pd-event-date{ background:#1B1440; color:#C6B4FF; } [data-theme="dark"] .pd-event-info strong, [data-theme="dark"] .pd-hw-info strong, [data-theme="dark"] .schedule-subject{ color:var(--ink); } [data-theme="dark"] .tag-purple{ background:#241a59; color:#C6B4FF; } [data-theme="dark"] .tag-blue{ background:#122647; color:#8FB4FF; } [data-theme="dark"] .tag-green{ background:#1c3f24; color:#8FD13F; } [data-theme="dark"] .tag-orange{ background:#3f3626; color:#F2C08A; } [data-theme="dark"] .tag-pink{ background:#392327; color:#FFE5EA; } [data-theme="dark"] .status-pending{ background:#3A2A12; color:#F2C08A; } [data-theme="dark"] .status-done{ background:#16301C; color:#8FD13F; } [data-theme="dark"] .pd-announce-info strong{ color:var(--ink); } [data-theme="dark"] .pd-fee-outstanding{ background:#1B1440; } [data-theme="dark"] .fee-amount{ color:var(--ink); } [data-theme="dark"] .fee-summary-row strong{ color:var(--ink); } [data-theme="dark"] .payment-amount{ color:var(--ink); } [data-theme="dark"] .pd-payment-list strong{ color:var(--ink); } [data-theme="dark"] .pd-child-profile strong{ color:var(--ink); } [data-theme="dark"] .pd-child-meta strong{ color:var(--ink); } [data-theme="dark"] .btn-outline-brand{ color:var(--ink); border-color:var(--border); } [data-theme="dark"] .btn-outline-brand:hover{ background:#0E1630; color:#C6B4FF; border-color:#C6B4FF; } [data-theme="dark"] .pd-schedule-list li{ border-color:var(--border); } [data-theme="dark"] .quicklink{ color:var(--ink); } [data-theme="dark"] .pd-cta{ background:linear-gradient(120deg,#3B2C86,#241A4D); } [data-theme="dark"] .pd-footer{ border-color:var(--border); } [data-theme="dark"] .pd-footer-brand .social-row a{ background:#131B3A; color:var(--ink); } [data-theme="dark"] .pd-footer-col h4{ color:var(--ink); } [data-theme="dark"] .pd-footer-bottom{ border-color:var(--border); } /* ========================================================= 404 PAGE — DARK MODE ========================================================= */ [data-theme="dark"] .nf-hero{ background:linear-gradient(180deg,#141B3D 0%, #0E1630 70%); } [data-theme="dark"] .nf-text{ color:var(--ink-soft); } [data-theme="dark"] .nf-astronaut{ background:#131B3A; box-shadow:none; border:1px solid var(--border); } [data-theme="dark"] .nf-quicklinks{ color:var(--ink-soft); } [data-theme="dark"] .nf-quicklinks-row a{ background:#131B3A; border-color:var(--border); color:var(--ink); } [data-theme="dark"] .nf-quicklinks-row a:hover{ background:var(--purple); border-color:var(--purple); color:#fff; } [data-theme="dark"] .nf-planet.p1{ background:var(--green-dark); opacity:.25; } [data-theme="dark"] .nf-planet.p2{ background:#4A3A2A; opacity:.3; } /* ========================================================= REMAINING PAGE COMPONENTS — DARK MODE CONTRAST ========================================================= */ /* Shared controls and form fields */ [data-theme="dark"] .btn-ghost, [data-theme="dark"] .btn-outline-brand, [data-theme="dark"] .hero-nav-arrow, [data-theme="dark"] .hero-edge-btn, [data-theme="dark"] .hj-carousel-arrow{ background:var(--white); color:var(--ink); border-color:var(--border); } [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea, [data-theme="dark"] .login-card input, [data-theme="dark"] .adm-field input, [data-theme="dark"] .adm-field select, [data-theme="dark"] .ct-field input, [data-theme="dark"] .ct-field select, [data-theme="dark"] .ct-field-textarea textarea{ background:var(--white); color:var(--ink); border-color:var(--border); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder{ color:var(--ink-soft); } [data-theme="dark"] label, [data-theme="dark"] .login-card label{ color:var(--ink); } /* Teachers */ [data-theme="dark"] .teacher-team{ background:var(--cream); } [data-theme="dark"] .teacher-card{ background:var(--white); border:1px solid var(--border); box-shadow:none; } [data-theme="dark"] .teacher-name, [data-theme="dark"] .teacher-meta strong, [data-theme="dark"] .teacher-feature h3{ color:var(--ink); } [data-theme="dark"] .teacher-meta, [data-theme="dark"] .teacher-feature p{ color:var(--ink-soft); } [data-theme="dark"] .teacher-social a{ background:var(--cream); color:var(--ink); } [data-theme="dark"] .teacher-social a:hover{ background:var(--border); } [data-theme="dark"] .teacher-why{ background:var(--white); } [data-theme="dark"] .icon-tint-purple, [data-theme="dark"] .icon-tint-green, [data-theme="dark"] .icon-tint-orange, [data-theme="dark"] .icon-tint-pink{ background:var(--white); border:1px solid var(--border); color:var(--ink); } /* Home 2 */ [data-theme="dark"] .hj-program-card, [data-theme="dark"] .hj-why-stat, [data-theme="dark"] .hj-testi-card, [data-theme="dark"] .hj-fs-icon{ background:var(--white); border-color:var(--border); color:var(--ink); } [data-theme="dark"] .hj-why, [data-theme="dark"] .hj-footer-strip{ background:var(--cream); } [data-theme="dark"] .hj-fun, [data-theme="dark"] .hj-testimonials{ background:var(--white); } [data-theme="dark"] .hj-chip, [data-theme="dark"] .hj-learn-more, [data-theme="dark"] .hj-why-stat strong, [data-theme="dark"] .hj-fs-item p{ color:var(--ink); } [data-theme="dark"] .hj-age, [data-theme="dark"] .hj-program-body p.desc, [data-theme="dark"] .hj-why-stat p, [data-theme="dark"] .hj-t-head p{ color:var(--ink-soft); } [data-theme="dark"] .hj-features-card{ background:var(--white); border-color:var(--border); } [data-theme="dark"] .hj-feature h3{ color:var(--ink); } [data-theme="dark"] .hj-feature p{ color:var(--ink-soft); } [data-theme="dark"] .hj-feature-icon, [data-theme="dark"] .hj-feature-icon.green, [data-theme="dark"] .hj-feature-icon.purple, [data-theme="dark"] .hj-feature-icon.orange, [data-theme="dark"] .hj-feature-icon.blue{ background:#1B2550; color:var(--ink); border:1px solid var(--border); } [data-theme="dark"] .hj-why-stat .stat-icon, [data-theme="dark"] .hj-why-stat .icon-blue, [data-theme="dark"] .hj-why-stat .icon-purple, [data-theme="dark"] .hj-why-stat .icon-orange, [data-theme="dark"] .hj-why-stat .icon-pink{ background:#1B2550; color:var(--ink); border:1px solid var(--border); } /* Programs */ [data-theme="dark"] .program-intro, [data-theme="dark"] .program-list-section{ background:var(--white); } [data-theme="dark"] .program-detail{ background:var(--cream); border-color:var(--border); } [data-theme="dark"] .program-detail-content h2, [data-theme="dark"] .program-detail-content strong, [data-theme="dark"] .program-section-heading h2{ color:var(--ink); } [data-theme="dark"] .program-detail-content > p, [data-theme="dark"] .program-learning-grid p, [data-theme="dark"] .program-age{ color:var(--ink-soft); } [data-theme="dark"] .program-learning-grid > div{ background:var(--white); border-color:var(--border); } [data-theme="dark"] .program-learning-grid span{ color:var(--ink); } [data-theme="dark"] .schedule-card, [data-theme="dark"] .program-age-nav a{ background:var(--white); color:var(--ink); border-color:var(--border); } [data-theme="dark"] .learning-approach{ background:var(--white); } [data-theme="dark"] .approach-card{ background:var(--cream); border-color:var(--border); } [data-theme="dark"] .approach-card h3{ color:var(--ink); } [data-theme="dark"] .approach-card p, [data-theme="dark"] .program-section-heading p{ color:var(--ink-soft); } [data-theme="dark"] .approach-icon, [data-theme="dark"] .approach-card:nth-child(2) .approach-icon, [data-theme="dark"] .approach-card:nth-child(3) .approach-icon, [data-theme="dark"] .approach-card:nth-child(4) .approach-icon{ background:#1B2550; color:var(--ink); border:1px solid var(--border); } /* Admissions */ [data-theme="dark"] .adm-hero, [data-theme="dark"] .adm-process, [data-theme="dark"] .adm-info, [data-theme="dark"] .adm-form-wrap{ background:var(--white); } [data-theme="dark"] .adm-panel-docs, [data-theme="dark"] .adm-step, [data-theme="dark"] .adm-hero-badge, [data-theme="dark"] .adm-fee, [data-theme="dark"] .adm-contact-card{ background:var(--cream); border-color:var(--border); } [data-theme="dark"] .adm-panel-info{ background:var(--cream); border-color:var(--border); } [data-theme="dark"] .adm-step h3, [data-theme="dark"] .adm-panel-head h3, [data-theme="dark"] .adm-info-item h4, [data-theme="dark"] .adm-hero-badge strong, [data-theme="dark"] .adm-contact-row span, [data-theme="dark"] .adm-strip-item strong{ color:var(--ink); } [data-theme="dark"] .adm-step p, [data-theme="dark"] .adm-doc-list li, [data-theme="dark"] .adm-info-item p, [data-theme="dark"] .adm-hero-badge small{ color:var(--ink-soft); } [data-theme="dark"] .adm-strip-wrap{ background:var(--cream); } /* Contact */ [data-theme="dark"] .ct-hero, [data-theme="dark"] .ct-visit-grid, [data-theme="dark"] .ct-info-grid{ background:var(--white); } [data-theme="dark"] .ct-form-card, [data-theme="dark"] .ct-campus-card, [data-theme="dark"] .ct-faq-item, [data-theme="dark"] .ct-help-banner{ background:var(--cream); border-color:var(--border); } [data-theme="dark"] .ct-reach-card, [data-theme="dark"] .ct-social-inner{ background:var(--cream); } [data-theme="dark"] .ct-form-card h2, [data-theme="dark"] .ct-reach-card h2, [data-theme="dark"] .ct-reach-item strong, [data-theme="dark"] .ct-campus-body h3, [data-theme="dark"] .ct-faq-q, [data-theme="dark"] .ct-help-text strong, [data-theme="dark"] .ct-social-text h3{ color:var(--ink); } [data-theme="dark"] .ct-reach-item p, [data-theme="dark"] .ct-campus-body p, [data-theme="dark"] .ct-faq-a p, [data-theme="dark"] .ct-help-text p, [data-theme="dark"] .ct-social-text p{ color:var(--ink-soft); } /* Gallery */ [data-theme="dark"] .gal-filter-bar, [data-theme="dark"] .gal-filter-section{ background:var(--white); } [data-theme="dark"] .gal-filter{ color:var(--ink-soft); } [data-theme="dark"] .gal-filter:hover{ background:var(--cream); color:var(--ink); } [data-theme="dark"] .quote-tile{ background:var(--cream); color:var(--ink); } [data-theme="dark"] .tag-tile{ background:var(--cream); color:var(--ink); } [data-theme="dark"] .quote-tile-icon, [data-theme="dark"] .tag-tile-icon{ background:var(--white); color:var(--ink); } [data-theme="dark"] .gal-stats-band{ background:var(--cream); } [data-theme="dark"] .gal-stat strong{ color:var(--ink); } [data-theme="dark"] .gal-stat p{ color:var(--ink-soft); } /* Login page */ [data-theme="dark"] .login-wrap{ background:var(--cream); } [data-theme="dark"] .login-card{ background:var(--white); border-color:var(--border); } [data-theme="dark"] .login-tabs, [data-theme="dark"] .demo-hint{ background:var(--cream); } [data-theme="dark"] .login-tab{ color:var(--ink-soft); } [data-theme="dark"] .login-tab.active{ background:var(--white); color:var(--ink); } [data-theme="dark"] .demo-hint strong{ color:var(--ink); } [data-theme="dark"] .login-foot{ color:var(--ink-soft); } /* Admin dashboard */ [data-theme="dark"] .ad-main, [data-theme="dark"] .ad-content{ background:var(--cream); } [data-theme="dark"] .ad-topbar, [data-theme="dark"] .ad-module-card, [data-theme="dark"] .ad-profile-menu{ background:var(--white); border-color:var(--border); } [data-theme="dark"] .ad-page-head h1, [data-theme="dark"] .ad-module-title, [data-theme="dark"] .ad-stat-label, [data-theme="dark"] .ad-profile-menu a{ color:var(--ink); } [data-theme="dark"] .ad-module-desc, [data-theme="dark"] .ad-footer-note{ color:var(--ink-soft); } [data-theme="dark"] .ad-profile-menu a:hover{ background:var(--cream); } [data-theme="dark"] .main-nav a.active{ color: var(--purple); } [data-theme="dark"] .main-nav a.active::after{ background: var(--purple); width: 100%; } [data-theme="dark"] .nav-dropdown-toggle.active{ color: var(--purple); }