/** * Panama Daily — Dark Mode * * Applied when has the .na-dark class. * Uses broad selectors to override Oxygen builder output. */ /* Toggle button */ .na-dark-toggle { background: none; border: none; cursor: pointer; padding: 4px 8px; font-size: 20px; line-height: 1; color: inherit; transition: opacity 0.2s; } .na-dark-toggle:hover { opacity: 0.7; } /* Dark mode overrides */ html.na-dark { color-scheme: dark; } html.na-dark body, html.na-dark .ct-section, html.na-dark .ct-section-inner-wrap, html.na-dark .ct-div-block, html.na-dark .ct-new-columns, html.na-dark .ct-column, html.na-dark .oxygen-body { background-color: #121212 !important; color: #e0e0e0 !important; } /* Headers */ html.na-dark h1, html.na-dark h2, html.na-dark h3, html.na-dark h4, html.na-dark h5, html.na-dark h6, html.na-dark .ct-headline, html.na-dark .ct-text-block h1, html.na-dark .ct-text-block h2, html.na-dark .ct-text-block h3 { color: #f0f0f0 !important; } /* Links */ html.na-dark a { color: #90caf9 !important; } html.na-dark a:hover { color: #bbdefb !important; } /* Text blocks */ html.na-dark p, html.na-dark span, html.na-dark li, html.na-dark .ct-text-block, html.na-dark .ct-text-block p { color: #d0d0d0 !important; } /* Cards / content containers with light backgrounds */ html.na-dark .ct-div-block[style*="background-color"], html.na-dark .ct-section[style*="background-color"], html.na-dark .ct-column[style*="background-color"] { background-color: #1e1e1e !important; } /* White/light background overrides */ html.na-dark [style*="background-color: rgb(255"], html.na-dark [style*="background-color: #fff"], html.na-dark [style*="background-color: #FFF"], html.na-dark [style*="background-color: white"], html.na-dark [style*="background-color: rgb(250"], html.na-dark [style*="background-color: rgb(248"], html.na-dark [style*="background-color: rgb(245"], html.na-dark [style*="background-color: rgb(240"], html.na-dark [style*="background-color: rgb(251"] { background-color: #1e1e1e !important; } /* Images — slight dim to reduce glare */ html.na-dark img { opacity: 0.92; } html.na-dark img:hover { opacity: 1; } /* Inputs & forms */ html.na-dark input, html.na-dark textarea, html.na-dark select { background-color: #2a2a2a !important; color: #e0e0e0 !important; border-color: #444 !important; } /* Borders */ html.na-dark hr, html.na-dark [style*="border"] { border-color: #333 !important; } /* WordPress comment form, search, etc. */ html.na-dark .comment-form input, html.na-dark .comment-form textarea, html.na-dark .search-form input { background-color: #2a2a2a !important; color: #e0e0e0 !important; } /* Category badges */ html.na-dark .cat-links a, html.na-dark .tag-links a { background-color: #333 !important; color: #ccc !important; } /* Footer */ html.na-dark footer, html.na-dark .ct-section:last-child { background-color: #0a0a0a !important; } /* Scrollbar (Webkit) */ html.na-dark ::-webkit-scrollbar { background: #1e1e1e; } html.na-dark ::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }