:root { --accent: #f24286; } @keyframes spin3 { 0%, 100% { box-shadow: 10px 10px rgba(36, 36, 41, 1), -10px 10px rgba(36, 36, 41, 0.2), -10px -10px rgba(36, 36, 41, 1), 10px -10px rgba(36, 36, 41, 0.2); } 25% { box-shadow: -10px 10px rgba(36, 36, 41, 0.2), -10px -10px rgba(36, 36, 41, 1), 10px -10px rgba(36, 36, 41, 0.2), 10px 10px rgba(36, 36, 41, 1); } 50% { box-shadow: -10px -10px rgba(36, 36, 41, 1), 10px -10px rgba(36, 36, 41, 0.2), 10px 10px rgba(36, 36, 41, 1), -10px 10px rgba(36, 36, 41, 0.2); } 75% { box-shadow: 10px -10px rgba(36, 36, 41, 0.2), 10px 10px rgba(36, 36, 41, 1), -10px 10px rgba(36, 36, 41, 0.2), -10px -10px rgba(36, 36, 41, 1); } } #wpadminbar { top: 0 !important; } #c27-site-wrapper { background-color: #121212 }/* 1. Kill the white master tray */ .beirut-search .tab-content { background: transparent !important; box-shadow: none !important; border: none !important; } /* 2. Paint the boxes dark gray */ .beirut-search .form-group { background-color: #2a2a2a !important; border: 1px solid #444 !important; border-radius: 6px !important; } /* 3. Strip the dark gray box from behind the pink Search Button */ .beirut-search div[class*="col-"]:last-child .form-group, .beirut-search .form-group:has(button) { background: transparent !important; border: none !important; } /* 4. Make inside fields transparent AND push input text inward */ .beirut-search input, .beirut-search .select2-selection { background-color: transparent !important; border: none !important; box-shadow: none !important; color: #ffffff !important; padding-left: 15px !important; /* Pushes the typed text away from the edge */ } /* 5. Force text to pure white AND push labels/dropdown text inward */ .beirut-search label, .beirut-search input::placeholder, .beirut-search .select2-selection__rendered, .beirut-search .select2-selection__placeholder { color: #ffffff !important; opacity: 1 !important; -webkit-text-fill-color: #ffffff !important; padding-left: 5px !important; /* Adds breathing room for the dropdown text */ } /* 6. Make dropdown arrows white */ .beirut-search .select2-selection__arrow { padding-right: 15px !important; /* Pushes the arrow slightly inward */ } .beirut-search .select2-selection__arrow b { border-color: #ffffff transparent transparent transparent !important; } /* 7. MAKE THE DROPDOWN MENUS DARK MODE (With Neon Pink Hover!) */ .select2-container--default .select2-dropdown { background-color: #2a2a2a !important; border: 1px solid #444 !important; } .select2-container--default .select2-results__option { background-color: #2a2a2a !important; color: #ffffff !important; padding: 10px 15px !important; } /* The neon pink hover effect */ .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option:hover { background-color: #ff007f !important; color: #ffffff !important; } /* The tiny search bar inside the dropdown */ .select2-search--dropdown .select2-search__field { background-color: #1a1a1a !important; color: #ffffff !important; border: 1px solid #555 !important; padding-left: 10px !important; } /* --- LISTING CARD DARK MODE --- */ /* --- THE SNIPER CARD FOOTER FIX (CLEANED) --- */ /* 1. Paint the footer dark charcoal and NUKE the ugly partial line */ .listing-details.c27-footer-section, ul.c27-listing-preview-category-list, ul.c27-listing-preview-category-list li { background-color: #121212 !important; background: #121212 !important; border: none !important; border-top: none !important; box-shadow: none !important; } /* 2. Force the "Badaro" text to be bright white */ .c27-listing-preview-category-list a .category-name { color: #ffffff !important; } /* 3. Keep the pink icon background clean */ .c27-listing-preview-category-list a .cat-icon { border: none !important; } /* --- MAGENTA ADD LISTING BUTTON --- */ .c27-main-header .header-button a, header .action-button a, .c27-main-header .call-to-action a { background-color: #e600a0 !important; /* Matches the neon mockup pink */ color: #ffffff !important; border: none !important; border-radius: 6px !important; /* Gives it those clean mockup corners */ font-weight: bold !important; } /* Adds a slight glow effect when someone hovers over it */ .c27-main-header .header-button a:hover, header .action-button a:hover, .c27-main-header .call-to-action a:hover { background-color: #ff1aff !important; box-shadow: 0px 0px 15px rgba(230, 0, 160, 0.4) !important; } /* --- SWAP HEADER BUTTON AND PROFILE ORDER --- */ /* Force the right side of the header to use Flexbox */ .c27-main-header .header-right, header .header-right { display: flex !important; align-items: center !important; } /* Move the Add Listing button to the left (closer to menu) */ .c27-main-header .header-button, header .action-button { order: 1 !important; margin-right: 25px !important; /* Adds breathing room between the button and your profile */ } /* Move the User Profile / Sign-in to the right */ .c27-main-header .user-area, .c27-main-header .user-menu, header .user-area { order: 2 !important; } /* --- ADD LISTING DARK MODE FIX --- */ /* 1. Make the main "Your listing details" title bright white */ h2.case27-primary-text { color: #ffffff !important; } /* 2. Paint the main form wrappers dark charcoal */ .job-manager-form.light-forms .form-section { background-color: #1a1a1a !important; border: 1px solid #333 !important; box-shadow: none !important; } /* 3. Darken the section headers (the box that says "General") */ .job-manager-form.light-forms .form-section .pf-head { background-color: #1a1a1a !important; border-bottom: 1px solid #333 !important; } /* 4. Make the "General" text and icons white */ .job-manager-form.light-forms .form-section .pf-head h5, .job-manager-form.light-forms .form-section .pf-head i { color: #ffffff !important; } /* 5. Make the field labels white (Title, Category, Logo, etc.) */ .job-manager-form.light-forms .form-group .field-head label { color: #ffffff !important; } /* 6. Darken the actual input text boxes and dropdowns */ .job-manager-form.light-forms .input-text, .job-manager-form.light-forms .select2-selection, .job-manager-form.light-forms .wp-editor-container { background-color: #2a2a2a !important; border: 1px solid #444 !important; color: #ffffff !important; } /* 7. Ensure text typed inside the boxes is white and readable */ .job-manager-form.light-forms input, .job-manager-form.light-forms textarea { color: #ffffff !important; } /* 8. Lighten the small helper text under the labels */ .job-manager-form.light-forms .form-group .field-head small { color: #aaaaaa !important; } /* --- ADD LISTING DARK MODE: MAP & PLACEHOLDER FIXES --- */ /* 1. Brighten all placeholder text inside the input boxes */ .job-manager-form.light-forms ::placeholder { color: #aaaaaa !important; opacity: 1 !important; } /* 2. Brighten the map utility links (Lock Pin, Enter Coordinates) */ .job-manager-form.light-forms .location-actions label, .job-manager-form.light-forms .location-actions span, .job-manager-form.light-forms .location-actions i { color: #cccccc !important; } /* Add a slight hover effect to the map utility links so they feel clickable */ .job-manager-form.light-forms .location-actions label:hover, .job-manager-form.light-forms .location-actions span:hover { color: #e600a0 !important; /* Changes to your neon magenta on hover! */ cursor: pointer; } /* 3. Brighten the helper descriptions at the bottom of fields */ .job-manager-form.light-forms .field small.description, .job-manager-form.light-forms small.description { color: #aaaaaa !important; } /* 4. Ensure the "Add Location" button stands out */ .job-manager-form.light-forms input.add-location { color: #ffffff !important; background-color: #333333 !important; border: 1px solid #555 !important; border-radius: 4px !important; } /* --- ADD LISTING DARK MODE: FOOTER BUTTONS FIX --- */ /* 1. Brighten the Preview and Save as Draft text and icons */ .job-manager-form.light-forms .listing-form-submit-btn .button-5, .job-manager-form.light-forms .listing-form-submit-btn .button-5 i { color: #cccccc !important; } /* 2. Add a clean hover effect so they feel clickable */ .job-manager-form.light-forms .listing-form-submit-btn .button-5:hover { color: #ffffff !important; background-color: #333333 !important; border-radius: 4px !important; } .job-manager-form.light-forms .listing-form-submit-btn .button-5:hover i { color: #ffffff !important; } /* --- ADD LISTING DARK MODE: LOGGED OUT MESSAGE FIX --- */ /* --- ADD LISTING DARK MODE: LOGGED OUT TEXT FIX --- */ /* Force the stubborn logged-out message wrappers to be bright grey */ .job-manager-form.light-forms .field.account-sign-in, .job-manager-form.light-forms .fieldset-login_required, .job-manager-form.light-forms .form-section .pf-body p, .job-manager-form.light-forms .form-section .pf-body .field { color: #cccccc !important; } /* 2. Turn the "Sign in" link Neon Magenta */ .job-manager-form.light-forms .form-section .pf-body a { color: #e600a0 !important; font-weight: bold !important; } /* 3. Add a glow effect when hovering over "Sign in" */ .job-manager-form.light-forms .form-section .pf-body a:hover { color: #ff1aff !important; } /* --- SINGLE LISTING: QUICK ACTIONS BRUTE FORCE FIX --- */ /* --- SINGLE LISTING: DARK MODE BANNER & CLEAR FONT FIX --- */ /* 1. Turn the menu bar dark */ .profile-header { background-color: #151515 !important; border-bottom: 1px solid #222222 !important; } /* 2. Force the menu text to be bright white, bolder, and clear */ .profile-header .profile-menu li a { color: #ffffff !important; font-weight: 600 !important; /* Makes the font thicker and easier to read */ font-size: 16px !important; /* Bumps up the size slightly */ opacity: 0.7; /* Makes non-selected tabs slightly dimmer */ letter-spacing: 0.5px; } /* 3. Make the active tab (Beirut Unfiltered Spot) pop at 100% brightness */ .profile-header .profile-menu li.active a, .profile-header .profile-menu li a:hover { color: #ffffff !important; opacity: 1 !important; } /* --- SINGLE LISTING: QUICK ACTIONS EXACT FIX --- */ /* 1. Make text and icons white */ .ml-track-btn a, .ml-track-btn a i, .ml-track-btn a span { color: #ffffff !important; } /* 2. Add border to the buttons so they pop against the dark background */ .ml-track-btn a { border: 1px solid #555555 !important; background-color: transparent !important; } /* 3. Add the neon magenta hover effect */ .ml-track-btn a:hover, .ml-track-btn a:hover i, .ml-track-btn a:hover span { color: #e600a0 !important; border-color: #e600a0 !important; } /* --- SINGLE LISTING: TRUE DARK MODE CARDS (EXACT HTML FIX) --- */ /* 1. Kill the white frame and turn the entire card dark */ .content-block { background-color: #1e1e1e !important; border: 1px solid #2a2a2a !important; box-shadow: 0px 5px 15px rgba(0,0,0,0.4) !important; } /* 2. Force the title (About the spot) and icon to Bright White */ .content-block .pf-head .title-style-1 h5, .content-block .pf-head .title-style-1 i { color: #ffffff !important; } /* 3. Darken the separator line under the title */ .content-block .pf-head { border-bottom: 1px solid #333333 !important; } /* 4. Force the paragraph text to Light Grey so it's perfectly readable */ .content-block .pf-body p, .content-block .pf-body { color: #d1d1d1 !important; line-height: 1.7 !important; } /* 5. Fix the bottom strip under the Map just in case it shares the same wrapper */ .content-block .c27-map-directions, .content-block .map-bottom-strip { background-color: #151515 !important; border-top: 1px solid #2a2a2a !important; color: #ffffff !important; } .content-block .c27-map-directions a { color: #ffffff !important; } /* --- SINGLE LISTING: TRUE DARK MODE MAP FIX --- */ /* 1. Darken the main map block wrapper */ .map-block { background-color: #1e1e1e !important; border: 1px solid #2a2a2a !important; box-shadow: 0px 5px 15px rgba(0,0,0,0.4) !important; } /* 2. Force the title (Location) and icon to Bright White */ .map-block .pf-head .title-style-1 h5, .map-block .pf-head .title-style-1 i { color: #ffffff !important; } /* 3. Darken the separator line under the Location title */ .map-block .pf-head { border-bottom: 1px solid #333333 !important; } /* 4. Turn the address bar at the bottom dark */ .map-block .map-block-address { background-color: #151515 !important; border-top: 1px solid #2a2a2a !important; } /* 5. Force the address text to light grey and "Get Directions" link to white */ .map-block .map-block-address p { color: #d1d1d1 !important; } .map-block .map-block-address a { color: #ffffff !important; font-weight: 600 !important; } /* --- SINGLE LISTING: TRUE DARK MODE GALLERY FIX --- */ /* 1. Darken the main gallery block wrapper */ .gallery-carousel-block { background-color: #1e1e1e !important; border: 1px solid #2a2a2a !important; box-shadow: 0px 5px 15px rgba(0,0,0,0.4) !important; } /* 2. Force the title (Gallery) and icon to Bright White */ .gallery-carousel-block .pf-head .title-style-1 h5, .gallery-carousel-block .pf-head .title-style-1 i { color: #ffffff !important; } /* 3. Darken the separator line under the Gallery title */ .gallery-carousel-block .pf-head { border-bottom: 1px solid #333333 !important; }