/* * Dark Mode — Blog Frontend Only * Applied via [data-theme="dark"] on * Admin panel is never affected (separate layout) */ /* ── Dark mode toggle button — mobile only ───────────────── */ #darkModeToggle { display: none; /* hidden on desktop */ } @media screen and (max-width: 991px) { #darkModeToggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #f3f4f6; color: #374151; cursor: pointer; font-size: 0.95rem; transition: background 0.2s, border-color 0.2s, color 0.2s; flex-shrink: 0; line-height: 1; padding: 0; vertical-align: middle; outline: none; box-shadow: none; } #darkModeToggle:hover { background: #e5e7eb; border-color: #9ca3af; color: #111827; } #darkModeToggle:focus { outline: none; box-shadow: none; } /* Dark mode: button inverts to match dark header */ [data-theme="dark"] #darkModeToggle { background: #1e293b; border-color: #334155; color: #f1f5f9; } [data-theme="dark"] #darkModeToggle:hover { background: #334155; border-color: #94a3b8; } /* Light mode icon: moon | Dark mode icon: sun */ #darkModeToggle .icon-moon { display: inline-block; } #darkModeToggle .icon-sun { display: none; } [data-theme="dark"] #darkModeToggle .icon-moon { display: none; } [data-theme="dark"] #darkModeToggle .icon-sun { display: inline-block; } } /* end @media max-width:991px */ /* ── Dark CSS variable overrides ─────────────────────────── */ [data-theme="dark"] { --color-bg: #0f1117; --color-text: #e2e8f0; --color-primary: #2dd4bf; /* teal shifted brighter for dark bg */ --color-secondary: #3b82f6; --color-accent: #f59e0b; --footer-bg: #0a0d14; --footer-text: #cbd5e1; --footer-border: #1e293b; --footer-copyright-bg: #07090f; --footer-copyright-text: #94a3b8; } /* ── Body / global ───────────────────────────────────────── */ [data-theme="dark"] body { background-color: #0f1117 !important; color: #e2e8f0 !important; } /* ── Header / top-bar ────────────────────────────────────── */ [data-theme="dark"] .permit-header-wrapper .top-bar { background: #07090f; } [data-theme="dark"] .permit-header-wrapper .permit-headersec { background: #111827; border-bottom: 1px solid #1e293b; } /* ── Mobile side menu ────────────────────────────────────── */ [data-theme="dark"] .academy_r_mobile_menu .side-menu { background: #111827; } [data-theme="dark"] .academy_r_mobile_menu .side-menu .item-menuClose { color: #e2e8f0; } [data-theme="dark"] .academy_r_mobile_menu .side-menu ul li a { color: #cbd5e1; } [data-theme="dark"] .academy_r_mobile_menu .side-menu ul li a:hover { color: #2dd4bf; } /* ── Blog hero / category bar ────────────────────────────── */ [data-theme="dark"] .blog-hero-sec { background: #111827 !important; } [data-theme="dark"] .blog-hero-sec h1, [data-theme="dark"] .blog-hero-sec p { color: #e2e8f0 !important; } [data-theme="dark"] .cat-bar-sec { background: #1a2236 !important; border-bottom-color: #1e293b !important; } [data-theme="dark"] .btn-topic { background: #1e293b !important; color: #94a3b8 !important; border-color: #334155 !important; } [data-theme="dark"] .btn-topic:hover, [data-theme="dark"] .btn-topic.active { background: var(--color-primary) !important; color: #0f1117 !important; border-color: var(--color-primary) !important; } /* ── Blog cards ──────────────────────────────────────────── */ [data-theme="dark"] .blog-item { background: #1a2236; border-radius: 8px; } [data-theme="dark"] .blog-item .content { background: #1a2236; border-color: #1e293b !important; } [data-theme="dark"] .blog-item .content h3 a, [data-theme="dark"] .blog-item .content h3 { color: #e2e8f0 !important; } [data-theme="dark"] .blog-item .content p, [data-theme="dark"] .blog-item .content .read-more { color: #94a3b8 !important; } [data-theme="dark"] .blog-item .content .post-meta li { color: #64748b !important; } [data-theme="dark"] .blog-item:hover .content h3 a { color: var(--color-primary) !important; } /* ── Blog wrap / sidebar ─────────────────────────────────── */ [data-theme="dark"] .blog-wrap a { color: #e2e8f0; } [data-theme="dark"] .blog-left-panel, [data-theme="dark"] .left-wrap, [data-theme="dark"] .right-wrap { background: transparent; } [data-theme="dark"] .left-wrap ul li, [data-theme="dark"] .right-wrap ul li { border-bottom-color: #1e293b !important; } [data-theme="dark"] .left-wrap ul li p, [data-theme="dark"] .right-wrap ul li p { color: #94a3b8 !important; } /* ── Blog post detail page ───────────────────────────────── */ [data-theme="dark"] .blog-det-content, [data-theme="dark"] .blog-detail-wrap { background: transparent; } [data-theme="dark"] .blog-det-content h1, [data-theme="dark"] .blog-det-content h2, [data-theme="dark"] .blog-det-content h3, [data-theme="dark"] .blog-det-content h4, [data-theme="dark"] .blog-det-content h5, [data-theme="dark"] .blog-det-content h6 { color: #e2e8f0 !important; } [data-theme="dark"] .blog-det-content p, [data-theme="dark"] .blog-det-content li, [data-theme="dark"] .blog-det-content span { color: #cbd5e1 !important; } [data-theme="dark"] .blog-det-content a { color: var(--color-primary) !important; } [data-theme="dark"] .blog-det-content blockquote { background: #1e293b !important; border-left-color: var(--color-primary) !important; color: #cbd5e1 !important; } [data-theme="dark"] .blog-det-content pre, [data-theme="dark"] .blog-det-content code { background: #1e293b !important; color: #7dd3fc !important; } [data-theme="dark"] .blog-det-content table th { background: #1e293b !important; color: #e2e8f0 !important; } [data-theme="dark"] .blog-det-content table td { background: #111827 !important; color: #cbd5e1 !important; border-color: #1e293b !important; } /* ── Cards / panels ──────────────────────────────────────── */ [data-theme="dark"] .card { background: #1a2236 !important; border-color: #1e293b !important; color: #e2e8f0 !important; } [data-theme="dark"] .card-body { color: #cbd5e1 !important; } [data-theme="dark"] .card-title, [data-theme="dark"] .card h5, [data-theme="dark"] .card h4 { color: #e2e8f0 !important; } /* ── Breadcrumb ──────────────────────────────────────────── */ [data-theme="dark"] .about-banner { background: #111827 !important; } [data-theme="dark"] .about-banner .breadcrumb-item a, [data-theme="dark"] .about-banner .breadcrumb-item { color: #94a3b8 !important; } [data-theme="dark"] .about-banner .breadcrumb-item.active { color: var(--color-primary) !important; } [data-theme="dark"] .about-banner h1, [data-theme="dark"] .about-banner h2 { color: #e2e8f0 !important; } /* ── Tags / badges ───────────────────────────────────────── */ [data-theme="dark"] .badge.bg-light, [data-theme="dark"] .badge-tag { background: #1e293b !important; color: #94a3b8 !important; } [data-theme="dark"] .badge.bg-secondary { background: #334155 !important; color: #cbd5e1 !important; } /* ── Share / social buttons ──────────────────────────────── */ [data-theme="dark"] .share-block a, [data-theme="dark"] .soc-share a { color: #94a3b8 !important; border-color: #334155 !important; } /* ── Pagination ──────────────────────────────────────────── */ [data-theme="dark"] .pagination .page-link { background: #1a2236 !important; border-color: #1e293b !important; color: #94a3b8 !important; } [data-theme="dark"] .pagination .page-item.active .page-link { background: var(--color-primary) !important; border-color: var(--color-primary) !important; color: #0f1117 !important; } [data-theme="dark"] .pagination .page-link:hover { background: #1e293b !important; color: var(--color-primary) !important; } /* ── Search input ────────────────────────────────────────── */ [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] textarea, [data-theme="dark"] .form-control { background: #1a2236 !important; border-color: #334155 !important; color: #e2e8f0 !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #64748b !important; } /* ── Section backgrounds ─────────────────────────────────── */ [data-theme="dark"] section, [data-theme="dark"] .section-block { background-color: transparent; } [data-theme="dark"] .bg-white, [data-theme="dark"] .bg-light { background-color: #1a2236 !important; } [data-theme="dark"] .bg-body-secondary { background-color: #111827 !important; } /* ── Ad slots ────────────────────────────────────────────── */ [data-theme="dark"] .ad-slot { background: #1a2236; border-radius: 8px; } /* ── Cookie consent banner ───────────────────────────────── */ [data-theme="dark"] #cookieConsentBar { background: #1a2236 !important; border-top-color: #1e293b !important; } [data-theme="dark"] #cookieConsent strong, [data-theme="dark"] #cookieConsentBar strong { color: #e2e8f0 !important; } [data-theme="dark"] #cookieConsentBar span { color: #94a3b8 !important; } [data-theme="dark"] #cookieReject { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; } /* ── Lead popup modal ────────────────────────────────────── */ [data-theme="dark"] #leadPopupModal { background: #1a2236 !important; } [data-theme="dark"] #leadPopupModal h3 { color: #e2e8f0 !important; } [data-theme="dark"] #leadPopupModal p { color: #94a3b8 !important; } [data-theme="dark"] #leadPopupModal input[type="email"] { background: #111827 !important; border-color: #334155 !important; color: #e2e8f0 !important; } /* ── Left panel form ─────────────────────────────────────── */ [data-theme="dark"] .leftpanel_form { background: #1a2236 !important; } [data-theme="dark"] .leftpanel_form .form_bd .formcont .form-bd { background: #111827 !important; border-color: #1e293b !important; } [data-theme="dark"] .leftpanel_form .form_bd .formcont .form-bd .col-item .item-input { background: #1a2236 !important; border-color: #334155 !important; color: #e2e8f0 !important; } /* ── Copyright bar ───────────────────────────────────────── */ [data-theme="dark"] .copyright-block { background: var(--footer-copyright-bg, #07090f) !important; color: var(--footer-copyright-text, #94a3b8) !important; } [data-theme="dark"] .copyright-block p, [data-theme="dark"] .copyright-block span, [data-theme="dark"] .copyright-block a { color: var(--footer-copyright-text, #94a3b8) !important; } /* ── Smooth transition for theme switch ──────────────────── */ body, body *, .blog-item, .card, .permit-headersec, .footer-block, .copyright-block, .about-banner, #cookieConsentBar, #leadPopupModal { transition: background-color 0.25s ease, color 0.2s ease, border-color 0.2s ease; }