/* Dark mode — loaded alongside template.css */ /* Applied when data-theme="dark" is set on by theme.js */ [data-theme="dark"] { --bg: #0d0d1a; --card: #151528; --text: #e9eef9; --muted: #a0a0b8; --line: #2a2a4e; --brand: #c5a356; --brand2: #d4b76a; --shadow: 0 14px 42px rgba(0,0,0,.45); --shadow2: 0 18px 56px rgba(0,0,0,.50); --header-bg: #0d0d1a; --header-border: #2a2a4e; --header-shadow: none; --surface: #1a1a30; } [data-theme="dark"] body { background: var(--bg); } [data-theme="dark"] .card, [data-theme="dark"] .tile, [data-theme="dark"] .denom-section, [data-theme="dark"] .sponsored-card, [data-theme="dark"] .ck-module, [data-theme="dark"] .com-content-category-blog__item { background: var(--card); border-color: var(--line); } [data-theme="dark"] .subnav .link, [data-theme="dark"] .badge, [data-theme="dark"] .table-wrap, [data-theme="dark"] .coin-panel, [data-theme="dark"] .pager a, [data-theme="dark"] .pagination .page-item .page-link { background: var(--card); border-color: var(--line); color: var(--muted); } [data-theme="dark"] .price-table tr:nth-child(even) td { background: rgba(255,255,255,.03); } [data-theme="dark"] .navlinks a.active, [data-theme="dark"] .navlinks a:hover { background: rgba(255,255,255,.06); border-color: var(--line); } [data-theme="dark"] .nav-toggle, [data-theme="dark"] .nav-more { background: var(--card); border-color: var(--line); color: var(--text); } [data-theme="dark"] .search, [data-theme="dark"] .select, [data-theme="dark"] .pill, [data-theme="dark"] .mod-finder__searchword, [data-theme="dark"] .mod-login input { background: var(--card); border-color: var(--line); color: var(--text); } /* All form inputs site-wide */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="tel"], [data-theme="dark"] input[type="url"], [data-theme="dark"] textarea, [data-theme="dark"] select, [data-theme="dark"] .ck-grade-select, [data-theme="dark"] .ck-price-input, [data-theme="dark"] .ck-notes-area, [data-theme="dark"] .ck-search-input, [data-theme="dark"] .ck-search-box, [data-theme="dark"] .ck-denom-select, [data-theme="dark"] .rh-field, [data-theme="dark"] .rh-date-input { background: var(--surface, #1a1a30) !important; border-color: var(--line, #2a2a4e) !important; color: var(--text, #e9eef9) !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder, [data-theme="dark"] select option { color: var(--muted, #a0a0b8) !important; } [data-theme="dark"] select option { background: var(--card, #151528); } /* Grade toggle buttons */ [data-theme="dark"] .ck-grade-toggle { background: var(--surface, #1a1a30); border-color: var(--line, #2a2a4e); color: var(--muted, #a0a0b8); } [data-theme="dark"] .ck-grade-toggle-btn { color: var(--muted, #a0a0b8); background: transparent; } [data-theme="dark"] .ck-grade-toggle-btn.active { background: var(--brand2, var(--brand2, #c5a356)); color: #1a1a2e; } [data-theme="dark"] .ck-grade-toggle-btn:not(.active):hover { background: var(--line, #2a2a4e); } /* Action buttons — use accent in dark mode since --brand is too dark */ [data-theme="dark"] .btn, [data-theme="dark"] .ck-notes-save, [data-theme="dark"] .ck-crop-save { background: var(--brand2, var(--brand2, #c5a356)) !important; color: #1a1a2e !important; } [data-theme="dark"] .btn:hover, [data-theme="dark"] .ck-notes-save:hover, [data-theme="dark"] .ck-crop-save:hover { filter: brightness(1.1); } [data-theme="dark"] .btn-soft, [data-theme="dark"] .ck-btn.secondary, [data-theme="dark"] .ck-crop-skip { background: var(--surface, #1a1a30) !important; color: var(--text, #e9eef9) !important; border-color: var(--line, #2a2a4e) !important; } [data-theme="dark"] .ck-notes-saved { color: #4ade80; } /* Grade badges */ [data-theme="dark"] .ck-grade-badge.raw { background: rgba(197,163,86,.12); color: var(--brand2, var(--brand2, #c5a356)); } [data-theme="dark"] .ck-grade-badge.certified { background: rgba(197,163,86,.15); color: var(--brand2, var(--brand2, #c5a356)); } [data-theme="dark"] .mod-login input::placeholder, [data-theme="dark"] .search input::placeholder, [data-theme="dark"] .ck-search-input::placeholder { color: var(--muted); } [data-theme="dark"] .tile { box-shadow: 0 12px 26px rgba(0,0,0,.35); } /* ── Article content dark mode ────────────────────────── */ [data-theme="dark"] .com-content-article__title, [data-theme="dark"] .page-header h1 { color: #fff !important; } [data-theme="dark"] .com-content-article__body, [data-theme="dark"] .item-page, [data-theme="dark"] .com-content-article__body p, [data-theme="dark"] .item-page p { color: #d0d5e0 !important; } [data-theme="dark"] .com-content-article__body h2, [data-theme="dark"] .item-page h2 { color: #fff !important; border-bottom-color: var(--line, #2a2a4e) !important; } [data-theme="dark"] .com-content-article__body h3, [data-theme="dark"] .item-page h3 { color: var(--brand2, var(--brand2, #c5a356)) !important; } [data-theme="dark"] .com-content-article__body h4, [data-theme="dark"] .item-page h4 { color: #e0e4ec !important; } [data-theme="dark"] .com-content-article__body strong, [data-theme="dark"] .item-page strong { color: #fff !important; } [data-theme="dark"] .com-content-article__body ul, [data-theme="dark"] .com-content-article__body ol, [data-theme="dark"] .item-page ul, [data-theme="dark"] .item-page ol { color: #d0d5e0 !important; } [data-theme="dark"] .com-content-article__body li, [data-theme="dark"] .item-page li { color: #d0d5e0 !important; } [data-theme="dark"] .com-content-article__info, [data-theme="dark"] .article-info { color: var(--muted, #a0a0b8) !important; } [data-theme="dark"] .com-content-article__header, [data-theme="dark"] .page-header { border-bottom-color: var(--line, #2a2a4e) !important; } [data-theme="dark"] .com-content-article__body blockquote, [data-theme="dark"] .item-page blockquote { border-left-color: var(--brand2, var(--brand2, #c5a356)) !important; background: rgba(var(--brand2-rgb, 197,163,86), .05) !important; color: #d0d5e0 !important; } /* Article table of contents links */ [data-theme="dark"] .com-content-article__body a, [data-theme="dark"] .item-page a { color: var(--brand2, var(--brand2, #c5a356)) !important; } /* ── Broad content dark mode (catches articles, modules, custom HTML) ── */ [data-theme="dark"] .ck-main h1 { color: #fff !important; } [data-theme="dark"] .ck-main h2 { color: #fff !important; border-bottom-color: var(--line, #2a2a4e) !important; } [data-theme="dark"] .ck-main h3 { color: var(--brand2, var(--brand2, #c5a356)) !important; } [data-theme="dark"] .ck-main h4 { color: #e0e4ec !important; } [data-theme="dark"] .ck-main p { color: #d0d5e0 !important; } [data-theme="dark"] .ck-main li { color: #d0d5e0 !important; } [data-theme="dark"] .ck-main ul, [data-theme="dark"] .ck-main ol { color: #d0d5e0 !important; } [data-theme="dark"] .ck-main strong { color: #fff !important; } [data-theme="dark"] .ck-main a { color: var(--brand2, var(--brand2, #c5a356)) !important; } [data-theme="dark"] .ck-main blockquote { color: #d0d5e0 !important; border-left-color: var(--brand2, var(--brand2, #c5a356)) !important; } [data-theme="dark"] .ck-main .page-header { border-bottom-color: var(--line, #2a2a4e) !important; } [data-theme="dark"] .ck-main .article-info, [data-theme="dark"] .ck-main .com-content-article__info { color: var(--muted, #a0a0b8) !important; } /* Exclude component UI elements from broad text overrides */ [data-theme="dark"] .ck-main .ck-hero a, [data-theme="dark"] .ck-main .ck-hero-cta, [data-theme="dark"] .ck-main .ck-feature-card, [data-theme="dark"] .ck-main .ck-pop-card, [data-theme="dark"] .ck-main .ck-recent-card, [data-theme="dark"] .ck-main .featured-coin, [data-theme="dark"] .ck-main .btn, [data-theme="dark"] .ck-main .denom-tab, [data-theme="dark"] .ck-main .col-seg, [data-theme="dark"] .ck-main .col-tracker-btn, [data-theme="dark"] .ck-main .tk-mode a, [data-theme="dark"] .ck-main .tk-title a, [data-theme="dark"] .ck-main .tk-coin-name a, [data-theme="dark"] .ck-main .tk-type-edit, [data-theme="dark"] .ck-main .col-coin-link, [data-theme="dark"] .ck-main .tk-show-hidden-btn, [data-theme="dark"] .ck-main .rh-btn, [data-theme="dark"] .ck-main .rh-export-btn, [data-theme="dark"] .ck-main .ck-btn, [data-theme="dark"] .ck-main .lb-row, [data-theme="dark"] .ck-main .wcs-coin-link, [data-theme="dark"] .ck-main .wcs-pill { color: var(--text, #e9eef9) !important; } [data-theme="dark"] .ck-main .ck-hero-cta { color: #1a1a2e !important; } [data-theme="dark"] .ck-main .ck-hero-ghost { color: rgba(255,255,255,.6) !important; } /* Exclude homepage components from article link color */ [data-theme="dark"] .com-content-article__body .ck-hero a, [data-theme="dark"] .com-content-article__body .ck-hero-cta, [data-theme="dark"] .com-content-article__body .ck-hero-ghost, [data-theme="dark"] .com-content-article__body .ck-feature-card, [data-theme="dark"] .com-content-article__body .ck-pop-card, [data-theme="dark"] .com-content-article__body .ck-recent-card, [data-theme="dark"] .com-content-article__body .btn, [data-theme="dark"] .com-content-article__body .featured-coin, [data-theme="dark"] .com-content-article__body a.ck-feature-card { color: var(--text, #e9eef9) !important; } [data-theme="dark"] .ck-hero-cta { color: #1a1a2e !important; background: var(--brand2, var(--brand2, #c5a356)) !important; } [data-theme="dark"] .ck-hero-ghost { color: rgba(255,255,255,.6) !important; } [data-theme="dark"] .ck-hero-ghost:hover { color: #fff !important; } [data-theme="dark"] .alert-info { background: rgba(122,162,255,.1); border-color: rgba(122,162,255,.25); } /* Accent-tinted card borders in dark mode */ [data-theme="dark"] .card, [data-theme="dark"] .ck-profile-card, [data-theme="dark"] .denom-section, [data-theme="dark"] .col-summary, [data-theme="dark"] .col-explainer, [data-theme="dark"] .rh-form-card, [data-theme="dark"] .rh-stat, [data-theme="dark"] .tracker-card, [data-theme="dark"] .ck-album-page, [data-theme="dark"] .wc-map-wrap, [data-theme="dark"] .wc-country-card, [data-theme="dark"] .ck-feature-card, [data-theme="dark"] .ck-pop-card, [data-theme="dark"] .ck-recent-card, [data-theme="dark"] .ck-stats-bar, [data-theme="dark"] .col-denom-section, [data-theme="dark"] .tile, [data-theme="dark"] .featured-coin, [data-theme="dark"] .sponsored-card, [data-theme="dark"] .ck-module { border-color: color-mix(in srgb, var(--brand2, var(--brand2, #c5a356)) 25%, transparent); } /* Fallback for browsers without color-mix (pre-2023) */ @supports not (color: color-mix(in srgb, red, blue)) { [data-theme="dark"] .card, [data-theme="dark"] .ck-profile-card, [data-theme="dark"] .denom-section, [data-theme="dark"] .col-summary, [data-theme="dark"] .col-explainer, [data-theme="dark"] .rh-form-card, [data-theme="dark"] .rh-stat, [data-theme="dark"] .tracker-card, [data-theme="dark"] .ck-album-page, [data-theme="dark"] .wc-map-wrap, [data-theme="dark"] .wc-country-card, [data-theme="dark"] .ck-feature-card, [data-theme="dark"] .ck-pop-card, [data-theme="dark"] .ck-recent-card, [data-theme="dark"] .ck-stats-bar, [data-theme="dark"] .col-denom-section, [data-theme="dark"] .tile, [data-theme="dark"] .featured-coin, [data-theme="dark"] .sponsored-card, [data-theme="dark"] .ck-module { border-color: rgba(197, 163, 86, .25); } } /* Profile card header accent line */ [data-theme="dark"] .ck-profile-card-head { border-bottom-color: color-mix(in srgb, var(--brand2, var(--brand2, #c5a356)) 20%, transparent); } /* Denomination section heading underline */ [data-theme="dark"] .denom-section h2 { border-bottom-color: var(--brand2, var(--brand2, #c5a356)); } /* Denom section as card in dark mode */ [data-theme="dark"] .denom-section { background: var(--card, #151528); border: 1px solid color-mix(in srgb, var(--brand2, var(--brand2, #c5a356)) 25%, transparent); border-radius: 16px; padding: 20px 24px; } /* Stat number accent color */ [data-theme="dark"] .ck-profile-stat .ps-num, [data-theme="dark"] .col-stat .cs-num { color: var(--brand2, var(--brand2, #c5a356)) !important; } /* Add Coins button — keep readable in dark mode */ [data-theme="dark"] .col-add-btn { background: var(--brand2, var(--brand2, #c5a356)) !important; } [data-theme="dark"] .col-add-btn .cs-num { color: #1a1a2e !important; } /* Profile stat dividers — accent tinted */ [data-theme="dark"] .ck-profile-stat { border-right-color: color-mix(in srgb, var(--brand2, var(--brand2, #c5a356)) 20%, transparent); } /* Profile avatar border */ [data-theme="dark"] .ck-profile-avatar-circle { border-color: color-mix(in srgb, var(--brand2, var(--brand2, #c5a356)) 30%, transparent) !important; } /* Profile row dividers */ [data-theme="dark"] .ck-profile-row { border-bottom-color: var(--line, #2a2a4e); } /* Series-tile image: borderless (only the no-image placeholder keeps a border). * Placeholder gets a faint gold-tinted border in dark mode to match the * cream-on-light treatment in the base CSS. */ [data-theme="dark"] .tile-img-placeholder { border-color: color-mix(in srgb, var(--brand2, var(--brand2, #c5a356)) 30%, transparent); } /* ── Series page dark mode ─────────────────────────────── */ /* Coin list table */ [data-theme="dark"] .date-list { background: var(--card, #151528); border-color: color-mix(in srgb, var(--brand2, var(--brand2, #c5a356)) 25%, transparent); } [data-theme="dark"] .date-list th { background: var(--brand2, var(--brand2, #c5a356)); color: #1a1a2e; } [data-theme="dark"] .date-list td { border-top-color: var(--line, #2a2a4e); } [data-theme="dark"] .date-list tr:nth-child(even) td { background: rgba(255,255,255,.03); } [data-theme="dark"] .date-list tr:hover td { background: rgba(255,255,255,.06); } [data-theme="dark"] .date-list a { color: var(--text, #e9eef9); } [data-theme="dark"] .date-list a:hover { color: var(--brand2, var(--brand2, #c5a356)); } /* Series page pagination */ [data-theme="dark"] .ck-pager { background: var(--card, #151528); border-top-color: var(--line, #2a2a4e); } [data-theme="dark"] .ck-pager-btn { background: var(--surface, #1a1a30); border-color: var(--line, #2a2a4e); color: var(--text, #e9eef9); } [data-theme="dark"] .ck-pager-btn:hover { border-color: var(--brand2, var(--brand2, #c5a356)); background: rgba(197,163,86,.08); } [data-theme="dark"] .ck-pager-btn.active { background: var(--brand2, var(--brand2, #c5a356)); color: #1a1a2e; border-color: var(--brand2, var(--brand2, #c5a356)); } /* Rarity classification colors — brighten for dark bg */ [data-theme="dark"] .date-list .dl-key { color: #ef5350; } [data-theme="dark"] .date-list .dl-semi { color: var(--brand2, var(--brand2, #c5a356)); } [data-theme="dark"] .date-list .dl-var { color: #7c9df7; } [data-theme="dark"] .date-list .dl-proof { color: #b39ddb; } [data-theme="dark"] .date-list .dl-special { color: #4dd0e1; } [data-theme="dark"] .date-list .dl-nifc { color: #a1887f; } /* Track series button */ [data-theme="dark"] .ck-btn { border-color: var(--brand2, var(--brand2, #c5a356)); color: var(--brand2, var(--brand2, #c5a356)); } [data-theme="dark"] .ck-btn:hover { background: rgba(197,163,86,.1); color: var(--brand2, var(--brand2, #c5a356)) !important; } [data-theme="dark"] .ck-btn.active, [data-theme="dark"] .ck-btn.filled { background: var(--brand2, var(--brand2, #c5a356)); color: #1a1a2e !important; border-color: var(--brand2, var(--brand2, #c5a356)); } [data-theme="dark"] .ck-btn.secondary { border-color: var(--line, #2a2a4e); color: var(--text, #e9eef9) !important; } [data-theme="dark"] .ck-btn.secondary:hover { border-color: var(--brand2, var(--brand2, #c5a356)); color: var(--brand2, var(--brand2, #c5a356)) !important; } /* Key dates card */ [data-theme="dark"] .date-grid .series-tile { color: var(--text, #e9eef9); } /* Read more button */ [data-theme="dark"] .ck-readmore-btn { color: var(--text, #e9eef9); border-color: var(--line, #2a2a4e); } [data-theme="dark"] .ck-readmore-btn:hover { border-color: var(--brand2, var(--brand2, #c5a356)); color: var(--brand2, var(--brand2, #c5a356)); } /* ── Coin detail page dark mode ────────────────────────── */ /* Stat pills (collectors own / want lists) */ [data-theme="dark"] .ck-stat-pill { background: var(--surface, #1a1a30) !important; border: 1px solid color-mix(in srgb, var(--brand2, var(--brand2, #c5a356)) 25%, transparent); } [data-theme="dark"] .ck-stat-num { color: var(--brand2, var(--brand2, #c5a356)) !important; } [data-theme="dark"] .ck-stat-num.want { color: var(--brand2, var(--brand2, #c5a356)) !important; } /* Collection action buttons */ [data-theme="dark"] .col-btn { border-color: var(--line, #2a2a4e); color: var(--text, #e9eef9); background: transparent; } [data-theme="dark"] .col-btn:hover { border-color: var(--brand2, var(--brand2, #c5a356)); color: var(--brand2, var(--brand2, #c5a356)); } [data-theme="dark"] .col-btn.col-owned { border-color: var(--brand2, var(--brand2, #c5a356)); color: var(--brand2, var(--brand2, #c5a356)); } [data-theme="dark"] .col-btn.col-owned.active { background: var(--brand2, var(--brand2, #c5a356)); color: #1a1a2e; } [data-theme="dark"] .col-btn.col-want { border-color: var(--brand2, var(--brand2, #c5a356)); color: var(--brand2, var(--brand2, #c5a356)); } [data-theme="dark"] .col-btn.col-want.active { background: var(--brand2, var(--brand2, #c5a356)); color: #1a1a2e; } /* Share buttons */ [data-theme="dark"] .ck-share-btn { border-color: var(--line, #2a2a4e); color: var(--muted, #a0a0b8); } /* eBay button */ [data-theme="dark"] a[href*="ebay.com/sch"] { border-color: var(--brand2, var(--brand2, #c5a356)) !important; color: var(--brand2, var(--brand2, #c5a356)) !important; background: rgba(197,163,86,.06) !important; } /* Badge (History, Educational) */ [data-theme="dark"] .badge { background: var(--surface, #1a1a30); border-color: var(--line, #2a2a4e); color: var(--muted, #a0a0b8); } /* Price table */ [data-theme="dark"] .table-wrap { background: var(--card, #151528); border-color: color-mix(in srgb, var(--brand2, var(--brand2, #c5a356)) 25%, transparent); } [data-theme="dark"] .price-table th { background: var(--brand2, var(--brand2, #c5a356)); color: #1a1a2e; } [data-theme="dark"] .price-table td { border-top-color: var(--line, #2a2a4e); } /* Toast notification */ [data-theme="dark"] .ck-toast { background: var(--brand2, var(--brand2, #c5a356)); color: #1a1a2e; } /* View collection link */ [data-theme="dark"] .col-login-hint a { color: var(--brand2, var(--brand2, #c5a356)); } /* Coin gallery panels */ [data-theme="dark"] .coin-panel { background: var(--card, #151528); } /* ── Desktop dropdown menu ─────────────────────────────── */ [data-theme="dark"] .nav-primary ul.mod-menu > li > ul.mod-menu__sub { background: var(--card, #151528) !important; border-color: var(--line, #2a2a4e) !important; box-shadow: 0 8px 24px rgba(0,0,0,.4) !important; } [data-theme="dark"] .nav-primary ul.mod-menu > li > ul.mod-menu__sub > li > a, [data-theme="dark"] header.site-header .navlinks ul.mod-menu__sub a { color: var(--text, #e9eef9) !important; background: transparent !important; } [data-theme="dark"] .nav-primary ul.mod-menu > li > ul.mod-menu__sub > li > a:hover, [data-theme="dark"] header.site-header .navlinks ul.mod-menu__sub a:hover { background: var(--surface, #1a1a30) !important; color: var(--brand2, var(--brand2, #c5a356)) !important; } /* ── Mobile slide-out menu ─────────────────────────────── */ [data-theme="dark"] #navMore { background: var(--card, #151528) !important; color: var(--text, #e9eef9) !important; box-shadow: -4px 0 24px rgba(0,0,0,.5) !important; } [data-theme="dark"] #navMore * { color: var(--text, #e9eef9) !important; } [data-theme="dark"] #navMore svg { color: var(--muted, #a0a0b8) !important; } [data-theme="dark"] .nav-more-close { color: var(--muted, #a0a0b8) !important; border-bottom-color: var(--line, #2a2a4e) !important; } [data-theme="dark"] .nav-more-avatar { background: var(--surface, #1a1a30) !important; } [data-theme="dark"] .nav-more-name { color: var(--text, #e9eef9) !important; } [data-theme="dark"] .nav-more-hint, [data-theme="dark"] .nav-more-sub-link { color: var(--muted, #a0a0b8) !important; } [data-theme="dark"] .nav-more-label { color: var(--muted, #a0a0b8) !important; } [data-theme="dark"] .nav-more-link { color: var(--text, #e9eef9) !important; border-bottom-color: var(--line, #2a2a4e) !important; } [data-theme="dark"] .nav-more-link:hover { background: var(--surface, #1a1a30) !important; } [data-theme="dark"] .nav-more-link .nm-title { color: var(--text, #e9eef9) !important; } [data-theme="dark"] .nav-more-link .nm-sub { color: var(--muted, #a0a0b8) !important; } [data-theme="dark"] .nav-more-section { border-bottom-color: var(--line, #2a2a4e); } /* Mobile nav login button */ [data-theme="dark"] .nav-more-link[href*="login"], [data-theme="dark"] .nav-more-link.nm-login { background: var(--brand2, var(--brand2, #c5a356)) !important; color: #1a1a2e !important; } /* Mobile overlay */ [data-theme="dark"] #navOverlay { background: rgba(0,0,0,.6) !important; } /* ── Public showcase badge tooltips ─────────────────────── */ [data-theme="dark"] .up-achievement-tip { background: var(--card, #151528); border-color: var(--line, #2a2a4e); box-shadow: 0 6px 20px rgba(0,0,0,.4); } [data-theme="dark"] .up-achievement-tip::after { border-top-color: var(--card, #151528); } [data-theme="dark"] .up-achievement-tip-title { color: var(--brand2, var(--brand2, #c5a356)); } [data-theme="dark"] .up-achievement-tip-desc { color: var(--muted, #a0a0b8); } /* ── Profile page quick links ──────────────────────────── */ [data-theme="dark"] .ck-profile-link { border-bottom-color: var(--line, #2a2a4e) !important; } [data-theme="dark"] .ck-profile-link:hover { background: var(--surface, #1a1a30) !important; } [data-theme="dark"] .ck-profile-link .pl-icon { background: rgba(197,163,86,.1) !important; } [data-theme="dark"] .ck-profile-link .pl-arrow { color: var(--muted, #a0a0b8) !important; } /* ── Driver.js tour popover ─────────────────────────────── */ [data-theme="dark"] .ck-tour-popover { background: var(--card, #151528) !important; border-color: var(--line, #2a2a4e) !important; box-shadow: 0 12px 40px rgba(0,0,0,.5) !important; } [data-theme="dark"] .ck-tour-popover .driver-popover-title { color: var(--text, #e9eef9) !important; } [data-theme="dark"] .ck-tour-popover .driver-popover-description { color: var(--muted, #a0a0b8) !important; } [data-theme="dark"] .ck-tour-popover .driver-popover-footer { border-top-color: var(--line, #2a2a4e) !important; } [data-theme="dark"] .ck-tour-popover .driver-popover-prev-btn { background: var(--surface, #1a1a30) !important; color: var(--text, #e9eef9) !important; } [data-theme="dark"] .ck-tour-popover .driver-popover-prev-btn:hover { background: var(--line, #2a2a4e) !important; } [data-theme="dark"] .ck-tour-popover .driver-popover-arrow { border-color: var(--card, #151528) !important; } [data-theme="dark"] .driver-popover-arrow-side-top .driver-popover-arrow { border-bottom-color: var(--card, #151528) !important; } [data-theme="dark"] .driver-popover-arrow-side-bottom .driver-popover-arrow { border-top-color: var(--card, #151528) !important; } [data-theme="dark"] .driver-popover-arrow-side-left .driver-popover-arrow { border-right-color: var(--card, #151528) !important; } [data-theme="dark"] .driver-popover-arrow-side-right .driver-popover-arrow { border-left-color: var(--card, #151528) !important; } /* World coins map tooltip */ [data-theme="dark"] .wc-map-tooltip { background: var(--card, #151528) !important; border-color: var(--line, #2a2a4e) !important; color: var(--text, #e9eef9) !important; box-shadow: 0 8px 24px rgba(0,0,0,.4) !important; } [data-theme="dark"] .wc-map-tooltip .wc-tt-series { color: var(--muted, #a0a0b8) !important; } /* ── Search overlay ────────────────────────────────────── */ [data-theme="dark"] .ck-search-wrap { background: var(--card, #151528); border: 1px solid var(--line, #2a2a4e); } [data-theme="dark"] .ck-search-bar { border-bottom-color: var(--line, #2a2a4e); } [data-theme="dark"] .ck-sr-item { border-bottom-color: var(--line, #2a2a4e); } [data-theme="dark"] .ck-sr-world { background: rgba(16,100,80,.2); color: #4dd0e1; } [data-theme="dark"] .ck-sr-page { background: rgba(160,160,184,.12); color: var(--muted, #a0a0b8); } /* ── Grading Guide page — dark mode ──────────────────── */ [data-theme="dark"] .ck-page-intro { color: #a0a8b8 !important; } [data-theme="dark"] .ck-tab-content h2 { color: #fff !important; } [data-theme="dark"] .ck-tab-content h3 { color: var(--brand2, var(--brand2, #c5a356)) !important; border-bottom-color: rgba(197, 163, 86, 0.25) !important; } [data-theme="dark"] .ck-tab-content h4 { color: #e0e4ec !important; } [data-theme="dark"] .ck-tab-content p { color: #d0d5e0 !important; } [data-theme="dark"] .ck-tab-content strong { color: #fff !important; } [data-theme="dark"] .ck-tab-content em { color: #d0d5e0 !important; } [data-theme="dark"] .ck-grade-block { background: rgba(255, 255, 255, 0.04) !important; border-left-color: var(--brand2, var(--brand2, #c5a356)) !important; } [data-theme="dark"] .ck-grade-block h4 { color: var(--brand2, var(--brand2, #c5a356)) !important; } [data-theme="dark"] .ck-grade-block p { color: #c8cdd8 !important; } /* ── Glossary page — dark mode ───────────────────────── */ [data-theme="dark"] .ck-glossary-search { background: var(--surface, #1a1a30) !important; } [data-theme="dark"] .ck-glossary-search input { background: var(--card, #151528) !important; border-color: var(--line, #2a2a4e) !important; color: var(--text, #e9eef9) !important; } [data-theme="dark"] .ck-glossary-count { color: var(--muted, #a0a0b8) !important; } [data-theme="dark"] .ck-glossary h2 { color: #fff !important; } [data-theme="dark"] .gl-entry h3 { color: var(--brand2, var(--brand2, #c5a356)) !important; } [data-theme="dark"] .gl-entry p { color: #d0d5e0 !important; } [data-theme="dark"] .ck-glossary-pager button { background: var(--card, #151528) !important; border-color: var(--line, #2a2a4e) !important; color: var(--text, #e9eef9) !important; } [data-theme="dark"] .ck-glossary-pager button:hover { background: var(--surface, #1a1a30) !important; border-color: var(--brand2, var(--brand2, #c5a356)) !important; } [data-theme="dark"] .ck-glossary-pager button.active { background: var(--brand2, var(--brand2, #c5a356)) !important; color: #1a1a2e !important; border-color: var(--brand2, var(--brand2, #c5a356)) !important; } [data-theme="dark"] .ck-glossary-pager .pager-info { color: var(--muted, #a0a0b8) !important; } /* ── Active tabs/pills — dark text on gold bg ────────── */ /* Browse page denom tabs */ [data-theme="dark"] .denom-tab { color: var(--text, #e9eef9) !important; border-color: var(--line, #2a2a4e) !important; } [data-theme="dark"] .denom-tab.active { background: var(--brand2, var(--brand2, #c5a356)) !important; color: #1a1a2e !important; border-color: var(--brand2, var(--brand2, #c5a356)) !important; } [data-theme="dark"] .denom-tab:hover:not(.active) { background: var(--surface, #1a1a30) !important; color: var(--brand2, var(--brand2, #c5a356)) !important; border-color: var(--brand2, var(--brand2, #c5a356)) !important; } /* Collection page segment tabs (U.S. Coins / World Coins) */ [data-theme="dark"] a.col-seg { color: var(--text, #e9eef9) !important; border-color: var(--line, #2a2a4e) !important; } [data-theme="dark"] a.col-seg.active { background: var(--brand2, var(--brand2, #c5a356)) !important; color: #1a1a2e !important; border-color: var(--brand2, var(--brand2, #c5a356)) !important; } [data-theme="dark"] a.col-seg:hover:not(.active) { border-color: var(--brand2, var(--brand2, #c5a356)) !important; color: var(--brand2, var(--brand2, #c5a356)) !important; } /* Collection filter tabs (All denominations, Half Cents...) */ [data-theme="dark"] .col-filter-tab { color: var(--text, #e9eef9) !important; border-color: var(--line, #2a2a4e) !important; } [data-theme="dark"] .col-filter-tab.active { background: var(--brand2, var(--brand2, #c5a356)) !important; color: #1a1a2e !important; border-color: var(--brand2, var(--brand2, #c5a356)) !important; } [data-theme="dark"] .col-filter-tab:hover:not(.active) { background: var(--surface, #1a1a30) !important; color: var(--brand2, var(--brand2, #c5a356)) !important; border-color: var(--brand2, var(--brand2, #c5a356)) !important; } /* Collection status tabs (Owned / Want / All) */ [data-theme="dark"] .col-status-tab { color: var(--text, #e9eef9) !important; border-color: var(--line, #2a2a4e) !important; } [data-theme="dark"] .col-status-tab.active { background: var(--brand2, var(--brand2, #c5a356)) !important; color: #1a1a2e !important; border-color: var(--brand2, var(--brand2, #c5a356)) !important; } /* Collection tracker buttons (Set Completion Tracker, Roll Hunting) */ [data-theme="dark"] .col-tracker-btn { color: var(--text, #e9eef9) !important; border-color: var(--line, #2a2a4e) !important; } [data-theme="dark"] .col-tracker-btn[style*="background:transparent"], [data-theme="dark"] .col-tracker-btn[style*="background: transparent"] { background: transparent !important; } /* Collection explainer box */ [data-theme="dark"] .col-explainer { background: var(--card, #151528) !important; border-color: color-mix(in srgb, var(--brand2, var(--brand2, #c5a356)) 25%, transparent) !important; color: #d0d5e0 !important; } [data-theme="dark"] .col-explainer strong { color: #fff !important; } [data-theme="dark"] .col-ex-pill { border-color: var(--brand2, var(--brand2, #c5a356)) !important; color: var(--brand2, var(--brand2, #c5a356)) !important; } [data-theme="dark"] .col-ex-pill.col-ex-want { border-color: var(--brand2, var(--brand2, #c5a356)) !important; color: var(--brand2, var(--brand2, #c5a356)) !important; } /* Collection export buttons (CSV, PDF, Album) */ [data-theme="dark"] .col-export-btn { border-color: var(--line, #2a2a4e) !important; color: var(--text, #e9eef9) !important; } [data-theme="dark"] .col-export-btn:hover { border-color: var(--brand2, var(--brand2, #c5a356)) !important; color: var(--brand2, var(--brand2, #c5a356)) !important; } /* ── Tracker page — dark mode ────────────────────────── */ /* Mode toggle (Basic set / Complete set / Type Set) */ [data-theme="dark"] .tk-mode { border-color: var(--line, #2a2a4e) !important; } [data-theme="dark"] .tk-mode a { color: var(--muted, #a0a0b8) !important; } [data-theme="dark"] .tk-mode a.active { background: var(--brand2, var(--brand2, #c5a356)) !important; color: #1a1a2e !important; } [data-theme="dark"] .tk-mode a:not(.active):hover { background: var(--surface, #1a1a30) !important; color: var(--text, #e9eef9) !important; } /* Filter pills (All series, Tracked, Complete...) */ [data-theme="dark"] .tk-filter { color: var(--text, #e9eef9) !important; border-color: var(--line, #2a2a4e) !important; } [data-theme="dark"] .tk-filter.active { background: var(--brand2, var(--brand2, #c5a356)) !important; color: #1a1a2e !important; border-color: var(--brand2, var(--brand2, #c5a356)) !important; } [data-theme="dark"] .tk-filter:hover:not(.active) { background: var(--surface, #1a1a30) !important; color: var(--brand2, var(--brand2, #c5a356)) !important; border-color: var(--brand2, var(--brand2, #c5a356)) !important; } /* View toggle (list/album) */ [data-theme="dark"] .tk-view-toggle button { color: var(--muted, #a0a0b8) !important; border-color: var(--line, #2a2a4e) !important; } [data-theme="dark"] .tk-view-toggle button.active { background: var(--brand2, var(--brand2, #c5a356)) !important; color: #1a1a2e !important; } /* Show hidden series button */ [data-theme="dark"] .tk-show-hidden-btn { border-color: var(--line, #2a2a4e) !important; color: var(--text, #e9eef9) !important; } [data-theme="dark"] .tk-show-hidden-btn.active { background: var(--brand2, var(--brand2, #c5a356)) !important; color: #1a1a2e !important; border-color: var(--brand2, var(--brand2, #c5a356)) !important; } /* Star + Eye icon buttons — visible on dark bg */ [data-theme="dark"] .tk-track { color: var(--muted, #a0a0b8) !important; } [data-theme="dark"] .tk-track:hover { background: rgba(197, 163, 86, 0.08) !important; } [data-theme="dark"] .tk-track .tk-star-on { color: #eab308 !important; } /* Tracker stat cards */ [data-theme="dark"] .tk-stat { background: var(--surface, #1a1a30) !important; } [data-theme="dark"] .tk-stat-num { color: var(--brand2, var(--brand2, #c5a356)) !important; } /* Tracker series rows */ [data-theme="dark"] .tk-series { border-bottom-color: var(--line, #2a2a4e) !important; } [data-theme="dark"] .tk-tile { border-color: var(--line, #2a2a4e) !important; background: var(--surface, #1a1a30) !important; } [data-theme="dark"] .tk-tile-ph { background: var(--surface, #1a1a30) !important; border-color: var(--line, #2a2a4e) !important; } /* Tracker coin checklist */ [data-theme="dark"] .tk-coin-item { border-bottom-color: var(--line, #2a2a4e) !important; } [data-theme="dark"] .tk-type-pick { background: var(--card, #151528) !important; border-color: var(--line, #2a2a4e) !important; color: var(--text, #e9eef9) !important; } /* Tracker completed badge */ [data-theme="dark"] .tk-complete-badge { background: rgba(22, 163, 74, 0.15) !important; color: #4ade80 !important; } /* Tracker rarity labels */ [data-theme="dark"] .tk-coin-rarity-key { background: rgba(239, 68, 80, 0.12) !important; color: #ef5350 !important; } [data-theme="dark"] .tk-coin-rarity-semi { background: rgba(197, 163, 86, 0.12) !important; color: var(--brand2, var(--brand2, #c5a356)) !important; } [data-theme="dark"] .tk-coin-rarity-var { background: rgba(124, 157, 247, 0.12) !important; color: #7c9df7 !important; } /* Tracker progress bar track */ [data-theme="dark"] .tk-bar, [data-theme="dark"] .tk-overall-bar { background: var(--line, #2a2a4e) !important; } /* Album hide button */ [data-theme="dark"] .tk-album-hide { color: var(--muted, #a0a0b8) !important; } /* ── Roll Hunting page — dark mode ───────────────────── */ [data-theme="dark"] .rh-btn { background: var(--brand2, var(--brand2, #c5a356)) !important; color: #1a1a2e !important; } [data-theme="dark"] .rh-btn-outline { background: transparent !important; border-color: var(--line, #2a2a4e) !important; color: var(--text, #e9eef9) !important; } [data-theme="dark"] .rh-btn-outline:hover { border-color: var(--brand2, var(--brand2, #c5a356)) !important; color: var(--brand2, var(--brand2, #c5a356)) !important; } [data-theme="dark"] .rh-btn-outline[style*="color:#dc2626"], [data-theme="dark"] .rh-btn-outline[style*="color: #dc2626"] { color: #ef5350 !important; border-color: rgba(239, 83, 80, 0.35) !important; } [data-theme="dark"] .rh-export-btn { border-color: var(--line, #2a2a4e) !important; color: var(--text, #e9eef9) !important; } [data-theme="dark"] .rh-export-btn:hover { border-color: var(--brand2, var(--brand2, #c5a356)) !important; color: var(--brand2, var(--brand2, #c5a356)) !important; } /* ── Photo submission CTA + contact terms — dark mode ── */ [data-theme="dark"] .ck-photo-cta { border-top-color: var(--line, #2a2a4e) !important; color: var(--muted, #a0a0b8) !important; } [data-theme="dark"] .ck-cf-photo-terms { background: rgba(197, 163, 86, 0.06) !important; border-color: rgba(197, 163, 86, 0.15) !important; } [data-theme="dark"] .ck-cf-photo-terms strong { color: var(--text, #e9eef9) !important; } [data-theme="dark"] .ck-cf-photo-terms p { color: var(--muted, #a0a0b8) !important; } [data-theme="dark"] .ck-cf-success { background: rgba(22, 163, 74, 0.1) !important; border-color: rgba(74, 222, 128, 0.25) !important; color: #4ade80 !important; } [data-theme="dark"] .ck-cf-error { background: rgba(239, 68, 68, 0.1) !important; border-color: rgba(239, 68, 68, 0.25) !important; color: #ef5350 !important; } [data-theme="dark"] .ck-cf-submit { background: var(--brand2, var(--brand2, #c5a356)) !important; color: #1a1a2e !important; } /* ── System message alerts — dark mode ───────────────── */ [data-theme="dark"] .alert-info, [data-theme="dark"] joomla-alert[type="info"], [data-theme="dark"] joomla-alert[type="notice"] { background: rgba(122, 162, 255, 0.1) !important; border-color: rgba(122, 162, 255, 0.25) !important; color: #93b5ff !important; } [data-theme="dark"] .alert-success, [data-theme="dark"] joomla-alert[type="success"], [data-theme="dark"] joomla-alert[type="message"] { background: rgba(22, 163, 74, 0.1) !important; border-color: rgba(74, 222, 128, 0.25) !important; color: #4ade80 !important; } [data-theme="dark"] .alert-warning, [data-theme="dark"] joomla-alert[type="warning"] { background: rgba(197, 163, 86, 0.1) !important; border-color: rgba(197, 163, 86, 0.25) !important; color: var(--brand2, var(--brand2, #c5a356)) !important; } [data-theme="dark"] .alert-danger, [data-theme="dark"] .alert-error, [data-theme="dark"] joomla-alert[type="error"], [data-theme="dark"] joomla-alert[type="danger"] { background: rgba(239, 68, 68, 0.1) !important; border-color: rgba(239, 68, 68, 0.25) !important; color: #ef5350 !important; } /* ── Community Leaderboard (dark) ──────────────── */ [data-theme="dark"] .lb-tab { border-color: rgba(255,255,255,.15) !important; color: #aaa !important; } [data-theme="dark"] .lb-tab:hover { border-color: var(--brand2) !important; color: var(--brand2) !important; } [data-theme="dark"] .lb-tab.active { background: var(--brand2) !important; color: #1a1a2e !important; border-color: var(--brand2) !important; } [data-theme="dark"] .lb-podium-name { color: #e0e0e0 !important; } [data-theme="dark"] .lb-badge-gold { background: rgba(197,163,86,.18) !important; color: var(--brand2, #c5a356) !important; } [data-theme="dark"] .lb-badge-silver { background: rgba(180,178,169,.15) !important; color: #b4b2a9 !important; } [data-theme="dark"] .lb-badge-bronze { background: rgba(216,90,48,.15) !important; color: #f0997b !important; } [data-theme="dark"] .lb-avatar-init { background: rgba(255,255,255,.08) !important; color: #aaa !important; } [data-theme="dark"] .lb-row { border-color: rgba(255,255,255,.06) !important; } [data-theme="dark"] .lb-row:hover { background: rgba(255,255,255,.04) !important; } [data-theme="dark"] .lb-row-you { background: rgba(197,163,86,.08) !important; border-left-color: var(--brand2) !important; } [data-theme="dark"] .lb-row-you:hover { background: rgba(197,163,86,.12) !important; } [data-theme="dark"] .lb-row-name { color: #e0e0e0 !important; } [data-theme="dark"] .lb-row-num { color: #e0e0e0 !important; } [data-theme="dark"] .lb-you-tag { background: rgba(197,163,86,.15) !important; color: var(--brand2) !important; } [data-theme="dark"] .lb-cta { border-color: rgba(255,255,255,.06) !important; } [data-theme="dark"] .lb-cta a { color: var(--brand2) !important; } /* ── World Series Page (dark) ──────────────────── */ [data-theme="dark"] .wcs-table thead { background: rgba(255,255,255,.04) !important; } [data-theme="dark"] .wcs-row { border-color: rgba(255,255,255,.06) !important; } [data-theme="dark"] .wcs-row:hover { background: rgba(255,255,255,.04) !important; } [data-theme="dark"] .wcs-coin-link { color: var(--brand2) !important; } [data-theme="dark"] .wcs-coin-link:hover { color: #e0d0a0 !important; } [data-theme="dark"] .wcs-pill { border-color: rgba(255,255,255,.15) !important; color: #aaa !important; } [data-theme="dark"] .wcs-pill:hover { border-color: var(--brand2) !important; color: var(--brand2) !important; } [data-theme="dark"] .wcs-pill-owned.active { background: var(--brand2) !important; color: #1a1a2e !important; border-color: var(--brand2) !important; } [data-theme="dark"] .wcs-pill-want.active { background: var(--brand2, #c5a356) !important; color: #1a1a2e !important; border-color: var(--brand2, #c5a356) !important; } [data-theme="dark"] .wcs-rarity-badge.rarity-key { background: rgba(226,75,74,.15) !important; color: #f09595 !important; } [data-theme="dark"] .wcs-rarity-badge.rarity-semi { background: rgba(239,159,39,.12) !important; color: #FAC775 !important; } [data-theme="dark"] .wcs-rarity-badge.rarity-var { background: rgba(127,119,221,.12) !important; color: #AFA9EC !important; } /* ── World Collection panel (dark) ─────────────── */ [data-theme="dark"] .wc-search-box { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; } [data-theme="dark"] .wc-search-input { color: #e0e0e0 !important; } [data-theme="dark"] .wc-status-select { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; color: #e0e0e0 !important; } [data-theme="dark"] .wc-country-block { border-color: rgba(255,255,255,.1) !important; } [data-theme="dark"] .wc-country-block:hover { border-color: var(--brand2) !important; } [data-theme="dark"] .wc-country-head.open { background: rgba(255,255,255,.03) !important; } [data-theme="dark"] .wc-country-info strong { color: #e0e0e0 !important; } [data-theme="dark"] .wc-denom-label { color: #aaa !important; border-color: rgba(255,255,255,.06) !important; } [data-theme="dark"] .wc-page-btn { border-color: rgba(255,255,255,.12) !important; color: #aaa !important; } [data-theme="dark"] .wc-page-btn:hover { border-color: var(--brand2) !important; color: var(--brand2) !important; } [data-theme="dark"] .wc-page-btn.active { background: var(--brand2) !important; color: #1a1a2e !important; border-color: var(--brand2) !important; } /* ── Dark-mode readability fixes (2026-04-22) ───────────────────── Targets issues reported by users where component-level rules in warmstone.css had light-mode assumptions baked in (hardcoded navy text, white backgrounds on .on states, etc.) and the existing dark overrides didn't cover every selector. */ /* Album — U.S./World + Tan/Blue segmented toggles warmstone.css:2009 gives .ck-album-head .ck-seg a.on a white bg + navy text. In dark mode, white bg on a dark page is jarring and the existing `.ck-seg button` dark rule (warmstone.css:4175) only covers