/* ============================================ DARK THEME OVERRIDES Applied when data-theme="dark" is set on ============================================ */ /* --- Theme Toggle Switch --- */ .theme-toggle { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; padding: 0.4rem 0.8rem; border-radius: 2rem; border: 0.1rem solid rgba(0, 0, 0, 0.15); background: transparent; transition: all 0.3s ease; font-family: 'SF UI Display', sans-serif; font-size: 0.85rem; font-weight: 500; color: #3F3F3F; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .theme-toggle:hover { border-color: #0085FF; background: rgba(0, 133, 255, 0.05); } .theme-toggle__icon { font-size: 1.1rem; line-height: 1; transition: transform 0.3s ease; } .theme-toggle__label { letter-spacing: 0.02em; } /* Dark theme toggle appearance */ [data-theme="dark"] .theme-toggle { border-color: rgba(255, 255, 255, 0.2); color: #E0E0E0; background: rgba(255, 255, 255, 0.05); } [data-theme="dark"] .theme-toggle:hover { border-color: #4DA6FF; background: rgba(77, 166, 255, 0.1); } /* --- Transition for smooth theme switching --- */ html[data-theme] body, html[data-theme] .container, html[data-theme] .mobile_container, html[data-theme] .custom-select-container, html[data-theme] .custom_input, html[data-theme] .custom_input_button, html[data-theme] .modal, html[data-theme] .mobile_modal, html[data-theme] .mobile_modal_content, html[data-theme] .mobile_custom-button, html[data-theme] .mobile_fixed-header, html[data-theme] #loading, html[data-theme] .close, html[data-theme] .modal_content_block, html[data-theme] .custom-select-opener, html[data-theme] .search_filter, html[data-theme] #mobile_files_field, html[data-theme] .mobile_custom-input input, html[data-theme] .mobile_custom-input textarea, html[data-theme] .mobile_modal_filter { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* ============================================ DARK THEME - DESKTOP ============================================ */ /* Body & Container */ [data-theme="dark"] body { background: #4D4D61; } [data-theme="dark"] .container { background: #4D4D61; } /* Loading Screen */ [data-theme="dark"] #loading { background-color: #4D4D61; } /* Header */ [data-theme="dark"] .address_link { color: #C8C8D0; } /* Logo stays blue in both themes - no filter needed */ /* Labels & Text */ [data-theme="dark"] .label { color: #C8C8D0; } /* Custom Input */ [data-theme="dark"] .custom_input { background: #6D768D; color: #B0B0C0; border-color: rgba(255, 255, 255, 0.15); } [data-theme="dark"] .custom_input::placeholder { color: #B0B0C0; } [data-theme="dark"] .form_field.focused:valid .custom_input, [data-theme="dark"] .form_field:focus-within .custom_input, [data-theme="dark"] .files_valid #file_list_wrapper { background-color: #717B92; border-color: #4DA6FF; color: #4DA6FF; } [data-theme="dark"] .form_field.focused:invalid .custom_input { border-color: #FF6B6B; background-color: #8C7575; } /* Custom Select */ [data-theme="dark"] .custom-select-container { background: #6D768D; color: #B0B0C0; border-color: rgba(255, 255, 255, 0.15); } [data-theme="dark"] .custom-select-opener { color: #B0B0C0; background-color: transparent; } [data-theme="dark"] .custom-select-opener::after { background-color: #C8C8D0; } [data-theme="dark"] .custom-select-opener::before { border-left-color: rgba(255, 255, 255, 0.15); } [data-theme="dark"] .custom-select-container.is-open { background-color: #717B92; border-color: #4DA6FF; color: #4DA6FF; } [data-theme="dark"] .custom-select-container.is-open .custom-select-opener::after { background-color: #4DA6FF; } [data-theme="dark"] .custom-select-container.is-open .custom-select-opener { border-bottom-color: #5D7DAD; } [data-theme="dark"] .custom-select-container.is-open .custom-select-opener::before { border-left-color: #5D7DAD; } [data-theme="dark"] .custom-select-panel { color: #C8C8D0; } [data-theme="dark"] .custom-select-panel::-webkit-scrollbar-thumb { background-color: #4DA6FF; } [data-theme="dark"] .custom-select-panel::-webkit-scrollbar-track { background-color: #4D5A77; border-color: #495471; } [data-theme="dark"] .custom-select-option.has-focus { background-color: #586D91; } [data-theme="dark"] .custom-select-option.is-selected { color: #4DA6FF; } [data-theme="dark"] .form_field:focus-within .custom-select-container, [data-theme="dark"] .form_field.focused:valid .custom-select-container { background-color: #4D5A77; border-color: #4DA6FF; color: #4DA6FF; } [data-theme="dark"] .form_field.focused:valid .custom-select-opener, [data-theme="dark"] .form_field:focus-within .custom-select-opener { color: #4DA6FF; } [data-theme="dark"] .form_field.focused:valid .custom-select-opener::before, [data-theme="dark"] .form_field:focus-within .custom-select-opener::before { border-left-color: #5D7DAD; } [data-theme="dark"] .form_field.focused:invalid .custom-select-container { background: #705252; border-color: #FF6B6B; color: #FF6B6B; } [data-theme="dark"] .form_field.focused:invalid .custom-select-opener::before { border-color: #FF6B6B; } [data-theme="dark"] .form_field.focused:invalid .custom-select-opener::after { background-color: #FF6B6B; } [data-theme="dark"] .form_field.focused:invalid .custom-select-opener { border-color: #FF6B6B; } /* Custom Input Button (Ausstattung) */ [data-theme="dark"] .custom_input_button { background: #6D768D; color: #B0B0C0; border-color: rgba(255, 255, 255, 0.15); } [data-theme="dark"] .custom_input_button:hover, [data-theme="dark"] .form_field.focused .custom_input_button { background: #717B92; border-color: #4DA6FF; color: #4DA6FF; } [data-theme="dark"] .custom_input_after::before { border-left-color: rgba(255, 255, 255, 0.15); } [data-theme="dark"] .custom_input_button:hover ~ .custom_input_after::before, [data-theme="dark"] .form_field.focused .custom_input_after::before { border-color: #4DA6FF; } [data-theme="dark"] .custom_input_button:hover ~ .custom_input_after::after, [data-theme="dark"] .form_field.focused .custom_input_after::after { background-color: #4DA6FF; } [data-theme="dark"] .ausstattung_invalid .custom_input_button { border-color: #FF6B6B; background-color: #8C7575; } [data-theme="dark"] .ausstattung_invalid .custom_input_after::before { border-color: #FF6B6B; } [data-theme="dark"] .ausstattung_invalid .custom_input_after::after { background: #FF6B6B; } /* Search Filter */ [data-theme="dark"] .search_filter { background-color: #4D5A77; color: #4DA6FF; } [data-theme="dark"] .focused:invalid .search_filter { background: #705252; color: #FF6B6B; } /* Toggle Switch */ [data-theme="dark"] .toggle { color: rgba(255, 255, 255, 0.3); } [data-theme="dark"] .toggle_checked { color: #3A68B5; } /* Slider */ [data-theme="dark"] .slider { background-color: #3A68B5; } [data-theme="dark"] .slider:before { background-color: #4D4D61; } /* Checkbox */ [data-theme="dark"] .custom_checkbox_container { color: #C8C8D0; } [data-theme="dark"] .custom_checkbox_checkmark { border-color: #4DA6FF; } [data-theme="dark"] .custom_checkbox:checked ~ .custom_checkbox_checkmark { background-color: #4DA6FF; } [data-theme="dark"] .custom_checkbox:checked ~ .custom_ckeckbox_label { color: #4DA6FF; } /* Submit Button */ [data-theme="dark"] .custom_submit { background: #3A68B5; color: #1A1A2E; } [data-theme="dark"] #submit_btn { background: #3A68B5; border-color: #3A68B5; } [data-theme="dark"] #submit_btn:hover { background: #2F5694; } /* File Upload */ [data-theme="dark"] #file_button { color: #1A1A2E; background: #3A68B5; border-color: #3A68B5; } [data-theme="dark"] #file_button:hover { background: #2F5694; color: #3A68B5; } [data-theme="dark"] #file_list::-webkit-scrollbar-thumb { background-color: #4DA6FF; } [data-theme="dark"] #file_list::-webkit-scrollbar-track { background-color: #4D5A77; border-color: #495471; } [data-theme="dark"] .remove_file_btn svg { fill: #4DA6FF; } [data-theme="dark"] .remove_file_btn:hover svg { fill: #FF6B6B; } /* Paper clip icon */ [data-theme="dark"] .paper_clip_icon { filter: invert(0.8); } /* Modal */ [data-theme="dark"] .modal { background-color: #4D4D61; background: rgba(77, 77, 97, 0.98); } [data-theme="dark"] .modal_content h2 { color: #E0E0E0; } [data-theme="dark"] .modal_content > p { color: #B0B0C0; } [data-theme="dark"] .close { background: #495471; border-color: rgba(255, 255, 255, 0.15); color: #C8C8D0; } [data-theme="dark"] .close:hover { color: #FFFFFF; border-color: #4DA6FF; } [data-theme="dark"] .modal_content_block { background: #4D5A77; border-color: #4DA6FF; } [data-theme="dark"] .column h3 { color: #E0E0E0; } /* Car type icons */ [data-theme="dark"] .car_type img, [data-theme="dark"] .mobile_car_type img { filter: brightness(0) invert(0.7); } [data-theme="dark"] .car_type.selected img, [data-theme="dark"] .mobile_car_type.selected img { filter: brightness(0) invert(1); } /* ============================================ DARK THEME - MOBILE ============================================ */ [data-theme="dark"] .mobile_container { background: #4D4D61; } [data-theme="dark"] .mobile_fixed-header { background: linear-gradient(#4D4D61 0%, #4D4D61 87%, transparent 100%); } /* Mobile logo stays blue in both themes - no filter needed */ [data-theme="dark"] .mobile_contacts > a > img { box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.4); } [data-theme="dark"] #mobile_reset { background: #495471; box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .grey_text { color: #7A7A90; } [data-theme="dark"] .mobile_custom-button { background: rgba(77, 166, 255, 0.15); } [data-theme="dark"] .mobile_custom-button.focused { background: #705252; border-color: #FF6B6B; } [data-theme="dark"] .mobile_custom-button.focused .mobile_button-name { color: #FF6B6B; } [data-theme="dark"] .mobile_custom-button.valid { background: rgba(77, 166, 255, 0.15); } [data-theme="dark"] .mobile_custom-button.valid .mobile_button-name { color: #4DA6FF; } [data-theme="dark"] .mobile_button-name { color: #4DA6FF; } [data-theme="dark"] .mobile_button-value { color: #B0B0C0; } [data-theme="dark"] .mobile_button-value.filled { color: #E0E0E0; } /* Mobile Input */ [data-theme="dark"] .mobile_custom-input .label { color: #4DA6FF; } [data-theme="dark"] .mobile_custom-input input, [data-theme="dark"] .mobile_custom-input textarea { background: rgba(77, 166, 255, 0.15); color: #E0E0E0; } [data-theme="dark"] .mobile_custom-input input::placeholder { color: #B0B0C0; } [data-theme="dark"] .mobile_custom-input input:focus, [data-theme="dark"] .mobile_custom-input textarea:focus { border-color: #4DA6FF; } [data-theme="dark"] .mobile_custom-input input:focus, [data-theme="dark"] .mobile_custom-input textarea:focus, [data-theme="dark"] .mobile_custom-input input:not(:placeholder-shown), [data-theme="dark"] .mobile_custom-input textarea:not(:placeholder-shown) { background: rgba(77, 166, 255, 0.2); } [data-theme="dark"] .mobile_custom-input input:focus + .label, [data-theme="dark"] .mobile_custom-input textarea:focus + .label, [data-theme="dark"] .mobile_custom-input input:not(:placeholder-shown) + .label, [data-theme="dark"] .mobile_custom-input textarea:not(:placeholder-shown) + .label { color: #4DA6FF; } [data-theme="dark"] .mobile_custom-input input.focused:invalid { background: #705252; border-color: #FF6B6B; } [data-theme="dark"] .mobile_custom-input input.focused:invalid + .label { color: #FF6B6B; } /* Mobile Files */ [data-theme="dark"] #mobile_files_field { background: rgba(77, 166, 255, 0.15); color: #B0B0C0; } [data-theme="dark"] #mobile_file_list .mobile_file_list_item { color: #4DA6FF; } /* Mobile Toggle */ [data-theme="dark"] .mobile_toggle { color: rgba(255, 255, 255, 0.3); } [data-theme="dark"] .mobile_toggle_checked { color: #3A68B5; } [data-theme="dark"] .mobile_slider { background: rgba(58, 104, 181, 0.8); } [data-theme="dark"] .mobile_slider:before { background-color: #4D4D61; } /* Mobile Header */ [data-theme="dark"] .mobile_header { color: #4DA6FF; } /* Mobile Modal */ [data-theme="dark"] .mobile_modal { background-color: rgba(77, 77, 97, 0.85); background: rgba(77, 77, 97, 0.85); } [data-theme="dark"] .mobile_modal_content { background: #495471; box-shadow: 0px 0.2rem 1rem 0.1rem rgba(0, 0, 0, 0.4); } [data-theme="dark"] .mobile_modal_filter { border-bottom-color: #7A7A90; color: #E0E0E0; background: transparent; } [data-theme="dark"] .mobile_modal_filter:focus { border-color: #4DA6FF; } [data-theme="dark"] .mobile_modal_filter::placeholder { color: #B0B0C0; } [data-theme="dark"] .mobile_alphabet_letter .mobile_letter { color: #4DA6FF; } [data-theme="dark"] .mobile_alphabet_letter hr, [data-theme="dark"] .mobile_modal_name hr { border-bottom-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .mobile_modal_name h3 { color: #4DA6FF; } [data-theme="dark"] .mobile_radio_variant label { color: rgba(255, 255, 255, 0.6); } [data-theme="dark"] .mobile_radio_variant input:checked + label { color: #4DA6FF; } [data-theme="dark"] .mobile_custom_checkbox { background: rgba(77, 166, 255, 0.15); } [data-theme="dark"] .mobile_custom_checkbox::after { background: rgba(77, 166, 255, 0.5); } [data-theme="dark"] .mobile_modal_buttons button, [data-theme="dark"] .mobile_modal_buttons input { color: #4DA6FF; } [data-theme="dark"] .mobile_info { color: #7A7A90; } [data-theme="dark"] #mobile_submit { background: #4DA6FF; color: #1A1A2E; } [data-theme="dark"] #mobile_scroll-info { background: #4DA6FF; color: #1A1A2E; } /* Ausstattung list mobile */ [data-theme="dark"] .mobile_aussttatung_list { background: rgba(77, 166, 255, 0.15); } [data-theme="dark"] .mobile_aussttatung_list li label { color: #E0E0E0; background: rgba(77, 166, 255, 0.2); } [data-theme="dark"] .mobile_aussttatung_button-name, [data-theme="dark"] .mobile_ausstattung_field .mobile_aussttatung_button-name { color: #4DA6FF; } /* Mobile reset button */ [data-theme="dark"] #mobile_reset_btn { color: #FF7061; }