/* ========================================================================== استراحة | Estraha — Dark Mode -------------------------------------------------------------------------- A purpose-built dark palette (not an inversion): deep forest-charcoal surfaces + a brighter grass-green accent that keeps AA contrast on dark backgrounds. Activated by [data-theme="dark"] on (theme.js also mirrors it to data-bs-theme so Bootstrap's own components follow along). ========================================================================== */ [data-theme="dark"] { /* Brand re-tuned for dark surfaces */ --es-brand-50: #16261A; /* soft tint background */ --es-brand-100: #1E3523; /* soft border */ --es-brand-200: #2E4C31; --es-brand-300: #436C44; --es-brand-400: #6DB260; --es-brand-500: #4E9846; /* primary fill */ --es-brand-600: #82C776; /* links / accent text */ --es-brand-700: #A2D998; /* strong accent text */ --es-brand-800: #C6E9BF; --es-brand: var(--es-brand-500); --es-brand-dark: var(--es-brand-700); --es-brand-soft: var(--es-brand-50); /* Accents */ --es-gold: #E3B44A; --es-gold-soft: #2C2413; --es-clay: #E58058; --es-clay-soft: #2E1C15; --es-sky: #6FB5D6; --es-sky-soft: #142630; --es-danger: #F08A82; --es-danger-soft: #2E1917; --es-success: #6FCB8A; --es-success-soft: #12271A; --es-warn: #E2B457; --es-warn-soft: #2B2213; /* Neutrals */ --es-bg: #0F1613; --es-bg-subtle: #0B120F; --es-surface: #16201C; --es-surface-2: #1D2A24; --es-surface-3: #26332D; --es-line: #2B3A33; --es-line-soft: #223029; --es-ink: #E8F1EA; --es-ink-2: #BDCCC3; --es-ink-3: #8CA096; --es-ink-4: #6C8077; --es-overlay: rgba(0, 0, 0, .68); /* Shadows read as depth, not smudge, on dark */ --es-shadow-xs: 0 1px 2px rgba(0, 0, 0, .4); --es-shadow-sm: 0 2px 8px rgba(0, 0, 0, .45); --es-shadow: 0 12px 30px -18px rgba(0, 0, 0, .9), 0 2px 8px rgba(0, 0, 0, .35); --es-shadow-lg: 0 28px 60px -30px rgba(0, 0, 0, .95), 0 6px 16px rgba(0, 0, 0, .4); --es-shadow-brand: 0 14px 30px -18px rgba(78, 152, 70, .8); /* Bootstrap bridge */ --bs-body-bg: var(--es-bg); --bs-body-color: var(--es-ink); --bs-border-color: var(--es-line); --bs-link-color: var(--es-brand-600); --bs-link-hover-color: var(--es-brand-700); --bs-emphasis-color: var(--es-ink); --bs-secondary-color: var(--es-ink-3); --bs-tertiary-bg: var(--es-surface-2); color-scheme: dark; } /* --- Component fine-tuning for dark ------------------------------------- */ [data-theme="dark"] .btn-primary { color: #06120A; } [data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .btn-primary:active { color: #06120A; } [data-theme="dark"] .btn-dark-solid { background: var(--es-surface-3); border-color: var(--es-line); color: var(--es-ink); } [data-theme="dark"] .btn-dark-solid:hover { background: var(--es-line); color: #fff; } [data-theme="dark"] .es-badge-glass { background: rgba(18, 26, 22, .82); color: var(--es-ink); border: 1px solid rgba(255, 255, 255, .12); } [data-theme="dark"] .es-fav { background: rgba(18, 26, 22, .85); color: var(--es-ink-2); } [data-theme="dark"] .es-fav:hover { background: rgba(18, 26, 22, .96); } [data-theme="dark"] .es-gallery-more { background: rgba(18, 26, 22, .9); color: var(--es-ink); } [data-theme="dark"] .es-skel::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent); } [data-theme="dark"] .es-logo-mark { background: linear-gradient(145deg, var(--es-brand-400), var(--es-brand-300)); color: #08150B; } [data-theme="dark"] .es-map { background: radial-gradient(circle at 22% 28%, rgba(78, 152, 70, .2), transparent 42%), radial-gradient(circle at 76% 68%, rgba(111, 181, 214, .16), transparent 45%), var(--es-surface-2); } [data-theme="dark"] .es-map::before { opacity: .35; } [data-theme="dark"] .es-pin.active, [data-theme="dark"] .es-pin:hover { color: #06120A; } [data-theme="dark"] .es-hero::before { background: linear-gradient(to bottom, rgba(4, 10, 7, .72), rgba(4, 10, 7, .5) 45%, rgba(4, 10, 7, .9)), radial-gradient(90% 70% at 50% 0%, rgba(78, 152, 70, .22), transparent 70%); } [data-theme="dark"] .es-cta-band { background: linear-gradient(135deg, #1B3A20, #275C2A 55%, #1F4A24); } [data-theme="dark"] .es-cta-band h2, [data-theme="dark"] .es-cta-band h3 { color: #EAF6E7; } [data-theme="dark"] .es-cat:hover { color: var(--es-brand-700); } [data-theme="dark"] .es-step:hover .es-step-num { color: #06120A; } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--es-surface-2); border-color: var(--es-line); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: var(--es-surface-2); box-shadow: 0 0 0 4px rgba(78, 152, 70, .22); } [data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238CA096' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } [data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="time"], [data-theme="dark"] input[type="month"] { color-scheme: dark; } [data-theme="dark"] .input-group-text { background: var(--es-surface-3); color: var(--es-ink-3); } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(2); } [data-theme="dark"] .modal-backdrop.show { opacity: .72; } [data-theme="dark"] .es-search-field:hover { background: var(--es-surface-2); } /* The lifted search card sits on a dark photo — give it a visible rim */ [data-theme="dark"] .es-search-lifted .es-search { border-color: #3B4C44; box-shadow: 0 30px 60px -26px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .04); } [data-theme="dark"] ::selection { background: var(--es-brand-300); color: #EAF6E7; } [data-theme="dark"] .es-bars div { background: var(--es-brand-200); } [data-theme="dark"] .es-bars div:hover { background: var(--es-brand-400); } [data-theme="dark"] .es-store-btn .bi, [data-theme="dark"] .es-store-btn b { color: var(--es-ink); } [data-theme="dark"] .es-empty-art { color: var(--es-brand-300); } /* Smooth theme transition (skipped for people who prefer reduced motion) */ @media (prefers-reduced-motion: no-preference) { body, .es-card, .es-prop, .es-nav, .es-footer, .es-bottomnav, .modal-content, .form-control, .form-select, .es-booking-card { transition: background-color .28s ease, border-color .28s ease, color .28s ease; } } /* Threads & conversations */ [data-theme="dark"] .es-bubble-out { background: var(--es-brand-50); border-color: var(--es-brand-200); } [data-theme="dark"] .es-composer { background: var(--es-surface); } /* Realtime */ [data-theme="dark"] .es-ws-dot, [data-theme="dark"] .es-presence::after { border-color: var(--es-surface); } [data-theme="dark"] .es-bell-item:hover { background: var(--es-surface-2); } /* Leaflet في الوضع الليلي */ [data-theme="dark"] .leaflet-tile { filter: brightness(.78) contrast(1.08) saturate(.85); } [data-theme="dark"] .leaflet-control-attribution { background: rgba(18, 26, 20, .8) !important; color: #9BA89C; } [data-theme="dark"] .leaflet-control-attribution a { color: var(--es-brand-600); } [data-theme="dark"] .leaflet-bar a { background: var(--es-surface); color: var(--es-text); } /* Select2 — يطابق حقول النصّ في الوضع الداكن (سطح ثانوي لا أبيض) */ [data-theme="dark"] .select2-container--default.es-sel .select2-selection--single, [data-theme="dark"] .select2-container--default.es-sel .select2-selection--multiple { background: var(--es-surface-2); border-color: var(--es-line); } [data-theme="dark"] .select2-container--default.es-sel .select2-selection--single:focus, [data-theme="dark"] .select2-container--default.es-sel.select2-container--focus .select2-selection--single, [data-theme="dark"] .select2-container--default.es-sel.select2-container--open .select2-selection--single, [data-theme="dark"] .select2-container--default.es-sel.select2-container--focus .select2-selection--multiple, [data-theme="dark"] .select2-container--default.es-sel.select2-container--open .select2-selection--multiple { box-shadow: 0 0 0 4px rgba(78, 152, 70, .22); } [data-theme="dark"] .select2-container--default.es-sel.es-sel-bare .select2-selection--single { background: transparent; } [data-theme="dark"] .select2-container--default.es-sel.select2-container--disabled .select2-selection--single { background: var(--es-surface-3); } [data-theme="dark"] .select2-dropdown { background: var(--es-surface-2); border-color: var(--es-line); } [data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field { background: var(--es-surface-3); } /* عمولة المنصة في الوضع الداكن: الأخضر الفاتح يصير خلفية داكنة */ [data-theme="dark"] .es-commission { background: var(--es-brand-soft); border-color: var(--es-brand-800); } [data-theme="dark"] .es-commission-cell { background: var(--es-surface-2); border-color: var(--es-line); } /* الخلية المميّزة تحتفظ بخلفية العلامة — القاعدة العامة فوقها تتعادل معها في التخصيص وتسبقها في الترتيب، فلا بدّ من إعادتها صراحةً هنا */ [data-theme="dark"] .es-commission-cell.is-total { background: var(--es-brand); border-color: var(--es-brand); } [data-theme="dark"] .es-commission-cell.is-total b { color: #06120A; } [data-theme="dark"] .es-commission-cell.is-total span { color: rgba(6, 18, 10, .72); }