/* ============================================================================= JA Ego — Dark Mode ----------------------------------------------------------------------------- Light mode is the original, approved design and is NOT modified here. Every rule below is scoped under html[data-theme="dark"] (our hook). The JS also sets data-bs-theme="dark" on , which activates Bootstrap's built-in dark component palette already shipped in template.css — so component internals (dropdowns, modals, form-controls, tables…) flip for free; below we re-tune the page-level tokens to JA Ego's own, softer dark palette and fix what Bootstrap's generic dark doesn't cover. Dark MIRRORS light — same relationships, every state. Never adds contrast light lacks. Brand/per-home accent (--t4-primary) is kept unchanged. The ONLY rules that apply in both modes are the toggle-button styles. ========================================================================== */ /* ----------------------------------------------------------------------------- 1) Toggle button — visible in BOTH modes (icon cross-fade is scoped below). JA Ego headers are solid/light bars → transparent button, icon = header text colour (currentColor), subtle hover wash (gotcha §53: no foreign grey chip). -------------------------------------------------------------------------- */ .ja-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; /* The 20px icon is centred in the 40px hit-area → ~10px of internal air on the right. A pull of -10px makes the VISIBLE icon (not the invisible button box) sit the same ~16px from the next control as the other icons do, so the cluster reads even. */ margin: 0 -10px 0 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; line-height: 1; position: relative; transition: background-color .2s ease, color .2s ease; } .ja-theme-toggle:hover, .ja-theme-toggle:focus-visible { background: rgba(127, 140, 160, .14); color: inherit; outline: none; } /* size only — do NOT set display here: `.ja-theme-toggle svg` (0,1,1) would outrank the `.ja-theme-toggle__sun/__moon` (0,1,0) show/hide rules and force BOTH icons visible (they overlapped in light mode). Let the per-icon rules own display. */ .ja-theme-toggle svg { width: 20px; height: 20px; } /* Stack the two icons; show one per mode. Light shows the moon (go-dark); dark shows the sun (go-light). */ .ja-theme-toggle__sun { display: none; } .ja-theme-toggle__moon { display: block; } html[data-theme="dark"] .ja-theme-toggle__moon { display: none; } html[data-theme="dark"] .ja-theme-toggle__sun { display: block; } /* Mobile/tablet header cluster: the 40px button + its 6px margin + the BOOK button's 24px left-margin left the toggle floating ~46px from BOOK (vs 16px BOOK→burger). Pull it into the cluster so the icons read as one group. Desktop nav unchanged. */ /* Mobile/tablet header action cluster: each home ships a DIFFERENT set of buttons (toggle · [search] · [Online Book] · burger) with ad-hoc per-item margins, so the toggle floated unevenly. Normalize: drive ALL gaps from the flex container's `gap` and zero the children's own h-margins → equal spacing in every home + both modes. align-items:center already centres them; also centre the search field inside its slightly-taller wrapper (it was sitting ~5px high). Desktop (≥992) untouched. */ @media (max-width: 991.98px) { .t4-header-r { gap: 16px; } .t4-header-r > * { margin-left: 0 !important; margin-right: 0 !important; } /* keep the toggle's icon-padding compensation even after the reset above */ .t4-header-r > .ja-theme-toggle { margin-right: -10px !important; } /* CTA is wrapped in a .custom module (sometimes with a hidden phone link, sometimes a hidden CTA). display:contents removes the wrapper from the flex flow so: an EMPTY wrapper adds no phantom gap, and a visible CTA becomes a direct flex item that the container `gap` spaces evenly. Zero the children's lead margins too. */ .t4-header-r .custom { display: contents; } .t4-header-r .custom > * { margin-left: 0 !important; margin-right: 0 !important; } } /* Vertically centre the search field inside its slightly-taller wrapper. The inline-block form sits ~5px high otherwise (baseline) — visible on every page that shows the header search, desktop included. Scoped ≥576 (where the search is shown, class d-sm-*) so it never overrides the responsive display:none below that. */ @media (min-width: 576px) { .t4-header-r > search { display: flex; align-items: center; } } /* ============================================================================= 2) Palette + TOKEN REMAP (everything below is scoped under the dark hook) ========================================================================== */ html[data-theme="dark"] { /* ---- one source of truth: JA Ego dark palette ------------------------- */ --dm-bg: #14171c; /* page */ --dm-band: #1a1e25; /* soft band (light's #F7F8F7 .bg-light) */ --dm-surface: #1e232b; /* cards / panels */ --dm-surface-2: #262c35; /* elevated / inputs / hovers */ --dm-border: #2c333d; /* the single divider token */ --dm-field-border:#3d4550; /* one step up: input/select/outline-btn edges */ --dm-text: #c3c9d2; /* body copy (light's #212121) */ --dm-text-muted: #8b94a3; /* meta / secondary */ --dm-heading: #f1f3f7; /* headings / emphasis */ /* ---- remap Bootstrap-as-T4 page tokens (softer than BS generic dark) -- */ --t4-body-bg: var(--dm-bg); --t4-body-bg-rgb: 20, 23, 28; --t4-body-color: var(--dm-text); --t4-body-color-rgb: 195, 201, 210; --t4-emphasis-color: var(--dm-heading); --t4-emphasis-color-rgb: 241, 243, 247; --t4-heading-color: var(--dm-heading); --t4-secondary-color: var(--dm-text-muted); --t4-secondary-color-rgb: 139, 148, 163; --t4-secondary-bg: var(--dm-surface); --t4-secondary-bg-rgb: 30, 35, 43; --t4-tertiary-bg: var(--dm-band); --t4-tertiary-bg-rgb: 26, 30, 37; --t4-border-color: var(--dm-border); --t4-border-color-translucent: rgba(255, 255, 255, .08); /* .bg-light / palette-light read --t4-light(-rgb) → make it a dark band */ --t4-light: var(--dm-band); --t4-light-rgb: 26, 30, 37; /* ---- remap JA Ego's OWN token layer (the big lever) -------------------- * * Keep brand accents: --color-primary (per-home) and --color-secondary * (gold #b88c58) are unchanged. */ --body-bg-color: var(--dm-bg); /* drives .t4-content-inner + the var(--body-bg-color) SVG masking bars: .decor-bottom/.decor-top/ .acm-hero.style-4 ::before */ --body-text-color: var(--dm-text); --body-headings-color: var(--dm-heading);/* h1-h6 (drives --t4-heading-color), pagination, nav headings */ --color-light: var(--dm-band); /* masthead band + .bg-light */ /* nav links: light over hero (overlay homes) OR navy on solid homes (beauty/ medical) → both become light on the dark page. Hover/active keep the brand. */ --mainnav-link-color: var(--dm-heading); --mainnav-link-active-color: var(--color-primary); /* The per-style file has a bare `a { color: var(--body-link-color) }` that paints ALL links (incl. nav) with the home's link colour — navy/dark on several homes, invisible on the dark page. Lift prose links to the home's bright primary. */ --body-link-color: var(--color-primary); --body-link-hover-color: var(--color-primary); /* --mainnav-link-hover-color, --color-primary, --color-secondary (gold), --footer-* are per-home brand / by-design — left unchanged. */ } /* Hotel home accent is a very dark teal (#165153) — too low-contrast as link TEXT on the dark page. Lift just its link colour (buttons keep white-on-teal, which is fine). */ html[data-theme="dark"] .theme-home-1 { --body-link-color: #4fb3a8; --body-link-hover-color: #6fc9bf; } /* page surfaces */ html[data-theme="dark"] body { background-color: var(--dm-bg); color: var(--dm-text); } html[data-theme="dark"] .t4-wrapper, html[data-theme="dark"] .body-wrap, html[data-theme="dark"] .t4-mainbody { background-color: var(--dm-bg); } /* ============================================================================= 3) Components (all scoped under html[data-theme="dark"]) ========================================================================== */ /* ---- 3a. Mega menu dropdown panel (hardcoded #fff / #212121) ------------- */ html[data-theme="dark"] .t4-megamenu .dropdown-menu { background: var(--dm-surface); color: var(--dm-text); /* mirror light's hairline frame (light = 0 0 0 1px rgba(0,0,0,.1)); add only a faint elevation so the panel separates from the dark page — not a heavy shadow */ box-shadow: 0 0 0 1px var(--dm-border), 0 8px 20px rgba(0, 0, 0, .25); } html[data-theme="dark"] .t4-megamenu .dropdown-menu li .dropdown-item, html[data-theme="dark"] .t4-megamenu .dropdown-menu li > a { color: var(--dm-text); } html[data-theme="dark"] .t4-megamenu .dropdown-menu li .dropdown-item:hover, html[data-theme="dark"] .t4-megamenu .dropdown-menu li > a:hover { color: var(--color-primary); background: var(--dm-surface-2); /* carry a bg so it reads as a hover row */ } /* column / module titles (hardcoded #212121) */ html[data-theme="dark"] .t4-megamenu .t4-module .module-title span, html[data-theme="dark"] .t4-megamenu .mega-col-title span, html[data-theme="dark"] .t4-megamenu .module-title { color: var(--dm-heading); } /* the mega dropdown sub-dividers */ html[data-theme="dark"] .t4-megamenu .dropdown-menu .mega-col-nav .dropdown-item { border-color: var(--dm-border); } /* ---- 3b. Off-canvas (mobile) — hardcoded #fff / #F7F8F7 ------------------ */ html[data-theme="dark"] .t4-offcanvas { background: var(--dm-surface); } /* header bg = transparent (mirror light: template's later rule forces the header transparent, so it shows the panel uniformly — a dm-band fill made a 2-tone seam). */ html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header { background-color: transparent; } html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header::after { background-color: var(--dm-border); } html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header .close { background-color: transparent; color: var(--dm-heading); } html[data-theme="dark"] .t4-offcanvas .t4-module .module-title, html[data-theme="dark"] .t4-offcanvas h3 { color: var(--dm-heading); } html[data-theme="dark"] .t4-offcanvas .nav-link, html[data-theme="dark"] .t4-offcanvas .dropdown-item { color: var(--dm-text); } html[data-theme="dark"] .t4-offcanvas .nav-link:hover, html[data-theme="dark"] .t4-offcanvas .dropdown-item:hover { color: var(--color-primary); } /* drilldown back row + chevron */ html[data-theme="dark"] .t4-offcanvas .sub-menu-back { background-color: var(--dm-band); color: var(--dm-text); } html[data-theme="dark"] .t4-offcanvas .sub-menu-back:hover { background-color: var(--dm-surface-2); } html[data-theme="dark"] .t4-offcanvas .btn-toggle, html[data-theme="dark"] .t4-offcanvas .sub-menu-toggle.btn-toggle { color: var(--dm-text-muted); background: transparent; } /* off-canvas item dividers */ html[data-theme="dark"] .t4-offcanvas .nav-item, html[data-theme="dark"] .t4-offcanvas .menu-item { border-color: var(--dm-border); } /* ---- 3c. Cards — visible bordered boxes → surface + border -------------- */ html[data-theme="dark"] .view-list-box .items-row .item, html[data-theme="dark"] .view-list-box.style-4 .items-row .item { background: var(--dm-surface); border-color: var(--dm-border); } /* ---- 3c2. Team / doctor member cards (white #fff + #eee border) --------- */ /* Only .has-bg teams rows render an OPAQUE white card in light → dark surface. Bare .teams-item-inner was over-broad: it boxed style-1 (beauty) + style-2 (pet) cards that are TRANSPARENT in light, adding furniture light never had. */ html[data-theme="dark"] .acm-teams.style-1 .has-bg .teams-item .teams-item-inner { background: var(--dm-surface); border-color: var(--dm-border); } /* ---- 3c2b. Per-home "Latest Articles" cards (mod-articles-lastest) ------- article-medical ships an opaque white (#fff) info card; article-services an #eee-bordered transparent card. Mirror as a dark surface so the (already token-remapped) heading + body copy read on it. article-doctor needs nothing — its var(--color-light) bg already flips to --dm-band via the token remap. */ html[data-theme="dark"] .mod-articles-lastest.article-medical .item .item-inner { background: var(--dm-surface); border-color: var(--dm-border); } html[data-theme="dark"] .mod-articles-lastest.article-services .item .item-inner { border-color: var(--dm-border); } /* ---- 3c3. "Read more" buttons (white #fff outline on white page) -------- */ html[data-theme="dark"] .btn-readmore, html[data-theme="dark"] .blog-list .item-readmore p.readmore a, html[data-theme="dark"] p.readmore .btn { background: transparent !important; border-color: var(--dm-border); color: var(--dm-text); } html[data-theme="dark"] .btn-readmore:hover, html[data-theme="dark"] .blog-list .item-readmore p.readmore a:hover, html[data-theme="dark"] p.readmore .btn:hover { /* Mirror light: hover keeps the rest fill (transparent) and recolours border+text to the per-home brand accent — NOT a grey surface swap (which loses light's accent cue). */ background: transparent !important; border-color: var(--color-primary); color: var(--color-primary); } /* ---- 3d. Tags & pagination — hardcoded #e9ece9 light hover -------------- */ html[data-theme="dark"] .tags > li > a { background: var(--dm-surface-2); color: var(--dm-text); border-color: var(--dm-border); } /* Light keeps the tag text at heading colour on hover (it does NOT switch to the accent); --color-primary on the hotel home is a dark teal (#165153) → 1.76:1, invisible on the dark surface. Use --dm-heading to mirror light's readable hover on every home. */ html[data-theme="dark"] .tags > li > a:hover { background: var(--dm-surface); color: var(--dm-heading); } /* ===== Beauty home — light-decor sections that stay light in dark ============ */ /* — "Our Lovely Professionals" staff section sits over a cream blob (.bg-overlay-image, a decorative PNG that stays light in BOTH modes). The title+desc were lifted to the dark palette → light text on cream = unreadable. Keep them at their LIGHT values so they mirror light exactly (the gold "Our Staffs" script + coral names already read). */ html[data-theme="dark"] .section-staff .main-heading, html[data-theme="dark"] .section-staff .section-title-wrap h1, html[data-theme="dark"] .section-staff .section-title-wrap h2 { color: #2c396b; } html[data-theme="dark"] .section-staff .mod-desc { color: #313131; } /* — "An Incredible Spa Experience" (.section-relax) about section over the cream blob (vt-3.png). The TITLE sits fully on the cream → keep its original navy (#2c396b, the light design colour) so it reads like light. The DESCRIPTION spans the boundary between the cream blob and the dark page, so neither pure-dark (#313131, vanishes on the dark side) nor the lifted --dm-text (#c3c9d2, washed on cream) works → use ONE balanced mid-tone readable on BOTH (~4.1:1 on cream and on #14171c). Scoped to .section-relax ONLY — do NOT scope by t4-section-N: the lorem desc text is reused on dark-bg neighbour sections. */ html[data-theme="dark"] .section-relax .main-heading, html[data-theme="dark"] .section-relax h1, html[data-theme="dark"] .section-relax h2 { color: #2c396b; } html[data-theme="dark"] .section-relax .mod-desc { color: #787878; } /* ===== Service detail (medical) — white feature cards washed in dark =========== */ /* — .spa-facilitie.style-2 feature row: cards alternate between var(--color-light) bg (already flips to --dm-band) and a hardcoded #fff bg (stays white → title/desc lifted to the light palette become invisible). Unify all .item-inner to a dark surface so every card reads — mirrors light where all 4 are light cards with dark text. Text is already --dm-heading/--dm-text; only the surface was wrong. (Dashed cyan border kept.) */ html[data-theme="dark"] .spa-facilitie.style-2 .item-inner { background-color: var(--dm-surface); } /* — Services grid inner content box (.info-article) is a hardcoded #fff box. In LIGHT it sits on the white page and blends invisibly (only the outer .item-inner border frames the card) → so in dark it must be TRANSPARENT (blend with the overall page bg), NOT a dark surface (that adds a nested box light never shows). Title/desc already use the light tokens so they read on the page. Source is (0,5,0) → match depth to win. */ html[data-theme="dark"] .mod-articles-lastest .item .item-inner .info-article { background-color: transparent; } /* — Blog grid (.mod-article-list) column separators are hardcoded #e9ecef left/right borders → bright vertical lines on the dark page. Route to the divider token so they stay as faint as in light. */ html[data-theme="dark"] .mod-article-list .item, html[data-theme="dark"] .mod-article-list .item + .item { border-left-color: var(--dm-border) !important; border-right-color: var(--dm-border) !important; } /* — Price menu (.acm-menu) leader line between the service name and price is a #eee ::after bar → bright on dark. Route to the divider token to mirror light's faint dots. */ html[data-theme="dark"] .acm-menu.style-1 .item-inner .menu-name::after { background-color: var(--dm-border); } html[data-theme="dark"] .pagination .page-link { background: transparent; color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] .pagination .page-link:hover { background: var(--dm-surface-2); color: var(--dm-heading); } html[data-theme="dark"] .pagination .disabled .page-link, html[data-theme="dark"] .pagination .page-item.disabled .page-link { background: var(--dm-band); color: var(--dm-text-muted); } /* active pagination keeps the brand accent (by design) */ /* ---- 3e. Search input icon — dark PNG → light inline SVG (non-overlay) -- */ html[data-theme="dark"] .t4-header:not(.section-overlap) .mod-finder input.form-control, html[data-theme="dark"] .header-block-2 .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='%23c3c9d2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); background-repeat: no-repeat; } /* ---- 3f. ACM hero "scroll down" notch — a hardcoded #fff triangle that masks the hero/section seam. In light it's white = blends into the white page section below; in dark it must be the PAGE bg (not white, not a surface) to blend the same way, with a light chevron. (Earlier white restore was wrong — it's a section-divider, not a chip.) */ html[data-theme="dark"] .acm-features.style-1 #next-section { background-color: var(--dm-bg); color: var(--dm-text); } /* ---- 3g. Palette utility bands ----------------------------------------- * * .t4-palette-blue (navy) & footers are dark by design → leave. * .t4-palette-gray (medical top bar, #fafafa) → dark band. */ html[data-theme="dark"] .t4-palette-gray { background-color: var(--dm-band); color: var(--dm-text); } /* ---- 3h. Hardcoded #e9ecef decorator/divider lines --------------------- */ html[data-theme="dark"] .theme-home-1 .section-title-wrap.text-center:before, html[data-theme="dark"] .registration fieldset::before { background-color: var(--dm-border); } /* ---- 3i. Form fields — fill + one-step-lighter border + focus ---------- */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] textarea, 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="number"] { background-color: var(--dm-surface-2); border-color: var(--dm-field-border) !important; color: var(--dm-text); } /* underline-style contact fields set a literal #ced4da bottom border */ html[data-theme="dark"] .contact .form-control, html[data-theme="dark"] .plain-style .form-control { border-bottom-color: var(--dm-field-border) !important; } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] input:focus { background-color: var(--dm-surface-2); /* Mirror light's focus cue: light steps the border up to a NEUTRAL gray (#6c757d), it does NOT colour it. --color-primary here resolves to Bootstrap blue (not the JA brand) → a loud blue ring light never shows. Use a one-notch-lighter neutral instead. */ border-color: #525c6b !important; /* beat the base rule's border !important */ color: var(--dm-text); } /* Validation signals — the base border !important otherwise hides light's red/green cues */ html[data-theme="dark"] .form-control.invalid, html[data-theme="dark"] .form-control.form-control-danger, html[data-theme="dark"] .was-validated .form-control:invalid { border-color: #e05c6a !important; } html[data-theme="dark"] .was-validated .form-control:valid { border-color: #5cb85c !important; } html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--dm-text-muted); } /* ---- 3j. Registration fieldset container → surface --------------------- */ html[data-theme="dark"] .registration fieldset, html[data-theme="dark"] .login fieldset, html[data-theme="dark"] .profile-edit fieldset { background-color: transparent; } /* ---- 3k. Top-level nav links → light on the dark page ------------------- * * The bare `a{color:var(--body-link-color)}` per-style rule overrides the nav's * own var(--mainnav-link-color); beat it with a scoped rule so nav stays a neutral * light on every home (overlay homes too — light reads fine over the hero photo). */ html[data-theme="dark"] .t4-megamenu > .navbar-nav > li > a, html[data-theme="dark"] .t4-megamenu > .navbar-nav > li > a .menu-item-title, html[data-theme="dark"] .t4-megamenu > .navbar-nav > li > .nav-link, html[data-theme="dark"] .t4-megamenu > .navbar-nav > li > .nav-link .menu-item-title { color: var(--dm-heading) !important; /* nav label is an inner span; beat the layered paint */ } html[data-theme="dark"] .t4-megamenu > .navbar-nav > li.show > a, html[data-theme="dark"] .t4-megamenu > .navbar-nav > li.show > a .menu-item-title, html[data-theme="dark"] .t4-megamenu > .navbar-nav > li > a:hover, html[data-theme="dark"] .t4-megamenu > .navbar-nav > li > a:hover .menu-item-title, html[data-theme="dark"] .t4-megamenu > .navbar-nav > li > .nav-link:hover .menu-item-title { color: var(--mainnav-link-hover-color) !important; /* per-home brand accent */ } /* Active/current nav: light does NOT tint it with the accent (active == base nav colour), so dark mirrors that — the base nav rule above already gives --dm-heading. The per-home underline indicator (pseudo-element) is unchanged. */ /* ---- 3m. Typography: tables, display headings, hr ---------------------- * * .table hardcodes --t4-table-color:#212121 (not flipped by the dark block). */ html[data-theme="dark"] .table { --t4-table-color: var(--dm-text); --t4-table-striped-color: var(--dm-text); --t4-table-active-color: var(--dm-heading); --t4-table-hover-color: var(--dm-heading); --t4-table-border-color: var(--dm-border); --t4-table-striped-bg: rgba(255, 255, 255, .03); color: var(--dm-text); } html[data-theme="dark"] .table > :not(caption) > * > * { border-color: var(--dm-border); } html[data-theme="dark"] .display-1, html[data-theme="dark"] .display-2, html[data-theme="dark"] .display-3, html[data-theme="dark"] .display-4, html[data-theme="dark"] .display-5, html[data-theme="dark"] .display-6 { color: var(--dm-heading); } html[data-theme="dark"] hr { border-top-color: var(--dm-border); color: var(--dm-border); opacity: .5; } /* inline code / kbd keep readable on dark */ html[data-theme="dark"] :not(pre) > code { background: var(--dm-surface-2); } /* ---- 3n. Article/pagination counter pill (#F7F8F7) --------------------- */ html[data-theme="dark"] .counter { background: var(--dm-band); color: var(--dm-text); } /* ---- 3o. list-group (tagged items, finder) ----------------------------- */ html[data-theme="dark"] .list-group-item { background: transparent; color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] .list-group-item-action { color: var(--dm-text); } html[data-theme="dark"] .list-group-item-action:hover, html[data-theme="dark"] .list-group-item-action:focus { background: var(--dm-surface-2); color: var(--dm-heading); } /* ---- 3p. Testimonial carousel arrows (white circle #fff/#eee) ----------- */ html[data-theme="dark"] .acm-testimonial.style-1 .owl-nav .owl-prev, html[data-theme="dark"] .acm-testimonial.style-1 .owl-nav .owl-next { background: var(--dm-surface); border-color: var(--dm-border); color: var(--dm-text); } /* ---- 3q. ACM menu (dotted-leader): the white chip masks the leader behind the title/price → use the page bg on dark so it keeps masking ----------- */ html[data-theme="dark"] .acm-menu .menu-name .menu-title, html[data-theme="dark"] .acm-menu .menu-name .menu-price, html[data-theme="dark"] .acm-menu .menu-name .title, html[data-theme="dark"] .acm-menu .menu-name > span, html[data-theme="dark"] .acm-menu .item-inner .menu-name .title, html[data-theme="dark"] .acm-menu .item-inner .menu-name .menu-price, html[data-theme="dark"] .acm-menu .menu-name .title, html[data-theme="dark"] .acm-menu .menu-name .menu-price, html[data-theme="dark"] .menu-name .title, html[data-theme="dark"] .menu-name .menu-price, html[data-theme="dark"] .menu-name > span { background: var(--dm-bg) !important; } /* ---- 3q2. Blog/article byline meta (#212121) + doctor/team names -------- */ html[data-theme="dark"] .article-info, html[data-theme="dark"] .article-info span, html[data-theme="dark"] .blog .article-info { color: var(--dm-text-muted); } html[data-theme="dark"] .doctor-info .name-doctor h3, html[data-theme="dark"] .doctor-info .name-doctor .h3, html[data-theme="dark"] .doctor-info h5, html[data-theme="dark"] .autho-info h5, html[data-theme="dark"] .autho-info .h5, html[data-theme="dark"] .features-desc .autho-info > h5, html[data-theme="dark"] .name-doctor, html[data-theme="dark"] .doctor-name { color: var(--dm-heading) !important; } /* ---- 3r. Fieldset legends (#fff) + finder tips card -------------------- */ html[data-theme="dark"] fieldset legend { background-color: transparent; color: var(--dm-heading); } html[data-theme="dark"] .profile fieldset legend { border-bottom-color: var(--dm-border); } html[data-theme="dark"] .com-finder__tips.card, html[data-theme="dark"] .card.card-outline-secondary { background: var(--dm-surface); border-color: var(--dm-border); color: var(--dm-text); } /* ---- 3s. "secondary"-coloured HEADINGS (navy) read dark on dark --------- * * text-secondary stays the brand accent for non-heading uses; only headings * that used it as a dark ink get lifted. */ html[data-theme="dark"] h1.text-secondary, html[data-theme="dark"] h2.text-secondary, html[data-theme="dark"] .h1.text-secondary, html[data-theme="dark"] .main-heading.text-secondary, html[data-theme="dark"] .section-title.text-secondary { color: var(--dm-heading) !important; } /* …EXCEPT hotel-resort (theme-home-1), where .text-secondary IS the gold brand accent (#b88c58), not a dark-ink heading. Keep the gold eyebrows. */ html[data-theme="dark"] body.theme-home-1 .section-title.text-secondary { color: var(--color-secondary) !important; } /* tag-title links inside list-group (com_tags) are hardcoded #212121 */ html[data-theme="dark"] .list-group-item a, html[data-theme="dark"] .item-tag-title a, html[data-theme="dark"] .tag-category .list-group .list-group-item a, html[data-theme="dark"] .com-tags-tag__category a { color: var(--dm-heading) !important; } html[data-theme="dark"] .list-group-item a:hover, html[data-theme="dark"] .item-tag-title a:hover { color: var(--color-primary) !important; } /* ---- 3t. Misc leftover light chips / panels / muted links -------------- */ /* cream/white content panels in feature heroes */ html[data-theme="dark"] .acm-features.style-5 .align-bottom .features-desc .inner { background: var(--dm-band); } /* Side-by-side hero (text column NEXT TO the photo, not over it) — transparent in light, so it must stay transparent in dark. A dm-surface here = a box light lacks. */ html[data-theme="dark"] .acm-hero.style-2 .features-desc .wrap-inner { background: transparent; } /* "View demo" pills on the landing/showcase page */ html[data-theme="dark"] .landing-page .sub a { background: var(--dm-surface-2); color: var(--dm-text); } /* contact-links light chips */ html[data-theme="dark"] .contact .contact-links ul.nav li a { background-color: var(--dm-surface-2); color: var(--dm-text); } /* login other-links (forgot password/username) muted gray #495057 */ html[data-theme="dark"] .login-wrap .other-links ul li a { color: var(--dm-text-muted); } html[data-theme="dark"] .login-wrap .other-links ul li a:hover { color: var(--color-primary); } /* megamenu dropdown :active light chip */ html[data-theme="dark"] .t4-megamenu .mega-col-module .nav li.nav-item a:active { background-color: var(--dm-surface-2); } /* ---- 3v. Hardcoded #e9ecef light borders across components ------------- * * These use the literal #e9ecef (not the --t4-border-color var), so the root * remap doesn't reach them — route them all through the dark divider token. */ html[data-theme="dark"] .features-list .item, html[data-theme="dark"] .mod-article-list.style-home-3 .item-inner, html[data-theme="dark"] .pet-facilitie ul li .item-inner, html[data-theme="dark"] .theme-home-3.view-list-box .items-row .item, html[data-theme="dark"] .view-list-box.style-2 .items-row .item, html[data-theme="dark"] .magz-layout .item-meta a, html[data-theme="dark"] .com-content-article__body .accordion .well, html[data-theme="dark"] .com-content-article__body .accordion .well .card-body, html[data-theme="dark"] .com_contact table.category th, html[data-theme="dark"] .contact #selectForm, html[data-theme="dark"] .contact .h3, html[data-theme="dark"] .contact .wrapper-tabs #myTabContent, html[data-theme="dark"] .contact #slide-contact .well, html[data-theme="dark"] .contact #slide-contact .well .card-collapse, html[data-theme="dark"] .com-content-categories__item + .com-content-categories__item, html[data-theme="dark"] .t4-megamenu .mega-col-module .mega-col-title { border-color: var(--dm-border) !important; } /* ---- 3w. Standalone docs (error.php / offline.php) --------------------- * * These load their OWN css (error.css / offline.css) which hardcode #212121/#616161 * dark text — unreadable once the body goes dark. Scope by their unique containers * (.page-error / #frame) so these rules never touch the main site. */ html[data-theme="dark"] .page-error .error-message h2, html[data-theme="dark"] .page-error .error-message, html[data-theme="dark"] .page-error .box-text, html[data-theme="dark"] .page-error #errorboxbody { color: var(--dm-text); } html[data-theme="dark"] .page-error .error-code, html[data-theme="dark"] .page-error .error-code span { color: var(--dm-heading); } /* Decorative double-frame (#errorboxoutline 3px + .inner 1px) is hardcoded #111 → ≈ page bg on dark, the frame vanishes. Route to the divider token so it stays a present-but-subtle frame, mirroring light's bold black frame. */ html[data-theme="dark"] .page-error #errorboxoutline { border-color: var(--dm-border); } html[data-theme="dark"] .page-error #errorboxoutline .inner { border-color: var(--dm-border); } /* Keep the CTA an accent button (light = vivid #0d6efd) — lift one step for the dark page rather than muting it to a grey surface (it is the page's only focal action). */ html[data-theme="dark"] .page-error .button-home { background: #3b82f6; color: #fff; border-color: transparent; } html[data-theme="dark"] #frame h1 { color: var(--dm-heading); } html[data-theme="dark"] #frame, html[data-theme="dark"] #frame .message { color: var(--dm-text); } html[data-theme="dark"] #frame .inputbox { background: var(--dm-surface-2); border-color: var(--dm-field-border); color: var(--dm-text); } /* ---- 3l. Toggle button icon colour by header surface ------------------- * * Non-overlay (solid) headers in dark → light icon. Overlay headers (default/ * home-1/home-3) put the toggle over the hero photo → white in BOTH modes. */ html[data-theme="dark"] .ja-theme-toggle, html[data-theme="dark"] .ja-theme-toggle svg { color: var(--dm-heading) !important; } .t4-header.section-overlap .ja-theme-toggle, .header-block-1 .ja-theme-toggle, .header-block-3 .ja-theme-toggle { color: #fff !important; } /* ============================================================================= 3w) PARITY-AUDIT FIXES — per-page subagent sweep (2026-06-21, Wave 1) Each rule mirrors a light relationship the dark mode was missing. Scoped under the dark hook; light untouched. ========================================================================== */ /* — Hotel: near-white pseudo side-panels (#F7F8F7 hardcoded, not --color-light) — */ html[data-theme="dark"] .decor-left::before, html[data-theme="dark"] .decor-right::before { background: var(--dm-band); } /* — Off-canvas (all homes): drilldown submenu UL stayed white --------------- */ html[data-theme="dark"] .t4-offcanvas .dropdown-menu { background-color: var(--dm-surface); border-color: var(--dm-border); } /* — Off-canvas: module-title accent bar (--body-text-color→dm-text) too bright; close "×" inner span kept hardcoded #666 (low contrast on dark header) ---- */ html[data-theme="dark"] .t4-offcanvas .module-title::before { background-color: var(--dm-border); } html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header .close span { color: var(--dm-heading); } /* — Default home: landing-page demo-card borders (#e9ecef hardcoded) -------- */ html[data-theme="dark"] .landing-page .intro-image { border-color: var(--dm-border); } html[data-theme="dark"] .landing-page .title-wrap .title { border-right-color: var(--dm-border); } /* — Pet: hardcoded #e9ecef borders on service + team cards ------------------ */ html[data-theme="dark"] .acm-features.style-3 .row.style-border .features-item { border-color: var(--dm-border); } html[data-theme="dark"] .acm-teams.style-2 .teams-item { border-color: var(--dm-border); } /* — Medical: dark-navy logo invisible on dark page; quick-contact Name/Email inputs sit on a NAVY band (keep white-transparent border, not field-border); department icon boxes had a bright #eee frame on transparent ------------- */ html[data-theme="dark"] .header-block-2 .logo-img { filter: brightness(0) invert(1); } html[data-theme="dark"] .t4-col.section-9 input[type="text"], html[data-theme="dark"] .t4-col.section-9 .form-control { border-color: rgba(255, 255, 255, 0.1) !important; } html[data-theme="dark"] .acm-features.style-7 .list-icon .wrap-inner .item > a { border-color: var(--dm-border) !important; background-color: var(--dm-surface); } /* — Beauty: ghost .btn-white (white-on-white in light) became a glaring white tile on dark in the Services/Pricing sections → subtle dark surface ------ */ html[data-theme="dark"] .acm-features.style-3 .btn.btn-white, html[data-theme="dark"] .acm-features.style-5 .btn.btn-white { background: var(--dm-surface) !important; color: var(--dm-heading) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .acm-features.style-3 .btn.btn-white:hover, html[data-theme="dark"] .acm-features.style-5 .btn.btn-white:hover { background: var(--dm-surface-2) !important; color: var(--dm-heading) !important; } /* Contact city cards ("Get Direction"): the style-3 surface-tile rule above leaks onto them, but in light these are transparent GHOST buttons (no box) with just a blue bottom-border accent. Re-scope to .view-contact so dark mirrors that — transparent, light text, blue underline — without disturbing Beauty's opaque style-3 tiles. */ html[data-theme="dark"] .view-contact .acm-features.style-3 .btn.btn-white { background: transparent !important; color: var(--dm-text) !important; border-color: transparent transparent #0d6efd transparent !important; } html[data-theme="dark"] .view-contact .acm-features.style-3 .btn.btn-white:hover { background: var(--dm-surface) !important; /* mirror light's subtle hover lift */ color: var(--dm-heading) !important; } /* ============================================================================= 3x) PARITY-AUDIT FIXES — Wave 2 (2026-06-21: services/rooms/blog/contact/article) ========================================================================== */ /* — Footer module-title accent bars: ::before uses --body-text-color → lifts to dm-text (bright) on the always-dark footer where it doesn't belong. Keep it subtle like light. (Content/off-canvas bars already correct.) ------------- */ html[data-theme="dark"] #t4-footer .module-title::before { background-color: var(--dm-border); } /* — Recent Posts / category-module list dividers (hardcoded #e9ecef) --------- */ html[data-theme="dark"] .category-module li, html[data-theme="dark"] .mod-articlescategory li { border-bottom-color: var(--dm-border) !important; } /* — Contact: city-card column dividers (#e9ecef on .row:not(.style-no-border)) - */ html[data-theme="dark"] .acm-features.style-3 .row:not(.style-no-border) > div + div { border-left-color: var(--dm-border); } /* — Contact: city location PNG icons are dark #212121 strokes → invisible on the dark page. Invert to light. SCOPED to .view-contact only — beauty's style-3 service icons are PINK (by-design); a global invert would wreck them. ------ */ html[data-theme="dark"] .view-contact .acm-features.style-3 .img-icon img { filter: invert(1) brightness(1.8); } /* — Off-canvas logo: same dark-navy file as the header (logo-home-2 / -4), but the header fix only covers .header-block-2. Invert the off-canvas copy too — ONLY for the dark-logo homes (beauty=theme-home-2, medical=theme-home-4). The overlay homes (hotel/pet/default) ship WHITE logos → must NOT be inverted. -- */ html[data-theme="dark"] body.theme-home-2 .t4-offcanvas .logo-img, html[data-theme="dark"] body.theme-home-4 .t4-offcanvas .logo-img { filter: brightness(0) invert(1); } /* ============================================================================= 3y) PARITY-AUDIT FIXES — Wave 3 (2026-06-21: typography/forms/profile/search/blog) ========================================================================== */ /* — Typography: blockquote attribution hardcoded #6c757d → muted token --------- */ html[data-theme="dark"] .blockquote-footer, html[data-theme="dark"] .blockquote-footer cite { color: var(--dm-text-muted); } /* — User profile: dt/dd row dividers (#e9ecef dashed; legend already fixed) ----- */ html[data-theme="dark"] .profile fieldset dt, html[data-theme="dark"] .profile fieldset dd { border-bottom-color: var(--dm-border); } /* — Smart Search (com_finder) -------------------------------------------------- */ /* autocomplete suggestions popup was a white box */ html[data-theme="dark"] .com-finder__search .awesomplete > ul { background-color: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text); box-shadow: 0 4px 12px rgba(0,0,0,.4); } html[data-theme="dark"] .com-finder__search .awesomplete > ul li[aria-selected="true"], html[data-theme="dark"] .com-finder__search .awesomplete > ul li:hover { background-color: var(--dm-band); color: var(--dm-heading); } /* result dividers (#e9ecef) + muted url/date (#575757) + taxonomy badge */ html[data-theme="dark"] #search-results .result-item, html[data-theme="dark"] .search .search-results .result-created, html[data-theme="dark"] .search #search-results .result-created { border-bottom-color: var(--dm-border); } html[data-theme="dark"] .result__title-url, html[data-theme="dark"] .result__date { color: var(--dm-text-muted); } html[data-theme="dark"] .com-finder #search-results .badge { background: var(--dm-surface-2); color: var(--dm-text); border: 1px solid var(--dm-border); } /* — Modal dialogs: --t4-modal-bg is hardcoded #fff scoped on .modal (root remap can't reach it) → white dialog on dark. Used site-wide (TOS, etc.). --------- */ html[data-theme="dark"] .modal { --t4-modal-bg: var(--dm-surface); --t4-modal-color: var(--dm-text); --t4-modal-border-color: var(--dm-border); --t4-modal-header-border-color: var(--dm-border); --t4-modal-footer-border-color: var(--dm-border); } html[data-theme="dark"] .modal-content { background-color: var(--dm-surface); color: var(--dm-text); } html[data-theme="dark"] .modal-header { border-bottom-color: var(--dm-border); } html[data-theme="dark"] .modal-footer { border-top-color: var(--dm-border); } html[data-theme="dark"] .modal-title { color: var(--dm-heading); } /* — Pagination: non-active/non-disabled chips had no fill (light = #f7f8f7 chip); give them the band fill so the chip row reads uniformly (hover already set). - */ html[data-theme="dark"] .pagination .page-item:not(.active):not(.disabled) .page-link { background: var(--dm-band); color: var(--dm-text); } /* — Tagged Items: list-group-item border-bottom #e9ecef (template spec 0,4,0 beats the generic dark .list-group-item rule) → match the selector. -------- */ html[data-theme="dark"] .com-tags-tag.tag-category .list-group .list-group-item { border-bottom-color: var(--dm-border) !important; } /* ============================================================================= 3z) Pricing tables + outline buttons (found on pricing-spa / pricing-pet …) ========================================================================== */ /* Card border is a hardcoded #e9ecef hairline — faint on the white card in light, but a bright ring on the dark card. Route to the divider token. The featured .plan-highlight keeps its brand-pink border (by design). */ html[data-theme="dark"] .pricing-item:not(.plan-highlight) { border-color: var(--dm-border); } /* Bootstrap .btn-outline-dark ("Get Now" on non-featured plans) is dark ink + dark border in BOTH themes → invisible on a dark card. Mirror light: a readable light outline that fills light-on-dark-text on hover (light has dark outline → fills dark-on-white). Generic, so it fixes outline-dark anywhere in dark mode. */ html[data-theme="dark"] .btn-outline-dark { color: var(--dm-heading); border-color: var(--dm-heading); } html[data-theme="dark"] .btn-outline-dark:hover, html[data-theme="dark"] .btn-outline-dark:focus, html[data-theme="dark"] .btn-outline-dark:active { background-color: var(--dm-heading); border-color: var(--dm-heading); color: var(--dm-bg); } /* — FAQ accordion (.acm-accordion .card) hardcodes --t4-card-bg:#fff → white panel with light text = invisible in dark. Mirror light's raised white card as a dark surface; route the #e9ecef hairlines to the divider token. Question/answer text is already token-remapped (light) so it reads on the surface. ----------------------- */ html[data-theme="dark"] .acm-accordion .card { --t4-card-bg: var(--dm-surface); background-color: var(--dm-surface); border-color: var(--dm-border); } html[data-theme="dark"] .acm-accordion .card-header, html[data-theme="dark"] .acm-accordion .card-footer { border-color: var(--dm-border); } /* the question row is a