/* =========================================== Dark mode (Modern toggle) Активируется[data-theme="dark"] на . Light-тема default не меняется. =========================================== */ :root[data-theme="dark"] { /* Фон и поверхность */ --white: #0d1117; --cream: #0a0d12; --light-gray: #1a1e26; --card-bg: #11151c; /* Текст — светлый для контраста на тёмном (~7:1) */ --text: #e6e7ec; --text-light: #a3a7b1; --text-muted: #8b8f96; /* Акцент сохраняем (#c9a227) для brand-узнаваемости */ --glass-bg: rgba(0, 0, 0, 0.24); --glass-border: rgba(255, 255, 255, 0.12); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.34); --shadow: rgba(0, 0, 0, 0.24); --shadow-hover: rgba(0, 0, 0, 0.44); --shadow-glow: rgba(201, 162, 39, 0.22); } /* Тёмный фон страницы (уже есть dark-green — делаем night) */ html[data-theme="dark"] body { background: #07090f; } /* Тёмные карточки / панели */ html[data-theme="dark"] .glass-card, html[data-theme="dark"] .room-card, html[data-theme="dark"] .service-card, html[data-theme="dark"] .banner-card, html[data-theme="dark"] .accommodation-card, html[data-theme="dark"] .modal, html[data-theme="dark"] .auth-form, html[data-theme="dark"] .cabinet-wrap { background: rgba(17, 21, 28, 0.68); border-color: rgba(255, 255, 255, 0.12); } html[data-theme="dark"] .glass-card, html[data-theme="dark"] .room-card, html[data-theme="dark"] .service-card, html[data-theme="dark"] .banner-card { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.44), inset 2px 2px 6px rgba(0, 0, 0, 0.34); } /* Заголовки — тёмные primary-dark на тёмном фоне невидимы, в тёмной теме переключаем на светлый текст */ html[data-theme="dark"] .section-title, html[data-theme="dark"] .about-content h3, html[data-theme="dark"] .room-info h3, html[data-theme="dark"] .room-info h3 a, html[data-theme="dark"] .service-card h3, html[data-theme="dark"] .detail-grid h2, html[data-theme="dark"] .detail-grid h3, html[data-theme="dark"] .price-title, html[data-theme="dark"] .table-category, html[data-theme="dark"] .modal h2, html[data-theme="dark"] .toast strong, html[data-theme="dark"] .review-author h4, html[data-theme="dark"] .contact-item h4, html[data-theme="dark"] .contact-info h3, html[data-theme="dark"] .rg-title { color: var(--text); } /* Цены/акцентный текст — тёмный primary на тёмных карточках невидим */ html[data-theme="dark"] .price-value, html[data-theme="dark"] .price-cell { color: var(--accent-light); } /* Лейбл секции — в светлой теме тёмно-золотой (#8a6d0b), на тёмном фоне возвращаем светлый золотой */ html[data-theme="dark"] .section-label { color: var(--accent-light); background: rgba(201, 162, 39, 0.14); } /* Тёмные инпуты/формы */ html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: rgba(13, 17, 23, 0.78); color: var(--text); border-color: rgba(255, 255, 255, 0.12); } /* Тёмное меню "Ещё" (more-dropdown) — белый фон нечитаем */ html[data-theme="dark"] .more-dropdown { background: rgba(17, 21, 28, 0.98); border-color: rgba(255, 255, 255, 0.1); } html[data-theme="dark"] .more-dropdown li a { color: var(--text) !important; } html[data-theme="dark"] .more-dropdown li a:hover { background: var(--light-gray); color: var(--accent) !important; } /* Цены / слои с полупрозрачным фоном — читаемость */ html[data-theme="dark"] .price-section, html[data-theme="dark"] .price-table-wrap, html[data-theme="dark"] .rooms-grid, html[data-theme="dark"] .services-grid { background: rgba(17, 21, 28, 0.52); border: 1px solid rgba(255, 255, 255, 0.08); } html[data-theme="dark"] .price-table th, html[data-theme="dark"] .price-table td { border-color: rgba(255, 255, 255, 0.08); } html[data-theme="dark"] .price-table th, html[data-theme="dark"] .price-table .table-category { color: var(--text); } /* Переключатель (кнопка) */ #theme-toggle { --tw: #07090f; position: fixed; right: 18px; bottom: 18px; z-index: 9999; width: 46px; height: 46px; border-radius: 999px; background: rgba(201, 162, 39, 0.16); border: 1px solid rgba(201, 162, 39, 0.34); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); } #theme-toggle:hover { background: rgba(201, 162, 39, 0.26); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34); } #theme-toggle .tt-moon { display: none; } html[data-theme="dark"] #theme-toggle .tt-moon { display: inline; } html[data-theme="dark"] #theme-toggle .tt-sun { display: none; }