/** * Dark Mode Stylesheet - Universal GeneratePress Child Theme * Bloomberg Terminal aesthetic for financial/authority sites. * * PORTABILITY: This stylesheet is designed to work across any * GeneratePress child theme with minimal modifications. * * Activation: data-theme="dark" on element (set by JS) * Default: Light mode (no attribute or data-theme="light") * * ARCHITECTURE: * 1. Token Overrides - CSS custom properties for theming * 2. GeneratePress Core - Header, footer, navigation * 3. Content Elements - Typography, lists, blockquotes * 4. Components - Cards, tables, forms, alerts * 5. Toggle Button - Universal dark mode switch */ /* =================================================================== 1. DARK MODE TOKEN OVERRIDES These override :root variables when [data-theme="dark"] is active. Tokens should match your main style.css :root variables. =================================================================== */ [data-theme="dark"] { /* === BACKGROUND SCALE === */ --theme-white: #0a0a0a; --theme-bg-subtle: #1a1a1a; --theme-bg-section: #151515; --theme-gray-light: #252525; /* === TEXT SCALE === */ --pub-black: #f5f5f5; --pub-gray-900: #e5e5e5; --pub-gray-700: #cccccc; --pub-gray-600: #aaaaaa; --pub-gray-500: #999999; --pub-gray-300: #666666; --pub-gray-100: #333333; --theme-text-gray: #aaaaaa; --theme-text-muted: #888888; --theme-text-caption: #777777; /* === BRAND COLORS (adjusted for dark backgrounds) === */ --theme-blue: #5b7aff; --theme-blue-light: #7b94ff; --theme-blue-dark: #3858e9; --theme-green: #00e506; --theme-green-bright: #22ff22; --theme-green-invest: #22aa22; --theme-green-dark: #1a8d1a; --theme-red: #ff5555; --theme-red-dark: #dd3333; /* === BORDERS & DIVIDERS === */ --theme-border: #3a3a3a; --theme-border-light: #2d2d2d; --theme-border-subtle: #252525; --theme-divider: #3a3a3a; --theme-divider-subtle: #222222; /* === SHADOWS (softer for dark mode) === */ --theme-shadow-soft: rgba(0, 0, 0, 0.3); --theme-shadow-medium: #1a1a1a; --theme-shadow-light: rgba(0, 0, 0, 0.2); --hover-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4); --hover-shadow-subtle: 0 4px 16px rgba(0, 0, 0, 0.3); /* === PUBLICATION TOKENS === */ --pub-accent: var(--theme-blue); --pub-accent-hover: #7b94ff; --pub-link-blue: #6b9fd3; /* === ACCENT COLORS (used for list badges, highlights) === */ --accent: #22cc22; --accent-2: #5b7aff; --accent-3: #7b94ff; /* === YELLOW ACCENTS (inverted for dark) === */ --theme-yellow-light: #7b700a; --theme-yellow-warning: #4a4520; /* === STAR RATINGS === */ --star-color: #666666; --star-background: var(--theme-blue); /* === INLINE STYLE FIXES (2026-01-20) === */ --bg-subtle: #1a1a1a; --color-trust-blue: #5b7aff; } /* =================================================================== 2. GENERATEPRESS CORE ELEMENTS Universal selectors for GP theme structure =================================================================== */ /* --- BODY & HTML --- */ [data-theme="dark"], [data-theme="dark"] body { background-color: var(--theme-white); color: var(--pub-gray-900); } /* --- HEADER (GeneratePress structure) --- */ [data-theme="dark"] .site-header, [data-theme="dark"] #masthead, [data-theme="dark"] header.site-header { background-color: var(--theme-bg-section); border-bottom-color: var(--theme-border); } /* GP Header inner containers */ [data-theme="dark"] .inside-header, [data-theme="dark"] .header-wrap { background-color: var(--theme-bg-section); } /* Site title/logo */ [data-theme="dark"] .site-title a, [data-theme="dark"] .site-branding a { color: var(--pub-gray-900); } /* --- NAVIGATION (GeneratePress menu structure) --- */ [data-theme="dark"] .main-navigation, [data-theme="dark"] #site-navigation, [data-theme="dark"] .primary-navigation { background-color: var(--theme-bg-section); } [data-theme="dark"] .main-navigation a, [data-theme="dark"] .primary-menu>li>a, [data-theme="dark"] .menu-item>a, [data-theme="dark"] .nav-menu>li>a { color: var(--pub-gray-700); } [data-theme="dark"] .main-navigation a:hover, [data-theme="dark"] .primary-menu>li>a:hover, [data-theme="dark"] .menu-item>a:hover { color: var(--theme-blue); } /* Dropdown/Sub-menus */ [data-theme="dark"] .sub-menu, [data-theme="dark"] .children, [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .main-navigation ul ul { background-color: var(--theme-bg-section); border-color: var(--theme-border); } [data-theme="dark"] .sub-menu a, [data-theme="dark"] .children a, [data-theme="dark"] .main-navigation ul ul a { color: var(--pub-gray-700); border-color: var(--theme-border); } [data-theme="dark"] .sub-menu a:hover, [data-theme="dark"] .main-navigation ul ul a:hover { background-color: var(--theme-gray-light); color: var(--theme-blue); } /* Mobile menu */ [data-theme="dark"] .menu-toggle, [data-theme="dark"] .mobile-menu-control-wrapper button { color: var(--pub-gray-700); } /* --- FOOTER --- */ [data-theme="dark"] .site-footer, [data-theme="dark"] #colophon, [data-theme="dark"] footer.site-footer { background-color: var(--theme-bg-section); border-top-color: var(--theme-border); color: var(--pub-gray-700); } [data-theme="dark"] .site-footer a, [data-theme="dark"] .footer-widgets a { color: var(--pub-gray-500); } [data-theme="dark"] .site-footer a:hover { color: var(--theme-blue); } /* =================================================================== 3. CONTENT ELEMENTS Typography, lists, blockquotes, etc. =================================================================== */ /* --- ARTICLE CONTAINERS --- */ [data-theme="dark"] .inside-article, [data-theme="dark"] article.post, [data-theme="dark"] article.page { background-color: var(--theme-bg-subtle); } [data-theme="dark"] .entry-content { color: var(--pub-gray-700); } /* --- HEADINGS --- */ [data-theme="dark"] .entry-title, [data-theme="dark"] .entry-content h1, [data-theme="dark"] .entry-content h2, [data-theme="dark"] .entry-content h3, [data-theme="dark"] .entry-content h4, [data-theme="dark"] .entry-content h5, [data-theme="dark"] .entry-content h6 { color: var(--pub-gray-900); } /* --- LINKS --- */ [data-theme="dark"] .entry-content a:not(:has(img)):not(.theme-cta):not(.theme-related-posts__cta) { color: var(--theme-blue); box-shadow: inset 0 -3px 0 var(--theme-blue); } /* --- ORDERED LISTS (numbered badges) --- */ [data-theme="dark"] .entry-content ol li::before { background-color: var(--accent-2); color: var(--theme-white); } /* --- UNORDERED LISTS (green left border) --- */ [data-theme="dark"] .entry-content ul li { border-left-color: var(--accent); background: rgba(34, 204, 34, 0.15); } [data-theme="dark"] .entry-content ul li ul li::before { color: var(--theme-red); } /* --- BLOCKQUOTES --- */ [data-theme="dark"] blockquote, [data-theme="dark"] .wp-block-quote { border-left-color: var(--theme-blue); background-color: var(--theme-bg-section); color: var(--pub-gray-700); } /* --- POST META (date, author, categories) --- */ [data-theme="dark"] .entry-meta, [data-theme="dark"] .post-meta, [data-theme="dark"] .byline, [data-theme="dark"] .posted-on { color: var(--pub-gray-500); } [data-theme="dark"] .entry-meta a, [data-theme="dark"] .cat-links a, [data-theme="dark"] .tags-links a, [data-theme="dark"] .author a, [data-theme="dark"] .byline a { color: var(--pub-gray-400, #bbbbbb); } [data-theme="dark"] .entry-meta a:hover, [data-theme="dark"] .cat-links a:hover, [data-theme="dark"] .tags-links a:hover { color: var(--theme-blue); } /* =================================================================== BREADCRUMBS (Rank Math & Theme) =================================================================== */ [data-theme="dark"] .rank-math-breadcrumb, [data-theme="dark"] .theme-breadcrumbs, [data-theme="dark"] .theme-breadcrumb-list, [data-theme="dark"] .breadcrumbs, [data-theme="dark"] nav[aria-label="breadcrumbs"] { color: var(--pub-gray-500); } [data-theme="dark"] .rank-math-breadcrumb a, [data-theme="dark"] .theme-breadcrumbs a, [data-theme="dark"] .theme-breadcrumb-list a, [data-theme="dark"] .breadcrumbs a { color: var(--pub-gray-400, #bbbbbb); } [data-theme="dark"] .rank-math-breadcrumb a:hover, [data-theme="dark"] .theme-breadcrumbs a:hover { color: var(--theme-blue); } [data-theme="dark"] .rank-math-breadcrumb .separator, [data-theme="dark"] .theme-breadcrumb-sep { color: var(--pub-gray-500); } /* =================================================================== GENERATEBLOCKS ELEMENTS =================================================================== */ /* GB Headlines */ [data-theme="dark"] .gb-headline, [data-theme="dark"] .gb-headline-text { color: var(--pub-gray-900); } /* GB Containers */ [data-theme="dark"] .gb-container { color: var(--pub-gray-700); } /* GB Links inside containers (author bylines, etc.) */ [data-theme="dark"] .gb-container a:not(.theme-cta):not(.gb-button) { color: var(--pub-gray-400, #bbbbbb); } [data-theme="dark"] .gb-container a:not(.theme-cta):not(.gb-button):hover { color: var(--theme-blue); } /* =================================================================== ENTRY HEADER (Author byline area) =================================================================== */ [data-theme="dark"] .entry-header { color: var(--pub-gray-700); } [data-theme="dark"] .entry-header a { color: var(--pub-gray-400, #bbbbbb); } [data-theme="dark"] .entry-header a:hover { color: var(--theme-blue); } /* Reading time, date, etc. */ [data-theme="dark"] .reading-time, [data-theme="dark"] .theme-reading-time { color: var(--pub-gray-500); } /* =================================================================== HOMEPAGE ARTICLE CARDS =================================================================== */ /* Card container */ [data-theme="dark"] .home-article-card, [data-theme="dark"] .wp-block-post { background-color: var(--theme-bg-subtle); border-color: var(--theme-border); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } [data-theme="dark"] .home-article-card:hover, [data-theme="dark"] .wp-block-post:hover { transform: translateY(-2px); box-shadow: var(--hover-shadow-card); border-color: var(--theme-border-light); } /* Card titles */ [data-theme="dark"] .home-article-card__title, [data-theme="dark"] .home-article-card__title a, [data-theme="dark"] .wp-block-post-title, [data-theme="dark"] .wp-block-post-title a { color: var(--pub-gray-900); } [data-theme="dark"] .home-article-card__title a:hover, [data-theme="dark"] .wp-block-post-title a:hover { color: var(--theme-blue); } /* Card excerpts */ [data-theme="dark"] .home-article-card__excerpt, [data-theme="dark"] .wp-block-post-excerpt, [data-theme="dark"] .wp-block-post-excerpt__excerpt { color: var(--pub-gray-500); } /* "Leer más" link */ [data-theme="dark"] .wp-block-post-excerpt__more-link, [data-theme="dark"] .home-article-card__link { color: var(--theme-blue); } /* Card category labels */ [data-theme="dark"] .home-article-card__category, [data-theme="dark"] .home-article-card__category a { color: var(--pub-gray-400, #bbbbbb); } /* =================================================================== NAVIGATION LINKS (Enhanced Visibility) =================================================================== */ /* Main navigation links - brighter for dark mode */ [data-theme="dark"] .main-navigation .menu-item>a, [data-theme="dark"] .main-navigation .primary-menu>li>a, [data-theme="dark"] .main-navigation a { color: var(--pub-gray-200, #dddddd); } [data-theme="dark"] .main-navigation .menu-item>a:hover, [data-theme="dark"] .main-navigation a:hover { color: var(--theme-blue-light); } /* Current/active menu item */ [data-theme="dark"] .main-navigation .current-menu-item>a, [data-theme="dark"] .main-navigation .current_page_item>a { color: var(--theme-blue); } /* =================================================================== SECTION HEADERS & ACTION LINKS =================================================================== */ /* "VER TODAS" and similar action links */ [data-theme="dark"] .home-trending-section__view-all, [data-theme="dark"] .home-trending-section__view-all a, [data-theme="dark"] .home-article-section__header a, [data-theme="dark"] a[href*="/category/"] { color: var(--pub-gray-400, #bbbbbb); } [data-theme="dark"] .home-trending-section__view-all a:hover, [data-theme="dark"] .home-article-section__header a:hover { color: var(--theme-blue); } /* Section titles */ [data-theme="dark"] .home-article-section__title, [data-theme="dark"] .home-trending-section__title { color: var(--pub-gray-900); } /* =================================================================== 4. COMPONENTS Cards, tables, forms, alerts, and custom elements =================================================================== */ /* --- CARDS & BOXES --- */ [data-theme="dark"] .tarjeta_features_box, [data-theme="dark"] .theme-etf-card, [data-theme="dark"] .theme-related-posts__card, [data-theme="dark"] .wp-block-group, [data-theme="dark"] .gb-container { background-color: var(--theme-bg-subtle); border-color: var(--theme-border); } [data-theme="dark"] .tarjeta_features_box { box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); } /* --- ALERTS --- */ [data-theme="dark"] .alert { background: linear-gradient(to right, var(--theme-bg-section), var(--theme-bg-subtle)); border-left-color: var(--theme-blue); } [data-theme="dark"] .alert-success { border-left-color: var(--theme-green); } [data-theme="dark"] .alert-warning { border-left-color: var(--pub-warning, #d97706); } [data-theme="dark"] .alert-info { border-left-color: var(--pub-link-blue); } /* --- TABLES (Bloomberg Terminal Style) --- */ [data-theme="dark"] table { border-color: var(--theme-border); } [data-theme="dark"] table th { background-color: var(--theme-bg-section); color: var(--pub-gray-900); border-color: var(--theme-border); } [data-theme="dark"] table td { border-color: var(--theme-border); color: var(--pub-gray-700); } [data-theme="dark"] table tr:nth-child(even) { background-color: var(--theme-bg-subtle); } [data-theme="dark"] table tr:hover { background-color: var(--theme-gray-light); } /* --- FORMS & INPUTS --- */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select, [data-theme="dark"] .searchable input, [data-theme="dark"] .search-field { background-color: var(--theme-bg-subtle); border-color: var(--theme-border); color: var(--pub-gray-900); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--pub-gray-500); } [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { border-color: var(--theme-blue); outline-color: var(--theme-blue); } [data-theme="dark"] .searchable ul { background-color: var(--theme-bg-subtle); border-color: var(--theme-blue); } [data-theme="dark"] .searchable ul li { border-bottom-color: var(--theme-border); color: var(--pub-gray-700); } [data-theme="dark"] .searchable ul li.selected { background-color: var(--theme-blue); color: #ffffff; } /* --- WIDGETS & SIDEBAR --- */ [data-theme="dark"] .widget, [data-theme="dark"] .widget-area .widget, [data-theme="dark"] .sidebar .widget { background-color: var(--theme-bg-subtle); border-color: var(--theme-border); } [data-theme="dark"] .widget-title, [data-theme="dark"] .widget .widget-title { color: var(--pub-gray-900); } /* --- CODE BLOCKS --- */ [data-theme="dark"] pre, [data-theme="dark"] code, [data-theme="dark"] .wp-block-code { background-color: var(--theme-bg-section); border-color: var(--theme-border); color: var(--pub-gray-700); } /* --- BREADCRUMBS --- */ [data-theme="dark"] .theme-breadcrumbs, [data-theme="dark"] .breadcrumbs, [data-theme="dark"] .yoast-breadcrumbs { color: var(--pub-gray-500); } [data-theme="dark"] .theme-breadcrumbs a, [data-theme="dark"] .breadcrumbs a { color: var(--pub-gray-500); } /* --- PAGINATION (Standardized 2026-01-15) --- */ [data-theme="dark"] .pagination, [data-theme="dark"] .paging-navigation, [data-theme="dark"] #nav-below, [data-theme="dark"] .nav-links, [data-theme="dark"] .gb-button-wrapper[class*="pagination"] { color: var(--pub-gray-700); background-color: transparent !important; border: none; } [data-theme="dark"] .pagination a, [data-theme="dark"] .page-numbers, [data-theme="dark"] .nav-links a, [data-theme="dark"] .nav-links .page-numbers, [data-theme="dark"] .gb-button-wrapper .gb-button { background-color: transparent !important; /* Unified: Transparent default */ color: var(--pub-gray-500); border: none !important; border-radius: var(--pagination-radius); } [data-theme="dark"] .pagination a:hover, [data-theme="dark"] .page-numbers:hover, [data-theme="dark"] .nav-links a:hover, [data-theme="dark"] .gb-button-wrapper .gb-button:hover { background-color: rgba(255, 255, 255, 0.05) !important; color: var(--theme-blue-light); } [data-theme="dark"] .pagination .current, [data-theme="dark"] .page-numbers.current, [data-theme="dark"] .nav-links .current, [data-theme="dark"] .gb-button-wrapper .gb-button[class*="current"] { background-color: var(--theme-blue) !important; color: #ffffff; } /* --- COMMENTS --- */ [data-theme="dark"] .comments-area, [data-theme="dark"] .comment-list, [data-theme="dark"] .comment-body { background-color: var(--theme-bg-subtle); border-color: var(--theme-border); } [data-theme="dark"] .comment-author, [data-theme="dark"] .comment-metadata { color: var(--pub-gray-500); } /* --- SKELETON LOADING (Dark variant) --- */ [data-theme="dark"] .theme-skeleton { background: linear-gradient(90deg, var(--theme-gray-light) 25%, var(--theme-border) 50%, var(--theme-gray-light) 75%); } /* --- RELATED POSTS --- */ [data-theme="dark"] .theme-related-posts { background-color: var(--theme-bg-section); } [data-theme="dark"] .theme-related-posts__card { background-color: var(--theme-bg-subtle); border-color: var(--theme-border); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } [data-theme="dark"] .theme-related-posts__card:hover { transform: translateY(-2px); box-shadow: var(--hover-shadow-card); border-color: var(--theme-border-light); } [data-theme="dark"] .theme-related-posts__title { color: var(--pub-gray-900); } [data-theme="dark"] .theme-related-posts__card-title a { color: var(--pub-gray-900); box-shadow: none; text-decoration: none; } /* --- E-E-A-T AUTHOR BOX: EXTRACTED TO css/04-pages/_author.css (2026-01-26) --- */ [data-theme="dark"] .theme-author-box__header { border-bottom-color: var(--theme-border); } [data-theme="dark"] .theme-author-box__label { color: var(--pub-gray-500); } [data-theme="dark"] .theme-author-box__name { color: var(--pub-gray-900); } [data-theme="dark"] .theme-author-box__name a { color: inherit; box-shadow: none; } [data-theme="dark"] .theme-author-box__title { color: var(--theme-blue-light); } [data-theme="dark"] .theme-author-box__bio { color: var(--pub-gray-600); } [data-theme="dark"] .theme-author-box__featured { color: var(--pub-gray-500); } [data-theme="dark"] .theme-author-box__featured-label { color: var(--pub-gray-700); } [data-theme="dark"] .theme-author-box__social-link { background-color: var(--theme-bg-section); color: var(--pub-gray-500); box-shadow: none; } [data-theme="dark"] .theme-author-box__social-link:hover { background-color: var(--theme-blue); color: var(--theme-white); } [data-theme="dark"] .theme-author-box__meta { border-top-color: var(--theme-border); } /* --- DISCLOSURE BANNER: Dark Mode --- */ [data-theme="dark"] .theme-disclosure-banner { background: linear-gradient(135deg, var(--theme-bg-section) 0%, var(--theme-bg-subtle) 100%); border-left-color: var(--theme-blue-light); color: var(--pub-gray-600); } [data-theme="dark"] .theme-disclosure-banner strong { color: var(--pub-gray-700); } [data-theme="dark"] .theme-disclosure-banner a { color: var(--theme-blue-light); } /* =================================================================== FOOTER WIDGET AREAS (Consistent backgrounds) =================================================================== */ [data-theme="dark"] .footer-widgets, [data-theme="dark"] .footer-widgets-container, [data-theme="dark"] .site-footer .inside-footer-widgets, [data-theme="dark"] .footer-bar, [data-theme="dark"] .inside-site-info, [data-theme="dark"] .site-info { background-color: var(--theme-bg-section); color: var(--pub-gray-700); } /* Force footer blocks/columns to be transparent */ /* Overrides inline styles or GB block colors for consistency */ [data-theme="dark"] .site-footer .wp-block-group, [data-theme="dark"] .site-footer .wp-block-column, [data-theme="dark"] .site-footer .gb-container, [data-theme="dark"] .footer-widget-1, [data-theme="dark"] .footer-widget-2, [data-theme="dark"] .footer-widget-3, [data-theme="dark"] .footer-widget-4, [data-theme="dark"] .footer-widget-5 { background-color: transparent !important; border: none; } /* Footer links */ [data-theme="dark"] .footer-widgets a, [data-theme="dark"] .site-info a, [data-theme="dark"] .footer-bar a { color: var(--pub-gray-500); } [data-theme="dark"] .footer-widgets a:hover, [data-theme="dark"] .site-info a:hover { color: var(--theme-blue); } /* =================================================================== 5. DARK MODE TOGGLE BUTTON Universal component for theme switching - discreet header integration =================================================================== */ .theme-dark-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: 12px; padding: 0; background: transparent; border: none; border-radius: 50%; cursor: pointer; transition: background-color 0.2s ease, opacity 0.2s ease; color: var(--pub-gray-700); opacity: 0.7; vertical-align: middle; } .theme-dark-toggle:hover { background-color: rgba(0, 0, 0, 0.08); opacity: 1; } .theme-dark-toggle:focus-visible { outline: 2px solid var(--theme-blue); outline-offset: 2px; } [data-theme="dark"] .theme-dark-toggle { color: var(--pub-gray-700); } [data-theme="dark"] .theme-dark-toggle:hover { background-color: rgba(255, 255, 255, 0.1); } .theme-dark-toggle__icon { width: 20px; height: 20px; fill: currentcolor; } /* Sun icon visible in dark mode, moon in light mode */ .theme-dark-toggle__icon--sun { display: none; } .theme-dark-toggle__icon--moon { display: block; } [data-theme="dark"] .theme-dark-toggle__icon--sun { display: block; } [data-theme="dark"] .theme-dark-toggle__icon--moon { display: none; } /* === NAVIGATION INTEGRATION === */ /* Position within GeneratePress navigation */ .inside-navigation .theme-dark-toggle { float: right; margin-top: 0; margin-right: 0; } /* Mobile menu positioning */ @media (width <=768px) { .inside-navigation .theme-dark-toggle { float: none; margin: 10px auto; display: flex; } } /* =================================================================== 6. IMAGES & MEDIA Ensure images don't look too bright on dark backgrounds =================================================================== */ [data-theme="dark"] .entry-content img { opacity: 0.92; transition: opacity 0.2s ease; } [data-theme="dark"] .entry-content img:hover { opacity: 1; } /* =================================================================== 7. SMOOTH TRANSITION ON THEME CHANGE Prevents jarring flash when toggling themes =================================================================== */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important; } /* =================================================================== NOTE: System preference detection REMOVED intentionally. Light mode is the default. Dark mode only activates when user explicitly toggles it via the button. This ensures consistent experience across all users and prevents unexpected dark mode. =================================================================== */ /* [Deduplicated] Summary Box Dark Mode moved to line ~1173 (Authority Section) */ /* Promo CTA Dark Mode Overrides */ [data-theme="dark"] .wp-block-media-text .gb-button { background-color: var(--theme-blue-dark) !important; color: var(--theme-white) !important; } [data-theme="dark"] .wp-block-media-text .gb-button:hover { background-color: var(--theme-blue) !important; color: var(--theme-white) !important; } /* Promo Block Text Dark Mode Overrides (2026-01-23) Fixes inline styles in GeneratePress Elements */ [data-theme="dark"] .wp-block-media-text__content h3 { color: var(--pub-gray-900) !important; } [data-theme="dark"] .wp-block-media-text__content .gb-headline-text { color: var(--pub-gray-700) !important; } [data-theme="dark"] .wp-block-media-text__content a:not(.gb-button) { color: var(--theme-blue-light) !important; } /* Searchable Box - Dark Mode Overrides */ [data-theme="dark"] .theme-searchable-box { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .theme-searchable-box .searchable input { background-color: var(--dm-bg-card, #1a1a1a); color: var(--dm-text-primary, #e0e0e0); border-color: var(--dm-border, #333333); } [data-theme="dark"] .theme-searchable-box .searchable input:focus { border-color: var(--theme-blue-light); box-shadow: 0 0 0 4px rgba(74, 108, 247, 0.3); } [data-theme="dark"] .theme-searchable-box .searchable ul { background: var(--dm-bg-card, #1a1a1a); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .theme-searchable-box .searchable ul a { color: var(--dm-text-primary, #e0e0e0); } [data-theme="dark"] .theme-searchable-box .searchable ul li { border-bottom-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .theme-searchable-box .searchable ul li:nth-child(even) { background-color: rgba(255, 255, 255, 0.02); } [data-theme="dark"] .theme-searchable-box .searchable ul li:hover, [data-theme="dark"] .theme-searchable-box .searchable ul li.focused { background: var(--theme-yellow-light); /* Blue tint for branding consistency */ border-left-color: var(--theme-blue-light); box-shadow: inset 3px 0 0 var(--theme-blue-light); } [data-theme="dark"] .theme-searchable-box .searchable ul li:hover a, [data-theme="dark"] .theme-searchable-box .searchable ul li.focused a { color: #ffffff; } /* Dark Mode Ticker */ [data-theme="dark"] .theme-searchable-box .theme-ticker { background-color: rgba(255, 255, 255, 0.1); color: var(--theme-blue-light); } /* Dark Mode Scrollbar */ [data-theme="dark"] .theme-searchable-box .searchable ul::-webkit-scrollbar-thumb { background-color: var(--pub-gray-700); } [data-theme="dark"] .theme-searchable-box .searchable ul { scrollbar-color: var(--pub-gray-700) transparent; } /* =================================================================== REVIEW BOX / CRYPTO RATINGS (Dark Mode) Used on crypto rating pages (e.g., /analisis-akropolis/) =================================================================== */ /* Container - override inline background-color */ [data-theme="dark"] .review-container { background-color: var(--theme-bg-subtle) !important; border-color: var(--theme-border); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } /* Heading - "ANÁLISIS DE AKROPOLIS" */ [data-theme="dark"] .review-box .page-heading { color: var(--pub-link-blue); } /* Summary paragraphs - Brighter text for readability */ [data-theme="dark"] .review-box .verdict-summary, [data-theme="dark"] .review-box .review-summary { color: var(--pub-gray-600); } /* Criteria list section */ [data-theme="dark"] .review-box .criteria-list { border-top-color: var(--theme-border); } [data-theme="dark"] .review-box .criteria-list li { border-bottom-color: var(--theme-border); } /* List item background - alternating zebra pattern */ [data-theme="dark"] ul.review-info li { border-bottom-color: var(--theme-border); background-color: transparent; } [data-theme="dark"] ul.review-info li:nth-child(even) { background-color: rgba(255, 255, 255, 0.03); } /* Label text (Volumen, Capitalización, etc.) */ [data-theme="dark"] .review-info .halfwidth strong, [data-theme="dark"] ul.review-info li .halfwidth strong { color: var(--pub-gray-900); } /* Star ratings - ensure visibility (lighter empty stars) */ [data-theme="dark"] .review-box .rating-stars, [data-theme="dark"] ul.review-info .rating-stars { color: #777777; } /* Overall score box - Remove border in dark mode for cleaner look */ [data-theme="dark"] .review-box .overall { background-color: var(--theme-bg-subtle); border: none; } /* Grade letter (F, C-, A+, etc.) retains inline color */ /* Affiliate disclaimer box */ [data-theme="dark"] .review-box .affiliate { background-color: var(--theme-yellow-warning); color: var(--pub-gray-700); } /* Rating bar gradient - already works on dark, just ensure dot visibility */ [data-theme="dark"] .review-box .dot::after { color: var(--theme-blue-light); } /* ============================================================================= ABOUT PAGE: DARK MODE STYLES (2026-01-16) Addressing gap analysis issues: dark mode, badge layout, CTA visibility. ============================================================================= */ /* --- 1. HERO SECTION DARK MODE --- */ [data-theme="dark"] .theme-about-hero { background: var(--theme-bg-subtle); border-bottom-color: var(--theme-border); } [data-theme="dark"] .theme-about-hero__headline { color: var(--pub-gray-900); } [data-theme="dark"] .theme-about-hero__subhead { color: var(--pub-gray-700); } /* --- 2. STATS STRIP: ALREADY DARK, ENSURE CONTRAST --- */ /* Stats strip is always dark (#1a202c), so no change needed in dark mode */ /* --- 3. FEATURED-IN LOGOS DARK MODE --- */ [data-theme="dark"] .theme-featured-in, [data-theme="dark"] .theme-featured-in--inline { background: var(--theme-bg-subtle); border-color: var(--theme-border); } [data-theme="dark"] .theme-featured-in__label { color: var(--pub-gray-500); } [data-theme="dark"] .theme-featured-in__logo { color: var(--pub-gray-500); } [data-theme="dark"] .theme-featured-in__logo:hover { color: var(--pub-gray-900); } /* --- 4. SECTION DIVIDERS DARK MODE --- */ [data-theme="dark"] .theme-about-divider { border-top-color: var(--theme-border); } /* --- 5. FOUNDER SECTION DARK MODE --- */ [data-theme="dark"] .theme-about-founder__content { background: linear-gradient(135deg, var(--theme-bg-subtle) 0%, var(--theme-bg-section) 100%); border-left-color: var(--theme-blue); } [data-theme="dark"] .theme-about-founder__label { color: var(--theme-blue-light); } [data-theme="dark"] .theme-about-founder__name { color: var(--pub-gray-900); } [data-theme="dark"] .theme-about-founder__verified { color: var(--theme-blue-light); } [data-theme="dark"] .theme-about-founder__bio { color: var(--pub-gray-700); } [data-theme="dark"] .theme-about-founder__credentials { border-top-color: var(--theme-border); } [data-theme="dark"] .theme-about-founder__steps li { color: var(--pub-gray-700); } [data-theme="dark"] .theme-about-founder__steps li strong { color: var(--pub-gray-900); } [data-theme="dark"] .theme-about-founder__badge { background: var(--theme-blue); color: #ffffff; } [data-theme="dark"] .theme-about-founder__photo { border-color: var(--theme-blue-light); } /* --- 6. MISSION SECTION DARK MODE --- */ [data-theme="dark"] .theme-about-mission__title { color: var(--pub-gray-900); } [data-theme="dark"] .theme-about-mission__text { color: var(--pub-gray-700); } /* --- 7. VALUES CARDS DARK MODE --- */ [data-theme="dark"] .theme-about-values__card { background: var(--theme-bg-subtle); border-left-color: var(--theme-blue); } [data-theme="dark"] .theme-about-values__title { color: var(--pub-gray-900); } [data-theme="dark"] .theme-about-values__desc { color: var(--pub-gray-700); } /* --- 8. CTA SECTION DARK MODE --- The .theme-about-cta--dark modifier applies intentional dark styling. In system dark mode, ensure text remains visible regardless of modifier. */ [data-theme="dark"] .theme-about-cta { background: var(--theme-bg-subtle); border-top-color: var(--theme-border); } [data-theme="dark"] .theme-about-cta__headline { color: var(--pub-gray-900); } /* When using --dark modifier in dark mode, ensure proper contrast */ [data-theme="dark"] .theme-about-cta--dark { background: var(--theme-bg-section); } /* --- 9. SUMMARY BOX DARK MODE (Editorial Standards) --- */ [data-theme="dark"] .theme-summary-box, [data-theme="dark"] .summary-box { background: var(--theme-bg-subtle); border-color: var(--theme-border); border-left-color: var(--pub-success); } [data-theme="dark"] .theme-summary-box__header, [data-theme="dark"] .summary-box__header { color: #34D399; } [data-theme="dark"] .theme-summary-box .eng-title, [data-theme="dark"] .summary-box .eng-title { color: #FFFFFF; } [data-theme="dark"] .theme-summary-box .spa-title, [data-theme="dark"] .summary-box .spa-title { background: rgba(5, 150, 105, 0.15); color: #D1D5DB; } [data-theme="dark"] .theme-summary-box>p:last-child, [data-theme="dark"] .summary-box>p:last-child { color: #D1D5DB; } /* Cleanup any legacy h3/h4 overrides if they exist */ [data-theme="dark"] .theme-summary-box h3, [data-theme="dark"] .theme-summary-box h4 { color: inherit; } /* ============================================================================= 10. EDITORIAL PAGE DARK MODE (2026-01-24) Standardized styles for corrections, legal docs, and editorial grids. ============================================================================= */ /* .theme-editorial-grid: Grid layout inherits correctly, no dark mode overrides needed */ [data-theme="dark"] .theme-editorial-card { background: var(--theme-bg-subtle); border-color: var(--theme-border); } [data-theme="dark"] .theme-editorial-card__title { color: var(--pub-gray-900); } [data-theme="dark"] .theme-editorial-card__text { color: var(--pub-gray-700); } [data-theme="dark"] .theme-editorial-card__list li { color: var(--pub-gray-700); } [data-theme="dark"] .theme-editorial-card__list li strong { color: var(--pub-gray-900); } [data-theme="dark"] .theme-editorial-card__link { color: var(--theme-blue-light); } [data-theme="dark"] .theme-editorial-card__link:hover { color: var(--theme-blue); } [data-theme="dark"] .theme-editorial-legal-link { background: var(--theme-bg-subtle); border-color: var(--theme-border); color: var(--pub-gray-700); } [data-theme="dark"] .theme-editorial-legal-link:hover { background: var(--theme-gray-light); border-color: var(--theme-blue); color: var(--theme-blue-light); } [data-theme="dark"] .theme-editorial-legal-arrow { color: var(--theme-blue); } [data-theme="dark"] .theme-editorial-legal-link:hover .theme-editorial-legal-arrow { color: var(--theme-blue-light); } /* ============================================================================= FIX 2: BADGE LAYOUT - PREVENT ORPHAN BADGE ON NARROW SCREENS Using CSS Grid instead of Flexbox for more predictable wrapping ============================================================================= */ /* Override existing flex layout with grid for badges */ /* Mobile: Stack badges vertically */ /* ============================================================================= FIX 3: CTA SUBHEAD VISIBILITY IN LIGHT MODE The subhead color was hardcoded to white (rgba(255,255,255,0.8)), which is invisible on light backgrounds. Fix: scope white text to --dark modifier. ============================================================================= */ /* Base subhead - visible in light mode */ .theme-about-cta__subhead { color: var(--pub-gray-700); max-width: 600px; margin: 0 auto 32px; font-size: 1.125rem; line-height: 1.6; } /* Dark modifier - override for white text */ .theme-about-cta--dark .theme-about-cta__subhead { color: rgba(255, 255, 255, 0.85); } /* System dark mode - ensure subhead is visible */ [data-theme="dark"] .theme-about-cta__subhead { color: var(--pub-gray-600); } [data-theme="dark"] .theme-about-cta--dark .theme-about-cta__subhead { color: rgba(255, 255, 255, 0.85); } /* ========================================= CONTACT PAGE - DARK MODE ========================================= */ [data-theme="dark"] .theme-contact-wrapper { background-color: var(--theme-bg-subtle); } [data-theme="dark"] .theme-contact-hero { background-color: #0a0a0a; } [data-theme="dark"] .theme-contact-intro { color: var(--pub-gray-700); } [data-theme="dark"] .theme-contact-card { background: var(--theme-bg-section); border-color: var(--theme-border); } [data-theme="dark"] .theme-contact-card:hover { border-color: var(--pub-accent); } [data-theme="dark"] .theme-contact-card__title { color: var(--pub-gray-900); } [data-theme="dark"] .theme-contact-card__desc { color: var(--pub-gray-500); } [data-theme="dark"] .theme-contact-card__link { color: var(--pub-link-blue); } [data-theme="dark"] .theme-contact-corporate { background-color: #0a0a0a; } [data-theme="dark"] .theme-contact-corporate h4 { color: var(--pub-gray-900); border-bottom-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .theme-contact-corporate p, [data-theme="dark"] .theme-contact-corporate strong { color: var(--pub-gray-500); } [data-theme="dark"] .theme-contact-phone { color: var(--theme-blue-light) !important; } /* ========================================= STYLE GUIDE COMPONENTS - DARK MODE (2026-01-19) Added per style_guide.json requirements ========================================= */ /* --- PILLAR GRID & CARDS --- */ [data-theme="dark"] .theme-pillar-grid { background: transparent; } [data-theme="dark"] .theme-pillar-card { background: var(--theme-bg-subtle); border-color: var(--theme-border); } [data-theme="dark"] .theme-pillar-card:hover { border-color: var(--theme-blue-light); box-shadow: var(--hover-shadow-card); } [data-theme="dark"] .theme-pillar-card__title { color: var(--pub-gray-900); } [data-theme="dark"] .theme-pillar-card__description { color: var(--pub-gray-600); } [data-theme="dark"] .theme-pillar-card__cta { color: var(--theme-blue-light); } /* --- PILLAR HERO --- */ [data-theme="dark"] .theme-pillar-hero { background: linear-gradient(180deg, var(--theme-bg-section) 0%, var(--theme-bg-subtle) 100%); border-bottom-color: var(--theme-border); } [data-theme="dark"] .theme-pillar-hero__title { color: var(--pub-gray-900); } [data-theme="dark"] .theme-pillar-hero__subtitle { color: var(--pub-gray-600); } /* --- KEY TAKEAWAYS (Investopedia/* Dark mode support */ [data-theme="dark"] .theme-key-takeaways { background: var(--theme-bg-subtle); border-color: var(--theme-border); border-left-color: var(--pub-success); } [data-theme="dark"] .theme-key-takeaways__header { color: #34D399; } [data-theme="dark"] .theme-key-takeaways li { color: #D1D5DB; } /* --- DATA TABLE (Bloomberg Terminal) --- */ [data-theme="dark"] .theme-data-table { border-color: var(--theme-border); } [data-theme="dark"] .theme-data-table th { background: var(--theme-bg-section); border-color: var(--theme-border); color: var(--pub-gray-900); } [data-theme="dark"] .theme-data-table td { border-color: var(--theme-border); color: var(--pub-gray-700); } [data-theme="dark"] .theme-data-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); } [data-theme="dark"] .theme-data-table tbody tr:hover { background: rgba(74, 108, 247, 0.1); box-shadow: inset 3px 0 0 var(--theme-blue-light); } [data-theme="dark"] .theme-data-table .value--positive { color: var(--theme-green); } [data-theme="dark"] .theme-data-table .value--negative { color: var(--theme-red); } /* --- AUTHOR TRUST BADGE --- */ [data-theme="dark"] .theme-author-trust { background: var(--theme-bg-section); border-color: var(--theme-border); } [data-theme="dark"] .theme-author-trust__avatar { border-color: var(--theme-bg-section); box-shadow: 0 0 0 1px var(--theme-border); } [data-theme="dark"] .theme-author-trust__name { color: var(--pub-gray-900); } [data-theme="dark"] .theme-author-trust__verified { color: var(--theme-green); } /* --- MARKET TICKER --- */ [data-theme="dark"] .theme-market-ticker { background: var(--theme-bg-section); border: 1px solid var(--theme-border); } /* --- AFFILIATE BOX --- */ [data-theme="dark"] .theme-affiliate-box { background: linear-gradient(to right, var(--theme-bg-subtle), var(--theme-bg-section)); border-color: var(--theme-border); border-left-color: var(--pub-success); } [data-theme="dark"] .theme-affiliate-box__content { color: var(--pub-gray-600); } /* --- SKELETON LOADING (ensure animation works) --- */ [data-theme="dark"] .theme-skeleton { background: linear-gradient(90deg, var(--theme-gray-light) 25%, var(--theme-border) 50%, var(--theme-gray-light) 75%); } /* --- PILLAR SECTION --- */ [data-theme="dark"] .theme-pillar-section__title { color: var(--pub-gray-900); border-bottom-color: var(--theme-border); } [data-theme="dark"] .theme-pillar-section__title::after { background: var(--theme-blue-light); } [data-theme="dark"] .theme-pillar-section__intro { color: var(--pub-gray-600); } /* --- AUTHOR PAGE COMPONENTS: EXTRACTED TO css/04-pages/_author.css (2026-01-26) --- */ [data-theme="dark"] .theme-author-cpa p { color: var(--pub-gray-700) !important; } [data-theme="dark"] .theme-author-cpa .theme-btn-primary { background: var(--theme-blue) !important; color: var(--theme-white) !important; } /* --- AUTHOR FEATURED-IN STRIP --- */ [data-theme="dark"] .theme-featured-in--author { background: var(--theme-bg-section) !important; border-top-color: var(--theme-border) !important; border-bottom-color: var(--theme-border) !important; } [data-theme="dark"] .theme-featured-in--author .theme-featured-in__label { color: var(--pub-gray-500) !important; } [data-theme="dark"] .theme-featured-logo { color: var(--pub-gray-500) !important; } [data-theme="dark"] .theme-featured-logo:hover { color: var(--pub-gray-300) !important; } /* --- AUTHOR CREDENTIALS GRID --- */ [data-theme="dark"] .theme-author-credentials { background: var(--theme-bg-section) !important; } [data-theme="dark"] .theme-author-credentials__card { background: var(--theme-bg-subtle) !important; border: 1px solid var(--theme-border) !important; border-radius: 4px; padding: var(--space-md); } [data-theme="dark"] .theme-author-credentials__title { color: var(--pub-gray-900) !important; } [data-theme="dark"] .theme-author-credentials__desc { color: var(--pub-gray-600) !important; } [data-theme="dark"] .theme-author-credentials__icon { opacity: 0.9; } /* =================================================================== wpDISCUZ DARK MODE OVERRIDES (2026-01-21) Tokenized styling for dynamic dark mode support =================================================================== */ /* Main container */ [data-theme="dark"] #wpdcom { background-color: var(--theme-bg-subtle); color: var(--pub-gray-700); } /* Comment form fields */ [data-theme="dark"] .wpd-field, [data-theme="dark"] .wpd-field-textarea, [data-theme="dark"] .ql-container { background-color: var(--theme-bg-section); border-color: var(--theme-border); color: var(--pub-gray-900); } [data-theme="dark"] .ql-editor { background-color: var(--theme-bg-section); color: var(--pub-gray-700); } [data-theme="dark"] .ql-editor.ql-blank::before { color: var(--pub-gray-500); } [data-theme="dark"] .wpdiscuz-textarea-wrap, [data-theme="dark"] #wpcomm .wpdiscuz-textarea-wrap { background-color: var(--theme-bg-section) !important; } /* Quill toolbar */ [data-theme="dark"] .ql-toolbar.ql-snow { background-color: var(--theme-bg-section); border-color: var(--theme-border); } [data-theme="dark"] .ql-snow .ql-stroke { stroke: var(--pub-gray-500); } [data-theme="dark"] .ql-snow .ql-fill { fill: var(--pub-gray-500); } [data-theme="dark"] .ql-snow .ql-picker { color: var(--pub-gray-500); } [data-theme="dark"] .ql-snow .ql-picker-options { background-color: var(--theme-bg-section); border-color: var(--theme-border); } /* Comment threads */ [data-theme="dark"] .wpd-comment-wrap { background-color: var(--theme-bg-subtle); border-color: var(--theme-border); } [data-theme="dark"] .wpd-comment-text { color: var(--pub-gray-700); } /* Author & meta */ [data-theme="dark"] .wpd-comment-author { color: var(--pub-gray-900); } [data-theme="dark"] .wpd-comment-date { color: var(--pub-gray-500); } /* Vote buttons */ [data-theme="dark"] .wpd-vote-up i, [data-theme="dark"] .wpd-vote-down i { color: var(--pub-gray-500); } [data-theme="dark"] .wpd-vote-up:hover i { color: var(--theme-green); } [data-theme="dark"] .wpd-vote-down:hover i { color: var(--theme-red); } [data-theme="dark"] .wpd-vote-result { color: var(--pub-gray-600); } /* Reply & action buttons */ [data-theme="dark"] .wpd-reply-button, [data-theme="dark"] .wpd-edit-button, [data-theme="dark"] .wpd-cancel-button { color: var(--pub-gray-500); } [data-theme="dark"] .wpd-reply-button:hover, [data-theme="dark"] .wpd-edit-button:hover { color: var(--theme-blue); } /* Primary buttons */ [data-theme="dark"] .wpd-prim-button { background-color: var(--theme-blue); border-color: var(--theme-blue); color: #ffffff; } [data-theme="dark"] .wpd-prim-button:hover { background-color: var(--theme-blue-dark); } /* Secondary buttons */ [data-theme="dark"] .wpd-sec-button { background-color: var(--theme-bg-section); border-color: var(--theme-border); color: var(--pub-gray-700); } /* Load more comments */ [data-theme="dark"] .wpd-load-more-submit { background-color: var(--theme-bg-section); border-color: var(--theme-border); color: var(--pub-gray-500); } [data-theme="dark"] .wpd-load-more-submit:hover { border-color: var(--theme-blue); color: var(--theme-blue); } /* Sorting tabs */ [data-theme="dark"] .wpd-filter-view-all, [data-theme="dark"] .wpd-filterbutton { color: var(--pub-gray-500); } [data-theme="dark"] .wpd-filterbutton-active, [data-theme="dark"] .wpd-filterbutton:hover { color: var(--theme-blue); } /* User avatar placeholder */ [data-theme="dark"] .wpd-avatar { border-color: var(--theme-border); } /* Notification bubble */ [data-theme="dark"] .wpd-bubble { background-color: var(--theme-blue); } /* User settings wrapper */ [data-theme="dark"] .wpd-wrapper { background-color: var(--theme-bg-subtle); border-color: var(--theme-border); } [data-theme="dark"] .wpd-wrapper .wpd-list-item { border-color: var(--theme-border); color: var(--pub-gray-500); } [data-theme="dark"] .wpd-wrapper .wpd-list-item.wpd-active, [data-theme="dark"] .wpd-wrapper .wpd-list-item:hover { color: var(--pub-gray-900); } [data-theme="dark"] .wpd-wrapper .wpd-content-item { border-color: var(--theme-border); } /* Market Templates - MODULARIZED to css/04-pages/_market.css */ /* =================================================================== SOBRE NOSOTROS PAGE - DARK MODE Fix contrast issues for stats bar, author profile, mission cards, and CTA buttons. (2026-01-23) =================================================================== */ /* --- Stats Counter Bar --- */ [data-theme="dark"] .theme-about-stats, [data-theme="dark"] .theme-about-stats__item, [data-theme="dark"] [class*="stats-counter"] { background-color: var(--theme-bg-section) !important; border-color: var(--theme-border); } [data-theme="dark"] .theme-about-stats__number, [data-theme="dark"] .theme-about-stats__value, [data-theme="dark"] [class*="stats-counter"] strong { color: #FFFFFF !important; /* High contrast enforcement */ } [data-theme="dark"] .theme-about-stats__label, [data-theme="dark"] [class*="stats-counter"] span:not([class*="value"]) { color: var(--pub-gray-500); } /* --- Author Profile / Founder Card --- */ [data-theme="dark"] .theme-about-founder, [data-theme="dark"] .theme-about-author, [data-theme="dark"] [class*="founder-card"], [data-theme="dark"] [class*="author-profile"] { background-color: var(--theme-bg-subtle); border-color: var(--theme-border); } [data-theme="dark"] .theme-about-founder__name, [data-theme="dark"] [class*="founder-name"], [data-theme="dark"] [class*="author-name"] { color: #FFFFFF !important; } [data-theme="dark"] .theme-about-founder__title, [data-theme="dark"] .theme-about-founder__role, [data-theme="dark"] [class*="founder-role"] { color: var(--theme-blue-light); } [data-theme="dark"] .theme-about-founder__bio, [data-theme="dark"] [class*="founder-bio"] { color: var(--pub-gray-600); } /* --- Blue Badges (Credentials) --- */ [data-theme="dark"] .theme-about-badge, [data-theme="dark"] [class*="credential-badge"], [data-theme="dark"] [class*="specialization-badge"] { background-color: var(--theme-blue-dark); color: #FFFFFF !important; } /* --- Mission Section --- */ [data-theme="dark"] .theme-about-mission, [data-theme="dark"] [class*="mission-section"] { background-color: var(--theme-bg-section); } [data-theme="dark"] .theme-about-mission__title, [data-theme="dark"] [class*="mission-title"] { color: #FFFFFF !important; } [data-theme="dark"] .theme-about-mission__text, [data-theme="dark"] [class*="mission-text"] { color: var(--pub-gray-600); } /* --- Values Cards --- */ [data-theme="dark"] .theme-about-values__card, [data-theme="dark"] [class*="values-card"] { background-color: var(--theme-bg-subtle); border-color: var(--theme-border); } [data-theme="dark"] .theme-about-values__icon, [data-theme="dark"] [class*="values-icon"] { color: var(--theme-blue-light); } [data-theme="dark"] .theme-about-values__title, [data-theme="dark"] [class*="values-title"] { color: #FFFFFF !important; } [data-theme="dark"] .theme-about-values__description, [data-theme="dark"] [class*="values-description"] { color: var(--pub-gray-600); } /* --- Editorial Commitment Box --- */ [data-theme="dark"] .theme-theme-summary-box, [data-theme="dark"] .theme-about-editorial, [data-theme="dark"] [class*="editorial-commitment"] { background-color: var(--theme-bg-section); border-left-color: var(--theme-blue); } [data-theme="dark"] .theme-theme-summary-box h2, [data-theme="dark"] .theme-theme-summary-box h3, [data-theme="dark"] .theme-about-editorial__title, [data-theme="dark"] [class*="editorial-title"] { color: #FFFFFF !important; } [data-theme="dark"] .theme-theme-summary-box p, [data-theme="dark"] .theme-about-editorial__text { color: var(--pub-gray-600); } /* --- CTA Buttons (Purple gradient fix) --- */ [data-theme="dark"] .theme-about-cta, [data-theme="dark"] .theme-about-cta--dark, [data-theme="dark"] [class*="about-cta"] a, [data-theme="dark"] .theme-about-cta a { color: #FFFFFF !important; /* Fix black text on dark gradient */ } [data-theme="dark"] .theme-about-cta a:hover { opacity: 0.9; } /* Contact section background */ [data-theme="dark"] [class*="contact-section"], [data-theme="dark"] [class*="colaboraciones"] { background-color: var(--theme-bg-section); border-color: var(--theme-border); } /* --- "Como visto en" logos (ensure proper contrast) --- */ [data-theme="dark"] [class*="seen-in"], [data-theme="dark"] [class*="como-visto"] { filter: brightness(1.2); } /* Dark Mode Overrides for Contact Page (2026-01-24) */ [data-theme='dark'] .theme-trust-badge { background: var(--theme-bg-subtle); color: var(--pub-gray-500); border-color: var(--theme-border-subtle); } [data-theme='dark'] .theme-contact-featured { border-color: var(--theme-border-subtle); } [data-theme='dark'] .theme-faq-item { background: var(--theme-bg-section); border-color: var(--theme-border-subtle); } [data-theme='dark'] .theme-faq-item summary { color: var(--pub-gray-200); } [data-theme='dark'] .theme-faq-item p { color: var(--pub-gray-500); } [data-theme='dark'] .theme-contact-map-static { background-color: var(--theme-bg-section); border-color: var(--theme-border-subtle); } [data-theme='dark'] .theme-contact-map-static::before { opacity: 0.1; } [data-theme='dark'] .theme-contact-map-static-btn { background: var(--theme-bg-subtle); color: var(--theme-blue-light); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); } /* =================================================================== MOVED FROM STYLE.CSS (2026-01-24 Refactor) =================================================================== */ /* Section Headers */ [data-theme="dark"] .theme-section-header { color: #FFFFFF !important; } [data-theme="dark"] .theme-section-header__subtitle { color: #E5E5E5 !important; } /* Entry Content Page (Markets) */ [data-theme="dark"] .entry-content-page h2 { color: #FFFFFF !important; border-bottom-color: var(--theme-blue-light); } [data-theme="dark"] .entry-content-page h3 { color: #E5E5E5 !important; } [data-theme="dark"] .entry-content-page p { color: #D1D5DB; } [data-theme="dark"] .entry-content-page a { color: #60A5FA !important; } [data-theme="dark"] .entry-content-page a:hover { color: #93C5FD !important; } /* Details/Summary Blocks */ [data-theme="dark"] .wp-block-details summary { color: #FFFFFF; } [data-theme="dark"] .wp-block-details[open] summary { color: var(--theme-blue-light); } [data-theme="dark"] .wp-block-details li { color: #D1D5DB; } [data-theme="dark"] .wp-block-details li strong { color: #FFFFFF; } /* Legal Section (Terms/Privacy) */ [data-theme="dark"] .theme-legal-section h2 { color: var(--theme-white); } [data-theme="dark"] .theme-legal-section h3 { color: var(--pub-gray-200); } [data-theme="dark"] .theme-legal-section { border-bottom-color: var(--pub-gray-700); } [data-theme="dark"] .theme-legal-section a { color: var(--theme-blue-light); } [data-theme="dark"] .theme-legal-section a:hover { color: var(--theme-blue); } /* CTA Buttons */ [data-theme="dark"] .theme-cta--outline { color: var(--theme-blue-light); border-color: var(--theme-blue-light); } [data-theme="dark"] .theme-cta--outline:hover { background: var(--theme-blue-light); color: var(--pub-gray-900); } /* Ad Units */ [data-theme="dark"] .ai-ad-unit::before { color: var(--pub-gray-500); } /* Key Takeaways */ [data-theme="dark"] .theme-key-takeaways { background: linear-gradient(135deg, rgba(5, 150, 105, 0.1) 0%, var(--theme-bg-subtle) 100%); border-color: rgba(5, 150, 105, 0.3); } [data-theme="dark"] .theme-key-takeaways__header { color: #34D399; } [data-theme="dark"] .theme-key-takeaways li { color: var(--pub-gray-300); } /* Data Tables */ [data-theme="dark"] .theme-data-table th { background: var(--pub-gray-950); } [data-theme="dark"] .theme-data-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); } [data-theme="dark"] .theme-data-table tbody tr:hover { background: rgba(74, 108, 247, 0.1); } /* Pillar Components - MODULARIZED to css/04-pages/_pillars.css */ /* =================================================================== HOMEPAGE COMPONENTS - DARK MODE (2026-01-25) Trust badges, pillar nav, hero CTAs =================================================================== */ /* Pillar Nav (Bottom Navigation Bar) */ [data-theme="dark"] .theme-pillar-nav { background: var(--pub-gray-900); border-top-color: var(--theme-border); } [data-theme="dark"] .theme-pillar-nav__item { color: var(--pub-gray-400); } [data-theme="dark"] .theme-pillar-nav__item:hover { color: var(--theme-blue-light); background: var(--theme-bg-subtle); } /* Trust Badges (Enhanced for homepage hero) */ [data-theme="dark"] .theme-trust-badge__text { color: var(--pub-gray-300); } /* Hero CTAs Section */ [data-theme="dark"] .theme-hero-ctas .theme-cta--outline { color: var(--theme-blue-light); border-color: var(--theme-blue-light); } [data-theme="dark"] .theme-hero-ctas .theme-cta--outline:hover { background: var(--theme-blue-light); color: var(--pub-gray-900); } /* =================================================================== HOMEPAGE SMART SHELL OVERRIDES (2026-01-25) Full dark mode compliance for new authority components =================================================================== */ /* Homepage Trust Strip - Dark Mode */ /* Note: Trust strip uses dark background by default */ [data-theme="dark"] .trust-strip { background: var(--theme-bg-section); border-top-color: var(--theme-blue); border-bottom-color: var(--theme-border); } [data-theme="dark"] .trust-item { color: var(--pub-gray-500); } [data-theme="dark"] .trust-item strong { color: var(--pub-gray-300); } /* Category Pills - Dark Mode */ [data-theme="dark"] .home-category-pills { background: linear-gradient(180deg, var(--theme-bg-section) 0%, var(--theme-bg-subtle) 100%); border-bottom-color: var(--theme-border); } [data-theme="dark"] .category-pill { background: var(--theme-bg-subtle); border-color: var(--theme-border); color: var(--pub-gray-700); } [data-theme="dark"] .category-pill:hover { background: var(--theme-blue); border-color: var(--theme-blue); color: var(--theme-white); } /* Section Headers - Dark Mode */ [data-theme="dark"] .home-trending-section { border-top-color: var(--theme-border); } [data-theme="dark"] .home-trending-section__header { border-bottom-color: var(--theme-border); } [data-theme="dark"] .home-trending-section__title { color: var(--pub-gray-900); } [data-theme="dark"] .home-trending-section__view-all { color: var(--theme-blue-light); } [data-theme="dark"] .home-trending-section__view-all:hover { color: var(--pub-accent-hover); }