/* ============================================================= Rescue Alert – Custom Dark Mode Toggled by adding .ra-dark-mode to ============================================================= */ /* ── Transition on all major surfaces ── */ html { transition: background-color 0.35s ease, color 0.35s ease; } body, .site-header, .top-bar, .banner, .footer-t, .footer-b, .widget, .entry-content, .page-header, #primary, #secondary, .comment-body, .responsive-nav { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease; } /* ── Dark Mode Variables & Overrides ── */ html.ra-dark-mode { --dm-bg: #000000; --dm-bg-alt: #000000; --dm-surface: #000000; --dm-surface-2: #334155; --dm-text: #F1F5F9; --dm-text-sec: #CBD5E1; --dm-text-muted: #94A3B8; --dm-border: #334155; --dm-accent: #F16022; --dm-accent-hover: #FB923C; --dm-link: #60A5FA; --dm-link-hover: #93C5FD; } /* ── Base surfaces ── */ html.ra-dark-mode, html.ra-dark-mode body, html.ra-dark-mode #content { background-color: var(--dm-bg) !important; color: var(--dm-text) !important; } /* ── Header ── */ html.ra-dark-mode .site-header { background-color: rgba(15, 23, 42, 0.97) !important; border-bottom-color: var(--dm-border) !important; } html.ra-dark-mode .site-header .container { background-color: transparent !important; } html.ra-dark-mode .main-navigation ul li a, html.ra-dark-mode .site-title a, html.ra-dark-mode .site-description { color: var(--dm-text) !important; } html.ra-dark-mode .main-navigation ul li a:hover, html.ra-dark-mode .main-navigation ul li.current-menu-item > a { color: var(--dm-accent) !important; } html.ra-dark-mode .main-navigation ul .sub-menu { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; } html.ra-dark-mode .main-navigation ul .sub-menu li a { color: var(--dm-text-sec) !important; } html.ra-dark-mode .main-navigation ul .sub-menu li a:hover { color: var(--dm-accent) !important; } /* ── Top bar / breadcrumb ── */ html.ra-dark-mode .top-bar { background-color: var(--dm-surface) !important; color: var(--dm-text-sec) !important; } html.ra-dark-mode .top-bar a { color: var(--dm-text-sec) !important; } /* ── Page header ── */ html.ra-dark-mode .page-header { background-color: var(--dm-bg-alt) !important; } html.ra-dark-mode .page-header .page-title { color: var(--dm-text) !important; } /* ── Banner / Hero – swap image ── */ html.ra-dark-mode #wp-custom-header { background-image: url('/wp-content/uploads/2026/02/AnimalMixDark.jpg') !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; } html.ra-dark-mode #wp-custom-header img { visibility: hidden !important; } /* html.ra-dark-mode .banner::before, html.ra-dark-mode .banner .wp-custom-header::before { background: rgba(15, 23, 42, 0.55) !important; } */ /* ── Content area ── */ html.ra-dark-mode #content, html.ra-dark-mode .site-content { background-color: var(--dm-bg) !important; } html.ra-dark-mode .entry-content, html.ra-dark-mode .entry-summary { color: var(--dm-text-sec) !important; } html.ra-dark-mode .entry-content h1, html.ra-dark-mode .entry-content h2, html.ra-dark-mode .entry-content h3, html.ra-dark-mode .entry-content h4, html.ra-dark-mode .entry-content h5, html.ra-dark-mode .entry-content h6, html.ra-dark-mode .entry-title, html.ra-dark-mode .entry-title a { color: var(--dm-text) !important; } html.ra-dark-mode a { color: var(--dm-link); } html.ra-dark-mode a:hover { color: var(--dm-link-hover); } html.ra-dark-mode .entry-meta, html.ra-dark-mode .entry-meta a, html.ra-dark-mode .entry-footer, html.ra-dark-mode .entry-footer a { color: var(--dm-text-muted) !important; } /* ── Cards / posts ── */ html.ra-dark-mode article, html.ra-dark-mode .post-thumbnail { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; } html.ra-dark-mode article .entry-header, html.ra-dark-mode article .entry-content { background-color: transparent !important; } /* ── Widgets / Sidebar ── */ html.ra-dark-mode .widget { background-color: var(--dm-surface) !important; color: var(--dm-text-sec) !important; border-color: var(--dm-border) !important; } html.ra-dark-mode .widget-title, html.ra-dark-mode .widget-title a { color: var(--dm-text) !important; } html.ra-dark-mode .widget a { color: var(--dm-link) !important; } html.ra-dark-mode .widget a:hover { color: var(--dm-link-hover) !important; } /* ── Sections (trending, featured, about, cta, etc.) ── */ html.ra-dark-mode section[class*="-section"], html.ra-dark-mode .trending-stories-section, html.ra-dark-mode .about-section, html.ra-dark-mode .cta-section, html.ra-dark-mode .client-logo-section, html.ra-dark-mode .subscription-section { background-color: var(--dm-bg-alt) !important; color: var(--dm-text) !important; } html.ra-dark-mode section[class*="-section"] .widget-title, html.ra-dark-mode .section-title { color: var(--dm-text) !important; } html.ra-dark-mode section[class*="-section"] .widget-title::after, html.ra-dark-mode .section-title::after { background-image: url('data:image/svg+xml; utf-8, '); background-color: transparent !important; background-repeat: no-repeat !important; background-size: contain !important; } /* ── Footer ── */ html.ra-dark-mode .footer-t { background-color: #020617 !important; color: var(--dm-text-muted) !important; } html.ra-dark-mode .footer-t .widget-title { color: var(--dm-text) !important; } html.ra-dark-mode .footer-t a { color: var(--dm-text-muted) !important; } html.ra-dark-mode .footer-t a:hover { color: var(--dm-accent) !important; } html.ra-dark-mode .footer-b { background-color: #020617 !important; color: var(--dm-text-muted) !important; border-top-color: var(--dm-border) !important; } html.ra-dark-mode .footer-b a { color: var(--dm-text-muted) !important; } /* ── Forms ── */ html.ra-dark-mode input[type="text"], html.ra-dark-mode input[type="email"], html.ra-dark-mode input[type="url"], html.ra-dark-mode input[type="password"], html.ra-dark-mode input[type="search"], html.ra-dark-mode input[type="number"], html.ra-dark-mode input[type="tel"], html.ra-dark-mode textarea, html.ra-dark-mode select { background-color: var(--dm-surface) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } html.ra-dark-mode input::placeholder, html.ra-dark-mode textarea::placeholder { color: var(--dm-text-muted) !important; } html.ra-dark-mode button, html.ra-dark-mode input[type="submit"], html.ra-dark-mode .btn-readmore { background-color: var(--dm-accent) !important; color: #fff !important; border-color: var(--dm-accent) !important; } html.ra-dark-mode button:hover, html.ra-dark-mode input[type="submit"]:hover, html.ra-dark-mode .btn-readmore:hover { background-color: var(--dm-accent-hover) !important; border-color: var(--dm-accent-hover) !important; } /* ── Comments ── */ html.ra-dark-mode .comments-area { background-color: var(--dm-bg) !important; } html.ra-dark-mode .comment-body { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text-sec) !important; } html.ra-dark-mode .comment-author .fn, html.ra-dark-mode .comment-author .fn a { color: var(--dm-text) !important; } /* ── Responsive nav (mobile menu) ── */ html.ra-dark-mode .responsive-nav { background-color: rgba(15, 23, 42, 0.97) !important; } html.ra-dark-mode .responsive-nav .main-navigation, html.ra-dark-mode .primary-menu-list, html.ra-dark-mode .main-menu-modal, html.ra-dark-mode .mobile-menu, html.ra-dark-mode .responsive-nav .main-navigation .nav-menu, html.ra-dark-mode .responsive-nav .main-navigation ul .sub-menu, html.ra-dark-mode .main-navigation ul .sub-menu { background-color: rgba(15, 23, 42, 0.97) !important; } html.ra-dark-mode .responsive-nav a { color: var(--dm-text) !important; } html.ra-dark-mode .responsive-nav .close-main-nav-toggle { background-color: rgba(15, 23, 42, 0.97) !important; } html.ra-dark-mode .responsive-nav .main-navigation .submenu-toggle { background-color: rgba(15, 23, 42, 0.97) !important; color: var(--dm-text) !important; } /* ── Search form ── */ html.ra-dark-mode .search-form .search-field { background-color: var(--dm-surface) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } /* ── Social links ── */ html.ra-dark-mode .social-list li a { color: var(--dm-text-sec) !important; } html.ra-dark-mode .social-list li a:hover { color: var(--dm-accent) !important; } /* ── Scroll bar ── */ html.ra-dark-mode::-webkit-scrollbar-track { background: var(--dm-bg); } html.ra-dark-mode::-webkit-scrollbar-thumb { background: var(--dm-surface-2); } /* ── Store download buttons ── */ html.ra-dark-mode .bttk_advertisement_widget img { filter: brightness(0.9); } /* ── Hamburger toggle bars ── */ html.ra-dark-mode .toggle-btn { background-color: rgba(15, 23, 42, 0.97) !important; } html.ra-dark-mode .toggle-btn .toggle-bar { background-color: var(--dm-text) !important; } html.ra-dark-mode .toggle-btn.active { background-color: rgba(15, 23, 42, 0.97) !important; } html.ra-dark-mode .toggle-btn:hover { background-color: rgba(15, 23, 42, 0.97) !important; } /* ── Donor section / GiveWP ── */ html.ra-dark-mode .give-wrap, html.ra-dark-mode .give-form-wrap, html.ra-dark-mode [id*="give-form"] { background-color: var(--dm-surface) !important; color: var(--dm-text-sec) !important; border-color: var(--dm-border) !important; } /* ── Tables ── */ html.ra-dark-mode table, html.ra-dark-mode th, html.ra-dark-mode td { border-color: var(--dm-border) !important; color: var(--dm-text-sec) !important; } html.ra-dark-mode th { background-color: var(--dm-surface-2) !important; color: var(--dm-text) !important; } /* ── Blockquotes ── */ html.ra-dark-mode blockquote { background-color: var(--dm-surface) !important; border-left-color: var(--dm-accent) !important; color: var(--dm-text-sec) !important; } /* ── HR ── */ html.ra-dark-mode hr { border-color: var(--dm-border) !important; } /* ── Code ── */ html.ra-dark-mode pre, html.ra-dark-mode code { background-color: var(--dm-surface-2) !important; color: var(--dm-text) !important; } /* ── "Back to top" or popups ── */ html.ra-dark-mode .paoc-padding-20.paoc-popup-con-bg { background-color: var(--dm-surface) !important; color: var(--dm-text) !important; } /* ============================================================= Dark Mode Toggle Button ============================================================= */ .ra-dark-toggle { position: fixed; bottom: 24px; right: 24px; z-index: 9999; width: 48px; height: 48px; border-radius: 50%; border: 2px solid #E2E8F0; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease; padding: 0; outline: none; } .ra-dark-toggle:hover { transform: scale(1.1); } .ra-dark-toggle:active { transform: scale(0.95); } /* Sun icon (shown in dark mode) */ .ra-dark-toggle__sun, /* Moon icon (shown in light mode) */ .ra-dark-toggle__moon { width: 22px; height: 22px; transition: opacity 0.3s ease, transform 0.3s ease; position: absolute; } .ra-dark-toggle__moon { opacity: 1; transform: rotate(0deg); } .ra-dark-toggle__sun { opacity: 0; transform: rotate(-90deg); } /* When dark mode is active, swap icons */ html.ra-dark-mode .ra-dark-toggle { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; } html.ra-dark-mode .ra-dark-toggle__moon { opacity: 0; transform: rotate(90deg); } html.ra-dark-mode .ra-dark-toggle__sun { opacity: 1; transform: rotate(0deg); } /* ── Print: always light ── */ @media print { html.ra-dark-mode, html.ra-dark-mode body { background: #fff !important; color: #000 !important; } .ra-dark-toggle { display: none !important; } }