/* ============================================================================ * JA Findus — DARK MODE * Light mode is the original, approved design and is NOT modified. Every rule * below is scoped under html[data-theme="dark"] (the dark hook), EXCEPT the * toggle-button styling, which is intentionally visible in both modes. * Dark MIRRORS light — same relationships/states; never adds contrast light lacks. * Brand accent #6366f1 (indigo) is KEPT. Loaded LAST in via addCustomTag. * ========================================================================== */ /* --------------------------------------------------------------------------- * 0) Theme toggle button (BOTH modes) — solid/light header → transparent, * icon follows header text colour (currentColor). Icons cross-fade on the hook. * ------------------------------------------------------------------------- */ .t4-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin: 0 4px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; position: relative; line-height: 0; transition: background-color .2s ease, color .2s ease; } .t4-theme-toggle:hover, .t4-theme-toggle:focus-visible { background: rgba(127, 140, 160, .14); } /* size only on the base svg — do NOT set display here: `.t4-theme-toggle svg` * (0,1,1) would out-specify the single-class `__sun{display:none}` (0,1,0) and * BOTH icons showed in light (dark worked only because its rules are 0,2,1). * Scope the show/hide under .t4-theme-toggle so they reliably win. */ .t4-theme-toggle svg { width: 20px; height: 20px; } .t4-theme-toggle .t4-theme-toggle__sun { display: none; } .t4-theme-toggle .t4-theme-toggle__moon { display: block; } html[data-theme="dark"] .t4-theme-toggle .t4-theme-toggle__moon { display: none; } html[data-theme="dark"] .t4-theme-toggle .t4-theme-toggle__sun { display: block; } /* =========================================================================== * 1) PALETTE + TOKEN REMAP — the big lever. Cool-dark to complement indigo. * ========================================================================= */ html[data-theme="dark"] { /* palette — one source of truth */ --dm-bg: #0f131a; /* page (light: body #eee, surfaces #fff) */ --dm-band: #151a23; /* subtle band vs page */ --dm-surface: #1a2029; /* card surface (white cards) */ --dm-surface-2: #232b37; /* elevated: inputs, dropdowns, hover */ --dm-border: #2c3441; /* ONE divider token */ --dm-field-border:#3c4655; /* +1 step for form fields / outline btns */ --dm-text: #c4ccd6; /* body copy */ --dm-text-muted:#8b94a3; /* meta / muted */ --dm-heading: #eef1f6; /* headings */ /* brand accent — KEEP #6366f1; lighter hover/link for dark legibility */ --dm-accent: #6366f1; --dm-accent-hover:#818cf8; --dm-link: #99a0fb; --dm-link-hover:#b9bdfd; color-scheme: dark; /* --- FindUs theme tokens (from /media/t4/css/10.css :root) --- */ --body-bg-color: var(--dm-bg); --body-text-color: var(--dm-text); --color-light: var(--dm-band); --body-link-color: var(--dm-link); --body-link-hover-color: var(--dm-link-hover); --mainnav-text-color: var(--dm-text); --mainnav-link-color: var(--dm-text); --mainnav-link-hover-color:var(--dm-link-hover); /* --mainnav-link-active-color stays brand accent */ --footer-bg-color: var(--dm-surface); --footer-text-color: var(--dm-text); --footer-link-color: var(--dm-text); --footer-link-hover-color: var(--dm-accent); /* --- Bootstrap-as-T4 tokens (theme.css palette) --- */ --t4-body-bg: var(--dm-bg); --t4-body-color: var(--dm-text); --t4-heading-color: var(--dm-heading); --t4-emphasis-color: var(--dm-heading); --t4-emphasis-color-rgb: 238, 241, 246; --t4-border-color: var(--dm-border); --t4-border-color-translucent: rgba(255,255,255,.12); --t4-secondary-bg: var(--dm-surface); --t4-secondary-color: var(--dm-text-muted); --t4-tertiary-bg: var(--dm-surface-2); --t4-tertiary-color: var(--dm-text-muted); --t4-light: var(--dm-band); --t4-light-rgb: 21, 26, 35; --t4-secondary-bg-subtle: var(--dm-band); --t4-tertiary-bg-subtle: var(--dm-surface); /* Bootstrap 5 native (data-bs-theme also = dark) */ --bs-body-bg: var(--dm-bg); --bs-body-color: var(--dm-text); --bs-border-color: var(--dm-border); --bs-emphasis-color: var(--dm-heading); --bs-secondary-bg: var(--dm-surface); --bs-tertiary-bg: var(--dm-surface-2); --bs-secondary-color: var(--dm-text-muted); } /* =========================================================================== * 2) BASE SURFACES + TEXT (override both body-color systems + literal body{}) * ========================================================================= */ html[data-theme="dark"] body, html[data-theme="dark"] html body { background: var(--dm-bg); color: var(--dm-text); } html[data-theme="dark"] .t4-wrapper, html[data-theme="dark"] .body-wrap, html[data-theme="dark"] #t4-main, html[data-theme="dark"] .t4-mainbody, html[data-theme="dark"] .t4-section { background-color: transparent; } 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); } html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] dd, html[data-theme="dark"] dt, html[data-theme="dark"] span:not([class*="btn"]):not(.badge):not([class*="bg-"]) { color: inherit; } /* prose links (don't touch .btn / on-image / nav) */ html[data-theme="dark"] .t4-content a:not(.btn):not(.page-link):not([class*="bg-"]), html[data-theme="dark"] .item-page a:not(.btn), html[data-theme="dark"] .article-intro a:not(.btn) { color: var(--dm-link); } html[data-theme="dark"] .t4-content a:not(.btn):hover, html[data-theme="dark"] .item-page a:not(.btn):hover { color: var(--dm-accent); } html[data-theme="dark"] hr { border-color: var(--dm-border); } html[data-theme="dark"] .text-muted, html[data-theme="dark"] .text-secondary { color: var(--dm-text-muted) !important; } /* =========================================================================== * 3) CHROME — header / nav / megamenu / off-canvas / footer * ========================================================================= */ /* Header bar → dark surface, text light (so the currentColor toggle flips) */ /* header shares the page bg (--dm-bg), NOT --dm-band: in light the header, masthead * and body all sit on one uniform surface (.t4-content #fff) separated only by a * border — banding the header a different shade is a dark-only artifact. Keep the * border-bottom below for separation (mirrors light). */ html[data-theme="dark"] #t4-header, html[data-theme="dark"] .t4-header, html[data-theme="dark"] .header-block-1 { background-color: var(--dm-bg); color: var(--dm-text); } /* border-bottom ONLY on #t4-header (matches light's single .border-bottom line). * Adding it to .header-block-1 too drew a SECOND line — visible on mobile where * the two elements don't overlap. Light has just the one. */ html[data-theme="dark"] #t4-header { border-bottom: 1px solid var(--dm-border); } /* top-level nav links */ html[data-theme="dark"] .t4-megamenu .navbar-nav > li > a, html[data-theme="dark"] .t4-megamenu .navbar-nav > li > a .menu-item-title { color: var(--dm-text); } html[data-theme="dark"] .t4-megamenu .navbar-nav > li > a:hover, html[data-theme="dark"] .t4-megamenu .navbar-nav > li.active > a, html[data-theme="dark"] .t4-megamenu .navbar-nav > li.current > a { color: var(--dm-link-hover); } html[data-theme="dark"] .t4-megamenu .navbar-nav > li.active > a .menu-item-title { color: var(--dm-accent); } /* caret (inherits link color) */ html[data-theme="dark"] .t4-megamenu .item-caret::before, html[data-theme="dark"] .t4-megamenu .item-caret { color: var(--dm-text); } /* dropdown / mega panels */ 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 .mega-nav, html[data-theme="dark"] .t4-megamenu .megamenu > li > .nav-child { background-color: var(--dm-surface); border-color: var(--dm-border); box-shadow: 0 12px 32px rgba(0,0,0,.45); } /* ...but the elevation shadow belongs ONLY on the outer panel. The inner mega-nav * columns share the panel's surface (#1a2029); giving THEM the same shadow makes * each column cast a dark frame onto the panel → a false "two-tone" look. Kill it * so the columns sit flush on one uniform surface. */ html[data-theme="dark"] .t4-megamenu .mega-nav, html[data-theme="dark"] .t4-megamenu .mega-col-nav .nav-child { box-shadow: none; } /* mega dropdown links: light keeps them dark #111827 at rest / indigo on hover, * both with NO background. Mirror it — WHITE at rest (beat the generic * `.t4-content a:not(.btn)` indigo rule via !important), purple TEXT on hover with * NO highlight box (the surface-2 bg is not in light — drop it). */ html[data-theme="dark"] .t4-megamenu .dropdown-menu a, html[data-theme="dark"] .t4-megamenu .nav-child a, html[data-theme="dark"] .t4-megamenu .mega-nav a, html[data-theme="dark"] .t4-megamenu .dropdown-menu a .menu-item-title, html[data-theme="dark"] .t4-megamenu .mega-nav a .menu-item-title { color: var(--dm-heading) !important; } html[data-theme="dark"] .t4-megamenu .dropdown-menu a:hover, html[data-theme="dark"] .t4-megamenu .dropdown-menu a:focus, html[data-theme="dark"] .t4-megamenu .nav-child a:hover, html[data-theme="dark"] .t4-megamenu .nav-child a:focus, html[data-theme="dark"] .t4-megamenu .mega-nav a:hover, html[data-theme="dark"] .t4-megamenu .mega-nav a:focus, html[data-theme="dark"] .t4-megamenu .dropdown-item:hover, html[data-theme="dark"] .t4-megamenu .dropdown-item:focus { color: var(--dm-accent) !important; background-color: transparent !important; } html[data-theme="dark"] .t4-megamenu .dropdown-menu a:hover .menu-item-title, html[data-theme="dark"] .t4-megamenu .mega-nav a:hover .menu-item-title { color: var(--dm-accent) !important; } /* mega column headings */ html[data-theme="dark"] .t4-megamenu .mega-col-nav > .mega-col-content > .mega-group-title, html[data-theme="dark"] .t4-megamenu .module-title, html[data-theme="dark"] .t4-megamenu .mega-group-title { color: var(--dm-heading); } /* hamburger / toggler icon → light */ html[data-theme="dark"] .navbar-toggler { border-color: var(--dm-border); color: var(--dm-text); } html[data-theme="dark"] .navbar-toggler .navbar-toggler-icon, html[data-theme="dark"] .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(196,204,214,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } html[data-theme="dark"] .megamenu-toggle, html[data-theme="dark"] .offcanvas-toggle, html[data-theme="dark"] .t4-nav-toggle, html[data-theme="dark"] .navbar-toggler span { color: var(--dm-text); } /* off-canvas panel */ html[data-theme="dark"] .t4-offcanvas, html[data-theme="dark"] .t4-offcanvas .t4-offcanvas-inner { background-color: var(--dm-surface); color: var(--dm-text); } /* off-canvas top header strip (logo + close) — #F3F4F6 → dark */ html[data-theme="dark"] .t4-off-canvas-header, html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header { background-color: var(--dm-band) !important; border-color: var(--dm-border); } html[data-theme="dark"] .t4-off-canvas-header .close, html[data-theme="dark"] .t4-offcanvas .js-offcanvas-close { color: var(--dm-text); } html[data-theme="dark"] .t4-offcanvas a, html[data-theme="dark"] .t4-offcanvas .nav-link, html[data-theme="dark"] .t4-offcanvas .navbar-nav .nav-link { color: var(--dm-text); } html[data-theme="dark"] .t4-offcanvas a:hover, html[data-theme="dark"] .t4-offcanvas .nav-link:hover, html[data-theme="dark"] .t4-offcanvas li.active > .nav-link { color: var(--dm-accent); } /* off-canvas drilldown link hover: use the BRAND PRIMARY #6366f1 (--dm-accent), same * as the desktop megamenu-dropdown hover — NOT the pale --dm-link-hover lavender. * (Light source hover is a 4-class navy chain; beat it with !important.) */ html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .nav-link:hover, html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .nav-link:focus, html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar li.active > .nav-link { color: var(--dm-accent) !important; } html[data-theme="dark"] .t4-offcanvas .nav-child, html[data-theme="dark"] .t4-offcanvas .dropdown-menu { background-color: var(--dm-surface); border-color: var(--dm-border); } html[data-theme="dark"] .t4-offcanvas .nav-item, html[data-theme="dark"] .t4-offcanvas .menu > li { border-color: var(--dm-border); } /* drilldown arrow button */ html[data-theme="dark"] .t4-offcanvas .sub-menu-toggle, html[data-theme="dark"] .t4-offcanvas .btn-toggle { background-color: transparent; color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] .t4-offcanvas .close, html[data-theme="dark"] .t4-offcanvas .btn-close { filter: invert(1) grayscale(1) brightness(1.6); } /* footer + footnav share the PAGE bg (--dm-bg), not --dm-surface: in light the * footer is #fff = the same white as the content column (uniform), so in dark it * should equal the page #0f131a — a lighter --dm-surface made it a distinct block. * The footnav top border keeps the subtle separation (mirrors light). */ html[data-theme="dark"] .t4-footnav, html[data-theme="dark"] .t4-section.t4-footnav, html[data-theme="dark"] .t4-footer, html[data-theme="dark"] .t4-section.t4-footer { background-color: var(--dm-bg); color: var(--dm-text); } html[data-theme="dark"] .t4-footnav { border-top: 1px solid var(--dm-border); } html[data-theme="dark"] .t4-footnav a, html[data-theme="dark"] .t4-footer a { color: var(--dm-text); } html[data-theme="dark"] .t4-footnav a:hover, html[data-theme="dark"] .t4-footer a:hover { color: var(--dm-accent); } /* footer MENU links (Categories / Useful Link / Social columns): light keeps them * NEUTRAL grey #374151 at rest (accent only on hover), but the generic * `.t4-content a:not(.btn)` dark rule (0,5,2) painted them indigo at rest. Mirror * light — near-white at rest, accent (purple) on hover. !important beats that rule. */ html[data-theme="dark"] .t4-footnav .navbar .nav-link, html[data-theme="dark"] .t4-footer .navbar .nav-link { color: var(--dm-heading) !important; } html[data-theme="dark"] .t4-footnav .navbar .nav-link:hover, html[data-theme="dark"] .t4-footnav .navbar .nav-link:focus, html[data-theme="dark"] .t4-footer .navbar .nav-link:hover, html[data-theme="dark"] .t4-footer .navbar .nav-link:focus { color: var(--dm-accent) !important; } html[data-theme="dark"] .t4-footnav .module-title, html[data-theme="dark"] .t4-footnav h1, html[data-theme="dark"] .t4-footnav h2, html[data-theme="dark"] .t4-footnav h3, html[data-theme="dark"] .t4-footnav h4, html[data-theme="dark"] .t4-footer .module-title { color: var(--dm-heading); } /* =========================================================================== * 4) MASTHEAD / BREADCRUMB (transparent palette bars in this build) * ========================================================================= */ html[data-theme="dark"] .t4-masthead, html[data-theme="dark"] .t4-section.t4-masthead { background-color: var(--dm-bg); } html[data-theme="dark"] .t4-masthead-title, html[data-theme="dark"] .t4-masthead-description { color: var(--dm-heading); } html[data-theme="dark"] .t4-masthead-description { color: var(--dm-text-muted); } html[data-theme="dark"] .mod-breadcrumbs, html[data-theme="dark"] .breadcrumb, html[data-theme="dark"] .mod-breadcrumbs__item, html[data-theme="dark"] .breadcrumb-item, html[data-theme="dark"] .breadcrumb a { color: var(--dm-text-muted); } html[data-theme="dark"] .breadcrumb a:hover { color: var(--dm-accent); } html[data-theme="dark"] .breadcrumb-item.active { color: var(--dm-text); } /* =========================================================================== * 5) CARDS / SURFACES / ARTICLE * ========================================================================= */ /* listing result card: in light the fill is #fff = SAME as the page (invisible * fill, defined only by the #E5E7EB hairline ring). Mirror that — transparent fill * (blend with the page) + keep the ring/border. An opaque --dm-surface here made * the card a lighter box vs the page = 2-tone the light design never had. */ html[data-theme="dark"] .product-item-info, html[data-theme="dark"] .product-item .product-item-info { background-color: transparent; border-color: var(--dm-border); } html[data-theme="dark"] .product-item-info:hover { border-color: var(--dm-accent); } html[data-theme="dark"] .product-item-name a, html[data-theme="dark"] .product-item-link { color: var(--dm-heading); } html[data-theme="dark"] .product-item-name a:hover { color: var(--dm-accent); } html[data-theme="dark"] .product-item-details, html[data-theme="dark"] .product-item-description { color: var(--dm-text); } /* generic content panels / blog items / articles */ html[data-theme="dark"] .item-page, html[data-theme="dark"] .blog .item, html[data-theme="dark"] .blog-item, html[data-theme="dark"] .com_content .item, html[data-theme="dark"] .card, html[data-theme="dark"] .t4-module, html[data-theme="dark"] .well, html[data-theme="dark"] .panel { background-color: transparent; color: var(--dm-text); } html[data-theme="dark"] .card { background-color: var(--dm-surface); border-color: var(--dm-border); } html[data-theme="dark"] .card .card-title, html[data-theme="dark"] .card .card-header { color: var(--dm-heading); } html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-footer { background-color: var(--dm-surface-2); border-color: var(--dm-border); } /* article meta */ html[data-theme="dark"] .article-info, html[data-theme="dark"] .article-info *, html[data-theme="dark"] .createdby, html[data-theme="dark"] .published, html[data-theme="dark"] .category-name, html[data-theme="dark"] .hits, html[data-theme="dark"] .createddate, html[data-theme="dark"] time, html[data-theme="dark"] .blog .item .article-info { color: var(--dm-text-muted); } html[data-theme="dark"] .article-info a, html[data-theme="dark"] .createdby a { color: var(--dm-link); } html[data-theme="dark"] .page-header h1, html[data-theme="dark"] .page-header h2, html[data-theme="dark"] .item-page h1, html[data-theme="dark"] .item-page h2 a, html[data-theme="dark"] .blog .item h2 a { color: var(--dm-heading); } /* blockquote */ html[data-theme="dark"] blockquote, html[data-theme="dark"] .blockquote { color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] .blockquote-footer { color: var(--dm-text-muted); } /* code blocks (mirror light's readable code) */ html[data-theme="dark"] pre, html[data-theme="dark"] code, html[data-theme="dark"] kbd, html[data-theme="dark"] .item-page pre { background-color: var(--dm-surface-2); color: #e6e9ef; border-color: var(--dm-border); } /* tables */ html[data-theme="dark"] .table { --t4-table-color: var(--dm-text); --t4-table-bg: transparent; --t4-table-border-color: var(--dm-border); --t4-table-striped-color: var(--dm-text); --t4-table-hover-color: var(--dm-heading); color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] .table > :not(caption) > * > * { border-color: var(--dm-border); } html[data-theme="dark"] .table thead th, html[data-theme="dark"] .table th { color: var(--dm-heading); border-color: var(--dm-border); } html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,.03); } /* =========================================================================== * 6) FORMS / INPUTS / SELECTS / CHOSEN * ========================================================================= */ 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="password"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] textarea, html[data-theme="dark"] select { background-color: var(--dm-surface-2); color: var(--dm-text); border-color: var(--dm-field-border); } html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--dm-text-muted); } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus, html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] select:focus { background-color: var(--dm-surface-2); color: var(--dm-text); border-color: var(--dm-accent); box-shadow: 0 0 0 .2rem rgba(99,102,241,.25); } html[data-theme="dark"] label, html[data-theme="dark"] .control-label, html[data-theme="dark"] legend { color: var(--dm-text); } html[data-theme="dark"] .form-text, html[data-theme="dark"] .help-block { color: var(--dm-text-muted); } html[data-theme="dark"] .input-group-text { background-color: var(--dm-surface); color: var(--dm-text); border-color: var(--dm-field-border); } /* native select arrow recolor */ html[data-theme="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='%23c4ccd6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"); } /* Chosen.js */ html[data-theme="dark"] .chosen-container .chosen-single, html[data-theme="dark"] .chosen-container-single .chosen-single, html[data-theme="dark"] .chosen-container .chosen-drop, html[data-theme="dark"] .chosen-container .chosen-results, html[data-theme="dark"] .chosen-container-active.chosen-with-drop .chosen-single { background: var(--dm-surface-2) !important; color: var(--dm-text) !important; border-color: var(--dm-field-border) !important; box-shadow: none !important; } html[data-theme="dark"] .chosen-container .chosen-results li { color: var(--dm-text); } html[data-theme="dark"] .chosen-container .chosen-results li.highlighted { background: var(--dm-accent) !important; color: #fff; } /* caret: keep the SAME Chosen sprite icon as light (chosen-sprite.png, a small * down-triangle) — earlier I swapped it for an SVG chevron, which is a different * shape than light. Instead just RECOLOR the dark sprite to light via filter so * the icon is identical in both modes (and the open-state up-arrow still works). */ html[data-theme="dark"] .chosen-container-single .chosen-single div b { filter: brightness(0) invert(0.82) !important; } html[data-theme="dark"] .chosen-container .chosen-search input { background-color: var(--dm-surface); color: var(--dm-text); border-color: var(--dm-field-border); } /* Joomla switcher / radios */ html[data-theme="dark"] .form-check-input { background-color: var(--dm-surface-2); border-color: var(--dm-field-border); } html[data-theme="dark"] .form-check-input:checked { background-color: var(--dm-accent); border-color: var(--dm-accent); } /* =========================================================================== * 7) BUTTONS / BADGES / ALERTS / PAGINATION * ========================================================================= */ /* outline / secondary buttons get a visible field-border; primary keeps brand */ html[data-theme="dark"] .btn-outline-primary { color: var(--dm-accent-hover); border-color: var(--dm-accent); } html[data-theme="dark"] .btn-outline-primary:hover { background-color: var(--dm-accent); color: #fff; } html[data-theme="dark"] .btn-outline-secondary, html[data-theme="dark"] .btn-outline-dark { color: var(--dm-text); border-color: var(--dm-field-border); } html[data-theme="dark"] .btn-outline-secondary:hover, html[data-theme="dark"] .btn-outline-dark:hover { background-color: var(--dm-surface-2); color: var(--dm-heading); } html[data-theme="dark"] .btn-light, html[data-theme="dark"] .btn-secondary { background-color: var(--dm-surface-2); border-color: var(--dm-field-border); color: var(--dm-text); } html[data-theme="dark"] .btn-light:hover, html[data-theme="dark"] .btn-secondary:hover { background-color: var(--dm-surface); color: var(--dm-heading); } html[data-theme="dark"] .btn-default { background-color: var(--dm-surface-2); border-color: var(--dm-field-border); color: var(--dm-text); } /* header "Login / Register" CTA (.btn.btn-default.nav-link) — border #E5E7EB via nav chain */ html[data-theme="dark"] .navbar .btn-default, html[data-theme="dark"] .header-nav .btn-default, html[data-theme="dark"] .btn.btn-default.nav-link { border-color: var(--dm-field-border) !important; color: var(--dm-text); } html[data-theme="dark"] .btn.btn-default.nav-link:hover { border-color: var(--dm-accent) !important; color: var(--dm-heading); } /* pagination */ html[data-theme="dark"] .pagination { --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-active-bg: var(--dm-accent); --t4-pagination-active-border-color: var(--dm-accent); --t4-pagination-disabled-bg: var(--dm-band); --t4-pagination-disabled-border-color: var(--dm-border); } html[data-theme="dark"] .pagination .page-link { background-color: var(--dm-surface); color: var(--dm-link); border-color: var(--dm-border); } html[data-theme="dark"] .pagination .page-link:hover { background-color: var(--dm-surface-2); color: var(--dm-accent); } html[data-theme="dark"] .pagination .active .page-link, html[data-theme="dark"] .pagination .page-item.active .page-link { background-color: var(--dm-accent); border-color: var(--dm-accent); color: #fff; } html[data-theme="dark"] .pagination .disabled .page-link, html[data-theme="dark"] .pagination-counter, html[data-theme="dark"] .counter { color: var(--dm-text-muted); } /* badges keep their semantic colors; only the neutral/light ones */ html[data-theme="dark"] .badge.bg-light, html[data-theme="dark"] .badge.text-bg-light { background-color: var(--dm-surface-2) !important; color: var(--dm-text) !important; } /* alerts: BS subtle vars already partly handled; ensure readable */ html[data-theme="dark"] .alert { border-color: var(--dm-border); } /* =========================================================================== * 8) UTILITY BG CLASSES (light → dark; beat the !important) * ========================================================================= */ html[data-theme="dark"] .bg-light, html[data-theme="dark"] .bg-light-subtle { background-color: var(--dm-band) !important; color: var(--dm-text); } html[data-theme="dark"] .bg-white { background-color: var(--dm-surface) !important; color: var(--dm-text); } html[data-theme="dark"] .t4-palette-light, html[data-theme="dark"] .t4-palette-gray { background-color: var(--dm-band) !important; color: var(--dm-text); } html[data-theme="dark"] .text-dark { color: var(--dm-heading) !important; } /* =========================================================================== * 9) HERO + ACCENT BAND (KEEP) — masked photo + style-3 primary band * Hero text already white; just ensure mask stays. No repaint. * ========================================================================= */ html[data-theme="dark"] .acm-hero .mask { background-color: #000; } /* keep masked photo */ /* .acm-features.style-3 band uses --color-primary (#6366f1) — KEEP as accent band; white text stays */ /* =========================================================================== * 10) JA MEGAFILTER (literal hex; retint its #2196f3 → brand #6366f1) * ========================================================================= */ /* Megafilter containers are TRANSPARENT (mirror light: the whole wrap/sidebar/ * filter panels sit on the uniform .t4-content white, distinguished by borders * only — no surface fill). Filling them with --dm-surface made the whole * megafilter area a lighter block on the darker page = 2-tone. Keep border+text. */ html[data-theme="dark"] .ja-megafilter-wrap, html[data-theme="dark"] .ja-filter-wrapper, html[data-theme="dark"] .filter-content, html[data-theme="dark"] .filter-content .block-content, html[data-theme="dark"] .ja-megafilter .block-content { background-color: transparent; color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] .filter-options-title, html[data-theme="dark"] .filter-options-title span, html[data-theme="dark"] .filter-title, html[data-theme="dark"] .block-title { color: var(--dm-heading); border-color: var(--dm-border); } /* filter block title ("Category" etc.) is transparent in light — don't give it a * --dm-surface-2 chip in dark (that adds a lighter bar the light design lacks). */ html[data-theme="dark"] .filter-options-title span { background-color: transparent; } html[data-theme="dark"] .filter-items label, html[data-theme="dark"] .filter-item, html[data-theme="dark"] .filter-radio, html[data-theme="dark"] .ja-filter-wrapper li, html[data-theme="dark"] .ja-filter-wrapper label { color: var(--dm-text); border-color: var(--dm-border); } /* filter item white hover → dark hover */ html[data-theme="dark"] .ja-filter-wrapper ol.items li.item:hover, html[data-theme="dark"] .ja-filter-wrapper ol.items li.item.active, html[data-theme="dark"] .filter-items li:hover { background-color: var(--dm-surface-2); color: var(--dm-heading); } /* chips / clear */ html[data-theme="dark"] .selected-filters, html[data-theme="dark"] .filter-selected, html[data-theme="dark"] .filter-selected a, html[data-theme="dark"] .selected-filters .filter-value { background-color: var(--dm-surface-2); color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] .clear-all-filter, html[data-theme="dark"] .clear-filter { color: var(--dm-text-muted); } html[data-theme="dark"] .clear-all-filter:hover, html[data-theme="dark"] .clear-filter:hover { color: var(--dm-accent); } /* layout chooser */ html[data-theme="dark"] .jamg-layout-chooser span, html[data-theme="dark"] .products-toolbar .modes .mode { background-color: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text); } html[data-theme="dark"] .jamg-layout-chooser span.active, html[data-theme="dark"] .jamg-layout-chooser span:hover, html[data-theme="dark"] .products-toolbar .modes .mode.active { border-color: var(--dm-accent); color: var(--dm-accent-hover); } /* range slider — retint megafilter blue */ html[data-theme="dark"] .ui-slider, html[data-theme="dark"] .ui-slider-horizontal { background-color: var(--dm-surface-2); border-color: var(--dm-border); } html[data-theme="dark"] .ui-slider .ui-slider-range, html[data-theme="dark"] .ui-slider-range { background-color: var(--dm-accent); } html[data-theme="dark"] .ui-slider .ui-slider-handle { background-color: var(--dm-heading); border-color: var(--dm-accent); } /* megafilter card + pagination blue → brand */ html[data-theme="dark"] .ja-megafilter .product-item-info, html[data-theme="dark"] .jamegafilter-items .product-item-info { background-color: transparent; border-color: var(--dm-border); } html[data-theme="dark"] .products-toolbar .pagination > li > a, html[data-theme="dark"] .products-toolbar .pagination > li > span { background-color: var(--dm-surface); color: var(--dm-link); border-color: var(--dm-border); } html[data-theme="dark"] .products-toolbar .pagination > li.active > a, html[data-theme="dark"] .products-toolbar .pagination > .active > a { color: var(--dm-accent-hover); border-bottom-color: var(--dm-accent); } html[data-theme="dark"] .products-toolbar { color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] .products-toolbar select, html[data-theme="dark"] .toolbar-amount { color: var(--dm-text); } /* =========================================================================== * 11) SIDEBAR MODULES * ========================================================================= */ html[data-theme="dark"] .t4-sidebar .module, html[data-theme="dark"] [class*="sidebar"] .module, html[data-theme="dark"] .sidebar-l .module, html[data-theme="dark"] .sidebar-r .module { background-color: transparent; color: var(--dm-text); } html[data-theme="dark"] .t4-sidebar .module-title, html[data-theme="dark"] [class*="sidebar"] .module-title { color: var(--dm-heading); border-color: var(--dm-border); } html[data-theme="dark"] .t4-sidebar .module a, html[data-theme="dark"] [class*="sidebar"] .module a { color: var(--dm-text); } html[data-theme="dark"] .t4-sidebar .module a:hover { color: var(--dm-accent); } html[data-theme="dark"] .t4-sidebar ul li, html[data-theme="dark"] [class*="sidebar"] .module ul li { border-color: var(--dm-border); } /* tags */ html[data-theme="dark"] .tag-list a, html[data-theme="dark"] .com_tags .tag, html[data-theme="dark"] a.label, html[data-theme="dark"] .badge.bg-secondary { background-color: var(--dm-surface-2); color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] .tag-list a:hover, html[data-theme="dark"] .com_tags .tag:hover, /* listing-detail tag chips (.tags .list-inline-item a / a.label.label-info): light * hover flips bg → #E5E7EB with dark text; on dark that leaves light-on-light. Mirror * light's filled-hover with a legible accent fill instead. */ html[data-theme="dark"] .listing-tags .tags a:hover, html[data-theme="dark"] .tags .list-inline-item a:hover, html[data-theme="dark"] a.label:hover { background-color: var(--dm-accent) !important; color: #fff !important; } /* =========================================================================== * 12) SMART SEARCH (com_finder) * ========================================================================= */ html[data-theme="dark"] .com_finder .form-control, html[data-theme="dark"] .finder .search-query { background-color: var(--dm-surface-2); color: var(--dm-text); border-color: var(--dm-field-border); } html[data-theme="dark"] .finder .result-title a, html[data-theme="dark"] .search-results .result-title a { color: var(--dm-heading); } html[data-theme="dark"] .finder .result__title a:hover { color: var(--dm-accent); } html[data-theme="dark"] .finder .result-text, html[data-theme="dark"] .search-results .result-text { color: var(--dm-text); } /* =========================================================================== * 13) STANDALONE PAGES (offline.php / error.php / error-t4.php — load darkmode.css) * ========================================================================= */ html[data-theme="dark"] body.offline-page, html[data-theme="dark"] body.page-error, html[data-theme="dark"] body.t4-error-page { background-color: var(--dm-bg); color: var(--dm-text); } html[data-theme="dark"] body.offline-page #frame, html[data-theme="dark"] body.offline-page .form-wrap, html[data-theme="dark"] body.page-error #box-outline, html[data-theme="dark"] body.t4-error-page .t4-error-msg { background-color: transparent; color: var(--dm-text); } html[data-theme="dark"] body.offline-page h1, html[data-theme="dark"] body.page-error h1, html[data-theme="dark"] body.page-error h2, html[data-theme="dark"] body.t4-error-page h1, html[data-theme="dark"] body.offline-page .error-code, html[data-theme="dark"] body.page-error .error-code, html[data-theme="dark"] .error-code { color: var(--dm-heading); } html[data-theme="dark"] body.offline-page .offline-message, html[data-theme="dark"] body.page-error .error-message, html[data-theme="dark"] body.t4-error-page .error-message { color: var(--dm-text); } html[data-theme="dark"] body.offline-page input, html[data-theme="dark"] body.page-error input, html[data-theme="dark"] body.offline-page .form-control { background-color: var(--dm-surface-2); color: var(--dm-text); border-color: var(--dm-field-border); } html[data-theme="dark"] body.offline-page blockquote, html[data-theme="dark"] body.offline-page .blockquote { color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] body.t4-error-page .cta-wrap a { color: var(--dm-link); } /* =========================================================================== * 14) MEGAFILTER — stronger overrides (literal-hex source beats base rules) * ========================================================================= */ /* megafilter text inputs render as (no type attr) */ html[data-theme="dark"] .input-text, html[data-theme="dark"] input.input-text, html[data-theme="dark"] .ja-filter-wrapper .filter-content .input-text, html[data-theme="dark"] .ja-megafilter input.input-text { background-color: var(--dm-surface-2) !important; color: var(--dm-text) !important; border-color: var(--dm-field-border) !important; } html[data-theme="dark"] .input-text::placeholder { color: var(--dm-text-muted) !important; } /* filter group title chip (#e1e1e1 → dark) + its FA collapse glyph */ html[data-theme="dark"] .ja-filter-wrapper .filter-content .filter-options-title span, html[data-theme="dark"] .filter-options-title span { background-color: transparent !important; color: var(--dm-heading) !important; } html[data-theme="dark"] .ja-filter-wrapper .filter-content .filter-options-title span:after { color: var(--dm-text-muted) !important; } /* filter labels / category tree text / amounts — literal #111827 → light */ html[data-theme="dark"] .ja-filter-wrapper, html[data-theme="dark"] .ja-filter-wrapper .filter-content, html[data-theme="dark"] .ja-filter-wrapper label, html[data-theme="dark"] .ja-filter-wrapper .filter-items label, html[data-theme="dark"] .ja-filter-wrapper .filter-items .item, html[data-theme="dark"] .ja-filter-wrapper .filter-items a, html[data-theme="dark"] .ja-filter-wrapper .filter-content .item, html[data-theme="dark"] .filter-items label, html[data-theme="dark"] .filter-content, html[data-theme="dark"] .filter-content .item { color: var(--dm-text) !important; } html[data-theme="dark"] .ja-filter-wrapper .count, html[data-theme="dark"] .ja-filter-wrapper .item .count { color: var(--dm-text-muted) !important; } /* price-level chip ($$$) on cards + in filters — #F3F4F6 → dark surface */ html[data-theme="dark"] .price-level, html[data-theme="dark"] .item-field.price-level, html[data-theme="dark"] .product-item .price-level { background-color: var(--dm-surface-2) !important; color: var(--dm-text) !important; } /* megafilter radios/checkboxes (custom) — keep visible on dark */ html[data-theme="dark"] .filter-radio, html[data-theme="dark"] .filter-checkbox, html[data-theme="dark"] .ja-filter-wrapper input[type="radio"], html[data-theme="dark"] .ja-filter-wrapper input[type="checkbox"] { accent-color: var(--dm-accent); } /* tree connector + open/close hours rows in cards */ html[data-theme="dark"] .product-item .product-reviews-summary, html[data-theme="dark"] .product-item .open-now, html[data-theme="dark"] .product-item .product-item-actions a { color: var(--dm-text); } /* "Items X-Y Of Z" counter + per-page/sort selects on the toolbar */ html[data-theme="dark"] .toolbar-amount, html[data-theme="dark"] .products-toolbar .toolbar-amount, html[data-theme="dark"] .pages-items, html[data-theme="dark"] .sorter-label, html[data-theme="dark"] .limiter-label { color: var(--dm-text-muted); } /* =========================================================================== * 15) ACCORDION (FAQ on listing detail; BS accordion) — btn text literal #111827 * ========================================================================= */ html[data-theme="dark"] .accordion { --bs-accordion-color: var(--dm-text); --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--dm-border); --bs-accordion-btn-color: var(--dm-heading); --bs-accordion-btn-bg: transparent; --bs-accordion-active-color: var(--dm-heading); --bs-accordion-active-bg: var(--dm-surface-2); --t4-accordion-color: var(--dm-text); --t4-accordion-bg: transparent; --t4-accordion-border-color: var(--dm-border); --t4-accordion-btn-color: var(--dm-heading); --t4-accordion-btn-bg: transparent; --t4-accordion-active-color: var(--dm-heading); --t4-accordion-active-bg: var(--dm-surface-2); } html[data-theme="dark"] .accordion-item { background-color: transparent; border-color: var(--dm-border); color: var(--dm-text); } html[data-theme="dark"] .accordion-button, html[data-theme="dark"] .accordion-button.collapsed { color: var(--dm-heading) !important; background-color: transparent; } html[data-theme="dark"] .accordion-button:not(.collapsed) { color: var(--dm-heading) !important; background-color: var(--dm-surface-2); box-shadow: none; } html[data-theme="dark"] .accordion-body { color: var(--dm-text); } html[data-theme="dark"] .accordion-button::after { filter: invert(1) grayscale(1) brightness(1.8); } /* =========================================================================== * 16) MAP WIDGET (JA Google Map / com_contact) — dev no-API error box + tiles * ========================================================================= */ html[data-theme="dark"] .map-container, html[data-theme="dark"] .ja-google-map, html[data-theme="dark"] #ja-widget-map1-container { background-color: var(--dm-band); } html[data-theme="dark"] .gm-err-container { background-color: var(--dm-band) !important; } html[data-theme="dark"] .gm-err-message, html[data-theme="dark"] .gm-err-title { color: var(--dm-text) !important; } /* belt-and-braces: keep main content wrapper transparent (inherit page bg) */ html[data-theme="dark"] .t4-content { background-color: transparent; } /* =========================================================================== * 17) SCANNER-DRIVEN FIXES (white-leak + dark-on-dark across all pages) * ========================================================================= */ /* megafilter search sidebar (hero/global search bar) — white panel on every page */ html[data-theme="dark"] .ja-mg-sidebar, html[data-theme="dark"] .ja-mg-sidebar.sidebar-main, html[data-theme="dark"] .sb-horizontal.ja-mg-sidebar { background-color: transparent !important; color: var(--dm-text); } html[data-theme="dark"] .ja-mg-sidebar .filter-options-title, html[data-theme="dark"] .ja-mg-sidebar label, html[data-theme="dark"] .ja-mg-sidebar .item { color: var(--dm-text); } /* Chosen single text ("Select a Category / Type") — literal #111827 span */ html[data-theme="dark"] .chosen-container-single .chosen-single span, html[data-theme="dark"] .chosen-single span, html[data-theme="dark"] .ja-mg-sidebar .chosen-single span { color: var(--dm-text) !important; } /* JA Masthead module (.ja-masthead-* — note: NOT .t4-masthead-*) */ html[data-theme="dark"] .ja-masthead { background-color: var(--dm-bg); } html[data-theme="dark"] .ja-masthead-title, html[data-theme="dark"] .ja-masthead .masthead-title { color: var(--dm-heading); } html[data-theme="dark"] .ja-masthead-description, html[data-theme="dark"] .ja-masthead .masthead-description { color: var(--dm-text-muted) !important; } /* article-title links: BS .link-dark (utility !important) + mod_articles_* (literal #111827) */ html[data-theme="dark"] a.link-dark, html[data-theme="dark"] .link-dark, html[data-theme="dark"] .mod-articles-category-title, html[data-theme="dark"] a.mod-articles-category-title, html[data-theme="dark"] .mod-articles-category-title a, html[data-theme="dark"] .latestnews a, html[data-theme="dark"] .mod-articles-latest a { color: var(--dm-heading) !important; } html[data-theme="dark"] a.link-dark:hover, html[data-theme="dark"] .mod-articles-category-title a:hover { color: var(--dm-accent) !important; } /* Popular Cities card photo-link fallback bg (#F3F4F6 behind the photo) */ html[data-theme="dark"] .category-inner > a, html[data-theme="dark"] .category-inner a[style*="background-image"] { background-color: var(--dm-surface); } /* listing card address / small meta (.location, .fs-xs muted) */ html[data-theme="dark"] .location, html[data-theme="dark"] .product-item .location, html[data-theme="dark"] .address, html[data-theme="dark"] .listing-address { color: var(--dm-text-muted); } /* form legends (registration "User Registration" etc.) */ html[data-theme="dark"] legend, html[data-theme="dark"] fieldset legend, html[data-theme="dark"] .com_users legend, html[data-theme="dark"] form legend { color: var(--dm-heading) !important; border-color: var(--dm-border); } /* owl carousel nav buttons (white → dark) */ html[data-theme="dark"] .owl-prev, html[data-theme="dark"] .owl-next, html[data-theme="dark"] .owl-nav button, html[data-theme="dark"] .owl-dot span { background-color: var(--dm-surface-2) !important; color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] .owl-dot.active span { background-color: var(--dm-accent) !important; } /* tag-cloud count badge (light grey → dark) */ html[data-theme="dark"] span.tag-count, html[data-theme="dark"] .tag-count, html[data-theme="dark"] .tag-count.badge, html[data-theme="dark"] .tag-list .tag-count, html[data-theme="dark"] .tagscloud .tag-count { background-color: var(--dm-surface-2) !important; color: var(--dm-text) !important; } /* btn-outline-light (text became dark via --t4-light remap) */ html[data-theme="dark"] .btn-outline-light { color: var(--dm-text); border-color: var(--dm-field-border); } html[data-theme="dark"] .btn-outline-light:hover { background-color: var(--dm-surface-2); color: var(--dm-heading); } /* list-group (tagged items result list), grey btn-secondary, per-page label */ /* rows are TRANSPARENT (mirror light: every .list-group-item is #fff = the same as * the content page, uniform, separated only by row dividers). A --dm-surface fill * made the whole list a lighter block vs the page = the "two-tone" the user saw. */ html[data-theme="dark"] .list-group-item, html[data-theme="dark"] .list-group-item-action { background-color: transparent !important; color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] .list-group-item-action:hover { background-color: var(--dm-surface-2) !important; color: var(--dm-heading); } html[data-theme="dark"] .btn.btn-secondary { --bs-btn-bg: var(--dm-surface-2); --bs-btn-border-color: var(--dm-field-border); --bs-btn-color: var(--dm-text); --bs-btn-hover-bg: var(--dm-surface); --bs-btn-hover-color: var(--dm-heading); --bs-btn-hover-border-color: var(--dm-field-border); background-color: var(--dm-surface-2) !important; border-color: var(--dm-field-border) !important; color: var(--dm-text) !important; } html[data-theme="dark"] .limiter-text, html[data-theme="dark"] .limiter-label, html[data-theme="dark"] .sorter-text, html[data-theme="dark"] .products-toolbar .limiter-text, html[data-theme="dark"] .products-toolbar .sorter-text { color: var(--dm-text-muted) !important; } /* =========================================================================== * 19) BASE #E5E7EB ($gray-200) LEAKS that out-specify the var remap * (dark-completeness audit P1–P6) — raise specificity / !important. * ========================================================================= */ /* P1: off-canvas drilldown arrow squares (.btn-toggle bg #edeff2 via 4-class chain) */ html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle, html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .btn-toggle, html[data-theme="dark"] .t4-offcanvas .sub-menu-toggle.btn-toggle, html[data-theme="dark"] .t4-offcanvas .sub-menu-toggle { background-color: transparent !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html[data-theme="dark"] .t4-offcanvas .btn-toggle .fa, html[data-theme="dark"] .t4-offcanvas .btn-toggle i, html[data-theme="dark"] .t4-offcanvas .sub-menu-toggle::before { color: var(--dm-text) !important; } /* the visible ">" drilldown chevron is drawn by ::after (border-chevron), color * #111827 in both modes — invisible on the dark drawer (light kept a grey toggle * bg so it showed). Lighten the chevron's border+color to --dm-text. */ html[data-theme="dark"] .t4-offcanvas .sub-menu-toggle::after, html[data-theme="dark"] .t4-offcanvas .btn-toggle::after, html[data-theme="dark"] .t4-offcanvas .sub-menu-toggle.btn-toggle::after { border-color: var(--dm-text) !important; color: var(--dm-text) !important; } /* DEEPER drilldown level (drilled into a submenu): the back header `.sub-menu-back` * uses literal #111827 text (invisible on dark) + a #E5E7EB rounded box border * (bright), and the `.nav-item.deeper` rows use a literal #E5E7EB bottom divider * (bright white line). Light kept them subtle on white; mirror with --dm-text / * --dm-border so every drilldown level looks consistent. */ /* match the exact source chain (.t4-off-canvas-body .navbar.drilldown-effect * .sub-menu-back = spec 0,5,0) so there's zero ambiguity — source is * `color:#111827; border:1px solid #E5E7EB`, and the back "<" is an at #6B7280. */ html[data-theme="dark"] .t4-offcanvas .sub-menu-back, html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .sub-menu-back, html[data-theme="dark"] .t4-offcanvas .sub-menu-back a, html[data-theme="dark"] .t4-offcanvas .sub-menu-back span, html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .sub-menu-back i, html[data-theme="dark"] .t4-offcanvas .sub-menu-back i, html[data-theme="dark"] .t4-offcanvas .sub-menu-back::before, html[data-theme="dark"] .t4-offcanvas .sub-menu-back::after { color: var(--dm-text) !important; } html[data-theme="dark"] .t4-offcanvas .sub-menu-back, html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .sub-menu-back { border-color: var(--dm-border) !important; } /* :hover/:focus/:active bg is a light grey (#eaecef/#edeff2) in the source → on * dark it becomes light-grey text on a light box = ugly/unreadable. Give it a dark * elevated hover surface (mirrors light's subtle grey hover), keep text light. */ html[data-theme="dark"] .t4-offcanvas .sub-menu-back:hover, html[data-theme="dark"] .t4-offcanvas .sub-menu-back:focus, html[data-theme="dark"] .t4-offcanvas .sub-menu-back:active, html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .sub-menu-back:hover, html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .sub-menu-back:focus, html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .sub-menu-back:active { background-color: var(--dm-surface-2) !important; background: var(--dm-surface-2) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } /* EVERY off-canvas menu row divider → --dm-border, at ANY drilldown level. Deeper * levels (Listings Layout's children) are plain .nav-item (no .deeper class) and * carry a literal #E5E7EB bottom border from a high-spec source chain — match it * (.t4-off-canvas-body .navbar … .nav-item) + !important so no level leaks a bright line. */ html[data-theme="dark"] .t4-offcanvas .nav-item, html[data-theme="dark"] .t4-offcanvas .nav-child .nav-item, html[data-theme="dark"] .t4-offcanvas .nav-child li, html[data-theme="dark"] .t4-offcanvas .menu > li, html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .nav-item, html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .nav-item, html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .menu > li { border-color: var(--dm-border) !important; } /* P2: listing-detail section seams + sidebar/contact/social/accordion borders */ html[data-theme="dark"] .section-listing-info, html[data-theme="dark"] .listing-detail, html[data-theme="dark"] .listing-detail-info, html[data-theme="dark"] .listing-sidebar, html[data-theme="dark"] .contact-actions, html[data-theme="dark"] .social-inner, html[data-theme="dark"] .business-info, html[data-theme="dark"] .listing-detail .accordion-item, html[data-theme="dark"] .accordion-item { border-color: var(--dm-border) !important; } /* P3: login + registration card outline */ html[data-theme="dark"] .login-wrap, html[data-theme="dark"] .com-users-login .login-wrap, html[data-theme="dark"] .com-users-registration, html[data-theme="dark"] .com-users-registration.registration, html[data-theme="dark"] .registration, html[data-theme="dark"] .profile-edit, html[data-theme="dark"] .com-users-profile { border-color: var(--dm-border) !important; } /* P4: tagged-items list-group row dividers (bottom-border #E5E7EB) */ html[data-theme="dark"] .list-group-item, html[data-theme="dark"] .list-group-item-action { border-color: var(--dm-border) !important; } /* P5: sidebar login input-group icon buttons + module frame */ html[data-theme="dark"] .input-group-text, html[data-theme="dark"] .t4-module, html[data-theme="dark"] .t4-sidebar .t4-module, html[data-theme="dark"] [class*="sidebar"] .t4-module { border-color: var(--dm-border) !important; } /* P6: high-specificity #E5E7EB / #eeeeee leaks the earlier rules didn't beat * - megafilter sidebar filter panel: source is a 5-class chain * `.ja-mg-sidebar:not(.sb-horizontal) … .filter-content` (border #E5E7EB) * plus `.ja-filter-wrapper .filter-content{background:#eeeeee}` (light gray) * - com_users reset / remind form card (white #fff + #E5E7EB border) * - megafilter toolbar layout-chooser wrapper + list/grid item thumb (white) */ html[data-theme="dark"] .ja-filter-wrapper .filter-content, html[data-theme="dark"] .ja-mg-sidebar .sidebar-content .ja-filter-wrapper .filter-content { background-color: transparent !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] div.com-users-reset, html[data-theme="dark"] div.com-users-remind { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .field.jamg-layout-chooser, html[data-theme="dark"] .products-toolbar .field.jamg-layout-chooser { border-color: var(--dm-border) !important; } html[data-theme="dark"] .item-field.thumb, html[data-theme="dark"] .ja-megafilter .item-field.thumb { background-color: var(--dm-surface) !important; } /* P7: remaining #E5E7EB literals the sweep found after P6 * - layout-chooser inner span divider (border-left) * - tags page category-heading links (.com-tags__category … a) */ html[data-theme="dark"] .jamg-layout-chooser span, html[data-theme="dark"] .products-toolbar .field.jamg-layout-chooser span { border-color: var(--dm-border) !important; } html[data-theme="dark"] .com-tags__category a, html[data-theme="dark"] .com-tags__category .all-tag, html[data-theme="dark"] .com_tags .com-tags__category a { border-color: var(--dm-border) !important; } /* contact-detail list links in the listing sidebar (border-bottom #E5E7EB) */ html[data-theme="dark"] .contact-detail a, html[data-theme="dark"] .contact-detail .content a, html[data-theme="dark"] .listing-sidebar .contact-detail a, html[data-theme="dark"] .contact-detail li { border-bottom-color: var(--dm-border) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .contact-detail a { color: var(--dm-link); } /* P6: HOME megafilter dropdown panels are rgba(255,255,255,.5); the sidebar instances are transparent (correct) — scope to the horizontal (home) bar only */ html[data-theme="dark"] .sb-horizontal .filter-options-content, html[data-theme="dark"] .sb-horizontal .filter-dropdown .filter-options-content { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; } /* =========================================================================== * 18) LITERAL #E5E7EB BORDERS (not via var) → route to --dm-border (border-scan) * ========================================================================= */ html[data-theme="dark"] .chosen-container .chosen-search input, html[data-theme="dark"] .chosen-search-input, html[data-theme="dark"] .chosen-container .chosen-drop, html[data-theme="dark"] .owl-nav button, html[data-theme="dark"] .owl-prev, html[data-theme="dark"] .owl-next, html[data-theme="dark"] .counter, html[data-theme="dark"] .pagination-wrap .counter, html[data-theme="dark"] .sb-horizontal.ja-mg-sidebar, html[data-theme="dark"] .sb-horizontal.ja-mg-sidebar .sidebar, html[data-theme="dark"] .ja-mg-sidebar .ln-element, html[data-theme="dark"] .ja-filter-wrapper .ln-element, html[data-theme="dark"] .filter-field, html[data-theme="dark"] .filter-drop, html[data-theme="dark"] .box-inner, html[data-theme="dark"] .contact .box-inner, html[data-theme="dark"] .acm-features .col-12, html[data-theme="dark"] .acm-features .info-wrap, html[data-theme="dark"] .acm-features.style-2 [class*="col-"] { border-color: var(--dm-border) !important; } /* =========================================================================== * 20) PER-PAGE RE-REVIEW FIXES — Wave 1 (literal light-hex not yet re-scoped) * listings / listings-sidebar-grid / listing-detail-1 / login / typography * ========================================================================= */ /* Listing result card hairline ring (#E5E7EB box-shadow) → dark border token. Covers the no-sidebar grid (.view-listing) AND megafilter result cards. */ html[data-theme="dark"] .view-listing, html[data-theme="dark"] .view-listings-wrap .view-listing, html[data-theme="dark"] .product-item-info, html[data-theme="dark"] .product-item .product-item-info { box-shadow: 0 0 0 1px var(--dm-border) !important; } /* owl carousel prev/next GLYPH (FontAwesome) was #111827 → dark-on-dark on the already-darkened #232b37 button. Light icon to mirror light's relationship. */ html[data-theme="dark"] .owl-nav button, html[data-theme="dark"] .owl-nav .owl-prev, html[data-theme="dark"] .owl-nav .owl-next, html[data-theme="dark"] .owl-nav button span, html[data-theme="dark"] .owl-nav button i { color: var(--dm-heading) !important; } /* "Selected Filters" megafilter subtitle (literal #111827 → dark-on-dark) */ html[data-theme="dark"] .block-subtitle, html[data-theme="dark"] .filter-current-subtitle, html[data-theme="dark"] .block-subtitle.filter-current-subtitle { color: var(--dm-heading) !important; } /* "Clear All" filter button is a brand-fill button (not a muted text link here): keep WHITE label — section 10's muted color was bleeding onto it. */ html[data-theme="dark"] .clear-all-filter, html[data-theme="dark"] .clear-all-filter.btn-primary, html[data-theme="dark"] .btn-primary.clear-all-filter, html[data-theme="dark"] .clear-all-filter.action { color: #fff !important; } /* active pagination chip text — was indigo-on-indigo (#99a0fb); mirror light white */ html[data-theme="dark"] .pagination .active a, html[data-theme="dark"] .pagination .page-item.active .page-link, html[data-theme="dark"] .pages-item.active a, html[data-theme="dark"] .products-toolbar .pagination > .active > a { color: #fff !important; } /* megafilter pagination hover: source flips bg → accent #6366f1; text must go WHITE * like light (was staying --dm-link #99a0fb → indigo-on-indigo 1.87 contrast) */ html[data-theme="dark"] .products-toolbar .pagination > li > a:hover, html[data-theme="dark"] .products-toolbar .pagination > li > span:hover { color: #fff !important; } /* defensive: any megamenu link hover (nested/duplicate nav instances) stays legible */ html[data-theme="dark"] .t4-megamenu .nav-link:hover, html[data-theme="dark"] .t4-megamenu .navbar-nav a:hover { color: var(--dm-accent) !important; } /* Chosen multi-select (Amenities) box — bright #E5E7EB border on transparent */ html[data-theme="dark"] .chosen-container .chosen-choices, html[data-theme="dark"] .chosen-choices { background: var(--dm-surface-2) !important; border-color: var(--dm-field-border) !important; } /* toolbar sort-direction button border (#E5E7EB) */ html[data-theme="dark"] .sorter-action, html[data-theme="dark"] .action.sorter-action, html[data-theme="dark"] .sorter-action.sort-asc, html[data-theme="dark"] .sorter-action.sort-desc { border-color: var(--dm-border) !important; } /* sort-direction arrow: light = NEUTRAL icon (#111827) on a transparent button; * dark left the icon indigo (#99a0fb via the generic link rule) + a surface-2 * fill. Mirror light — neutral --dm-text glyph, transparent button. */ html[data-theme="dark"] .sorter-action, html[data-theme="dark"] .action.sorter-action { background-color: transparent !important; } html[data-theme="dark"] .sorter-action, html[data-theme="dark"] .sorter-action i, html[data-theme="dark"] .sorter-action i:before, html[data-theme="dark"] .sorter-action::before, html[data-theme="dark"] .products-toolbar .sorter-action i { color: var(--dm-text) !important; } html[data-theme="dark"] .sorter-action:hover, html[data-theme="dark"] .sorter-action:hover i { color: var(--dm-accent) !important; } /* social brand icons — keep WHITE glyph on the brand-colored chips (light parity) */ html[data-theme="dark"] .social-link, html[data-theme="dark"] .social-link i, html[data-theme="dark"] .share-social .social-link, html[data-theme="dark"] .info-social .social-link, html[data-theme="dark"] .social-inner .social-link { color: #fff !important; } /* "Show all photos" gallery lightbox button — white pill leak → dark surface */ html[data-theme="dark"] .html5lightbox, html[data-theme="dark"] .show-more .html5lightbox { background: var(--dm-surface) !important; color: var(--dm-heading) !important; border: 1px solid var(--dm-border) !important; } /* password-reveal eye button — restore the light coral brand accent (mirror light) */ html[data-theme="dark"] .input-password-toggle, html[data-theme="dark"] .btn.btn-secondary.input-password-toggle { background-color: #fb646f !important; border-color: #fb646f !important; color: #fff !important; } /* bright BS colored cards keep DARK text in dark (yellow/cyan too bright for white) */ html[data-theme="dark"] .card.bg-warning, html[data-theme="dark"] .card.bg-info, html[data-theme="dark"] .card.text-dark.bg-warning, html[data-theme="dark"] .card.text-dark.bg-info, html[data-theme="dark"] .card.bg-warning .card-body, html[data-theme="dark"] .card.bg-info .card-body, html[data-theme="dark"] .card.bg-warning .card-body *, html[data-theme="dark"] .card.bg-info .card-body * { color: #212529 !important; } /* =========================================================================== * 21) PER-PAGE RE-REVIEW FIXES — Wave 2 * listings-sidebar-list / listing-detail-2 / listing-detail-3 / registration * ========================================================================= */ /* Required-field asterisks (span.star) were flattened to body grey by the broad `span:not(...)` color:inherit reset (0,3,1 > 0,1,1). Restore light's red. */ html[data-theme="dark"] span.star, html[data-theme="dark"] .star, html[data-theme="dark"] .required .star, html[data-theme="dark"] label .star { color: #dc3545 !important; } /* Open/Closed status text (.stt-time.stt-*): on DETAIL pages the status is a bare caught by the span:not() reset (0,3,1) so the green/red was lost; on listing cards it's a

where .stt-time.stt-closed (0,2,0) still wins. Pin both states for dark (brightened for contrast on the dark surface). */ html[data-theme="dark"] .stt-time.stt-opennow, html[data-theme="dark"] span.stt-opennow, html[data-theme="dark"] .stt-opennow { color: #34d399 !important; } html[data-theme="dark"] .stt-time.stt-closed, html[data-theme="dark"] span.stt-closed, html[data-theme="dark"] .stt-closed { color: #f87171 !important; } /* Megafilter grid/list view-toggle glyphs (#374151) were dark-on-dark; muted at rest, brand on active/hover (mirrors light's #374151-on-white visibility). */ html[data-theme="dark"] .jamg-layout-chooser span[data-layout] i, html[data-theme="dark"] .jamg-layout-chooser .mode i, html[data-theme="dark"] .products-toolbar .modes .mode i { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .jamg-layout-chooser span.active i, html[data-theme="dark"] .jamg-layout-chooser span[data-layout]:hover i, html[data-theme="dark"] .products-toolbar .modes .mode.active i { color: var(--dm-accent-hover) !important; } /* List-view result card has a SEPARATE border-bottom:#ddd (distinct from the box-shadow ring already retinted) — route it to the dark border token. */ html[data-theme="dark"] .product-item-info { border-bottom-color: var(--dm-border) !important; } /* =========================================================================== * 22) PER-PAGE RE-REVIEW FIXES — Wave 3 * blogs / featured-articles / category / author-listing / smart-search * ========================================================================= */ /* RECURRING: card outline is a hardcoded `box-shadow: 0 0 0 1px #e5e7eb` ring (the cards have border-width:0, so the border-color remap is moot — the ring IS the outline). Recolor every card ring to the dark border token. */ html[data-theme="dark"] .box-inner, html[data-theme="dark"] .blog .box-inner, html[data-theme="dark"] .blog-featured .box-inner, html[data-theme="dark"] .item.type-vertical .box-inner, html[data-theme="dark"] .author-page .author .author-block-list, html[data-theme="dark"] .author-block-list { box-shadow: 0 0 0 1px var(--dm-border) !important; } /* author-listing social glyphs were flattened to the indigo link color by the broad span:not() reset — re-assert the per-brand colors (mirror light). */ html[data-theme="dark"] .author-socials .fa-facebook-f, html[data-theme="dark"] .author-block .author-socials .fa-facebook-f, html[data-theme="dark"] .author-socials .fa-facebook { color: #3b5998 !important; } html[data-theme="dark"] .author-socials .fa-twitter, html[data-theme="dark"] .author-block .author-socials .fa-twitter { color: #3a92c8 !important; } html[data-theme="dark"] .author-socials .fa-instagram, html[data-theme="dark"] .author-block .author-socials .fa-instagram { color: #e4405f !important; } html[data-theme="dark"] .author-socials .fa-linkedin, html[data-theme="dark"] .author-socials .fa-linkedin-in { color: #0a66c2 !important; } html[data-theme="dark"] .author-socials .fa-youtube { color: #ff0000 !important; } /* com_finder "No Results Found" panel — core hardcodes it light (#f3f4f6) */ html[data-theme="dark"] .com-finder__empty, html[data-theme="dark"] .finder .alert, html[data-theme="dark"] .search-no-results { background-color: var(--dm-surface) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .com-finder__empty h1, html[data-theme="dark"] .com-finder__empty h2, html[data-theme="dark"] .com-finder__empty h3 { color: var(--dm-heading) !important; } /* .btn-secondary is a CORAL CTA in light on EVERY page (Advanced Search, the typography "Secondary" demo button, the password-reveal eye). The earlier dark build wrongly greyed it to surface-2; mirror light's coral instead. */ html[data-theme="dark"] .btn-secondary, html[data-theme="dark"] .btn.btn-secondary { --bs-btn-bg: #fb646f; --bs-btn-border-color: #fb646f; --bs-btn-color: #fff; --bs-btn-hover-bg: #f9485a; --bs-btn-hover-border-color: #f9485a; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #f9485a; --bs-btn-active-border-color: #f9485a; background-color: #fb646f !important; border-color: #fb646f !important; color: #fff !important; } html[data-theme="dark"] .btn-secondary:hover, html[data-theme="dark"] .btn.btn-secondary:hover { background-color: #f9485a !important; border-color: #f9485a !important; color: #fff !important; } /* EXCEPTION: the tags-page filter toolbar (com_tags search / clear) styles its * .btn-secondary NEUTRAL grey (#E5E7EB) in light, not coral — so mirror THAT here * (a neutral dark chip), overriding the coral CTA rule above. */ html[data-theme="dark"] .com-tags__filters .input-group-append .btn-secondary, html[data-theme="dark"] .tag-category .filters .input-group-append .btn-secondary { --bs-btn-bg: var(--dm-surface-2); --bs-btn-border-color: var(--dm-field-border); --bs-btn-color: var(--dm-text); background-color: var(--dm-surface-2) !important; border-color: var(--dm-field-border) !important; color: var(--dm-text) !important; } html[data-theme="dark"] .com-tags__filters .input-group-append .btn-secondary:hover, html[data-theme="dark"] .tag-category .filters .input-group-append .btn-secondary:hover { background-color: var(--dm-surface) !important; border-color: var(--dm-field-border) !important; color: var(--dm-heading) !important; } /* =========================================================================== * 23) AUTHENTICATED USER PROFILE (com_users profile view) * ========================================================================= */ /* Profile panel is white in light (subtle card on #eee) → dark surface card. Without this, dt/dd/legend (already lifted to light text) sit on a white box. */ html[data-theme="dark"] .profile.profile, html[data-theme="dark"] .com-users-profile .profile { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; } /* avatar thumbnail white frame → dark frame */ html[data-theme="dark"] .profile .img-thumbnail, html[data-theme="dark"] .com-users-profile .img-thumbnail { background-color: var(--dm-surface-2) !important; border-color: var(--dm-field-border) !important; } /* =========================================================================== * 24) FRONTEND EDIT LAYOUT (t4-edit-layout: edit-profile, article edit, …) * This standalone layout loads neither template.css nor BS theme css; the * template override now links darkmode.css + sets data-theme. Cover the * edit-only widgets the normal page selectors don't reach. * ========================================================================= */ html[data-theme="dark"] body.t4-edit-layout, html[data-theme="dark"] .t4-edit-layout .t4-content, html[data-theme="dark"] .t4-edit-layout .t4-content-inner { background-color: var(--dm-bg); color: var(--dm-text); } html[data-theme="dark"] .t4-edit-layout .profile-edit, html[data-theme="dark"] .t4-edit-layout .com-users-profile-edit, html[data-theme="dark"] .t4-edit-layout fieldset { background-color: transparent; border-color: var(--dm-border); } /* readonly / disabled inputs → a slightly muted surface (mirror light's greyed field) */ html[data-theme="dark"] .t4-edit-layout input[readonly], html[data-theme="dark"] .t4-edit-layout input:disabled, html[data-theme="dark"] input[readonly], html[data-theme="dark"] .form-control[readonly] { background-color: var(--dm-band) !important; color: var(--dm-text-muted) !important; border-color: var(--dm-border) !important; } /* Choices.js (the edit layout's select widget — NOT Chosen.js) */ html[data-theme="dark"] .choices__inner, html[data-theme="dark"] .choices__list--dropdown, html[data-theme="dark"] .choices__list--dropdown .choices__list, html[data-theme="dark"] .choices[data-type*="select-one"] .choices__input { background-color: var(--dm-surface-2) !important; color: var(--dm-text) !important; border-color: var(--dm-field-border) !important; } html[data-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted, html[data-theme="dark"] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted { background-color: var(--dm-accent) !important; color: #fff !important; } html[data-theme="dark"] .choices__list--multiple .choices__item { background-color: var(--dm-accent) !important; border-color: var(--dm-accent) !important; color: #fff !important; } html[data-theme="dark"] .choices__placeholder { color: var(--dm-text-muted) !important; } /* Choices dropdown caret */ html[data-theme="dark"] .choices[data-type*="select-one"]::after { border-color: var(--dm-text-muted) transparent transparent transparent !important; } /* fieldset legends on the edit layout render as a WHITE title bar (bg:#fff) — white text on white = invisible. Drop the fill; the bottom border is the divider. */ html[data-theme="dark"] .t4-edit-layout legend, html[data-theme="dark"] .t4-edit-layout fieldset > legend, html[data-theme="dark"] body.t4-edit-layout legend { background-color: transparent !important; color: var(--dm-heading) !important; border-bottom-color: var(--dm-border) !important; } /* avatar / media-field preview — white frame → dark */ html[data-theme="dark"] .t4-edit-layout .field-media-wrapper, html[data-theme="dark"] .t4-edit-layout .field-media-preview, html[data-theme="dark"] .t4-edit-layout .field-media-preview img, html[data-theme="dark"] .field-media-preview img, html[data-theme="dark"] .t4-edit-layout img.img-thumbnail { background-color: var(--dm-surface-2) !important; border-color: var(--dm-field-border) !important; } /* Choices.js — belt-and-braces: dropdown panel + cloned search input + selected text */ html[data-theme="dark"] .choices__list--dropdown, html[data-theme="dark"] .choices__list[aria-expanded], html[data-theme="dark"] .choices__input--cloned, html[data-theme="dark"] .choices__inner .choices__input { background-color: var(--dm-surface-2) !important; color: var(--dm-text) !important; border-color: var(--dm-field-border) !important; } html[data-theme="dark"] .choices__list--dropdown .choices__item, html[data-theme="dark"] .choices__list--single .choices__item { color: var(--dm-text) !important; } /* Joomla alerts on the edit layout (amber API-token notice, etc.) — keep the semantic hue but darken the fill so light-on-light doesn't leak. */ html[data-theme="dark"] .t4-edit-layout .alert-warning, html[data-theme="dark"] .alert.alert-warning { background-color: #3a2e05 !important; color: #ffe08a !important; border-color: #5c4a08 !important; } html[data-theme="dark"] .t4-edit-layout .alert-info, html[data-theme="dark"] .alert.alert-info { background-color: #052c4a !important; color: #9ad0ff !important; border-color: #0a4570 !important; } html[data-theme="dark"] .t4-edit-layout .alert-success { background-color: #06371f !important; color: #86e0b0 !important; border-color: #0a5c34 !important; } /* =========================================================================== * 26) CARD / ARTICLE TITLES — white at rest, accent (purple) on hover * Light renders every card/listing/article title as dark #111827 at rest and * accent #6366f1 on hover (NO colour at rest = accent). The generic * `.t4-content a:not(.btn)` dark rule painted them indigo #99a0fb at rest (so * hover showed no change). Mirror light: near-white at rest, accent on hover. * Covers listing cards (.page-header h2/h3 a), megafilter cards * (.product-item-name a / .product-item-link), article/blog lists (.item-title, * .article-title, .box-title) and related/most-viewed lists. !important beats * the generic link rule. Status labels (Open Now / Closed) keep their green/red. * ========================================================================= */ html[data-theme="dark"] .page-header h1 a, html[data-theme="dark"] .page-header h2 a, html[data-theme="dark"] .page-header h3 a, html[data-theme="dark"] .item-title a, html[data-theme="dark"] .item-tag-title a, html[data-theme="dark"] .items-more a, html[data-theme="dark"] .com-content-category-blog__links a, html[data-theme="dark"] .article-title a, html[data-theme="dark"] .article-header h2 a, html[data-theme="dark"] .box-title a, html[data-theme="dark"] .product-item-name a, html[data-theme="dark"] .product-item-link, html[data-theme="dark"] .listing-title a, html[data-theme="dark"] .item-listing .page-header a { color: var(--dm-heading) !important; } html[data-theme="dark"] .page-header h1 a:hover, html[data-theme="dark"] .page-header h1 a:focus, html[data-theme="dark"] .page-header h2 a:hover, html[data-theme="dark"] .page-header h2 a:focus, html[data-theme="dark"] .page-header h3 a:hover, html[data-theme="dark"] .page-header h3 a:focus, html[data-theme="dark"] .item-title a:hover, html[data-theme="dark"] .item-title a:focus, html[data-theme="dark"] .item-tag-title a:hover, html[data-theme="dark"] .item-tag-title a:focus, html[data-theme="dark"] .items-more a:hover, html[data-theme="dark"] .items-more a:focus, html[data-theme="dark"] .com-content-category-blog__links a:hover, html[data-theme="dark"] .article-title a:hover, html[data-theme="dark"] .article-title a:focus, html[data-theme="dark"] .article-header h2 a:hover, html[data-theme="dark"] .box-title a:hover, html[data-theme="dark"] .box-title a:focus, html[data-theme="dark"] .product-item-name a:hover, html[data-theme="dark"] .product-item-link:hover, html[data-theme="dark"] .listing-title a:hover, html[data-theme="dark"] .item-listing .page-header a:hover { color: var(--dm-accent) !important; } /* =========================================================================== * 27) MEGAFILTER TOOLBAR — layout-chooser divider subtlety + small caret * The grid/list switch box + the line separating the two icons used --dm-border * (#2c3441) which reads heavier on the dark toolbar than light's barely-visible * #E5E7EB-on-white. Fade it to a faint hairline to mirror light's subtlety. * ========================================================================= */ html[data-theme="dark"] .jamg-layout-chooser, html[data-theme="dark"] .field.jamg-layout-chooser, html[data-theme="dark"] .products-toolbar .field.jamg-layout-chooser, html[data-theme="dark"] .jamg-layout-chooser span, html[data-theme="dark"] .products-toolbar .field.jamg-layout-chooser span { border-color: rgba(255,255,255,0.10) !important; } /* =========================================================================== * 28) SIDEBAR CATEGORY / ARTICLE-LIST MODULE LINKS — white rest, accent hover * Light renders the Categories module items (Hotels (10) …) and article-list * item links as dark #111827 at rest / accent #6366f1 on hover. The generic * `.t4-content a` dark rule left them indigo #99a0fb at rest (no hover change). * Mirror light: near-white at rest, purple on hover. Matches the Latest Articles * titles (already handled in §26). !important beats the generic link rule. * ========================================================================= */ html[data-theme="dark"] .mod-articlescategories a, html[data-theme="dark"] .mod-articles-categories a, html[data-theme="dark"] .categories-module a, html[data-theme="dark"] .mod-articlescategory a, html[data-theme="dark"] .mod-articleslatest a, html[data-theme="dark"] .latestnews a, html[data-theme="dark"] .mod-articles-latest a, html[data-theme="dark"] .t4-sidebar .mod-articlescategories a { color: var(--dm-heading) !important; } html[data-theme="dark"] .mod-articlescategories a:hover, html[data-theme="dark"] .mod-articlescategories a:focus, html[data-theme="dark"] .mod-articles-categories a:hover, html[data-theme="dark"] .categories-module a:hover, html[data-theme="dark"] .mod-articlescategory a:hover, html[data-theme="dark"] .mod-articleslatest a:hover, html[data-theme="dark"] .mod-articleslatest a:focus, html[data-theme="dark"] .latestnews a:hover, html[data-theme="dark"] .mod-articles-latest a:hover, html[data-theme="dark"] .t4-sidebar .mod-articlescategories a:hover { color: var(--dm-accent) !important; } /* =========================================================================== * 29) HEADER SEARCH BAR (horizontal megafilter) — segments blend, don't pop * In light the header search is a white wrap + border with TRANSPARENT segments * (the input + Chosen selects show the wrap, no distinct fill). In dark the global * input/Chosen rule filled them with --dm-surface-2 (#232b37) so each segment * popped as a lighter block on the dark header. Scope them transparent here (only * the header bar — the vertical SIDEBAR filter inputs stay filled, they ARE #fff * in light). Wrap stays transparent + border; search button stays accent. The * Chosen OPEN dropdown (.chosen-drop) keeps its surface for readability. */ html[data-theme="dark"] #t4-header .input-text, html[data-theme="dark"] .sb-horizontal .input-text, html[data-theme="dark"] #t4-header .chosen-single, html[data-theme="dark"] #t4-header .chosen-container-single .chosen-single, html[data-theme="dark"] .sb-horizontal .chosen-single, html[data-theme="dark"] .sb-horizontal .chosen-container-single .chosen-single { background-color: transparent !important; background: transparent !important; box-shadow: none !important; }