/** *------------------------------------------------------------------------------ * JA Impact — Dark Mode * Loaded by index.php as a separate stylesheet (injected LAST in , after * template.css AND custom.css) so these rules win the cascade. custom.css stays * the site owner's file; the dark theme lives here. * Everything is scoped under html[data-theme="dark"] so LIGHT MODE IS NEVER AFFECTED. *------------------------------------------------------------------------------ */ /* ========================================================================== 1. THEME VARIABLE OVERRIDES (the broad strokes) ========================================================================== */ html[data-theme="dark"] { /* Palette: deep navy-charcoal, keep green accent */ --dm-bg: #111a2c; /* page background (soft deep navy, not near-black, so gutters between image cards aren't harsh) */ --dm-surface: #1e2a45; /* cards / raised surfaces (kept a clear step up) */ --dm-surface-2: #28354f; /* hover / deeper surface */ --dm-border: #33415e; /* borders / dividers (more visible) */ --dm-card-border: #3a486a; /* crisp solid card edge (was muddy translucent) */ --dm-text: #c2c9d6; /* body text */ --dm-text-muted: #8c97a8; /* muted / secondary text */ --dm-heading: #eef1f6; /* headings */ --dm-link: #6f9bf0; /* lightened navy for links */ --dm-link-hover: #0cb76d; /* keep green hover */ --dm-accent: #0cb76d; /* brand green */ /* --- Template theme variables --- */ --body-bg-color: var(--dm-bg); --body-text-color: var(--dm-text); --body-link-color: var(--dm-link); --body-link-hover-color:var(--dm-link-hover); --headings-color: var(--dm-heading); --t4-bg-item: var(--dm-surface); /* --- Bootstrap (--t4- prefixed) base variables --- */ --t4-body-bg: var(--dm-bg); --t4-body-color: var(--dm-text); --t4-body-color-rgb: 194, 201, 214; --t4-body-bg-rgb: 17, 26, 44; --t4-emphasis-color: var(--dm-heading); --t4-secondary-color: var(--dm-text-muted); --t4-tertiary-color: var(--dm-text-muted); --t4-heading-color: var(--dm-heading); --t4-border-color: var(--dm-border); --t4-border-color-translucent: rgba(255, 255, 255, .12); --t4-link-color: var(--dm-link); --t4-link-color-rgb: 111, 155, 240; --t4-link-hover-color: var(--dm-link-hover); /* bg-light / bg-white sections become dark surfaces. NOTE: the theme injects --color-light:#fff9ef and `.bg-light` uses it. Keep bg-light SECTIONS only a hair above the page bg (like light mode's cream-vs-white ~1.03) so sections stay in sync and titles read clearly. */ --color-light: #141d33; --t4-light: var(--dm-surface); --t4-light-rgb: 30, 42, 69; --t4-white: var(--dm-surface); --t4-white-rgb: 30, 42, 69; /* NOTE: do NOT remap --t4-gray-100/200/300 here — those vars are also used for TEXT in several components (e.g. .count-number, acm style-2), so remapping them to dark surfaces makes that text unreadable. The few gray-var *backgrounds* (#back-to-top, .bg-gray-*) are darkened below. */ /* Cards */ --t4-card-bg: var(--dm-surface); --t4-card-color: var(--dm-text); --t4-card-border-color:var(--dm-border); --t4-card-cap-bg: var(--dm-surface-2); /* Subtle Bootstrap backgrounds used by alerts/badges */ --t4-light-bg-subtle: var(--dm-surface); --t4-secondary-bg: var(--dm-surface); --t4-secondary-bg-rgb: 30, 42, 69; --t4-tertiary-bg: var(--dm-surface-2); background-color: var(--dm-bg); color: var(--dm-text); } html[data-theme="dark"] body { background-color: var(--dm-bg); color: var(--dm-text); } /* ========================================================================== 2. HEADERS / TYPOGRAPHY ========================================================================== */ 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 { color: var(--dm-heading); } /* Content links: rely on --body-link-color / --t4-link-color (set above) so that links keep their CONTEXT color in light mode too — card-overlay titles (white), category badges (orange), breadcrumb (white), footer (grey). A blanket `a` override leaks the link-blue onto all of those, so we DON'T use one. Only plain body links (which use the link vars) turn blue. */ html[data-theme="dark"] .t4-content p a:not([class*="btn"]), html[data-theme="dark"] .article-intro a:not([class*="btn"]), html[data-theme="dark"] .com-content-article__body a:not([class*="btn"]), html[data-theme="dark"] .item-page a:not([class*="btn"]) { color: var(--dm-link); } html[data-theme="dark"] .t4-content p a:not([class*="btn"]):hover, html[data-theme="dark"] .item-page a:not([class*="btn"]):hover { color: var(--dm-link-hover); } /* Article prev/next pager links keep the brand navy (#1d3677), which is nearly invisible on the dark bg. Make them near-white at rest, green on hover. */ html[data-theme="dark"] .pagenavigation a, html[data-theme="dark"] .pagenavigation a span { color: var(--dm-heading); } html[data-theme="dark"] .pagenavigation a:hover, html[data-theme="dark"] .pagenavigation a:hover span { color: var(--dm-link-hover); } /* ========================================================================== 2b. PRIMARY-COLORED TEXT (--color-primary #1d3677 is too dark on dark bg) We lighten primary-colored *text* only; backgrounds/buttons keep brand navy. ========================================================================== */ html[data-theme="dark"] .text-primary { color: var(--dm-link) !important; } /* Component titles / meta that hard-code --color-primary for their text. These source rules are deeply nested, so we use !important to win cleanly. */ html[data-theme="dark"] .feature .title, html[data-theme="dark"] .feature .title a, html[data-theme="dark"] .event-location, html[data-theme="dark"] .section-title, html[data-theme="dark"] .mod-articles-category-title, html[data-theme="dark"] .mod-articles-category-title a, html[data-theme="dark"] .mod-articles-latest a, html[data-theme="dark"] .mod-articles-popular a, html[data-theme="dark"] .latestnews a, html[data-theme="dark"] .article-title, html[data-theme="dark"] .article-title a, html[data-theme="dark"] .item-title, html[data-theme="dark"] .item-title a, html[data-theme="dark"] .contentheading { color: var(--dm-heading) !important; } html[data-theme="dark"] .feature .title a:hover, html[data-theme="dark"] .mod-articles-category-title a:hover, html[data-theme="dark"] .article-title a:hover, html[data-theme="dark"] .item-title a:hover { color: var(--dm-link-hover) !important; } /* Date badge: white box w/ navy text -> dark surface w/ light text */ html[data-theme="dark"] .date-month { background-color: var(--dm-surface-2); } html[data-theme="dark"] .date-month .feature-date, html[data-theme="dark"] .date-month .feature-month { color: var(--dm-heading) !important; } /* ========================================================================== 3. HEADER — main menu links + menu bar + sticky header ========================================================================== */ /* Main navigation link colors (theme vars are navy by default) */ html[data-theme="dark"] { --mainnav-text-color: var(--dm-text); --mainnav-link-color: #d7deea; --mainnav-link-hover-color: var(--color-success); --mainnav-link-active-color: var(--color-success); } html[data-theme="dark"] .t4-megamenu .nav-link, html[data-theme="dark"] .t4-megamenu .nav-link .menu-item-title, html[data-theme="dark"] .t4-megamenu .menu-item-title, html[data-theme="dark"] .t4-megamenu .dropdown-toggle { color: #d7deea; } html[data-theme="dark"] .t4-megamenu .nav-link:hover .menu-item-title, html[data-theme="dark"] .t4-megamenu .nav-link:focus .menu-item-title, html[data-theme="dark"] .t4-megamenu .nav-link.active .menu-item-title, html[data-theme="dark"] .t4-megamenu .active > .nav-link .menu-item-title, html[data-theme="dark"] .t4-megamenu .current > .nav-link .menu-item-title { color: var(--color-success); } /* The navy top block (logo + contact) already uses --color-primary; keep it, it reads fine on dark. The white menu bar / sticky bar must go dark. */ html[data-theme="dark"] .not-at-top #t4-header.t4-sticky { background-color: var(--dm-surface); box-shadow: 0 3px 5px rgba(0, 0, 0, .5); } /* Mega-menu dropdown panels are white by default */ html[data-theme="dark"] .t4-megamenu .dropdown-menu, html[data-theme="dark"] .t4-megamenu .mega-dropdown-menu, html[data-theme="dark"] .t4-megamenu .nav-child, html[data-theme="dark"] .t4-megamenu .megamenu > li > .nav-child { background-color: var(--dm-surface); border-color: var(--dm-border); } /* ========================================================================== 4. SURFACES — cards, modules, boxes ========================================================================== */ html[data-theme="dark"] .card, html[data-theme="dark"] .t4-module.box, html[data-theme="dark"] .well, html[data-theme="dark"] .panel { background-color: var(--dm-surface); border-color: var(--dm-border); color: var(--dm-text); } /* ========================================================================== 5. BORDERS / DIVIDERS ========================================================================== */ html[data-theme="dark"] hr { border-color: var(--dm-border); color: var(--dm-border); opacity: 1; } html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom, html[data-theme="dark"] .border-start, html[data-theme="dark"] .border-end { border-color: var(--dm-border) !important; } /* ========================================================================== 6. FORMS / INPUTS ========================================================================== */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] textarea { background-color: var(--dm-surface); border-color: var(--dm-border); color: var(--dm-text); } html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--dm-text-muted); } /* On focus some inputs (AcyMailing .cell, etc.) force a dark text colour, which becomes invisible on the dark field. Keep focused text + bg readable. */ html[data-theme="dark"] input:focus, html[data-theme="dark"] input.cell:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .acym_form .cell:focus, html[data-theme="dark"] .acyfield_text:focus { color: var(--dm-text) !important; background-color: var(--dm-surface) !important; } html[data-theme="dark"] .form-control:disabled, html[data-theme="dark"] .form-control[readonly] { background-color: var(--dm-surface-2); } /* Form fieldsets / legends (Joomla registration, profile, etc.) */ html[data-theme="dark"] fieldset { border-color: var(--dm-border); } html[data-theme="dark"] legend { background-color: transparent; color: var(--dm-heading); border-color: var(--dm-border); } html[data-theme="dark"] .control-label, html[data-theme="dark"] .form-label, html[data-theme="dark"] label { color: var(--dm-text); } html[data-theme="dark"] .input-group-text { background-color: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text); } /* ========================================================================== 5b. MOBILE OFF-CANVAS DRAWER (white panel -> dark surface) ========================================================================== */ html[data-theme="dark"] .t4-offcanvas, html[data-theme="dark"] .c-offcanvas, html[data-theme="dark"] .t4-off-canvas-body, html[data-theme="dark"] .t4-off-canvas-body .t4-module, html[data-theme="dark"] .t4-off-canvas-body .module-inner, html[data-theme="dark"] .t4-off-canvas-body .navbar, html[data-theme="dark"] .t4-off-canvas-body .dropdown-menu, html[data-theme="dark"] .t4-off-canvas-body .nav-child, html[data-theme="dark"] .t4-off-canvas-body .mega-dropdown-menu { background-color: var(--dm-surface) !important; color: var(--dm-text); } /* Drilldown "< PAGES" back bar (was light grey + dark text) */ html[data-theme="dark"] .t4-off-canvas-body .sub-menu-back { background-color: var(--dm-surface-2) !important; color: var(--dm-text) !important; } html[data-theme="dark"] .t4-off-canvas-body .nav-item, html[data-theme="dark"] .t4-off-canvas-body .sub-menu-back, html[data-theme="dark"] .t4-off-canvas-body .dropdown-menu .nav-item { border-color: var(--dm-border) !important; } html[data-theme="dark"] .t4-off-canvas-body .nav-link, html[data-theme="dark"] .t4-off-canvas-body .menu-item-title, html[data-theme="dark"] .t4-off-canvas-body .dropdown-item, html[data-theme="dark"] .t4-off-canvas-body a:not([class*="btn"]) { color: var(--dm-text); } html[data-theme="dark"] .t4-off-canvas-body .active > .nav-link .menu-item-title, html[data-theme="dark"] .t4-off-canvas-body .current > .nav-link .menu-item-title, html[data-theme="dark"] .t4-off-canvas-body .nav-link:hover .menu-item-title { color: var(--color-success); } /* ========================================================================== 6b. UTILITY WHITE BACKGROUNDS (.bg-white / .bg-default and white controls) ========================================================================== */ html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-default, html[data-theme="dark"] .item-detail.bg-white, html[data-theme="dark"] .item-content.bg-default, html[data-theme="dark"] .date-month.bg-default, html[data-theme="dark"] .date-month { background-color: var(--dm-surface) !important; color: var(--dm-text); } /* Date badge text stays light on its dark surface */ html[data-theme="dark"] .date-month.bg-default .feature-date, html[data-theme="dark"] .date-month.bg-default .feature-month { color: var(--dm-heading) !important; } /* "btn-white" CTA: white box w/ navy text -> dark surface w/ light text */ html[data-theme="dark"] .btn-white, html[data-theme="dark"] .link-heading.btn-white { --t4-btn-color: var(--dm-heading); --t4-btn-bg: var(--dm-surface-2); --t4-btn-border-color: var(--dm-border); --t4-btn-hover-color: #fff; --t4-btn-hover-bg: var(--color-success); --t4-btn-hover-border-color: var(--color-success); background-color: var(--dm-surface-2); color: var(--dm-heading); border-color: var(--dm-border); } /* Carousel arrows + menu/offcanvas toggles: white -> dark surface */ html[data-theme="dark"] .owl-prev, html[data-theme="dark"] .owl-next, html[data-theme="dark"] .sub-menu-toggle, html[data-theme="dark"] .btn-toggle, html[data-theme="dark"] .close.js-offcanvas-close { background-color: var(--dm-surface-2) !important; color: var(--dm-heading) !important; border-color: var(--dm-border) !important; } /* Decorative animated ripples: white -> green accent so they read on dark */ html[data-theme="dark"] .waves { background: var(--color-success); } /* gray-var BACKGROUNDS that must go dark (vars left un-remapped for text) */ html[data-theme="dark"] #back-to-top, html[data-theme="dark"] .bg-gray-100, html[data-theme="dark"] .bg-gray-200, html[data-theme="dark"] .bg-gray-300, html[data-theme="dark"] .numitems { background-color: var(--dm-surface-2) !important; color: var(--dm-text); } /* ========================================================================== 6c. BOOTSTRAP COMPONENTS (alerts, badges, buttons, cards, pagination, code) These appear in article bodies and the Typography page across all pages. ========================================================================== */ /* --- Alerts: dark-tinted bg + light colored text (BS 5.3 dark palette) --- */ html[data-theme="dark"] .alert-primary { background-color:#10213f; border-color:#1d3677; color:#6f9bf0; } html[data-theme="dark"] .alert-secondary { background-color:#1a2233; border-color:#2c3a52; color:#c2c9d6; } html[data-theme="dark"] .alert-success { background-color:#0e2a1e; border-color:#1c5239; color:#75dba8; } html[data-theme="dark"] .alert-danger { background-color:#2c1316; border-color:#5c2329; color:#ea868f; } html[data-theme="dark"] .alert-warning { background-color:#332701; border-color:#664d03; color:#ffda6a; } html[data-theme="dark"] .alert-info { background-color:#032830; border-color:#055160; color:#6edff6; } html[data-theme="dark"] .alert-light, html[data-theme="dark"] .alert-dark { background-color:#1a2233; border-color:#2c3a52; color:#c2c9d6; } html[data-theme="dark"] .alert-link { color: inherit; } /* --- Badges: bg-light must flip its text to light --- */ html[data-theme="dark"] .badge.bg-light { background-color: var(--dm-surface-2) !important; } html[data-theme="dark"] .bg-light.text-dark, html[data-theme="dark"] .badge.bg-light.text-dark { color: var(--dm-heading) !important; } /* --- Light / outline buttons --- */ html[data-theme="dark"] .btn-light { --t4-btn-bg: var(--dm-surface-2); --t4-btn-border-color: var(--dm-border); --t4-btn-color: var(--dm-heading); --t4-btn-hover-bg: var(--dm-surface); --t4-btn-hover-border-color: var(--dm-border); --t4-btn-hover-color: #fff; } html[data-theme="dark"] .btn-outline-light, html[data-theme="dark"] .btn-outline-dark { --t4-btn-color: var(--dm-text); --t4-btn-border-color: var(--dm-border); --t4-btn-hover-bg: var(--dm-surface-2); --t4-btn-hover-border-color: var(--dm-border); --t4-btn-hover-color: #fff; color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] .btn-outline-primary { --t4-btn-color: var(--dm-link); --t4-btn-border-color: var(--dm-link); --t4-btn-hover-bg: var(--dm-link); --t4-btn-hover-border-color: var(--dm-link); --t4-btn-hover-color: #fff; color: var(--dm-link); border-color: var(--dm-link); } html[data-theme="dark"] .btn-outline-primary:hover, html[data-theme="dark"] .btn-outline-light:hover, html[data-theme="dark"] .btn-outline-dark:hover { color: #fff; } /* --- Cards: header / footer --- */ html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-footer { background-color: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-heading); } /* --- Code, pre, blockquote, mark, well --- */ html[data-theme="dark"] pre, html[data-theme="dark"] code, html[data-theme="dark"] kbd, html[data-theme="dark"] .well, html[data-theme="dark"] blockquote { background-color: var(--dm-surface-2); color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] mark { background-color:#4a3d12; color: var(--dm-heading); } html[data-theme="dark"] table { color: var(--dm-text); } html[data-theme="dark"] .table { --t4-table-color: var(--dm-text); --t4-table-border-color: var(--dm-border); } /* --- Pagination --- */ html[data-theme="dark"] .page-link { --t4-pagination-bg: var(--dm-surface); --t4-pagination-color: var(--dm-link); --t4-pagination-border-color: var(--dm-border); --t4-pagination-hover-bg: var(--dm-surface-2); --t4-pagination-hover-color: var(--dm-link-hover); --t4-pagination-hover-border-color: var(--dm-border); --t4-pagination-focus-bg: var(--dm-surface-2); --t4-pagination-disabled-bg: var(--dm-surface); --t4-pagination-disabled-border-color: var(--dm-border); background-color: var(--dm-surface); border-color: var(--dm-border); color: var(--dm-link); } html[data-theme="dark"] .page-item.active .page-link { background-color: var(--color-success); border-color: var(--color-success); color: #fff; } html[data-theme="dark"] .page-item.disabled .page-link { background-color: var(--dm-surface); border-color: var(--dm-border); color: var(--dm-text-muted); } /* --- Social icon circles (contact / footer use .icon-) --- */ html[data-theme="dark"] .icon-facebook, html[data-theme="dark"] .icon-twitter, html[data-theme="dark"] .icon-tiktok, html[data-theme="dark"] .icon-pinterest, html[data-theme="dark"] .icon-instagram, html[data-theme="dark"] .icon-youtube, html[data-theme="dark"] .icon-linkedin, html[data-theme="dark"] .author-socials a { background-color: var(--dm-surface-2) !important; color: var(--dm-heading); } /* ========================================================================== 7. DARK/LIGHT MODE TOGGLE BUTTON ========================================================================== */ /* Lay the header-right area as an inline row so the toggle sits centered beside the "Donate now" CTA instead of dropping to the line below it. (Applies in both themes — the toggle exists in both.) */ .t4-header .t4-header-r { display: flex; align-items: center; justify-content: flex-end; } /* ------------------------------------------------------------------------- * Theme toggle button — mirrors the template's OWN header styling (NOT a chip). * Static markup lives in html/layouts/t4/block/header.html (.t4-nav-toggle for * mobile, .t4-header-r for desktop); js/darkmode.js only wires the click. * Desktop = a SQUARE cell beside the "Donate now" CTA, like a menu item (full * header-cell height, vertical divider borders, no rounding, transparent bg, * accent icon, green on hover). Mobile = a plain borderless white icon in the * navy top bar by the hamburger. Bootstrap d-* utilities pick which shows. * ---------------------------------------------------------------------- */ .t4-theme-toggle { -webkit-appearance: none; appearance: none; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0; border: 0; background: transparent; color: var(--color-primary); cursor: pointer; line-height: 0; flex: 0 0 auto; overflow: hidden; transition: color .25s ease; } .t4-theme-toggle:hover { color: var(--color-success); } .t4-theme-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; } /* Desktop instance (shown ≥lg): square cell beside the CTA, full header height, faint vertical dividers — reads as a menu cell, not a floating chip. */ .t4-theme-toggle.d-none.d-lg-inline-flex { width: 58px; height: 66px; border-left: 1px solid rgba(0, 0, 0, .12); border-right: 1px solid rgba(0, 0, 0, .12); } html[data-theme="dark"] .t4-theme-toggle { color: var(--dm-heading); } html[data-theme="dark"] .t4-theme-toggle:hover { color: var(--color-success); } html[data-theme="dark"] .t4-theme-toggle.d-none.d-lg-inline-flex { border-left-color: rgba(255, 255, 255, .06); border-right-color: rgba(255, 255, 255, .06); } /* Mobile instance: borderless white icon in the navy top bar by the hamburger. */ .t4-nav-toggle .t4-theme-toggle { color: #fff; margin: 0 14px 0 0; } /* Stacked icons cross-fade with a rotate/scale spring on flip; centred in the cell. */ .t4-theme-toggle svg { position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; transition: opacity .3s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); } .t4-nav-toggle .t4-theme-toggle svg { width: 23px; height: 23px; } .t4-theme-toggle__moon { opacity: 1; transform: rotate(0) scale(1); } .t4-theme-toggle__sun { opacity: 0; transform: rotate(-90deg) scale(.3); } html[data-theme="dark"] .t4-theme-toggle__moon { opacity: 0; transform: rotate(90deg) scale(.3); } html[data-theme="dark"] .t4-theme-toggle__sun { opacity: 1; transform: rotate(0) scale(1); } /* ========================================================================== 8. QA REFINEMENTS (visual + static audit pass) Focus: card separation, brighter accents, visible borders, text/icon/border. ========================================================================== */ /* --- 8a. Card separation. IMPORTANT: light mode gives these cards NO border (verified: event/feature/ news cards = 0px none, separated only by bg tint + content). To keep the same border contrast as light, dark mode also uses NO frame — cards separate via the surface-vs-page bg difference (#1b2540 vs #0c111d ~1.26, already a touch more than light's ~1.03) plus the subtle hover lift below. --- */ /* Card hover depth (light-mode shadows used navy/low-alpha -> invisible on dark) */ html[data-theme="dark"] .items-row .item:hover .item-inner, html[data-theme="dark"] .magz-layout.masonry-layout .blog-item:hover .item-inner, html[data-theme="dark"] .author-block:hover, html[data-theme="dark"] .items-leading .item-wrap:hover, html[data-theme="dark"] .acm-features.style-3 .item-inner:hover .wrap-content, html[data-theme="dark"] .card:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4); } /* --- 8b. Brighter green accents (eyebrow labels / .text-success were dim) --- */ html[data-theme="dark"] .text-success { color: #2fd98a !important; } /* Large thin section headings (.section-title.lead) anti-alias to grey on dark -> force pure white + slightly heavier weight so they read crisply. */ html[data-theme="dark"] .section-title { color: #fff !important; } html[data-theme="dark"] .section-title.lead { font-weight: 600; } html[data-theme="dark"] .sub-title { color: #2fd98a; } html[data-theme="dark"] .sub-title.text-primary { color: var(--dm-link); } html[data-theme="dark"] .sub-title.text-white { color: #fff; } /* --- 8c. Forms: visible input borders + clear focus + checkboxes --- */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] textarea { border-color: rgba(255, 255, 255, .18); } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus, html[data-theme="dark"] textarea:focus { border-color: var(--dm-link); box-shadow: 0 0 0 .2rem rgba(111, 155, 240, .25); } html[data-theme="dark"] .form-check-input { background-color: var(--dm-surface-2); border-color: rgba(255, 255, 255, .3); } html[data-theme="dark"] .form-check-input:checked { background-color: var(--color-success); border-color: var(--color-success); } /* --- 8d. Icons: brand icons hardcoded #000 disappear on dark --- */ html[data-theme="dark"] .fa-tiktok, html[data-theme="dark"] .icon-tiktok, html[data-theme="dark"] [class*="tiktok"], html[data-theme="dark"] .social-list .fa-tiktok { color: #fff !important; } /* Inline social-list circles (article/author bios) use literal #e9ecef */ html[data-theme="dark"] .social-list li a { background-color: var(--dm-surface-2); color: var(--dm-text); } html[data-theme="dark"] .social-list li a:hover, html[data-theme="dark"] .social-list li a:focus { background-color: var(--dm-link); color: #fff; } /* --- 8e. Navy-colored TEXT still slipping through (uncovered selectors) --- */ html[data-theme="dark"] .items-more h3, html[data-theme="dark"] .items-more .h3, html[data-theme="dark"] .acm-features .text-default .feature-title, html[data-theme="dark"] .acm-features .text-default .item-title, html[data-theme="dark"] .acm-features.style-1 .feature-title { color: var(--dm-heading) !important; } /* --- 8f. Surfaces missed by class overrides (hardcoded literals) --- */ html[data-theme="dark"] .magz-layout.masonry-layout .blog-item .item-content { background: var(--dm-surface); } html[data-theme="dark"] .event-detail .content-left .list-service .service { background-color: var(--dm-surface); box-shadow: 0 0 0 1px var(--dm-border); } /* Login addon pill (lock/user icon) was solid navy, merged with field */ html[data-theme="dark"] #login-form .input-group-text, html[data-theme="dark"] .mod-login__username .input-group-text, html[data-theme="dark"] .mod-login__password .input-group-text, html[data-theme="dark"] .mod-login__twofactor .input-group-text { background: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-link); } /* Smart-search autocomplete dropdown (var(--color-white)) */ html[data-theme="dark"] .js-finder-searchform .com-finder__search .awesomplete > ul { background: var(--dm-surface); border-color: var(--dm-border); color: var(--dm-text); } /* Lightbox / Joomla modal + content-pane iframe (hardcoded #fff) */ html[data-theme="dark"] body.modal-open .modal-content, html[data-theme="dark"] body.contentpane { background-color: var(--dm-surface); color: var(--dm-text); } /* --- 8g. ACM feature white gradient overlays (white smear over photos) --- */ html[data-theme="dark"] .acm-features.style-3 .item-inner .wrap-content:not(.no-image)::after { background: linear-gradient(180deg, var(--dm-surface) 41.74%, rgba(27, 37, 64, 0) 91.68%); } html[data-theme="dark"] .acm-features.style-1 .media-left.bg-light .item-media::before { background: linear-gradient(269deg, var(--dm-surface) 2.57%, rgba(27, 37, 64, 0) 52.57%); } html[data-theme="dark"] .acm-features.style-1 .media-right.bg-light .item-media::before { background: linear-gradient(90deg, var(--dm-surface) 2.57%, rgba(27, 37, 64, 0) 52.57%); } html[data-theme="dark"] .acm-features.style-1 .media-top.bg-light .item-media::before { background: linear-gradient(360deg, var(--dm-surface) 2.57%, rgba(27, 37, 64, 0) 52.57%); } html[data-theme="dark"] .acm-features.style-1 .media-bottom.bg-light .item-media::before { background: linear-gradient(180deg, var(--dm-surface) 2.57%, rgba(27, 37, 64, 0) 52.57%); } /* --- 8g-2. Section background IMAGES (e.g. the savanna behind "What we do") are light at the top (sky) -> light heading text washes out. Darken them in dark mode with an inset overlay so light text/cards read cleanly. --- */ /* Heavy overlay (matches page bg colour) so image sections read as the SAME dark tone as the solid sections around them — no jarring grey band, and the white section titles stay high-contrast. */ html[data-theme="dark"] .bg-overlay-image { box-shadow: inset 0 0 0 100vmax rgba(17, 26, 44, .94); } /* Some sections wrap their content in a STATIC element, so the absolutely- positioned overlay above paints OVER the content (dimming the title). Lift the content (siblings after the overlay) above the overlay. */ html[data-theme="dark"] .bg-overlay-image ~ * { position: relative; z-index: 1; } /* Fade the top/bottom edges of image sections into the page bg so there is no hard colour step between them and the adjacent solid dark sections. */ html[data-theme="dark"] .bg-overlay-image::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, var(--dm-bg) 0%, rgba(17, 26, 44, 0) 24%, rgba(17, 26, 44, 0) 76%, var(--dm-bg) 100%); } /* --- 8g-3. Card grid column dividers: the template uses a literal #e9ecef border-right (invisible on light ~1.05 contrast). On the dark page that light line is glaring -> use a faint divider matching light's subtlety. --- */ html[data-theme="dark"] .items-row > [class*="col-"], html[data-theme="dark"] .items-row.v-gutters > [class*="col-"] { border-color: rgba(255, 255, 255, .06) !important; } /* NOTE: card category badge (.blog-item .badge-info) is intentionally NOT overridden — its template CSS is mode-independent (orange text at rest, pill on hover via --color-* vars we don't change), so it already matches light. */ /* --- 8h. Borders / dividers that were faint light-gray literals --- */ /* Main-menu cell dividers: light mode shows them at ~1.05 contrast (effectively invisible). Keep dark equally faint so they don't read as a border over the hero/cover image. */ html[data-theme="dark"] .t4-megamenu .navbar-nav > li > a, html[data-theme="dark"] .t4-megamenu .navbar-nav > li > .nav-link { border-color: rgba(255, 255, 255, .05); } html[data-theme="dark"] .t4-typo-example { border-color: var(--dm-border); } /* --- Links on dark/image/navy regions must stay LIGHT like light mode, NOT the content link-blue. The global content-link rule leaks here otherwise. Affects every inner page (masthead breadcrumb) + footer site-wide. --- */ /* Footer + navy-palette sections: light-gray links like light mode (#ced4da) */ html[data-theme="dark"] .t4-footer a:not([class*="btn"]), html[data-theme="dark"] .t4-footnav a:not([class*="btn"]), html[data-theme="dark"] .t4-palette-blue a:not([class*="btn"]), html[data-theme="dark"] .bg-primary a:not([class*="btn"]) { color: #ced4da !important; } html[data-theme="dark"] .t4-footer a:not([class*="btn"]):hover, html[data-theme="dark"] .t4-footnav a:not([class*="btn"]):hover, html[data-theme="dark"] .t4-palette-blue a:not([class*="btn"]):hover, html[data-theme="dark"] .bg-primary a:not([class*="btn"]):hover { color: var(--color-success) !important; } /* Standalone breadcrumb bar uses the LIGHT-grey palette (.t4-palette-gray #e9ecef). Left as-is it's a bright band with invisible white text on top. Darken the bar (and the gray palette generally) to a subtle dark surface. */ html[data-theme="dark"] .t4-section.t4-breadcrumbs, html[data-theme="dark"] .t4-palette-gray { background-color: var(--dm-surface) !important; color: var(--dm-text); } /* Masthead breadcrumb sits on a dark hero image -> WHITE text like light mode. Higher specificity (+ later) so it beats the navy-palette rule above when the masthead is inside a palette section. */ html[data-theme="dark"] .ja-masthead .breadcrumb a:not([class*="btn"]), html[data-theme="dark"] .ja-masthead .breadcrumb-item, html[data-theme="dark"] .ja-masthead .breadcrumb-item a, html[data-theme="dark"] .ja-masthead .breadcrumb-item.active, html[data-theme="dark"] .ja-masthead .breadcrumb .active, html[data-theme="dark"] .t4-breadcrumbs .breadcrumb a:not([class*="btn"]), html[data-theme="dark"] .breadcrumb-item.active { color: #fff !important; } html[data-theme="dark"] .ja-masthead .breadcrumb a:not([class*="btn"]):hover, html[data-theme="dark"] .t4-breadcrumbs .breadcrumb a:not([class*="btn"]):hover { color: var(--color-success) !important; } /* --- 8i. 404 / system message page (jpages.css hardcodes #fff & navy) --- */ html[data-theme="dark"] .t4-error-page, html[data-theme="dark"] .t4-error-page .t4-error-msg, html[data-theme="dark"] body.error-page .error-info { background-color: var(--dm-surface) !important; color: var(--dm-text); } html[data-theme="dark"] body.error-page .error-info h2, html[data-theme="dark"] body.error-page .error-info .digit, html[data-theme="dark"] body.error-page .error-info .error-code { color: var(--dm-link) !important; } html[data-theme="dark"] body.error-page .error-info .msg { background: var(--dm-surface-2) !important; color: var(--dm-heading) !important; }