/** * Negarnovin AI SEO Pro — Frontend Blocks dark mode styles (v3.6.6). * * Applies the user's exact dark-mode variable pattern to ALL 16 AI SEO blocks * rendered by NV_Frontend_Blocks (reading time, TL;DR, FAQ, TOC, related, * share, author box, etc.). * * The blocks use inline styles by default (for zero-dependency rendering). * In dark mode ([data-bs-theme="dark"]), this stylesheet overrides those * inline styles with CSS variables so blocks blend into the dark theme. * * Variable pattern (from user spec): * --nn-wrapper-bg, --nn-item-bg, --nn-item-border, --nn-text-title, * --nn-text-desc, --nn-hover-bg, --nn-hover-border, --nn-shadow-default, * --nn-shadow-hover, --nn-title-hover, --nn-highlight, --nn-flag-bg * * Dark mode is triggered by Bootstrap 5's [data-bs-theme="dark"] attribute * on or , which is the convention used by Hostim and most * modern Bootstrap-based themes. */ /* ════════════════════════════════════════════════════════════════════ * 1) CSS VARIABLES — light mode defaults (match the inline styles) * ════════════════════════════════════════════════════════════════════ */ :root { --nn-wrapper-bg: #ffffff; --nn-item-bg: #ffffff; --nn-item-bg-alt: #f8fafc; --nn-item-border: #e2e8f0; --nn-text-title: #0f172a; --nn-text-body: #1e293b; --nn-text-desc: #475569; --nn-text-muted: #64748b; --nn-text-faint: #94a3b8; --nn-hover-bg: #f1f5f9; --nn-hover-border: #cbd5e1; --nn-shadow-default: 0 1px 3px rgba(0, 0, 0, 0.04); --nn-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08); --nn-title-hover: #2563eb; --nn-highlight: #10b981; --nn-flag-bg: #f8fafc; --nn-link-color: #3b82f6; --nn-accent-blue: #3b82f6; --nn-accent-green: #10b981; --nn-accent-amber: #f59e0b; --nn-accent-purple: #8b5cf6; --nn-accent-red: #ef4444; } /* ════════════════════════════════════════════════════════════════════ * 2) CSS VARIABLES — dark mode (user's exact spec) * ════════════════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] { --nn-wrapper-bg: none !important; --nn-item-bg: #1e293b; --nn-item-bg-alt: #283548; --nn-item-border: rgba(255, 255, 255, 0.05); --nn-text-title: #f8fafc; --nn-text-body: #e2e8f0; --nn-text-desc: #94a3b8; --nn-text-muted: #94a3b8; --nn-text-faint: #64748b; --nn-hover-bg: #283548; --nn-hover-border: rgba(124, 58, 237, 0.4); --nn-shadow-default: 0 4px 15px rgba(0, 0, 0, 0.2); --nn-shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.4); --nn-title-hover: #60a5fa; --nn-highlight: #10b981; --nn-flag-bg: rgba(255, 255, 255, 0.05); --nn-link-color: #60a5fa; --nn-accent-blue: #60a5fa; --nn-accent-green: #34d399; --nn-accent-amber: #fbbf24; --nn-accent-purple: #a78bfa; --nn-accent-red: #f87171; } /* ════════════════════════════════════════════════════════════════════ * 3) DARK MODE OVERRIDES — override inline styles on each block * ════════════════════════════════════════════════════════════════════ */ /* ── ⏱️ Reading time badge ── */ [data-bs-theme="dark"] .nv-aiseo-reading-time { background: var(--nn-item-bg-alt) !important; color: var(--nn-accent-green) !important; } [data-bs-theme="dark"] .nv-aiseo-reading-time span { color: var(--nn-accent-green) !important; } /* ── 📝 TL;DR summary ── */ [data-bs-theme="dark"] .nv-aiseo-tldr { background: var(--nn-item-bg) !important; border-right-color: var(--nn-accent-amber) !important; box-shadow: var(--nn-shadow-default) !important; } [data-bs-theme="dark"] .nv-aiseo-tldr strong { color: var(--nn-accent-amber) !important; } [data-bs-theme="dark"] .nv-aiseo-tldr p { color: var(--nn-text-body) !important; } /* ── ⭐ Featured snippet ── */ [data-bs-theme="dark"] .nv-aiseo-featured-snippet { background: var(--nn-item-bg) !important; border-color: var(--nn-item-border) !important; border-right-color: var(--nn-accent-blue) !important; box-shadow: var(--nn-shadow-default) !important; } [data-bs-theme="dark"] .nv-aiseo-featured-snippet div { color: var(--nn-text-body) !important; } /* ── 🧭 Breadcrumbs ── */ [data-bs-theme="dark"] .nv-aiseo-breadcrumbs { color: var(--nn-text-muted) !important; } [data-bs-theme="dark"] .nv-aiseo-breadcrumbs a { color: var(--nn-link-color) !important; } [data-bs-theme="dark"] .nv-aiseo-breadcrumbs span[aria-current="page"] { color: var(--nn-text-title) !important; } /* ── 📊 Readability badge ── */ [data-bs-theme="dark"] .nv-aiseo-readability { background: var(--nn-item-bg-alt) !important; border-color: var(--nn-item-border) !important; } [data-bs-theme="dark"] .nv-aiseo-readability span { color: var(--nn-text-desc) !important; } /* ── ❓ FAQ block ── */ [data-bs-theme="dark"] .nv-aiseo-faq { background: var(--nn-item-bg-alt) !important; border-color: var(--nn-item-border) !important; box-shadow: var(--nn-shadow-default) !important; } [data-bs-theme="dark"] .nv-aiseo-faq h2 { color: var(--nn-text-title) !important; } [data-bs-theme="dark"] .nv-aiseo-faq details { background: var(--nn-item-bg) !important; border-color: var(--nn-item-border) !important; } [data-bs-theme="dark"] .nv-aiseo-faq summary { color: var(--nn-text-title) !important; } [data-bs-theme="dark"] .nv-aiseo-faq details > div { color: var(--nn-text-desc) !important; border-top-color: var(--nn-item-border) !important; } [data-bs-theme="dark"] .nv-aiseo-faq summary span:last-child { color: var(--nn-link-color) !important; } /* ── 💭 People Also Ask ── */ [data-bs-theme="dark"] .nv-aiseo-paa { background: var(--nn-item-bg-alt) !important; border-right-color: var(--nn-accent-blue) !important; } [data-bs-theme="dark"] .nv-aiseo-paa h2 { color: var(--nn-text-title) !important; } [data-bs-theme="dark"] .nv-aiseo-paa li { background: var(--nn-item-bg) !important; } [data-bs-theme="dark"] .nv-aiseo-paa a { color: var(--nn-link-color) !important; } /* ── 🔗 Related posts ── */ [data-bs-theme="dark"] .nv-aiseo-related h2 { color: var(--nn-text-title) !important; } [data-bs-theme="dark"] .nv-aiseo-related > div > a { background: var(--nn-item-bg) !important; border-color: var(--nn-item-border) !important; box-shadow: var(--nn-shadow-default) !important; } [data-bs-theme="dark"] .nv-aiseo-related > div > a:hover { box-shadow: var(--nn-shadow-hover) !important; border-color: var(--nn-hover-border) !important; } [data-bs-theme="dark"] .nv-aiseo-related > div > a > div:first-child { color: var(--nn-text-title) !important; } [data-bs-theme="dark"] .nv-aiseo-related > div > a > div:last-child { color: var(--nn-text-muted) !important; } /* ── 📚 Citation ── */ [data-bs-theme="dark"] .nv-aiseo-citation { background: var(--nn-item-bg-alt) !important; border-right-color: var(--nn-accent-purple) !important; } [data-bs-theme="dark"] .nv-aiseo-citation h2 { color: var(--nn-text-title) !important; } [data-bs-theme="dark"] .nv-aiseo-citation ol { color: var(--nn-text-desc) !important; } [data-bs-theme="dark"] .nv-aiseo-citation a { color: var(--nn-accent-purple) !important; } /* ── 🎯 CTA ── */ /* CTA uses a vibrant gradient that works in both modes — keep it */ /* ── 📑 TOC ── */ [data-bs-theme="dark"] .nv-aiseo-toc { background: var(--nn-item-bg-alt) !important; border-color: var(--nn-item-border) !important; } [data-bs-theme="dark"] .nv-aiseo-toc > div:first-child { color: var(--nn-text-title) !important; } [data-bs-theme="dark"] .nv-aiseo-toc a { color: var(--nn-link-color) !important; } /* ── 🔗 Share buttons ── */ [data-bs-theme="dark"] .nv-aiseo-share { border-top-color: var(--nn-item-border) !important; border-bottom-color: var(--nn-item-border) !important; } [data-bs-theme="dark"] .nv-aiseo-share > span:first-child { color: var(--nn-text-muted) !important; } /* ── 👤 Author box ── */ [data-bs-theme="dark"] .nv-aiseo-author { background: var(--nn-item-bg) !important; border-color: var(--nn-item-border) !important; box-shadow: var(--nn-shadow-default) !important; } [data-bs-theme="dark"] .nv-aiseo-author strong { color: var(--nn-text-title) !important; } [data-bs-theme="dark"] .nv-aiseo-author p { color: var(--nn-text-desc) !important; } [data-bs-theme="dark"] .nv-aiseo-author a { color: var(--nn-link-color) !important; } /* ════════════════════════════════════════════════════════════════════ * 4) UNIVERSAL DARK MODE — force readable text on any nv-aiseo-* block * (catches any inline-styled child elements we missed above) * ════════════════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .nv-aiseo-reading-time, [data-bs-theme="dark"] .nv-aiseo-tldr, [data-bs-theme="dark"] .nv-aiseo-featured-snippet, [data-bs-theme="dark"] .nv-aiseo-breadcrumbs, [data-bs-theme="dark"] .nv-aiseo-readability, [data-bs-theme="dark"] .nv-aiseo-faq, [data-bs-theme="dark"] .nv-aiseo-paa, [data-bs-theme="dark"] .nv-aiseo-related, [data-bs-theme="dark"] .nv-aiseo-citation, [data-bs-theme="dark"] .nv-aiseo-toc, [data-bs-theme="dark"] .nv-aiseo-share, [data-bs-theme="dark"] .nv-aiseo-author { color: var(--nn-text-body); } [data-bs-theme="dark"] .nv-aiseo-faq h2, [data-bs-theme="dark"] .nv-aiseo-paa h2, [data-bs-theme="dark"] .nv-aiseo-related h2, [data-bs-theme="dark"] .nv-aiseo-citation h2, [data-bs-theme="dark"] .nv-aiseo-toc > div:first-child, [data-bs-theme="dark"] .nv-aiseo-author strong { color: var(--nn-text-title) !important; } [data-bs-theme="dark"] .nv-aiseo-faq a, [data-bs-theme="dark"] .nv-aiseo-paa a, [data-bs-theme="dark"] .nv-aiseo-related a, [data-bs-theme="dark"] .nv-aiseo-citation a, [data-bs-theme="dark"] .nv-aiseo-toc a, [data-bs-theme="dark"] .nv-aiseo-author a, [data-bs-theme="dark"] .nv-aiseo-breadcrumbs a { color: var(--nn-link-color) !important; } [data-bs-theme="dark"] .nv-aiseo-readability strong, [data-bs-theme="dark"] .nv-aiseo-featured-snippet strong, [data-bs-theme="dark"] .nv-aiseo-share strong { color: var(--nn-text-title) !important; } /* ════════════════════════════════════════════════════════════════════ * 5) FAQ

open-state styling in dark mode * ════════════════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .nv-aiseo-faq details[open] summary { background: var(--nn-item-bg-alt) !important; } /* ════════════════════════════════════════════════════════════════════ * 6) RTL adjustments (Persian content) * ════════════════════════════════════════════════════════════════════ */ .nv-aiseo-faq, .nv-aiseo-paa, .nv-aiseo-related, .nv-aiseo-citation, .nv-aiseo-toc, .nv-aiseo-author, .nv-aiseo-share, .nv-aiseo-reading-time, .nv-aiseo-tldr, .nv-aiseo-featured-snippet, .nv-aiseo-breadcrumbs, .nv-aiseo-readability { direction: rtl; text-align: right; } /* ════════════════════════════════════════════════════════════════════ * 7) Print styles — hide non-essential blocks when printing * ════════════════════════════════════════════════════════════════════ */ @media print { .nv-aiseo-share, .nv-aiseo-related, .nv-aiseo-reading-time, .nv-aiseo-readability { display: none !important; } } /* ════════════════════════════════════════════════════════════════════ * 8) Mobile responsiveness * ════════════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { .nv-aiseo-related > div { grid-template-columns: 1fr !important; } .nv-aiseo-author { flex-direction: column !important; text-align: center; } .nv-aiseo-author img { margin: 0 auto 12px !important; } .nv-aiseo-share { justify-content: flex-start !important; } .nv-aiseo-share-btn { font-size: 11px !important; padding: 5px 10px !important; } }