/* ============================================================================ JA Good — Dark Mode (vega standard, T3) ---------------------------------------------------------------------------- Light mode is the ORIGINAL design and is NOT modified. Every rule below is scoped under html[data-theme="dark"]. Dark MIRRORS light's relationships — it does not add contrast/borders light lacks. This template ships ZERO CSS custom properties (LESS -> literal hex), so fixes are literal, specificity- matched overrides; our own --dm-* palette keeps every value in one place. The only rule visible in BOTH modes is the toggle button itself. ============================================================================ */ /* ---- Toggle button (visible in both modes) -------------------------------- */ .ja-theme-toggle { -webkit-appearance: none; appearance: none; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 4px; padding: 0; border: 0; border-radius: 50%; background: transparent; /* icon colour MIRRORS the menu text of the current header style. Light headers with dark nav text (news/simple/time) -> dark icon; the game style ships a DARK header with WHITE nav text -> white icon (overridden below). Dark mode -> --dm-text, the uniform nav colour. */ color: #1a1a1a; cursor: pointer; vertical-align: middle; transition: background-color .2s ease, color .2s ease; } .ja-theme-toggle:hover { background: rgba(0,0,0,.06); color: #000; } .ja-theme-toggle:focus { outline: none; } .ja-theme-toggle svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: opacity .2s ease, transform .25s ease; } .ja-theme-toggle__moon { opacity: 1; } .ja-theme-toggle__sun { opacity: 0; transform: translate(-50%,-50%) rotate(-90deg); } /* place it on the header-right rail, after the search/hamburger row floats */ .navbar-right-wrap .ja-theme-toggle { float: right; margin-top: 0; } /* GAME style ships a dark header even in LIGHT mode -> white nav text, so the toggle must be white too (was an invisible dark icon on the black header). */ html.itemid-125 .ja-theme-toggle { color: #fff; } html.itemid-125 .ja-theme-toggle:hover { background: rgba(255,255,255,.10); color: #fff; } /* In dark mode: swap icons + recolour to the uniform dark nav text colour */ html[data-theme="dark"] .ja-theme-toggle { color: var(--dm-text); } html[data-theme="dark"] .ja-theme-toggle:hover { background: rgba(255,255,255,.10); color: #fff; } /* keep the game dark-header toggle on the dark-mode colour (beat the itemid rule) */ html[data-theme="dark"].itemid-125 .ja-theme-toggle { color: var(--dm-text); } html[data-theme="dark"].itemid-125 .ja-theme-toggle:hover { color: #fff; } html[data-theme="dark"] .ja-theme-toggle__moon { opacity: 0; transform: translate(-50%,-50%) rotate(90deg); } html[data-theme="dark"] .ja-theme-toggle__sun { opacity: 1; transform: translate(-50%,-50%) rotate(0); } /* =========================================================================== DARK PALETTE + scope =========================================================================== */ html[data-theme="dark"] { --dm-bg: #141414; /* page */ --dm-band: #1a1a1a; /* subtle section band */ --dm-surface: #1e1e1e; /* cards / panels */ --dm-surface-2: #262626; /* inputs / elevated */ --dm-border: #2e2e2e; /* dividers / frames */ --dm-field-bd: #4a4a4a; /* form-field outlines */ --dm-text: #c9c9c9; /* body copy */ --dm-muted: #8f8f8f; /* meta / secondary */ --dm-heading: #f1f1f1; /* headings */ --dm-accent: #3061ff; /* brand blue (kept) */ --dm-link: #6f93ff; /* lifted accent for text-links on dark */ color-scheme: dark; } /* PER-HOME ACCENT — each home STYLE has its own brand colour in light (identified by the menu Itemid class on ): news(101)/time(127)=#3061ff blue [default], game(125)=#fa4b2a red-orange, simple(126)=#ff3333 red. The dark CSS expresses every accent through --dm-accent / --dm-link, so re-pointing the two vars per home makes ALL accent text/links/hovers/pills mirror the SAME hue as light instead of the default blue. (--dm-link = accent itself for the reds; they read fine on dark, no lift needed.) */ html[data-theme="dark"].itemid-125 { --dm-accent: #fa4b2a; --dm-link: #ff7a5c; } html[data-theme="dark"].itemid-126 { --dm-accent: #ff3333; --dm-link: #ff6b6b; } /* ---- Page surfaces -------------------------------------------------------- */ html[data-theme="dark"] body { background: var(--dm-bg); color: var(--dm-text); } html[data-theme="dark"] .t3-wrapper { background: var(--dm-bg); } html[data-theme="dark"] .t3-mainbody, html[data-theme="dark"] .t3-content, html[data-theme="dark"] .t3-sidebar, html[data-theme="dark"] #t3-content, html[data-theme="dark"] .t3-mast, html[data-theme="dark"] .t3-spotlight, html[data-theme="dark"] section { background-color: transparent; } /* ---- Headings + text ------------------------------------------------------ */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6, html[data-theme="dark"] .page-header h1, html[data-theme="dark"] .page-header h2 { color: var(--dm-heading); } html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] dd, html[data-theme="dark"] dt, html[data-theme="dark"] td, html[data-theme="dark"] th { color: var(--dm-text); } /* prose links (not buttons / not nav / not on-image titles) */ html[data-theme="dark"] .t3-content a:not(.btn), html[data-theme="dark"] .article-content a:not(.btn), html[data-theme="dark"] .com_content article a:not(.btn) { color: var(--dm-link); } html[data-theme="dark"] .t3-content a:not(.btn):hover { color: color-mix(in srgb, var(--dm-link), #fff 18%); } /* =========================================================================== TOPBAR — already near-black in light; keep dark, align border =========================================================================== */ html[data-theme="dark"] .t3-topbar { background: #0d0d0d; border-color: var(--dm-border); } html[data-theme="dark"] .t3-topbar a { color: #b9b9b9; } html[data-theme="dark"] .t3-topbar a:hover { color: #fff; } /* =========================================================================== HEADER + LOGO =========================================================================== */ html[data-theme="dark"] #t3-header, html[data-theme="dark"] .t3-header { background: var(--dm-bg); border-bottom-color: var(--dm-border); box-shadow: none; } html[data-theme="dark"] #t3-header .logo span, html[data-theme="dark"] .t3-header .logo span { color: var(--dm-heading); } html[data-theme="dark"] .site-slogan { color: var(--dm-muted); } /* logos are monochrome text PNGs (black or white) on transparent -> force white */ html[data-theme="dark"] .logo-img, html[data-theme="dark"] .logo-img-sm { filter: brightness(0) invert(1); } /* =========================================================================== MAIN NAV / MEGA MENU / DROPDOWNS =========================================================================== */ html[data-theme="dark"] #t3-mainnav, html[data-theme="dark"] .t3-mainnav, html[data-theme="dark"] .navbar-default { background: var(--dm-bg); border-color: var(--dm-border); } html[data-theme="dark"] .t3-mainnav .nav > li > a, html[data-theme="dark"] .navbar-default .navbar-nav > li > a, html[data-theme="dark"] .t3-megamenu .nav > li > a { color: var(--dm-text); } html[data-theme="dark"] .t3-mainnav .nav > li > a:hover, html[data-theme="dark"] .t3-mainnav .nav > li > a:focus, html[data-theme="dark"] .t3-mainnav .nav > .active > a, html[data-theme="dark"] .t3-mainnav .nav > li.active > a { color: var(--dm-accent); } /* dropdown / megamenu panels */ html[data-theme="dark"] .t3-megamenu .dropdown-menu, html[data-theme="dark"] .t3-megamenu .mega-dropdown-menu, html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .t3-megamenu .mega-group .dropdown-menu { background: var(--dm-surface); border-color: var(--dm-border); box-shadow: 0 8px 24px rgba(0,0,0,.5); } html[data-theme="dark"] .t3-megamenu .dropdown-menu a, html[data-theme="dark"] .t3-megamenu .mega-nav > li > a, html[data-theme="dark"] .dropdown-menu > li > a, html[data-theme="dark"] .t3-megamenu .mega-col-nav .mega-nav > li > a { color: var(--dm-text); } html[data-theme="dark"] .t3-megamenu .dropdown-menu a:hover, html[data-theme="dark"] .dropdown-menu > li > a:hover, html[data-theme="dark"] .t3-megamenu .mega-nav > li > a:hover { color: var(--dm-accent); background: rgba(255,255,255,.04); } /* mega column headings + group labels (.dropdown-header.mega-group-title) */ html[data-theme="dark"] .t3-megamenu .mega-group-title, html[data-theme="dark"] .t3-megamenu .mega-col-title, html[data-theme="dark"] .t3-megamenu .dropdown-header, html[data-theme="dark"] .t3-megamenu .t3-module .module-title, html[data-theme="dark"] .t3-megamenu .t3-module, html[data-theme="dark"] .mega-group-title > .mega-group-ct { color: var(--dm-heading) !important; background: transparent; } /* caret */ html[data-theme="dark"] .t3-megamenu .caret, html[data-theme="dark"] .caret { border-top-color: var(--dm-text); } /* =========================================================================== OFF-CANVAS =========================================================================== */ html[data-theme="dark"] .t3-off-canvas, html[data-theme="dark"] #t3-off-canvas, html[data-theme="dark"] .off-canvas-menu { background: var(--dm-surface); color: var(--dm-text); } html[data-theme="dark"] .t3-off-canvas .t3-content { background: var(--dm-surface); } html[data-theme="dark"] .t3-off-canvas a, html[data-theme="dark"] .t3-off-canvas .nav > li > a { color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] .t3-off-canvas a:hover, html[data-theme="dark"] .t3-off-canvas .nav > li > a:hover { color: var(--dm-accent); background: rgba(255,255,255,.04); } html[data-theme="dark"] .t3-off-canvas .off-canvas-toggle, html[data-theme="dark"] .off-canvas-toggle { color: var(--dm-text); } html[data-theme="dark"] .navbar-toggle { color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] .navbar-toggle .fa { color: var(--dm-text); } /* =========================================================================== ARTICLE CARDS / BLOG ITEMS / META / LABELS =========================================================================== */ html[data-theme="dark"] .item, html[data-theme="dark"] .blog-item, html[data-theme="dark"] .items-row .item, html[data-theme="dark"] .item-content, html[data-theme="dark"] article.item { background-color: transparent; border-color: var(--dm-border); } /* Article/item titles. The template colours these via deep selector chains (e.g. .view-category .items-leading .article-featured .article-content .article-title = (0,5,1)) and the inherits — so beat them with !important. On-IMAGE titles that are white-by-design are handled by the exception below. */ html[data-theme="dark"] .article-title, html[data-theme="dark"] .item-title, html[data-theme="dark"] .article-title a, html[data-theme="dark"] .item-title a, html[data-theme="dark"] .items-leading .item-title a, html[data-theme="dark"] .article-featured .article-title, html[data-theme="dark"] .article-featured .article-title a, html[data-theme="dark"] .t3-spotlight .article-title a, html[data-theme="dark"] header.article-header .article-title a { color: var(--dm-heading) !important; } html[data-theme="dark"] .article-title a:hover, html[data-theme="dark"] .item-title a:hover, html[data-theme="dark"] .article-featured .article-title a:hover { color: var(--dm-accent) !important; } /* The template colours items-leading featured titles #1a1a1a with a 5-class !important chain — replicate it (+data-theme = one more class) so heading wins. (Genuinely-over-photo titles like .blog ... .article-image + .article-content stay near-white via the generic rule above — readable on the photo.) */ html[data-theme="dark"] .view-category .items-leading .article-featured .article-content .article-title a, html[data-theme="dark"] .items-leading .article-featured .article-content .article-title a, html[data-theme="dark"] .blog .items-leading .article-content .article-title a { color: var(--dm-heading) !important; } /* brick-layout featured tiles (home-news brick-big/medium/small) overlay their title in WHITE on the news photo (source `.brick-layout .article-content .mod-articles-category-title a {color:#fff}`, 0,3,1). The prose-link rule (.t3-content a:not(.btn)) wrongly lifts them to accent-blue in dark; restore white to mirror light — readable on the photo. No hover change in light. */ html[data-theme="dark"] .brick-layout .article-content .mod-articles-category-title a, html[data-theme="dark"] .brick-layout .article-content .mod-articles-category-title a:hover, html[data-theme="dark"] .brick-layout .article-content .mod-articles-category-title a:focus { color: #fff; } /* meta line */ html[data-theme="dark"] .article-info, html[data-theme="dark"] .article-info *, html[data-theme="dark"] .post-meta, html[data-theme="dark"] .createdby, html[data-theme="dark"] .create, html[data-theme="dark"] .modified, html[data-theme="dark"] .published, html[data-theme="dark"] .category-name, html[data-theme="dark"] .article-info a { color: var(--dm-muted); } html[data-theme="dark"] .article-info a:hover { color: var(--dm-accent); } /* readmore / intro */ html[data-theme="dark"] .article-introtext, html[data-theme="dark"] .item-introtext { color: var(--dm-text); } /* category-module excerpt — source `.ja-news .mod-articles-category-introtext` pins #555 (0,2,1) and beats the base `p` rule, leaving it ~2.5 contrast on the dark page. Mirror light by routing it to body text like the other intro text. */ html[data-theme="dark"] .mod-articles-category-introtext, html[data-theme="dark"] .ja-news .mod-articles-category-introtext { color: var(--dm-text); } /* Category label sitting ON a KEPT colour pill (blue #3061ff / red #ff3333) is WHITE text in light; the `.article-info *` muted rule above wrongly greys it on the pill (grey-on-red ~1.1 contrast, home-simple/brick/slide-2/ja-news). The pill colour is a brand accent kept in dark, so restore the white — mirror light. (Plain accent-text category links on transparent stay accent — not matched here.) */ html[data-theme="dark"] .brick-layout .mod-articles-category-category a, html[data-theme="dark"] .slide-layout.slide-2 .article-content .mod-articles-category-category a, html[data-theme="dark"] .article-slideshow .mod-articles-category-category a, html[data-theme="dark"] .ja-news.ja-news-3 .news-big .mod-articles-category-category a, html[data-theme="dark"] .ja-news.ja-news-4 .news-big .mod-articles-category-category a, html[data-theme="dark"] .brick-layout .mod-articles-category-category a:hover, html[data-theme="dark"] .slide-layout.slide-2 .article-content .mod-articles-category-category a:hover, html[data-theme="dark"] .article-slideshow .mod-articles-category-category a:hover, html[data-theme="dark"] .ja-news.ja-news-3 .news-big .mod-articles-category-category a:hover, html[data-theme="dark"] .ja-news.ja-news-4 .news-big .mod-articles-category-category a:hover { color: #fff; } /* com_tags / category list item titles (.media-body .title a, deep source chain) */ html[data-theme="dark"] .tag-category .title, html[data-theme="dark"] .tag-category .title a, html[data-theme="dark"] .tag-category .media-body .title a, html[data-theme="dark"] .com-tags .title a, html[data-theme="dark"] .category .media-body .title a { color: var(--dm-heading) !important; } html[data-theme="dark"] .tag-category .title a:hover, html[data-theme="dark"] .category .media-body .title a:hover { color: var(--dm-accent) !important; } html[data-theme="dark"] .tag-category .media-body, html[data-theme="dark"] .tag-category .text-muted, html[data-theme="dark"] .tag-category .category-name { color: var(--dm-text); } /* =========================================================================== SIDEBAR MODULES (popular/hot news/tags etc.) =========================================================================== */ html[data-theme="dark"] .t3-sidebar .module, html[data-theme="dark"] .module .module-ct, html[data-theme="dark"] .sidebar .module { background-color: transparent; } html[data-theme="dark"] .module-title, html[data-theme="dark"] .module .module-title, html[data-theme="dark"] .t3-sidebar .module-title { color: var(--dm-heading); border-color: var(--dm-border); background: transparent; } /* The title text sits in a whose OPAQUE bg masks the divider line behind it (light: #fff). A section-specific source rule (.t3-sections .t3-section .module-title span {background:#fff}, 0,3,1) outranks the plain override, so match it and repaint the mask to the page bg so it hides the dark divider exactly like light hides the #e8e8e8 one. */ html[data-theme="dark"] .module-title span, html[data-theme="dark"] .module .module-title span, html[data-theme="dark"] .t3-sidebar .module-title span, html[data-theme="dark"] .t3-sections .t3-section .module-title span, html[data-theme="dark"] .t3-mast-content .t3-section .module-title span { color: inherit; background: var(--dm-bg); } /* the divider line BEHIND every module title (light: #e8e8e8) -> faint dark divider mirroring light. Sections that hide it (display:none) / footer (opacity:0) keep their own behaviour. */ html[data-theme="dark"] .module-title:before { background: var(--dm-border); } /* footer modules sit on the --dm-band (#1a1a1a) surface, not the page bg, and their divider line IS shown here — so the mask must match the band (not --dm-bg) to stay invisible behind the title text. */ html[data-theme="dark"] .t3-footer .module-title span, html[data-theme="dark"] .t3-footnav .module-title span { background: var(--dm-band); } /* =========================================================================== FORMS — login / register / contact / search =========================================================================== */ html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] .form-control, html[data-theme="dark"] .inputbox { background-color: var(--dm-surface-2); color: var(--dm-text); border-color: var(--dm-field-bd); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--dm-muted); } html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] .form-control:focus { background-color: var(--dm-surface-2); color: var(--dm-text); border-color: var(--dm-accent); } html[data-theme="dark"] label, html[data-theme="dark"] .control-label, html[data-theme="dark"] legend { color: var(--dm-text); } /* smart-search big "Search Terms:" label is a 45px heading-style label (#1a1a1a); the source rule carries an #id, so beat it with !important */ html[data-theme="dark"] div.finder label, html[data-theme="dark"] .com-finder label, html[data-theme="dark"] .search .page-title { color: var(--dm-heading) !important; } /* login/register/contact container box (light bordered panel in light). NOTE: the LOGIN markup splits the bordered box (.login-wrap, 60px padding) from the inner .login panel — the surface must go on .login-wrap (the bordered one) so the grey fills all the way to the border like .registration does; otherwise the page bg shows in the 60px gap (a 2-tone box). */ html[data-theme="dark"] .login, html[data-theme="dark"] .login-wrap, html[data-theme="dark"] .registration, html[data-theme="dark"] .profile-edit, html[data-theme="dark"] .com_users .well, html[data-theme="dark"] .well, html[data-theme="dark"] fieldset.well { background-color: var(--dm-surface); border-color: var(--dm-border); } /* Choices.js "fancy select" widget (timezone/editor selects on profile edit) */ html[data-theme="dark"] .choices__inner { background-color: var(--dm-surface-2); color: var(--dm-text); border-color: var(--dm-field-bd); } html[data-theme="dark"] .choices__list--single .choices__item, html[data-theme="dark"] .choices__list--multiple .choices__item { color: var(--dm-text); } html[data-theme="dark"] .choices__list--dropdown, html[data-theme="dark"] .choices[data-type] .choices__list--dropdown { background-color: var(--dm-surface); border-color: var(--dm-border); color: var(--dm-text); } html[data-theme="dark"] .choices__list--dropdown .choices__item { background-color: transparent; color: var(--dm-text); } html[data-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted, html[data-theme="dark"] .choices__list--dropdown .choices__item.is-highlighted { background-color: var(--dm-surface-2); color: var(--dm-heading); } html[data-theme="dark"] .choices__list--multiple .choices__item { background-color: var(--dm-accent); border-color: var(--dm-accent); } html[data-theme="dark"] .choices__button { border-color: rgba(255,255,255,.4); } html[data-theme="dark"] .choices__input { background-color: var(--dm-surface-2); color: var(--dm-text); } /* password show-toggle group btn */ html[data-theme="dark"] .input-group-text, html[data-theme="dark"] .input-group-append .btn, html[data-theme="dark"] .input-group .btn-secondary { background-color: var(--dm-surface-2); border-color: var(--dm-field-bd); color: var(--dm-text); } /* =========================================================================== BUTTONS — primary is near-black in light (#151515/#1a1a1a). Mirror: a strong LIGHT button on the dark page (same high-contrast role). =========================================================================== */ html[data-theme="dark"] .btn-primary, html[data-theme="dark"] button.btn-primary, html[data-theme="dark"] .btn-dark, html[data-theme="dark"] input[type="submit"].btn-primary { background-color: #ededed; border-color: #ededed; color: #151515; } html[data-theme="dark"] .btn-primary:hover, html[data-theme="dark"] .btn-dark:hover { background-color: #fff; border-color: #fff; color: #000; } html[data-theme="dark"] .btn-default, html[data-theme="dark"] .btn-secondary { background-color: var(--dm-surface-2); border-color: var(--dm-field-bd); color: var(--dm-text); } html[data-theme="dark"] .btn-default:hover, html[data-theme="dark"] .btn-secondary:hover { background-color: #303030; color: #fff; } /* =========================================================================== TABLES / BLOCKQUOTES / CODE (typography page) =========================================================================== */ html[data-theme="dark"] table, html[data-theme="dark"] .table { color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] .table > thead > tr > th, html[data-theme="dark"] .table > tbody > tr > td, html[data-theme="dark"] .table-bordered, html[data-theme="dark"] .table-bordered > tbody > tr > td, html[data-theme="dark"] .table-bordered > thead > tr > th { border-color: var(--dm-border); } html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--dm-band); } html[data-theme="dark"] blockquote { border-color: var(--dm-field-bd); color: var(--dm-text); } html[data-theme="dark"] pre, html[data-theme="dark"] code { background-color: var(--dm-surface-2); color: #e6e6e6; border-color: var(--dm-border); } html[data-theme="dark"] hr { border-color: var(--dm-border); } /* tabs, list groups, nav-tabs (Bootstrap components, white in light) */ html[data-theme="dark"] .tab-content, html[data-theme="dark"] .tab-pane { background-color: transparent !important; color: var(--dm-text); } html[data-theme="dark"] .nav-tabs { border-bottom-color: var(--dm-border); } html[data-theme="dark"] .nav-tabs > li > a, html[data-theme="dark"] .nav-tabs .nav-link { color: var(--dm-text); border-color: transparent; } html[data-theme="dark"] .nav-tabs > li.active > a, html[data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--dm-surface); color: var(--dm-heading); border-color: var(--dm-border) var(--dm-border) var(--dm-surface); } html[data-theme="dark"] .list-group-item { background-color: var(--dm-surface); color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] .list-group-item.active, html[data-theme="dark"] .list-group-item.active a, html[data-theme="dark"] .nav-pills > .active > a, html[data-theme="dark"] .nav > li.active > a { background-color: var(--dm-accent); border-color: var(--dm-accent); color: #fff !important; } /* Bootstrap alerts keep their pastel bg by design -> text must stay dark (like light). Our global heading/text rules would light it; restore semantic dark text. */ html[data-theme="dark"] .alert, html[data-theme="dark"] .alert h1, html[data-theme="dark"] .alert h2, html[data-theme="dark"] .alert h3, html[data-theme="dark"] .alert h4, html[data-theme="dark"] .alert h5, html[data-theme="dark"] .alert h6, html[data-theme="dark"] .alert p, html[data-theme="dark"] .alert strong, html[data-theme="dark"] .alert li, html[data-theme="dark"] .alert span { color: #2b2b2b !important; } html[data-theme="dark"] .alert-warning, html[data-theme="dark"] .alert-warning :is(h1,h2,h3,h4,h5,h6,p,strong,span,li) { color: #8a6d3b !important; } html[data-theme="dark"] .alert-danger, html[data-theme="dark"] .alert-danger :is(h1,h2,h3,h4,h5,h6,p,strong,span,li) { color: #a94442 !important; } html[data-theme="dark"] .alert-success, html[data-theme="dark"] .alert-success :is(h1,h2,h3,h4,h5,h6,p,strong,span,li) { color: #3c763d !important; } html[data-theme="dark"] .alert-info, html[data-theme="dark"] .alert-info :is(h1,h2,h3,h4,h5,h6,p,strong,span,li) { color: #31708f !important; } html[data-theme="dark"] .badge:not([class*="bg-"]):not(.badge-primary):not(.badge-success):not(.badge-info):not(.badge-warning):not(.badge-danger) { background-color: var(--dm-surface-2); color: var(--dm-text); } /* =========================================================================== PAGINATION / BREADCRUMBS / TAGS =========================================================================== */ html[data-theme="dark"] .pagination > li > a, html[data-theme="dark"] .pagination > li > span { background-color: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text); } html[data-theme="dark"] .pagination > .active > a, html[data-theme="dark"] .pagination > li > a:hover { background-color: var(--dm-accent); border-color: var(--dm-accent); color: #fff; } /* tag-list "show more" button + pagination counter (white in light) */ html[data-theme="dark"] .btn-light { background-color: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html[data-theme="dark"] .btn-light:hover { background-color: #303030 !important; color: #fff !important; } html[data-theme="dark"] .counter, html[data-theme="dark"] .pagination-counter, html[data-theme="dark"] p.counter { background-color: transparent; color: var(--dm-muted); } html[data-theme="dark"] .breadcrumb { background-color: transparent; } html[data-theme="dark"] .breadcrumb, html[data-theme="dark"] .breadcrumb a, html[data-theme="dark"] .breadcrumb > .active { color: var(--dm-muted); } html[data-theme="dark"] .tags .tag-name, html[data-theme="dark"] .tags a, html[data-theme="dark"] .tagspopular a, html[data-theme="dark"] .mod-tagspopular a, html[data-theme="dark"] .tag-list a, html[data-theme="dark"] a.label, html[data-theme="dark"] .badge { background-color: var(--dm-surface-2); color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] .tags a:hover, html[data-theme="dark"] .tagspopular a:hover, html[data-theme="dark"] .mod-tagspopular a:hover, html[data-theme="dark"] a.label:hover { background-color: var(--dm-accent); color: #fff; } /* =========================================================================== FOOTER =========================================================================== */ html[data-theme="dark"] #t3-footer, html[data-theme="dark"] .t3-footer, html[data-theme="dark"] .t3-copyright { background: var(--dm-band); color: var(--dm-text); border-color: var(--dm-border); } /* footer nav modules are white-on-white in light (blend) -> transparent in dark */ html[data-theme="dark"] .t3-footnav .t3-module, html[data-theme="dark"] #t3-footer .t3-module, html[data-theme="dark"] .t3-footer .t3-module { background: transparent; color: var(--dm-text); } html[data-theme="dark"] #t3-footer h1, html[data-theme="dark"] #t3-footer h2, html[data-theme="dark"] #t3-footer h3, html[data-theme="dark"] #t3-footer h4, html[data-theme="dark"] .t3-footnav .t3-module .module-title, html[data-theme="dark"] .t3-footer .module-title { color: var(--dm-heading); border-color: var(--dm-border); background: transparent; } html[data-theme="dark"] #t3-footer a, html[data-theme="dark"] .t3-footer a, html[data-theme="dark"] .t3-copyright a { color: var(--dm-muted); } html[data-theme="dark"] #t3-footer a:hover, html[data-theme="dark"] .t3-footer a:hover { color: var(--dm-accent); } /* =========================================================================== BORDER NORMALIZATION — dividers that ship as light grey (#e8e8e8 family) and read as bright lines on dark. Route them all through --dm-border. =========================================================================== */ html[data-theme="dark"] .article-footer, html[data-theme="dark"] .article-header, html[data-theme="dark"] .items-row, html[data-theme="dark"] .item, html[data-theme="dark"] article.item, html[data-theme="dark"] .blog-item, html[data-theme="dark"] .t3-sidebar, html[data-theme="dark"] .t3-sidebar-left, html[data-theme="dark"] .t3-sidebar-right, html[data-theme="dark"] .t3-copyright, html[data-theme="dark"] .t3-mainbody, html[data-theme="dark"] .article-list > div, html[data-theme="dark"] .media, html[data-theme="dark"] .cat-list-row0, html[data-theme="dark"] .cat-list-row1, html[data-theme="dark"] .item article, html[data-theme="dark"] .items-row article, html[data-theme="dark"] .system-unpublished, html[data-theme="dark"] .t3-copyright .container-inner, html[data-theme="dark"] .t3-copyright .row, html[data-theme="dark"] .login-wrap, html[data-theme="dark"] .registration, html[data-theme="dark"] .profile-edit, html[data-theme="dark"] .contact-form-wrap, html[data-theme="dark"] .contact .plain-style, html[data-theme="dark"] .counter, html[data-theme="dark"] .pagination-wrap, html[data-theme="dark"] .profile, html[data-theme="dark"] .profile-edit, html[data-theme="dark"] .dl-horizontal dt, html[data-theme="dark"] .dl-horizontal dd, html[data-theme="dark"] .well { border-color: var(--dm-border) !important; } /* profile field values */ html[data-theme="dark"] .profile .dl-horizontal dt, html[data-theme="dark"] .profile .dl-horizontal dd { color: var(--dm-text); } /* =========================================================================== MISC =========================================================================== */ html[data-theme="dark"] .back-to-top .btn-primary { background-color: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text); } html[data-theme="dark"] .well, html[data-theme="dark"] .panel { background-color: var(--dm-surface); border-color: var(--dm-border); } html[data-theme="dark"] .panel-heading { background-color: var(--dm-surface-2); color: var(--dm-heading); border-color: var(--dm-border); } /* =========================================================================== STANDALONE DOCS — error (404) page =========================================================================== */ html[data-theme="dark"] body.page-error { background: var(--dm-bg); color: var(--dm-text); } html[data-theme="dark"] body.page-error #errorboxoutline { background: var(--dm-bg); } html[data-theme="dark"] body.page-error .error-code, html[data-theme="dark"] body.page-error .error-code span { color: var(--dm-heading); } html[data-theme="dark"] body.page-error .error-message h2, html[data-theme="dark"] body.page-error .error-message h2 span { color: var(--dm-heading); } html[data-theme="dark"] body.page-error #errorboxbody p { color: var(--dm-text); } html[data-theme="dark"] body.page-error .button-home { background-color: #ededed; border-color: #ededed; color: #151515; } html[data-theme="dark"] body.page-error .button-home:hover, html[data-theme="dark"] body.page-error .button-home:focus, html[data-theme="dark"] body.page-error .button-home:active { background-color: #fff; border-color: #fff; color: #000; } /* =========================================================================== STANDALONE DOCS — offline page =========================================================================== */ html[data-theme="dark"] .offline-wrap { color: var(--dm-text); } html[data-theme="dark"] .offline-wrap .outline { background: transparent; } html[data-theme="dark"] .offline-wrap .outline h1 { color: var(--dm-heading); } html[data-theme="dark"] .offline-wrap .outline p.message { color: var(--dm-text); } html[data-theme="dark"] .offline-wrap label, html[data-theme="dark"] .offline-wrap fieldset label { color: var(--dm-text) !important; } html[data-theme="dark"] .offline-wrap .inputbox, html[data-theme="dark"] .offline-wrap input.inputbox, html[data-theme="dark"] .offline-wrap input[type="text"], html[data-theme="dark"] .offline-wrap input[type="password"] { background-color: var(--dm-surface-2) !important; color: var(--dm-text) !important; border-color: var(--dm-field-bd) !important; } html[data-theme="dark"] .offline-wrap #submit-buton .button { background-color: #ededed; border-color: #ededed; color: #151515; } html[data-theme="dark"] .offline-wrap #submit-buton .button:hover { background-color: #fff; color: #000; } /* =========================================================================== DEEP PER-UNIT REVIEW OVERRIDES (merged from css/darkmode/*.css) Each block was authored by a dedicated opus review subagent that verified its unit against light mode (light-vs-dark gate) and looped fix→verify to 100%. Loaded after the base rules above, so these win on ties. =========================================================================== */ /* ---------- unit: chrome ---------- */ /* =========================================================================== MAIN NAV — top-level active/current/open link In LIGHT the active top-level nav link is just ACCENT-BLUE TEXT on a TRANSPARENT bg (no pill/fill). darkmode.css's generic nav-pills rule (`.nav > li.active > a { background: var(--dm-accent); color:#fff }`) leaks onto the main nav and paints a blue PILL with white text — light has no pill. Restore the mirror: accent text, transparent bg, no border. Beat the source rule's specificity (it carries html[data-theme] + .nav .active a + !important). =========================================================================== */ html[data-theme="dark"] .t3-mainnav .nav > li.active > a, html[data-theme="dark"] .t3-mainnav .nav > li.current > a, html[data-theme="dark"] .navbar-default .navbar-nav > .active > a, html[data-theme="dark"] .navbar-default .navbar-nav > .current > a, html[data-theme="dark"] .navbar-default .navbar-nav > .active > a:hover, html[data-theme="dark"] .navbar-default .navbar-nav > .active > a:focus, html[data-theme="dark"] .navbar-default .navbar-nav > .open > a, html[data-theme="dark"] .navbar-default .navbar-nav > .open > a:hover, html[data-theme="dark"] .navbar-default .navbar-nav > .open > a:focus { background-color: transparent !important; border-color: transparent !important; color: var(--dm-accent) !important; } /* =========================================================================== LOGO — game style ships an ALREADY-DARK header (header bg #0a0a0a in LIGHT too) with a COLOURFUL logo (logo-game.png ~32% coloured pixels, peachy/white marks). In LIGHT that logo has `filter:none` and shows in its natural colour on the dark header. darkmode.css's blanket `.logo-img{filter:brightness(0) invert(1)}` flattens it to pure WHITE in dark — i.e. dark stops mirroring light (the header is dark in BOTH modes, so the logo must look the same). Reset the filter for this colourful logo. (time/news/simple logos are monochrome-dark PNGs on a WHITE light header → they KEEP the invert.) =========================================================================== */ html[data-theme="dark"] .logo-img[src*="logo-game"], html[data-theme="dark"] .logo-img-sm[src*="logo-game"] { filter: none; } /* ---------- unit: menu ---------- */ /* =========================================================================== MEGA GROUP TITLE — white-bg leak. The source `.t3-megamenu .dropdown-header` rules (megamenu.css, incl. a responsive variant) hardcode `background: rgb(255,255,255)`. In light this is white-on-white (invisible); in dark it renders as a bright white bar behind each group heading ("J! Pages", "Other Pages", "Joomlart Content"). The base darkmode.css set `background: transparent` (non-important) which loses to the media-query source rule. Beat it by replicating the source chain + !important. Text colour already lifts to --dm-heading via darkmode.css; only the bg leaks. =========================================================================== */ html[data-theme="dark"] .t3-megamenu .dropdown-header, html[data-theme="dark"] .t3-megamenu .mega-nav .mega-group > .dropdown-header, html[data-theme="dark"] .t3-megamenu .dropdown-menu .mega-nav .mega-group > .dropdown-header, html[data-theme="dark"] .t3-megamenu .dropdown-menu .active .mega-nav .mega-group > .dropdown-header, html[data-theme="dark"] .t3-megamenu .mega-group-title, html[data-theme="dark"] .t3-megamenu .mega-col-title { background: transparent !important; } /* ---------- unit: offcanvas ---------- */ /* ---- Panel surface: light is #1a1a1a — mirror it (base painted --dm-surface #1e1e1e) */ html[data-theme="dark"] .t3-off-canvas, html[data-theme="dark"] #t3-off-canvas, html[data-theme="dark"] .off-canvas-menu { background: #1a1a1a; color: rgba(255,255,255,.6); } html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-body { background: transparent; } /* ---- Header + close: black bar, white text (identical in both modes) ----------- */ html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-header, html[data-theme="dark"] .t3-off-canvas .close { background: #000; color: #fff; } html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-header h2, html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-header-title { color: #fff; } /* ---- Links: rest = white-60% (light), no added border, transparent bg ---------- */ html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-body a, html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-body .nav > li > a, html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-body .nav > li > span, html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-body .nav .nav-header, html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-body .dropdown-menu > li > a, html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-body .dropdown-menu > li > span { color: rgba(255,255,255,.6); background: transparent; border-color: transparent; } /* ---- Hover/focus: light hovers to pure #fff with NO bg wash — mirror exactly --- (base set accent-blue + rgba(255,255,255,.04); override both color AND bg) ------ */ html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-body a:hover, html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-body a:focus, html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-body .nav > li > a:hover, html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-body .nav > li > a:focus, html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-body .dropdown-menu > li > a:hover, html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-body .dropdown-menu > li > a:focus { color: #fff; background: transparent; } /* ---- Open / active item: white text, transparent bg (light) -------------------- */ html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-body .nav > li.open > a, html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-body .nav > li.active > a, html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-body .nav > li.open > span, html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-body .nav > li.active > span, html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-body .dropdown-menu .open > a, html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-body .dropdown-menu .active > a, html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-body .dropdown-menu .active a { color: #fff; background: transparent; } /* ---- Module titles: light is pure #fff (base lifted to #f1f1f1) ---------------- */ html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-body .module-title, html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-body .module-title span { color: #fff; background: transparent; border-color: transparent; } /* ---- Submenu (.dropdown-menu) stays part of the SAME panel — no two-tone (§25). Light: transparent over the #1a1a1a panel. Pin transparent so the megamenu's surface-2 can never bleed in. ------------------------------------------------- */ html[data-theme="dark"] .t3-off-canvas .t3-off-canvas-body .dropdown-menu { background: transparent; } /* =========================================================================== HAMBURGER / OFF-CANVAS TOGGLE (mobile header control) The button carries class "btn btn-primary off-canvas-toggle". In dark the generic darkmode.css `.btn-primary{background:#ededed}` LEAKS onto it → a solid light-grey block (light = transparent). Restore transparent. (§31/§53) =========================================================================== */ html[data-theme="dark"] .btn.off-canvas-toggle, html[data-theme="dark"] .off-canvas-toggle, html[data-theme="dark"] .btn-primary.off-canvas-toggle { background: transparent !important; border: 0 !important; color: inherit; } html[data-theme="dark"] .btn.off-canvas-toggle:hover, html[data-theme="dark"] .btn.off-canvas-toggle:focus, html[data-theme="dark"] .btn.off-canvas-toggle:active, html[data-theme="dark"] .off-canvas-toggle:hover, html[data-theme="dark"] .off-canvas-toggle:focus, html[data-theme="dark"] .off-canvas-toggle:active { background: transparent !important; outline: none; } /* Hamburger BARS: light draws them #1a1a1a on a transparent button over the LIGHT header. On the dark header (#141414) that is invisible → relationship-mirror to a light bar so the icon reads, same as light reads on its header (§41). The open "X" reuses these spans, so this also colours the close-state X. */ html[data-theme="dark"] .btn.off-canvas-toggle span, html[data-theme="dark"] .off-canvas-toggle span { background-color: var(--dm-text); } /* ---------- unit: footer ---------- */ /* ---- Footnav links: mirror light where link tone == body text tone --------- */ /* Base paints these via #t3-footer a (id, beats plain classes). Carry the #id so our override ties-or-beats it (id + extra classes). */ html[data-theme="dark"] #t3-footer .t3-footnav .t3-module ul > li > a, html[data-theme="dark"] #t3-footer .t3-footnav .t3-module a { color: var(--dm-text); } html[data-theme="dark"] #t3-footer .t3-footnav .t3-module ul > li > a:hover, html[data-theme="dark"] #t3-footer .t3-footnav .t3-module ul > li > a:focus, html[data-theme="dark"] #t3-footer .t3-footnav .t3-module ul > li > a:active { color: var(--dm-accent); } /* ---- Copyright links: dark text + dotted-underline on the border token ----- */ /* Rest: mirror light (link tone == copyright text tone), underline = divider token. Carry #t3-footer (copyright sits inside it) to beat the base #t3-footer a rule. */ html[data-theme="dark"] #t3-footer .t3-copyright a, html[data-theme="dark"] #t3-footer .t3-copyright .copyright a { color: var(--dm-text); border-bottom-color: var(--dm-border); } /* Hover: light only lightens the dotted underline a step; text stays. Override the base #t3-footer a:hover -> accent leak that would otherwise hit copyright links. */ html[data-theme="dark"] #t3-footer .t3-copyright a:hover, html[data-theme="dark"] #t3-footer .t3-copyright a:focus, html[data-theme="dark"] #t3-footer .t3-copyright a:active, html[data-theme="dark"] #t3-footer .t3-copyright .copyright a:hover, html[data-theme="dark"] #t3-footer .t3-copyright .copyright a:focus, html[data-theme="dark"] #t3-footer .t3-copyright .copyright a:active { color: var(--dm-text); border-bottom-color: var(--dm-field-bd); } /* ---------- unit: content ---------- */ /* =========================================================================== SIDEBAR MODULE POST-TITLE LINKS (Popular Posts / Hot News / Latest News) --------------------------------------------------------------------------- These post-title links sit INSIDE a heading element (h4.mod-articles-category-title, .article-title, .news-title …). In LIGHT they are dark heading text (#1a1a1a) — they inherit the heading colour, NOT the accent. The base prose-link rule (.t3-content a:not(.btn)) wrongly lifts them to the lifted-accent blue in dark; restore them to the heading colour so they mirror light. Plain category/tag links beside them stay accent (by design). =========================================================================== */ html[data-theme="dark"] .t3-sidebar .mod-articles-category-title a, html[data-theme="dark"] .t3-sidebar .article-title a, html[data-theme="dark"] .t3-sidebar .news-title a, html[data-theme="dark"] .t3-sidebar .item-title a, html[data-theme="dark"] .t3-sidebar h1 a, html[data-theme="dark"] .t3-sidebar h2 a, html[data-theme="dark"] .t3-sidebar h3 a, html[data-theme="dark"] .t3-sidebar h4 a, html[data-theme="dark"] .t3-sidebar h5 a, html[data-theme="dark"] .t3-sidebar h6 a { color: var(--dm-heading); } html[data-theme="dark"] .t3-sidebar .mod-articles-category-title a:hover, html[data-theme="dark"] .t3-sidebar .article-title a:hover, html[data-theme="dark"] .t3-sidebar .news-title a:hover, html[data-theme="dark"] .t3-sidebar .item-title a:hover, html[data-theme="dark"] .t3-sidebar h1 a:hover, html[data-theme="dark"] .t3-sidebar h2 a:hover, html[data-theme="dark"] .t3-sidebar h3 a:hover, html[data-theme="dark"] .t3-sidebar h4 a:hover, html[data-theme="dark"] .t3-sidebar h5 a:hover, html[data-theme="dark"] .t3-sidebar h6 a:hover { color: var(--dm-accent); } /* =========================================================================== MAIN-CONTENT SPOTLIGHT / SLIDE MODULE TITLE LINKS --------------------------------------------------------------------------- In LIGHT these mod-articles-category title links are dark heading text (#1a1a1a) on a light card — NOT accent. Their source selectors are 4-class (.slide-layout.slide-N .top-info .mod-articles-category-title a, 0,4,1) so the base prose-link rule loses and they stayed near-black on the dark page (dark-on-dark). Restore to heading colour; hover -> accent, mirroring light. The over-photo (#fff) sibling titles already mirror correctly as white. The .view-category items-leading featured title is handled in its own block. */ html[data-theme="dark"] .slide-layout.slide-1 .mod-articles-category-title a, html[data-theme="dark"] .slide-layout.slide-3 .top-info .mod-articles-category-title a, html[data-theme="dark"] .ja-news .mod-articles-category-title a { color: var(--dm-heading); } /* HOVER must mirror light per-layout: slide-1 + ja-news hover to BLACK in light (#000) -> so brighten to white in dark (NOT accent — that blue/red hover was wrong). slide-3 genuinely hovers to the accent in light (#3061ff) -> keep accent (which is now per-home, so red on game/simple). */ html[data-theme="dark"] .slide-layout.slide-1 .mod-articles-category-title a:hover, html[data-theme="dark"] .slide-layout.slide-1 .mod-articles-category-title a:focus, html[data-theme="dark"] .ja-news .mod-articles-category-title a:hover, html[data-theme="dark"] .ja-news .mod-articles-category-title a:focus { color: #fff; } html[data-theme="dark"] .slide-layout.slide-3 .top-info .mod-articles-category-title a:hover, html[data-theme="dark"] .slide-layout.slide-3 .top-info .mod-articles-category-title a:focus { color: var(--dm-accent); } /* =========================================================================== OVER-PHOTO FEATURED TITLE (grid blog) — keep it WHITE in dark (mirror light) --------------------------------------------------------------------------- The featured article inside .items-row overlays its title on the photo: light rule `.blog .article-featured .article-image + .article-content h2.article-title a { color:#fff }`. The base darkmode rule force-lifts ALL article titles to --dm-heading (#f1f1f1) with !important, which dulls this over-photo title; restore pure white so it mirrors light EXACTLY. (The LEADING featured title — .items-leading — is dark-on-card in light and stays --dm-heading, handled by the base rule.) Only the in-grid (.items-row) .article-featured overlay is over a photo. */ html[data-theme="dark"] .items-row .article-featured .article-image + .article-content h2.article-title a, html[data-theme="dark"] .blog .items-row .article-featured .article-image + .article-content .article-title a { color: #fff !important; } /* Light has no hover-colour change on the over-photo title (it inherits #fff from .article-content with no :hover rule) -> keep it white on hover too. */ html[data-theme="dark"] .items-row .article-featured .article-image + .article-content h2.article-title a:hover, html[data-theme="dark"] .items-row .article-featured .article-image + .article-content h2.article-title a:focus, html[data-theme="dark"] .blog .items-row .article-featured .article-image + .article-content .article-title a:hover, html[data-theme="dark"] .blog .items-row .article-featured .article-image + .article-content .article-title a:focus { color: #fff !important; } /* ---------- unit: article ---------- */ /* =========================================================================== META CONSISTENCY — single-article view (com_content article) --------------------------------------------------------------------------- In LIGHT, every piece of article meta is uniformly #999: the article-info line (author/date/category/hits), the article FOOTER text, the blockquote citation , and