/* * thePointsPage Dark Mode * All visual overrides are active only while has .tpp-dark-mode. * Add .tpp-dark-mode-ignore to any component that must retain its original colors. */ :root { --tpp-dm-page: #08111f; --tpp-dm-surface: #111d30; --tpp-dm-surface-raised: #17253b; --tpp-dm-surface-soft: #1d2d46; --tpp-dm-text: #f4f7fc; --tpp-dm-muted: #b8c4d6; --tpp-dm-heading: #ffffff; --tpp-dm-link: #8fb3ff; --tpp-dm-link-hover: #b5ccff; --tpp-dm-brand: #6f9eff; --tpp-dm-border: rgba(255, 255, 255, 0.14); --tpp-dm-shadow: 0 16px 40px rgba(0, 0, 0, 0.28); } html.tpp-dark-mode { color-scheme: dark; background: var(--tpp-dm-page); } html.tpp-dark-mode body, html.tpp-dark-mode #page, html.tpp-dark-mode .site, html.tpp-dark-mode .site-content, html.tpp-dark-mode .content-area, html.tpp-dark-mode .site-main, html.tpp-dark-mode .ast-container, html.tpp-dark-mode .ast-separate-container, html.tpp-dark-mode .elementor-location-single, html.tpp-dark-mode .elementor-location-archive { background-color: var(--tpp-dm-page); color: var(--tpp-dm-text); } html.tpp-dark-mode body { color: var(--tpp-dm-text); } html.tpp-dark-mode :where(h1, h2, h3, h4, h5, h6):not(.tpp-dark-mode-ignore, .tpp-dark-mode-ignore *) { color: var(--tpp-dm-heading); } html.tpp-dark-mode :where(p, li, dd, dt, figcaption, label, legend):not(.tpp-dark-mode-ignore, .tpp-dark-mode-ignore *) { color: inherit; } html.tpp-dark-mode :where(a):not( .tpp-dark-mode-ignore, .tpp-dark-mode-ignore *, #wpadminbar *, .elementor-button, .wp-element-button, .button, [role='button'], [class*='btn'] ) { color: var(--tpp-dm-link); } html.tpp-dark-mode :where(a:hover, a:focus-visible):not( .tpp-dark-mode-ignore, .tpp-dark-mode-ignore *, #wpadminbar *, .elementor-button, .wp-element-button, .button, [role='button'], [class*='btn'] ) { color: var(--tpp-dm-link-hover); } /* Astra and WordPress shell */ html.tpp-dark-mode :where( .site-header, .main-header-bar, .ast-primary-header-bar, .ast-mobile-header-wrap .ast-primary-header-bar, .site-header-focus-item, .ast-desktop .ast-primary-header-bar .main-header-menu > .menu-item, .site-footer, .site-below-footer-wrap, .ast-footer-overlay ):not(.tpp-dark-mode-ignore, .tpp-dark-mode-ignore *) { background-color: var(--tpp-dm-surface); border-color: var(--tpp-dm-border); color: var(--tpp-dm-text); } html.tpp-dark-mode :where( .main-header-menu .sub-menu, .ast-header-break-point .main-header-menu, .ast-header-break-point .main-navigation ul .menu-item .menu-link, .ast-header-break-point .main-navigation .stack-on-mobile li ):not(.tpp-dark-mode-ignore, .tpp-dark-mode-ignore *) { background-color: var(--tpp-dm-surface-raised); border-color: var(--tpp-dm-border); } html.tpp-dark-mode :where( .main-header-menu > .menu-item > .menu-link, .main-header-menu .sub-menu .menu-link, .site-header a, .site-footer a ):not(.tpp-dark-mode-ignore, .tpp-dark-mode-ignore *) { color: var(--tpp-dm-text); } /* Common article, archive, widget, card, popup and sidebar surfaces */ html.tpp-dark-mode :where( .ast-article-post, .ast-article-single, .widget, .elementor-post__card, .elementor-post, .elementor-search-form__container, .dialog-widget-content, .elementor-popup-modal .dialog-widget-content, .wp-block-group.has-background, .wp-block-media-text.has-background, .wp-block-cover__inner-container, .tpp-dark-surface ):not(.tpp-dark-mode-ignore, .tpp-dark-mode-ignore *) { background-color: var(--tpp-dm-surface); border-color: var(--tpp-dm-border); color: var(--tpp-dm-text); } html.tpp-dark-mode :where( .elementor-post__card, .dialog-widget-content, .elementor-popup-modal .dialog-widget-content, .tpp-dark-surface ):not(.tpp-dark-mode-ignore, .tpp-dark-mode-ignore *) { box-shadow: var(--tpp-dm-shadow); } html.tpp-dark-mode :where( .elementor-post__title a, .elementor-post__excerpt, .elementor-post__meta-data, .entry-title, .entry-title a, .entry-content, .entry-meta, .widget-title ):not(.tpp-dark-mode-ignore, .tpp-dark-mode-ignore *) { color: var(--tpp-dm-text); } /* Forms and search fields */ html.tpp-dark-mode :where( input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='submit']):not([type='button']):not([type='reset']), select, textarea, .elementor-field, .elementor-search-form__input ):not(.tpp-dark-mode-ignore, .tpp-dark-mode-ignore *) { background-color: var(--tpp-dm-surface-raised); border-color: var(--tpp-dm-border); color: var(--tpp-dm-text); caret-color: var(--tpp-dm-text); } html.tpp-dark-mode :where( input::placeholder, textarea::placeholder, .elementor-field::placeholder, .elementor-search-form__input::placeholder ) { color: var(--tpp-dm-muted); opacity: 1; } html.tpp-dark-mode :where( input:focus, select:focus, textarea:focus, .elementor-field:focus, .elementor-search-form__input:focus ):not(.tpp-dark-mode-ignore, .tpp-dark-mode-ignore *) { border-color: var(--tpp-dm-brand); box-shadow: 0 0 0 2px rgba(111, 158, 255, 0.24); outline: none; } html.tpp-dark-mode :where(select option):not(.tpp-dark-mode-ignore, .tpp-dark-mode-ignore *) { background: var(--tpp-dm-surface-raised); color: var(--tpp-dm-text); } /* Tables */ html.tpp-dark-mode :where(table):not(.tpp-dark-mode-ignore, .tpp-dark-mode-ignore *) { background-color: var(--tpp-dm-surface); border-color: var(--tpp-dm-border); color: var(--tpp-dm-text); } html.tpp-dark-mode :where(th):not(.tpp-dark-mode-ignore, .tpp-dark-mode-ignore *) { background-color: var(--tpp-dm-surface-soft); border-color: var(--tpp-dm-border); color: var(--tpp-dm-heading); } html.tpp-dark-mode :where(td):not(.tpp-dark-mode-ignore, .tpp-dark-mode-ignore *) { background-color: var(--tpp-dm-surface); border-color: var(--tpp-dm-border); color: var(--tpp-dm-text); } html.tpp-dark-mode :where(tbody tr:nth-child(even) td):not(.tpp-dark-mode-ignore, .tpp-dark-mode-ignore *) { background-color: var(--tpp-dm-surface-raised); } /* Editorial elements */ html.tpp-dark-mode :where(blockquote):not(.tpp-dark-mode-ignore, .tpp-dark-mode-ignore *) { background-color: var(--tpp-dm-surface); border-color: var(--tpp-dm-brand); color: var(--tpp-dm-text); } html.tpp-dark-mode :where(code, kbd, samp, pre):not(.tpp-dark-mode-ignore, .tpp-dark-mode-ignore *) { background-color: #050b14; border-color: var(--tpp-dm-border); color: #e8eef8; } html.tpp-dark-mode :where(hr):not(.tpp-dark-mode-ignore, .tpp-dark-mode-ignore *) { border-color: var(--tpp-dm-border); } /* Preserve media and third-party embedded documents. */ html.tpp-dark-mode :where(img, picture, video, canvas, svg, iframe) { filter: none; } html.tpp-dark-mode .tpp-dark-mode-ignore { color-scheme: light; } /* Accessible floating toggle */ .tpp-dark-mode-toggle .screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .tpp-dark-mode-toggle { appearance: none; position: fixed; left: max(18px, env(safe-area-inset-left)); right: auto; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 9998; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin: 0; padding: 0; border: 1px solid rgba(11, 31, 58, 0.14); border-radius: 999px; background: #ffffff; color: #0b1f3a; box-shadow: 0 8px 24px rgba(11, 31, 58, 0.20); cursor: pointer; line-height: 1; transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, color 160ms ease; } .tpp-dark-mode-toggle:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(11, 31, 58, 0.28); } .tpp-dark-mode-toggle:focus-visible { outline: 3px solid rgba(49, 111, 246, 0.45); outline-offset: 3px; } .tpp-dark-mode-toggle__icon { display: inline-flex; width: 22px; height: 22px; } .tpp-dark-mode-toggle__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .tpp-dark-mode-toggle__moon svg path { fill: currentColor; stroke: currentColor; } .tpp-dark-mode-toggle__sun { display: none; } html.tpp-dark-mode .tpp-dark-mode-toggle { border-color: var(--tpp-dm-border); background: var(--tpp-dm-surface-raised); color: #ffd76a; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34); } html.tpp-dark-mode .tpp-dark-mode-toggle__moon { display: none; } html.tpp-dark-mode .tpp-dark-mode-toggle__sun { display: inline-flex; } html.tpp-dark-mode-transition, html.tpp-dark-mode-transition *, html.tpp-dark-mode-transition *::before, html.tpp-dark-mode-transition *::after { transition-property: background-color, border-color, color, fill, stroke, box-shadow; transition-duration: 180ms; transition-timing-function: ease; } @media (max-width: 767px) { .tpp-dark-mode-toggle { left: max(14px, env(safe-area-inset-left)); right: auto; bottom: max(14px, env(safe-area-inset-bottom)); width: 44px; height: 44px; } } @media (prefers-reduced-motion: reduce) { .tpp-dark-mode-toggle, html.tpp-dark-mode-transition, html.tpp-dark-mode-transition *, html.tpp-dark-mode-transition *::before, html.tpp-dark-mode-transition *::after { transition: none; } } @media print { .tpp-dark-mode-toggle { display: none !important; } } /* Keep theme/plugin button rules from restyling the standalone toggle. */ button#tpp-dark-mode-toggle.tpp-dark-mode-toggle { width: 46px !important; min-width: 46px !important; max-width: 46px !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; padding: 0 !important; border: 1px solid rgba(11, 31, 58, 0.14) !important; border-radius: 999px !important; background-color: #ffffff !important; background-image: none !important; color: #0b1f3a !important; font-size: 0 !important; text-decoration: none !important; line-height: 1 !important; } html.tpp-dark-mode button#tpp-dark-mode-toggle.tpp-dark-mode-toggle { border-color: var(--tpp-dm-border) !important; background-color: var(--tpp-dm-surface-raised) !important; color: #ffd76a !important; } @media (max-width: 767px) { button#tpp-dark-mode-toggle.tpp-dark-mode-toggle { width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; } } /* --------------------------------------------------------- Compatibility for custom thePointsPage HTML components. The tiny companion script marks only TPP-prefixed content that actually renders with a light surface or dark copy. --------------------------------------------------------- */ html.tpp-dark-mode .tpp-dm-auto-surface { border-color: var(--tpp-dm-border) !important; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22) !important; color: var(--tpp-dm-text) !important; } html.tpp-dark-mode .tpp-dm-auto-surface--page { background-color: var(--tpp-dm-page) !important; background-image: none !important; } html.tpp-dark-mode .tpp-dm-auto-surface--card { background-color: var(--tpp-dm-surface) !important; background-image: linear-gradient(145deg, var(--tpp-dm-surface) 0%, var(--tpp-dm-surface-raised) 100%) !important; } html.tpp-dark-mode .tpp-dm-auto-text { color: var(--tpp-dm-text) !important; -webkit-text-fill-color: currentColor !important; } html.tpp-dark-mode .tpp-dm-auto-border { border-color: var(--tpp-dm-border) !important; } /* Homepage compatibility, including the scoped homepage HTML widget. */ html.tpp-dark-mode #tpp-homepage { --tpp-navy: #f4f7fc !important; --tpp-ink: #f4f7fc !important; --tpp-muted: #b8c4d6 !important; --tpp-line: rgba(255, 255, 255, 0.14) !important; --tpp-sky: #1d2d46 !important; --tpp-sky-2: #0c1728 !important; background: var(--tpp-dm-page) !important; color: var(--tpp-dm-text) !important; } html.tpp-dark-mode #tpp-homepage :where(.tpp-section, .tpp-final) { background-color: var(--tpp-dm-page) !important; border-color: var(--tpp-dm-border) !important; } html.tpp-dark-mode #tpp-homepage :where(.tpp-section.alt) { background-color: #0c1728 !important; background-image: none !important; } html.tpp-dark-mode #tpp-homepage :where(.tpp-hero) { background: radial-gradient(circle at 16% 10%, rgba(111, 158, 255, 0.16), transparent 32%), radial-gradient(circle at 84% 14%, rgba(248, 184, 78, 0.10), transparent 30%), linear-gradient(135deg, #0c1728 0%, #111d30 100%) !important; border-color: var(--tpp-dm-border) !important; } html.tpp-dark-mode #tpp-homepage .tpp-hero::after { background: var(--tpp-dm-page) !important; } html.tpp-dark-mode #tpp-homepage :where( .tpp-hero-card, .tpp-card, .tpp-stat, .tpp-meter-row, .tpp-final-card ) { background: linear-gradient(145deg, var(--tpp-dm-surface) 0%, var(--tpp-dm-surface-raised) 100%) !important; border-color: var(--tpp-dm-border) !important; color: var(--tpp-dm-text) !important; box-shadow: var(--tpp-dm-shadow) !important; } html.tpp-dark-mode #tpp-homepage :where( h1, h2, h3, .tpp-meter-label, .tpp-stat strong ) { color: var(--tpp-dm-heading) !important; } html.tpp-dark-mode #tpp-homepage :where( p, li, .tpp-section-intro, .tpp-stat span, .tpp-card p, .tpp-mini-list li, .tpp-final-card p ) { color: var(--tpp-dm-muted) !important; } html.tpp-dark-mode #tpp-homepage :where( .tpp-kicker, .tpp-pill, .tpp-tag, .tpp-icon ) { background: var(--tpp-dm-surface-soft) !important; border-color: var(--tpp-dm-border) !important; color: var(--tpp-dm-link) !important; } html.tpp-dark-mode #tpp-homepage :where(.tpp-button.secondary) { background: var(--tpp-dm-surface-raised) !important; border-color: var(--tpp-dm-border) !important; color: var(--tpp-dm-text) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22) !important; } html.tpp-dark-mode #tpp-homepage :where(.tpp-hero-card::before, .tpp-resource-card::after) { background: rgba(111, 158, 255, 0.12) !important; } /* --------------------------------------------------------- Direct compatibility for the current article template. These rules override the inline #1f2937 wrapper and the embedded light-mode cards used by .tpp-daily-post. --------------------------------------------------------- */ html.tpp-dark-mode .tpp-daily-post { color: var(--tpp-dm-text) !important; } html.tpp-dark-mode .tpp-daily-post :where(p, li, dt, dd, strong, b, em, i) { color: inherit; } html.tpp-dark-mode .tpp-daily-post :where(h2, h3, h4, h5, h6) { color: var(--tpp-dm-heading) !important; } html.tpp-dark-mode .tpp-daily-post :where( .tpp-quick-card, .tpp-cta-card, .tpp-email-evidence-card, .tpp-info-card, .tpp-summary-card, .tpp-example-card, .tpp-detail-card ) { background: linear-gradient(145deg, var(--tpp-dm-surface) 0%, var(--tpp-dm-surface-raised) 100%) !important; border-color: var(--tpp-dm-border) !important; color: var(--tpp-dm-text) !important; box-shadow: var(--tpp-dm-shadow) !important; } html.tpp-dark-mode .tpp-daily-post .tpp-quick-card { border-left-color: var(--tpp-dm-brand) !important; } html.tpp-dark-mode .tpp-daily-post .tpp-warning-card { background: linear-gradient(145deg, #2d2614 0%, #382e16 100%) !important; border-color: rgba(242, 184, 75, 0.42) !important; border-left-color: #f2b84b !important; color: #fff2c7 !important; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24) !important; } html.tpp-dark-mode .tpp-daily-post :where(.tpp-small-note, .tpp-update-caption) { color: var(--tpp-dm-muted) !important; } html.tpp-dark-mode .tpp-daily-post .tpp-pill-button.secondary { background: var(--tpp-dm-surface-raised) !important; border-color: var(--tpp-dm-brand) !important; color: var(--tpp-dm-link) !important; } /* --------------------------------------------------------- Direct compatibility for the current conversion sidebar. The sidebar's own embedded CSS uses hard-coded white panels and navy copy, so dark mode must override those explicitly. --------------------------------------------------------- */ html.tpp-dark-mode .tpp-conversion-sidebar { --tpp-blue: #7da4ff !important; --tpp-blue-dark: #a9c2ff !important; --tpp-navy: #f4f7fc !important; --tpp-copy: #d9e2ef !important; --tpp-muted: #aab8cc !important; --tpp-border: rgba(255, 255, 255, 0.14) !important; --tpp-teal: #63d7cb !important; --tpp-teal-dark: #31b8aa !important; color: var(--tpp-dm-text) !important; } html.tpp-dark-mode .tpp-conversion-sidebar :where( .tpp-sidebar-search, .tpp-sidebar-latest ) { background: var(--tpp-dm-surface) !important; border-color: var(--tpp-dm-border) !important; box-shadow: var(--tpp-dm-shadow) !important; } html.tpp-dark-mode .tpp-conversion-sidebar .tpp-sidebar-search-form { background: var(--tpp-dm-surface-raised) !important; border-color: var(--tpp-dm-border) !important; } html.tpp-dark-mode .tpp-conversion-sidebar .tpp-sidebar-search-form input[type='search'] { background: var(--tpp-dm-surface-raised) !important; color: var(--tpp-dm-text) !important; } html.tpp-dark-mode .tpp-conversion-sidebar .tpp-sidebar-search-form input[type='search']::placeholder { color: var(--tpp-dm-muted) !important; } html.tpp-dark-mode .tpp-conversion-sidebar .tpp-sidebar-card--facebook { background: radial-gradient(circle at 15% 3%, rgba(111, 158, 255, 0.18) 0%, rgba(111, 158, 255, 0) 48%), linear-gradient(145deg, #111d30 0%, #17253b 100%) !important; border-color: rgba(111, 158, 255, 0.30) !important; } html.tpp-dark-mode .tpp-conversion-sidebar .tpp-sidebar-card--insurance { background: radial-gradient(circle at 15% 4%, rgba(99, 215, 203, 0.15) 0%, rgba(99, 215, 203, 0) 49%), linear-gradient(145deg, #111d30 0%, #17253b 100%) !important; border-color: rgba(99, 215, 203, 0.28) !important; } html.tpp-dark-mode .tpp-conversion-sidebar .tpp-sidebar-card::before { background: linear-gradient(125deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 46%) !important; } html.tpp-dark-mode .tpp-conversion-sidebar :where( .tpp-sidebar-card-title, .tpp-brand-the, .tpp-latest-heading-title, .tpp-latest-title ) { color: var(--tpp-dm-heading) !important; } html.tpp-dark-mode .tpp-conversion-sidebar :where( .tpp-sidebar-benefits li, .tpp-sidebar-card-text, .tpp-sidebar-microcopy ) { color: var(--tpp-dm-text) !important; } html.tpp-dark-mode .tpp-conversion-sidebar .tpp-latest-subheading { color: var(--tpp-dm-muted) !important; } html.tpp-dark-mode .tpp-conversion-sidebar .tpp-latest-post { border-bottom-color: var(--tpp-dm-border) !important; } html.tpp-dark-mode .tpp-conversion-sidebar .tpp-latest-thumbnail { background: var(--tpp-dm-surface-soft) !important; } /* --------------------------------------------------------- Direct compatibility for The Runway. All cards inherit these variables, including cards inserted later by its feed JavaScript, so no DOM observer is required. --------------------------------------------------------- */ html.tpp-dark-mode #tpp-runway { --tpp-blue: #7da4ff !important; --tpp-blue-dark: #a9c2ff !important; --tpp-blue-soft: #1b2a42 !important; --tpp-blue-wash: #17253b !important; --tpp-sky: #7da4ff !important; --tpp-accent: #b59aff !important; --tpp-accent-soft: rgba(181, 154, 255, 0.12) !important; --tpp-gold: #f2c66d !important; --tpp-ink: #f4f7fc !important; --tpp-muted: #aebbd0 !important; --tpp-line: rgba(255, 255, 255, 0.14) !important; --tpp-card: #111d30 !important; --tpp-bg: #08111f !important; color: var(--tpp-dm-text) !important; background: linear-gradient(180deg, rgba(111, 158, 255, 0.08), rgba(8, 17, 31, 0) 260px) !important; } html.tpp-dark-mode #tpp-runway .runway-intro { background: linear-gradient(135deg, rgba(111, 158, 255, 0.16), rgba(23, 37, 59, 0.72)) !important; border-color: var(--tpp-dm-border) !important; border-left-color: var(--tpp-dm-brand) !important; color: var(--tpp-dm-text) !important; } html.tpp-dark-mode #tpp-runway .runway-pill { background: var(--tpp-dm-surface-raised) !important; border-color: var(--tpp-dm-border) !important; color: var(--tpp-dm-link) !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22) !important; } html.tpp-dark-mode #tpp-runway .runway-card { background: var(--tpp-dm-surface) !important; border-color: var(--tpp-dm-border) !important; box-shadow: var(--tpp-dm-shadow) !important; } html.tpp-dark-mode #tpp-runway .runway-card-header { background: linear-gradient(180deg, var(--tpp-dm-surface-raised), var(--tpp-dm-surface)) !important; border-bottom-color: var(--tpp-dm-border) !important; } html.tpp-dark-mode #tpp-runway :where( .runway-source h3, .story-title ) { color: var(--tpp-dm-heading) !important; } html.tpp-dark-mode #tpp-runway :where( .runway-source span, .story-time, .runway-empty, .runway-loading, .runway-footer ) { color: var(--tpp-dm-muted) !important; } html.tpp-dark-mode #tpp-runway .runway-story { border-bottom-color: var(--tpp-dm-border) !important; } html.tpp-dark-mode #tpp-runway .runway-story:hover, html.tpp-dark-mode #tpp-runway .runway-story:focus-visible { background: var(--tpp-dm-surface-raised) !important; } html.tpp-dark-mode #tpp-runway :where(.new-tag, .runway-badge) { background: rgba(125, 164, 255, 0.16) !important; color: #b9ccff !important; } /* --------------------------------------------------------- v1.0.4 contrast repair. These rules cover hard-coded inline colors and custom HTML outside the previously known TPP-prefixed wrappers. --------------------------------------------------------- */ html.tpp-dark-mode .tpp-dm-auto-heading { color: var(--tpp-dm-heading) !important; -webkit-text-fill-color: currentColor !important; } html.tpp-dark-mode .tpp-dm-auto-link { color: var(--tpp-dm-link) !important; -webkit-text-fill-color: currentColor !important; } html.tpp-dark-mode .tpp-dm-auto-text { color: #e5ecf6 !important; -webkit-text-fill-color: currentColor !important; } html.tpp-dark-mode .tpp-dm-auto-before-light::before, html.tpp-dark-mode .tpp-dm-auto-after-light::after { background-color: rgba(111, 158, 255, 0.08) !important; background-image: none !important; border-color: var(--tpp-dm-border) !important; } /* Reliable fallback for article/editor/archive copy with embedded navy colors. */ html.tpp-dark-mode :where( #content, .site-content, .site-main, .elementor-location-single, .elementor-location-archive ) :where(p, li, dt, dd, figcaption):not( .tpp-dark-mode-ignore, .tpp-dark-mode-ignore *, button *, [role='button'] *, .elementor-button *, .wp-element-button *, [class*='btn'] *, [class*='button'] * ) { color: #dce5f2 !important; -webkit-text-fill-color: currentColor !important; } html.tpp-dark-mode :where( #content, .site-content, .site-main, .elementor-location-single, .elementor-location-archive ) :where(h1, h2, h3, h4, h5, h6):not( .tpp-dark-mode-ignore, .tpp-dark-mode-ignore * ) { color: var(--tpp-dm-heading) !important; -webkit-text-fill-color: currentColor !important; } html.tpp-dark-mode :where( #content, .site-content, .site-main, .elementor-location-single, .elementor-location-archive ) a:not( .tpp-dark-mode-ignore, .tpp-dark-mode-ignore *, .elementor-button, .wp-element-button, .button, [role='button'], [class*='btn'], [class*='button'] ) { color: var(--tpp-dm-link) !important; -webkit-text-fill-color: currentColor !important; } /* Archive and post-grid excerpts frequently carry their own dark color. */ html.tpp-dark-mode :where( .elementor-post__excerpt, .elementor-post__excerpt p, .entry-summary, .entry-summary p, .post-excerpt, .post-excerpt p, [class*='post-excerpt'], [class*='post-excerpt'] p, [class*='card-excerpt'], [class*='card-excerpt'] p ) { color: #dce5f2 !important; -webkit-text-fill-color: currentColor !important; } /* The current article wrapper has an embedded dark text declaration. */ html.tpp-dark-mode .tpp-daily-post :where(p, li, dt, dd) { color: #dce5f2 !important; -webkit-text-fill-color: currentColor !important; } html.tpp-dark-mode .tpp-daily-post :where(strong, b) { color: var(--tpp-dm-heading) !important; -webkit-text-fill-color: currentColor !important; } /* Keep the original blue logo readable without recoloring the image itself. */ html.tpp-dark-mode :where(.custom-logo-link, .site-logo-img a, .ast-site-identity .site-logo-img) { background: #ffffff !important; border-radius: 10px !important; padding: 4px 8px !important; } /* --------------------------------------------------------- v1.0.6 whole-page contrast and card repair. The companion script applies these classes only to elements whose computed colors fail on the active dark background. --------------------------------------------------------- */ html.tpp-dark-mode body .tpp-dm-auto-surface.tpp-dm-auto-surface--page { background-color: var(--tpp-dm-page) !important; background-image: none !important; border-color: var(--tpp-dm-border) !important; color: var(--tpp-dm-text) !important; } html.tpp-dark-mode body .tpp-dm-auto-surface.tpp-dm-auto-surface--card { background-color: var(--tpp-dm-surface) !important; background-image: linear-gradient(145deg, var(--tpp-dm-surface) 0%, var(--tpp-dm-surface-raised) 100%) !important; border-color: var(--tpp-dm-border) !important; color: var(--tpp-dm-text) !important; } html.tpp-dark-mode body .tpp-dm-auto-surface :where( h1, h2, h3, h4, h5, h6, strong, b, [class*='title'], [class*='heading'], [class*='headline'], [class*='question'] ):not( .tpp-dark-mode-ignore, .tpp-dark-mode-ignore *, button *, [role='button'] *, .elementor-button *, .wp-element-button *, [class*='btn'] *, [class*='button'] *, [class*='badge'] *, [class*='tag'] *, [class*='pill'] *, [class*='chip'] * ) { color: var(--tpp-dm-heading) !important; -webkit-text-fill-color: currentColor !important; } html.tpp-dark-mode body .tpp-dm-auto-surface :where( p, li, dt, dd, blockquote, q, cite, figcaption, small, em, i ):not( .tpp-dark-mode-ignore, .tpp-dark-mode-ignore *, button *, [role='button'] *, .elementor-button *, .wp-element-button *, [class*='btn'] *, [class*='button'] *, [class*='badge'] *, [class*='tag'] *, [class*='pill'] *, [class*='chip'] * ) { color: #dce5f2 !important; -webkit-text-fill-color: currentColor !important; } html.tpp-dark-mode body :where( .tpp-dm-auto-heading, .tpp-dm-auto-heading * ) { color: var(--tpp-dm-heading) !important; -webkit-text-fill-color: currentColor !important; } html.tpp-dark-mode body :where( .tpp-dm-auto-text, .tpp-dm-auto-text * ) { color: #e5ecf6 !important; -webkit-text-fill-color: currentColor !important; } html.tpp-dark-mode body :where( .tpp-dm-auto-link, .tpp-dm-auto-link * ) { color: var(--tpp-dm-link) !important; -webkit-text-fill-color: currentColor !important; } /* Elementor accordions and toggles often keep a white panel outside normal article wrappers. */ html.tpp-dark-mode body :where( .elementor-accordion .elementor-accordion-item, .elementor-accordion .elementor-tab-title, .elementor-accordion .elementor-tab-content, .elementor-toggle .elementor-toggle-item, .elementor-toggle .elementor-tab-title, .elementor-toggle .elementor-tab-content, .elementor-widget-n-accordion .e-n-accordion-item, .elementor-widget-n-accordion .e-n-accordion-item-title, .elementor-widget-n-accordion .e-n-accordion-item-text ) { background-color: var(--tpp-dm-surface) !important; background-image: none !important; border-color: var(--tpp-dm-border) !important; color: var(--tpp-dm-text) !important; } html.tpp-dark-mode body :where( .elementor-accordion .elementor-tab-title, .elementor-toggle .elementor-tab-title, .elementor-widget-n-accordion .e-n-accordion-item-title ) { color: var(--tpp-dm-heading) !important; } html.tpp-dark-mode body :where( .elementor-accordion .elementor-tab-content, .elementor-toggle .elementor-tab-content, .elementor-widget-n-accordion .e-n-accordion-item-text ) { color: #dce5f2 !important; } /* Testimonials and reviews frequently use blockquotes with embedded navy copy. */ html.tpp-dark-mode body :where( [class*='testimonial'] blockquote, [class*='testimonial'] q, [class*='review'] blockquote, [class*='review'] q, [class*='quote'] blockquote, [class*='quote'] q ) { color: #dce5f2 !important; -webkit-text-fill-color: currentColor !important; } /* --------------------------------------------------------- v1.0.7 native form fields, option tiles and linked cards. These rules only affect elements the contrast scanner marked after confirming that they rendered as light surfaces. --------------------------------------------------------- */ html.tpp-dark-mode body .tpp-dm-auto-field { background-color: var(--tpp-dm-surface-raised) !important; background-image: none !important; border-color: var(--tpp-dm-border) !important; color: var(--tpp-dm-text) !important; -webkit-text-fill-color: var(--tpp-dm-text) !important; caret-color: var(--tpp-dm-text) !important; box-shadow: none !important; color-scheme: dark !important; } html.tpp-dark-mode body .tpp-dm-auto-field::placeholder { color: var(--tpp-dm-muted) !important; -webkit-text-fill-color: var(--tpp-dm-muted) !important; opacity: 1 !important; } html.tpp-dark-mode body select.tpp-dm-auto-field option { background-color: var(--tpp-dm-surface-raised) !important; color: var(--tpp-dm-text) !important; } html.tpp-dark-mode body .tpp-dm-auto-control { background-color: var(--tpp-dm-surface-raised) !important; background-image: none !important; border-color: var(--tpp-dm-border) !important; color: var(--tpp-dm-text) !important; -webkit-text-fill-color: var(--tpp-dm-text) !important; box-shadow: none !important; } html.tpp-dark-mode body .tpp-dm-auto-control :where( span, div, p, small, strong, b, em, i, label ) { color: inherit !important; -webkit-text-fill-color: currentColor !important; } html.tpp-dark-mode body .tpp-dm-auto-control--selected, html.tpp-dark-mode body label.tpp-dm-auto-control:has(input:checked) { background-color: #203a63 !important; background-image: linear-gradient(145deg, #203a63 0%, #294a78 100%) !important; border-color: var(--tpp-dm-brand) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; box-shadow: 0 0 0 2px rgba(111, 158, 255, 0.20) !important; } html.tpp-dark-mode body :where(input[type='checkbox'], input[type='radio']) { accent-color: #4f83ff; } /* Win against custom tool CSS that hard-codes white fields with high specificity. */ html.tpp-dark-mode body :where( input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='hidden']):not([type='file']):not([type='submit']):not([type='button']):not([type='reset']):not([type='image']), select, textarea ):not(.tpp-dark-mode-ignore, .tpp-dark-mode-ignore *) { background-color: var(--tpp-dm-surface-raised) !important; background-image: none !important; border-color: var(--tpp-dm-border) !important; color: var(--tpp-dm-text) !important; -webkit-text-fill-color: var(--tpp-dm-text) !important; caret-color: var(--tpp-dm-text) !important; color-scheme: dark !important; } html.tpp-dark-mode body :where( input:not([type='checkbox']):not([type='radio'])::placeholder, textarea::placeholder ) { color: var(--tpp-dm-muted) !important; -webkit-text-fill-color: var(--tpp-dm-muted) !important; opacity: 1 !important; } /* Light option tiles and secondary controls inside forms. */ html.tpp-dark-mode body :where(form, fieldset) :where( label.tpp-dm-auto-surface, button.tpp-dm-auto-surface, [role='button'].tpp-dm-auto-surface, [role='option'].tpp-dm-auto-surface, [role='radio'].tpp-dm-auto-surface, [role='checkbox'].tpp-dm-auto-surface ) { background-color: var(--tpp-dm-surface-raised) !important; background-image: none !important; border-color: var(--tpp-dm-border) !important; color: var(--tpp-dm-text) !important; -webkit-text-fill-color: currentColor !important; } /* Stronger pseudo-element override for linked resource cards. */ html.tpp-dark-mode body .tpp-dm-auto-before-light::before, html.tpp-dark-mode body .tpp-dm-auto-after-light::after { background-color: rgba(23, 37, 59, 0.98) !important; background-image: none !important; border-color: var(--tpp-dm-border) !important; box-shadow: none !important; } /* Common custom card names used across thePointsPage guide pages. */ html.tpp-dark-mode body :where( [class*='resource-card'], [class*='link-card'], [class*='next-card'], [class*='guide-card'], [class*='learn-card'] ):not(.tpp-dark-mode-ignore, .tpp-dark-mode-ignore *) { background-color: var(--tpp-dm-surface) !important; background-image: linear-gradient(145deg, var(--tpp-dm-surface) 0%, var(--tpp-dm-surface-raised) 100%) !important; border-color: var(--tpp-dm-border) !important; color: var(--tpp-dm-text) !important; box-shadow: var(--tpp-dm-shadow) !important; } html.tpp-dark-mode body :where( [class*='resource-card'], [class*='link-card'], [class*='next-card'], [class*='guide-card'], [class*='learn-card'] ) :where(h1, h2, h3, h4, h5, h6, strong, b) { color: var(--tpp-dm-heading) !important; -webkit-text-fill-color: currentColor !important; } html.tpp-dark-mode body :where( [class*='resource-card'], [class*='link-card'], [class*='next-card'], [class*='guide-card'], [class*='learn-card'] ) :where(p, li, small, span) { color: #dce5f2 !important; -webkit-text-fill-color: currentColor !important; } /* --------------------------------------------------------- v1.0.8 quiz answers and selection tiles. The script marks only radio/checkbox choices and large, light secondary controls inside question groups. --------------------------------------------------------- */ html.tpp-dark-mode body .tpp-dm-auto-option, html.tpp-dark-mode body .tpp-dm-auto-option-surface { background-color: var(--tpp-dm-surface-raised) !important; background-image: none !important; border-color: var(--tpp-dm-border) !important; color: var(--tpp-dm-text) !important; -webkit-text-fill-color: var(--tpp-dm-text) !important; opacity: 1 !important; box-shadow: none !important; } html.tpp-dark-mode body .tpp-dm-auto-option :where( span, div, p, small, strong, b, em, i ) { color: inherit !important; -webkit-text-fill-color: currentColor !important; opacity: 1 !important; } html.tpp-dark-mode body .tpp-dm-auto-option-before::before, html.tpp-dark-mode body .tpp-dm-auto-option-after::after { background-color: var(--tpp-dm-surface-raised) !important; background-image: none !important; border-color: var(--tpp-dm-border) !important; box-shadow: none !important; } html.tpp-dark-mode body .tpp-dm-auto-option.tpp-dm-auto-control--selected, html.tpp-dark-mode body label.tpp-dm-auto-option:has(input:checked), html.tpp-dark-mode body input[type='radio']:checked + label.tpp-dm-auto-option, html.tpp-dark-mode body input[type='checkbox']:checked + label.tpp-dm-auto-option { background-color: #203a63 !important; background-image: linear-gradient(145deg, #203a63 0%, #294a78 100%) !important; border-color: var(--tpp-dm-brand) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; box-shadow: 0 0 0 2px rgba(111, 158, 255, 0.22) !important; } /* Direct fallback for standard radio/checkbox card markup. */ html.tpp-dark-mode body :where( label:has(input[type='radio']), label:has(input[type='checkbox']), input[type='radio'] + label, input[type='checkbox'] + label, [role='radio'], [role='option'], [role='checkbox'] ):not(.tpp-dark-mode-ignore, .tpp-dark-mode-ignore *) { background-color: var(--tpp-dm-surface-raised) !important; background-image: none !important; border-color: var(--tpp-dm-border) !important; color: var(--tpp-dm-text) !important; -webkit-text-fill-color: var(--tpp-dm-text) !important; opacity: 1 !important; } html.tpp-dark-mode body :where( label:has(input[type='radio']), label:has(input[type='checkbox']), input[type='radio'] + label, input[type='checkbox'] + label, [role='radio'], [role='option'], [role='checkbox'] ) :where(span, div, p, small, strong, b, em, i) { color: inherit !important; -webkit-text-fill-color: currentColor !important; opacity: 1 !important; }