/* ════════════════════════════════════════ DARK MODE STYLES — v3.0 FIXED باگ اصلی: body background در دارک مود تغییر نمی‌کرد چون background روی html/body::before/after تعریف شده بود در functions-background.php — این فایل همه اونا رو override می‌کنه ════════════════════════════════════════ */ /* ══════════════════════════════════════════ [FIX] بک‌گراند دارک‌مود از این فایل حذف شد چون در inc/functions-background.php به‌صورت inline در چاپ می‌شود و این تعاریف تکراری بودند که با !important با هم می‌جنگیدند. ───────────────────────────────────────── حذف‌شده: - .dark-mode, .dark-mode body { background: ... } - .dark-mode body::before { background-image: ... } - .dark-mode body::after { background: ... } - .dark-mode html::before { background: ... } نگه‌داشته‌شده: color: #f1f5f9 برای متن کلی ══════════════════════════════════════════ */ .dark-mode, .dark-mode body { color: #f1f5f9 !important; } /* ══════════════════════════════════════════ [FIX #2] CSS VARIABLES — دارک مود ══════════════════════════════════════════ */ .dark-mode { --fl-primary: #60a5fa; --fl-primary-dark: #3b82f6; --fl-accent: #c4d600; --fl-accent-hover: #a4b400; --fl-text: #f1f5f9; --fl-text-light: #94a3b8; --fl-white: #0f172a; --fl-glass-bg: rgba(30, 41, 59, 0.72); --fl-glass-border: rgba(255, 255, 255, 0.10); --fl-glass-blur: 42px; --fl-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); --bg-gradient-start: #0f172a; --bg-gradient-end: #1e293b; --text-dark: #f1f5f9; --text-medium: #cbd5e1; --text-light: #94a3b8; --gs-text: #f1f5f9; --gs-muted: #94a3b8; --gs-glass: rgba(30, 41, 59, 0.72); --gs-border: rgba(255, 255, 255, 0.10); --gs-glass-hover: rgba(30, 41, 59, 0.90); --blog-glass: rgba(30, 41, 59, 0.72); --blog-glass-strong: rgba(30, 41, 59, 0.90); --blog-glass-border: rgba(255, 255, 255, 0.10); } /* ══════════════════════════════════════════ DARK TOGGLE BUTTON ══════════════════════════════════════════ */ /* ══════════════════════════════════════════ DARK TOGGLE BUTTON [FIX] خوانایی آیکن خورشید/ماه واضح‌تر شد: - background تیره‌تر برای کنتراست با info bar - رنگ آیکن‌ها به زرد روشن (#FBBF24) - stroke صریح روی SVG ها ══════════════════════════════════════════ */ .fl-dark-toggle { width: 34px !important; height: 34px !important; display: flex !important; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.18) !important; border: 1.5px solid rgba(255, 255, 255, 0.45) !important; border-radius: 10px !important; color: #FBBF24 !important; transition: background 0.3s ease, transform 0.2s ease, border-color 0.3s ease; cursor: pointer; position: relative; overflow: hidden; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } .fl-dark-toggle:hover { background: rgba(251, 191, 36, 0.30) !important; border-color: rgba(251, 191, 36, 0.65) !important; transform: scale(1.08); } .fl-dark-icon-sun, .fl-dark-icon-moon { position: absolute; transition: opacity 0.4s ease, transform 0.4s ease; width: 18px !important; height: 18px !important; stroke: #FBBF24 !important; fill: none !important; stroke-width: 2.2 !important; color: #FBBF24 !important; } .fl-dark-toggle svg * { stroke: #FBBF24 !important; } .fl-dark-icon-sun { opacity: 1; transform: rotate(0deg) scale(1); } .fl-dark-icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.5); } /* ── حالت دارک: همان زرد روشن، فقط آیکن سویچ می‌شود ── */ .dark-mode .fl-dark-toggle { background: rgba(251, 191, 36, 0.20) !important; border-color: rgba(251, 191, 36, 0.50) !important; color: #FBBF24 !important; } .dark-mode .fl-dark-toggle:hover { background: rgba(251, 191, 36, 0.35) !important; border-color: rgba(251, 191, 36, 0.80) !important; } .dark-mode .fl-dark-icon-sun { opacity: 0; transform: rotate(90deg) scale(0.5); } .dark-mode .fl-dark-icon-moon { opacity: 1; transform: rotate(0deg) scale(1); } /* ══════════════════════════════════════════ [FIX #3] HEADER ══════════════════════════════════════════ */ /* [TOP] حالت floating */ .dark-mode .fl-info { background: linear-gradient(135deg, rgba(10, 18, 35, 0.96), rgba(20, 35, 60, 0.93)) !important; border-color: rgba(255, 255, 255, 0.08) !important; border-bottom: none !important; } /* [STUCK] چسبیده به بالا — کمی تیره‌تر و opaque‌تر */ .dark-mode .fl-header-group.stuck .fl-info { background: linear-gradient(135deg, rgba(7, 14, 28, 0.99), rgba(15, 25, 48, 0.98)) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; box-shadow: 0 3px 24px rgba(0, 0, 0, 0.45) !important; } .dark-mode .fl-info-chip { color: #e2e8f0 !important; } .dark-mode .fl-info-chip svg { stroke: #e2e8f0 !important; } .dark-mode .fl-info-chip:hover { color: #c4d600 !important; } .dark-mode .fl-info-chip:hover svg { stroke: #c4d600 !important; } .dark-mode .fl-info-sep { background: rgba(255, 255, 255, 0.08) !important; } /* [FIX] آیکن‌های شبکه‌های اجتماعی در دارک‌مود ناپدید می‌شدند چون از var(--fl-white) استفاده می‌کردند و در دارک‌مود این متغیر به #0f172a (تیره) تغییر می‌کند → سیاه روی سیاه */ .dark-mode .fl-info-social { color: #e2e8f0 !important; } .dark-mode .fl-info-social svg { fill: #e2e8f0 !important; } .dark-mode .fl-info-social:hover { color: #c4d600 !important; } .dark-mode .fl-info-social:hover svg { fill: #c4d600 !important; } .dark-mode .fl-bar { background: rgba(12, 20, 38, 0.90) !important; border-color: rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(42px) saturate(1.5) !important; -webkit-backdrop-filter: blur(42px) saturate(1.5) !important; } /* [STUCK] bar در دارک مود */ .dark-mode .fl-header-group.stuck .fl-bar { background: rgba(10, 17, 32, 0.95) !important; border-color: rgba(255, 255, 255, 0.06) !important; box-shadow: 0 6px 28px rgba(0, 0, 0, 0.40) !important; } .dark-mode .fl-logo-name, .dark-mode .fl-logo-sub { color: #f1f5f9 !important; } .dark-mode .fl-nav-link { color: #e2e8f0 !important; } .dark-mode .fl-nav-link:hover { background: rgba(255, 255, 255, 0.07) !important; color: #f1f5f9 !important; } .dark-mode .fl-nav-link.active { background: linear-gradient(135deg, var(--fl-primary), var(--fl-primary-dark)) !important; color: #fff !important; } .dark-mode .fl-drop-link { color: #e2e8f0 !important; } .dark-mode .fl-drop-link:hover { color: #f1f5f9 !important; } .dark-mode .fl-submenu { background: rgba(15, 23, 42, 0.97) !important; border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important; } .dark-mode .fl-submenu-link { color: #cbd5e1 !important; } .dark-mode .fl-submenu-link:hover { background: rgba(255, 255, 255, 0.05) !important; color: #f1f5f9 !important; } .dark-mode .fl-search-pop { background: rgba(15, 23, 42, 0.97) !important; border-color: rgba(255, 255, 255, 0.08) !important; } .dark-mode .fl-search-field { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.12) !important; } .dark-mode .fl-search-field input { color: #f1f5f9 !important; background: transparent !important; } .dark-mode .fl-search-field input::placeholder { color: #64748b !important; } .dark-mode .fl-icon-btn { color: #e2e8f0 !important; background: rgba(255, 255, 255, 0.08) !important; } .dark-mode .fl-icon-btn:hover { background: rgba(255, 255, 255, 0.15) !important; color: #f1f5f9 !important; } .dark-mode .fl-nav-arr { stroke: #94a3b8 !important; } .dark-mode .fl-drop-arrow-btn { color: #94a3b8 !important; } /* Lang Dropdown */ .dark-mode .fl-lang-toggle { background: rgba(255, 255, 255, 0.10) !important; border-color: rgba(255, 255, 255, 0.15) !important; color: #e2e8f0 !important; } .dark-mode .fl-lang-drop { background: rgba(15, 23, 42, 0.98) !important; border-color: rgba(255, 255, 255, 0.10) !important; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6) !important; } .dark-mode .fl-lang-drop-item { color: #e2e8f0 !important; } .dark-mode .fl-lang-drop-item:hover { background: rgba(255, 255, 255, 0.07) !important; color: #f1f5f9 !important; } .dark-mode .fl-lang-drop-slug { color: #64748b !important; } /* Drawer */ .dark-mode .fl-drawer { background: rgba(10, 17, 32, 0.99) !important; border-color: rgba(255, 255, 255, 0.08) !important; } .dark-mode .fl-drawer-head { background: rgba(15, 23, 42, 0.95) !important; border-bottom-color: rgba(255, 255, 255, 0.05) !important; } .dark-mode .fl-drawer-link, .dark-mode .fl-drawer-acc-link { color: #e2e8f0 !important; } .dark-mode .fl-drawer-link:hover, .dark-mode .fl-drawer-acc-link:hover { background: rgba(255, 255, 255, 0.05) !important; color: #f1f5f9 !important; } .dark-mode .fl-drawer-link.active, .dark-mode .fl-drawer-acc-link.active { background: linear-gradient(135deg, var(--fl-primary), var(--fl-primary-dark)) !important; color: #fff !important; } .dark-mode .fl-drawer-sub-link { color: #94a3b8 !important; } .dark-mode .fl-drawer-sub-link:hover { color: #f1f5f9 !important; } .dark-mode .fl-drawer-sep { background: rgba(255, 255, 255, 0.06) !important; } .dark-mode .fl-drawer-search { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.10) !important; } .dark-mode .fl-drawer-search input { color: #f1f5f9 !important; background: transparent !important; } .dark-mode .fl-drawer-search input::placeholder { color: #64748b !important; } .dark-mode .fl-overlay { background: rgba(0, 0, 0, 0.75) !important; } /* Burger */ .dark-mode .fl-burger span { background: #e2e8f0 !important; } /* ══════════════════════════════════════════ BREADCRUMB ══════════════════════════════════════════ */ .dark-mode .fl-breadcrumb-inner { background: rgba(15, 23, 42, 0.80) !important; border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important; } .dark-mode .fl-bc-item { background: rgba(30, 41, 59, 0.80) !important; border-color: rgba(255, 255, 255, 0.10) !important; color: #94a3b8 !important; } .dark-mode a.fl-bc-item:hover { color: #fff !important; background: linear-gradient(135deg, var(--fl-primary), var(--fl-primary-dark)) !important; border-color: transparent !important; } .dark-mode .fl-bc-current { color: #fff !important; background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important; } .dark-mode .fl-bc-sep svg { stroke: #475569 !important; } /* ══════════════════════════════════════════ FOOTER ══════════════════════════════════════════ */ .dark-mode .fl-ft-bg { background: radial-gradient(circle at 20% 20%, rgba(96, 165, 250, .10) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(59, 130, 246, .15) 0%, transparent 50%), linear-gradient(180deg, #040d1a 0%, #0a1628 100%) !important; background-color: #040d1a !important; } .dark-mode .fl-ft-wave svg { fill: #040d1a !important; } .dark-mode .fl-ft-col { background: rgba(255, 255, 255, 0.03) !important; border-color: rgba(255, 255, 255, 0.06) !important; } .dark-mode .fl-ft-col:hover { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.10) !important; } .dark-mode .fl-ft-col-title { color: #f1f5f9 !important; } .dark-mode .fl-ft-logo-name { color: #f1f5f9 !important; } .dark-mode .fl-ft-desc { color: #94a3b8 !important; } .dark-mode .fl-ft-social { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.10) !important; color: #cbd5e1 !important; } .dark-mode .fl-ft-link { color: #94a3b8 !important; } .dark-mode .fl-ft-link:hover { color: #60a5fa !important; } .dark-mode .fl-ft-link-dot { background: #475569 !important; } .dark-mode .fl-ft-contact-item { background: rgba(255, 255, 255, 0.03) !important; border-color: rgba(255, 255, 255, 0.06) !important; color: #94a3b8 !important; } .dark-mode .fl-ft-contact-item:hover { background: rgba(255, 255, 255, 0.08) !important; color: #f1f5f9 !important; } .dark-mode .fl-ft-bottom { background: rgba(0, 0, 0, 0.40) !important; border-top-color: rgba(255, 255, 255, 0.05) !important; } .dark-mode .fl-ft-copy { color: #475569 !important; } .dark-mode .fl-ft-back-top { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.10) !important; color: #e2e8f0 !important; } .dark-mode .fl-ft-back-top:hover { background: linear-gradient(135deg, var(--fl-accent), var(--fl-accent-hover)) !important; color: #000 !important; } /* ══════════════════════════════════════════ FLOATING BUTTONS ══════════════════════════════════════════ */ .dark-mode #fl-fab-menu .fl-fab-item { background: rgba(15, 23, 42, 0.95) !important; border-color: rgba(255, 255, 255, 0.10) !important; color: #e2e8f0 !important; } /* ══════════════════════════════════════════ BLOG ARCHIVE ────────────────────────────────────────── [REMOVED v3.1.3] کل بلوک blog-archive حذف شد چون selectorها (.jeison-blog-archive, .blog-hero-*, .blog-tags-*, .blog-post-card, .blog-pagination-*, .blog-view-*) با markup فعلی قالب match نمی‌شدند. markup فعلی از inc/functions-blog.php از کلاس‌های .fl-blog-* استفاده می‌کند که در بخش بعدی این فایل (پایین‌تر) کاور می‌شوند. اگر روزی قالب به نسخه قبلی blog-archive برگشت، از Git history احیا کنید. ══════════════════════════════════════════ */ /* ══════════════════════════════════════════ COMMENTS GLASS ══════════════════════════════════════════ */ .dark-mode .gc-section-badge { background: rgba(30, 41, 59, 0.80) !important; border-color: rgba(255, 255, 255, 0.10) !important; color: #60a5fa !important; } .dark-mode .gc-section-head h2 { color: #f1f5f9 !important; } .dark-mode .gc-section-head p { color: #94a3b8 !important; } .dark-mode .gc-count span { background: rgba(30, 41, 59, 0.80) !important; border-color: rgba(255, 255, 255, 0.10) !important; color: #f1f5f9 !important; } .dark-mode .comment-body { background: rgba(15, 23, 42, 0.75) !important; border-color: rgba(255, 255, 255, 0.08) !important; } .dark-mode .gc-name { color: #f1f5f9 !important; } .dark-mode .gc-content p, .dark-mode .gc-content { color: #e2e8f0 !important; } .dark-mode .gc-date, .dark-mode .gc-date * { color: #64748b !important; } .dark-mode .comment-reply-link { background: rgba(196, 214, 0, 0.10) !important; border-color: rgba(196, 214, 0, 0.20) !important; color: #c4d600 !important; } .dark-mode .comment-reply-link:hover { background: linear-gradient(135deg, var(--fl-accent), var(--fl-accent-hover)) !important; color: #000 !important; } .dark-mode .gc-separator span { background: rgba(30, 41, 59, 0.80) !important; border-color: rgba(255, 255, 255, 0.08) !important; color: #64748b !important; } .dark-mode .gc-form-title, .dark-mode .gc-form-title * { color: #f1f5f9 !important; } .dark-mode .comment-form { background: rgba(15, 23, 42, 0.75) !important; border-color: rgba(255, 255, 255, 0.08) !important; } .dark-mode .comment-form label { color: #e2e8f0 !important; } .dark-mode .comment-form input, .dark-mode .comment-form textarea { background: rgba(30, 41, 59, 0.80) !important; border-color: rgba(255, 255, 255, 0.10) !important; color: #f1f5f9 !important; } .dark-mode .comment-form input:focus, .dark-mode .comment-form textarea:focus { background: rgba(30, 41, 59, 0.95) !important; border-color: #60a5fa !important; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important; } .dark-mode .comment-form input::placeholder, .dark-mode .comment-form textarea::placeholder { color: #475569 !important; } /* ══════════════════════════════════════════ SEARCH PAGE ══════════════════════════════════════════ */ .dark-mode .gs-page { background: transparent !important; } .dark-mode .gs-page::before { background-image: linear-gradient(rgba(96, 165, 250, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(96, 165, 250, 0.05) 1px, transparent 1px) !important; } .dark-mode .gs-hero { background: rgba(15, 23, 42, 0.80) !important; border-color: rgba(255, 255, 255, 0.08) !important; } .dark-mode .gs-hero__eyebrow { background: rgba(30, 41, 59, 0.80) !important; border-color: rgba(255, 255, 255, 0.10) !important; color: #60a5fa !important; } .dark-mode .gs-hero__title { color: #f1f5f9 !important; } .dark-mode .gs-hero__title span { background: linear-gradient(135deg, #60a5fa, #c4d600) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } .dark-mode .gs-hero__count { color: #94a3b8 !important; } .dark-mode .gs-card { background: rgba(15, 23, 42, 0.75) !important; border-color: rgba(255, 255, 255, 0.08) !important; } .dark-mode .gs-card__title { color: #f1f5f9 !important; } .dark-mode .gs-card__excerpt, .dark-mode .gs-card__meta { color: #94a3b8 !important; } .dark-mode .gs-card__link:hover .gs-card__title { color: #60a5fa !important; } .dark-mode .gs-empty { background: rgba(15, 23, 42, 0.75) !important; border-color: rgba(255, 255, 255, 0.08) !important; } .dark-mode .gs-empty h2 { color: #f1f5f9 !important; } .dark-mode .gs-empty p { color: #94a3b8 !important; } .dark-mode .gs-pagination .page-numbers { background: rgba(30, 41, 59, 0.80) !important; border-color: rgba(255, 255, 255, 0.08) !important; color: #e2e8f0 !important; } .dark-mode .gs-pagination .page-numbers.current { background: linear-gradient(135deg, var(--fl-primary), var(--fl-primary-dark)) !important; color: #fff !important; } /* ══════════════════════════════════════════ CONTACT PAGE ══════════════════════════════════════════ */ .dark-mode .flcp-hero { background: linear-gradient(135deg, rgba(10, 18, 35, 0.97), rgba(20, 35, 60, 0.94)) !important; } .dark-mode .flcp-card { background: rgba(15, 23, 42, 0.80) !important; border-color: rgba(255, 255, 255, 0.08) !important; } .dark-mode .flcp-card-title, .dark-mode .flcp-card h3 { color: #f1f5f9 !important; } .dark-mode .flcp-phones a { background: rgba(30, 41, 59, 0.80) !important; border-color: rgba(255, 255, 255, 0.10) !important; color: #e2e8f0 !important; } .dark-mode .flcp-address { background: rgba(30, 41, 59, 0.80) !important; border-color: rgba(255, 255, 255, 0.10) !important; color: #e2e8f0 !important; } .dark-mode .flcp-email { background: rgba(30, 41, 59, 0.80) !important; border-color: rgba(255, 255, 255, 0.10) !important; color: #e2e8f0 !important; } .dark-mode .flcp-form-section { background: rgba(15, 23, 42, 0.80) !important; border-color: rgba(255, 255, 255, 0.08) !important; } .dark-mode .flcp-form-header h2, .dark-mode .flcp-form-header h3 { color: #f1f5f9 !important; } .dark-mode .flcp-form-header p { color: #94a3b8 !important; } .dark-mode .flcp-field label { color: #e2e8f0 !important; } .dark-mode .flcp-field input, .dark-mode .flcp-field textarea, .dark-mode .flcp-field select { background: rgba(30, 41, 59, 0.80) !important; border-color: rgba(255, 255, 255, 0.10) !important; color: #f1f5f9 !important; } .dark-mode .flcp-field input:focus, .dark-mode .flcp-field textarea:focus, .dark-mode .flcp-field select:focus { background: rgba(30, 41, 59, 0.95) !important; border-color: #60a5fa !important; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important; } .dark-mode .flcp-field input::placeholder, .dark-mode .flcp-field textarea::placeholder { color: #475569 !important; } .dark-mode .flcp-submit { background: linear-gradient(135deg, var(--fl-primary), var(--fl-primary-dark)) !important; } /* ══════════════════════════════════════════ PORTFOLIO ══════════════════════════════════════════ */ .dark-mode .fl-pf-page { background: transparent !important; } .dark-mode .fl-pf-panel { background: rgba(15, 23, 42, 0.80) !important; border-color: rgba(255, 255, 255, 0.08) !important; } .dark-mode .fl-pf-title { color: #f1f5f9 !important; border-bottom-color: var(--fl-accent) !important; } .dark-mode .fl-pf-card { background: rgba(15, 23, 42, 0.75) !important; border-color: rgba(255, 255, 255, 0.08) !important; } .dark-mode .fl-pf-card:hover { border-color: rgba(96, 165, 250, 0.25) !important; } .dark-mode .fl-pf-card-title a { color: #f1f5f9 !important; } .dark-mode .fl-pf-card-title a:hover { color: #60a5fa !important; } .dark-mode .fl-pf-excerpt { color: #94a3b8 !important; } .dark-mode .fl-pf-meta-item { color: #64748b !important; } .dark-mode .fl-pf-more { background: linear-gradient(135deg, var(--fl-accent), var(--fl-accent-hover)) !important; color: #000 !important; } .dark-mode .fl-pf-pagi a { background: rgba(30, 41, 59, 0.80) !important; border-color: rgba(255, 255, 255, 0.08) !important; color: #e2e8f0 !important; } .dark-mode .fl-pf-pagi a:hover { background: rgba(59, 130, 246, 0.80) !important; color: #fff !important; } .dark-mode .fl-pf-pagi .current { background: linear-gradient(135deg, var(--fl-primary), var(--fl-primary-dark)) !important; color: #fff !important; } /* ══════════════════════════════════════════ ELEMENTOR COMPATIBILITY ══════════════════════════════════════════ */ .dark-mode .elementor-widget-heading .elementor-heading-title { color: #f1f5f9; } .dark-mode .elementor-widget-text-editor { color: #e2e8f0; } .dark-mode .elementor-icon-list-item a { color: #e2e8f0; } .dark-mode .elementor-icon-list-item a:hover { color: #60a5fa; } .dark-mode .elementor-section, .dark-mode .e-con { color: inherit; } /* ══════════════════════════════════════════ [FIX #4] GLOBAL TRANSITION فقط به عناصر مشخص اعمال می‌شه — نه همه چیز (transition روی همه چیز باعث lag می‌شه) ══════════════════════════════════════════ */ body, .fl-bar, .fl-info, .fl-nav-link, .fl-logo-name, .fl-drawer, .fl-ft-bg, .fl-ft-col, .fl-pf-card, /* [REMOVED] .blog-post-card — selector dead بود */ .comment-body, .gs-card, .flcp-card, .fl-bc-item, .fl-lang-drop, .fl-search-pop { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.25s ease !important; } /* ══════════════════════════════════════════ REDUCE MOTION ══════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .fl-dark-toggle, .fl-dark-icon-sun, .fl-dark-icon-moon, body, body * { transition: none !important; animation: none !important; } } /* ══════════════════════════════════════════ SINGLE POST (fl-sp-blog) — Dark Mode Sync همگام‌سازی single.php با دارک مود تم single.php بدون تغییر — override از اینجا ══════════════════════════════════════════ */ /* ── Override CSS Variables داخل fl-sp-blog ── */ .dark-mode .fl-sp-blog { --fl-primary: #60a5fa !important; --fl-primary-dark: #3b82f6 !important; --fl-accent: #c4d600 !important; --fl-accent-hover: #a4b400 !important; --fl-text: #f1f5f9 !important; --fl-text-light: #94a3b8 !important; --fl-glass-bg: rgba(15, 23, 42, 0.75) !important; --fl-glass-border: rgba(255, 255, 255, 0.10) !important; } /* ── Glass cards ── */ .dark-mode .fl-sb-glass { background: rgba(15, 23, 42, 0.75) !important; border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05) !important; } /* ── Title ── */ .dark-mode .fl-sb-title { color: #f1f5f9 !important; border-bottom-color: #c4d600 !important; } .dark-mode .fl-sb-title-meta-item { color: #94a3b8 !important; } /* ── Image background ── */ .dark-mode .fl-sb-image { background: #0f172a !important; } /* ── Content ── */ .dark-mode .fl-sb-content p { color: #e2e8f0 !important; } .dark-mode .fl-sb-content h2, .dark-mode .fl-sb-content h3, .dark-mode .fl-sb-content h4 { color: #93c5fd !important; } .dark-mode .fl-sb-content a { color: #60a5fa !important; text-decoration-color: rgba(96,165,250,0.35) !important; } .dark-mode .fl-sb-content a:hover { color: #c4d600 !important; } .dark-mode .fl-sb-content blockquote { background: rgba(196,214,0,0.07) !important; border-color: #c4d600 !important; color: #94a3b8 !important; } /* ── Footer meta (tags + views) ── */ .dark-mode .fl-sb-footer-meta { border-top-color: rgba(255,255,255,0.07) !important; } .dark-mode .fl-sb-tag { background: rgba(196,214,0,0.10) !important; color: #c4d600 !important; } .dark-mode .fl-sb-tag:hover { background: #c4d600 !important; color: #000 !important; } .dark-mode .fl-sb-views-chip { background: rgba(255,255,255,0.05) !important; color: #94a3b8 !important; } /* ── Share + Nav bar ── */ .dark-mode .fl-sb-share-nav { border-top-color: rgba(255,255,255,0.07) !important; } .dark-mode .fl-sb-share-label { color: #64748b !important; } .dark-mode .fl-sb-share-btn--cp { background: rgba(96,165,250,0.10) !important; border-color: rgba(96,165,250,0.20) !important; } .dark-mode .fl-sb-share-btn--cp svg { stroke: #60a5fa !important; } .dark-mode .fl-sb-share-btn--cp:hover { background: #3b82f6 !important; } .dark-mode .fl-sb-nav-btn { background: rgba(96,165,250,0.08) !important; border-color: rgba(96,165,250,0.15) !important; color: #60a5fa !important; } .dark-mode .fl-sb-nav-btn:hover { background: #3b82f6 !important; color: #fff !important; border-color: transparent !important; } /* ── Related posts ── */ .dark-mode .fl-sb-related-head { color: #93c5fd !important; border-bottom-color: rgba(255,255,255,0.07) !important; } .dark-mode .fl-sb-related-head svg { stroke: #c4d600 !important; } .dark-mode .fl-sb-rel-card { background: rgba(20, 30, 55, 0.80) !important; border-color: rgba(255,255,255,0.08) !important; } .dark-mode .fl-sb-rel-card:hover { border-color: rgba(196,214,0,0.30) !important; box-shadow: 0 12px 36px rgba(0,0,0,0.35) !important; } .dark-mode .fl-sb-rel-title { color: #e2e8f0 !important; } /* ── Category slider ── */ .dark-mode .fl-sb-cats-wrap { background: rgba(15, 23, 42, 0.80) !important; border-color: rgba(255,255,255,0.08) !important; } .dark-mode .fl-sb-cat-card { border-color: transparent !important; } .dark-mode .fl-sb-cat-card:hover { border-color: #c4d600 !important; } /* ── VIP box — رنگ‌ها خودشون تیره هستن، نیاز به تغییر زیاد ندارن ── */ /* فقط background اصلی رو کمی تیره‌تر می‌کنیم */ .dark-mode .fl-sb-vip { background: linear-gradient(135deg, #060e1c 0%, #0d1e38 100%) !important; box-shadow: 0 20px 50px rgba(0,0,0,0.55) !important; } /* ════════════════════════════════════════════════════════════════ [FIX v3.1.3 — TRUE GLASS DARK MODE] هدف: کارت‌ها واقعاً شیشه‌ای باشن (transparent + heavy blur) تا رنگ بک‌گراند gradient از پشتشون رد بشه. متن‌ها هم به‌جای رنگ ثابت، از CSS Variable خوانده بشن تا با تم تطبیق پیدا کنن. چرا این بلوک ته فایل است؟ specificity برابر با بقیه است، اما چون آخرین تعریف است cascade برنده می‌شود. چرا مات بود قبلاً؟ rgba(15,23,42, 0.75) یعنی ۷۵٪ مات → عملاً پنل توپر بود نه شیشه. اینجا به ۳۵-۴۵٪ کاهش می‌دهیم + blur قوی‌تر. ════════════════════════════════════════════════════════════════ */ /* ── متغیرهای پایه دارک‌مود — اشباع و شفافیت تنظیم‌شده برای glass واقعی ── */ .dark-mode { /* رنگ glass — شفاف‌تر برای دیده شدن بک‌گراند */ --fl-glass-bg: rgba(20, 32, 56, 0.38) !important; --fl-glass-border: rgba(255, 255, 255, 0.10) !important; --fl-glass-blur: 28px !important; /* رنگ‌های متن — روشن برای کنتراست با glass تیره */ --fl-text: #f1f5f9 !important; /* بدنه اصلی */ --fl-text-light: #b6c2d6 !important; /* متن کم‌رنگ‌تر */ /* رنگ glass در دارک برای استفاده در selectors اختصاصی */ --gl-dark-glass: rgba(20, 32, 56, 0.38); --gl-dark-glass-hover: rgba(30, 45, 75, 0.50); --gl-dark-border: rgba(255, 255, 255, 0.10); --gl-dark-text: #f1f5f9; --gl-dark-text-muted: #b6c2d6; --gl-dark-text-dim: #94a3b8; --gl-dark-link: #93c5fd; } /* ── کارت‌های شیشه‌ای: glass واقعی با blur زیاد و opacity کم ── */ .dark-mode .gc-section .comment-body, .dark-mode .gc-section .gc-empty, .dark-mode .gc-section .gc-count span, .dark-mode .gc-section .gc-section-badge, .dark-mode .gc-section .gc-separator span, .dark-mode .gc-section .comment-form, .dark-mode .fl-pf-card, .dark-mode .fl-pf-panel, .dark-mode .fl-blog-card, .dark-mode .fl-featured, .dark-mode .fl-glass, .dark-mode .fl-sb-glass, .dark-mode .fl-sb-rel-card, .dark-mode .fl-sb-cats-wrap, .dark-mode .gs-card, .dark-mode .gs-empty, .dark-mode .gs-hero, .dark-mode .flcp-card, .dark-mode .flcp-form-section, .dark-mode .flcp-map-wrap, .dark-mode .flcp-socials-box, .dark-mode .gl-page-hero-card, .dark-mode .gl-page-card, .dark-mode .fl-breadcrumb-inner, .dark-mode .fl-ft-col { background: var(--gl-dark-glass) !important; border-color: var(--gl-dark-border) !important; backdrop-filter: blur(28px) saturate(1.6) !important; -webkit-backdrop-filter: blur(28px) saturate(1.6) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; } /* hover — کمی روشن‌تر و واضح‌تر */ .dark-mode .gc-section .comment-body:hover, .dark-mode .fl-pf-card:hover, .dark-mode .fl-blog-card:hover, .dark-mode .gs-card:hover, .dark-mode .flcp-card:hover, .dark-mode .fl-sb-rel-card:hover { background: var(--gl-dark-glass-hover) !important; border-color: rgba(147, 197, 253, 0.25) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important; } /* ── inputs/textarea شیشه‌ای ── */ .dark-mode .gc-section .comment-form input, .dark-mode .gc-section .comment-form textarea, .dark-mode .flcp-field input, .dark-mode .flcp-field textarea, .dark-mode .flcp-field select, .dark-mode .fl-search-field input, .dark-mode .fl-drawer-search input, .dark-mode .fl-pf-drawer-search input { background: rgba(15, 25, 45, 0.55) !important; border-color: rgba(255, 255, 255, 0.10) !important; color: var(--gl-dark-text) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; } .dark-mode .gc-section .comment-form input:focus, .dark-mode .gc-section .comment-form textarea:focus, .dark-mode .flcp-field input:focus, .dark-mode .flcp-field textarea:focus, .dark-mode .flcp-field select:focus, .dark-mode .fl-search-field input:focus, .dark-mode .fl-drawer-search input:focus { background: rgba(20, 35, 60, 0.75) !important; border-color: rgba(147, 197, 253, 0.45) !important; box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.15) !important; } .dark-mode input::placeholder, .dark-mode textarea::placeholder { color: rgba(180, 200, 230, 0.45) !important; } /* ── متن‌ها روشن (که از بک‌گراند رنگ بگیرن ولی خوانا باشن) ── */ .dark-mode, .dark-mode body, .dark-mode .site-main, .dark-mode p, .dark-mode li, .dark-mode .gc-section .gc-content, .dark-mode .gc-section .gc-content p, .dark-mode .fl-blog-excerpt, .dark-mode .fl-pf-excerpt, .dark-mode .gs-card__title, .dark-mode .gl-page-content, .dark-mode .gl-page-content p, .dark-mode .fl-sb-content p { color: var(--gl-dark-text) !important; } /* عنوان‌ها — کمی روشن‌تر */ .dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6, .dark-mode .fl-pf-title, .dark-mode .fl-pf-card-title a, .dark-mode .fl-blog-card-title a, .dark-mode .fl-blog-title, .dark-mode .gs-hero__title, .dark-mode .gl-page-title, .dark-mode .fl-sb-title, .dark-mode .gc-section-head h2 { color: #ffffff !important; } /* متن‌های ثانویه (تاریخ، meta، caption) */ .dark-mode .fl-text-light, .dark-mode .fl-blog-date, .dark-mode .fl-pf-meta-item, .dark-mode .gs-card__excerpt, .dark-mode .gs-card__meta, .dark-mode .gs-hero__count, .dark-mode .gl-meta-item, .dark-mode .fl-sb-title-meta-item, .dark-mode .gc-section .gc-section-head p, .dark-mode .gc-date, .dark-mode .gc-date *, .dark-mode small, .dark-mode .fl-bc-item { color: var(--gl-dark-text-muted) !important; } /* لینک‌ها در محتوا */ .dark-mode .gl-page-content a, .dark-mode .fl-sb-content a, .dark-mode .entry-content a { color: var(--gl-dark-link) !important; text-decoration-color: rgba(147, 197, 253, 0.4) !important; } .dark-mode .gl-page-content a:hover, .dark-mode .fl-sb-content a:hover { color: #c4d600 !important; } /* ── breadcrumb chip شیشه‌ای ── */ .dark-mode .fl-bc-item { background: rgba(20, 32, 56, 0.45) !important; border-color: rgba(255, 255, 255, 0.10) !important; color: var(--gl-dark-text-muted) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; } .dark-mode a.fl-bc-item:hover { background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important; color: #fff !important; border-color: transparent !important; } /* ── header glass (هدر شیشه‌ای واقعی در دارک) ── */ .dark-mode .fl-bar, .dark-mode .fl-header-group.stuck .fl-bar { background: rgba(15, 25, 45, 0.55) !important; backdrop-filter: blur(32px) saturate(1.5) !important; -webkit-backdrop-filter: blur(32px) saturate(1.5) !important; border-color: rgba(255, 255, 255, 0.08) !important; } .dark-mode .fl-info { background: linear-gradient(135deg, rgba(15, 25, 45, 0.65), rgba(25, 40, 70, 0.60)) !important; backdrop-filter: blur(28px) saturate(1.5) !important; -webkit-backdrop-filter: blur(28px) saturate(1.5) !important; border-color: rgba(255, 255, 255, 0.08) !important; } .dark-mode .fl-header-group.stuck .fl-info { background: linear-gradient(135deg, rgba(10, 18, 35, 0.78), rgba(20, 35, 60, 0.74)) !important; } /* ── drawer و submenu شیشه‌ای ── */ .dark-mode .fl-drawer { background: rgba(15, 25, 45, 0.78) !important; backdrop-filter: blur(42px) saturate(1.6) !important; -webkit-backdrop-filter: blur(42px) saturate(1.6) !important; } .dark-mode .fl-submenu, .dark-mode .fl-lang-drop, .dark-mode .fl-search-pop { background: rgba(15, 25, 45, 0.82) !important; backdrop-filter: blur(36px) saturate(1.6) !important; -webkit-backdrop-filter: blur(36px) saturate(1.6) !important; border-color: rgba(255, 255, 255, 0.08) !important; } /* ── footer columns شیشه‌ای ── */ .dark-mode .fl-ft-col { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; } .dark-mode .fl-ft-col:hover { background: rgba(255, 255, 255, 0.07) !important; } /* ── reduce-motion: کاهش blur برای دستگاه‌های ضعیف یا preference ── */ @media (prefers-reduced-transparency: reduce) { .dark-mode .gc-section .comment-body, .dark-mode .fl-pf-card, .dark-mode .fl-blog-card, .dark-mode .gs-card, .dark-mode .flcp-card, .dark-mode .gl-page-card, .dark-mode .gl-page-hero-card, .dark-mode .fl-sb-glass { background: rgba(15, 25, 45, 0.92) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } /* ════════════════════════════════════════════════════════════════ [FIX v3.1.3 — DARK MODE: SCOPED TEMPLATES] single.php و single-portfolio.php متغیرهای CSS را داخل scope خودشان (.fl-sp-blog و .fl-sp-page) ست می‌کنند. این override اطمینان می‌دهد در دارک‌مود این scope ها هم glass واقعی بشوند. ════════════════════════════════════════════════════════════════ */ /* ── 1) SINGLE PORTFOLIO (.fl-sp-page) ── */ .dark-mode .fl-sp-page { /* override متغیرهای محلی */ --fl-primary: #60a5fa !important; --fl-primary-dark: #3b82f6 !important; --fl-accent: #c4d600 !important; --fl-accent-hover: #a4b400 !important; --fl-text: #f1f5f9 !important; --fl-text-light: #b6c2d6 !important; --fl-white: #f1f5f9 !important; --fl-glass-bg: rgba(20, 32, 56, 0.38) !important; --fl-glass-border: rgba(255, 255, 255, 0.10) !important; } /* کارت‌های داخل portfolio single — همه با selectorهای محتمل */ .dark-mode .fl-sp-page [class*="fl-sp-"], .dark-mode .fl-sp-page .fl-glass, .dark-mode .fl-sp-page .fl-sb-glass, .dark-mode .fl-sp-page .fl-pf-card { color: var(--fl-text) !important; } /* بک‌گراند کارت‌های اصلی single portfolio */ .dark-mode .fl-sp-page > *, .dark-mode .fl-sp-page .fl-glass, .dark-mode .fl-sp-page > div[class*="card"], .dark-mode .fl-sp-page > div[class*="box"], .dark-mode .fl-sp-page > section, .dark-mode .fl-sp-page > article { background: var(--fl-glass-bg) !important; } /* تصویر اصلی بک‌گراند تیره */ .dark-mode .fl-sp-page .fl-sb-image, .dark-mode .fl-sp-page [class*="image-wrap"], .dark-mode .fl-sp-page [class*="gallery"] { background: #0a1224 !important; } /* عنوان‌ها و متن‌ها */ .dark-mode .fl-sp-page h1, .dark-mode .fl-sp-page h2, .dark-mode .fl-sp-page h3, .dark-mode .fl-sp-page h4 { color: #ffffff !important; } .dark-mode .fl-sp-page p, .dark-mode .fl-sp-page li, .dark-mode .fl-sp-page [class*="content"] p { color: var(--fl-text) !important; } .dark-mode .fl-sp-page small, .dark-mode .fl-sp-page [class*="meta"], .dark-mode .fl-sp-page [class*="date"], .dark-mode .fl-sp-page [class*="caption"], .dark-mode .fl-sp-page [class*="views"] { color: var(--fl-text-light) !important; } /* لینک‌های داخل محتوای portfolio */ .dark-mode .fl-sp-page [class*="content"] a, .dark-mode .fl-sp-page .entry-content a { color: #93c5fd !important; } /* ── 2) SINGLE POST (.fl-sp-blog) — تکمیل override موجود ── */ .dark-mode .fl-sp-blog { /* تأکید بر مقادیر شیشه‌ای واقعی (override موجود بالا rgba 0.75 داشت) */ --fl-glass-bg: rgba(20, 32, 56, 0.38) !important; --fl-glass-border: rgba(255, 255, 255, 0.10) !important; --fl-text: #f1f5f9 !important; --fl-text-light: #b6c2d6 !important; } /* glass cards در single post */ .dark-mode .fl-sp-blog .fl-sb-glass { background: var(--fl-glass-bg) !important; border-color: var(--fl-glass-border) !important; backdrop-filter: blur(28px) saturate(1.6) !important; -webkit-backdrop-filter: blur(28px) saturate(1.6) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; } /* تصویر اصلی single post */ .dark-mode .fl-sp-blog .fl-sb-image { background: #0a1224 !important; } /* عنوان‌ها سفید */ .dark-mode .fl-sp-blog h1, .dark-mode .fl-sp-blog h2, .dark-mode .fl-sp-blog h3, .dark-mode .fl-sp-blog h4 { color: #ffffff !important; } /* ── 3) PAGE TEMPLATE (.gl-page-wrap) — تأکید مجدد ── */ .dark-mode .gl-page-wrap { --fl-glass-bg: rgba(20, 32, 56, 0.38) !important; --fl-text: #f1f5f9 !important; --fl-text-light: #b6c2d6 !important; } .dark-mode .gl-page-hero-card, .dark-mode .gl-page-card { background: var(--fl-glass-bg) !important; border-color: rgba(255, 255, 255, 0.10) !important; backdrop-filter: blur(28px) saturate(1.6) !important; -webkit-backdrop-filter: blur(28px) saturate(1.6) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; } .dark-mode .gl-page-title { color: #ffffff !important; border-bottom-color: #c4d600 !important; } .dark-mode .gl-page-content, .dark-mode .gl-page-content p, .dark-mode .gl-page-content li { color: #f1f5f9 !important; } .dark-mode .gl-page-content h2, .dark-mode .gl-page-content h3, .dark-mode .gl-page-content h4 { color: #ffffff !important; } .dark-mode .gl-page-content a { color: #93c5fd !important; } .dark-mode .gl-page-meta, .dark-mode .gl-meta-item { color: #b6c2d6 !important; } /* ════════════════════════════════════════════════════════════════ [FIX v3.1.3] TOP SPACING — فاصله بیشتر از هدر برای single pages مشکل: تمپلیت‌های single خیلی نزدیک به هدر fixed شروع می‌شدن. راه‌حل: padding-top اضافه می‌کنیم (هم light هم dark، خارج از scope .dark-mode هست تا روی هر دو حالت اعمال شود). اگر می‌خوای فاصله رو تغییر بدی، فقط مقادیر زیر رو عوض کن: - دسکتاپ: ~50px - تبلت/موبایل: ~30px ════════════════════════════════════════════════════════════════ */ /* ── دسکتاپ ── */ .fl-sp-blog, .fl-sp-page, .gl-page-wrap { padding-top: 50px !important; } /* ── تبلت ── */ @media (max-width: 768px) { .fl-sp-blog, .fl-sp-page, .gl-page-wrap { padding-top: 30px !important; } } /* ── موبایل ── */ @media (max-width: 480px) { .fl-sp-blog, .fl-sp-page, .gl-page-wrap { padding-top: 24px !important; } }