/* ============================================================ DARK THEME — KINKY.NZ Активируется при классе .dark-theme на Не меняет структуру/классы HTML — только переменные ============================================================ */ html.dark-theme { --brand-pink: #ff6aa8; --brand-pink-600: #ff4d94; --brand-pink-700: #e94b8e; --brand-grad: linear-gradient(135deg, #ff6aa8 0%, #e94b8e 55%, #c84a7a 100%); --brand-grad-soft: linear-gradient(135deg, #ff8abf 0%, #e94b8e 100%); --ink: #f0f1f4; --ink-2: #c4c7d0; --muted: #8e92a0; --line: #2f3340; --bg: #0f1117; --surface: #1a1d27; --surface-2: #222634; --shadow-xs: 0 1px 2px rgba(0,0,0,.25); --shadow-sm: 0 4px 14px rgba(0,0,0,.35); --shadow-md: 0 10px 30px rgba(0,0,0,.45); --shadow-lg: 0 20px 48px rgba(0,0,0,.55); --shadow-pink: 0 10px 24px rgba(255,106,168,.35); } /* ---------- Base ---------- */ html.dark-theme body { background-color: var(--bg) !important; color: var(--ink) !important; } html.dark-theme ::selection { background: rgba(255,106,168,.25); } /* Scrollbar */ html.dark-theme * { scrollbar-color: var(--brand-pink) var(--line); } html.dark-theme *::-webkit-scrollbar-thumb { background: #4a3f5a; } html.dark-theme *::-webkit-scrollbar-thumb:hover { background: var(--brand-pink); } /* ---------- Header ---------- */ html.dark-theme .header { background: rgba(15,17,23,.82) !important; border-bottom-color: var(--line) !important; } html.dark-theme .header-wrap__online-count { color: var(--muted) !important; } html.dark-theme .header-wrap__favorite span { color: var(--ink) !important; } html.dark-theme .header-wrap__favorite:hover { background: rgba(255,106,168,.1); } html.dark-theme .header-wrap__login { border-color: var(--line) !important; color: var(--ink) !important; } html.dark-theme .header-wrap__login:hover { background: var(--ink) !important; color: var(--bg) !important; border-color: var(--ink) !important; } /* ---------- Selects ---------- */ html.dark-theme .select__button { background: var(--surface) !important; } html.dark-theme .select__dropdown { background: var(--surface) !important; border-color: var(--line) !important; } html.dark-theme .select__dropdown li label { color: var(--ink) !important; } html.dark-theme .select.select_lang .select__button { border-color: var(--line) !important; background: var(--surface) !important; } /* ---------- Nationality ---------- */ html.dark-theme #nationality { background: var(--surface) !important; color: var(--ink) !important; border-color: var(--line) !important; } /* ---------- Page titles ---------- */ html.dark-theme .page-title { color: var(--brand-pink) !important; } html.dark-theme .main-page__title { color: var(--ink) !important; } html.dark-theme .main-page__desc { color: var(--muted) !important; } /* ---------- Filter chips ---------- */ html.dark-theme .filter__category ul li a { background: var(--surface) !important; border-color: var(--line) !important; color: var(--ink-2) !important; } html.dark-theme .filter__category ul li a:hover { border-color: var(--brand-pink) !important; color: var(--brand-pink) !important; } html.dark-theme .girls__filters-checkbox { background: var(--surface) !important; border-color: var(--line) !important; color: var(--ink-2) !important; } html.dark-theme .girls__filters-checkbox:hover { border-color: var(--brand-pink) !important; color: var(--brand-pink) !important; } /* ---------- Cards ---------- */ html.dark-theme .girls-wrap-item__body { background: var(--surface) !important; border-color: var(--line) !important; } html.dark-theme .girls-wrap-item:hover .girls-wrap-item__body { border-color: rgba(255,106,168,.3) !important; } /* Badges */ html.dark-theme .girls-wrap-item__real { background: rgba(26,29,39,.9) !important; } html.dark-theme .girls-wrap-item__fav { background: rgba(26,29,39,.9) !important; } /* Name */ html.dark-theme .girls-wrap-item__name { color: var(--ink) !important; } /* Address */ html.dark-theme .girls-wrap-item__adress { border-top-color: var(--line) !important; color: var(--muted) !important; } html.dark-theme .girls-wrap-item__adress span { color: var(--ink-2) !important; } /* Info panel */ html.dark-theme .girls-wrap-item__info { background: var(--surface) !important; } /* Price bar */ html.dark-theme .girls-wrap-item__parametrs { background: rgba(255,106,168,.15) !important; } html.dark-theme .girls-wrap-item:nth-of-type(even) .girls-wrap-item__parametrs { background: rgba(124,92,255,.15) !important; } html.dark-theme .girls-wrap-item:hover .girls-wrap-item__parametrs { background: rgba(255,106,168,.25) !important; } html.dark-theme .girls-wrap-item:nth-of-type(even):hover .girls-wrap-item__parametrs { background: rgba(124,92,255,.25) !important; } html.dark-theme .girls-wrap-item__parametrs strong { color: #ff8abf !important; } html.dark-theme .girls-wrap-item:nth-of-type(even) .girls-wrap-item__parametrs strong { color: #8b7aff !important; } html.dark-theme .girls-wrap-item__parametrs span { color: var(--ink-2) !important; } /* Phone */ html.dark-theme .girls-wrap-item__phone a { background: var(--ink) !important; } html.dark-theme .girls-wrap-item__phone a:hover { background: var(--brand-pink) !important; } /* ---------- Buttons ---------- */ html.dark-theme .green-btn, html.dark-theme .orange-btn, html.dark-theme .purple-btn { box-shadow: var(--shadow-sm); } /* ---------- Footer ---------- */ html.dark-theme .footer { background: var(--surface) !important; border-top-color: var(--line) !important; } html.dark-theme .footer-wrap__nav > ul li a { color: var(--ink-2) !important; } html.dark-theme .footer-wrap__nav > ul li a:hover { color: var(--brand-pink) !important; } html.dark-theme .footer-copy { color: var(--muted) !important; border-top-color: var(--line) !important; } /* ---------- Profile / card detail ---------- */ html.dark-theme .girl-card__name, html.dark-theme .profile__title { background: var(--brand-grad) !important; } html.dark-theme .girl-card__cost, html.dark-theme .girl-card__info, html.dark-theme .girl-card__about, html.dark-theme .girl-card__agency { background: var(--surface) !important; } /* ---------- Focus ---------- */ html.dark-theme a:focus-visible, html.dark-theme button:focus-visible, html.dark-theme input:focus-visible, html.dark-theme select:focus-visible { outline-color: rgba(255,106,168,.5); }