/* Theme Name: Hello Elementor Child Theme URI: https://apollotec.pt Description: Child theme of Hello Biz for customizations Author: The Elementor Theme Author URI: https://wordpress.org/themes/hello-elementor/ Template: hello-elementor Version: 1.0.0 */ /** * @project The + Imobiliária * @author Apollotec * @version 1.0.0 * @license MIT */ /*------------------------------------------------------------------*\ TABLE OF CONTENTS ----------------- 1. CONFIG & HELPERS - Variables - Functions & Mixins (Sass/Less) - Helper Classes (Utilities) 2. BASE STYLES - Reset/Normalize - Typography Styles - Global Styles (body, html, links) 3. LAYOUT - Grid System / Container - Header - Footer - Navigation - Sidebar - Forms 4. COMPONENTS - Buttons - Cards - Alerts - Modals - Carrousel 5. PAGE-SPECIFIC STYLES - Styles that apply only to a specific page. 6. MEDIA QUERIES (Responsiveness) \*------------------------------------------------------------------*/ /*------------------------------------------------------------------*\ 1. CONFIG & HELPERS \*------------------------------------------------------------------*/ /** * CSS Variables (Custom Properties) for colors, fonts, spacing, etc. */ /** * Helper Classes (Utilities) for small, reusable tasks. * ex: .text-center, .margin-top-large, .hidden */ /*------------------------------------------------------------------*\ 2. BASE STYLES \*------------------------------------------------------------------*/ /** * Reset/Normalize to ensure consistency across browsers. */ /** * Base styles for typography (h1, h2, p, etc.). */ /** * Styles for global elements like , , , etc. */ /*------------------------------------------------------------------*\ 3. LAYOUT \*------------------------------------------------------------------*/ /** * Styles for the main page layout elements. */ /* Freelancer Form */ .custom-job-form .job-manager-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; } .custom-job-form .job-manager-form fieldset label:not(.full-line-checkbox-field label) { width: 100%; } .custom-job-form .job-manager-form fieldset { display: flex; flex-direction: column; gap: 12px; margin: 0px; padding: 0px; border-bottom: none; } .custom-job-form .fieldset-job_title { grid-row: 1; grid-column: 1 / -1; display: flex; flex-direction: column; } .custom-job-form .fieldset-job_type { grid-row: 2; grid-column: 1 / -1; display: flex; flex-direction: column; } .custom-job-form .fieldset-job_location { grid-row: 3; grid-column: 1 / 2; display: flex; flex-direction: column; } .custom-job-form .fieldset-custom_phone { grid-row: 3; grid-column: 2 / 3; display: flex; flex-direction: column; } .custom-job-form .fieldset-job_tags { /* grid-row: 2; grid-column: 1 / -1; display: flex; flex-direction: column; */ display:none !important; } .custom-job-form .fieldset-job_deadline { grid-row: 4; grid-column: 2 / 3; } .custom-job-form .fieldset-job_schedule_listing { grid-row: 4; grid-column: 1 / 2; } .custom-job-form .fieldset-work_start_time { grid-row: 5; grid-column: 1 / 2; } .fieldset-work_end_time { grid-row: 5; grid-column: 2 / 3; } .custom-job-form .fieldset-job_salary { grid-row: 6; grid-column: 1 / 3; display: flex; flex-direction: column; } .fieldset-custom_file_upload { grid-row: 7; grid-column: 1 / 3; } .custom-job-form .fieldset-job_description { grid-row: 8; grid-column: 1 / -1; display: flex; flex-direction: column; } .custom-job-form .fieldset-agreement-checkbox { grid-row: 9; grid-column: 1 / 3; display: flex; } .custom-job-form .full-line-checkbox-field.required-field { align-items: center; display: flex; gap: 10px; } .custom-job-form .fieldset-button { text-align: center; grid-row: 10; grid-column: 1 / 3; } .custom-job-form .fieldset-button [type="submit"] { color: #F04823; background-color: #F04823; border: 1px solid #F04823; color: #fff; width: 332px; font-weight: 700; font-style: Bold; font-size: 20px; line-height: 24px; letter-spacing: 0%; } .custom-job-form .job-manager-form fieldset div.field:not(.full-line-checkbox-field) { width: 100%; } .custom-job-form label small { display: none; } .fieldset-job_schedule_listing .field .description { display: none; } /* fieldset.fieldset-job_title.fieldset-type-text { display: none; } */ .company_logo { display: none; } .job_listing h3 { color: #f04722; } div.job_listings .load_more_jobs { color: #f04722; } div.search_submit [type="submit"] { color: #f04722; border: 1px solid #f04722; } div.search_submit [type="submit"]:hover { background-color: #f04722; border: 1px solid #f04722; color:#fff; } ul.job_listings li.job_listing, ul.job_listings li.no_job_listings_found { border: 1px solid #c2c2c2; } ul.job_listings li.job_listing a:hover { background-color: rgba(240, 71, 34, 0.15); color: #fff; border: 1px solid #f04722; } ul.job_listings li.job_listing:hover h3 { font-weight: 700; color:#000; } .job_listings input[type="text"] { border: solid 1px #b5b5b5; } .job_listings input[type="text"]:hover, .job_listings input[type="text"]:focus, .job_listings input[type="text"]:active { border: solid 1px #f04722; } .job_listings input[type="text"]:focus-visible { outline: none; box-shadow: 0 0 0 1px #f04722; } ul.job_listings li.job_listing a div.location, ul.job_listings li.no_job_listings_found a div.location { color: #000; } .job-manager .job-type, .job-types .job-type, .job_listing .job-type { color: #f04722; } div.job_listings .load_more_jobs:hover { background-color: #e4cdc8; border-bottom: 1px solid #e4cdc8; } .job_filters .showing_jobs { background: #777; border-top: 1px solid #777; } .job_filters .showing_jobs a { color: #fff; } .job_application.application { display: none; } .job_listing .position { display: none; } .add-bookmark-wrapper { display: none; } .job-manager-form.wp-job-manager-bookmarks-form { display: none; } ul.job_listings li.job_listing a { display: flex; } li.job_listing a .meta, ul.job_listings li.no_job_listings_found a .meta { width: 50%; align-items: start; display: flex; flex-direction: column; order: 1; } ul.job_listings li.job_listing a .meta { width: 50%; } ul.job_listings li.job_listing a div.location, ul.job_listings li.no_job_listings_found a div.location { width: 50%; text-align: center; order: 2; } /* Single Job Listing Page */ form.wp-job-manager-bookmarks-form { border: 1px solid #b5b5b5; } .single_job_listing .meta .date-posted::before, .single_job_listing .meta .location::before, .single_job_listing .meta .salary::before, .single_job_listing .meta .application-deadline::before { color: #f04722; } .single_job_listing .meta li { color: #000 } .single_job_listing .meta .job-type { background-color: #f04722; } .single_job_listing .meta li a { color: #000; text-decoration: none; } .single_job_listing .meta li { display: flex; gap: 5px; } .job-details-container .job-details-header h1 { color: #f04722; } ul.job-details-list { padding:0; } .job-details-list li { list-style: none; padding: 5px 0; display: flex; flex-direction: column; } .job-details-content { display: flex; gap: 40px; margin-top: 24px; } .job-details-list { flex: 0 0 260px; border-radius: 8px; padding: 18px 20px; list-style: none; margin: 0; font-size: 1.05rem; color: #333; min-width: 200px; } .job-details-list li { margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid #eaeaea; } .job-details-list li:last-child { margin-bottom: 0; border-bottom: none; } .job_description { flex: 1 1 0%; border-radius: 8px; padding: 18px 24px; font-size: 1.08rem; line-height: 1.7; } .job_description h4 { color: #000; font-weight: 600; } @media (max-width: 900px) { .job-details-content { flex-direction: column; gap: 18px; } .job-details-list, .job_description { width: 100%; flex-direction: row; display: flex; flex-wrap: wrap; } .job-details-list li { list-style: none; padding: 5px 5px; padding-bottom: 5px; display: flex; flex-direction: column; width: 50%; gap: 5px; } .job_description { padding: 0px 25px 24px 5px; } } /*------------------------------------------------------------------*\ 4. COMPONENTS \*------------------------------------------------------------------*/ /** * Styles for reusable UI components. * Each component should be treated as an independent block. */ /* Search */ /* .elementor-shortcode .job_listings form { display: flex; justify-content: center; } */ .custom-job-shortcode form { display: flex; justify-content: center; align-items: center; position: relative; z-index: 999; margin-bottom: -50px; } .custom-job-shortcode #search_keywords { width: 538px; height: 54px; border-radius: 8px; border: 1px solid #B2C1CD; border-radius: 8px 0px 0px 8px; } @media screen and (max-width: 768px) { .custom-job-shortcode #search_keywords { width: 100%; } } .custom-job-shortcode form [type="submit"] { color: #F04823; background-color: #F04823; border: 1px solid #F04823; color: #fff; height: 54px; border-radius: 0px 8px 8px 0px; } .custom-job-shortcode .btn-icon { background-image: url("/wp-content/themes/hello-elementor-child/assets/images/search-icon.png"); background-repeat: no-repeat; background-position: center center; width: 107px; background-size: 24px 24px; } /*------------------------------------------------------------------*\ 5. PAGE-SPECIFIC STYLES \*------------------------------------------------------------------*/ /** * Styles that are applied only to specific pages and do not * fit into reusable components. */ /*------------------------------------------------------------------*\ 6. MEDIA QUERIES (Responsiveness) \*------------------------------------------------------------------*/ /** * Media queries organized from smallest to largest (mobile-first). */ @media only screen and (max-width: 767px) { ul.job_listings li.job_listing a .meta { width: 50%; } ul.job_listings li.job_listing .meta .job-type { font-size: 1.2em; } ul.job_listings li.job_listing .meta li.application-deadline { display: flex; align-items: center; justify-content: center; gap: 3px; } .job-listing-meta.meta { display: flex; flex-wrap: wrap; flex-direction: column; } .single_job_listing .meta .job-type { background-color: #f04722; width: 150px; text-align: center; display: flex; align-items: center; margin-bottom: 10px; } } /* Medium Screens (e.g., Tablets) */ @media (min-width: 768px) { /* Your tablet styles here */ } /* Large Screens (e.g., Desktops) */ @media (min-width: 1024px) { /* Your desktop styles here */ } /* Extra Large Screens (e.g., Larger Desktops) */ @media (min-width: 1200px) { /* Your larger desktop styles here */ }