/* ============================================================= AllEscorts — Dark theme Activated by `theme-dark` class on (set early in , see header.ejs / newheader.ejs). Light remains the default; this file only ever applies under html.theme-dark, so the light site is untouched. The public CSS is mostly hardcoded warm/cream colors, so this remaps the few CSS custom properties it does expose and then overrides the main surfaces by selector. ============================================================= */ html.theme-dark { /* Local palette for this file */ /* === Cognac & Cream palette === warm cognac/coffee surfaces · ivory-cream text · bronze-gold accent */ --d-bg: #211610; /* page background (espresso) */ --d-surface: #2e2017; /* cards / panels (coffee) */ --d-surface-2: #3d2a1d; /* inputs, tabs (cognac) */ --d-surface-3: #4d3625; /* hover / raised */ --d-border: #5c4431; --d-text: #efdcc0; /* ivory cream text */ --d-muted: #c7a87f; /* camel */ --d-gold: #cf9a5a; /* bronze-gold accent — var name kept */ --d-accent-deep: #a8703a; /* coppertone, for hovers/pressed */ color-scheme: dark; /* === The site's de-facto design tokens === Every page redefines these in its own inline :root with cream/white values (--primary-bg #F6EEE3, --primary-white #fff, --text #0E0E0E, ...). Because html.theme-dark (0,1,1) outranks :root (0,1,0), remapping them here flips cards, panels, inputs and text across the WHOLE site in one shot. */ --primary-bg: #3d2a1d; --primary-white: #2e2017; --primary-input: #4d3625; --primary-border: 1px solid #5c4431; --soft-border: rgba(239,220,192,.14); --text: #efdcc0; --muted: #c7a87f; /* Other custom properties the base CSS reads. */ --body: #efdcc0; --Boulettes-clr: #f6e8d2; } /* ---- Base page ---- */ html.theme-dark, html.theme-dark body { background-color: var(--d-bg) !important; color: var(--d-text); } /* ---- Generic text ---- */ html.theme-dark h1, html.theme-dark h2, html.theme-dark h3, html.theme-dark h4, html.theme-dark h5, html.theme-dark h6, html.theme-dark p, html.theme-dark span, html.theme-dark li, html.theme-dark label, html.theme-dark td, html.theme-dark th, html.theme-dark dt, html.theme-dark dd, html.theme-dark figcaption, html.theme-dark .sptxt, html.theme-dark .article-content, html.theme-dark .article-content * { color: inherit; } html.theme-dark h1, html.theme-dark h2, html.theme-dark h3, html.theme-dark h4, html.theme-dark h5, html.theme-dark h6 { color: var(--d-text) !important; } html.theme-dark a { color: #e0b878; } html.theme-dark a:hover { color: #f6e8d2; } html.theme-dark .text-muted, html.theme-dark small { color: var(--d-muted) !important; } html.theme-dark hr { border-color: var(--d-border); } /* ---- White surfaces → dark cards ---- */ html.theme-dark .plaintext, html.theme-dark .hero__card .card_items .item_data, html.theme-dark .card_items .item_data, html.theme-dark .sptxt, html.theme-dark .model__main, html.theme-dark .wigets__row .blc__body, html.theme-dark .wigets__row .item__wrap table, html.theme-dark .dashboard__row .side__row .ava__rw, html.theme-dark .article-content, html.theme-dark .mcard__link, html.theme-dark .mcard__body, html.theme-dark .ae-dd, html.theme-dark .breadcrumbs, html.theme-dark .breadcrumbsblog, html.theme-dark .breadcrumbs--white { background: var(--d-surface) !important; color: var(--d-text) !important; border-color: var(--d-border) !important; } /* ---- Beige surfaces (#ebddc9 / #f6eee3) → secondary dark ---- */ html.theme-dark .input-group .text__field, html.theme-dark .input__group .text__field, html.theme-dark .text__field, html.theme-dark header .header__search, html.theme-dark .pagination ul li a, html.theme-dark .block__table .table__header, html.theme-dark .block__table table thead, html.theme-dark .block__table table thead th, html.theme-dark .select2-wrapper, html.theme-dark .select2-dropdown, html.theme-dark .custom__dropdown, html.theme-dark .custom__dropdown .dropdown-content, html.theme-dark .dropbtn, html.theme-dark .dashboard__row .side__row .w__block, html.theme-dark .dashboard__wrap .profile__tabs, html.theme-dark .dashboard__wrap .profile__lab, html.theme-dark .st__itm ul li, html.theme-dark .filt__wrap .input-group .custom__dropdown, html.theme-dark header .input__labels .btn, html.theme-dark .block__form .custom__dropdown { background: var(--d-surface-2) !important; color: var(--d-text) !important; border-color: var(--d-border) !important; } /* ---- Header / footer ---- */ html.theme-dark header, html.theme-dark .header__content, html.theme-dark .header__top, html.theme-dark .header__menu, html.theme-dark .top__line, html.theme-dark footer, html.theme-dark .footer, html.theme-dark .block__footer, html.theme-dark .block__footer_content { background-color: var(--d-bg) !important; color: var(--d-text); } /* No header divider: the homepage hero (Best Escort + city pills) lives inside the header, so a header bottom-border lands awkwardly close to the next block. Let header → content flow seamlessly. */ html.theme-dark header { border-bottom: 0 !important; } /* ---- Cards (model cards) ---- */ html.theme-dark .mcard__link { border-color: var(--d-border) !important; box-shadow: 0 14px 40px rgba(0,0,0,.5) !important; } html.theme-dark .mcard__link:hover { box-shadow: 0 18px 54px rgba(0,0,0,.6) !important; } /* ---- Tables ---- */ html.theme-dark .block__table table, html.theme-dark .block__table .table__row, html.theme-dark table { background: var(--d-surface) !important; color: var(--d-text) !important; border-color: var(--d-border) !important; } html.theme-dark td, html.theme-dark th { border-color: var(--d-border) !important; } /* ---- Form controls ---- */ html.theme-dark input, html.theme-dark textarea, html.theme-dark select, html.theme-dark .textbox-bc, html.theme-dark .textarea-bc, html.theme-dark .select-multi-bc, html.theme-dark .select-multi-detail-bc, html.theme-dark .ae-input, html.theme-dark .ae-trigger { background: var(--d-surface-2) !important; color: var(--d-text) !important; border-color: var(--d-border) !important; } html.theme-dark input::placeholder, html.theme-dark textarea::placeholder { color: var(--d-muted) !important; } html.theme-dark .ae-trigger:hover { background: var(--d-surface-3) !important; } /* ---- Buttons: keep accent buttons, darken neutral/beige ones ---- */ html.theme-dark .btn-primary { background: var(--d-surface-3) !important; color: var(--d-text) !important; border-color: var(--d-border) !important; } html.theme-dark .pagination ul li a:hover, html.theme-dark .pagination ul li.active a { background: var(--d-gold) !important; color: #211610 !important; } /* ---- Generic light backgrounds caught broadly ---- */ html.theme-dark .bg-white, html.theme-dark .bg-light { background: var(--d-surface) !important; } /* ---- Borders that were light ---- */ html.theme-dark [class*="block__"], html.theme-dark [class*="card"], html.theme-dark .item__wrap { border-color: var(--d-border); } /* ---- Homepage panels that use hardcoded (non-variable) colors ---- */ html.theme-dark .home-verif, html.theme-dark .rv-card, html.theme-dark .rv-card__img { background: var(--d-surface) !important; border-color: var(--d-border) !important; color: var(--d-text); } html.theme-dark .home-verif strong { color: var(--d-text) !important; } html.theme-dark .home-text a, html.theme-dark .home-links a { color: var(--d-gold) !important; } html.theme-dark .home-text { border-top-color: var(--d-border) !important; } html.theme-dark .rv-clear { border-color: var(--d-border) !important; color: var(--d-muted) !important; } html.theme-dark .rv-clear:hover { background: var(--d-surface-2) !important; color: var(--d-text) !important; } /* ---- Header icons → white in dark (logo, profile, globe). These are monochrome #282828 SVGs (img + background-image), so a filter recolors them to white without forking the asset / touching light mode. ---- */ html.theme-dark .logo img, html.theme-dark header .auth__block .user_cabinet .user_cabinet__icon, html.theme-dark header .auth__block .world .world_icon { filter: brightness(0) invert(1); } /* ---- Language selector (used in both header.ejs and newheader.ejs). Its toggle text/icons are hardcoded #282828 = invisible on the dark header, which is why it looked "gone" on inner pages. ---- */ html.theme-dark .lang-dd__toggle { background: var(--d-surface-2) !important; border-color: var(--d-border) !important; color: var(--d-text) !important; } html.theme-dark .lang-dd__toggle:hover { background: var(--d-surface-3) !important; } html.theme-dark .lang-dd__current { color: var(--d-text) !important; } html.theme-dark .lang-dd__menu { background: var(--d-surface) !important; border-color: var(--d-border) !important; box-shadow: 0 8px 24px rgba(0,0,0,.5) !important; } html.theme-dark .lang-dd__heading { color: var(--d-muted) !important; border-bottom-color: var(--d-border) !important; } html.theme-dark .lang-switcher__item { color: var(--d-text) !important; } html.theme-dark .lang-switcher__item:hover, html.theme-dark .lang-switcher__item.is-active { background: var(--d-surface-2) !important; } /* ---- Model card (modelbox): white body/pill + hardcoded dark meta text ---- */ html.theme-dark .mcard__body { background: var(--d-surface) !important; } html.theme-dark .mcard__name { color: var(--d-text) !important; } html.theme-dark .mcard__meta, html.theme-dark .mcard__metaRow, html.theme-dark .mcard__metaRow span { color: var(--d-muted) !important; } html.theme-dark .mcard__status { background: var(--d-surface-2) !important; color: var(--d-text) !important; border-color: var(--d-border) !important; } /* Image overlay pills: type badge, photo count, price — were near-white with light (inherited) text = washed out. Make them dark glassy pills. */ html.theme-dark .mcard__badge, html.theme-dark .mcard__price { background: rgba(18,11,6,.74) !important; border-color: rgba(255,255,255,.18) !important; color: var(--d-text) !important; } /* keep the green "Boosted" badge (re-assert; higher specificity than the rule above) */ html.theme-dark .mcard__badge--right.is-boosted { background: linear-gradient(90deg, #0f8a73 0%, #19b48f 100%) !important; border-color: rgba(255,255,255,.18) !important; color: #fff !important; } /* monochrome #111 icons inside the pills (photo-count wallet, status clock) → white */ html.theme-dark .mcard__badge--right .wallet, html.theme-dark .mcard__statusIcon { filter: brightness(0) invert(1); } /* ---- Footer "AllEscorts 24/7 Support" card (light-blue → dark-blue tint) ---- */ html.theme-dark .footer__support { background: rgba(14,77,207,.14) !important; border-color: rgba(120,160,230,.28) !important; color: #cfe0ff !important; } html.theme-dark .footer__support-title { color: #eaf1ff !important; } html.theme-dark .footer__support-handle { color: #cfe0ff !important; } /* Keep the telegram logo its original blue (inverting it erased the plane); put it on a neutral light circle so it stands out on the dark card. */ html.theme-dark .footer__support-icon { background: rgba(255,255,255,.12) !important; } html.theme-dark .footer__support-icon img { filter: none !important; } /* ---- Model profile page (views/models/view.ejs) ---- It has its own palette incl. --card-beige (not one of the shared tokens) and many hardcoded #fff backgrounds + dark text colors. */ html.theme-dark { --card-beige: var(--d-surface-2); } html.theme-dark .profile-shell { background: var(--d-bg) !important; border-color: var(--d-border) !important; } html.theme-dark .breadcrumbs-wrap { background: var(--d-surface) !important; border-color: var(--d-border) !important; } html.theme-dark .breadcrumbs li, html.theme-dark .breadcrumbs a { color: var(--d-muted) !important; } html.theme-dark .model-top-card { border-color: var(--d-border) !important; } html.theme-dark .model-location, html.theme-dark .model-location a { color: var(--d-muted) !important; } html.theme-dark .meta-pill { background: var(--d-surface-2) !important; color: var(--d-text) !important; border-color: var(--d-border) !important; } /* Card shells (white bodies) → dark */ html.theme-dark .left-card, html.theme-dark .right-card, html.theme-dark .contact-card, html.theme-dark .left-card-body, html.theme-dark .rates-table { background: var(--d-surface) !important; border-color: var(--d-border) !important; } /* Card headers (cream) → text light + dark divider; bg comes from the dark tokens */ html.theme-dark .left-card-head, html.theme-dark .right-card-head, html.theme-dark .contact-card-head, html.theme-dark .profile-videos-title { color: var(--d-text) !important; border-bottom-color: var(--d-border) !important; } /* Card body text + general-info labels */ html.theme-dark .right-card-body { color: var(--d-text) !important; } html.theme-dark .tbl_item td:first-child { color: var(--d-muted) !important; } /* Rates table */ html.theme-dark .rates-table thead { background: var(--d-surface-2) !important; } html.theme-dark .rates-table th, html.theme-dark .rates-table td { border-bottom-color: var(--d-border) !important; } html.theme-dark .rates-table tbody tr:hover td { background: var(--d-surface-2) !important; } /* ---- Model filters bar (widgets/model-filters.ejs) — hardcoded light .mf-* ---- */ html.theme-dark .mf-bar { background: var(--d-surface) !important; border-color: var(--d-border) !important; } html.theme-dark .mf-header__title { color: var(--d-text) !important; } html.theme-dark .mf-clear { color: var(--d-muted) !important; } html.theme-dark .mf-clear:hover { color: var(--d-text) !important; } html.theme-dark .mf-label { color: var(--d-muted) !important; } html.theme-dark .mf-pill, html.theme-dark details.mf-collapse > summary { background: var(--d-surface-2) !important; color: var(--d-text) !important; border-color: var(--d-border) !important; } html.theme-dark .mf-pill:hover, html.theme-dark details.mf-collapse > summary:hover { border-color: var(--d-gold) !important; color: var(--d-text) !important; } /* selected pills: accent fill so they read clearly on the dark bar */ html.theme-dark .mf-pill:has(input:checked), html.theme-dark .mf-pill.is-active, html.theme-dark details.mf-collapse[open] > summary { background: var(--d-gold) !important; border-color: var(--d-gold) !important; color: #211610 !important; } html.theme-dark details.mf-collapse .mf-collapse__body { background: var(--d-surface) !important; border-color: var(--d-border) !important; box-shadow: 0 6px 24px rgba(0,0,0,.5) !important; } html.theme-dark details.mf-collapse .mf-summary-count { background: rgba(255,255,255,.12) !important; } html.theme-dark .mf-actions { border-top-color: var(--d-border) !important; } html.theme-dark .mf-apply { background: var(--d-gold) !important; color: #211610 !important; } html.theme-dark .mf-apply:hover { background: var(--d-accent-deep) !important; } /* ---- SEO / long description text (.sptxt on city/country/district pages). Content is raw DB HTML that may carry its own dark inline colors, so force readable text; links stay accent. ---- */ html.theme-dark .sptxt, html.theme-dark .sptxt *, html.theme-dark .section__title, html.theme-dark .city-banner-text { color: var(--d-text) !important; } html.theme-dark .sptxt a, html.theme-dark .links__row a { color: var(--d-gold) !important; } /* ---- Contact card internals (models/view.ejs) — hardcoded cream/dark ---- */ html.theme-dark .phone-number { background: var(--d-surface-2) !important; border-color: var(--d-border) !important; } html.theme-dark .phone-text { color: var(--d-text) !important; } html.theme-dark .phone-copy-btn { background: var(--d-surface-3) !important; border-color: var(--d-border) !important; } html.theme-dark .copy-txt { color: var(--d-text) !important; } html.theme-dark .contact-hint { color: var(--d-muted) !important; } /* Contact / Add-review / Report buttons (.contact-btn, cream #efe6d8 + inline color:#222) */ html.theme-dark .contact-btn { background: var(--d-surface-3) !important; border-color: var(--d-border) !important; color: var(--d-text) !important; } html.theme-dark .contact-btn:hover { background: var(--d-surface-2) !important; } /* Messenger icon box (.app) was white #fff — the colored logos read fine on dark */ html.theme-dark .app { background: var(--d-surface-2) !important; border-color: var(--d-border) !important; } /* "view more" photos pill + payment-safety notice (inline-styled #f3eadc) */ html.theme-dark .view-more { background: var(--d-surface-2) !important; color: var(--d-text) !important; border-color: var(--d-border) !important; } html.theme-dark .pay-advice { background: var(--d-surface-2) !important; border-color: var(--d-border) !important; color: var(--d-text) !important; } /* City/country (general info) and body links carry inline color:#111 → accent. The !important beats the element's inline style. */ html.theme-dark .right-card-body a, html.theme-dark .tbl_item a { color: var(--d-gold) !important; } /* Empty-reviews message (inline color:#444) */ html.theme-dark #no-reviews-msg { color: var(--d-muted) !important; } /* ---- Decorative header shapes ---- The cream diagonal triangles don't translate to dark (they read as a muddy band), so remove them for a clean flat dark header. */ html.theme-dark header::before, html.theme-dark header::after { background-image: none !important; } /* ---- Page shells: force dark (explicit, so it never depends on token cascade) ---- */ html.theme-dark .home-shell, html.theme-dark .blog__layout { background: var(--d-surface) !important; border: 1px solid var(--d-border) !important; } /* ---- Search bar icons (Country/City/District/Search) — monochrome #282828 ---- */ html.theme-dark .icon_position > *, html.theme-dark .select2-wrapper .icon_position > *, html.theme-dark .header__search .filter-icon, html.theme-dark .mobile-search .filter-icon { filter: brightness(0) invert(1); } /* ---- Footer decorative triangles: removed in dark (clean flat footer) ---- */ html.theme-dark footer::before, html.theme-dark footer::after { background-image: none !important; } /* ---- Blog article page (views/blogs/view.ejs) ---- */ html.theme-dark .articlecontent { background: var(--d-surface) !important; border-color: var(--d-border) !important; } html.theme-dark .article-content { color: var(--d-text) !important; } /* was #1a1a1a (black) */ html.theme-dark .article-content table { background: var(--d-surface) !important; border-color: var(--d-border) !important; } html.theme-dark .article-content th, html.theme-dark .article-content td { border-bottom-color: var(--d-border) !important; } html.theme-dark .article-content tbody tr:hover { background: var(--d-surface-2) !important; } html.theme-dark .article__toc { border-color: var(--d-border) !important; } /* bg = --card-beige (already dark) */ html.theme-dark .article__toc-head { border-bottom-color: var(--d-border) !important; } html.theme-dark .article__toc-body { background: var(--d-surface) !important; color: var(--d-text) !important; } html.theme-dark .meta__pill { background: rgba(18,11,6,.74) !important; border-color: rgba(255,255,255,.18) !important; color: var(--d-text) !important; } /* Blog breadcrumbs use #id + !important, so override needs the id prefix */ html.theme-dark #blog-article-page .breadcrumbs--white { background: var(--d-surface) !important; border-color: var(--d-border) !important; } html.theme-dark #blog-article-page .breadcrumbs--white li, html.theme-dark #blog-article-page .breadcrumbs--white a { color: var(--d-muted) !important; } /* ---- Sign-up / registration wizard (signup.ejs + modelActions.css) ---- */ html.theme-dark .model-registration { background: var(--d-surface) !important; border-color: var(--d-border) !important; } html.theme-dark .model-registration__setup-wrapper { background: var(--d-surface-2) !important; border-color: var(--d-border) !important; } html.theme-dark .agency-setup__title, html.theme-dark .agency-setup__list-title, html.theme-dark .model-registration__subtitle { color: var(--d-text) !important; } html.theme-dark .setup-steps__title, html.theme-dark .setup-steps__description, html.theme-dark .model-registration__label, html.theme-dark .model-registration__subtitle-hint, html.theme-dark .model-registration__subtitle-text { color: var(--d-muted) !important; } /* step bullets + connectors */ html.theme-dark .setup-steps__item::before, html.theme-dark .setup-steps__substep::before { background: var(--d-surface-3) !important; border-color: var(--d-border) !important; color: var(--d-text) !important; } html.theme-dark .setup-steps__number { background: var(--d-surface-3) !important; color: var(--d-gold) !important; } html.theme-dark .setup-steps__item:not(:last-child)::after, html.theme-dark .setup-steps__substep:not(:last-child)::after { background-color: var(--d-border) !important; } html.theme-dark .setup-steps__item--active, html.theme-dark .setup-steps__substep--active::before { background-color: var(--d-gold) !important; color: #211610 !important; } /* option buttons */ html.theme-dark .model-registration__option-button { background: var(--d-surface-2) !important; color: var(--d-text) !important; } html.theme-dark .model-registration__option-button:hover { background: var(--d-surface-3) !important; } html.theme-dark .model-registration__option-button--selected { background: var(--d-gold) !important; color: #211610 !important; } html.theme-dark .model-registration__option-marker { background: var(--d-surface-3) !important; } /* inputs / selects / textareas */ html.theme-dark .model-registration__input, html.theme-dark .model-registration__select, html.theme-dark .model-registration__content input[type="text"], html.theme-dark .model-registration__content input[type="email"], html.theme-dark .model-registration__content input[type="tel"], html.theme-dark .model-registration__content input[type="password"], html.theme-dark .model-registration__content input[type="number"], html.theme-dark .model-registration__content textarea { background: var(--d-surface-2) !important; border-color: var(--d-border) !important; color: var(--d-text) !important; } html.theme-dark .model-registration__input::placeholder, html.theme-dark .model-registration__content input::placeholder { color: var(--d-muted) !important; } /* secondary button (primary is already a dark #282828 gradient — left as-is) */ html.theme-dark .model-registration__button--secondary { color: var(--d-muted) !important; border-color: var(--d-border) !important; } html.theme-dark .model-registration__button--secondary:hover { border-color: var(--d-gold) !important; color: var(--d-text) !important; } /* danger notice + banners CTA */ html.theme-dark .model-registration__notice--danger { background: rgba(220,53,69,.12) !important; border-color: rgba(220,53,69,.4) !important; color: var(--d-text) !important; } html.theme-dark .signup__banners-cta { background: var(--d-surface-2) !important; border-color: var(--d-border) !important; color: var(--d-text) !important; } /* progress bar (green fill kept) */ html.theme-dark .model-progress__progressbar { background: var(--d-surface-3) !important; } /* Option pills (custom radios: Agency / Independent / Massage) — input + label */ html.theme-dark .model-registration__content .model-registration__option-item > input[type="checkbox"] + label, html.theme-dark .model-registration__content .model-registration__option-item > input[type="radio"] + label { background: var(--d-surface-2) !important; border-color: var(--d-border) !important; color: var(--d-text) !important; } html.theme-dark .model-registration__content .model-registration__option-item > input[type="radio"]:checked + label, html.theme-dark .model-registration__content .model-registration__option-item > input[type="checkbox"]:checked + label { background: var(--d-surface-3) !important; border-color: var(--d-gold) !important; } /* A/B/C marker circles (label::before); checked marker keeps its gold check */ html.theme-dark .model-registration__content .model-registration__option-item > input[type="checkbox"] + label::before, html.theme-dark .model-registration__content .model-registration__option-item > input[type="radio"] + label::before { background: var(--d-surface-3) !important; border-color: var(--d-border) !important; color: var(--d-text) !important; } /* Photo-upload step (cream slots/modal) */ html.theme-dark .photo-upload-slot { background: var(--d-surface-2) !important; border-color: var(--d-border) !important; } html.theme-dark .photo-upload-slot:hover { background: var(--d-surface-3) !important; border-color: var(--d-gold) !important; } html.theme-dark .photo-upload-icon, html.theme-dark .photo-upload-text, html.theme-dark .photo-upload-subtitle, html.theme-dark .photo-upload-description, html.theme-dark .photo-upload-recommendation, html.theme-dark .photo-upload__label { color: var(--d-muted) !important; } html.theme-dark .photo-upload-modal { background: var(--d-surface) !important; color: var(--d-text) !important; } html.theme-dark .photo-upload-modal .model-registration__subtitle-text { color: var(--d-muted) !important; } html.theme-dark .photo-upload-modal button.modal__button--cancel { background: var(--d-surface-2) !important; color: var(--d-text) !important; border-color: var(--d-border) !important; } /* ---- Homepage hero block (newheader.ejs): the white-bordered shell ---- */ html.theme-dark .hero-shell, html.theme-dark .hero-filter-shell { background: var(--d-surface) !important; border-color: var(--d-border) !important; } html.theme-dark .hero-filter-card { background: var(--d-surface-2) !important; border-color: var(--d-border) !important; } html.theme-dark .hero-filter-title { color: var(--d-text) !important; } html.theme-dark .hero-filter-subtitle { color: var(--d-muted) !important; } html.theme-dark .hero-banner { border-color: var(--d-border) !important; } html.theme-dark .hero-title { color: var(--d-text) !important; } html.theme-dark .hero-subtitle { color: var(--d-muted) !important; } /* ---- Search-bar icons (ae-filter: Country/City/District/Search) — #111 SVGs. Country can be a colored flag PNG on some locales — don't invert those. ---- */ html.theme-dark .ae-ico--country, html.theme-dark .ae-ico--city, html.theme-dark .ae-ico--district, html.theme-dark .ae-searchIco { filter: brightness(0) invert(1); } html.theme-dark body[data-locale="it"] .ae-ico--country, html.theme-dark body[data-locale="tr"] .ae-ico--country, html.theme-dark body[data-locale="de"] .ae-ico--country, html.theme-dark body[data-locale="at"] .ae-ico--country, html.theme-dark body[data-locale="uk"] .ae-ico--country, html.theme-dark body[data-locale="au"] .ae-ico--country { filter: none !important; } /* ---- Blog index page (views/blogs/index.ejs) ---- */ html.theme-dark .regional-blogs__label { color: var(--d-muted) !important; } html.theme-dark .regional-blogs__links a { /* the Austrian/German/Italian blocks */ background-color: var(--d-surface-2) !important; border-color: var(--d-border) !important; color: var(--d-text) !important; } html.theme-dark .regional-blogs__links a:hover { background-color: var(--d-surface-3) !important; border-color: var(--d-gold) !important; color: var(--d-text) !important; } html.theme-dark #blogListNotFound { background: var(--d-surface-2) !important; color: var(--d-text) !important; } /* post listing text (cards are JS-rendered into .blog-posts) */ html.theme-dark .blog-posts .item_data, html.theme-dark .blog-posts .item_data * { color: var(--d-text) !important; } html.theme-dark .blog-posts .item_data a { color: var(--d-gold) !important; } /* blog index breadcrumbs use #blog-page .dmca-breadcrumbs (id + !important) */ html.theme-dark #blog-page .dmca-breadcrumbs { background: var(--d-surface) !important; border-color: var(--d-border) !important; } html.theme-dark #blog-page .dmca-breadcrumbs li, html.theme-dark #blog-page .dmca-breadcrumbs a { color: var(--d-muted) !important; } /* ---- Blog/post card separator (title → short description) was rgb(0 0 0 /.1) ---- */ html.theme-dark .card_items .item_data .data__footer, html.theme-dark .hero__card .card_items .item_data .data__footer { border-top-color: var(--d-border) !important; } /* ---- Theme toggle button ---- */ .theme-switch { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-right: 6px; border: 1px solid rgba(0,0,0,.12); background: rgba(0,0,0,.05); border-radius: 99px; color: #282828; cursor: pointer; line-height: 1; transition: background .18s ease, color .18s ease; flex-shrink: 0; } .theme-switch:hover { background: rgba(0,0,0,.09); } html.theme-dark .theme-switch { border-color: var(--d-border); background: var(--d-surface-2); color: var(--d-text); } html.theme-dark .theme-switch:hover { background: var(--d-surface-3); } .theme-switch svg { width: 18px; height: 18px; display: block; } /* sun shown in dark mode (click → light), moon in light mode (click → dark) */ .theme-switch .ts-sun { display: none; } .theme-switch .ts-moon { display: block; } html.theme-dark .theme-switch .ts-sun { display: block; } html.theme-dark .theme-switch .ts-moon { display: none; }