/** * Dark Mode Styles - Footprint Theme * * Applied when has the class 'dark-mode'. * Toggle button is injected by js/dark-mode-toggle.js. * * Many rules use !important because the theme's customizer outputs * dynamic CSS via wp_add_inline_style() which appears in the page * after external stylesheets and cannot be overridden otherwise. */ /* ── Dark mode toggle — sun/moon slider in header ────────────────── */ /* Pull search + toggle into a flex row so they sit side by side */ .header-topstrip-right { display: flex !important; align-items: center; justify-content: flex-end; float: right; } .header-top-strip-social { flex: 1; width: auto !important; float: none !important; } .canuck-show-search-trigger { flex-shrink: 0; } /* ── Neumorphic dark mode toggle ─────────────────────────────────── */ .dm-toggle-wrap { display: inline-flex; align-items: center; gap: 0; margin-left: 10px; cursor: pointer; flex-shrink: 0; line-height: 1; /* The pill itself — 75% of 40px strip = ~30px, scaled down */ position: relative; width: 52px; height: 24px; border-radius: 12px; background-color: #b0b0b0; box-shadow: 2px 2px 5px rgba(0,0,0,0.3), -1px -1px 4px rgba(255,255,255,0.6); transition: background-color 0.4s ease, box-shadow 0.4s ease; } /* Sun icon — left side, light mode */ .dm-toggle-icon.dm-sun { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); color: #525455; transition: opacity 0.3s ease; display: block; pointer-events: none; } /* Moon icon — right side, shows in dark mode */ .dm-toggle-icon.dm-moon { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: #aaa; opacity: 0; transition: opacity 0.3s ease; display: block; pointer-events: none; } /* The track button is invisible — the wrap IS the track visually */ .dm-toggle-track { position: absolute; inset: 0; border-radius: 15px; background: transparent; border: none; cursor: pointer; padding: 0; width: 100%; height: 100%; } .dm-toggle-track:focus { outline: none; } /* The sliding thumb circle */ .dm-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background-color: #f0f0f0; box-shadow: 2px 2px 4px rgba(0,0,0,0.3), -1px -1px 3px rgba(255,255,255,0.9); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), background-color 0.3s ease, box-shadow 0.3s ease; display: block; pointer-events: none; z-index: 1; } /* ── Dark mode state ─────────────────────────────────────────────── */ body.dark-mode .dm-toggle-wrap { background-color: #2a2a2a; box-shadow: 3px 3px 6px rgba(0,0,0,0.5), -2px -2px 5px rgba(255,255,255,0.05); } body.dark-mode .dm-toggle-thumb { transform: translateX(28px); background-color: #3a3a3a; box-shadow: 2px 2px 5px rgba(0,0,0,0.5), -1px -1px 3px rgba(255,255,255,0.05); } body.dark-mode .dm-toggle-icon.dm-sun { opacity: 0; } body.dark-mode .dm-toggle-icon.dm-moon { opacity: 1; color: #a0a0a0; } /* ── Instant background on to prevent flash of white ─────── */ /* The noflash script adds dark-mode to before exists. */ /* This rule fires immediately, preventing any white flash on load. */ html.dark-mode { background-color: #1a1a1a !important; } /* ── Page background & main content areas ─────────────────────────── */ body.dark-mode, body.dark-mode #page-title-wide, body.dark-mode #main-section, body.dark-mode #main-section-home, body.dark-mode #content-wrap, body.dark-mode #content-wrap-home, body.dark-mode #fullwidth, body.dark-mode #feature-slider-wrap, body.dark-mode .feature-wrap-full, body.dark-mode article, body.dark-mode .entry-content, body.dark-mode .post-wrap, body.dark-mode .post-content-wrap { background-color: #1a1a1a !important; color: #d4d4d4 !important; } /* ── Home page sections (all 15, customizer bg colours) ───────────── */ body.dark-mode .home-1-wide, body.dark-mode .home-1-wrap, body.dark-mode .home-2-wide, body.dark-mode .home-2-wrap, body.dark-mode .home-3-wide, body.dark-mode .home-3-wrap, body.dark-mode .home-4-wide, body.dark-mode .home-4-wrap, body.dark-mode .home-5-wide, body.dark-mode .home-5-wrap, body.dark-mode .home-6-wide, body.dark-mode .home-6-wrap, body.dark-mode .home-7-wide, body.dark-mode .home-7-wrap, body.dark-mode .home-8-wide, body.dark-mode .home-8-wrap, body.dark-mode .home-9-wide, body.dark-mode .home-9-wrap, body.dark-mode .home-10-wide, body.dark-mode .home-10-wrap, body.dark-mode .home-11-wide, body.dark-mode .home-11-wrap, body.dark-mode .home-12-wide, body.dark-mode .home-12-wrap, body.dark-mode .home-13-wide, body.dark-mode .home-13-wrap, body.dark-mode .home-14-wide, body.dark-mode .home-14-wrap, body.dark-mode .home-15-wide, body.dark-mode .home-15-wrap { background-color: #1a1a1a !important; color: #d4d4d4 !important; } /* Alternate sections slightly darker so there's still visual separation */ body.dark-mode .home-2-wide, body.dark-mode .home-2-wrap, body.dark-mode .home-4-wide, body.dark-mode .home-4-wrap, body.dark-mode .home-6-wide, body.dark-mode .home-6-wrap, body.dark-mode .home-8-wide, body.dark-mode .home-8-wrap, body.dark-mode .home-10-wide, body.dark-mode .home-10-wrap, body.dark-mode .home-12-wide, body.dark-mode .home-12-wrap, body.dark-mode .home-14-wide, body.dark-mode .home-14-wrap { background-color: #222222 !important; } /* Section overlay darkening layers */ body.dark-mode .home-1-wide-overlay, body.dark-mode .home-2-wide-overlay, body.dark-mode .home-3-wide-overlay, body.dark-mode .home-4-wide-overlay, body.dark-mode .home-5-wide-overlay, body.dark-mode .home-6-wide-overlay, body.dark-mode .home-7-wide-overlay, body.dark-mode .home-8-wide-overlay, body.dark-mode .home-9-wide-overlay, body.dark-mode .home-10-wide-overlay, body.dark-mode .home-11-wide-overlay, body.dark-mode .home-12-wide-overlay, body.dark-mode .home-13-wide-overlay, body.dark-mode .home-14-wide-overlay, body.dark-mode .home-15-wide-overlay { background-color: transparent !important; } /* Home section text, links, headings */ body.dark-mode [class*="home-"][class*="-wrap"] h1, body.dark-mode [class*="home-"][class*="-wrap"] h2, body.dark-mode [class*="home-"][class*="-wrap"] h3, body.dark-mode [class*="home-"][class*="-wrap"] h4, body.dark-mode [class*="home-"][class*="-wrap"] h5, body.dark-mode [class*="home-"][class*="-wrap"] h6, body.dark-mode [class*="home-"][class*="-wrap"] p:not(.jff-block-wrap *), body.dark-mode [class*="home-"][class*="-wrap"] span:not(.jff-block-wrap *), body.dark-mode [class*="home-"][class*="-wrap"] li:not(.jff-block-wrap *) { color: #d4d4d4 !important; } body.dark-mode [class*="home-"][class*="-wrap"] a:not(.jff-block-wrap *) { color: #a0a0a0 !important; } body.dark-mode [class*="home-"][class*="-wrap"] a:not(.jff-block-wrap *):hover { color: #d4d4d4 !important; } /* Home section buttons */ body.dark-mode [class*="home-"][class*="-button"] a.button1 { background-color: #333 !important; color: #d4d4d4 !important; border-color: #555 !important; } body.dark-mode [class*="home-"][class*="-button"] a.button1:hover { color: #fff !important; } /* ── Header ──────────────────────────────────────────────────────── */ body.dark-mode .header-wide-no-feature, body.dark-mode .header-wide-slider { background-color: #1a1a1a !important; } body.dark-mode .header-wide-no-feature .header-logo-menu-strip, body.dark-mode .header-wide-slider .header-logo-menu-strip { background-color: #1a1a1a !important; } body.dark-mode #main-menu-right, body.dark-mode .main-nav, body.dark-mode #main-menu-ul { background-color: #1a1a1a !important; } body.dark-mode .canuck-search, body.dark-mode .header-logo-menu-strip { background-color: #1a1a1a !important; } body.dark-mode .header-wide-no-feature .header-topstrip-wide, body.dark-mode .header-wide-slider .header-topstrip-wide { background-color: #1a1a1a !important; } body.dark-mode .header-wide-no-feature .header-topstrip-left, body.dark-mode .header-wide-slider .header-topstrip-left { color: #c0c0c0 !important; } body.dark-mode .header-wide-no-feature .header-topstrip-left a, body.dark-mode .header-wide-slider .header-topstrip-left a { color: #c0c0c0 !important; } body.dark-mode .header-wide-no-feature .header-topstrip-left svg path, body.dark-mode .header-wide-slider .header-topstrip-left svg path { fill: #c0c0c0 !important; } body.dark-mode .header-wide-no-feature .header-logo-menu-strip nav a, body.dark-mode .header-wide-slider .header-logo-menu-strip nav a { color: #c0c0c0 !important; } /* Sticky header */ body.dark-mode.sticky .header-wide-no-feature, body.dark-mode.sticky .header-wide-slider { background-color: #1e1e1e !important; border-bottom-color: #333 !important; } body.dark-mode.sticky .header-wide-image { background-color: #1e1e1e !important; border-bottom-color: #333 !important; } body.dark-mode.sticky .header-logo-menu-strip nav, body.dark-mode.sticky .header-logo-menu-strip nav a { color: #c0c0c0 !important; } body.dark-mode.sticky header.header-wide-no-feature div.header-logo-menu-strip, body.dark-mode.sticky header.header-wide-image div.header-logo-menu-strip { background-color: #1e1e1e !important; color: #c0c0c0 !important; } body.dark-mode .header-wide-no-feature button, body.dark-mode .header-wide-slider button { color: #c0c0c0 !important; } body.dark-mode.sticky .header-wide-image button { color: #c0c0c0 !important; } /* ── Navigation menu (desktop) ───────────────────────────────────── */ body.dark-mode #main-menu-right ul li { color: #c0c0c0 !important; border-top-color: rgba(200,200,200,0.1) !important; } body.dark-mode #main-menu-right ul ul li { background-color: #222 !important; } body.dark-mode #main-menu-right ul li a { color: #c0c0c0 !important; } body.dark-mode #main-menu-right ul ul li a { background-color: #222 !important; } body.dark-mode #main-menu-right ul ul li, body.dark-mode #main-menu-right ul ul li a { background-color: #252525 !important; color: #c0c0c0 !important; } body.dark-mode #main-menu-right ul li:hover > ul, body.dark-mode #main-menu-right ul li.focus > ul { background-color: #252525 !important; } body.dark-mode #main-menu-right ul ul li:hover > ul { background-color: #252525 !important; } body.dark-mode #main-menu-right ul ul li:hover > a, body.dark-mode #main-menu-right ul ul li.focus > a, body.dark-mode #main-menu-right ul ul li > a:hover { background-color: #16aee5 !important; color: #ffffff !important; } body.dark-mode #main-menu-right ul ul ul li:hover > a, body.dark-mode #main-menu-right ul ul ul li > a:hover { background-color: #16aee5 !important; color: #ffffff !important; } body.dark-mode #main-menu-right ul ul li.menu-item-has-children > a:before { color: #c0c0c0 !important; } body.dark-mode #main-menu-right ul ul ul li, body.dark-mode #main-menu-right ul ul ul li a { background-color: #2a2a2a !important; color: #c0c0c0 !important; } body.dark-mode #main-menu-right ul ul ul ul li, body.dark-mode #main-menu-right ul ul ul ul li a { background-color: #2e2e2e !important; color: #c0c0c0 !important; } body.dark-mode #main-menu-right ul li button, body.dark-mode #main-menu-right ul ul li button, body.dark-mode #main-menu-right ul ul ul li button { background-color: #222 !important; color: #c0c0c0 !important; } /* Mobile nav drop-down */ body.dark-mode .main-nav { background-color: #222 !important; } /* ── Typography & links ───────────────────────────────────────────── */ /* Global rules with exclusions for plugin blocks that manage their */ /* own colours. Add :not(.your-plugin-wrap *) to exclude more blocks. */ body.dark-mode { color: #d4d4d4 !important; } body.dark-mode a:not(.jff-block-wrap *) { color: #a0a0a0 !important; } body.dark-mode h1:not(.jff-block-wrap *), body.dark-mode h2:not(.jff-block-wrap *), body.dark-mode h3:not(.jff-block-wrap *), body.dark-mode h4:not(.jff-block-wrap *), body.dark-mode h5:not(.jff-block-wrap *), body.dark-mode h6:not(.jff-block-wrap *) { color: #e0e0e0 !important; } body.dark-mode p:not(.jff-block-wrap *) { color: #d4d4d4 !important; } body.dark-mode blockquote p:before { color: #888 !important; } body.dark-mode pre { border-color: #555 !important; color: #d4d4d4 !important; background: #2a2a2a !important; } body.dark-mode code { background: #2a2a2a !important; color: #d4d4d4 !important; } /* ── Tables ──────────────────────────────────────────────────────── */ body.dark-mode th { border-color: #555 !important; background-color: #2e2e2e !important; color: #d4d4d4 !important; } body.dark-mode td { border-color: #444 !important; color: #d4d4d4 !important; } body.dark-mode tfoot { background-color: #2e2e2e !important; color: #d4d4d4 !important; } /* ── Sidebars ────────────────────────────────────────────────────── */ body.dark-mode #two-column-sidebar-left, body.dark-mode #two-column-sidebar-right, body.dark-mode #three-column-sidebar-left, body.dark-mode #three-column-sidebar-right { background-color: #1e1e1e !important; box-shadow: 0 0 5px #000 !important; } body.dark-mode .widget select { background-color: #2e2e2e !important; border-color: #555 !important; color: #c0c0c0 !important; } /* ── Post & page titles ──────────────────────────────────────────── */ body.dark-mode #page-title-wide { background-color: #111 !important; } body.dark-mode .post-title-comments { color: #d4d4d4 !important; } body.dark-mode .post-header-grid .post-title a, body.dark-mode .post-header-tf .post-title a { color: #d4d4d4 !important; } body.dark-mode .post-title a { color: #d4d4d4 !important; } /* Post meta */ body.dark-mode .pmeta-timestamp, body.dark-mode .pmeta-author, body.dark-mode .pmeta-post-comments, body.dark-mode .pmeta-categories, body.dark-mode .pmeta-taglist, body.dark-mode .pmeta-sticky, body.dark-mode .pmeta-edit { color: #888 !important; } body.dark-mode .pmeta-author a, body.dark-mode .pmeta-post-comments a, body.dark-mode .pmeta-categories a, body.dark-mode .pmeta-taglist a, body.dark-mode .pmeta-edit a { color: #888 !important; } body.dark-mode .pmeta-timestamp i, body.dark-mode .pmeta-author i, body.dark-mode .pmeta-post-comments i, body.dark-mode .pmeta-categories i, body.dark-mode .pmeta-taglist i, body.dark-mode .pmeta-sticky i, body.dark-mode .pmeta-edit i { color: #888 !important; } /* Read more button */ body.dark-mode .read-more-wrap a.read-more { color: #d4d4d4 !important; background-color: #222 !important; border-color: #555 !important; } body.dark-mode .read-more-wrap a.read-more:hover { color: #ffffff !important; } /* Gallery */ body.dark-mode .gallery img, body.dark-mode .wp-block-gallery.is-cropped .blocks-gallery-item img { border-color: #444 !important; background-color: #1e1e1e !important; } /* Quote post format */ body.dark-mode .format-quote .entry-content blockquote { border-left-color: #555 !important; background: #252525 !important; } /* Feature slider */ body.dark-mode #feature-slider-wrap { background-color: #111 !important; } /* ── Comments ────────────────────────────────────────────────────── */ body.dark-mode .comment-author .avatar { border-color: #444 !important; background-color: #1e1e1e !important; } body.dark-mode .comment-reply-link { color: #d4d4d4 !important; background-color: #222 !important; } body.dark-mode .comment-reply-link:hover { color: #ffffff !important; } body.dark-mode .comment-form-author input, body.dark-mode .comment-form-email input, body.dark-mode .comment-form-url input, body.dark-mode #respond textarea { background-color: #2a2a2a !important; color: #d4d4d4 !important; border-color: #555 !important; } body.dark-mode .comment-form .form-submit input#submit.submit { color: #d4d4d4 !important; background-color: #222 !important; } body.dark-mode .comment-form .form-submit input#submit.submit:hover { color: #ffffff !important; } body.dark-mode .error { background-color: #1e1e1e !important; } /* ── Widgets / Calendar / Tag cloud ─────────────────────────────── */ body.dark-mode #wp-calendar thead th { background-color: #2e2e2e !important; color: #d4d4d4 !important; } body.dark-mode #calendar_wrap td#today { background-color: #333 !important; color: #fff !important; } body.dark-mode .tagcloud a { background-color: #222 !important; border-color: #444 !important; color: #c0c0c0 !important; } body.dark-mode .tagcloud a:hover { background-color: #333 !important; } body.dark-mode .canuck_recent_posts li span { color: #888 !important; } /* Search field */ body.dark-mode .searchform .search-field { border-color: #555 !important; color: #d4d4d4 !important; background-color: #2a2a2a !important; } /* Pagination */ body.dark-mode .nav-links .page-numbers { background-color: #222 !important; color: #d4d4d4 !important; border-color: #555 !important; } /* Post nav */ body.dark-mode .postpagenav .left, body.dark-mode .postpagenav .right { color: #888 !important; } /* Scroll-to-top */ body.dark-mode .scrolltotop { color: rgba(255,255,255,.5) !important; background-color: rgba(255,255,255,0.1) !important; border-color: rgba(255,255,255,0.3) !important; } /* Masonry */ body.dark-mode .masonry-gallery { background: #1a1a1a !important; } /* ── Footer ──────────────────────────────────────────────────────── */ body.dark-mode #canuck-footer { background-color: #111 !important; } body.dark-mode .footer-overlay { background-color: transparent !important; } body.dark-mode #footer-wrap, body.dark-mode #footer-wrap h3 { color: #b0b0b0 !important; } body.dark-mode #footer-wrap ul li { color: #b0b0b0 !important; } body.dark-mode #footer-wrap a { color: #909090 !important; } body.dark-mode #footer-wrap a:hover { color: #c0c0c0 !important; } body.dark-mode #copyright { background-color: #0d0d0d !important; } body.dark-mode #copyright-wrap span, body.dark-mode #copyright-wrap a { color: #777 !important; } body.dark-mode #copyright-wrap a:hover { color: #aaa !important; } /* ── Smooth colour transition ────────────────────────────────────── */ body { transition: background-color 0.25s ease, color 0.25s ease; } #main-section, #fullwidth, #feature-slider-wrap, #page-title-wide, .home-1-wide, .home-2-wide, .home-3-wide, .home-4-wide, .home-5-wide, .home-6-wide, .home-7-wide, .home-8-wide, .home-9-wide, .home-10-wide, .home-11-wide, .home-12-wide, .home-13-wide, .home-14-wide, .home-15-wide, #canuck-footer, #copyright, .header-wide-no-feature, .header-wide-slider, #two-column-sidebar-left, #two-column-sidebar-right, #three-column-sidebar-left, #three-column-sidebar-right { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } /* ── Recent Posts Widget With Thumbnails plugin ───────────────────── */ body.dark-mode .rpwwt-post-title, body.dark-mode .rpwwt-post-title a, body.dark-mode .rpwwt-post-date, body.dark-mode .rpwwt-post-author, body.dark-mode .rpwwt-post-comment-count, body.dark-mode .rpwwt-widget-list li, body.dark-mode .rpwwt-widget-list li a, body.dark-mode .rpwwt-widget-list li span { color: #d4d4d4 !important; } body.dark-mode .rpwwt-widget-list li a:hover { color: #ffffff !important; } /* ── Image invert rules are generated dynamically ───────────────── */ /* Manage the list of filenames at Settings > Dark Mode in the */ /* WordPress admin. Rules are injected via wp_add_inline_style(). */ /* ── JustFor.Fans block — no override needed ─────────────────────── */ /* Blanket p/span/a/h* rules are now scoped to theme content areas, */ /* so plugin blocks with their own stylesheets are unaffected. */ /* ── follow-link class — black in light mode, white in dark mode ─── */ a.follow-link { color: #000000 !important; } body.dark-mode a.follow-link { color: #ffffff !important; } /* ── Dark mode toggle in mobile menu overlay ─────────────────────── */ /* The wrap is just a positioner — reset all desktop pill styles */ .dm-mobile-toggle-wrap { position: absolute !important; top: 0 !important; left: 21px !important; height: 45px !important; display: inline-flex !important; align-items: center !important; margin: 0 !important; width: auto !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; z-index: 10 !important; } /* The track IS the pill on mobile — give it the pill styles */ .dm-mobile-track { position: relative !important; inset: auto !important; width: 52px !important; height: 24px !important; border-radius: 12px !important; background-color: #b0b0b0 !important; box-shadow: 2px 2px 5px rgba(0,0,0,0.3), -1px -1px 4px rgba(255,255,255,0.6) !important; border: none !important; cursor: pointer !important; padding: 0 !important; flex-shrink: 0; transition: background-color 0.4s ease; } /* Icons inside the track, absolutely positioned like desktop */ .dm-mobile-track .dm-toggle-icon.dm-sun { position: absolute !important; left: 28px !important; top: 50% !important; transform: translateY(-50%) !important; color: #525455 !important; opacity: 1 !important; pointer-events: none; } .dm-mobile-track .dm-toggle-icon.dm-moon { position: absolute !important; left: 8px !important; top: 50% !important; transform: translateY(-50%) !important; color: #a0a0a0 !important; opacity: 0 !important; transition: opacity 0.3s ease; pointer-events: none; } /* Thumb */ .dm-mobile-track .dm-toggle-thumb { position: absolute !important; top: 2px !important; left: 2px !important; width: 20px !important; height: 20px !important; border-radius: 50% !important; background-color: #f0f0f0 !important; box-shadow: 2px 2px 4px rgba(0,0,0,0.3), -1px -1px 3px rgba(255,255,255,0.9) !important; transition: transform 0.35s cubic-bezier(0.4,0,0.2,1) !important; display: block !important; pointer-events: none; z-index: 1; } /* Dark mode state */ body.dark-mode .dm-mobile-track { background-color: #2a2a2a !important; box-shadow: 2px 2px 5px rgba(0,0,0,0.5), -1px -1px 4px rgba(255,255,255,0.05) !important; } body.dark-mode .dm-mobile-track .dm-toggle-thumb { transform: translateX(28px) !important; background-color: #3a3a3a !important; } body.dark-mode .dm-mobile-track .dm-toggle-icon.dm-sun { opacity: 0 !important; } body.dark-mode .dm-mobile-track .dm-toggle-icon.dm-moon { opacity: 1 !important; } /* ── Mobile menu overlay dark mode ──────────────────────────────── */ body.dark-mode .mobmenu-right-panel, body.dark-mode .mobmenu-left-panel { background-color: #1a1a1a !important; } body.dark-mode .mobmenu-content, body.dark-mode .mob-menu-right-bg-holder, body.dark-mode .mob-menu-left-bg-holder { background-color: #1a1a1a !important; } body.dark-mode .mobmenu-content li a, body.dark-mode .mobmenu-content #mobmenuright li a, body.dark-mode .mobmenu-content #mobmenuright > li > a, body.dark-mode .mobmenu-content #mobmenuright > li > a:hover, body.dark-mode .mobmenu-content #mobmenuright li a:hover { color: #d4d4d4 !important; background-color: transparent !important; } body.dark-mode .mobmenu-content li { color: #d4d4d4 !important; border-color: rgba(255,255,255,0.1) !important; } body.dark-mode .mobmenu-content .sub-menu li, body.dark-mode .mobmenu-content .sub-menu li a, body.dark-mode .mobmenu-content .sub-menu li a:hover, body.dark-mode .mobmenu-content [class*="toggle-ul-"] li, body.dark-mode .mobmenu-content [class*="toggle-ul-"] li a, body.dark-mode .mobmenu-content [class*="toggle-ul-"] li a:hover, body.dark-mode #mobmenuright .sub-menu li, body.dark-mode #mobmenuright .sub-menu li a, body.dark-mode #mobmenuright .sub-menu li a:hover { color: #c0c0c0 !important; } body.dark-mode .mob-icon-down-open, body.dark-mode .mob-icon-up-open-big, body.dark-mode .mob-cancel-button { color: #d4d4d4 !important; } body.dark-mode .mobmenu-right-bt, body.dark-mode .mobmenu-left-bt { color: #d4d4d4 !important; } /* ── JustFor.Fans stats block dark mode ──────────────────────────── */ body.dark-mode .jff-stats-block { background: #2a2a2a !important; box-shadow: 0 4px 18px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.4) !important; border: 2px solid rgba(255,255,255,0.3) !important; border-radius: 16px !important; } body.dark-mode .jff-stat-label { color: #ffffff !important; } body.dark-mode .jff-stat-runtime { border-top-color: rgba(255,255,255,0.15) !important; } body.dark-mode .jff-block-title { color: #ffffff !important; } body.dark-mode .jff-block-footer-link a, body.dark-mode .jff-block-footer-link a:link, body.dark-mode .jff-block-footer-link a:visited { color: #ffffff !important; }