/* Dark Mode Styles for Cards - Centralized Management */ /* Uses --lc-card-* tokens from design-system/tokens.css */ @media (prefers-color-scheme: dark) { .cards-grid { --card-publication-info-color: var(--lc-color-text-secondary, #cbd5e1); --card-publication-info-icon-color: var(--lc-color-text-muted, #94a3b8); --card-footer-bg: var(--lc-card-footer-bg, #1e293b); --card-footer-border-color: var(--lc-card-footer-border, rgba(255, 255, 255, 0.1)); } } /* ============================================ CARD FOOTER - Dark Mode Support ============================================ */ @media (prefers-color-scheme: dark) { .cards-grid > .mobile-expanded .card-footer, .cards-grid > .mobile-expanded .review-footer, .post-card .card-footer, .unified-card.post-card .card-footer, #posts-content #posts-list .post-card .card-footer, #posts-content #posts-list .unified-card.post-card .card-footer, #posts-tab-pane .post-card .card-footer, #posts-tab-pane .unified-card.post-card .card-footer, .cards-grid > .mobile-expanded.post-card .card-footer, .cards-grid > .mobile-expanded.unified-card.post-card .card-footer, #posts-content #posts-list.cards-grid > .mobile-expanded.post-card .card-footer, #posts-content #posts-list.cards-grid > .mobile-expanded.unified-card.post-card .card-footer, #posts-tab-pane .cards-grid > .mobile-expanded.post-card .card-footer, #posts-tab-pane .cards-grid > .mobile-expanded.unified-card.post-card .card-footer, #exploreFeed .unified-card[data-type="post"] .card-footer, #exploreFeed .explore-card[data-type="post"] .card-footer, #exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-type="post"] .card-footer, #exploreFeed .explore-card.mobile-expanded .unified-card[data-type="post"] .card-footer { background-color: var(--lc-card-footer-bg, #1e293b) !important; border-top-color: var(--lc-card-footer-border, rgba(255, 255, 255, 0.1)) !important; color: var(--lc-color-text-primary, #f1f5f9) !important; } } /* Post card footer interactions — profile, explore, expanded (token-based) */ @media (prefers-color-scheme: dark) { .post-card .card-footer .interaction-buttons, .unified-card.post-card .card-footer .interaction-buttons, #posts-content #posts-list .post-card .card-footer .interaction-buttons, #posts-content #posts-list .unified-card.post-card .card-footer .interaction-buttons, #posts-tab-pane .post-card .card-footer .interaction-buttons, #posts-tab-pane .unified-card.post-card .card-footer .interaction-buttons, .cards-grid > .mobile-expanded.post-card .card-footer .interaction-buttons, .cards-grid > .mobile-expanded.unified-card.post-card .card-footer .interaction-buttons, #posts-content #posts-list.cards-grid > .mobile-expanded.post-card .card-footer .interaction-buttons, #posts-content #posts-list.cards-grid > .mobile-expanded.unified-card.post-card .card-footer .interaction-buttons, #posts-tab-pane .cards-grid > .mobile-expanded.post-card .card-footer .interaction-buttons, #posts-tab-pane .cards-grid > .mobile-expanded.unified-card.post-card .card-footer .interaction-buttons, #exploreFeed .unified-card[data-type="post"] .card-footer .interaction-buttons, #exploreFeed .explore-card[data-type="post"] .card-footer .interaction-buttons, #exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-type="post"] .card-footer .interaction-buttons, #exploreFeed .explore-card.mobile-expanded .unified-card[data-type="post"] .card-footer .interaction-buttons, .post-card .card-footer span[id*="Count"], .unified-card.post-card .card-footer span[id*="Count"], #posts-content #posts-list .post-card .card-footer span[id*="Count"], #posts-content #posts-list .unified-card.post-card .card-footer span[id*="Count"], #posts-tab-pane .post-card .card-footer span[id*="Count"], #posts-tab-pane .unified-card.post-card .card-footer span[id*="Count"], .cards-grid > .mobile-expanded.post-card .card-footer span[id*="Count"], .cards-grid > .mobile-expanded.unified-card.post-card .card-footer span[id*="Count"], #posts-content #posts-list.cards-grid > .mobile-expanded.post-card .card-footer span[id*="Count"], #posts-content #posts-list.cards-grid > .mobile-expanded.unified-card.post-card .card-footer span[id*="Count"], #posts-tab-pane .cards-grid > .mobile-expanded.post-card .card-footer span[id*="Count"], #posts-tab-pane .cards-grid > .mobile-expanded.unified-card.post-card .card-footer span[id*="Count"], #exploreFeed .unified-card[data-type="post"] .card-footer span[id*="Count"], #exploreFeed .explore-card[data-type="post"] .card-footer span[id*="Count"], #exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-type="post"] .card-footer span[id*="Count"], #exploreFeed .explore-card.mobile-expanded .unified-card[data-type="post"] .card-footer span[id*="Count"] { color: var(--lc-color-text-primary, #f1f5f9) !important; } .post-card .card-footer .btn-outline-secondary, .unified-card.post-card .card-footer .btn-outline-secondary, #posts-content #posts-list .post-card .card-footer .btn-outline-secondary, #posts-content #posts-list .unified-card.post-card .card-footer .btn-outline-secondary, #posts-tab-pane .post-card .card-footer .btn-outline-secondary, #posts-tab-pane .unified-card.post-card .card-footer .btn-outline-secondary, .cards-grid > .mobile-expanded.post-card .card-footer .btn-outline-secondary, .cards-grid > .mobile-expanded.unified-card.post-card .card-footer .btn-outline-secondary, #posts-content #posts-list.cards-grid > .mobile-expanded.post-card .card-footer .btn-outline-secondary, #posts-content #posts-list.cards-grid > .mobile-expanded.unified-card.post-card .card-footer .btn-outline-secondary, #posts-tab-pane .cards-grid > .mobile-expanded.post-card .card-footer .btn-outline-secondary, #posts-tab-pane .cards-grid > .mobile-expanded.unified-card.post-card .card-footer .btn-outline-secondary, #exploreFeed .unified-card[data-type="post"] .card-footer .btn-outline-secondary, #exploreFeed .explore-card[data-type="post"] .card-footer .btn-outline-secondary, #exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-type="post"] .card-footer .btn-outline-secondary, #exploreFeed .explore-card.mobile-expanded .unified-card[data-type="post"] .card-footer .btn-outline-secondary { border-color: var(--lc-card-btn-border, rgba(255, 255, 255, 0.2)) !important; color: var(--lc-color-text-primary, #f1f5f9) !important; background-color: transparent !important; } .post-card .card-footer .btn-outline-secondary:hover, .unified-card.post-card .card-footer .btn-outline-secondary:hover, #posts-content #posts-list .post-card .card-footer .btn-outline-secondary:hover, #posts-content #posts-list .unified-card.post-card .card-footer .btn-outline-secondary:hover, #posts-tab-pane .post-card .card-footer .btn-outline-secondary:hover, #posts-tab-pane .unified-card.post-card .card-footer .btn-outline-secondary:hover, .cards-grid > .mobile-expanded.post-card .card-footer .btn-outline-secondary:hover, .cards-grid > .mobile-expanded.unified-card.post-card .card-footer .btn-outline-secondary:hover, #posts-content #posts-list.cards-grid > .mobile-expanded.post-card .card-footer .btn-outline-secondary:hover, #posts-content #posts-list.cards-grid > .mobile-expanded.unified-card.post-card .card-footer .btn-outline-secondary:hover, #posts-tab-pane .cards-grid > .mobile-expanded.post-card .card-footer .btn-outline-secondary:hover, #posts-tab-pane .cards-grid > .mobile-expanded.unified-card.post-card .card-footer .btn-outline-secondary:hover, #exploreFeed .unified-card[data-type="post"] .card-footer .btn-outline-secondary:hover, #exploreFeed .explore-card[data-type="post"] .card-footer .btn-outline-secondary:hover, #exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-type="post"] .card-footer .btn-outline-secondary:hover, #exploreFeed .explore-card.mobile-expanded .unified-card[data-type="post"] .card-footer .btn-outline-secondary:hover { background-color: var(--lc-card-btn-hover-bg, rgba(255, 255, 255, 0.1)) !important; border-color: var(--lc-card-btn-border-hover, rgba(255, 255, 255, 0.3)) !important; } .post-card .card-footer .btn-outline-secondary i, .unified-card.post-card .card-footer .btn-outline-secondary i, #posts-content #posts-list .post-card .card-footer .btn-outline-secondary i, #posts-content #posts-list .unified-card.post-card .card-footer .btn-outline-secondary i, #posts-tab-pane .post-card .card-footer .btn-outline-secondary i, #posts-tab-pane .unified-card.post-card .card-footer .btn-outline-secondary i, .cards-grid > .mobile-expanded.post-card .card-footer .btn-outline-secondary i, .cards-grid > .mobile-expanded.unified-card.post-card .card-footer .btn-outline-secondary i, #posts-content #posts-list.cards-grid > .mobile-expanded.post-card .card-footer .btn-outline-secondary i, #posts-content #posts-list.cards-grid > .mobile-expanded.unified-card.post-card .card-footer .btn-outline-secondary i, #posts-tab-pane .cards-grid > .mobile-expanded.post-card .card-footer .btn-outline-secondary i, #posts-tab-pane .cards-grid > .mobile-expanded.unified-card.post-card .card-footer .btn-outline-secondary i, #exploreFeed .unified-card[data-type="post"] .card-footer .btn-outline-secondary i, #exploreFeed .explore-card[data-type="post"] .card-footer .btn-outline-secondary i, #exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-type="post"] .card-footer .btn-outline-secondary i, #exploreFeed .explore-card.mobile-expanded .unified-card[data-type="post"] .card-footer .btn-outline-secondary i { color: var(--lc-color-text-primary, #f1f5f9) !important; } } /* ============================================ PUBLICATION CARD BODY - Dark Mode Support ============================================ */ /* Publication card body - Dark mode */ @media (prefers-color-scheme: dark) { #publications-tab-pane .unified-card .card-body, #publications-tab-pane .cards-grid .unified-card .card-body, #publications-tab-pane .card.h-100.unified-card .card-body { background-color: transparent !important; /* Inherit from card */ color: var(--lc-color-text-primary, #f1f5f9) !important; /* Light text color */ } #publications-tab-pane .unified-card .card-body .card-title, #publications-tab-pane .cards-grid .unified-card .card-body .card-title, #publications-tab-pane .card.h-100.unified-card .card-body .card-title { color: var(--lc-card-text-title, #e2e8f0) !important; /* Light gray for titles in dark mode */ } #publications-tab-pane .unified-card .card-body .card-subtitle, #publications-tab-pane .cards-grid .unified-card .card-body .card-subtitle, #publications-tab-pane .card.h-100.unified-card .card-body .card-subtitle { color: var(--lc-card-text-body, #cbd5e1) !important; /* Lighter gray for subtitles in dark mode */ } #publications-tab-pane .unified-card .card-body .card-subtitle i, #publications-tab-pane .cards-grid .unified-card .card-body .card-subtitle i, #publications-tab-pane .card.h-100.unified-card .card-body .card-subtitle i { color: var(--lc-color-text-muted, #94a3b8) !important; /* Light gray for icons in dark mode */ } #publications-tab-pane .unified-card .card-body > div, #publications-tab-pane .cards-grid .unified-card .card-body > div, #publications-tab-pane .card.h-100.unified-card .card-body > div { color: var(--lc-card-text-body, #cbd5e1) !important; /* Light gray for divs in dark mode */ } #publications-tab-pane .unified-card .card-body > div > span, #publications-tab-pane .cards-grid .unified-card .card-body > div > span, #publications-tab-pane .card.h-100.unified-card .card-body > div > span { color: var(--lc-card-text-body, #cbd5e1) !important; /* Light gray for spans in dark mode */ } #publications-tab-pane .unified-card .card-body > div > span i, #publications-tab-pane .cards-grid .unified-card .card-body > div > span i, #publications-tab-pane .card.h-100.unified-card .card-body > div > span i { color: var(--lc-color-text-muted, #94a3b8) !important; /* Light gray for span icons in dark mode */ } } /* Explore page publication card body - Dark mode */ @media (prefers-color-scheme: dark) { /* CRITICAL: High specificity to override any other rules */ #exploreFeed .unified-card[data-type="publication"] .card-body, #exploreFeed .explore-card[data-type="publication"] .card-body, #exploreFeed .explore-card-wrapper .unified-card[data-type="publication"] .card-body, #exploreFeed .explore-card-wrapper .explore-card .unified-card[data-type="publication"] .card-body, div#exploreFeed .explore-card-wrapper .unified-card[data-type="publication"] .card-body, div#exploreFeed .explore-card-wrapper .explore-card .unified-card[data-type="publication"] .card-body { background-color: transparent !important; /* Inherit from card */ color: var(--lc-color-text-primary, #f1f5f9) !important; /* Light text color */ } #exploreFeed .unified-card[data-type="publication"] .card-body .card-title, #exploreFeed .explore-card[data-type="publication"] .card-body .card-title { color: var(--lc-card-text-title, #e2e8f0) !important; /* Light gray for titles in dark mode */ } #exploreFeed .unified-card[data-type="publication"] .card-body .card-subtitle, #exploreFeed .explore-card[data-type="publication"] .card-body .card-subtitle { color: var(--lc-card-text-body, #cbd5e1) !important; /* Lighter gray for subtitles in dark mode */ } #exploreFeed .unified-card[data-type="publication"] .card-body .card-text, #exploreFeed .explore-card[data-type="publication"] .card-body .card-text { color: var(--lc-card-text-body, #cbd5e1) !important; /* Light gray for text in dark mode */ } } /* Expanded publication card body - Dark mode */ @media (prefers-color-scheme: dark) { #publications-tab-pane .cards-grid > .mobile-expanded .card-body, #publications-tab-pane .cards-grid > .mobile-expanded .unified-card .card-body { background-color: transparent !important; /* Inherit from card */ color: var(--lc-color-text-primary, #f1f5f9) !important; /* Light text color */ } #publications-tab-pane .cards-grid > .mobile-expanded .card-body .card-title, #publications-tab-pane .cards-grid > .mobile-expanded .unified-card .card-body .card-title { color: var(--lc-card-text-title, #e2e8f0) !important; /* Light gray for titles in dark mode */ } #publications-tab-pane .cards-grid > .mobile-expanded .card-body .card-subtitle, #publications-tab-pane .cards-grid > .mobile-expanded .unified-card .card-body .card-subtitle { color: var(--lc-card-text-body, #cbd5e1) !important; /* Lighter gray for subtitles in dark mode */ } #publications-tab-pane .cards-grid > .mobile-expanded .card-body .card-subtitle i, #publications-tab-pane .cards-grid > .mobile-expanded .unified-card .card-body .card-subtitle i { color: var(--lc-color-text-muted, #94a3b8) !important; /* Light gray for icons in dark mode */ } #publications-tab-pane .cards-grid > .mobile-expanded .card-body > div, #publications-tab-pane .cards-grid > .mobile-expanded .unified-card .card-body > div { color: var(--lc-card-text-body, #cbd5e1) !important; /* Light gray for divs in dark mode */ } #publications-tab-pane .cards-grid > .mobile-expanded .card-body > div > span, #publications-tab-pane .cards-grid > .mobile-expanded .unified-card .card-body > div > span { color: var(--lc-card-text-body, #cbd5e1) !important; /* Light gray for spans in dark mode */ } #publications-tab-pane .cards-grid > .mobile-expanded .card-body > div > span i, #publications-tab-pane .cards-grid > .mobile-expanded .unified-card .card-body > div > span i { color: var(--lc-color-text-muted, #94a3b8) !important; /* Light gray for span icons in dark mode */ } } /* ============================================ REVIEW CARD FOOTER - Dark Mode Support ============================================ */ /* Base transition for review footer elements */ .review-card .review-footer, .new-review-card .review-footer, .review-card .review-footer .btn, .new-review-card .review-footer .btn, .review-card .review-footer .btn-outline-secondary, .new-review-card .review-footer .btn-outline-secondary { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important; } /* Review footer - Dark mode */ @media (prefers-color-scheme: dark) { .review-card .review-footer, .new-review-card .review-footer, #reviews-tab-pane .review-card .review-footer, #reviews-tab-pane .new-review-card .review-footer, #reviews-list .review-card .review-footer, #reviews-list .new-review-card .review-footer, .cards-grid .review-card .review-footer, .cards-grid .new-review-card .review-footer, #reviews-tab-pane .cards-grid .review-card .review-footer, #reviews-tab-pane .cards-grid .new-review-card .review-footer { background-color: var(--lc-card-bg, #1e293b) !important; /* Dark background */ border-top-color: var(--lc-card-footer-border, rgba(255, 255, 255, 0.1)) !important; /* Light border for dark mode */ color: var(--lc-color-text-primary, #f1f5f9) !important; /* Light text color */ } /* Review footer buttons and interactive elements - Dark mode */ .review-card .review-footer .btn, .new-review-card .review-footer .btn, .review-card .review-footer .btn-outline-secondary, .new-review-card .review-footer .btn-outline-secondary, .review-card .review-footer .review-action-btn, .new-review-card .review-footer .review-action-btn, .review-card .review-footer i, .new-review-card .review-footer i, .review-card .review-footer span, .new-review-card .review-footer span { color: var(--lc-color-text-primary, #f1f5f9) !important; /* Light text color */ } .review-card .review-footer .btn-outline-secondary, .new-review-card .review-footer .btn-outline-secondary, .review-card .review-footer .review-action-btn, .new-review-card .review-footer .review-action-btn { border-color: var(--lc-card-btn-border, rgba(255, 255, 255, 0.2)) !important; background-color: transparent !important; } .review-card .review-footer .btn-outline-secondary:hover, .new-review-card .review-footer .btn-outline-secondary:hover, .review-card .review-footer .review-action-btn:hover, .new-review-card .review-footer .review-action-btn:hover { background-color: var(--lc-card-btn-hover-bg, rgba(255, 255, 255, 0.1)) !important; border-color: var(--lc-card-btn-border-hover, rgba(255, 255, 255, 0.3)) !important; } } /* ============================================ STUDY CARD BODY & FOOTER - Dark Mode Support ============================================ */ /* Base transition for study card elements */ #studies-tab-pane .unified-card .card-body, #studies-tab-pane .unified-card .card-subtitle, #studies-tab-pane .unified-card .card-footer, #studies-tab-pane .unified-card .card-footer .progress, #studies-tab-pane .unified-card .card-footer .progress-bar, #studies-tab-pane .unified-card .card-footer .progress-bar span { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important; } /* Study card body - Dark mode */ @media (prefers-color-scheme: dark) { #studies-tab-pane .unified-card .card-body, #studies-tab-pane .cards-grid .unified-card .card-body, #studies-tab-pane .card.h-100.unified-card .card-body { background-color: transparent !important; /* Inherit from card */ color: var(--lc-color-text-primary, #f1f5f9) !important; /* Light text color */ } #studies-tab-pane .unified-card .card-body .card-subtitle, #studies-tab-pane .cards-grid .unified-card .card-body .card-subtitle, #studies-tab-pane .card.h-100.unified-card .card-body .card-subtitle { color: var(--lc-card-text-body, #cbd5e1) !important; /* Lighter gray for subtitles in dark mode */ } #studies-tab-pane .unified-card .card-body .card-subtitle i, #studies-tab-pane .cards-grid .unified-card .card-body .card-subtitle i, #studies-tab-pane .card.h-100.unified-card .card-body .card-subtitle i { color: var(--lc-color-text-muted, #94a3b8) !important; /* Light gray for icons in dark mode */ } #studies-tab-pane .unified-card .card-body > div, #studies-tab-pane .cards-grid .unified-card .card-body > div, #studies-tab-pane .card.h-100.unified-card .card-body > div { color: var(--lc-card-text-body, #cbd5e1) !important; /* Light gray for divs in dark mode */ } #studies-tab-pane .unified-card .card-body > div > span, #studies-tab-pane .cards-grid .unified-card .card-body > div > span, #studies-tab-pane .card.h-100.unified-card .card-body > div > span { color: var(--lc-card-text-body, #cbd5e1) !important; /* Light gray for spans in dark mode */ } #studies-tab-pane .unified-card .card-body > div > span i, #studies-tab-pane .cards-grid .unified-card .card-body > div > span i, #studies-tab-pane .card.h-100.unified-card .card-body > div > span i { color: var(--lc-color-text-muted, #94a3b8) !important; /* Light gray for span icons in dark mode */ } /* Study card footer - Dark mode */ #studies-tab-pane .unified-card .card-footer, #studies-tab-pane .cards-grid .unified-card .card-footer, #studies-tab-pane .card.h-100.unified-card .card-footer { background-color: var(--lc-card-bg, #1e293b) !important; /* Dark background */ border-top-color: var(--lc-card-footer-border, rgba(255, 255, 255, 0.1)) !important; /* Light border for dark mode */ color: var(--lc-color-text-primary, #f1f5f9) !important; /* Light text color */ } /* Study card progress bar - Dark mode */ #studies-tab-pane .unified-card .card-footer .progress, #studies-tab-pane .cards-grid .unified-card .card-footer .progress, #studies-tab-pane .card.h-100.unified-card .card-footer .progress { background-color: var(--lc-card-btn-hover-bg, rgba(255, 255, 255, 0.1)) !important; /* Light background for progress track in dark mode */ } /* Study card progress bar text - Dark mode */ #studies-tab-pane .unified-card .card-footer .progress-bar span, #studies-tab-pane .cards-grid .unified-card .card-footer .progress-bar span, #studies-tab-pane .card.h-100.unified-card .card-footer .progress-bar span { color: #ffffff !important; /* White text for progress percentage in dark mode */ } } /* Expanded study card body - Dark mode */ @media (prefers-color-scheme: dark) { #studies-tab-pane .cards-grid > .mobile-expanded .card-body, #studies-tab-pane .cards-grid > .mobile-expanded .unified-card .card-body { background-color: transparent !important; /* Inherit from card */ color: var(--lc-color-text-primary, #f1f5f9) !important; /* Light text color */ } #studies-tab-pane .cards-grid > .mobile-expanded .card-body .card-subtitle, #studies-tab-pane .cards-grid > .mobile-expanded .unified-card .card-body .card-subtitle { color: var(--lc-card-text-body, #cbd5e1) !important; /* Lighter gray for subtitles in dark mode */ } #studies-tab-pane .cards-grid > .mobile-expanded .card-body .card-subtitle i, #studies-tab-pane .cards-grid > .mobile-expanded .unified-card .card-body .card-subtitle i { color: var(--lc-color-text-muted, #94a3b8) !important; /* Light gray for icons in dark mode */ } } /* ============================================ EXPLORE REVIEW CARD FOOTER - Dark Mode Support ============================================ */ /* Explore review footer - Dark mode */ @media (prefers-color-scheme: dark) { #exploreFeed .new-review-card .review-footer, #exploreFeed .review-card .review-footer { background-color: var(--lc-card-bg, #1e293b) !important; /* Dark background */ border-top-color: var(--lc-card-footer-border, rgba(255, 255, 255, 0.1)) !important; /* Light border for dark mode */ color: var(--lc-color-text-primary, #f1f5f9) !important; /* Light text color */ } /* Explore review footer buttons and interactive elements - Dark mode */ #exploreFeed .new-review-card .review-footer .btn, #exploreFeed .review-card .review-footer .btn, #exploreFeed .new-review-card .review-footer .btn-outline-secondary, #exploreFeed .review-card .review-footer .btn-outline-secondary, #exploreFeed .new-review-card .review-footer i, #exploreFeed .review-card .review-footer i, #exploreFeed .new-review-card .review-footer span, #exploreFeed .review-card .review-footer span { color: var(--lc-color-text-primary, #f1f5f9) !important; /* Light text color */ } #exploreFeed .new-review-card .review-footer .btn-outline-secondary, #exploreFeed .review-card .review-footer .btn-outline-secondary, #exploreFeed .new-review-card .review-footer .review-action-btn, #exploreFeed .review-card .review-footer .review-action-btn { border-color: var(--lc-card-btn-border, rgba(255, 255, 255, 0.2)) !important; background-color: transparent !important; } #exploreFeed .new-review-card .review-footer .btn-outline-secondary:hover, #exploreFeed .review-card .review-footer .btn-outline-secondary:hover, #exploreFeed .new-review-card .review-footer .review-action-btn:hover, #exploreFeed .review-card .review-footer .review-action-btn:hover { background-color: var(--lc-card-btn-hover-bg, rgba(255, 255, 255, 0.1)) !important; border-color: var(--lc-card-btn-border-hover, rgba(255, 255, 255, 0.3)) !important; } } /* ============================================ PROFILE REVIEW CONTENT AREA - Dark Mode Support CRITICAL: Explicit dark bg + light text so body matches system dark ============================================ */ @media (prefers-color-scheme: dark) { #reviews-list .review-card .review-content-area, #reviews-list .new-review-card .review-content-area, #reviews-tab-pane .review-card .review-content-area, #reviews-tab-pane .new-review-card .review-content-area { background-color: var(--lc-card-bg, #1e293b) !important; color: var(--lc-color-text-primary, #f1f5f9) !important; } #reviews-list .review-card .review-text-content, #reviews-list .new-review-card .review-text-content, #reviews-tab-pane .review-card .review-text-content, #reviews-tab-pane .new-review-card .review-text-content { color: var(--lc-color-text-primary, #f1f5f9) !important; } /* Only non-colored elements inherit; .red/.blue etc. use rules below */ #reviews-list .review-text-content *:not(.red):not(.blue):not(.green):not(.yellow), #reviews-tab-pane .review-text-content *:not(.red):not(.blue):not(.green):not(.yellow) { color: inherit !important; } /* Red words: dark-mode value #f87171 (light red on dark bg); light mode uses site.css .red */ #reviews-list .review-text-content .red, #reviews-tab-pane .review-text-content .red { color: #f87171 !important; } #reviews-list .review-text-content .blue, #reviews-tab-pane .review-text-content .blue { color: #60a5fa !important; } #reviews-list .review-text-content .green, #reviews-tab-pane .review-text-content .green { color: #4ade80 !important; } #reviews-list .review-text-content .yellow, #reviews-tab-pane .review-text-content .yellow { color: #facc15 !important; } } /* ============================================ EXPLORE REVIEW CONTENT AREA - Dark Mode Support CRITICAL: Match profile - dark bg + light text when system is dark CRITICAL: Preserve text color - only default text gets inherit; .red/.blue keep their color ============================================ */ @media (prefers-color-scheme: dark) { #exploreFeed .new-review-card .review-content-area, #exploreFeed .review-card .review-content-area { background-color: var(--lc-card-bg, #1e293b) !important; /* Same as profile card body in dark mode */ color: var(--lc-color-text-primary, #f1f5f9) !important; /* Light text - match profile */ } #exploreFeed .review-text-content, #exploreFeed .review-content-area .review-text-content { color: var(--lc-color-text-primary, #f1f5f9) !important; /* Light text - match profile */ } /* Only elements WITHOUT color classes get inherit - preserves .red/.blue/.green/.yellow */ #exploreFeed .review-text-content *:not(.red):not(.blue):not(.green):not(.yellow), #exploreFeed .review-content-area .review-text-content *:not(.red):not(.blue):not(.green):not(.yellow) { color: inherit !important; } /* Preserve Word-formatted colored text in dark mode (light-friendly values for dark bg) */ /* Compare: light mode uses site.css .red (bright red); dark mode uses #f87171 for readability */ #exploreFeed .review-text-content .red, #exploreFeed .review-content-area .review-text-content .red { color: #f87171 !important; } #exploreFeed .review-text-content .blue, #exploreFeed .review-content-area .review-text-content .blue { color: #60a5fa !important; } #exploreFeed .review-text-content .green, #exploreFeed .review-content-area .review-text-content .green { color: #4ade80 !important; } #exploreFeed .review-text-content .yellow, #exploreFeed .review-content-area .review-text-content .yellow { color: #facc15 !important; } } /* ============================================ EXPLORE POST CARD BODY - Dark Mode Support ============================================ */ /* Explore post card body - Dark mode */ @media (prefers-color-scheme: dark) { /* CRITICAL: High specificity to override any other rules */ #exploreFeed .unified-card[data-type="post"] .card-body, #exploreFeed .explore-card[data-type="post"] .card-body, #exploreFeed .explore-card-wrapper .unified-card[data-type="post"] .card-body, #exploreFeed .explore-card-wrapper .explore-card .unified-card[data-type="post"] .card-body, div#exploreFeed .explore-card-wrapper .unified-card[data-type="post"] .card-body, div#exploreFeed .explore-card-wrapper .explore-card .unified-card[data-type="post"] .card-body { background-color: transparent !important; color: var(--lc-color-text-primary, #f1f5f9) !important; } #exploreFeed .unified-card[data-type="post"] .card-body .card-title, #exploreFeed .explore-card[data-type="post"] .card-body .card-title { color: var(--lc-card-text-title, #e2e8f0) !important; } #exploreFeed .unified-card[data-type="post"] .card-body .card-subtitle, #exploreFeed .explore-card[data-type="post"] .card-body .card-subtitle { color: var(--lc-card-text-body, #cbd5e1) !important; } #exploreFeed .unified-card[data-type="post"] .card-body .card-text, #exploreFeed .explore-card[data-type="post"] .card-body .card-text { color: var(--lc-card-text-body, #cbd5e1) !important; } #exploreFeed .unified-card[data-type="post"] .card-body .card-subtitle i, #exploreFeed .explore-card[data-type="post"] .card-body .card-subtitle i { color: var(--lc-color-text-muted, #94a3b8) !important; } } /* ============================================ PROFILE POST CARD BODY - Dark Mode Support ============================================ */ /* Profile post card body - Dark mode */ @media (prefers-color-scheme: dark) { .post-card .card-body, .unified-card.post-card .card-body, #posts-content #posts-list .post-card .card-body, #posts-content #posts-list .unified-card.post-card .card-body, #posts-tab-pane .post-card .card-body, #posts-tab-pane .unified-card.post-card .card-body { background-color: transparent !important; color: var(--lc-color-text-primary, #f1f5f9) !important; } .post-card .card-body .card-title, .unified-card.post-card .card-body .card-title, #posts-content #posts-list .post-card .card-body .card-title, #posts-content #posts-list .unified-card.post-card .card-body .card-title, #posts-tab-pane .post-card .card-body .card-title, #posts-tab-pane .unified-card.post-card .card-body .card-title { color: var(--lc-card-text-title, #e2e8f0) !important; } .post-card .card-body .card-subtitle, .unified-card.post-card .card-body .card-subtitle, #posts-content #posts-list .post-card .card-body .card-subtitle, #posts-content #posts-list .unified-card.post-card .card-body .card-subtitle, #posts-tab-pane .post-card .card-body .card-subtitle, #posts-tab-pane .unified-card.post-card .card-body .card-subtitle { color: var(--lc-card-text-body, #cbd5e1) !important; } .post-card .card-body .card-text, .unified-card.post-card .card-body .card-text, #posts-content #posts-list .post-card .card-body .card-text, #posts-content #posts-list .unified-card.post-card .card-body .card-text, #posts-tab-pane .post-card .card-body .card-text, #posts-tab-pane .unified-card.post-card .card-body .card-text { color: var(--lc-card-text-body, #cbd5e1) !important; } .post-card .card-body .card-subtitle i, .unified-card.post-card .card-body .card-subtitle i, #posts-content #posts-list .post-card .card-body .card-subtitle i, #posts-content #posts-list .unified-card.post-card .card-body .card-subtitle i, #posts-tab-pane .post-card .card-body .card-subtitle i, #posts-tab-pane .unified-card.post-card .card-body .card-subtitle i { color: var(--lc-color-text-muted, #94a3b8) !important; } .post-card .card-body .read-more-link, .unified-card.post-card .card-body .read-more-link, #posts-content #posts-list .post-card .card-body .read-more-link, #posts-content #posts-list .unified-card.post-card .card-body .read-more-link, #posts-tab-pane .post-card .card-body .read-more-link, #posts-tab-pane .unified-card.post-card .card-body .read-more-link { color: var(--lc-card-text-body, #cbd5e1) !important; } } /* ============================================ EXPLORE STUDY CARD FOOTER & PROGRESS - Dark Mode Body typography: consolidated #exploreFeed block below. data-type is on .explore-card, not .unified-card. ============================================ */ @media (prefers-color-scheme: dark) { #exploreFeed .explore-card[data-type="study"] .card-footer, #exploreFeed .study-card .card-footer, #exploreFeed .explore-card-wrapper .explore-card[data-type="study"] .card-footer { background-color: var(--lc-card-bg, #1e293b) !important; border-top-color: var(--lc-card-footer-border, rgba(255, 255, 255, 0.1)) !important; color: var(--lc-color-text-primary, #f1f5f9) !important; } #exploreFeed .explore-card[data-type="study"] .card-footer .progress, #exploreFeed .study-card .card-footer .progress, #exploreFeed .explore-card-wrapper .explore-card[data-type="study"] .card-footer .progress { background-color: var(--lc-card-btn-hover-bg, rgba(255, 255, 255, 0.1)) !important; } #exploreFeed .explore-card[data-type="study"] .card-footer .progress-bar, #exploreFeed .study-card .card-footer .progress-bar, #exploreFeed .explore-card-wrapper .explore-card[data-type="study"] .card-footer .progress-bar { display: flex !important; flex-direction: row !important; align-items: center !important; align-self: stretch !important; height: 100% !important; min-height: 100% !important; } #exploreFeed .explore-card[data-type="study"] .card-footer .progress-bar span, #exploreFeed .study-card .card-footer .progress-bar span, #exploreFeed .explore-card-wrapper .explore-card[data-type="study"] .card-footer .progress-bar span { color: #ffffff !important; } } /* ============================================ EXPLORE PUBLICATION CARD FOOTER - Dark Mode Support ============================================ */ /* Explore publication card footer - Dark mode */ @media (prefers-color-scheme: dark) { #exploreFeed .unified-card[data-type="publication"] .card-footer, #exploreFeed .explore-card[data-type="publication"] .card-footer { background-color: var(--lc-card-bg, #1e293b) !important; /* Dark background */ border-top-color: var(--lc-card-footer-border, rgba(255, 255, 255, 0.1)) !important; /* Light border for dark mode */ color: var(--lc-color-text-primary, #f1f5f9) !important; /* Light text color */ } #exploreFeed .unified-card[data-type="publication"] .card-footer .publication-type-badge, #exploreFeed .explore-card[data-type="publication"] .card-footer .publication-type-badge { color: #ffffff !important; /* White text for badge in dark mode */ } } /* ============================================ EXPLORE REVIEW FALLBACK CONTENT - Dark Mode Support ============================================ */ /* Explore review fallback content - Dark mode */ @media (prefers-color-scheme: dark) { #exploreFeed .new-review-card .review-text-content.fallback-content, #exploreFeed .review-card .review-text-content.fallback-content { background-color: rgba(255, 255, 255, 0.05) !important; color: var(--lc-card-text-body, #cbd5e1) !important; border-color: var(--lc-card-footer-border, rgba(255, 255, 255, 0.1)) !important; } #exploreFeed .new-review-card .review-text-content.fallback-content i, #exploreFeed .review-card .review-text-content.fallback-content i { color: var(--lc-color-text-muted, #94a3b8) !important; } #exploreFeed .new-review-card .review-text-content.fallback-content span, #exploreFeed .review-card .review-text-content.fallback-content span { color: var(--lc-card-text-body, #cbd5e1) !important; } } /* Explore feed — consolidated dark mode (replaces duplicate override blocks) */ @media (prefers-color-scheme: dark) { #exploreFeed.cards-grid .unified-card, #exploreFeed .unified-card, #exploreFeed .explore-card .card.unified-card { background-color: var(--lc-card-bg, #1e293b) !important; border-color: var(--lc-card-footer-border, rgba(255, 255, 255, 0.1)) !important; box-shadow: var(--lc-card-shadow-dark, 0 2px 8px rgba(0, 0, 0, 0.3)) !important; } #exploreFeed.cards-grid .card-body, #exploreFeed .unified-card .card-body, #exploreFeed .explore-card .card-body, #exploreFeed .explore-card-wrapper .unified-card .card-body { color: var(--lc-color-text-primary, #f1f5f9) !important; background-color: transparent !important; } #exploreFeed .card-body .card-title, #exploreFeed .cards-grid__post-card__title, #exploreFeed .card-body h6.card-title { color: var(--lc-card-text-title, #e2e8f0) !important; } #exploreFeed .card-body .card-subtitle, #exploreFeed .card-body p.card-subtitle { color: var(--lc-card-text-body, #cbd5e1) !important; } #exploreFeed .card-body .card-text { color: var(--lc-card-text-body, #cbd5e1) !important; } #exploreFeed .card-body .card-subtitle i { color: var(--lc-color-text-muted, #94a3b8) !important; } } /* Unified card typography — all .cards-grid contexts (profile, explore, search) */ @media (prefers-color-scheme: dark) { .cards-grid .card-body .card-title, .cards-grid .cards-grid__post-card__title, .cards-grid .card-body h6.card-title { color: var(--lc-card-text-title, #e2e8f0) !important; } .cards-grid .card-body .card-subtitle, .cards-grid .card-body p.card-subtitle { color: var(--lc-card-text-body, #cbd5e1) !important; } .cards-grid .card-body .card-text { color: var(--lc-card-text-body, #cbd5e1) !important; } .cards-grid .card-body .card-subtitle i { color: var(--lc-color-text-muted, #94a3b8) !important; } }