/* ============================================================================= * JA Trip — Dark mode (dark.css) * ----------------------------------------------------------------------------- * THIS IS A TEMPLATE FILE — DO NOT hand-edit from the T4 "Edit Custom CSS" * screen. That screen reads/writes css/custom.css, which is reserved for the * site owner's own tweaks. The dark theme lives HERE so owner edits never * collide with (or wipe out) the dark mode. * * Loaded as a separate stylesheet by templates/ja_trip/index.php (injected via * addCustomTag so it lands LAST in — after template.css and custom.css — * giving these rules the final word). The file is loaded in BOTH modes; only * the rules scoped under `html[data-theme="dark"]` activate in dark. The dark hook is set * pre-paint in index.php and toggled by js/darkmode.js. The toggle button is * the only component styled (unscoped) in BOTH modes. * * Light mode is the original, approved design and is NOT modified here. * Dark MIRRORS light — same contrast relationships, every state — it does not * add borders/glows the light design lacks. Brand accent (#FF6B00) is kept. * ===========================================================================*/ /* ------------------------------------------------------------------------- * 1. Theme toggle button (applies in BOTH modes — it must be visible in light) * Static markup lives in html/layouts/t4/block/mainnav.html (.t4-header-r); * js/darkmode.js only wires the click. Both icons are stacked and cross-fade * with a rotate/scale spring when the theme flips. * ---------------------------------------------------------------------- */ .t4-theme-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 .35rem 0 0; padding: 0; border: 0; border-radius: 50%; background: transparent; /* blends with the header (NOT a grey chip) */ color: inherit; /* icon follows the header text colour */ cursor: pointer; line-height: 0; flex: 0 0 auto; overflow: hidden; transition: background-color .2s ease, color .2s ease; } .t4-theme-toggle:hover, .t4-theme-toggle:focus-visible { background: rgba(0, 0, 0, .08); color: #FF6B00; } .t4-theme-toggle:focus-visible { outline: 2px solid #FF6B00; outline-offset: 2px; } /* On dark the hover wash is a light tint instead. */ html[data-theme="dark"] .t4-theme-toggle:hover, html[data-theme="dark"] .t4-theme-toggle:focus-visible { background: rgba(255, 255, 255, .10); color: #ff8534; } .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-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); } /* ========================================================================= * 2. Dark palette (single source of truth) * ========================================================================= */ html[data-theme="dark"] { --dm-bg: #11151f; /* page background */ --dm-band: #161b27; /* subtle band — replaces light off-white */ --dm-surface: #1a2130; /* cards / footer / off-canvas */ --dm-surface-2: #222a3b; /* elevated: inputs, hovers, dropdowns */ --dm-border: #2c3547; /* faint dividers (mirror light's faint) */ --dm-text: #c2c9d6; /* body copy */ --dm-text-muted: #8c97a8; /* secondary / meta */ --dm-heading: #eef1f6; /* headings & strong links */ /* Brand accent — kept; hover is a LIGHTER orange so it lifts on dark. */ --ja-accent: #FF6B00; --ja-accent-hover: #ff8534; /* Template's root text tokens (#111 heading / #585c63 body / faint border). Many components read these vars directly — remap once here so headings, body copy and dividers lift across the whole site. Dark-image heroes set their OWN --heading-color:#fff / --body-text-color locally (higher specificity), so those stay white — exactly as in light. */ --heading-color: var(--dm-heading); --body-text-color: var(--dm-text); --border-color: var(--dm-border); /* Page background token — used by edge-masking bars (e.g. the testimonial carousel draws 2px var(--body-bg-color) strips to hide the frame ends; on white they vanish, so on dark they MUST be the dark page colour too). */ --body-bg-color: var(--dm-bg); /* Template color system (T4 customcolors) — these drive whole sections. --color-light (#f8f5f0 warm off-white) is used as a background by .acm-features.style-2 + several modules; remap it to a dark band. --color-primary (#ff6b00 accent) is intentionally kept. */ --color-light: #161b27; /* Bootstrap/utility tokens that carry LIGHT values — remap so .bg-light, .text-dark, .border etc. read dark surfaces. */ --t4-light: #161b27; --t4-light-rgb: 22, 27, 39; --t4-body-bg: #11151f; --t4-body-bg-rgb: 17, 21, 31; --t4-body-color: #c2c9d6; --t4-body-color-rgb: 194, 201, 214; --t4-border-color: #2c3547; --t4-secondary-bg: #1a2130; --t4-tertiary-bg: #222a3b; --t4-emphasis-color: #eef1f6; } /* ========================================================================= * 3. Base surfaces & typography * ========================================================================= */ html[data-theme="dark"] body { background-color: var(--dm-bg); color: var(--dm-text); } html[data-theme="dark"] .t4-wrapper, html[data-theme="dark"] .t4-content, html[data-theme="dark"] .t4-content-inner { 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); } /* Body text inherits --dm-text from `body`, and the template's own copy reads the remapped --body-text-color — so NO blanket p/li/dd/span rule here. A blanket rule would override the intended text color of badges, colored cards and alerts (Bootstrap .bg-* components), washing them out. Only the explicit muted utilities are nudged: */ html[data-theme="dark"] .text-muted, html[data-theme="dark"] .text-body-secondary { color: var(--dm-text-muted) !important; } /* Body-copy links → accent. Scope to PROSE only (paragraphs, list items, article body) so it never catches card titles, nav, buttons or on-image headings — matching how links read against light's body copy. */ html[data-theme="dark"] .t4-content p a:not([class*="btn"]), html[data-theme="dark"] .t4-content li a:not([class*="btn"]):not(.nav-link):not(.dropdown-item):not(.page-link), 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"] .article-full-text a:not([class*="btn"]) { color: var(--ja-accent); } html[data-theme="dark"] .t4-content p a:not([class*="btn"]):hover, html[data-theme="dark"] .article-intro a:not([class*="btn"]):hover, html[data-theme="dark"] .com-content-article__body a:not([class*="btn"]):hover { color: var(--ja-accent-hover); } /* Heading LINKS — article/card/blog titles are `…` where the inner keeps a near-black (#111) link color. In light those titles are dark on white; mirror that on dark by lifting the link to the heading color. Scoped to content headings; excludes buttons. Near-white also reads fine on the image-overlay heroes, so this stays safe there. */ html[data-theme="dark"] .t4-content :is(h1, h2, h3, h4, h5, h6) a:not([class*="btn"]), html[data-theme="dark"] .heading-link, html[data-theme="dark"] .module-title, html[data-theme="dark"] .article-header a, html[data-theme="dark"] .item-title a { color: var(--dm-heading); } html[data-theme="dark"] .t4-content :is(h1, h2, h3, h4, h5, h6) a:not([class*="btn"]):hover, html[data-theme="dark"] .heading-link:hover, html[data-theme="dark"] .article-header a:hover, html[data-theme="dark"] .item-title a:hover { color: var(--ja-accent); } html[data-theme="dark"] hr { border-color: var(--dm-border); } /* Article meta byline (dd.createdby > a > span) keeps a near-black colour on the inner span too — cover the descendants. */ html[data-theme="dark"] .createdby, html[data-theme="dark"] .createdby a, html[data-theme="dark"] .createdby a span, html[data-theme="dark"] .createdby a strong, html[data-theme="dark"] .createdby span, html[data-theme="dark"] .createdby strong, html[data-theme="dark"] .item-author, html[data-theme="dark"] .item-author a, html[data-theme="dark"] .item-author a strong, html[data-theme="dark"] .article-info a, html[data-theme="dark"] .mod-articles-category-writtenby a { color: var(--dm-text-muted); } html[data-theme="dark"] .createdby a:hover, html[data-theme="dark"] .createdby a:hover span, html[data-theme="dark"] .article-info a:hover { color: var(--ja-accent); } /* ========================================================================= * 4. Header (light bar in light mode) → dark bar * ========================================================================= */ html[data-theme="dark"] #t4-header, html[data-theme="dark"] .header-block { background-color: var(--dm-bg); color: var(--dm-text); } /* Header bottom divider is #e9ecef — subtle on a light header, glaring on dark. */ html[data-theme="dark"] #t4-header, html[data-theme="dark"] .t4-header { border-bottom-color: var(--dm-border); } html[data-theme="dark"] #t4-header .nav-link, html[data-theme="dark"] #t4-header .t4-header-r { color: var(--dm-text); } /* Active/current item — the `.active`/`.current` class is on the
  • , so `.nav-link.active` never matched. In light the active link is orange; mirror. */ html[data-theme="dark"] #t4-header .nav-link:hover, html[data-theme="dark"] #t4-header .nav-link.active, html[data-theme="dark"] #t4-header .active > .nav-link, html[data-theme="dark"] #t4-header .current > .nav-link, html[data-theme="dark"] #t4-header .nav-item.active > .nav-link, html[data-theme="dark"] #t4-mainnav .active > .nav-link { color: var(--ja-accent); } /* Logo wordmark "JA Trip" is dark in the SVG → unreadable on the dark header / off-canvas. Swap to a light-wordmark copy (sunrise colours unchanged). */ html[data-theme="dark"] .logo-img { content: url("/images/joomlart/logo/item-1-dark.svg"); } /* Topbar already dark (#212529) in both modes — only nudge to our palette. */ html[data-theme="dark"] #t4-topbar, html[data-theme="dark"] .t4-topbar { background-color: #0d1119; } /* ========================================================================= * 5. Cards / list items / generic surfaces * ========================================================================= */ html[data-theme="dark"] .card, /* Only cards that are a REAL solid panel in light (white bg) become a dark surface. Blog items (.item-article/.item-highlight/.item-child) and bare .item-inner are TRANSPARENT in light — text sits on the page / over an image — so they must stay transparent here (a dark surface created fake 2-tier boxes light mode never had). */ html[data-theme="dark"] .tour-item, html[data-theme="dark"] .module-ct.style-default, html[data-theme="dark"] .well, html[data-theme="dark"] .panel { background-color: var(--dm-surface); border-color: var(--dm-border); color: var(--dm-text); } html[data-theme="dark"] .card .card-body { color: var(--dm-text); } /* .item-content is a WHITE content card that OVERLAPS the photo (margin-top: -32px) — the opaque white hides the part of the image it sits over. Making it transparent let the image show through, so its border + rounded corners drew a line across the photo. Give it the dark surface (opaque) like light's white card, and soften the #e9ecef frame to the subtle dark divider. */ html[data-theme="dark"] .item-content { background-color: var(--dm-surface); border-color: var(--dm-border); } html[data-theme="dark"] .blog-item-content, html[data-theme="dark"] .blog-item .item-content, html[data-theme="dark"] .com-content-category-blog__item { border-color: var(--dm-border); } /* Author "Latest Stories" card (.item.column-1) is white-on-white in light — a card that blends invisibly with the page. Mirror that: make the whole card (wrapper + its image + content) TRANSPARENT so it blends with the dark page, instead of a mismatched dark box. */ html[data-theme="dark"] .item.column-1, html[data-theme="dark"] .item.column-1 .item-content, html[data-theme="dark"] .item.column-1 .item-image, html[data-theme="dark"] .item.column-1 figure.item-image { background-color: transparent; } /* Featured/highlight post (.blog-item-content) is a side-by-side image+content card with NO overlap (margin-top:0) — white-on-white in light, i.e. it blends with the page. Mirror that: make it TRANSPARENT (blend), not a dark box that reads as two split colours against the page. (Grid cards, which DO overlap the photo, keep the opaque --dm-surface from the rule above.) */ html[data-theme="dark"] .blog-item-content, html[data-theme="dark"] .blog-item-content .item-content, html[data-theme="dark"] .blog-item-content .top-lead, html[data-theme="dark"] .blog-item-content .item-image { background-color: transparent; } /* The content card has rounded TOP corners + a small overlap over the photo, so at the seam its rounded corners reveal the page bg as a dark notch (invisible on light's white page, a black gap on dark). Square the content's TOP corners so it meets the photo flush, and back the image with the surface so no page bg shows through at the seam. Applied to ALL these blog/article card layouts. */ html[data-theme="dark"] .item-content { border-top-left-radius: 0; border-top-right-radius: 0; } html[data-theme="dark"] .item-image, html[data-theme="dark"] figure.item-image, html[data-theme="dark"] .top-lead, html[data-theme="dark"] .intro-image { background-color: var(--dm-surface); } /* Tour / article card inner panel — hardcoded white ($white) in the source. */ html[data-theme="dark"] .info-article { background-color: var(--dm-surface); color: var(--dm-text); } html[data-theme="dark"] .info-article .heading-link { color: var(--dm-heading); } html[data-theme="dark"] .info-article .heading-link:hover { color: var(--ja-accent); } /* Testimonial author role — .acm-testimonial.style-1 … hardcodes #495057 (too faint on dark); match its 4-class specificity. */ html[data-theme="dark"] .acm-testimonial.style-1 .testimonial-position, html[data-theme="dark"] .acm-testimonial .testimonial-position, html[data-theme="dark"] .testimonial-position { color: var(--dm-text-muted); } /* Testimonial grid borders are a glaring light grey (#e9ecef) on dark — the outer frame + the vertical dividers between cards. Match specificity. */ html[data-theme="dark"] .acm-testimonial.style-1 .testimonial-wrap .owl-stage-outer { border-color: var(--dm-border); } html[data-theme="dark"] .acm-testimonial.style-1 .testimonial-wrap .owl-stage .owl-item { border-left-color: var(--dm-border); } /* Small underline accent bar under each quote (#ced4da) */ html[data-theme="dark"] .testimonial-block::after { background-color: var(--dm-border); } /* ========================================================================= * 6. Section backgrounds — utility/palette classes carrying LIGHT values * ========================================================================= */ html[data-theme="dark"] .bg-light, html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-body, html[data-theme="dark"] .bg-body-tertiary, html[data-theme="dark"] .bg-body-secondary { background-color: var(--dm-band) !important; color: var(--dm-text); } html[data-theme="dark"] .bg-light .module-title, html[data-theme="dark"] .bg-light h1, html[data-theme="dark"] .bg-light h2, html[data-theme="dark"] .bg-light h3 { color: var(--dm-heading); } /* Adventure feature block (.acm-features.style-2) — its inner framed photo (.intro-img-2) is a hardcoded white card; give it a dark surface + border. */ html[data-theme="dark"] .acm-features.style-2 .intro-img-2 { background: var(--dm-surface); border-color: var(--dm-surface); } /* "How We Can Help" cards (.acm-features.style-3 .features-item) — white card. */ html[data-theme="dark"] .acm-features.style-3 .features-item { background: var(--dm-surface); border-color: var(--dm-border); } html[data-theme="dark"] .acm-features.style-3 .features-item .features-title, html[data-theme="dark"] .acm-features.style-3 .features-item h3, html[data-theme="dark"] .acm-features.style-3 .features-item h4 { color: var(--dm-heading); } /* ========================================================================= * 7. Background-IMAGE sections — darken via the existing overlay layer * (text on these is white in BOTH modes — leave text alone, deepen mask) * ========================================================================= */ html[data-theme="dark"] .t4-hero .mask, html[data-theme="dark"] .acm-features.style-1 .mask, html[data-theme="dark"] .bg-overlay.bg-overlay-image, html[data-theme="dark"] .cta-bg::after, html[data-theme="dark"] .item-inner.bg-backdrop::after { background-color: rgba(8, 11, 18, .55); } /* Frosted-WHITE glass panels that float OVER a photo — destination / category / team labels and the highlighted blog teaser (.content-inner). In LIGHT they're a subtle white frost holding DARK text. They are self-contained glass cards over imagery, so keep that EXACT look in dark (do NOT repaint them dark — that made an ugly 2-tier box light mode never had). Keep the white frost; just force the text back to dark, like light. */ html[data-theme="dark"] .categories-module .item-wrap .item-inner, html[data-theme="dark"] .acm-teams.style-1 .teams-item-inner .teams-text, html[data-theme="dark"] .item-inner.bg-backdrop, html[data-theme="dark"] .mod-list-layout-1 .item-highlight .content-inner, html[data-theme="dark"] .view-tour-listing.tour-layout-vertical-2 .tour-item .info-article { --heading-color: #1b1e24; --body-text-color: #3c424b; color: #3c424b; } /* Listings style-3 cards: frosted-white .info-article over the photo — title + location must be dark (light text was unreadable on the white frost). */ html[data-theme="dark"] .view-tour-listing.tour-layout-vertical-2 .tour-item .info-article h2 a, html[data-theme="dark"] .view-tour-listing.tour-layout-vertical-2 .tour-item .info-article .heading-link { color: #1b1e24; } html[data-theme="dark"] .view-tour-listing.tour-layout-vertical-2 .tour-item .info-article .info-location, html[data-theme="dark"] .view-tour-listing.tour-layout-vertical-2 .tour-item .info-article .tour-meta, html[data-theme="dark"] .view-tour-listing.tour-layout-vertical-2 .tour-item .info-article .tour-meta * { color: #3c424b; } html[data-theme="dark"] .categories-module .item-wrap .item-inner :is(h1,h2,h3,h4,h5,h6), html[data-theme="dark"] .categories-module .item-wrap .item-inner :is(h1,h2,h3,h4,h5,h6) a, html[data-theme="dark"] .item-inner.bg-backdrop .item-title, html[data-theme="dark"] .item-inner.bg-backdrop .item-title a, html[data-theme="dark"] .item-inner.bg-backdrop h3 a, html[data-theme="dark"] .acm-teams.style-1 .teams-item-inner .teams-text :is(h1,h2,h3,h4,h5,h6), html[data-theme="dark"] .mod-list-layout-1 .item-highlight .content-inner :is(h1,h2,h3,h4,h5,h6), html[data-theme="dark"] .mod-list-layout-1 .item-highlight .content-inner :is(h1,h2,h3,h4,h5,h6) a { color: #1b1e24; } html[data-theme="dark"] .categories-module .item-wrap .item-inner span, html[data-theme="dark"] .item-inner.bg-backdrop span, html[data-theme="dark"] .acm-teams.style-1 .teams-item-inner .teams-text span, html[data-theme="dark"] .mod-list-layout-1 .item-highlight .content-inner p, html[data-theme="dark"] .mod-list-layout-1 .item-highlight .content-inner [class*="introtext"], html[data-theme="dark"] .mod-list-layout-1 .item-highlight .content-inner [class*="mod-articles-category"], html[data-theme="dark"] .mod-list-layout-1 .item-highlight .content-inner .createdby, html[data-theme="dark"] .mod-list-layout-1 .item-highlight .content-inner .createdby a, html[data-theme="dark"] .mod-list-layout-1 .item-highlight .content-inner .createdby a span { color: #3c424b; } /* ========================================================================= * 8. Footer / copyright (white in light) → dark surface * ========================================================================= */ html[data-theme="dark"] #t4-footer, html[data-theme="dark"] .t4-footer, html[data-theme="dark"] .t4-footer-inner { background-color: var(--dm-surface); color: var(--dm-text); } html[data-theme="dark"] #t4-footer a:not([class*="btn"]) { color: var(--dm-text); } html[data-theme="dark"] #t4-footer a:not([class*="btn"]):hover { color: var(--ja-accent); } html[data-theme="dark"] #t4-footer .module-title { color: var(--dm-heading); } html[data-theme="dark"] .copyright { border-top-color: var(--dm-border); color: var(--dm-text-muted); } /* ========================================================================= * 9. Off-canvas / mobile menu (white panel) → dark * ========================================================================= */ html[data-theme="dark"] .t4-offcanvas, html[data-theme="dark"] .t4-off-canvas-header, html[data-theme="dark"] .t4-off-canvas-body { background-color: var(--dm-surface); color: var(--dm-text); } /* Top-level off-canvas menu links inherit a near-black (#111) colour from the navbar rules (specificity 0,4,0) — match it so Locations/Listings/etc read. */ html[data-theme="dark"] .t4-offcanvas .nav-link, html[data-theme="dark"] .t4-off-canvas-body a, html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .nav-link, html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .separator { color: var(--dm-text); } html[data-theme="dark"] .t4-offcanvas .nav-link:hover, 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-item.active > .nav-link { color: var(--ja-accent); } /* off-canvas header sitename/logo text */ html[data-theme="dark"] .t4-off-canvas-header, html[data-theme="dark"] .t4-off-canvas-header a, html[data-theme="dark"] .t4-off-canvas-header .site-name, html[data-theme="dark"] .t4-off-canvas-header .sitename { color: var(--dm-heading); } html[data-theme="dark"] .t4-offcanvas .menu-item, html[data-theme="dark"] .t4-off-canvas-body .nav > li { border-color: var(--dm-border); } /* Submenu drill-down toggle arrow (.btn-toggle) is a light circle (#f2f4f6) with a faint grey chevron (#adb5bd) — make the chevron light, drop the circle so the > arrows on Listings / Tour Detail read clearly on dark. */ html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle { background-color: transparent; color: var(--dm-text); } html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle::after, html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle::before { color: var(--dm-text); } /* In LIGHT the off-canvas panel AND its drill-down submenu are the SAME white, so the menu reads as one uniform surface. In dark the megamenu rule painted the submenu --dm-surface-2 (a second, lighter shade) → a two-tone split. Pin the off-canvas submenu + back-bar to the panel colour so it stays one uniform surface like light. */ html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .dropdown-menu, html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .mega-dropdown-menu { background-color: var(--dm-surface); border: 0; } html[data-theme="dark"] .t4-offcanvas .sub-menu-back { background-color: transparent; color: var(--dm-text); } html[data-theme="dark"] .t4-offcanvas .sub-menu-back:hover { color: var(--ja-accent); } /* ========================================================================= * 10. Mega menu / dropdowns * ========================================================================= */ html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .mega-dropdown-menu { background-color: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text); /* Bootstrap dropdown + megamenu items read these vars (default → #111). */ --t4-dropdown-link-color: var(--dm-text); --t4-dropdown-link-hover-color: var(--ja-accent); --t4-dropdown-link-hover-bg: var(--dm-surface); --mainnav-link-color: var(--dm-text); --mainnav-link-hover-color: var(--ja-accent); } html[data-theme="dark"] .dropdown-item { color: var(--dm-text); } html[data-theme="dark"] .t4-megamenu .dropdown-menu li > a, html[data-theme="dark"] .t4-megamenu .dropdown-menu li .dropdown-item { color: var(--dm-text); } html[data-theme="dark"] .t4-megamenu .dropdown-menu li > a:hover, html[data-theme="dark"] .t4-megamenu .dropdown-menu li .dropdown-item:hover { color: var(--ja-accent); } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background-color: var(--dm-surface); color: var(--ja-accent); } html[data-theme="dark"] .dropdown-divider { border-color: var(--dm-border); } /* Nav caret (.item-caret::before triangle) reads --mainnav-link-color (dark by default → invisible on the dark header). Light it via the header-level vars; hover/active stays accent. */ html[data-theme="dark"] #t4-header, html[data-theme="dark"] .t4-megamenu .navbar-nav { --mainnav-link-color: var(--dm-text); --mainnav-link-hover-color: var(--ja-accent); } html[data-theme="dark"] .t4-megamenu .navbar-nav > li > a .item-caret::before, html[data-theme="dark"] .t4-megamenu .navbar-nav > li > .nav-link .item-caret::before { border-top-color: var(--dm-text); } html[data-theme="dark"] .t4-megamenu .navbar-nav > li:hover > a .item-caret::before, html[data-theme="dark"] .t4-megamenu .navbar-nav > li.show > a .item-caret::before, html[data-theme="dark"] .t4-megamenu .navbar-nav > li.active > a .item-caret::before { border-top-color: var(--ja-accent); } /* Mega-menu column headings (.mega-col-title / .module-title) are #212529 in BOTH modes — readable on the light panel, too dark on the dark panel. */ html[data-theme="dark"] .t4-megamenu .mega-col-title, html[data-theme="dark"] .t4-megamenu .mega-col-title span, html[data-theme="dark"] .t4-megamenu .mega-col-nav .mega-col-title, html[data-theme="dark"] .t4-megamenu .mega-col-nav .mega-col-title span, html[data-theme="dark"] .t4-megamenu .t4-module .module-title, html[data-theme="dark"] .t4-megamenu .t4-module .module-title span { color: var(--dm-heading); } html[data-theme="dark"] .t4-megamenu .mega-col-title { border-bottom-color: var(--dm-border); } /* Mega-menu "New Tours" promo cards: when the menu is open, a template state turns BOTH the category and the title orange — so they read as the same level (light keeps them dark/neutral with only the orange bullet for accent). Restore the hierarchy: title = bright heading, category = muted, bullet stays orange, price stays blue (by design). */ html[data-theme="dark"] .t4-megamenu .tour-item .heading-link, html[data-theme="dark"] .t4-megamenu .info-article .heading-link, html[data-theme="dark"] .mega-dropdown-menu .info-article .heading-link, html[data-theme="dark"] .mega-dropdown-menu .mod-articles-title a { color: var(--dm-heading) !important; } html[data-theme="dark"] .t4-megamenu .tour-item .heading-link:hover, html[data-theme="dark"] .mega-dropdown-menu .info-article .heading-link:hover { color: var(--ja-accent) !important; } html[data-theme="dark"] .t4-megamenu .tour-item .category-article a, html[data-theme="dark"] .mega-dropdown-menu .category-article a, html[data-theme="dark"] .mega-dropdown-menu .category-article { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .t4-megamenu .tour-item .category-article a:hover, html[data-theme="dark"] .mega-dropdown-menu .category-article a:hover { color: var(--ja-accent) !important; } /* ========================================================================= * 11. Forms / inputs * ========================================================================= */ /* ONLY the hero finder field bakes a DARK magnifier PNG into its background — swap it for a light magnifier SVG. Scope to the hero: other search inputs (e.g. the sidebar finder) have NO background icon in light, so adding one there tiled a row of magnifiers. Keep no-repeat to be safe. */ html[data-theme="dark"] .acm-features.style-1 .mod-finder input.form-control { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c2c9d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E"); background-repeat: no-repeat; } 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"] textarea { background-color: var(--dm-surface-2); 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); } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus, html[data-theme="dark"] textarea:focus { background-color: var(--dm-surface-2); border-color: var(--ja-accent); color: var(--dm-text); box-shadow: 0 0 0 .2rem rgba(255, 107, 0, .25); } html[data-theme="dark"] .input-group-text { background-color: var(--dm-surface); border-color: var(--dm-border); color: var(--dm-text-muted); } html[data-theme="dark"] label, html[data-theme="dark"] .control-label, html[data-theme="dark"] legend { color: var(--dm-text); } /* Checkboxes / radios — white box → dark surface; checked uses the accent. */ html[data-theme="dark"] .form-check-input { background-color: var(--dm-surface-2); border-color: var(--dm-border); } html[data-theme="dark"] .form-check-input:checked { background-color: var(--ja-accent); border-color: var(--ja-accent); } html[data-theme="dark"] .form-check-input:focus { border-color: var(--ja-accent); box-shadow: 0 0 0 .2rem rgba(255, 107, 0, .25); } /* ========================================================================= * 12. Buttons — keep accent; fix light-styled text-link buttons * ========================================================================= */ html[data-theme="dark"] .btn-light, html[data-theme="dark"] .btn-outline-light { background-color: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text); } html[data-theme="dark"] .btn-light:hover { background-color: var(--dm-surface); color: var(--dm-heading); } html[data-theme="dark"] .btn-outline-dark { color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] .btn-outline-dark:hover { background-color: var(--dm-surface-2); color: var(--dm-heading); } /* Secondary (#111 near-black) stands out on white in light; lift it on dark so it stays distinguishable instead of vanishing into the page. */ html[data-theme="dark"] .btn-secondary { background-color: var(--dm-surface-2); border-color: var(--dm-surface-2); color: var(--dm-heading); } html[data-theme="dark"] .btn-secondary:hover { background-color: var(--dm-surface); color: var(--dm-heading); } html[data-theme="dark"] .btn-outline-secondary { color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--dm-surface-2); color: var(--dm-heading); } /* ========================================================================= * 13. Tables / pagination / badges / alerts (Bootstrap components) * ========================================================================= */ html[data-theme="dark"] .table { --t4-table-color: var(--dm-text); color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] .table th, html[data-theme="dark"] .table td { border-color: var(--dm-border); } html[data-theme="dark"] .page-link { background-color: var(--dm-surface); border-color: var(--dm-border); color: var(--dm-text); } html[data-theme="dark"] .page-link:hover { background-color: var(--dm-surface-2); color: var(--ja-accent); } html[data-theme="dark"] .page-item.active .page-link { background-color: var(--ja-accent); border-color: var(--ja-accent); color: #fff; } html[data-theme="dark"] .page-item.disabled .page-link { background-color: var(--dm-surface); color: var(--dm-text-muted); } html[data-theme="dark"] .counter { background-color: var(--dm-surface); border-color: var(--dm-border); color: var(--dm-text-muted); } html[data-theme="dark"] .badge.bg-light { background-color: var(--dm-surface-2) !important; color: var(--dm-text) !important; } /* bg-light badge becomes a dark surface → light text. But bg-info / bg-warning badges stay their LIGHT colour, so their `.text-dark` must remain dark. */ html[data-theme="dark"] .badge.bg-info.text-dark, html[data-theme="dark"] .badge.bg-warning.text-dark, html[data-theme="dark"] .badge.bg-light.text-dark { color: var(--dm-text); } html[data-theme="dark"] .badge.bg-info.text-dark, html[data-theme="dark"] .badge.bg-warning.text-dark { color: #212529 !important; } /* Soft Bootstrap alert/card subtle backgrounds become muddy on dark; keep their hue but anchor on a dark surface so text stays readable. */ html[data-theme="dark"] .alert { background-color: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text); } html[data-theme="dark"] .card.bg-light, html[data-theme="dark"] .card.bg-white { background-color: var(--dm-surface) !important; color: var(--dm-text); } /* Solid-colour cards carry WHITE text in light — keep that (my text-var remap + the .card .card-body rule above would otherwise dim it to off-white). */ html[data-theme="dark"] :is(.card.bg-primary, .card.bg-secondary, .card.bg-success, .card.bg-danger, .card.bg-dark), html[data-theme="dark"] :is(.card.bg-primary, .card.bg-secondary, .card.bg-success, .card.bg-danger, .card.bg-dark) :is(.card-body, .card-header, .card-footer, .card-title, .card-text, p, h1, h2, h3, h4, h5, h6) { color: #fff; } /* Contact component — labels (span.title), values (span.txt) and links are near-black (#111) in the module's own CSS. */ html[data-theme="dark"] .contact .title, html[data-theme="dark"] .contact dt, html[data-theme="dark"] .contact .contact-address dt { color: var(--dm-heading); } html[data-theme="dark"] .contact .txt, html[data-theme="dark"] .contact dd, html[data-theme="dark"] .contact address, html[data-theme="dark"] .contact .contact-address dd { color: var(--dm-text); } html[data-theme="dark"] .contact a:not([class*="btn"]) { color: var(--ja-accent); } html[data-theme="dark"] .contact a:not([class*="btn"]):hover { color: var(--ja-accent-hover); } /* Alert links — keep readable on the dark alert surface (secondary/light variants otherwise compute near-invisible). */ html[data-theme="dark"] .alert .alert-link { color: var(--dm-heading); } /* "Light" card header text */ html[data-theme="dark"] .card.bg-light .card-header, html[data-theme="dark"] .card.bg-white .card-header { color: var(--dm-heading); border-color: var(--dm-border); } /* ========================================================================= * 14. Masthead / page title module * Light mode: orange + a light texture image (bg-masthead.jpg) → light band. * Dark mode: replace with a dark band so the page title bar fits the theme. * ========================================================================= */ html[data-theme="dark"] .ja-masthead { background-image: none; background-color: var(--dm-band); color: var(--dm-heading); } html[data-theme="dark"] .ja-masthead .ja-masthead-title, html[data-theme="dark"] .t4-masthead .ja-masthead-title { color: var(--dm-heading); } html[data-theme="dark"] .ja-masthead .ja-masthead-description, html[data-theme="dark"] .ja-masthead .description, html[data-theme="dark"] .t4-masthead p { color: var(--dm-text-muted); } /* ========================================================================= * 15. Google Maps fallback (dev shows a light error slab without an API key; * a real map stays as Google renders it). Soften the error container only. * ========================================================================= */ html[data-theme="dark"] .gm-err-container { background-color: var(--dm-surface); color: var(--dm-text-muted); } html[data-theme="dark"] .gm-err-title, html[data-theme="dark"] .gm-err-message { color: var(--dm-text) !important; } /* ========================================================================= * 16. Article detail components — accordion, pager, carousel dots * ========================================================================= */ /* "Book this tour" sidebar — row dividers are a harsh #e9ecef on dark; soften to the subtle dark divider so it reads like light's faint line. */ html[data-theme="dark"] .tour_details .item, html[data-theme="dark"] .tour_details.entry-meta .item, html[data-theme="dark"] .tour-booking .item { border-top-color: var(--dm-border); } /* Itinerary accordion (.accordion-item is hardcoded near-white) */ html[data-theme="dark"] .accordion { --t4-accordion-bg: var(--dm-surface); --t4-accordion-color: var(--dm-text); --t4-accordion-border-color: var(--dm-border); --t4-accordion-active-bg: var(--dm-surface-2); --t4-accordion-active-color: var(--dm-heading); --t4-accordion-btn-color: var(--dm-heading); --t4-accordion-btn-bg: var(--dm-surface); } html[data-theme="dark"] .accordion-item { background-color: var(--dm-surface); border-color: var(--dm-border); color: var(--dm-text); } /* The tour itinerary uses an ID rule (#accordionTour .accordion-item{background:#fcfcfc}) that outranks the class rule above — match its specificity. */ html[data-theme="dark"] #accordionTour .accordion-item { background: var(--dm-surface); border-color: var(--dm-border); } html[data-theme="dark"] #accordionTour .accordion-item .accordion-header button { color: var(--dm-heading); } html[data-theme="dark"] .accordion-button { background-color: var(--dm-surface); color: var(--dm-heading); } html[data-theme="dark"] .accordion-button:not(.collapsed) { background-color: var(--dm-surface-2); color: var(--dm-heading); } html[data-theme="dark"] .accordion-body { background-color: var(--dm-surface); color: var(--dm-text); } /* chevron icon is a dark SVG — invert so it shows on dark */ html[data-theme="dark"] .accordion-button::after { filter: invert(1) grayscale(1) brightness(1.6); } /* Prev/next article pager — in LIGHT it's NO box, just text between two faint divider lines. Mirror that: transparent (not a dark card), neutral light text (not all-orange), softened divider lines, lightened centre glyph. */ html[data-theme="dark"] .pagenav { border-top-color: var(--dm-border); border-bottom-color: var(--dm-border); } html[data-theme="dark"] .pager.pagenav .hasTooltip, html[data-theme="dark"] .pager.pagenav a { background-color: transparent; border-color: transparent; color: var(--dm-text); } html[data-theme="dark"] .pager.pagenav .nav-text { color: var(--dm-heading); } html[data-theme="dark"] .pager.pagenav .nav-info { color: var(--dm-text); } html[data-theme="dark"] .pager.pagenav .hasTooltip:hover, html[data-theme="dark"] .pager.pagenav .hasTooltip:hover .nav-text, html[data-theme="dark"] .pager.pagenav .hasTooltip:hover .nav-info { background-color: transparent; color: var(--ja-accent); } html[data-theme="dark"] .pagenav::before { filter: invert(1) brightness(1.6); opacity: .45; } /* Tour Highlights — boxes carry a glaring #e9ecef border on dark; soften it. The feature icons are dark line-art (invisible on dark) → lighten via a filter so they read like the light-mode dark icons do on white. */ html[data-theme="dark"] .tour-hightlight .item .inner, html[data-theme="dark"] .tour-highlight .item .inner { border-color: var(--dm-border); } html[data-theme="dark"] .tour-hightlight .item .inner img, html[data-theme="dark"] .tour-highlight .item .inner img { filter: brightness(0) invert(0.82); } /* Owl carousel dots — inactive light-grey dots (#e9ecef on the dot itself) */ html[data-theme="dark"] .owl-carousel .owl-dots .owl-dot { background-color: var(--dm-border); } html[data-theme="dark"] .owl-carousel .owl-dots .owl-dot.active, html[data-theme="dark"] .owl-carousel .owl-dots .owl-dot:hover { background-color: var(--ja-accent); } /* Google Maps widget container (dev shows a grey slab without an API key; a real map keeps Google's own rendering). */ html[data-theme="dark"] .map-container, html[data-theme="dark"] [id^="ja-widget-map"] { background-color: var(--dm-surface) !important; } /* / highlight */ html[data-theme="dark"] mark { background-color: #4a3c12; color: var(--dm-heading); } /* ========================================================================= * 17. Smart Search (com_finder) results + autocomplete * ========================================================================= */ html[data-theme="dark"] #search-result-empty, html[data-theme="dark"] .com-finder__empty, html[data-theme="dark"] .finder .alert { background-color: var(--dm-surface); border-color: var(--dm-border); color: var(--dm-text); } html[data-theme="dark"] #search-result-empty h2 { color: var(--dm-heading); } /* Autocomplete dropdown — base uses .view-search-tour … .awesomplete>ul{background:#fff} */ html[data-theme="dark"] .com-finder ul[role="listbox"], html[data-theme="dark"] .view-search-tour .com-finder__search .awesomplete > ul, html[data-theme="dark"] .awesomplete > ul { background-color: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text); } html[data-theme="dark"] .awesomplete > ul > li { color: var(--dm-text); } html[data-theme="dark"] .view-search-tour .com-finder__search .awesomplete > ul li:hover, html[data-theme="dark"] .awesomplete > ul > li:hover, html[data-theme="dark"] .awesomplete > ul > li[aria-selected="true"] { background-color: var(--dm-surface); color: var(--ja-accent); } html[data-theme="dark"] .search-results .result__title a { color: var(--dm-heading); } html[data-theme="dark"] .search-results .result__title a:hover { color: var(--ja-accent); } /* ========================================================================= * 18. Author bio cards + popular-tags module * ========================================================================= */ /* Author "Latest Stories"/detail FOUNDER block — a side-by-side image+text card that blends on white (no overlap) → keep it transparent. */ html[data-theme="dark"] .author-block, html[data-theme="dark"] .author-block .author-other-info, html[data-theme="dark"] .author-block .author-avatar, html[data-theme="dark"] .author-block .author-info { background-color: transparent; color: var(--dm-text); } /* Author-LISTING grid card: .author-other-info is an OPAQUE content card that OVERLAPS the photo (margin-top:-32px) — it must stay an opaque --dm-surface (transparent let the image show through and its 1px frame drew a line across the photo). The white corners were the WHITE wrapper .author showing behind the card's rounded corners → give the wrapper the same surface so it's one uniform dark card; soften the #e9ecef frame to --dm-border. */ html[data-theme="dark"] .author { background-color: var(--dm-surface); } html[data-theme="dark"] .author-page .author .author-other-info, html[data-theme="dark"] .author-block-list .author-other-info { background-color: var(--dm-surface); border-color: var(--dm-border); color: var(--dm-text); } html[data-theme="dark"] .author .author-name, html[data-theme="dark"] .author h2, html[data-theme="dark"] .author h3 { color: var(--dm-heading); } /* Popular tags module — white pills in light */ html[data-theme="dark"] .tagspopular li, html[data-theme="dark"] .tagspopular li > a, html[data-theme="dark"] .tag-list li, html[data-theme="dark"] .com-tags-tag a { background-color: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text); } /* Hover: orange pill — force WHITE text (a template rule keeps it orange → orange-on-orange, invisible). !important + matched specificity guarantee it. */ html[data-theme="dark"] div.tagspopular ul li a:hover, html[data-theme="dark"] div.tagspopular ul li:hover a, html[data-theme="dark"] .tagspopular li > a:hover, html[data-theme="dark"] .tag-list li > a:hover, html[data-theme="dark"] .com-tags-tag a:hover { background-color: var(--ja-accent); color: #fff !important; } /* Article tag pills (.tags a.badge) — white pill in light; make a dark pill + light text, and on hover force WHITE text (it otherwise stays orange on the orange hover pill = invisible). */ html[data-theme="dark"] .tags a, html[data-theme="dark"] .tags .badge, html[data-theme="dark"] .entry-tags a, html[data-theme="dark"] .article-tags a { background-color: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text) !important; } html[data-theme="dark"] .tags a:hover, html[data-theme="dark"] .tags .badge:hover, html[data-theme="dark"] .entry-tags a:hover, html[data-theme="dark"] .article-tags a:hover { background-color: var(--ja-accent); color: #fff !important; } /* Related-posts cards: .content-info is a white card (#fff + #e9ecef border) that overlaps the image (margin-top:-2rem) — light title was unreadable on it. Give it the dark surface + soft border (match its 3-class specificity). */ html[data-theme="dark"] .content-info, html[data-theme="dark"] .relateditems.type-1 .content-info { background-color: var(--dm-surface); border-color: var(--dm-border); } /* Sidebar "Categories" list — link text should be white (it carries .text-primary which forces orange via !important); keep the folder icon (a::before) orange. */ html[data-theme="dark"] .categories-module a, html[data-theme="dark"] .categories-module.mod-list a, html[data-theme="dark"] .mod-articlescategories a { color: var(--dm-heading) !important; } html[data-theme="dark"] .categories-module li a::before, html[data-theme="dark"] .mod-articlescategories li a::before { color: var(--ja-accent) !important; } html[data-theme="dark"] .categories-module a:hover, html[data-theme="dark"] .mod-articlescategories a:hover { color: var(--ja-accent) !important; } /* ========================================================================= * 19. Standalone documents (offline.php / error.php / error-t4.php) * These bypass the main layout; each loads this file + the pre-paint * script in its own , so the dark hook + these rules apply. * ========================================================================= */ html[data-theme="dark"] body.offline, html[data-theme="dark"] .t4-error-page { background-color: var(--dm-bg); color: var(--dm-text); } html[data-theme="dark"] .t4-error-page .t4-error-msg, html[data-theme="dark"] .form-wrap { background-color: var(--dm-surface); color: var(--dm-text); } html[data-theme="dark"] .t4-error-page h1, html[data-theme="dark"] .form-wrap h1, html[data-theme="dark"] .form-wrap .offline-header { color: var(--dm-heading); } html[data-theme="dark"] .t4-error-page .error-message, html[data-theme="dark"] .form-wrap .offline-message { color: var(--dm-text-muted); } html[data-theme="dark"] .t4-error-page code { background-color: var(--dm-surface-2); color: var(--dm-text); } html[data-theme="dark"] body.offline input, html[data-theme="dark"] .form-wrap input { background-color: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text); }