/* ═══════════════════════════════════════════════════════ RupeeCase Learn — Dark Theme Matches landing page dark mode: #060912 bg, glass cards, slate text, blue accent replacing navy where needed. Applied via data-theme="dark" on . ═══════════════════════════════════════════════════════ */ [data-theme="dark"] { /* ── Core backgrounds ── */ --bg: #060912; --white: #0c1220; --ice: rgba(255,255,255,0.04); --ice-dark: rgba(255,255,255,0.08); /* ── Text ── */ --text: #f1f5f9; --text-2: #cbd5e1; --text-3: #94a3b8; --text-4: #64748b; /* ── Borders ── */ --rule: rgba(255,255,255,0.08); /* ── Accent colors (keep brand identity) ── */ --navy: #60A5FA; --navy-mid: #3B82F6; --blue: #60A5FA; --blue-soft: #93C5FD; /* ── Status colors (softer for dark bg) ── */ --green: #34D399; --green-bg: rgba(52,211,153,0.1); --green-dark: #6EE7B7; --red: #F87171; --red-bg: rgba(248,113,113,0.1); --gold: #FBBF24; --gold-light: rgba(251,191,36,0.1); --amber: #FBBF24; --amber-bg: rgba(251,191,36,0.1); --purple: #A78BFA; --purple-bg: rgba(167,139,250,0.1); --teal: #22D3EE; --teal-bg: rgba(34,211,238,0.1); color-scheme: dark; } /* ── Body ── */ [data-theme="dark"] body { background: #060912; color: #f1f5f9; } /* ── Nav ── */ [data-theme="dark"] .nav, [data-theme="dark"] .topnav { background: rgba(6,9,18,0.92) !important; border-bottom-color: rgba(255,255,255,0.06); backdrop-filter: blur(20px); } [data-theme="dark"] .nav-name { color: #f1f5f9; } [data-theme="dark"] .nav-cta { background: #60A5FA; color: #060912 !important; } [data-theme="dark"] .nav-cta:hover { background: #93C5FD; } /* ── Cards & containers ── */ [data-theme="dark"] .path-card, [data-theme="dark"] .hero-card, [data-theme="dark"] .faq-card, [data-theme="dark"] .tool-card, [data-theme="dark"] .stat-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); backdrop-filter: blur(20px); box-shadow: 0 4px 24px rgba(0,0,0,0.2); } /* ── Path cards ── */ [data-theme="dark"] .path-card:hover { border-color: rgba(96,165,250,0.3); box-shadow: 0 8px 32px rgba(96,165,250,0.08); } [data-theme="dark"] .path-number { background: rgba(96,165,250,0.15); color: #60A5FA; } [data-theme="dark"] .path-title { color: #f1f5f9; } [data-theme="dark"] .path-desc { color: #94a3b8; } [data-theme="dark"] .path-meta { color: #64748b; } [data-theme="dark"] .path-cta { background: rgba(96,165,250,0.1); color: #60A5FA; border: 1px solid rgba(96,165,250,0.2); } [data-theme="dark"] .path-cta:hover { background: rgba(96,165,250,0.2); } /* ── Hero section ── */ [data-theme="dark"] .hero h1 { color: #f1f5f9; } [data-theme="dark"] .hero-sub { color: #94a3b8; } [data-theme="dark"] .hero-eyebrow { color: #60A5FA; } [data-theme="dark"] .hstat-num { color: #60A5FA; } [data-theme="dark"] .hstat-lbl { color: #94a3b8; } [data-theme="dark"] .hero-card { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); border: 1px solid rgba(255,255,255,0.08); } /* ── Filter buttons ── */ [data-theme="dark"] .filter-btn { background: rgba(255,255,255,0.04); color: #94a3b8; border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .filter-btn:hover, [data-theme="dark"] .filter-btn.active { background: rgba(96,165,250,0.15); color: #60A5FA; border-color: rgba(96,165,250,0.3); } /* ── Section titles ── */ [data-theme="dark"] .section-title, [data-theme="dark"] h2, [data-theme="dark"] h3 { color: #f1f5f9; } [data-theme="dark"] .section-sub { color: #94a3b8; } /* ── FAQ ── */ [data-theme="dark"] .faq-q { color: #f1f5f9; } [data-theme="dark"] .faq-a { color: #cbd5e1; } /* ── Back to top ── */ [data-theme="dark"] .back-top { background: rgba(255,255,255,0.06); color: #94a3b8; border: 1px solid rgba(255,255,255,0.08); } [data-theme="dark"] .back-top:hover { background: #60A5FA; color: #060912; } /* ── Footer ── */ [data-theme="dark"] .social-footer { border-top-color: rgba(255,255,255,0.06); } [data-theme="dark"] .social-footer-copy, [data-theme="dark"] .social-footer-copy a { color: #64748b; } /* ── Theme toggle icon ── */ [data-theme="dark"] .theme-toggle { color: #94a3b8; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } .theme-toggle { background: none; border: 1px solid var(--rule); border-radius: 8px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: all 0.2s; } .theme-toggle:hover { background: var(--ice); } .theme-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ═══════════════════════════════════════════════════════ MODULE PAGE DARK OVERRIDES (for path-X/module-X-X.html files) ═══════════════════════════════════════════════════════ */ /* ── Article body ── */ [data-theme="dark"] .article-body { color: #cbd5e1; } [data-theme="dark"] .article-body h2, [data-theme="dark"] .article-body h3, [data-theme="dark"] .article-body h4 { color: #f1f5f9; } [data-theme="dark"] .article-body a { color: #60A5FA; border-bottom-color: rgba(96,165,250,0.3); } [data-theme="dark"] .article-body a:hover { border-bottom-color: #60A5FA; } [data-theme="dark"] .article-body strong { color: #f1f5f9; } [data-theme="dark"] .article-body code { background: rgba(255,255,255,0.06); color: #93C5FD; } /* ── Tables ── */ [data-theme="dark"] thead tr { background: #1e293b; color: #f1f5f9; } [data-theme="dark"] td { color: #cbd5e1; border-bottom-color: rgba(255,255,255,0.06); } [data-theme="dark"] tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); } /* ── Callouts ── */ [data-theme="dark"] .callout { background: rgba(255,255,255,0.03); border-color: rgba(96,165,250,0.4); } [data-theme="dark"] .callout p { color: #cbd5e1; } [data-theme="dark"] .callout-green { border-color: rgba(52,211,153,0.4); } [data-theme="dark"] .callout-red, [data-theme="dark"] .callout-danger { border-color: rgba(248,113,113,0.4); } [data-theme="dark"] .callout-gold, [data-theme="dark"] .callout-amber { border-color: rgba(251,191,36,0.4); } /* ── Key takeaway / summary boxes ── */ [data-theme="dark"] .key-takeaway, [data-theme="dark"] .takeaway-box, [data-theme="dark"] .summary-box { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); } /* ── Quiz section ── */ [data-theme="dark"] .quiz-header { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); border: 1px solid rgba(255,255,255,0.08); } [data-theme="dark"] .quiz-header h2 { color: #f1f5f9; } [data-theme="dark"] .quiz-card, [data-theme="dark"] #quizBody > div { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); } [data-theme="dark"] .quiz-q, [data-theme="dark"] .q-text { color: #f1f5f9; } [data-theme="dark"] .quiz-option, [data-theme="dark"] .opt-btn { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: #cbd5e1; } [data-theme="dark"] .quiz-option:hover, [data-theme="dark"] .opt-btn:hover { background: rgba(96,165,250,0.08); border-color: rgba(96,165,250,0.2); } /* ── Progress track ── */ [data-theme="dark"] .progress-track { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); } [data-theme="dark"] .pt-step { color: #94a3b8; } [data-theme="dark"] .pt-step.current { color: #60A5FA; } [data-theme="dark"] .pt-step.done { color: #34D399; } [data-theme="dark"] .pt-arrow { color: #475569; } /* ── Breadcrumb ── */ [data-theme="dark"] .breadcrumb, [data-theme="dark"] .breadcrumb a { color: #64748b; } [data-theme="dark"] .breadcrumb a:hover { color: #60A5FA; } /* ── Read progress bar ── */ [data-theme="dark"] #readProgress { background: #60A5FA; } /* ── Next module card ── */ [data-theme="dark"] .next-module { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); border: 1px solid rgba(255,255,255,0.08); } /* ── Lab strip ── */ [data-theme="dark"] .lab-strip { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); } [data-theme="dark"] .lab-label { color: #f1f5f9; } [data-theme="dark"] .lab-progress { color: #94a3b8; } /* ── Path complete banner ── */ [data-theme="dark"] .path-complete-banner { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); border: 1px solid rgba(96,165,250,0.2); } [data-theme="dark"] .pcb-title { color: #f1f5f9; } [data-theme="dark"] .pcb-sub { color: #94a3b8; } /* ── Cert modal ── */ [data-theme="dark"] .cert-modal { background: #0c1220; border: 1px solid rgba(255,255,255,0.08); color: #f1f5f9; } [data-theme="dark"] .cert-modal-title { color: #f1f5f9; } [data-theme="dark"] .cert-modal-sub { color: #94a3b8; } /* ── Pills / badges ── */ [data-theme="dark"] .pill-time { background: rgba(255,255,255,0.06); color: #94a3b8; } [data-theme="dark"] .pill-level { background: rgba(52,211,153,0.1); color: #34D399; } /* ── Author card ── */ [data-theme="dark"] .author-name { color: #f1f5f9; } [data-theme="dark"] .author-role { color: #94a3b8; } /* ── Scrollbar ── */ [data-theme="dark"] ::-webkit-scrollbar-track { background: #060912; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.2); } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,0.4); } /* ── Selection ── */ [data-theme="dark"] ::selection { background: rgba(96,165,250,0.3); color: #f1f5f9; } /* ── Inline images — add subtle border in dark ── */ [data-theme="dark"] .article-body img { border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); } /* ── Lists in article ── */ [data-theme="dark"] .article-body li { color: #cbd5e1; } [data-theme="dark"] .article-body li::marker { color: #60A5FA; }