/* ─────────────────────────────────────────────────────────────────────────
Dark theme for the freelancer pages when they are FRAMED INSIDE the
dashboard (/user/... → iframe with ?vai_embed=1&vai_theme=dark).
Why this file exists at all: the freelancer app has no dark mode, and the
dashboard's own dark stylesheet cannot cross an iframe boundary — so in
dark mode the framed page painted pure white inside a black shell.
Two guard rails, because this app also serves the PUBLIC freelancer site
from the same stylesheets:
1. The is only emitted when the page is framed.
2. Every selector below is scoped to html[data-vai-theme="dark"], which
is only ever stamped inside that frame.
Nothing here can reach volnyn.com/freelancer.
Palette mirrors assets/user/css/dashboard-dark.css so the frame reads as
part of the dashboard rather than a window onto another site.
───────────────────────────────────────────────────────────────────────── */
html[data-vai-theme="dark"] {
/* The theme's own variables carry most components; overriding them here
does the bulk of the work and keeps brand colours (green price, orange
"Fixed" badge) exactly as they are. */
--section-bg-1: #000000;
--section-bg-2: #000000;
--white: #0a0a0a;
--heading-color: #ffffff;
--paragraph-color: #cfcfcf;
--body-color: #a8a8a8;
--border-color: #262626;
--border-color-2: #262626;
--vai-dark-bg: #000000;
--vai-dark-surface: #0a0a0a;
--vai-dark-line: #262626;
--vai-dark-text: #eaeaea;
--vai-dark-muted: #8a8a8a;
background-color: var(--vai-dark-bg);
color-scheme: dark;
}
html[data-vai-theme="dark"] body {
background-color: var(--vai-dark-bg) !important;
color: var(--vai-dark-text);
}
/* ── Page shell ──────────────────────────────────────────────────────────── */
html[data-vai-theme="dark"] .preview-area,
html[data-vai-theme="dark"] .section-bg-1,
html[data-vai-theme="dark"] .section-bg-2,
html[data-vai-theme="dark"] .blue-bg,
html[data-vai-theme="dark"] .breadcrumb-area {
background-color: var(--vai-dark-bg) !important;
}
html[data-vai-theme="dark"] .breadcrumb-contents-title { color: #ffffff !important; }
html[data-vai-theme="dark"] .breadcrumb-contents-list-item,
html[data-vai-theme="dark"] .breadcrumb-contents-list-item-link { color: var(--vai-dark-muted) !important; }
/* ── Category strip across the top ───────────────────────────────────────── */
html[data-vai-theme="dark"] .categorySub-area.category-light.bg-white,
html[data-vai-theme="dark"] .categorySub-area,
html[data-vai-theme="dark"] .categorySub,
html[data-vai-theme="dark"] .bg-white {
background-color: var(--vai-dark-bg) !important;
border-bottom-color: var(--vai-dark-line) !important;
}
html[data-vai-theme="dark"] .categorySub-area.category-light.border-top {
border-top-color: var(--vai-dark-line) !important;
}
html[data-vai-theme="dark"] .categorySub-list-slide-link {
border-color: var(--vai-dark-line) !important;
background-color: #101010 !important;
}
/* The chip label is set by `.categorySub-area.category-light .…-list > a`,
which is !important and more specific than the class on its own. */
html[data-vai-theme="dark"] .categorySub-area .categorySub-list-slide-list > a {
color: var(--vai-dark-text) !important;
}
html[data-vai-theme="dark"] .categorySub-list-slide-link:hover,
html[data-vai-theme="dark"] .categorySub-list-slide-list.active .categorySub-list-slide-link {
background-color: #1a1a1a !important;
color: #ffffff !important;
}
/* Prev / next arrows sit on a white pill by default. */
html[data-vai-theme="dark"] .categorySub-arrow::before {
background-color: #141414 !important;
color: var(--vai-dark-text) !important;
box-shadow: 0 0 0 1px var(--vai-dark-line) !important;
}
html[data-vai-theme="dark"] .categorySub-slide-submenu {
background-color: var(--vai-dark-surface) !important;
border-color: var(--vai-dark-line) !important;
box-shadow: 0 12px 32px rgba(0, 0, 0, .6) !important;
}
/* ── Results bar: count, sort, mobile filter toggle, search ──────────────── */
html[data-vai-theme="dark"] .showing-results { color: var(--vai-dark-muted) !important; }
html[data-vai-theme="dark"] .filter-toggle-btn,
html[data-vai-theme="dark"] .sort-by-select,
html[data-vai-theme="dark"] .jobFilter-wrapper-search {
background: var(--vai-dark-surface) !important;
background-color: var(--vai-dark-surface) !important;
color: var(--vai-dark-text) !important;
border-color: var(--vai-dark-line) !important;
}
html[data-vai-theme="dark"] .jobFilter-wrapper-search input {
background: transparent !important;
color: var(--vai-dark-text) !important;
}
/* ── Filter sidebar (shared filter-01 component, all !important upstream) ── */
html[data-vai-theme="dark"] .filter-wrap-01-shared {
background: var(--vai-dark-surface) !important;
color: var(--vai-dark-text) !important;
border-color: var(--vai-dark-line) !important;
}
html[data-vai-theme="dark"] .filter-header-01-shared {
background: #101010 !important;
border-bottom-color: var(--vai-dark-line) !important;
color: #ffffff !important;
}
html[data-vai-theme="dark"] .filter-title-01-shared { color: #ffffff !important; }
/* The panel's own heading is a bare