/* ==========================================================================
JA Vogue — DARK MODE
--------------------------------------------------------------------------
Light mode is the original, approved design and is NOT modified anywhere in
this file. Every rule is scoped under `html.t4-dark` (the T4 dark hook set
pre-paint in index.php + by js/darkmode.js). Dark MIRRORS light — same
relationships, never adds a border/box/glow that light doesn't have. The
brand accent (#4d6bff) is kept.
DELIVERY (the "vega standard"): this is its OWN file (NOT custom.css, which is
the site-owner's GUI file). It is loaded LAST in via addCustomTag() in
index.php so it wins equal-specificity ties over template.css. The toggle is
STATIC markup in the header layout overrides (html/layouts/t4/block/header-*.html
+ .../layout/offcanvas.php); darkmode.js only wires the click.
Edit the palette below to re-tune the whole theme from one place.
========================================================================== */
/* ------------------------------------------------------------------ palette */
html.t4-dark {
/* surfaces — mirror the template's cool-charcoal brand family (#192227) */
--dm-bg: #14181d; /* page background */
--dm-band: #1a2027; /* subtle band / .bg-light / footer */
--dm-surface: #1e252d; /* raised surface (opaque panels) */
--dm-surface-2: #27303a; /* elevated surface (inputs, chips, hovers) */
--dm-border: #323b45; /* every divider / frame / separator */
--dm-field-border:#475059; /* form fields + outline buttons (1 step up)*/
/* text */
--dm-text: #c2c8d0; /* body copy */
--dm-text-muted: #8b939d; /* meta / muted */
--dm-heading: #eef1f5; /* headings / strong links */
/* accent — KEPT from light (#4d6bff); only a lifted hover for dark */
--dm-accent: #4d6bff;
--dm-accent-hover:#8098ff;
color-scheme: dark;
}
/* ------------------------------------------------- TOKEN REMAP (big lever) */
html.t4-dark {
/* JA color tokens */
--body-bg-color: var(--dm-bg);
--body-text-color: var(--dm-text);
--body-link-color: var(--dm-heading);
--body-link-hover-color:var(--dm-accent-hover);
--heading-color: var(--dm-heading);
--color-light: var(--dm-band);
--mainnav-link-color: var(--dm-heading);
--mainnav-text-color: var(--dm-text);
--mainnav-link-hover-color: var(--dm-accent-hover);
--mainnav-link-active-color:var(--dm-accent-hover);
--footer-bg-color: var(--dm-bg); /* light footer is #fff (=page) — blend, don't band */
--footer-text-color: var(--dm-text);
--footer-link-color: var(--dm-text);
--footer-link-hover-color: var(--dm-accent-hover);
/* Bootstrap-as-T4 tokens actually used by components */
--t4-body-bg: var(--dm-bg);
--t4-body-color: var(--dm-text);
--t4-emphasis-color: var(--dm-heading);
--t4-heading-color: var(--dm-heading);
--t4-border-color: var(--dm-border);
--t4-secondary-bg: var(--dm-band);
--t4-secondary-color: var(--dm-text-muted);
--t4-tertiary-bg: var(--dm-surface);
--t4-tertiary-color: var(--dm-text-muted);
--t4-light: var(--dm-band);
--t4-light-rgb: 26, 32, 39;
--t4-emphasis-color-rgb:238, 241, 245;
/* -rgb companions — the bundle uses rgba(var(--t4-*-bg-rgb),.85) for the
sticky header + overlays; without these they'd stay translucent WHITE. */
--t4-body-bg-rgb: 20, 24, 29;
--t4-secondary-bg-rgb: 26, 32, 39;
--t4-tertiary-bg-rgb: 30, 37, 45;
--t4-body-color-rgb: 194, 200, 208;
/* form controls */
--t4-input-bg: var(--dm-surface);
--t4-input-color: var(--dm-text);
--t4-input-border-color:var(--dm-field-border);
--t4-input-focus-bg: var(--dm-surface-2);
--t4-input-focus-color: var(--dm-heading);
/* dropdowns / cards as bootstrap components */
--t4-dropdown-bg: var(--dm-surface);
--t4-dropdown-color: var(--dm-text);
--t4-dropdown-link-color:var(--dm-text);
--t4-dropdown-border-color: var(--dm-border);
--t4-card-bg: var(--dm-surface);
--t4-card-color: var(--dm-text);
--t4-card-border-color: var(--dm-border);
}
/* ---------------------------------------------------------- foundations */
html.t4-dark body { background: var(--dm-bg); color: var(--dm-text); }
html.t4-dark .t4-wrapper,
html.t4-dark #t4-wrapper,
html.t4-dark .t4-content,
html.t4-dark .t4-mainbody,
html.t4-dark .t4-main-body { background: var(--dm-bg); }
/* every literal #4B4A51 / #dee2e6 / #ced4da border in the bundle is routed
through --dm-border in the component sections below. */
/* ============================ TOGGLE TRANSITION ========================== */
/* A smooth cross-fade when switching dark<->light. The `.ja-theme-anim` class
is added to by template.js ONLY for ~0.5s during a user toggle, so
normal hover/scroll interactions are never slowed. Applies in BOTH modes
(it only animates colour changes — it does not alter the light design). */
html.ja-theme-anim,
html.ja-theme-anim body,
html.ja-theme-anim .t4-wrapper,
html.ja-theme-anim .t4-content,
html.ja-theme-anim .t4-main-body,
html.ja-theme-anim .t4-section,
html.ja-theme-anim .t4-header,
html.ja-theme-anim .t4-footer,
html.ja-theme-anim .t4-footnav,
html.ja-theme-anim .mainnav,
html.ja-theme-anim .t4-megamenu,
html.ja-theme-anim .t4-megamenu .dropdown-menu,
html.ja-theme-anim .card,
html.ja-theme-anim .btn,
html.ja-theme-anim .form-control,
html.ja-theme-anim .form-select,
html.ja-theme-anim textarea,
html.ja-theme-anim input,
html.ja-theme-anim .badge,
html.ja-theme-anim .alert,
html.ja-theme-anim .page-link,
html.ja-theme-anim .list-group-item,
html.ja-theme-anim .item-inner,
html.ja-theme-anim .module-inner,
html.ja-theme-anim a,
html.ja-theme-anim p,
html.ja-theme-anim span,
html.ja-theme-anim li,
html.ja-theme-anim h1, html.ja-theme-anim h2, html.ja-theme-anim h3,
html.ja-theme-anim h4, html.ja-theme-anim h5, html.ja-theme-anim h6,
html.ja-theme-anim .logo-img,
html.ja-theme-anim svg path {
transition: background-color .45s ease, color .4s ease, border-color .45s ease,
fill .4s ease, stroke .4s ease, filter .45s ease !important;
}
@media (prefers-reduced-motion: reduce) {
html.ja-theme-anim, html.ja-theme-anim * { transition: none !important; }
}
/* ============================ THEME TOGGLE (single state-flip button) ===== */
/* One round button on every header. Shows the icon of the mode you'll switch
TO: a moon while light (→ dark), a sun while dark (→ light). Renders in BOTH
modes; it's the toggle control, so styling it in light is allowed. */
.ja-theme-toggle {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto; /* never let a tight flex header squeeze it to 0 */
width: 38px;
height: 38px;
padding: 0;
border: 0; /* no border */
border-radius: 999px;
background: transparent;
color: #192227;
cursor: pointer;
vertical-align: middle;
overflow: hidden;
transition: background-color .2s ease, color .2s ease;
}
.ja-theme-toggle:hover { background: rgba(25, 34, 39, .07); }
/* both icons are stacked + centred so the swap can ANIMATE (rotate + fade) */
.ja-theme-toggle .ja-tt-ico {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
transition: opacity .4s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.ja-theme-toggle .ja-tt-ico svg { width: 18px; height: 18px; display: block; }
/* light mode -> MOON in (click to go dark), SUN spun out */
.ja-theme-toggle .ja-tt-moon { opacity: 1; transform: rotate(0) scale(1); }
.ja-theme-toggle .ja-tt-sun { opacity: 0; transform: rotate(90deg) scale(.3); }
/* dark mode -> SUN in (click to go light), MOON spun out.
Keyed off the dark HOOK (set pre-paint in ) so the STATIC button shows
the right icon on first paint, before darkmode.js runs. */
html.t4-dark .ja-theme-toggle .ja-tt-moon { opacity: 0; transform: rotate(-90deg) scale(.3); }
html.t4-dark .ja-theme-toggle .ja-tt-sun { opacity: 1; transform: rotate(0) scale(1); }
.ja-theme-toggle--desktop { margin-right: .5rem; }
.ja-theme-toggle--offcanvas { margin-left: auto; margin-right: .5rem; }
/* home-2 vertical rail -> stack the toggle + hamburger VERTICALLY, centred. */
.v-nav-middle {
display: flex;
flex-direction: column;
align-items: center;
gap: .6rem;
}
/* …but on mobile (<576px) home-2 collapses to a horizontal top header, so lay
the toggle + hamburger side by side there. */
@media (max-width: 575.98px) {
.v-nav-middle { flex-direction: row; }
}
/* home-6 header -> lay the toggle + hamburger side by side HORIZONTALLY. */
.header-block-5 .offcanvas {
display: flex;
flex-direction: row;
align-items: center;
gap: .35rem;
}
.v-nav-middle .ja-theme-toggle--desktop,
.header-block-5 .offcanvas .ja-theme-toggle--desktop { margin: 0; }
/* match the hamburger's footprint to the toggle so they read even, and clear
the template's margin-left:16px that knocked it off the shared axis. */
.v-nav-middle #triggerButton,
.header-block-5 .offcanvas #triggerButton {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin: 0;
}
/* dark-mode appearance */
html.t4-dark .ja-theme-toggle {
color: var(--dm-heading);
border-color: var(--dm-field-border);
}
html.t4-dark .ja-theme-toggle:hover { background: var(--dm-surface-2); }
/* ============================ COMPONENT SECTIONS ========================== */
/* ---- Header chrome: logo + inline SVG glyphs (all baked #192227) ---------- */
/* Logo is an ![]()
to a single-colour (#192227) SVG -> recolour to near-white. */
html.t4-dark .logo-image .logo-img,
html.t4-dark .t4-off-canvas-header .logo-img,
html.t4-dark .navbar-brand.logo-image img { filter: brightness(0) invert(1); }
/* Inline home + search glyph SVGs (stroke="#192227"). */
html.t4-dark .mainnav .navbar-brand svg path,
html.t4-dark .finder-btn-search svg path,
html.t4-dark .js-finder-searchform svg path { stroke: var(--dm-heading); }
/* header-1 right "SUBSCRIBE" envelope + any header icon fonts inherit colour. */
html.t4-dark .header-block .custom a { color: var(--dm-heading); }
/* hamburger bars (.patty = #4B4A51) */
html.t4-dark .patty,
html.t4-dark .patty:before,
html.t4-dark .patty:after,
html.t4-dark .c-offcanvas-content-wrap.is-open .patty:before,
html.t4-dark .c-offcanvas-content-wrap.is-open .patty:after { background-color: var(--dm-heading); }
/* ---- Dropdown / submenu panels (Bootstrap sets --t4-dropdown-bg:#fff ON the
element, beating the root remap) — covers desktop megamenu hover panels AND
the off-canvas / vertical-nav submenus (Home 1-6, Layout 1-3, etc.) which are
a plain nav.navbar, NOT .t4-megamenu, so they were leaking white. ----------- */
html.t4-dark .dropdown-menu {
--t4-dropdown-bg: var(--dm-surface);
--t4-dropdown-color: var(--dm-text);
--t4-dropdown-link-color: var(--dm-text);
--t4-dropdown-link-hover-bg: transparent;
--t4-dropdown-link-hover-color: var(--dm-accent-hover);
--t4-dropdown-link-active-bg: transparent;
--t4-dropdown-link-active-color: var(--dm-accent-hover);
--t4-dropdown-border-color: var(--dm-border);
background-color: var(--dm-surface);
border-color: var(--dm-border);
}
html.t4-dark .dropdown-item { color: var(--dm-text); }
/* light hovers dropdown items with TRANSPARENT bg + accent text (no box) —
mirror it; a surface box here looked like an ugly nested second background. */
html.t4-dark .dropdown-item:hover,
html.t4-dark .dropdown-item:focus { background-color: transparent; color: var(--dm-accent-hover); }
html.t4-dark .dropdown-item.active,
html.t4-dark .dropdown-item:active,
html.t4-dark .dropdown-item.current,
html.t4-dark .dropdown-menu li.active > a { background-color: transparent; color: var(--dm-accent-hover); }
/* light's desktop dropdown has NO shadow (border only) -> mirror it. */
html.t4-dark .t4-megamenu .dropdown-menu { box-shadow: none; }
html.t4-dark .t4-megamenu .megamenu > .dropdown-menu { background-color: var(--dm-surface); border-color: var(--dm-border); }
/* The COLLAPSED megamenu panel (a white dropdown in light) -> dark surface,
but ONLY at the width where it actually collapses — mirror light's own
media-query gating, so the inline desktop bar is never repainted. */
@media (max-width: 575.98px) {
html.t4-dark .nav-breakpoint-sm .t4-megamenu { background-color: var(--dm-surface); border-color: var(--dm-border); box-shadow: 0 12px 10px rgba(0,0,0,.4); }
}
@media (max-width: 767.98px) {
html.t4-dark .nav-breakpoint-md .t4-megamenu { background-color: var(--dm-surface); border-color: var(--dm-border); box-shadow: 0 12px 10px rgba(0,0,0,.4); }
}
@media (max-width: 991.98px) {
html.t4-dark .nav-breakpoint-lg .t4-megamenu { background-color: var(--dm-surface); border-color: var(--dm-border); box-shadow: 0 12px 10px rgba(0,0,0,.4); }
}
@media (max-width: 1199.98px) {
html.t4-dark .nav-breakpoint-xl .t4-megamenu { background-color: var(--dm-surface); border-color: var(--dm-border); box-shadow: 0 12px 10px rgba(0,0,0,.4); }
}
html.t4-dark .t4-megamenu .mega-col-title,
html.t4-dark .t4-megamenu .mega-col-title span,
html.t4-dark .t4-megamenu .mega-group-title,
html.t4-dark .t4-megamenu .dropdown-menu .menu-header,
html.t4-dark .t4-megamenu .dropdown-menu .nav-header { color: var(--dm-heading); }
html.t4-dark .t4-megamenu .mega-col-title { border-bottom-color: var(--dm-border); }
/* dropdown caret (border-top hardcoded #192227) tracks the nav link colour */
html.t4-dark .t4-megamenu .dropdown-toggle .item-caret::before,
html.t4-dark .t4-megamenu .navbar-nav > li > a .item-caret:before {
border-top-color: var(--mainnav-link-color);
}
/* mega badge pills "Hot/New/Popular" keep their saturated colour (by design) */
/* ---- Off-canvas drawer (hardcoded #fff / #f8f9fa / #f2f4f6) --------------- */
html.t4-dark .c-offcanvas,
html.t4-dark .t4-offcanvas { background-color: var(--dm-surface); color: var(--dm-text); }
/* Header bar must match the drawer body (no lighter strip, and light has NO
border here either — so don't add one; that line read as a white divider). */
html.t4-dark .t4-off-canvas-header {
background-color: transparent;
border-bottom: 0;
}
html.t4-dark .t4-off-canvas-header .close,
html.t4-dark .t4-offcanvas .close { background-color: transparent; }
html.t4-dark .t4-off-canvas-header .close,
html.t4-dark .t4-off-canvas-header .close span { color: var(--dm-heading); }
html.t4-dark .t4-offcanvas .sub-menu-back,
html.t4-dark .t4-offcanvas .btn-toggle {
background-color: var(--dm-surface-2);
color: var(--dm-text);
}
html.t4-dark .t4-offcanvas .sub-menu-back:hover,
html.t4-dark .t4-offcanvas .btn-toggle:hover { background-color: var(--dm-border); }
html.t4-dark .t4-offcanvas .t4-module,
html.t4-dark .t4-offcanvas .menu > li { border-color: var(--dm-border); }
html.t4-dark .t4-offcanvas a { color: var(--dm-text); }
html.t4-dark .t4-offcanvas a:hover,
html.t4-dark .t4-offcanvas .nav-link:hover,
html.t4-dark .t4-offcanvas .navbar-nav .nav-link:hover,
html.t4-dark .t4-offcanvas .nav-link:focus { color: var(--dm-accent-hover) !important; }
html.t4-dark .t4-offcanvas .nav-link { color: var(--dm-heading); }
/* legacy st-menu skin */
html.t4-dark .st-menu ul li a { color: var(--dm-text); }
html.t4-dark .st-menu ul li a:hover { color: var(--dm-heading); }
/* ---- Bootstrap contextual tokens (alerts / badges / subtle bands) -------- */
/* Light mode keeps pale tints + dark text; dark mode flips to dark tints +
light text — Bootstrap 5.3 dark relationship, mirrored. */
html.t4-dark {
--t4-primary-bg-subtle:#0a1a3a; --t4-primary-border-subtle:#264a8f; --t4-primary-text-emphasis:#8aa9ff;
--t4-secondary-bg-subtle:#212730; --t4-secondary-border-subtle:#3a424d; --t4-secondary-text-emphasis:#aeb6c0;
--t4-success-bg-subtle:#0a1f15; --t4-success-border-subtle:#1d4d36; --t4-success-text-emphasis:#7fd1a6;
--t4-info-bg-subtle:#06222b; --t4-info-border-subtle:#1a5563; --t4-info-text-emphasis:#76dff3;
--t4-warning-bg-subtle:#2c2305; --t4-warning-border-subtle:#665518; --t4-warning-text-emphasis:#ffd966;
--t4-danger-bg-subtle:#2c0d10; --t4-danger-border-subtle:#6e2a30; --t4-danger-text-emphasis:#f1949b;
--t4-light-bg-subtle:#1a2027; --t4-light-border-subtle:#323b45; --t4-light-text-emphasis:#eef1f5;
--t4-dark-bg-subtle:#10141a; --t4-dark-border-subtle:#2a323b; --t4-dark-text-emphasis:#aeb6c0;
/* pagination */
--t4-pagination-bg:var(--dm-surface);
--t4-pagination-color:var(--dm-text);
--t4-pagination-border-color:var(--dm-border);
--t4-pagination-hover-bg:var(--dm-surface-2);
--t4-pagination-hover-color:var(--dm-heading);
--t4-pagination-hover-border-color:var(--dm-border);
--t4-pagination-focus-bg:var(--dm-surface-2);
--t4-pagination-focus-color:var(--dm-heading);
--t4-pagination-active-bg:var(--dm-heading);
--t4-pagination-active-color:var(--dm-bg);
--t4-pagination-active-border-color:var(--dm-heading);
--t4-pagination-disabled-bg:var(--dm-band);
--t4-pagination-disabled-color:var(--dm-text-muted);
--t4-pagination-disabled-border-color:var(--dm-border);
}
/* ---- Cards (bundle sets --t4-card-bg:#fff on the element) ----------------- */
/* PLAIN cards only (no colour class) -> dark surface. Saturated colour cards
(.bg-primary / .text-bg-success / ...) keep their bright bg + white text. */
html.t4-dark .card:not([class*="bg-"]):not([class*="text-bg-"]),
html.t4-dark .card-outline-secondary,
html.t4-dark .com-finder__tips {
background-color: var(--dm-surface);
border-color: var(--dm-border);
}
html.t4-dark .card:not([class*="bg-"]):not([class*="text-bg-"]) {
--t4-card-bg: var(--dm-surface);
--t4-card-cap-bg: var(--dm-surface-2);
--t4-card-border-color: var(--dm-border);
}
html.t4-dark .card:not([class*="bg-"]):not([class*="text-bg-"]) > .card-header,
html.t4-dark .card:not([class*="bg-"]):not([class*="text-bg-"]) > .card-footer {
border-color: var(--dm-border);
}
/* the LIGHT card/badge (.bg-light / .text-bg-light: pale bg + dark text) ->
dark surface + light text — the only colour cards that flip in dark. */
html.t4-dark .card.bg-light,
html.t4-dark .card.text-bg-light {
background-color: var(--dm-surface) !important;
border-color: var(--dm-border);
color: var(--dm-heading) !important;
}
html.t4-dark .card.bg-light .card-header,
html.t4-dark .card.bg-light .card-title,
html.t4-dark .card.bg-light .card-text,
html.t4-dark .card.bg-light .card-body,
html.t4-dark .card.text-bg-light .card-header,
html.t4-dark .card.text-bg-light .card-title,
html.t4-dark .card.text-bg-light .card-text,
html.t4-dark .card.text-bg-light .card-body { color: var(--dm-heading) !important; }
/* ---- Tag-cloud chips (white in tags / popular-tags modules) --------- */
html.t4-dark .tagspopular li,
html.t4-dark .mod-tagspopular li,
html.t4-dark .mod-tags li,
html.t4-dark .tag-list li,
html.t4-dark .tagscloud li {
background-color: var(--dm-surface-2);
border-color: var(--dm-border);
}
html.t4-dark .tagspopular li a,
html.t4-dark .mod-tags li a { color: var(--dm-text); }
/* ---- Buttons ------------------------------------------------------------- */
/* Filled neutral buttons (the editorial black CTA) -> invert to a light button. */
html.t4-dark .btn-primary,
html.t4-dark .btn-dark {
background-color: var(--dm-heading);
border-color: var(--dm-heading);
--t4-btn-color: var(--dm-bg);
--t4-btn-hover-bg: #ffffff;
--t4-btn-hover-border-color: #ffffff;
--t4-btn-hover-color: var(--dm-bg);
--t4-btn-active-bg: #ffffff;
--t4-btn-active-border-color: #ffffff;
--t4-btn-active-color: var(--dm-bg);
color: var(--dm-bg);
}
html.t4-dark .btn-primary:active,
html.t4-dark .btn-dark:active {
background-color: #ffffff; border-color: #ffffff; color: var(--dm-bg);
}
/* The .filters .btn (active filter chip) uses --color-primary too. */
html.t4-dark .filters .btn,
html.t4-dark .filters .btn.active {
background-color: var(--dm-surface-2) !important;
color: var(--dm-heading);
border-color: var(--dm-field-border);
}
/* Filled subtle buttons (light/secondary/beige) -> a neutral surface button. */
html.t4-dark .btn-light,
html.t4-dark .btn-secondary {
background-color: var(--dm-surface-2);
border-color: var(--dm-field-border);
--t4-btn-color: var(--dm-heading);
--t4-btn-hover-bg: var(--dm-surface);
--t4-btn-hover-border-color: var(--dm-field-border);
--t4-btn-hover-color: var(--dm-heading);
color: var(--dm-heading);
}
/* Neutral OUTLINE buttons (rest state vanishes: charcoal/grey/light border+text). */
html.t4-dark .btn.btn-outline-primary,
html.t4-dark .btn.btn-outline-secondary,
html.t4-dark .btn.btn-outline-dark,
html.t4-dark .btn.btn-outline-light,
html.t4-dark .btn.btn-outline-white,
html.t4-dark .blog-list .item-readmore a,
html.t4-dark a.articles-title.btn {
border-color: var(--dm-field-border);
color: var(--dm-heading);
}
/* their hover sweep -> light fill + dark text (mirrors light's dark-fill hover) */
html.t4-dark .btn.btn-outline-primary:before,
html.t4-dark .btn.btn-outline-secondary:before,
html.t4-dark .btn.btn-outline-dark:before,
html.t4-dark .btn.btn-outline-light:before,
html.t4-dark .btn.btn-outline-white:before,
html.t4-dark .blog-list .item-readmore a:before,
html.t4-dark a.articles-title.btn:before { background: var(--dm-heading); }
html.t4-dark .btn.btn-outline-primary:hover, html.t4-dark .btn.btn-outline-primary:focus, html.t4-dark .btn.btn-outline-primary:active,
html.t4-dark .btn.btn-outline-secondary:hover,html.t4-dark .btn.btn-outline-secondary:focus,html.t4-dark .btn.btn-outline-secondary:active,
html.t4-dark .btn.btn-outline-dark:hover, html.t4-dark .btn.btn-outline-dark:focus, html.t4-dark .btn.btn-outline-dark:active,
html.t4-dark .btn.btn-outline-light:hover, html.t4-dark .btn.btn-outline-light:focus, html.t4-dark .btn.btn-outline-light:active,
html.t4-dark .btn.btn-outline-white:hover, html.t4-dark .btn.btn-outline-white:focus, html.t4-dark .btn.btn-outline-white:active,
html.t4-dark .blog-list .item-readmore a:hover, html.t4-dark .blog-list .item-readmore a:focus,
html.t4-dark a.articles-title.btn:hover {
color: var(--dm-bg) !important;
border-color: var(--dm-heading);
}
/* Pagination — the JA frontend style paints page-links white with no border in
light, but with the white page behind it there are NO visible boxes: active
is just darker text, normal is grey. Mirror that in dark: transparent bg,
muted text, BRIGHT text for active/hover, no white/filled boxes. */
html.t4-dark ul.pagination .page-link,
html.t4-dark .pagination .page-link {
background: transparent;
border: none;
color: var(--dm-text-muted);
}
html.t4-dark ul.pagination .page-link:hover,
html.t4-dark ul.pagination .page-link:focus,
html.t4-dark .pagination .page-link:hover { background: transparent; color: var(--dm-heading); }
html.t4-dark ul.pagination .active > .page-link,
html.t4-dark ul.pagination .page-item.active .page-link,
html.t4-dark ul.pagination .page-link.active,
html.t4-dark .pagination .page-item.active .page-link {
background: transparent; color: var(--dm-heading); border: none;
}
html.t4-dark ul.pagination .disabled > .page-link,
html.t4-dark ul.pagination .page-item.disabled .page-link { background: transparent; color: var(--dm-border); }
/* ---- Forms (literal #fff bg / #192227 text / #4B4A51 border in bundle) --- */
html.t4-dark .form-control,
html.t4-dark .form-select,
html.t4-dark textarea,
html.t4-dark input[type="text"],
html.t4-dark input[type="email"],
html.t4-dark input[type="password"],
html.t4-dark input[type="search"],
html.t4-dark input[type="url"],
html.t4-dark input[type="tel"],
html.t4-dark input[type="number"] {
background-color: var(--dm-surface);
color: var(--dm-text);
border-color: var(--dm-field-border);
}
html.t4-dark .form-control:focus,
html.t4-dark .form-select:focus,
html.t4-dark textarea:focus,
html.t4-dark input:focus {
background-color: var(--dm-surface-2);
color: var(--dm-heading);
border-color: var(--dm-accent-hover);
box-shadow: none;
}
html.t4-dark .form-control:disabled,
html.t4-dark .form-control[readonly] { background-color: var(--dm-band); color: var(--dm-text-muted); }
html.t4-dark .form-control::placeholder { color: var(--dm-text-muted); }
/* native select chevron (dark SVG) -> light */
html.t4-dark .form-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c2c8d0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
html.t4-dark .form-control::file-selector-button {
background-color: var(--dm-surface-2); color: var(--dm-text);
}
/* form labels / help text */
html.t4-dark .form-label,
html.t4-dark .col-form-label,
html.t4-dark legend { color: var(--dm-heading); }
html.t4-dark .form-text { color: var(--dm-text-muted); }
/* checkbox/radio */
html.t4-dark .form-check-input {
background-color: var(--dm-surface); border-color: var(--dm-field-border);
}
html.t4-dark .form-check-input:checked {
background-color: var(--dm-accent); border-color: var(--dm-accent);
}
/* sidebar/hero finder SUBMIT button is transparent (icon/word) -> light, not
the inverted-dark .btn-primary treatment used for solid CTAs */
html.t4-dark .mod-finder .btn-primary,
html.t4-dark .mod-finder__search .btn-primary,
html.t4-dark .mod-finder__search .btn,
html.t4-dark .finder-btn-search .btn {
color: var(--dm-heading) !important;
--t4-btn-color: var(--dm-heading);
background-color: transparent !important;
border-color: var(--dm-field-border);
}
/* the hero / sidebar finder search field */
html.t4-dark .js-finder-search-query,
html.t4-dark .mod-finder .form-control,
html.t4-dark .com-finder .form-control {
background-color: var(--dm-surface);
color: var(--dm-text);
border-color: var(--dm-field-border);
}
/* finder autocomplete suggestion list (white ) */
html.t4-dark .finder-suggestions,
html.t4-dark .awesomplete > ul,
html.t4-dark .awesomplete > ul li,
html.t4-dark .search-results li,
html.t4-dark ul.choices__list li { background-color: var(--dm-surface); color: var(--dm-text); }
/* ---- Featured split panel — ONLY .style-4 has a beige (--color-secondary)
bg in light; all other slide styles are transparent, so only repaint
style-4 (else we create a mismatched "different black" on the other homes). */
html.t4-dark .slide-articles-list.style-4 .article-content-wrap {
background-color: var(--dm-surface);
color: var(--dm-text);
}
html.t4-dark .slide-articles-list .article-content-wrap a,
html.t4-dark .slide-articles-list .article-content-wrap .category a { color: var(--dm-text); }
html.t4-dark .slide-articles-list .article-content-wrap .article-title,
html.t4-dark .slide-articles-list .article-content-wrap h1,
html.t4-dark .slide-articles-list .article-content-wrap h2,
html.t4-dark .slide-articles-list .article-content-wrap h3 { color: var(--dm-heading); }
/* category / meta labels that are hardcoded dark elsewhere */
html.t4-dark .category > a,
html.t4-dark .article-category a { color: var(--dm-text); }
/* Articles-Categories module: category title links + round icon (#f8f9fa) */
html.t4-dark .mod-articlescategories .cat-item a,
html.t4-dark .categories-module .cat-item a { color: var(--dm-heading); }
html.t4-dark .categories-module.layout-list .cat-item .category-icon {
background: var(--dm-surface-2);
color: var(--dm-heading);
}
/* categories sidebar link HOVER uses var(--color-primary) (#192227) -> vanishes
on dark; lift it to the accent so the text stays visible on hover. */
html.t4-dark .categories-module > li a:hover,
html.t4-dark .categories-module > li a:focus,
html.t4-dark .categories-module > li a:active,
html.t4-dark .categories-module a:hover,
html.t4-dark .categories-module a:focus,
html.t4-dark .mod-articlescategories a:hover,
html.t4-dark .mod-articlescategories a:focus { color: var(--dm-accent-hover); }
/* ---- list-group (tagged items list) -------------------------------------- */
html.t4-dark .list-group-item {
background-color: var(--dm-surface);
color: var(--dm-text);
border-color: var(--dm-border);
}
html.t4-dark .list-group-item-action:hover { background-color: var(--dm-surface-2); color: var(--dm-heading); }
html.t4-dark .item-tag-title a,
html.t4-dark .com-tags-tag .item-tag-title a,
html.t4-dark .com-tags-tag.tag-category .list-group .list-group-item .item-tag-title a { color: var(--dm-heading); }
html.t4-dark .com-tags-tag.tag-category .list-group .list-group-item .item-tag-title a:hover { color: var(--dm-accent-hover); }
/* ---- Owl-carousel nav arrows -------------------------------------------- */
/* Light keeps them transparent (just the glyph) -> mirror it: transparent box,
light glyph. (Boxing them surface created a mismatched "different black".) */
html.t4-dark .owl-nav button.owl-prev,
html.t4-dark .owl-nav button.owl-next,
html.t4-dark .owl-nav .owl-prev,
html.t4-dark .owl-nav .owl-next {
background-color: transparent !important;
color: var(--dm-heading) !important;
border-color: var(--dm-border);
}
html.t4-dark .owl-nav .owl-prev span,
html.t4-dark .owl-nav .owl-next span,
html.t4-dark .type-slider .owl-nav .owl-prev span,
html.t4-dark .type-slider .owl-nav .owl-next span { filter: invert(1) brightness(1.6); }
/* arrows drawn as inline SVG with a hardcoded stroke="#192227" (don't inherit
the button colour) -> recolour the path stroke/fill so they show on dark. */
html.t4-dark .owl-nav svg path,
html.t4-dark .owl-nav svg line,
html.t4-dark .owl-nav svg polyline,
html.t4-dark .owl-nav .owl-prev svg [stroke],
html.t4-dark .owl-nav .owl-next svg [stroke] { stroke: var(--dm-heading); }
html.t4-dark .owl-nav svg [fill]:not([fill="none"]) { fill: var(--dm-heading); }
html.t4-dark .com-tags-tag__pagination,
html.t4-dark .com-tags-tag .pagination-wrap,
html.t4-dark .com-tags-tag.tag-category .pagination-wrap { background-color: transparent; border-top-color: var(--dm-border); }
/* ---- Blog "Read more" button (white/bordered) + author byline ------------ */
html.t4-dark .btn-readmore {
background-color: transparent;
color: var(--dm-heading);
border-color: var(--dm-field-border);
}
html.t4-dark .btn-readmore:hover,
html.t4-dark .btn-readmore:focus {
background-color: var(--dm-surface-2);
color: var(--dm-accent-hover);
border-color: var(--dm-field-border);
}
/* author name in bylines (.createdby [itemprop=name] hardcoded #192227) */
html.t4-dark .createdby [itemprop="name"],
html.t4-dark .createdby a,
html.t4-dark .createdby span { color: var(--dm-text); }
/* ---- Related items: white-on-white card -> transparent (blends, mirror) -- */
html.t4-dark .relateditems .item-inner,
html.t4-dark .relateditems.mod-list .item-inner { background-color: transparent; }
/* ---- Article body: blockquote (beige #E9E1DD) ---------------------------- */
html.t4-dark .item-page blockquote,
html.t4-dark .item-page .blockquote,
html.t4-dark blockquote.h3 {
background-color: var(--dm-surface);
color: var(--dm-text);
}
/* the quote-glyph PNG pseudo (dark) -> lighten via filter so it shows */
html.t4-dark .item-page blockquote:before,
html.t4-dark .item-page blockquote:after { filter: invert(1) brightness(1.6); opacity: .5; }
/* ---- Article prev/next pager (white .btn-secondary) ---------------------- */
html.t4-dark .pagenavigation a,
html.t4-dark .com-content-article__pager a,
html.t4-dark a.btn.previous,
html.t4-dark a.btn.next {
background-color: var(--dm-surface-2) !important;
color: var(--dm-heading) !important;
border-color: var(--dm-field-border) !important;
}
/* ---- Social share / icon buttons (white outline circles) ----------------- */
html.t4-dark [class*="style-outline-"] a,
html.t4-dark .author-socials a,
html.t4-dark .contact-social .icon,
html.t4-dark .social-share a.icon {
background-color: var(--dm-surface-2) !important;
border-color: var(--dm-border) !important;
}
/* keep the brand glyph colour where it's the brand hue; neutral ones -> light */
html.t4-dark .author-socials a { color: var(--dm-heading) !important; }
/* contact component social icons (a.icon.ic-facebook etc.) */
html.t4-dark a.icon[class*="ic-"] {
background-color: var(--dm-surface-2) !important;
border-color: var(--dm-border) !important;
color: var(--dm-heading) !important;
}
/* newsletter (AcyMailing) layout cells are transparent in light -> mirror */
html.t4-dark .acym_module .cell,
html.t4-dark .acym__user__edit__email,
html.t4-dark .acymailing_module_form .cell { background-color: transparent; }
/* ---- smart-search advanced "Search" subbutton + newsletter subbutton ----- */
html.t4-dark input.subbutton,
html.t4-dark .subbutton,
html.t4-dark .acysubbuttons input,
html.t4-dark .acym_module td.acysubbuttons input {
background-color: var(--dm-surface-2) !important;
color: var(--dm-heading) !important;
border-color: var(--dm-field-border) !important;
}
/* ---- com_finder search submit button (forced white .btn-secondary) ------- */
html.t4-dark .com-finder .btn-secondary,
html.t4-dark .com-finder button.btn,
html.t4-dark form.form-search .btn-secondary {
background-color: var(--dm-surface-2) !important;
color: var(--dm-heading) !important;
border-color: var(--dm-field-border) !important;
}
/* ---- Neutral 'badge' tag chips that render white ------------------------- */
html.t4-dark a.badge.badge-info,
html.t4-dark .badge-info,
html.t4-dark .tags .badge,
html.t4-dark .area-tag .badge {
background-color: var(--dm-surface-2) !important;
color: var(--dm-text) !important;
border-color: var(--dm-border) !important;
}
html.t4-dark .tags .badge:hover,
html.t4-dark a.badge.badge-info:hover { color: var(--dm-heading) !important; border-color: var(--dm-field-border) !important; }
/* ---- Link hovers that hardcode a dark colour (#192227 / #1e293b) --------- */
html.t4-dark .navbar-nav .nav-link:hover,
html.t4-dark .navbar-nav .nav-link:focus { color: var(--dm-accent-hover); }
html.t4-dark .item-title a:hover,
html.t4-dark .article-title a:hover,
html.t4-dark .page-header h1 a:hover,
html.t4-dark .page-header h2 a:hover,
html.t4-dark .page-header h2 a:focus,
html.t4-dark .item-content h2 a:hover,
html.t4-dark .item-content h3 a:hover,
html.t4-dark .blog .item-title a:hover,
html.t4-dark .items-leading h2 a:hover { color: var(--dm-accent-hover); }
/* Module/content article-title + meta link hovers that the template sends to
var(--color-primary) (#192227) -> invisible on dark. Covers READ NEXT
(.latestnews), .article-info meta/byline, category links, etc. */
html.t4-dark .article-info a:hover,
html.t4-dark .article-info a:focus,
html.t4-dark .article-info a:active,
html.t4-dark .latestnews a:hover,
html.t4-dark .latestnews a:focus,
html.t4-dark .box-content a:hover,
html.t4-dark .box-content h3 a:hover,
html.t4-dark .mod-articles-category a:hover,
html.t4-dark .mod-articles-category a:focus,
html.t4-dark [class*="category"] a:hover,
html.t4-dark [class*="category"] a:focus { color: var(--dm-accent-hover) !important; }
/* off-canvas top-level nav links hover (jas-link dark) -> accent */
html.t4-dark .t4-offcanvas .nav > li > a:hover,
html.t4-dark .t4-offcanvas .navbar-nav > li > a:hover,
html.t4-dark .t4-offcanvas .navbar-nav > li > a:focus { color: var(--dm-accent-hover) !important; }
/* ---- Utility text/badges that go dark-on-dark ---------------------------- */
html.t4-dark .text-dark,
html.t4-dark .text-black { color: var(--dm-heading) !important; }
html.t4-dark .text-black-50 { color: var(--dm-text-muted) !important; }
html.t4-dark .border-dark { border-color: var(--dm-field-border) !important; }
/* ...but on BRIGHT contextual fills (yellow/cyan stay bright in dark) the
text must REMAIN dark for contrast — mirror light. */
html.t4-dark .bg-warning.text-dark, html.t4-dark .bg-warning .text-dark,
html.t4-dark .bg-info.text-dark, html.t4-dark .bg-info .text-dark,
html.t4-dark .progress-bar.bg-warning, html.t4-dark .progress-bar.bg-info,
html.t4-dark .badge.bg-warning, html.t4-dark .badge.bg-info { color: #14181d !important; }
html.t4-dark .text-secondary { color: var(--dm-text-muted) !important; }
/* a .bg-light badge becomes a dark chip on dark -> its text must be light */
html.t4-dark .badge.bg-light,
html.t4-dark .badge.text-bg-light,
html.t4-dark .badge.bg-light.text-dark { color: var(--dm-heading) !important; }