/* =====================================================================
JA Spark — Dark Mode (darkmode.css)
---------------------------------------------------------------------
THE dark-mode stylesheet (vega standard). It lives in its OWN file —
NOT custom.css, which is the site owner's GUI-managed file (T4 reads/
writes css/custom.css from the admin "Edit Custom CSS" box, so dark
rules there get clobbered the moment the owner saves a tweak).
Loaded LAST, after the optimize bundle, via $doc->addCustomTag() in
html/layouts/t4/index.php — so equal-specificity dark rules win the tie
over template.css (registering it as a normal stylesheet risks loading
BEFORE the bundle).
It does NOT touch light mode — every rule is scoped under
`body.dark-active`, the template's own cookie-driven dark hook (resolved
server-side in html/layouts/t4/index.php, toggled in js/template.js).
Foundation: in dark mode the also carries data-bs-theme="dark"
(set server-side + on toggle), so Bootstrap's own dark component variants
(alerts, buttons, forms, tables, dropdowns, selects, icons …) apply for
free. This file fixes the TEMPLATE-SPECIFIC gaps that Bootstrap + JA
Spark's shipped dark block (scss/_styles.scss → bundle) don't cover.
Accent is PER-HOME, in `--color-secondary` (lime #b1e346 / amber #fac12f
/ pale-yellow #ffe979), keyed by the theme-* body class — NEVER hard-code
lime; reference the token. `--color-primary` (#18181b) is near-black ink,
not the accent, and is used as a background in places, so it is NOT
flipped globally.
── Self-edit palette ────────────────────────────────────────────────
===================================================================== */
body.dark-active {
--dm-bg: #000000; /* page background (matches upstream --body-bg-color) */
--dm-surface: #121212; /* elevated cards/panels */
--dm-surface-2: #0d0d0d; /* very-subtle section lift (mirrors light #F6F8F1) */
--dm-border: rgba(255, 255, 255, 0.12);
--dm-text: rgba(255, 255, 255, 0.80);
--dm-heading: #ffffff;
--dm-muted: rgba(255, 255, 255, 0.55);
/* Content links use the template's own var (per-style root sets it #000 → invisible
on dark). Bootstrap's --t4-link-color doesn't drive these, so flip it here. Hover
stays the per-home accent. */
--body-link-color: var(--dm-text);
--body-link-hover-color: var(--color-secondary);
/* Keep Bootstrap link tokens off their dark-mode blue, on the template ink. */
--t4-link-color: var(--dm-text);
--t4-link-hover-color: var(--color-secondary);
/* Masthead/breadcrumb band uses --tpl-primary-light (#F6F8F1) directly. */
--tpl-primary-light: var(--dm-surface-2);
}
/* ---------------------------------------------------------------------
1. White cards (.bg-white / .bg-light) are darkened by JA Spark's dark
block, but a paired .bg-text-dark keeps text near-black → invisible.
Restore light ink on the darkened surface (e.g. home feature cards).
--------------------------------------------------------------------- */
body.dark-active .bg-white.bg-text-dark,
body.dark-active .bg-light.bg-text-dark {
--body-text-color: var(--dm-text);
--headings-color: var(--dm-heading);
color: var(--dm-text);
}
/* ---------------------------------------------------------------------
2. .text-primary utility = near-black ink (--color-primary) → flip to
heading-light on dark (stat numbers, emphasised inline text).
--------------------------------------------------------------------- */
/* SATURATED coloured fills (.bg-info/.bg-warning/.bg-success/.bg-secondary…)
keep their colour in dark, so a paired .text-dark must STAY dark (mirror
light). NEUTRAL fills (.bg-light/.bg-white) darken in dark, so THEIR .text-dark
must flip light — same as standalone page usage. */
body.dark-active .text-primary:not([class*="bg-"]),
body.dark-active .bg-light.text-primary,
body.dark-active .bg-white.text-primary {
color: var(--dm-heading) !important;
}
body.dark-active .text-dark:not([class*="bg-"]),
body.dark-active .bg-light.text-dark,
body.dark-active .bg-white.text-dark {
color: var(--dm-text) !important;
}
/* ---------------------------------------------------------------------
2b. White-on-fill restore set — the topbar background STAYS the lime accent
(--color-secondary) in dark, but the global text flip turns its tagline
text white → unreadable on lime. Light keeps it near-black; mirror that.
(Badges/card-headers on .bg-secondary are white-on-lime in BOTH modes —
by-design, left alone.)
--------------------------------------------------------------------- */
body.dark-active .t4-topbar {
--body-text-color: var(--color-primary);
color: var(--color-primary);
}
/* ---------------------------------------------------------------------
3. Dropdown caret triangle — hardcoded near-black border-top.
--------------------------------------------------------------------- */
body.dark-active .item-caret::before {
border-top-color: currentColor;
}
/* ---------------------------------------------------------------------
4. .section-highlight bands — light #F6F8F1 + light grid PNG overlays.
Mirror light's subtlety: a barely-lifted dark surface, grids hushed.
--------------------------------------------------------------------- */
body.dark-active .section-highlight,
body.dark-active .section-highlight-2 {
background-color: var(--dm-surface-2);
}
body.dark-active .section-highlight::before,
body.dark-active .section-highlight::after,
body.dark-active .section-highlight-2::before,
body.dark-active .section-highlight-2::after {
opacity: 0.04;
}
/* ---------------------------------------------------------------------
5. Always-white palette band -> dark surface.
--------------------------------------------------------------------- */
body.dark-active .t4-palette-light {
background-color: var(--dm-surface) !important;
color: var(--dm-text);
}
/* ---------------------------------------------------------------------
6. Megamenu / dropdown frosted-white panel -> dark frosted.
--------------------------------------------------------------------- */
body.dark-active .t4-megamenu .dropdown-menu {
background-color: rgba(18, 18, 18, 0.96);
}
/* ---------------------------------------------------------------------
6b. Back-to-top button — hardcoded white bg; its icon is --headings-color
(white in dark) → white-on-white. Mirror light: dark surface, light icon.
--------------------------------------------------------------------- */
body.dark-active #back-to-top {
background-color: var(--dm-surface);
}
body.dark-active #back-to-top:hover,
body.dark-active #back-to-top:focus,
body.dark-active #back-to-top:active {
background-color: #2a2a2a;
color: var(--dm-heading);
}
/* ---------------------------------------------------------------------
7. Logo — shipped PNG has near-black "Spark" wordmark that vanishes on
dark. Swap to the recoloured variant (lime mark kept, text white).
--------------------------------------------------------------------- */
body.dark-active .logo-img {
content: url("../../../images/joomlart/logo-dark.png");
}
/* ---------------------------------------------------------------------
9. Buttons whose fixed palette doesn't adapt to dark.
.btn-outline-dark / -primary carry near-black ink+border -> invisible.
Mirror light (subtle outline) with light ink+border; hover inverts.
--------------------------------------------------------------------- */
body.dark-active .btn-outline-dark {
--t4-btn-color: var(--dm-text);
--t4-btn-border-color: var(--dm-border);
--t4-btn-hover-color: #000;
--t4-btn-hover-bg: var(--dm-text);
--t4-btn-hover-border-color: var(--dm-text);
--t4-btn-active-color: #000;
--t4-btn-active-bg: var(--dm-text);
--t4-btn-active-border-color: var(--dm-text);
}
/* The template hardcodes `color:#1E1E1E` at `.t4-wrapper .btn.btn-outline-dark`
(0,3,0) which beats the token. Match+beat it for the rest state. */
body.dark-active .btn.btn-outline-dark {
color: var(--dm-text);
border-color: var(--dm-border);
}
body.dark-active .btn-outline-primary {
color: var(--dm-text);
border-color: var(--dm-border);
}
body.dark-active .btn-outline-primary:hover,
body.dark-active .btn-outline-primary:focus,
body.dark-active .btn-outline-primary:active {
color: #000;
background-color: var(--dm-text);
border-color: var(--dm-text);
}
/* .btn-light is a subtle light button in light mode; mirror its subtlety as a
subtle DARK surface. Its bg is painted by `.btn.btn-light{background-color:var(--color-light)}`
(0,2,0), so match+beat with `body.dark-active .btn.btn-light` (0,3,1). */
body.dark-active .btn.btn-light {
background-color: var(--dm-surface);
border-color: var(--dm-border);
color: var(--dm-text);
}
body.dark-active .btn.btn-light:hover,
body.dark-active .btn.btn-light:focus,
body.dark-active .btn.btn-light:active {
background-color: #1c1c1c;
border-color: var(--dm-border);
color: var(--dm-heading);
}
/* ---------------------------------------------------------------------
10. ACM team cards — hardcoded white background.
--------------------------------------------------------------------- */
body.dark-active .acm-team.style-1 .item {
background: var(--dm-surface);
}
/* ---------------------------------------------------------------------
12. Off-canvas mobile menu — panel/header/toggle backgrounds are hardcoded
light (#fff / #f8f9fa / #f2f4f6) while the nav links flip to light via
--headings-color → white-on-white. Mirror light: dark panel, light text.
Use ONE uniform surface for the whole drawer (panel = header = drilldown
submenu = back-row) so drilling in doesn't show mismatched dark bands.
--------------------------------------------------------------------- */
body.dark-active .t4-offcanvas,
body.dark-active .t4-offcanvas .t4-off-canvas-header,
body.dark-active .t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu,
body.dark-active .t4-offcanvas .navbar.drilldown-effect .sub-menu-back {
background-color: var(--dm-surface);
}
body.dark-active .t4-offcanvas .t4-off-canvas-header {
border-color: var(--dm-border);
}
/* drill-in/out (▸/◂) buttons: a hair lighter than the uniform panel so they
still read as tappable controls. */
body.dark-active .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle {
background-color: rgba(255, 255, 255, 0.06);
color: var(--dm-muted);
}
body.dark-active .t4-offcanvas .t4-off-canvas-body .navbar .nav-link,
body.dark-active .t4-offcanvas .t4-off-canvas-body .navbar .separator,
body.dark-active .t4-offcanvas .navbar.drilldown-effect .sub-menu-back {
color: var(--dm-text);
}
/* hover/active = accent (mirrors light); the shipped rule's hover colour reads
dark on the now-dark panel. */
body.dark-active .t4-offcanvas .t4-off-canvas-body .navbar .nav-link:hover,
body.dark-active .t4-offcanvas .t4-off-canvas-body .navbar .nav-link:focus,
body.dark-active .t4-offcanvas .t4-off-canvas-body .navbar .nav-link:active,
body.dark-active .t4-offcanvas .t4-off-canvas-body .navbar .nav-item.active > .nav-link {
color: var(--color-secondary);
}
/* ---------------------------------------------------------------------
13. Popular-tags hover — bg var(--t4-gray-200) (#e9ecef) is a fixed light
grey → a light flash on the dark page. Mirror light's subtlety.
--------------------------------------------------------------------- */
body.dark-active .tagspopular ul > li:hover,
body.dark-active .tagspopular ul > li:focus,
body.dark-active .tagspopular ul > li:active {
background: var(--dm-surface);
}
/* ---------------------------------------------------------------------
11. Contact "links" list (website/social) — hardcoded #f8f9fa chips.
Rule `.contact .contact-links ul.nav li a` (0,3,3) — match+beat.
--------------------------------------------------------------------- */
body.dark-active .contact .contact-links ul.nav li a {
background-color: var(--dm-surface);
color: var(--dm-text);
}
/* ---------------------------------------------------------------------
14. SVG ICONS — feature-grid icons loaded as ![]()
can't be recoloured via
fill/stroke. Two sets render DARK on the dark cards → invisible:
• `ico-1..17.svg` — monochrome near-black (#18181B)
• `icon-20/21/22` — currentColor (resolves to black inside an ![]()
)
In light they're dark icons on white cards; mirror that → light on dark.
The `icon-2` pattern catches 20/21/22 only — the MULTICOLOUR illustrations
(icon-10/18/19), the blue #4d6bff icons (section-3/4) and the brand logos
are intentionally left untouched (they read fine on dark).
--------------------------------------------------------------------- */
body.dark-active img[src*="/section-6/ico-"],
body.dark-active img[src*="/section-6/icon-2"] {
filter: invert(1);
}
/* ---------------------------------------------------------------------
16. Accent-filled SECTIONS (.bg-secondary = the per-home accent lime/amber/
yellow) keep their bright fill in dark — like the topbar — so their text
must stay DARK (mirror light). The global flip turns it white → unreadable
on yellow (Product hero "Master Your Home's Smart Devices"). Scoped to
.t4-section so badges/buttons .bg-secondary keep their own white text.
--------------------------------------------------------------------- */
body.dark-active .t4-section.bg-secondary {
--headings-color: var(--color-primary);
--body-text-color: var(--color-primary);
color: var(--color-primary);
}
/* ---------------------------------------------------------------------
17. .heading-link hover (article/magazine titles) uses --color-primary
(near-black, unchanged in dark) → dark-on-dark ugly hover. Use the
per-home accent instead — visible, on-brand, matches other link hovers.
--------------------------------------------------------------------- */
body.dark-active .heading-link:hover,
body.dark-active .heading-link:focus,
body.dark-active .heading-link:active {
color: var(--color-secondary);
}
/* ---------------------------------------------------------------------
18. Company-timeline cards — `.timeline-item-info` has a hardcoded white bg
(rule `.timeline-wrap .timeline-item .timeline-item-info`, 0,3,0). On dark
the card stays white while its text flips light → invisible text on a
jarring white block. Mirror light (white card, dark text) → dark card,
light text. Match+beat the source specificity.
--------------------------------------------------------------------- */
body.dark-active .timeline-wrap .timeline-item .timeline-item-info {
background: var(--dm-surface);
}
/* ---------------------------------------------------------------------
19. Choices.js dropdown (Time Zone / language selects on edit-profile etc.)
is a JS widget with its own LIGHT styling that data-bs-theme doesn't
reach — the OPEN dropdown panel + search input stay white and the options
are white-text-on-light-grey (invisible). Dark-theme the open widget.
(The closed `.choices__inner` is already dark via Bootstrap.)
--------------------------------------------------------------------- */
/* Choices.js is fully CSS-variable driven — remap its --choices-* tokens (it has
no :root defaults, only inline fallbacks, so our definitions win cleanly). This
covers the dropdown panel, the search input and the disabled/keyline colours in
one place. */
body.dark-active .choices,
body.dark-active .choices__list--dropdown {
--choices-bg-color: var(--dm-surface);
--choices-bg-color-dropdown: var(--dm-surface);
--choices-bg-color-disabled: #2a2a2a;
--choices-keyline-color: var(--dm-border);
--choices-highlighted-color: rgba(255, 255, 255, 0.08);
--choices-disabled-color: var(--dm-muted);
}
/* dropdown option text + the highlighted (hover/keyboard) row */
body.dark-active .choices__list--dropdown .choices__item {
color: var(--dm-text);
}
body.dark-active .choices__list--dropdown .choices__item--selectable.is-highlighted,
body.dark-active .choices__list--dropdown .choices__item.is-highlighted {
background-color: rgba(255, 255, 255, 0.08);
color: var(--dm-heading);
}
/* selected-item remove (×) button uses a black SVG → invert to white on dark */
body.dark-active .choices[data-type*="select-one"] .choices__button {
filter: invert(1) grayscale(1);
opacity: 0.6;
}
/* ---------------------------------------------------------------------
15. Decorative bg-shape backgrounds are near-white light-mode glow PNGs
(.bg-shape-3 uses background-size:cover) → on the dark page they become
bright washed-out bands that wreck text contrast (Corporate/Business
feature sections). Replace with a whisper-subtle, per-home-accent-tinted
dark glow: readable text, keeps a tasteful on-brand ambiance.
--------------------------------------------------------------------- */
body.dark-active .bg-shape,
body.dark-active .bg-shape-2,
body.dark-active .bg-shape-3 {
background-image: radial-gradient(80% 60% at 50% 100%,
color-mix(in srgb, var(--color-secondary) 7%, transparent), transparent 70%);
}
/* Note: the standalone documents (error.php / offline.php) load NEITHER the
T4 bundle NOR this darkmode.css. Their dark theme is delivered by a
self-contained inline