/* * dark_mode.css — Plateforme Logistique * ====================================== * Overrides every hardcoded colour found in: * search.html, vehicle_detail.html, depot_detail.html, * join_vehicle.html, join_depot.html, join.html, index.html * * Applied when: * Toggled by: base.html toggle button + localStorage */ /* ============================================================ 0. CSS CUSTOM PROPERTIES — dark palette ============================================================ */ [data-color-scheme="dark"] { --dk-bg: #0f1117; --dk-surface: #161b27; --dk-elevated: #1e2433; --dk-hover: #252c3d; --dk-border: #2a3350; --dk-border-soft: #1e2840; --dk-text: #e8ecf4; --dk-text-sec: #8a95b0; --dk-text-muted: #5a6480; --dk-orange: #ff9f2e; --dk-orange-dim: rgba(255,159,46,0.15); --dk-blue: #4a9eff; --dk-blue-dim: rgba(74,158,255,0.15); --dk-green: #2dd36f; --dk-green-dim: rgba(45,211,111,0.15); --dk-red: #ff5f5f; --dk-red-dim: rgba(255,95,95,0.15); } /* ============================================================ 1. BASE BODY & PAGE WRAPPERS ============================================================ */ [data-color-scheme="dark"] body { background-color: var(--dk-bg); color: var(--dk-text); } /* ── Header ── */ [data-color-scheme="dark"] .header { background-color: var(--dk-surface); border-bottom-color: var(--dk-border); box-shadow: 0 1px 12px rgba(0,0,0,0.4); } [data-color-scheme="dark"] .logo span, [data-color-scheme="dark"] .logo { color: var(--dk-text); } [data-color-scheme="dark"] .nav-link { color: var(--dk-text-sec); } [data-color-scheme="dark"] .nav-link:hover { color: var(--dk-orange); } [data-color-scheme="dark"] .lang-link { color: var(--dk-text-muted); } [data-color-scheme="dark"] .lang-link:hover, [data-color-scheme="dark"] .lang-link.active { color: var(--dk-orange); background-color: var(--dk-orange-dim); } /* ── Footer ── */ [data-color-scheme="dark"] .footer { background-color: #0b0e15; } [data-color-scheme="dark"] .footer, [data-color-scheme="dark"] .footer p, [data-color-scheme="dark"] .footer-section p, [data-color-scheme="dark"] .footer-section h4 { color: var(--dk-text-sec); } [data-color-scheme="dark"] .footer-section a { color: var(--dk-text-sec); } [data-color-scheme="dark"] .footer-section a:hover { color: var(--dk-orange); } /* ============================================================ 2. INDEX PAGE ============================================================ */ [data-color-scheme="dark"] .hero { background: var(--dk-surface); border-bottom: 1px solid var(--dk-border); } [data-color-scheme="dark"] .hero-content h1 { color: var(--dk-text); } [data-color-scheme="dark"] .hero-content p { color: var(--dk-text-sec); } [data-color-scheme="dark"] .choices-section { background-color: var(--dk-bg); } [data-color-scheme="dark"] .choice-card { background-color: var(--dk-surface); border-color: var(--dk-border); box-shadow: 0 4px 20px rgba(0,0,0,0.35); } [data-color-scheme="dark"] .choice-card:hover { border-color: var(--dk-orange); box-shadow: 0 8px 32px var(--dk-orange-dim); } [data-color-scheme="dark"] .choice-card h3 { color: var(--dk-text); } [data-color-scheme="dark"] .choice-card p { color: var(--dk-text-sec); } [data-color-scheme="dark"] .cta-section { background: linear-gradient(135deg, #1a2a18 0%, #1c3020 100%); border-top: 1px solid var(--dk-border); border-bottom: 1px solid var(--dk-border); } [data-color-scheme="dark"] .cta-content h2, [data-color-scheme="dark"] .cta-content p { color: var(--dk-text); } [data-color-scheme="dark"] .contact-section { background-color: var(--dk-surface); } [data-color-scheme="dark"] .contact-section h2 { color: var(--dk-text); } [data-color-scheme="dark"] .contact-item { background: var(--dk-elevated); border-color: var(--dk-border); box-shadow: none; } [data-color-scheme="dark"] .contact-item h4 { color: var(--dk-orange); } [data-color-scheme="dark"] .contact-item a { color: var(--dk-orange); } /* ============================================================ 3. SEARCH PAGE (search.html) ============================================================ */ [data-color-scheme="dark"] .search-container { background: var(--dk-bg); } /* Type selector buttons */ [data-color-scheme="dark"] .search-type-selector h1 { color: var(--dk-text); } [data-color-scheme="dark"] .type-btn { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; color: var(--dk-text-sec) !important; } [data-color-scheme="dark"] .type-btn:hover { border-color: var(--dk-orange) !important; color: var(--dk-orange) !important; background: var(--dk-orange-dim) !important; transform: translateY(-2px); } [data-color-scheme="dark"] .type-btn.active { background: linear-gradient(135deg, #c87000, #e09020) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 6px 20px rgba(200,112,0,0.35) !important; } /* Sidebar */ [data-color-scheme="dark"] .filters-sidebar { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; box-shadow: 0 2px 16px rgba(0,0,0,0.35) !important; } [data-color-scheme="dark"] .filters-header { border-bottom-color: var(--dk-orange) !important; } [data-color-scheme="dark"] .filters-header h3 { color: var(--dk-orange) !important; } [data-color-scheme="dark"] .clear-btn { color: var(--dk-text-muted) !important; } [data-color-scheme="dark"] .clear-btn:hover { background: var(--dk-red-dim) !important; color: var(--dk-red) !important; } [data-color-scheme="dark"] .filter-item label { color: var(--dk-text-sec) !important; } [data-color-scheme="dark"] .range-sep { color: var(--dk-text-muted) !important; } [data-color-scheme="dark"] .select-arrow { color: var(--dk-text-muted) !important; } /* Form controls inside search */ [data-color-scheme="dark"] .form-control { background: var(--dk-elevated) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; } [data-color-scheme="dark"] .form-control:focus { border-color: var(--dk-orange) !important; box-shadow: 0 0 0 3px var(--dk-orange-dim) !important; background: var(--dk-hover) !important; } /* Apply button */ [data-color-scheme="dark"] .btn-apply { background: linear-gradient(135deg, #c87000, #e09020) !important; box-shadow: 0 4px 16px rgba(200,112,0,0.3) !important; } /* Results panel */ [data-color-scheme="dark"] .results-main { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; box-shadow: 0 2px 16px rgba(0,0,0,0.35) !important; } [data-color-scheme="dark"] .results-header h2 { color: var(--dk-text) !important; } [data-color-scheme="dark"] .results-count { color: var(--dk-text-muted) !important; } /* Cards */ [data-color-scheme="dark"] .search-result-card { background: var(--dk-elevated) !important; border-color: var(--dk-border) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important; } [data-color-scheme="dark"] .search-result-card:hover { box-shadow: 0 10px 28px rgba(0,0,0,0.45) !important; border-color: var(--dk-orange) !important; } [data-color-scheme="dark"] .depot-card:hover { border-color: var(--dk-blue) !important; } [data-color-scheme="dark"] .card-image { background: linear-gradient(135deg, #1a1f2e, #222a3a) !important; } [data-color-scheme="dark"] .depot-img { background: linear-gradient(135deg, #141e2e, #1a2840) !important; } [data-color-scheme="dark"] .img-placeholder { color: var(--dk-text-muted) !important; } [data-color-scheme="dark"] .card-body h3 { color: var(--dk-text) !important; } [data-color-scheme="dark"] .card-body .meta { color: var(--dk-text-muted) !important; } [data-color-scheme="dark"] .card-body .location { color: var(--dk-orange) !important; } [data-color-scheme="dark"] .card-body .price-tag { color: var(--dk-blue) !important; } [data-color-scheme="dark"] .card-body .rating .count { color: var(--dk-text-muted) !important; } /* Loader */ [data-color-scheme="dark"] .loading-state { color: var(--dk-text-muted) !important; } [data-color-scheme="dark"] .spinner { border-color: var(--dk-border) !important; border-top-color: var(--dk-orange) !important; } /* No results */ [data-color-scheme="dark"] .no-results { background: var(--dk-elevated) !important; border-color: var(--dk-border) !important; } [data-color-scheme="dark"] .no-results h3 { color: var(--dk-text-sec) !important; } [data-color-scheme="dark"] .no-results p { color: var(--dk-text-muted) !important; } /* Pagination */ [data-color-scheme="dark"] .pagination-container { border-top-color: var(--dk-border) !important; } [data-color-scheme="dark"] .pagination-container .btn { background: var(--dk-elevated) !important; border-color: var(--dk-border) !important; color: var(--dk-text-sec) !important; } [data-color-scheme="dark"] .pagination-container .btn:hover { border-color: var(--dk-orange) !important; color: var(--dk-orange) !important; background: var(--dk-orange-dim) !important; } [data-color-scheme="dark"] .pagination-container .btn.active { background: linear-gradient(135deg, #c87000, #e09020) !important; border-color: transparent !important; color: #fff !important; } /* Mobile toggle */ [data-color-scheme="dark"] .mobile-filter-toggle { background: linear-gradient(135deg, #c87000, #e09020) !important; } /* ============================================================ 4. VEHICLE DETAIL PAGE (vehicle_detail.html) ============================================================ */ [data-color-scheme="dark"] .vehicle-detail-container { background: var(--dk-bg) !important; } /* Breadcrumb */ [data-color-scheme="dark"] .breadcrumb-nav { color: var(--dk-text-muted) !important; } [data-color-scheme="dark"] .breadcrumb-nav a { color: var(--dk-orange) !important; } [data-color-scheme="dark"] .breadcrumb-nav .sep { color: var(--dk-border) !important; } /* Detail header card */ [data-color-scheme="dark"] .detail-header { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; box-shadow: 0 2px 20px rgba(0,0,0,0.45) !important; } [data-color-scheme="dark"] .vehicle-main-info h1 { color: var(--dk-text) !important; } /* Badge */ [data-color-scheme="dark"] .vehicle-badge { background: var(--dk-orange-dim) !important; color: var(--dk-orange) !important; border-color: rgba(255,159,46,0.3) !important; } [data-color-scheme="dark"] .year-tag { color: var(--dk-orange) !important; background: var(--dk-orange-dim) !important; } /* Depot year-tag uses blue */ [data-color-scheme="dark"] .vehicle-detail-container .year-tag { color: var(--dk-blue) !important; background: var(--dk-blue-dim) !important; } /* Meta chips */ [data-color-scheme="dark"] .type-chip { background: var(--dk-orange-dim) !important; color: var(--dk-orange) !important; border-color: rgba(255,159,46,0.25) !important; } [data-color-scheme="dark"] .muted-chip { background: var(--dk-elevated) !important; color: var(--dk-text-muted) !important; border-color: var(--dk-border) !important; } [data-color-scheme="dark"] .avail-chip { background: var(--dk-green-dim) !important; color: var(--dk-green) !important; border-color: rgba(45,211,111,0.25) !important; } [data-color-scheme="dark"] .unavail-chip { background: var(--dk-red-dim) !important; color: var(--dk-red) !important; border-color: rgba(255,95,95,0.25) !important; } /* Action buttons */ [data-color-scheme="dark"] .btn-fav { background: var(--dk-elevated) !important; color: var(--dk-text-sec) !important; border-color: var(--dk-border) !important; } [data-color-scheme="dark"] .btn-fav:hover { background: var(--dk-orange-dim) !important; border-color: var(--dk-orange) !important; color: var(--dk-orange) !important; } [data-color-scheme="dark"] .btn-fav.fav-active { background: var(--dk-red-dim) !important; border-color: var(--dk-red) !important; color: var(--dk-red) !important; } [data-color-scheme="dark"] .btn-action-secondary { background: var(--dk-elevated) !important; color: var(--dk-text-sec) !important; border-color: var(--dk-border) !important; } [data-color-scheme="dark"] .btn-action-secondary:hover { background: var(--dk-hover) !important; border-color: var(--dk-text-muted) !important; } /* Gallery */ [data-color-scheme="dark"] .main-image { background: var(--dk-elevated) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.45) !important; } [data-color-scheme="dark"] .image-placeholder { background: linear-gradient(135deg, #1a1f2e, #1e2535) !important; } [data-color-scheme="dark"] .placeholder-inner { color: var(--dk-text-muted) !important; } /* Info sections */ [data-color-scheme="dark"] .info-section { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; box-shadow: 0 2px 16px rgba(0,0,0,0.35) !important; } [data-color-scheme="dark"] .info-section h3 { color: var(--dk-text) !important; } [data-color-scheme="dark"] .info-item { background: var(--dk-elevated) !important; border-left-color: var(--dk-orange) !important; } [data-color-scheme="dark"] .info-item .label { color: var(--dk-text-muted) !important; } [data-color-scheme="dark"] .info-item .value { color: var(--dk-text) !important; } [data-color-scheme="dark"] .info-item .missing { color: var(--dk-text-muted) !important; } [data-color-scheme="dark"] .info-item .reg-val { color: var(--dk-text-sec) !important; } [data-color-scheme="dark"] .info-item .available-now { color: var(--dk-green) !important; } [data-color-scheme="dark"] .info-item .price-val { color: var(--dk-blue) !important; } /* Contact card */ [data-color-scheme="dark"] .contact-details h4 { color: var(--dk-text) !important; } [data-color-scheme="dark"] .owner-name { color: var(--dk-text-sec) !important; } /* Description & comment blocks */ [data-color-scheme="dark"] .vehicle-description, [data-color-scheme="dark"] .comments-section, [data-color-scheme="dark"] .add-comment-section { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; box-shadow: 0 2px 16px rgba(0,0,0,0.35) !important; } [data-color-scheme="dark"] .vehicle-description h3, [data-color-scheme="dark"] .comments-section h3, [data-color-scheme="dark"] .add-comment-section h3 { color: var(--dk-text) !important; } [data-color-scheme="dark"] .vehicle-description p { color: var(--dk-text-sec) !important; } [data-color-scheme="dark"] .vehicle-description .no-description { color: var(--dk-text-muted) !important; } /* Comment cards */ [data-color-scheme="dark"] .comment-card { background: var(--dk-elevated) !important; border-left-color: var(--dk-orange) !important; } [data-color-scheme="dark"] .comment-author { color: var(--dk-text) !important; } [data-color-scheme="dark"] .comment-date { color: var(--dk-text-muted) !important; } [data-color-scheme="dark"] .comment-text { color: var(--dk-text-sec) !important; } /* Comment form inputs */ [data-color-scheme="dark"] .form-input { background: var(--dk-elevated) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; } [data-color-scheme="dark"] .form-input:focus { border-color: var(--dk-orange) !important; box-shadow: 0 0 0 3px var(--dk-orange-dim) !important; background: var(--dk-hover) !important; } [data-color-scheme="dark"] .form-group label { color: var(--dk-text-sec) !important; } /* Star picker */ [data-color-scheme="dark"] .star-pick { color: var(--dk-border) !important; } [data-color-scheme="dark"] .star-pick.selected, [data-color-scheme="dark"] .star-pick.hovered { color: var(--dk-orange) !important; } /* Comment message states */ [data-color-scheme="dark"] .comment-msg.success { background: var(--dk-green-dim) !important; color: var(--dk-green) !important; border-color: rgba(45,211,111,0.3) !important; } [data-color-scheme="dark"] .comment-msg.error { background: var(--dk-red-dim) !important; color: var(--dk-red) !important; border-color: rgba(255,95,95,0.3) !important; } [data-color-scheme="dark"] .comment-msg.warn { background: rgba(255,200,50,0.12) !important; color: #ffc832 !important; border-color: rgba(255,200,50,0.3) !important; } /* ============================================================ 5. DEPOT DETAIL PAGE (depot_detail.html) ── Uses same classes as vehicle_detail but blue accent ── ============================================================ */ /* Depot-specific: blue accents override */ [data-color-scheme="dark"] .depot-detail .vehicle-badge, [data-color-scheme="dark"] .depot-detail .year-tag { color: var(--dk-blue) !important; background: var(--dk-blue-dim) !important; border-color: rgba(74,158,255,0.3) !important; } [data-color-scheme="dark"] .depot-detail .info-item { border-left-color: var(--dk-blue) !important; } [data-color-scheme="dark"] .depot-detail .comment-card { border-left-color: var(--dk-blue) !important; } [data-color-scheme="dark"] .depot-detail .form-input:focus { border-color: var(--dk-blue) !important; box-shadow: 0 0 0 3px var(--dk-blue-dim) !important; } [data-color-scheme="dark"] .depot-detail .type-chip { background: var(--dk-blue-dim) !important; color: var(--dk-blue) !important; border-color: rgba(74,158,255,0.25) !important; } /* ============================================================ 6. JOIN PAGES (join.html, join_vehicle.html, join_depot.html) ============================================================ */ [data-color-scheme="dark"] .join-container { background: var(--dk-bg); } [data-color-scheme="dark"] .join-container h1 { color: var(--dk-text); } [data-color-scheme="dark"] .join-container > .container > p { color: var(--dk-text-sec); } [data-color-scheme="dark"] .join-card { background: var(--dk-surface); border-color: var(--dk-border); } [data-color-scheme="dark"] .join-card:hover { border-color: var(--dk-orange); box-shadow: 0 8px 32px var(--dk-orange-dim); } [data-color-scheme="dark"] .join-card h3 { color: var(--dk-text); } [data-color-scheme="dark"] .join-card p { color: var(--dk-text-sec); } /* Form container & form */ [data-color-scheme="dark"] .form-container { background: var(--dk-bg); } [data-color-scheme="dark"] .form-container h1 { color: var(--dk-text); } [data-color-scheme="dark"] .form-subtitle { color: var(--dk-text-sec) !important; } [data-color-scheme="dark"] .form, [data-color-scheme="dark"] .depot-form { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; } [data-color-scheme="dark"] .form-group label { color: var(--dk-text-sec) !important; } [data-color-scheme="dark"] .form-group input, [data-color-scheme="dark"] .form-group select, [data-color-scheme="dark"] .form-group textarea, [data-color-scheme="dark"] .form-group small { background-color: var(--dk-elevated) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; } [data-color-scheme="dark"] .form-group small { color: var(--dk-text-muted) !important; background: transparent !important; } [data-color-scheme="dark"] .form-group input:focus, [data-color-scheme="dark"] .form-group select:focus, [data-color-scheme="dark"] .form-group textarea:focus { border-color: var(--dk-orange) !important; box-shadow: 0 0 0 3px var(--dk-orange-dim) !important; background-color: var(--dk-hover) !important; } [data-color-scheme="dark"] .form-group input::placeholder, [data-color-scheme="dark"] .form-group textarea::placeholder { color: var(--dk-text-muted) !important; } /* Image preview area */ [data-color-scheme="dark"] .image-preview { border-color: var(--dk-border) !important; background: var(--dk-elevated) !important; } [data-color-scheme="dark"] .image-preview:hover { border-color: var(--dk-orange) !important; background: var(--dk-orange-dim) !important; } [data-color-scheme="dark"] .preview-text { color: var(--dk-text-muted) !important; } [data-color-scheme="dark"] .file-info { color: var(--dk-text-muted) !important; } /* Document upload inputs */ [data-color-scheme="dark"] .doc-file-input { background-color: var(--dk-elevated) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; } [data-color-scheme="dark"] .doc-file-input:focus { border-color: var(--dk-orange) !important; box-shadow: 0 0 0 3px var(--dk-orange-dim) !important; } [data-color-scheme="dark"] .doc-file-input.is-filled { border-color: var(--dk-green) !important; background-color: var(--dk-green-dim) !important; } [data-color-scheme="dark"] .doc-file-input.is-invalid { border-color: var(--dk-red) !important; background-color: var(--dk-red-dim) !important; box-shadow: 0 0 0 3px rgba(255,95,95,0.18) !important; } [data-color-scheme="dark"] .doc-hint, [data-color-scheme="dark"] .doc-error-msg { color: var(--dk-text-muted) !important; } [data-color-scheme="dark"] .doc-error-msg { color: var(--dk-red) !important; } [data-color-scheme="dark"] .doc-number { background-color: var(--dk-orange) !important; color: #0f1117 !important; } [data-color-scheme="dark"] .documents-title { color: var(--dk-text) !important; } [data-color-scheme="dark"] .documents-subtitle { color: var(--dk-text-muted) !important; } /* Form info box */ [data-color-scheme="dark"] .form-info { background: var(--dk-elevated) !important; border-left-color: var(--dk-orange) !important; } [data-color-scheme="dark"] .form-info h4 { color: var(--dk-orange) !important; } [data-color-scheme="dark"] .form-info p, [data-color-scheme="dark"] .form-info li { color: var(--dk-text-sec) !important; border-bottom-color: var(--dk-border) !important; } /* Alert boxes */ [data-color-scheme="dark"] .alert-success { background: var(--dk-green-dim) !important; color: var(--dk-green) !important; border-color: rgba(45,211,111,0.3) !important; } [data-color-scheme="dark"] .alert-error { background: var(--dk-red-dim) !important; color: var(--dk-red) !important; border-color: rgba(255,95,95,0.3) !important; } /* ============================================================ 7. SHARED COMPONENTS ============================================================ */ /* Buttons — global btn overrides */ [data-color-scheme="dark"] .btn-primary { background-color: var(--dk-orange); color: #0f1117; border-color: var(--dk-orange); } [data-color-scheme="dark"] .btn-primary:hover { background-color: #e08820; box-shadow: 0 4px 16px var(--dk-orange-dim); } [data-color-scheme="dark"] .btn-secondary { background-color: var(--dk-elevated); color: var(--dk-text); border-color: var(--dk-border); } [data-color-scheme="dark"] .btn-secondary:hover { background-color: var(--dk-hover); border-color: var(--dk-orange); } /* Stars */ [data-color-scheme="dark"] .star { color: var(--dk-border) !important; } [data-color-scheme="dark"] .star.filled { color: var(--dk-orange) !important; } [data-color-scheme="dark"] .star-sm { color: var(--dk-border) !important; } [data-color-scheme="dark"] .star-sm.filled { color: var(--dk-orange) !important; } [data-color-scheme="dark"] .rating-score { color: var(--dk-orange) !important; } [data-color-scheme="dark"] .rating-count { color: var(--dk-text-muted) !important; }