/* =========================================================================== JA Atoms — Dark Mode --------------------------------------------------------------------------- Light mode is the original, approved design and is NOT modified here. Every rule is scoped under html[data-theme="dark"] except the toggle button (visible in both modes). Dark MIRRORS light — same relationships, never adds contrast light lacks. Brand accent (--color-primary #c1ab7c gold) is kept. Loaded LAST in via addCustomTag in index.php (after the optimize bundle). =========================================================================== */ /* --------------------------------------------------------------------------- 1) Palette — one source of truth (cool-neutral dark, tuned to mirror light) --------------------------------------------------------------------------- */ html[data-theme="dark"] { --dm-bg: #14171c; /* page background (light: #ffffff) */ --dm-band: #1a1e25; /* section bands / .bg-light (light: #f8f9fa) */ --dm-surface: #1e232b; /* cards / panels */ --dm-surface-2: #262c36; /* elevated: inputs, dropdowns, hover surfaces */ --dm-border: #2d3440; /* dividers / frames */ --dm-field-border: #3c4654;/* form-field outlines (one step lighter) */ --dm-text: #c2c9d6; /* body copy (light: #616161) */ --dm-text-muted:#8c97a8; /* meta / muted */ --dm-heading: #eef1f6; /* headings (light: near-#111) */ /* Brand accent — KEEP the gold; only a slightly lighter hover for dark. */ --dm-accent: #c1ab7c; --dm-accent-hover: #d4c199; color-scheme: dark; /* ------------------------------------------------------------------------- 2) REMAP the template's own colour TOKENS (the big lever). Confirmed vars. Do NOT remap --color-primary (brand accent). ------------------------------------------------------------------------- */ --body-bg-color: var(--dm-bg); --body-text-color: var(--dm-text); --color-light: var(--dm-band); --heading-color: var(--dm-heading); --border-color: var(--dm-border); /* Nav text tokens (light: near-black #212529 → invisible on dark). */ --mainnav-link-color: var(--dm-text); --mainnav-text-color: var(--dm-text); /* Default :root hover/active are Bootstrap blue #007bff (palettes mostly override to gold) — align the var to the brand accent for consistency. */ --mainnav-link-hover-color: var(--dm-accent); --mainnav-link-active-color: var(--dm-accent); /* Prose link hover was a dark gold (#ac8124) that vanishes on dark → lift it. */ --body-link-hover-color: var(--dm-accent-hover); } /* --------------------------------------------------------------------------- 3) Base surfaces --------------------------------------------------------------------------- */ html[data-theme="dark"] body { background: var(--dm-bg); color: var(--dm-text); } html[data-theme="dark"] .t4-wrapper, html[data-theme="dark"] .t4-content, html[data-theme="dark"] .t4-section, html[data-theme="dark"] .t4-mainbody { background-color: var(--dm-bg); } /* --------------------------------------------------------------------------- 3b) Headings & prose — base headings are literal #212121 (NOT --heading-color, which the template leaves empty), so the token remap can't reach them. Lift every heading directly. Mirrors light's near-black-on-white contrast. --------------------------------------------------------------------------- */ 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"] .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"] .display-1, html[data-theme="dark"] .display-2, html[data-theme="dark"] .display-3, html[data-theme="dark"] .display-4, html[data-theme="dark"] .site-name, html[data-theme="dark"] .ja-masthead-title { color: var(--dm-heading); } /* Heading LINKS (manufacturer names, latestnews/article titles) hardcode #212121 via deep chains (e.g. ul.latestnews … h6 a, .manufacturer h2 a) → force-lift. */ html[data-theme="dark"] h1 a, html[data-theme="dark"] h2 a, html[data-theme="dark"] h3 a, html[data-theme="dark"] h4 a, html[data-theme="dark"] h5 a, html[data-theme="dark"] h6 a, html[data-theme="dark"] .h1 a, html[data-theme="dark"] .h2 a, html[data-theme="dark"] .h3 a { color: var(--dm-heading) !important; } /* Headings (and their links) on a coloured/accent fill stay white by design (promo banners, masthead-over-photo) — restored where the fill provides contrast. */ html[data-theme="dark"] [class*="bg-primary"] :is(h1,h2,h3,h4,h5,h6), html[data-theme="dark"] [class*="bg-dark"] :is(h1,h2,h3,h4,h5,h6), html[data-theme="dark"] .text-white, html[data-theme="dark"] .text-white :is(h1,h2,h3,h4,h5,h6) { color: #fff; } html[data-theme="dark"] [class*="bg-primary"] :is(h1,h2,h3,h4,h5,h6) a, html[data-theme="dark"] [class*="bg-dark"] :is(h1,h2,h3,h4,h5,h6) a, html[data-theme="dark"] .text-white :is(h1,h2,h3,h4,h5,h6) a { color: #fff !important; } /* --------------------------------------------------------------------------- 4) Header / topbar / megamenu (shared chrome on every page) --------------------------------------------------------------------------- */ /* Text logo "ATOMS" — the visible text is .site-name (own #212121 colour that the parent colour can't cascade past) → lift it directly. */ html[data-theme="dark"] .logo-text a, html[data-theme="dark"] .navbar-brand.logo-text a, html[data-theme="dark"] .logo-text .site-name, html[data-theme="dark"] .logo-text, html[data-theme="dark"] .site-title a { color: var(--dm-heading); } /* Page/module title text (.menu-item-title literal #343a40). */ html[data-theme="dark"] .menu-item-title { color: var(--dm-heading); } /* Topbar utility bar (.t4-palette-topbar is literal #fff in light). Its border. */ html[data-theme="dark"] .t4-topbar, html[data-theme="dark"] .t4-palette-topbar { background-color: var(--dm-band); border-bottom-color: var(--dm-border); } html[data-theme="dark"] .t4-palette-topbar, html[data-theme="dark"] .t4-palette-topbar a { color: var(--dm-text-muted); } html[data-theme="dark"] .t4-palette-topbar h1, html[data-theme="dark"] .t4-palette-topbar h2, html[data-theme="dark"] .t4-palette-topbar h3, html[data-theme="dark"] .t4-palette-topbar h4, html[data-theme="dark"] .t4-palette-topbar h1 a, html[data-theme="dark"] .t4-palette-topbar h2 a, html[data-theme="dark"] .t4-palette-topbar h3 a, html[data-theme="dark"] .t4-palette-topbar h4 a { color: var(--dm-text); } /* Hamburger / off-canvas trigger icon (palette sets #212121 on light headers). */ html[data-theme="dark"] .navbar-toggler, html[data-theme="dark"] .t4-offcanvas-toggle, html[data-theme="dark"] .megamenu-toggle, html[data-theme="dark"] .t4-offcanvas-toggle .fa, html[data-theme="dark"] .t4-offcanvas-toggle i { color: var(--dm-text); } /* Per-home: Digital Shop (Home 2) ships a DARK NAVY header + topbar (#041e42). Align them to the dark page so the header bar and megamenu strip match. */ html[data-theme="dark"] .layout-home-2 .t4-header.t4-palette-mainnav, html[data-theme="dark"] .layout-home-2 .t4-palette-mainnav, html[data-theme="dark"] .layout-home-2 .t4-topbar.t4-palette-topbar { background-color: var(--dm-bg); } /* Megamenu bar — literal #fff per palette (.t4-palette-mainnav / -light / -masthead …) and via .nav-breakpoint rules. Palette-agnostic override that beats the 3-class palette rules on element count. */ html[data-theme="dark"] .navbar-expand-lg div.t4-megamenu, html[data-theme="dark"] div.t4-megamenu { background-color: var(--dm-bg); border-color: var(--dm-border); } /* Dropdown / mega panels — white in light → elevated surface. */ html[data-theme="dark"] .t4-megamenu .dropdown-menu { background-color: var(--dm-surface); box-shadow: 0 0 0 1px var(--dm-border); } /* Top-level nav links (literal near-black per palette) → body text; keep the brand gold (#c1ab7c) the palette already applies on active/hover/open. */ html[data-theme="dark"] .t4-megamenu .navbar-nav > li > a, html[data-theme="dark"] .t4-megamenu .navbar-nav > li > .nav-link { color: var(--dm-text); } /* Open/show state set descendants to #212121 → lift to heading (visible on the dark dropdown surface). Per-palette rules are 4-class — beat with !important. */ html[data-theme="dark"] .t4-megamenu .nav > li.show > a, html[data-theme="dark"] .t4-megamenu .nav > li.show > .nav-link { color: var(--dm-heading) !important; } /* Dropdown link items — palette rules target `li > a` / `li .dropdown-item` at 3-class/2-elem specificity; match the `li >` structure so we tie-or-beat them. */ html[data-theme="dark"] .t4-megamenu .dropdown-menu li > a, html[data-theme="dark"] .t4-megamenu .dropdown-menu li > .nav-link, html[data-theme="dark"] .t4-megamenu .dropdown-menu li .dropdown-item, html[data-theme="dark"] .t4-megamenu .dropdown-menu li .nav-link { color: var(--dm-text); } html[data-theme="dark"] .t4-megamenu .dropdown-menu li > a:hover, html[data-theme="dark"] .t4-megamenu .dropdown-menu li > a:focus, html[data-theme="dark"] .t4-megamenu .dropdown-menu li .dropdown-item:hover { color: var(--dm-heading); } /* Top-level dropdown caret: per-palette rules (.t4-palette-* … .nav > .dropdown > .dropdown-toggle, spec 0,6,1) paint the rest state near-black (#212121) → invisible on dark. Mirror that 6-class chain so the rest state shows; active/hover palette rules (0,6,3) still win, keeping the gold accent. */ html[data-theme="dark"] .t4-megamenu .nav > .dropdown > .dropdown-toggle .item-caret::before, html[data-theme="dark"] .t4-megamenu .navbar-nav > li > a.dropdown-toggle .item-caret::before, html[data-theme="dark"] .t4-megamenu .dropdown-toggle .item-caret::before { border-top-color: var(--dm-text); } /* Mega column titles (hardcoded near-black) → heading colour, subtle divider. */ html[data-theme="dark"] .t4-megamenu .mega-col-title, html[data-theme="dark"] .t4-megamenu .module-title, html[data-theme="dark"] .t4-megamenu .t4-module .module-title { color: var(--dm-heading); border-bottom-color: var(--dm-border); } /* Dropdown item active/hover bg (light: #f5f5f5) → surface-2, keep text light. */ html[data-theme="dark"] .t4-megamenu .dropdown-menu li .dropdown-item:hover, html[data-theme="dark"] .t4-megamenu .dropdown-menu li .dropdown-item:focus, html[data-theme="dark"] .t4-megamenu .dropdown-menu li .dropdown-item:active { background-color: var(--dm-surface-2); color: var(--dm-heading); } /* --------------------------------------------------------------------------- 4b) Content components — breadcrumb, tables, utilities --------------------------------------------------------------------------- */ /* Breadcrumb (transparent bar; links & site-name literal #212121). */ html[data-theme="dark"] .breadcrumb, html[data-theme="dark"] .breadcrumb a, html[data-theme="dark"] .breadcrumb .site-name, html[data-theme="dark"] .breadcrumb .menu-item-title { color: var(--dm-text); } html[data-theme="dark"] .breadcrumb-item.active, html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--dm-text-muted); } /* The ACTUAL "/" separator is the ::before (the Bootstrap .breadcrumb-item+...::before above is display:none in this template). Its color is a literal #212121 → invisible on dark. Mirror light (separator == breadcrumb link colour, reads muted as a thin glyph) with a clearly-visible muted tone. */ html[data-theme="dark"] .breadcrumb .divider::before { color: var(--dm-text-muted); } html[data-theme="dark"] .breadcrumb a:hover, html[data-theme="dark"] .breadcrumb a:focus, html[data-theme="dark"] .breadcrumb a:active { color: var(--dm-accent); } /* Inline keeps Bootstrap red #bd4147 (3.43:1 on dark) → lift to a warm red that meets AA on the dark page. */ html[data-theme="dark"] code { color: #e87878; } /* Blog article title link hover/focus/active reverts to blue #0056b3 (invisible on the dark card) → gold accent affordance across all three states. */ html[data-theme="dark"] .page-header h2 a:hover, html[data-theme="dark"] .page-header h2 a:focus, html[data-theme="dark"] .page-header h2 a:active { color: var(--dm-accent) !important; } /* Tables (bare + Bootstrap .table). th near-black; borders #dee2e6. */ html[data-theme="dark"] .table, html[data-theme="dark"] .table > :not(caption) > * > * { color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] th { color: var(--dm-heading); } html[data-theme="dark"] td, html[data-theme="dark"] th { border-color: var(--dm-border); } html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,.03); color: var(--dm-text); } html[data-theme="dark"] .table-bordered, html[data-theme="dark"] .table-bordered > :not(caption) > * > * { border-color: var(--dm-border); } /* Restore .text-light: it reads var(--color-light) which we remap to a dark band for .bg-light/sections — but the TEXT utility must stay light. */ html[data-theme="dark"] .text-light { color: #e9ecef !important; } /* Muted texts with a LITERAL #616161 (light body colour) that bypass the var remap — blockquote attribution, figure caption, article intro, cite, ACM intro. Lift to the dark muted token so they stay readable (mirrors light's ~muted). */ html[data-theme="dark"] .text-muted, html[data-theme="dark"] .blockquote-footer, html[data-theme="dark"] .figure-caption, html[data-theme="dark"] .figcaption, html[data-theme="dark"] cite, html[data-theme="dark"] .mod-article-list .articles-introtext, html[data-theme="dark"] .acym_introtext { color: var(--dm-text-muted) !important; } /* highlight keeps its light-on-dark relationship from light (by design). */ /* --------------------------------------------------------------------------- 5) Form fields (search, contact, login, register, comments, VirtueMart) White #fff fill + #eee border in light → elevated surface + field border. --------------------------------------------------------------------------- */ html[data-theme="dark"] input.inputbox, html[data-theme="dark"] .form-control, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] .chzn-single, html[data-theme="dark"] .custom-select { background-color: var(--dm-surface-2); color: var(--dm-text); border-color: var(--dm-field-border); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--dm-text-muted); } /* VM header search uses a dark PNG magnifier baked into the input's background-image (right 16px center) → invisible on the dark field. Swap for a light SVG magnifier. */ html[data-theme="dark"] .header-block-1 .search .inputbox, html[data-theme="dark"] .search .inputbox { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%238c97a8' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cline x1='9.7' y1='9.7' x2='13' y2='13'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; } /* Form labels / legends (literal #212529 on many forms — contact/login/edit). */ html[data-theme="dark"] label, html[data-theme="dark"] legend, html[data-theme="dark"] .control-label, html[data-theme="dark"] .form-label, html[data-theme="dark"] .controls label { color: var(--dm-text); } /* :focus re-asserts light bg/text in many templates (gotcha #16, #43). */ 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); } /* Validation error state. On submit, AcyMailing flags fields with .acym_invalid_field (#f2dede) and Joomla with .invalid (#ffffdd) — a near-white field on the dark page. Keep the field dark and signal the error with a clear red border (the shipped #9d261d is too dark to read on dark). */ html[data-theme="dark"] input.acym_invalid_field, html[data-theme="dark"] textarea.acym_invalid_field, html[data-theme="dark"] .acym_invalid_field, html[data-theme="dark"] input.invalid, html[data-theme="dark"] textarea.invalid, html[data-theme="dark"] select.invalid { background-color: var(--dm-surface-2) !important; color: var(--dm-text) !important; border-color: #e2574c !important; } /* Joomla legacy validation also paints the LABEL itself (label.invalid{background:#fff; color:red}). Our generic dark `label{color:--dm-text}` then leaves LIGHT text on a WHITE box → unreadable. Drop the white box and signal the error with readable red text, like the field's red border. (0,2,2) beats both label.invalid (0,1,1) and the generic label. */ html[data-theme="dark"] label.invalid { background-color: transparent !important; color: #e9897f !important; } /* Error message blocks (light pink/white boxes) → dark surface, readable red text. */ html[data-theme="dark"] div.acym_module_error, html[data-theme="dark"] .acym__field__error__block { background-color: var(--dm-surface-2) !important; border-color: #e2574c !important; color: #e9897f !important; } /* --------------------------------------------------------------------------- 6) Off-canvas mobile menu (panel #fff, header dark, drill-down arrows) --------------------------------------------------------------------------- */ html[data-theme="dark"] .t4-offcanvas, html[data-theme="dark"] .c-offcanvas { background: var(--dm-surface); } html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header { background-color: var(--dm-surface-2); border-bottom-color: var(--dm-border); } html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header .close { background-color: var(--dm-surface); display: flex; align-items: center; justify-content: center; /* Base CSS leaves .close at width:auto; with display:flex the box collapses to the glyph width (~13px) while height stays 32px → border-radius:50% renders a vertical ELLIPSE. Lock it back to a 32×32 square so it's a circle, like light mode. */ width: 32px; height: 32px; flex: 0 0 auto; } /* The × glyph used line-height:28px + top:-2px in a 32px box → off-centre (worse once the box is flex-centred). Reset to a clean flex centre. */ html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header .close span { color: var(--dm-text); height: auto; width: auto; line-height: 1; top: 0; } /* Base template spins the glyph on hover (.close:hover span{transform:rotate(180deg)}). The × is 180°-symmetric so the spin is invisible, BUT the rotation pivots on the box centre while the glyph's optical centre is offset → the × visibly JUMPS on hover (box itself never moves). Kill the rotate so the glyph stays put. */ html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header .close:hover span, html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header .close:focus span, html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header .close:active span { transform: none; } /* Body links — a literal #212121 rule (4-class) overrides the var; match it. */ html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .nav-link, html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .separator, html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu .dropdown-item, html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu .nav-link { color: var(--dm-text); } /* Drill-down caret button: light circle #f0f0f0 + #9e9e9e chevron → surface + light. */ html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle { background-color: var(--dm-surface-2); color: var(--dm-text); } html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle:hover, html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle:focus { background-color: var(--dm-surface-2); color: var(--dm-heading); } /* --------------------------------------------------------------------------- 7) Content surfaces — cards, sections, VirtueMart, pagination --------------------------------------------------------------------------- */ /* Article intro card (.item-content). Light is #f2f2f2 on a #fff page — a ~5% tint that reads as NO box (blends invisibly). On the featured/blog cards (image stacked ABOVE the text, not behind it) a --dm-surface fill instead becomes a loud two-tone split light never has. Mirror light's invisible box → transparent (blend with the page). */ html[data-theme="dark"] .item-content { background-color: transparent; } /* Section bands (.section-features #f2f3f7) → subtle dark band. */ html[data-theme="dark"] .section-features { background-color: var(--dm-band); } /* Product neighbours (prev/next nav) → surface. */ html[data-theme="dark"] .productdetails-view .product-neighbours { background-color: var(--dm-surface); border-color: var(--dm-border); } /* Product gallery: light leaves the media container transparent (photo sits on the page). A dark surface fill made a 2-tone band around the photo; mirror light — stay transparent so the container blends with the page. */ html[data-theme="dark"] .vm-product-media-container { background-color: transparent; border-color: var(--dm-border); } /* Pagination — page links keep transparent bg in light; lift border + text. */ html[data-theme="dark"] .pagination .page-link { background-color: transparent; border-color: var(--dm-border); color: var(--dm-text); } html[data-theme="dark"] .pagination .page-item.disabled .page-link { color: var(--dm-text-muted); } /* Cart dropdown caret (::after border-top:#000) → light. */ html[data-theme="dark"] .dropdownCart-btn::after { border-top-color: var(--dm-text); } /* Header cart icon: the template ships a fixed DARK bag PNG (background-image) that ignores the header colour — invisible on dark/navy headers and inconsistent with the theme toggle. Re-render it as a MASK filled with currentColor, so the bag ALWAYS takes the header text colour — identical treatment to the toggle, in every header layout and both light & dark (gotcha §17). This block is unscoped (applies in both modes); the dark text colour is set just below. */ #head-cart-dropdown { color: inherit; /*