, which is positioned) ============================================ */ body.pp-politico main { position: relative; } .pp-theme-toggle { position: absolute; top: 24px; right: 24px; z-index: 10; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; background: var(--pp-surface); color: var(--pp-text-secondary); border: 1px solid var(--pp-border); border-radius: 0; cursor: pointer; padding: 0; transition: color 120ms, border-color 120ms, background 120ms; } .pp-theme-toggle:hover { color: var(--pp-text); border-color: var(--pp-text); } .pp-theme-toggle:focus-visible { outline: 2px solid var(--pp-text); outline-offset: 2px; } .pp-theme-icon { display: none; } body.pp-politico:not(.dark-mode) .pp-theme-icon-moon { display: block; } body.pp-politico.dark-mode .pp-theme-icon-sun { display: block; } /* ============================================ DARK-MODE FIXES for components with hardcoded light values in polls-editorial.css / style.css ============================================ */ /* Buttons and inputs carry hardcoded #DDDDDD borders */ body.pp-politico.dark-mode .pill-btn, body.pp-politico.dark-mode .icon-btn, body.pp-politico.dark-mode .btn, body.pp-politico.dark-mode .btn-secondary, body.pp-politico.dark-mode .date-input, body.pp-politico.dark-mode .compare-inline .date-input, body.pp-politico.dark-mode .mobile-smooth-group { border-color: #334155; } body.pp-politico.dark-mode .mobile-smooth-group .pill-btn { border-right-color: #334155; } body.pp-politico.dark-mode .pill-btn:hover, body.pp-politico.dark-mode .icon-btn:hover, body.pp-politico.dark-mode .btn:hover, body.pp-politico.dark-mode .btn-secondary:hover { border-color: #64748b; } body.pp-politico.dark-mode .date-input { background: var(--pp-surface); color: var(--pp-text-body); } /* Charts stay on white cards in dark mode - the canvases draw their axis and value labels in fixed dark colours */ body.pp-politico.dark-mode .chart-shell { background: #FFFFFF; } body.pp-politico.dark-mode .tab-content .chart-container { background: #FFFFFF; } body.pp-politico.dark-mode .tab-content .chart-container canvas { background: #FFFFFF; } body.pp-politico.dark-mode .tab-content .chart-container h3 { color: #111111; } /* Recent-poll summary pills keep their translucent party tints (style.css), which sit dark over a dark card - flip the text light */ body.pp-politico.dark-mode .recent-poll-pill { color: var(--pp-text-body); } body.pp-politico.dark-mode .recent-poll-pill.neutral { background: #273548; color: var(--pp-text-meta); } /* Compare/event overlays float over the white chart card, so keep their text dark regardless of theme */ body.pp-politico.dark-mode .compare-overlay { background: rgba(255, 255, 255, 0.96); border-color: #CBD5E1; } body.pp-politico.dark-mode .compare-overlay, body.pp-politico.dark-mode .compare-overlay-body { color: #333333; } body.pp-politico.dark-mode .compare-overlay-head strong { color: #111111; } /* Link underlines */ body.pp-politico.dark-mode main a { text-decoration-color: #475569; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 768px) { .pp-masthead-headline { font-size: 26px; } } @media (max-width: 600px) { .pp-theme-toggle { width: 28px; height: 28px; } } @media (max-width: 480px) { .pp-masthead-headline { font-size: 24px; } }