WordPress.org
Get WordPress

Making WordPress.org

Changeset 14757


Ignore:
Timestamp:
03/26/2026 03:58:45 AM (2 days ago)
Author:
dd32
Message:

Jobs Theme: Redesign jobs.wordpress.net.

Props annezazu, Claude.

Closes ​https://github.com/WordPress/wordpress.org/pull/575.

Location:
sites/trunk
Files:
1 added
22 deleted
18 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/environments/jobs/bin/after-start.sh

    r14753 r14757  
    1717$WP wp theme activate jobswp
    1818
     19# Remove default widgets to match production (sidebar only has the hardcoded Position Types list).
     20echo "Clearing default sidebar widgets..."
     21$WP wp widget reset sidebar-1 > /dev/null 2>&1 || true
     22
    1923# Create pages that exist on jobs.wordpress.net (if they don't already exist).
    2024echo "Creating pages..."
    21 $WP wp post create --post_type=page --post_status=publish --post_title='Post a Job' --post_name='post-a-job' --porcelain > /dev/null 2>&1 && echo "  Created page: /post-a-job/" || true
    22 $WP wp post create --post_type=page --post_status=publish --post_title='Remove a Job' --post_name='remove-a-job' --porcelain > /dev/null 2>&1 && echo "  Created page: /remove-a-job/" || true
     25create_page_if_missing() {
     26    local slug="$1"
     27    local title="$2"
     28    local content="${3:-}"
     29    EXISTING=$($WP wp post list --post_type=page --name="$slug" --format=count 2>/dev/null)
     30    if [ "$EXISTING" -gt 0 ] 2>/dev/null; then
     31        echo "  Page /$slug/ already exists, skipping..."
     32    else
     33        if [ -n "$content" ]; then
     34            $WP wp post create --post_type=page --post_status=publish --post_author=1 --post_title="$title" --post_name="$slug" --post_content="$content" --porcelain > /dev/null 2>&1 && echo "  Created page: /$slug/" || true
     35        else
     36            $WP wp post create --post_type=page --post_status=publish --post_author=1 --post_title="$title" --post_name="$slug" --porcelain > /dev/null 2>&1 && echo "  Created page: /$slug/" || true
     37        fi
     38    fi
     39}
     40create_page_if_missing 'post-a-job' 'Post a Job'
     41create_page_if_missing 'remove-a-job' 'Remove a Job'
     42create_page_if_missing 'faq' 'FAQ' '<h2>General</h2><dl><dt>What is this site?</dt><dd>This is a job board for WordPress-related jobs. Anyone can post a job opening or browse available positions.</dd><dt>How long do job postings stay up?</dt><dd>Job postings remain active for 21 days from the date of approval, after which they are automatically removed.</dd><dt>How much does it cost to post a job?</dt><dd>Posting a job is completely free.</dd></dl><h2>For Employers</h2><dl><dt>What kinds of jobs can I post?</dt><dd>Any job that is directly related to WordPress. This includes development, design, support, writing, translation, and more.</dd><dt>What is NOT acceptable for a job posting?</dt><dd>Jobs that are not related to WordPress, jobs that require payment from applicants, and jobs offering illegally low compensation are not acceptable.</dd><dt>How do I remove my job posting?</dt><dd>When you submit a job, you receive a job token. Use that token on the Remove a Job page to remove your listing at any time.</dd></dl>'
    2343
    2444# Create job categories.

  • sites/trunk/jobs.wordpress.net/public_html/wp-content/plugins/jobswp/jobswp-template.php

    r12823 r14757  
    101101    $link .= " <span class='posts-count'>($orig_jobscnt)</span> $after";
    102102    $output .= $link;
    103     $output .= '<div class="grid_2 omega jobs-count">';
    104 
    105     $output .= '<a href="' . $feed_link . '"><div class="dashicons dashicons-rss"></div></a><span>' . $jobscnt . '</span></div>
     103    $output .= '<div class="jobs-count">';
     104
     105    $output .= '<a href="' . $feed_link . '">RSS</a> <span>' . $jobscnt . '</span></div>
    106106        </div>
    107         <div class="clear"></div>
    108107        <div class="row job-list-col-labels">
    109             <div class="job-date grid_2 alpha">Date Posted</div>
    110             <div class="job-title grid_4">Job Title</div>
    111             <div class="job-type grid_1 alpha omega">Job Type</div>
    112             <div class="job-location grid_2 omega">Location</div>
    113             <div class="clear"></div>
     108            <div class="job-date">Date Posted</div>
     109            <div class="job-title">Job Title</div>
     110            <div class="job-type">Job Type</div>
     111            <div class="job-location">Location</div>
    114112        </div>';
    115113

  • sites/trunk/jobs.wordpress.net/public_html/wp-content/themes/jobswp/404.php

    r88 r14757  
    88get_header(); ?>
    99
    10 <?php get_sidebar(); ?>
     10    <main>
     11        <section class="no-results not-found" style="text-align:center; padding: 80px 20px;">
     12            <header class="page-header">
     13                <h1 class="page-title"><?php esc_html_e( 'Oops! That page can&rsquo;t be found.', 'jobswp' ); ?></h1>
     14            </header>
    1115
    12     <div id="primary" class="content-area grid_9">
    13         <main id="main" class="site-main" role="main">
    14 
    15             <section class="error-404 not-found">
    16                 <header class="page-header">
    17                     <h1 class="page-title"><?php _e( 'Oops! That page can&rsquo;t be found.', 'jobswp' ); ?></h1>
    18                 </header><!-- .page-header -->
    19 
    20                 <div class="page-content">
    21                     <p><?php _e( 'It looks like nothing was found at this location. Maybe try using the search form above?', 'jobswp' ); ?></p>
    22                 </div><!-- .page-content -->
    23             </section><!-- .error-404 -->
    24 
    25         </main><!-- #main -->
    26     </div><!-- #primary -->
     16            <div class="page-content">
     17                <p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try a search?', 'jobswp' ); ?></p>
     18                <div style="max-width:400px; margin: 20px auto;">
     19                    <?php get_search_form(); ?>
     20                </div>
     21            </div>
     22        </section>
     23    </main>
    2724
    2825<?php get_footer(); ?>

  • sites/trunk/jobs.wordpress.net/public_html/wp-content/themes/jobswp/content-category.php

    r88 r14757  
    88
    99    jobswp_archive_header(
    10         '<div class="job-list-head grid_7 alpha"><h2 class="job-cat-item job-cat-item-' . esc_attr( $category->slug ) . '">',
     10        '<div class="job-list-head"><h2 class="job-cat-item job-cat-item-' . esc_attr( $category->slug ) . '">',
    1111        '</h2></div>',
    1212        $category->count,

  • sites/trunk/jobs.wordpress.net/public_html/wp-content/themes/jobswp/content-home.php

    r8950 r14757  
    11<?php
    2 global $category;
     2/**
     3 * Homepage template — hero, filters, and job cards grid.
     4 *
     5 * @package jobswp
     6 */
    37
    48$job_categories = Jobs_Dot_WP::get_job_categories();
    59
    6 if ( $job_categories ) :
     10// Collect all published jobs across categories.
     11$all_jobs       = array();
     12$category_map   = array(); // job ID => category slug
     13$total_jobs     = 0;
     14$remote_count   = 0;
     15$categories_with_jobs = 0;
    716
    8 // Groups jobs according to job category.
    9 foreach ( $job_categories as $i => $category ) {
    10     $job_category_jobs[ $category->slug ] = Jobs_Dot_WP::get_jobs_for_category( $category );
    11     $latest_post = $job_category_jobs[ $category->slug ][0];
    12     // Add key for sorting.
    13     $job_categories[ $i ]->latest_post_date = $latest_post ? $latest_post->post_date : '0';
     17if ( $job_categories ) {
     18    foreach ( $job_categories as $job_cat ) {
     19        $jobs = Jobs_Dot_WP::get_jobs_for_category( $job_cat );
     20        if ( ! empty( $jobs ) ) {
     21            $categories_with_jobs++;
     22            foreach ( $jobs as $job ) {
     23                if ( ! isset( $category_map[ $job->ID ] ) ) {
     24                    $all_jobs[]               = $job;
     25                    $category_map[ $job->ID ] = $job_cat->slug;
     26                    $total_jobs++;
     27
     28                    $location = get_post_meta( $job->ID, 'location', true );
     29                    if ( empty( $location ) || 'N/A' === $location || stripos( $location, 'remote' ) !== false || stripos( $location, 'anywhere' ) !== false ) {
     30                        $remote_count++;
     31                    }
     32                }
     33            }
     34        }
     35    }
    1436}
    1537
    16 // Sort job categories according to recency of latest post.
    17 $job_categories = wp_list_sort( $job_categories, [ 'latest_post_date' => 'DESC', 'name' => 'ASC' ] );
     38$remote_pct = $total_jobs > 0 ? round( ( $remote_count / $total_jobs ) * 100 ) : 0;
     39?>
    1840
    19 // Display the categories and their jobs.
    20 foreach ( $job_categories as $category ) {
    21     $posts = $job_category_jobs[ $category->slug ];
     41<!-- Hero Section -->
     42<section class="hero">
     43    <div class="hero__inner">
     44        <h1>
     45            <?php
     46            printf(
     47                /* translators: %s: highlighted word "Opportunity" */
     48                esc_html__( 'Find Your Next WordPress %s', 'jobswp' ),
     49                '<span class="hero__highlight">' . esc_html__( 'Opportunity', 'jobswp' ) . '</span>'
     50            );
     51            ?>
     52        </h1>
     53        <p><?php esc_html_e( 'Browse open positions across the WordPress ecosystem — from development to design, support to community.', 'jobswp' ); ?></p>
     54        <div class="hero__actions">
     55            <a href="#jobs" class="btn btn-primary"><?php esc_html_e( 'Browse Jobs', 'jobswp' ); ?></a>
     56            <a href="<?php echo esc_url( home_url( '/post-a-job/' ) ); ?>" class="btn btn-outline"><?php esc_html_e( 'Post a Job', 'jobswp' ); ?></a>
     57        </div>
     58        <div class="hero__stats">
     59            <div class="hero__stat">
     60                <span class="hero__stat-number"><?php echo esc_html( $total_jobs ); ?></span>
     61                <span class="hero__stat-label"><?php esc_html_e( 'Open Positions', 'jobswp' ); ?></span>
     62            </div>
     63            <div class="hero__stat">
     64                <span class="hero__stat-number"><?php echo esc_html( $categories_with_jobs ); ?></span>
     65                <span class="hero__stat-label"><?php esc_html_e( 'Categories', 'jobswp' ); ?></span>
     66            </div>
     67            <div class="hero__stat">
     68                <span class="hero__stat-number"><?php echo esc_html( $remote_pct . '%' ); ?></span>
     69                <span class="hero__stat-label"><?php esc_html_e( 'Remote Friendly', 'jobswp' ); ?></span>
     70            </div>
     71        </div>
     72    </div>
     73</section>
    2274
    23     //Display the name of the category, whether there are jobs or not
    24     echo '<div class="jobs-group">';
     75<!-- Filter Pills -->
     76<section class="filters" id="jobs">
     77    <p class="filters__label"><?php esc_html_e( 'Filter by category', 'jobswp' ); ?></p>
     78    <div class="filters__pills">
     79        <button class="filter-pill active" data-category="all"><?php esc_html_e( 'All', 'jobswp' ); ?></button>
     80        <?php if ( $job_categories ) : ?>
     81            <?php foreach ( $job_categories as $job_cat ) : ?>
     82                <button class="filter-pill" data-category="<?php echo esc_attr( $job_cat->slug ); ?>"><?php echo esc_html( $job_cat->name ); ?></button>
     83            <?php endforeach; ?>
     84        <?php endif; ?>
     85    </div>
     86</section>
    2587
    26     jobswp_archive_header(
    27         '<div class="job-list-head grid_7 alpha"><h2 class="job-cat-item job-cat-item-' . esc_attr( $category->slug ) . '">',
    28         '</h2></div>',
    29         $category->count,
    30         $category
    31     );
     88<!-- Job Cards Grid -->
     89<section class="jobs-section">
     90    <div class="jobs-grid">
     91        <?php if ( ! empty( $all_jobs ) ) : ?>
     92            <?php foreach ( $all_jobs as $job ) : ?>
     93                <?php
     94                $cat_slug = isset( $category_map[ $job->ID ] ) ? $category_map[ $job->ID ] : '';
     95                $cat_term = get_term_by( 'slug', $cat_slug, 'job_category' );
     96                $cat_name = $cat_term ? $cat_term->name : '';
     97                $company  = get_post_meta( $job->ID, 'company', true );
     98                $location = get_post_meta( $job->ID, 'location', true );
     99                $jobtype  = jobswp_get_job_meta( $job->ID, 'jobtype' );
    32100
    33     get_template_part( 'content', 'list' );
     101                $is_remote        = empty( $location ) || 'N/A' === $location || stripos( $location, 'remote' ) !== false || stripos( $location, 'anywhere' ) !== false;
     102                $location_display = $is_remote ? __( 'Remote', 'jobswp' ) : $location;
     103                $location_icon    = $is_remote ? '&#127758;' : '&#128205;';
    34104
    35     echo "</div>\n";
    36 }
    37 
    38 else : // Else no job categories defined.
    39 
    40     echo '<div class="jobs-group">';
    41     echo '<div class="job-list-head grid_7 alpha"><h2 class="job-cat-item">' . __( 'No job categories defined.', 'jobswp' ) . '</h2></div>';
    42     echo "</div>\n";
    43 
    44 endif;
     105                $type_icon = '&#128188;';
     106                if ( 'Contract' === $jobtype || 'Project' === $jobtype ) {
     107                    $type_icon = '&#128196;';
     108                } elseif ( 'Part Time' === $jobtype ) {
     109                    $type_icon = '&#9201;';
     110                }
     111                ?>
     112                <a href="<?php echo esc_url( get_permalink( $job->ID ) ); ?>" class="job-card" data-category="<?php echo esc_attr( $cat_slug ); ?>">
     113                    <?php if ( $cat_name ) : ?>
     114                        <span class="job-card__badge"><?php echo esc_html( $cat_name ); ?></span>
     115                    <?php endif; ?>
     116                    <h2 class="job-card__title"><?php echo esc_html( get_the_title( $job->ID ) ); ?></h2>
     117                    <?php if ( $company ) : ?>
     118                        <p class="job-card__company"><?php echo esc_html( $company ); ?></p>
     119                    <?php endif; ?>
     120                    <div class="job-card__meta">
     121                        <span><?php echo wp_kses( $location_icon, array() ) . ' ' . esc_html( $location_display ); ?></span>
     122                        <?php if ( $jobtype && 'N/A' !== $jobtype ) : ?>
     123                            <span><?php echo wp_kses( $type_icon, array() ) . ' ' . esc_html( $jobtype ); ?></span>
     124                        <?php endif; ?>
     125                    </div>
     126                    <p class="job-card__date">
     127                        <?php
     128                        printf(
     129                            /* translators: %s: date the job was posted */
     130                            esc_html__( 'Posted %s', 'jobswp' ),
     131                            esc_html( get_the_date( 'F j, Y', $job->ID ) )
     132                        );
     133                        ?>
     134                    </p>
     135                </a>
     136            <?php endforeach; ?>
     137        <?php else : ?>
     138            <div class="jobs-empty">
     139                <p>
     140                    <?php
     141                    printf(
     142                        /* translators: %s: URL to post a job */
     143                        wp_kses_post( __( 'No jobs are currently posted. Would you like to <a href="%s">post a job</a>?', 'jobswp' ) ),
     144                        esc_url( home_url( '/post-a-job/' ) )
     145                    );
     146                    ?>
     147                </p>
     148            </div>
     149        <?php endif; ?>
     150    </div>
     151</section>

  • sites/trunk/jobs.wordpress.net/public_html/wp-content/themes/jobswp/content-list.php

    r88 r14757  
    99            echo '<div class="row row-'. $evenodd . '">';
    1010
    11             echo '<div class="job-date grid_2 alpha">' . get_the_date( 'M j' ) . '</div>';
    12             echo '<div class="job-title grid_4">';
     11            echo '<div class="job-date">' . get_the_date( 'M j' ) . '</div>';
     12            echo '<div class="job-title">';
    1313            echo '<a href="'; the_permalink(); echo '" rel="bookmark">'; the_title(); echo '</a></div>';
    14             echo '<div class="job-type grid_1 alpha omega">';
     14            echo '<div class="job-type">';
    1515            echo jobswp_get_job_meta( get_the_ID(), 'jobtype' );
    1616            echo '</div>';
    17             echo '<div class="job-location grid_2 omega">';
     17            echo '<div class="job-location">';
    1818            echo jobswp_get_job_meta( get_the_ID(), 'location' );
    19             echo '</div>';
     19            echo '</div>';
    2020
    2121            echo '<div class="clear"></div>';
    … …  
    2626    else {
    2727        echo '<div class="row row-1">';
    28         echo "<div class='no-job grid_9'>";
     28        echo "<div class='no-job'>";
    2929        echo sprintf(
    3030            __( 'There are no jobs in this category. If you\'re hiring, you can <a href="%s">post a new job</a>.', 'jobswp' ),
    … …  
    3535    }
    3636    ?>
    37     </ul>
    3837
    39     <?php   
     38    <?php
    4039        if ( is_front_page() ) {
    4140            global $category;
    4241            echo '<p class="all-job-categories">';
    43             if ( ! $category )
    44                 $category = array_pop( get_the_terms( get_the_ID(), 'job_category') );
     42        if ( ! $category ) {
     43            $terms    = get_the_terms( get_the_ID(), 'job_category' );
     44            $category = $terms ? array_pop( $terms ) : null;
     45        }
    4546
    4647            $link = '';

  • sites/trunk/jobs.wordpress.net/public_html/wp-content/themes/jobswp/content-page.php

    r88 r14757  
    2323        ?>
    2424
    25         <?php edit_post_link( __( 'Edit', 'jobswp' ), '<footer class="entry-meta grid_9"><span class="edit-link">', '</span></footer>' ); ?>
     25        <?php edit_post_link( __( 'Edit', 'jobswp' ), '<footer class="entry-meta"><span class="edit-link">', '</span></footer>' ); ?>
    2626    </div><!-- .entry-content -->
    2727</article><!-- #post-## -->

  • sites/trunk/jobs.wordpress.net/public_html/wp-content/themes/jobswp/content-post-job.php

    r12821 r14757  
    2525<form class="post-job" method="post" action="">
    2626
    27 <div class="post-job-contact-info grid_5 alpha omega">
     27<div class="post-job-contact-info">
    2828    <h3 class="post-field-section-header"><?php _e( 'Job Poster Contact Information', 'jobswp' ); ?></h3>
    2929    <div class="post-field-section-subheader"><?php _e( '(this information is not publicly displayed)', 'jobswp' ); ?></div>
    … …  
    3636</div>
    3737
    38 <div class="post-job-company-info grid_4 alpha omega">
     38<div class="post-job-company-info">
    3939
    4040    <h3 class="post-field-section-header"><?php _e( 'Company Information', 'jobswp' ); ?></h3>
    … …  
    6969    <h3 class="post-field-section-header"><?php _e( 'Job Details', 'jobswp' ); ?></h3>
    7070
    71     <div class="grid_5 alpha omega">
     71    <div class="post-job-half">
    7272
    7373        <?php jobswp_text_field( 'job_title', __( 'Job Title', 'jobswp' ), true ); ?>
    … …  
    7777    </div>
    7878
    79     <div class="grid_3 alpha omega">
     79    <div class="post-job-half">
    8080
    8181        <div class="post-job-input">
    … …  
    102102    <div class="clear"></div>
    103103
    104     <div class="grid_9 alpha omega">
     104    <div class="post-job-full">
    105105
    106106        <div class="post-job-input">
    … …  
    142142        $button_label = __( 'Submit Job', 'jobswp' );
    143143    } ?>
    144     <input class="submit-job" id="submit-job" type="submit" name="submitjob" value="<?php echo esc_attr( $button_label ); ?>" />
     144    <input class="btn btn-primary submit-job" id="submit-job" type="submit" name="submitjob" value="<?php echo esc_attr( $button_label ); ?>" />
    145145</div>
    146146

  • sites/trunk/jobs.wordpress.net/public_html/wp-content/themes/jobswp/content-search.php

    r9457 r14757  
    33    <?php
    44    jobswp_archive_header(
    5         '<div class="job-list-head grid_7 alpha"><h2 class="search-header">' .
     5        '<div class="job-list-head"><h2 class="search-header">' .
    66        sprintf( __( 'Search Results for: %s', 'jobswp' ), '<span>' . get_search_query() . '</span>' ),
    77        '</h2></div>',

  • sites/trunk/jobs.wordpress.net/public_html/wp-content/themes/jobswp/content-single.php

    r10852 r14757  
    11<?php
    22/**
     3 * Template for displaying a single job post.
     4 *
    35 * @package jobswp
    46 */
     7
     8$fields = array(
     9    'company'    => __( 'Company', 'jobswp' ),
     10    'jobtype'    => __( 'Job Type', 'jobswp' ),
     11    'location'   => __( 'Location', 'jobswp' ),
     12    'budget'     => __( 'Budget', 'jobswp' ),
     13    'howtoapply' => __( 'How to Apply', 'jobswp' ),
     14);
    515?>
    616
    7 <div class="entry-article">
     17<div class="breadcrumb">
     18    <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php esc_html_e( 'Jobs', 'jobswp' ); ?></a>
     19    <span class="separator">/</span>
     20    <?php the_title(); ?>
     21</div>
    822
    9     <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    10     <header class="entry-header">
    11         <h1 class="entry-title"><?php the_title(); ?></h1>
     23<div class="job-detail">
     24    <div class="job-detail__main">
     25        <div class="job-detail__header">
     26            <h1><?php the_title(); ?></h1>
    1227
    13         <div class="entry-meta">
    14             <?php jobswp_posted_on(); ?>
     28            <div class="job-detail__meta">
     29                <?php jobswp_posted_on(); ?>
    1530
    16             <span class="job-categories">
    17                 <?php echo get_the_category_list(); ?>
    18                 <?php
     31                <span class="job-categories">
     32                    <?php
    1933                    $job_cats = get_the_terms( get_the_ID(), 'job_category' );
    2034                    if ( $job_cats && ! is_wp_error( $job_cats ) ) :
    2135                        foreach ( $job_cats as $job_cat ) :
    22                 ?>
    23                     <span class="job-cat-item job-cat-item-<?php echo esc_attr( $job_cat->slug ); ?>"><?php echo esc_html( $job_cat->name ); ?></span>
    24                 <?php
     36                            ?>
     37                            <span class="job-card__badge"><?php echo esc_html( $job_cat->name ); ?></span>
     38                            <?php
    2539                        endforeach;
    2640                    endif;
    27                 ?>
    28             </span>
    29         </div><!-- .entry-meta -->
    30     </header><!-- .entry-header -->
     41                    ?>
     42                </span>
     43            </div>
     44        </div>
    3145
    32     <div class="clear"></div>
     46        <div class="job-detail__body">
     47            <?php the_content(); ?>
     48        </div>
    3349
    34     <div class="entry-main grid_6 alpha">
    35 
    36     <div class="entry-content">
    37         <?php the_content(); ?>
    38         <?php
    39             wp_link_pages( array(
    40                 'before' => '<div class="page-links">' . __( 'Pages:', 'jobswp' ),
    41                 'after'  => '</div>',
    42             ) );
    43         ?>
    44     </div><!-- .entry-content -->
    45 
    46     <footer class="entry-meta grid_6">
    47         <?php
    48             // Don't show edit link when template is used to embed post in a page.
    49             if ( ! is_page() )
     50        <footer>
     51            <?php
     52            if ( ! is_page() ) {
    5053                edit_post_link( __( 'Edit', 'jobswp' ), '<span class="edit-link">', '</span>' );
    51         ?>
    52     </footer><!-- .entry-meta -->
     54            }
     55            ?>
     56        </footer>
    5357    </div>
    5458
    55     <div class="job-meta grid_3 omega">
    56         <?php
    57             $fields = array(
    58                 'company'    => __( 'Company', 'jobswp' ),
    59                 'jobtype'    => __( 'Job Type', 'jobswp' ),
    60                 'location'   => __( 'Location', 'jobswp' ),
    61                 'budget'     => __( 'Budget', 'jobswp' ),
    62                 'howtoapply' => __( 'How to Apply', 'jobswp' ),
    63             );
     59    <aside class="job-sidebar">
     60        <div class="job-sidebar__card">
     61            <h3><?php esc_html_e( 'Job Details', 'jobswp' ); ?></h3>
     62            <?php
    6463            foreach ( $fields as $fname => $flabel ) :
    6564                $val = jobswp_get_job_meta( get_the_ID(), $fname );
    6665                if ( $val ) :
    67         ?>
    68                     <dl class="job-<?php echo $fname; ?>">
    69                         <dt><?php echo $flabel; ?></dt>
    70                         <dd><?php echo $val; ?></dd>
    71                     </dl>
    72         <?php
     66                    ?>
     67                    <div class="job-sidebar__detail">
     68                        <span class="job-sidebar__detail-label"><?php echo esc_html( $flabel ); ?></span>
     69                        <span class="job-sidebar__detail-value"><?php echo wp_kses_post( $val ); ?></span>
     70                    </div>
     71                    <?php
    7372                endif;
    7473            endforeach;
    75         ?>
    76     </div>
    77 
    78     <div class="clear"></div>
    79 
    80     </article><!-- #post-## -->
    81 
     74            ?>
     75        </div>
     76    </aside>
    8277</div>

  • sites/trunk/jobs.wordpress.net/public_html/wp-content/themes/jobswp/footer.php

    r88 r14757  
    22/**
    33 * The template for displaying the footer.
    4  *
    5  * Contains the closing of the #content div and all content after
    64 *
    75 * @package jobswp
    … …  
    97?>
    108
    11     </div><!-- #content -->
    12 </div><!-- #page -->
    13 
    14     <footer id="colophon" class="site-footer" role="contentinfo">
    15         <div class="site-info container">
    16             <?php do_action( 'jobswp_credits' ); ?>
    17 
    18             <?php locate_template( 'wporg-footer.php', true ); ?>
    19         </div><!-- .site-info -->
    20     </footer><!-- #colophon -->
     9    <footer class="site-footer">
     10        <div class="site-footer__inner">
     11            <div class="site-footer__columns">
     12                <div class="site-footer__column">
     13                    <h4><?php esc_html_e( 'About', 'jobswp' ); ?></h4>
     14                    <ul>
     15                        <li><a href="https://wordpress.org/about/"><?php esc_html_e( 'About WordPress', 'jobswp' ); ?></a></li>
     16                        <li><a href="https://wordpress.org/news/"><?php esc_html_e( 'News', 'jobswp' ); ?></a></li>
     17                        <li><a href="https://wordpress.org/hosting/"><?php esc_html_e( 'Hosting', 'jobswp' ); ?></a></li>
     18                        <li><a href="https://wordpress.org/donate/"><?php esc_html_e( 'Donate', 'jobswp' ); ?></a></li>
     19                    </ul>
     20                </div>
     21                <div class="site-footer__column">
     22                    <h4><?php esc_html_e( 'Learn', 'jobswp' ); ?></h4>
     23                    <ul>
     24                        <li><a href="https://learn.wordpress.org/"><?php esc_html_e( 'Learn WordPress', 'jobswp' ); ?></a></li>
     25                        <li><a href="https://developer.wordpress.org/"><?php esc_html_e( 'Developer Resources', 'jobswp' ); ?></a></li>
     26                        <li><a href="https://wordpress.org/documentation/"><?php esc_html_e( 'Documentation', 'jobswp' ); ?></a></li>
     27                        <li><a href="https://wordpress.org/support/"><?php esc_html_e( 'Support Forums', 'jobswp' ); ?></a></li>
     28                    </ul>
     29                </div>
     30                <div class="site-footer__column">
     31                    <h4><?php esc_html_e( 'Community', 'jobswp' ); ?></h4>
     32                    <ul>
     33                        <li><a href="https://make.wordpress.org/"><?php esc_html_e( 'Get Involved', 'jobswp' ); ?></a></li>
     34                        <li><a href="https://central.wordcamp.org/"><?php esc_html_e( 'WordCamp', 'jobswp' ); ?></a></li>
     35                        <li><a href="https://wordpress.tv/"><?php esc_html_e( 'WordPress.TV', 'jobswp' ); ?></a></li>
     36                        <li><a href="https://wordpress.org/showcase/"><?php esc_html_e( 'Showcase', 'jobswp' ); ?></a></li>
     37                    </ul>
     38                </div>
     39                <div class="site-footer__column">
     40                    <h4><?php esc_html_e( 'WordPress Jobs', 'jobswp' ); ?></h4>
     41                    <ul>
     42                        <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php esc_html_e( 'Current Openings', 'jobswp' ); ?></a></li>
     43                        <li><a href="<?php echo esc_url( home_url( '/post-a-job/' ) ); ?>"><?php esc_html_e( 'Post a Job', 'jobswp' ); ?></a></li>
     44                        <li><a href="<?php echo esc_url( home_url( '/faq/' ) ); ?>"><?php esc_html_e( 'FAQ', 'jobswp' ); ?></a></li>
     45                        <li><a href="https://wordpress.org/"><?php esc_html_e( 'WordPress.org', 'jobswp' ); ?></a></li>
     46                    </ul>
     47                </div>
     48            </div>
     49            <div class="site-footer__bottom">
     50                <div class="site-footer__social">
     51                    <a href="https://twitter.com/WordPress" aria-label="<?php esc_attr_e( 'WordPress on X', 'jobswp' ); ?>">X / Twitter</a>
     52                    <a href="https://www.facebook.com/WordPress/" aria-label="<?php esc_attr_e( 'WordPress on Facebook', 'jobswp' ); ?>">Facebook</a>
     53                    <a href="https://www.youtube.com/wordpress" aria-label="<?php esc_attr_e( 'WordPress on YouTube', 'jobswp' ); ?>">YouTube</a>
     54                </div>
     55                <p class="site-footer__tagline"><?php esc_html_e( 'Code is Poetry.', 'jobswp' ); ?></p>
     56            </div>
     57        </div>
     58    </footer>
    2159
    2260<?php wp_footer(); ?>

  • sites/trunk/jobs.wordpress.net/public_html/wp-content/themes/jobswp/functions.php

    r12304 r14757  
    8181
    8282/**
    83  * Registers the CSS stylesheet files.
    84  */
    85 function jobswp_register_styles() {
    86     wp_register_style(
    87         'open-sans',
    88         '//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=latin-ext,latin',
    89         false,
    90         '20130605'
    91     );
    92 
    93     wp_register_style(
    94         'dashicons',
    95         get_template_directory_uri() . '/css/dashicons.css',
    96         false,
    97         filemtime( get_template_directory() . '/css/dashicons.css' )
    98     );
    99 }
    100 add_action( 'wp_enqueue_scripts', 'jobswp_register_styles', 1 );
    101 
    102 /**
    10383 * Enqueue scripts and styles
    10484 */
    10585function jobswp_scripts() {
    106     wp_enqueue_style( '996-normalize', get_template_directory_uri() . '/css/996/normalize.css' );
    107     wp_enqueue_style( '996-base',      get_template_directory_uri() . '/css/996/base.css' );
    108     wp_enqueue_style( '996-grid',      get_template_directory_uri() . '/css/996/grid.css' );
    109     wp_enqueue_style( '996-style',     get_template_directory_uri() . '/css/996/style.css' );
    110     wp_enqueue_style( 'dashicons' );
    111     wp_enqueue_style( 'open-sans' );
    112     wp_enqueue_style( 'jobswp-style', get_stylesheet_uri(), array(), '20221207' );
     86    wp_enqueue_style( 'jobswp-style', get_stylesheet_uri(), array(), '20260326' );
    11387
    114     wp_enqueue_script( 'jobswp-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery'), '20131107', true );
     88    wp_enqueue_script( 'jobswp-main', get_template_directory_uri() . '/js/main.js', array(), '20260326', true );
    11589    wp_enqueue_script( 'jobswp-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );
    116 
    117     if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
    118         wp_enqueue_script( 'comment-reply' );
    119     }
    120 
    121     if ( is_singular() && wp_attachment_is_image() ) {
    122         wp_enqueue_script( 'jobswp-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20120202' );
    123     }
    124 
    125     /* Modernizr disbabled because it causes Safari to whitescreen */
    126 //  wp_enqueue_script( 'modernizr',    get_template_directory_uri() . '/996/modernizr-2.6.2.min.js' );
    127 //  wp_enqueue_script( 'modernizr',    get_template_directory_uri() . '/996/modernizr-2.6.2.js' );
    12890}
    12991add_action( 'wp_enqueue_scripts', 'jobswp_scripts' );
    … …  
    148110 * - search results
    149111 */
    150 function jobswp_noindex() {
     112function jobswp_noindex( $robots ) {
    151113    global $wp_query;
    152114
    … …  
    156118        ( is_tax( 'job_category' ) && 0 === $wp_query->found_posts )
    157119    ) {
    158         wp_no_robots();
     120        $robots['noindex']  = true;
     121        $robots['nofollow'] = true;
    159122    }
     123
     124    return $robots;
    160125}
    161 add_action( 'wp_head', 'jobswp_noindex', 9 );
     126add_filter( 'wp_robots', 'jobswp_noindex' );
    162127
    163128/**
    … …  
    180145
    181146/**
    182  * Implement the Custom Header feature.
    183  */
    184 //require get_template_directory() . '/inc/custom-header.php';
    185 
    186 /**
    187147 * Custom template tags for this theme.
    188148 */
    … …  
    193153 */
    194154require get_template_directory() . '/inc/extras.php';
    195 
    196 /**
    197  * Customizer additions.
    198  */
    199 require get_template_directory() . '/inc/customizer.php';
    200 
    201 /**
    202  * Load Jetpack compatibility file.
    203  */
    204 require get_template_directory() . '/inc/jetpack.php';

  • sites/trunk/jobs.wordpress.net/public_html/wp-content/themes/jobswp/header.php

    r12654 r14757  
    33 * The Header for our theme.
    44 *
    5  * Displays all of the <head> section and everything up till <div id="content">
     5 * Displays all of the <head> section and everything up till <main>
    66 *
    77 * @package jobswp
    … …  
    2929<body <?php body_class(); ?>>
    3030<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-P24PF4B" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    31 <div id="page" class="hfeed site">
    32     <?php do_action( 'before' ); ?>
    33     <header id="masthead" class="site-header" role="banner">
    34     <div class="container">
    35         <div class="site-branding grid_4">
    36             <div id="logo"><a href="https://meta.trac.wordpress.org/"><strong>jobs</strong>.wordpress.net</a></div>
    37         </div>
    3831
    39         <nav id="site-navigation" class="main-navigation grid_8" role="navigation">
    40             <h1 class="menu-toggle"><?php _e( 'Menu', 'jobswp' ); ?></h1>
    41             <div class="screen-reader-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'jobswp' ); ?>"><?php _e( 'Skip to content', 'jobswp' ); ?></a></div>
     32<?php do_action( 'before' ); ?>
    4233
    43             <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    44         </nav><!-- #site-navigation -->
    45     </div>
    46     </header><!-- #masthead -->
    47 
    48     <div id="subhead">
    49         <div class="container">
    50             <div class="grid_3 wporg-link" >
    51                 <a href="https://wordpress.org" title="<?php esc_attr_e( 'Return to WordPress.org', 'jobswp' ); ?>">&laquo; Return to WordPress.org</a>
    52             </div>
    53             <div class="grid_9">
    54                 <?php get_search_form(); ?>
    55             </div>
     34<header class="site-header">
     35    <div class="site-header__inner">
     36        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="site-header__logo">
     37            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.5 122.5" width="36" height="36">
     38                <g fill="#1e1e1e">
     39                    <path d="M8.7 61.3c0 20.4 11.9 38 29.1 46.3L12.6 39.1C10.1 46 8.7 53.5 8.7 61.3z"/>
     40                    <path d="M96.7 58.7c0-6.4-2.3-10.8-4.2-14.2-2.6-4.2-5-7.8-5-12 0-4.7 3.6-9.1 8.6-9.1h.6C86.7 14.3 74.5 8.7 61.3 8.7c-17.7 0-33.2 9.1-42.3 22.8 1.2 0 2.3.1 3.3.1 5.3 0 13.6-.6 13.6-.6 2.7-.2 3.1 3.9.3 4.2 0 0-2.8.3-5.8.5l18.4 54.6 11-33.1-7.9-21.5c-2.7-.2-5.3-.5-5.3-.5-2.7-.2-2.4-4.3.3-4.2 0 0 8.5.6 13.5.6 5.3 0 13.6-.6 13.6-.6 2.7-.2 3.1 3.9.3 4.2 0 0-2.8.3-5.8.5L85.3 90l5.1-17C93 66.5 96.7 62.1 96.7 58.7z"/>
     41                    <path d="M62.2 65.9l-15.2 44.3c4.5 1.3 9.3 2.1 14.3 2.1 5.9 0 11.5-1 16.8-2.8-.1-.2-.3-.5-.4-.7L62.2 65.9z"/>
     42                    <path d="M107.4 36c.4 3.2.7 6.6.7 10.3 0 10.1-1.9 21.5-7.6 35.7l-14.6 42.3c22.3-13 37.3-37.2 37.3-64.9 0-8.4-1.4-16.4-3.8-23.9l-12 .5z"/>
     43                    <path d="M61.3 0C27.4 0 0 27.4 0 61.3c0 33.8 27.4 61.3 61.3 61.3 33.8 0 61.3-27.4 61.3-61.3C122.5 27.4 95.1 0 61.3 0zM61.3 119.7c-32.2 0-58.4-26.2-58.4-58.4S29.1 2.8 61.3 2.8s58.4 26.2 58.4 58.4-26.2 58.5-58.4 58.5z"/>
     44                </g>
     45            </svg>
     46            <?php esc_html_e( 'WordPress Jobs', 'jobswp' ); ?>
     47        </a>
     48        <div class="site-header__right">
     49            <nav class="site-header__nav">
     50                <a href="<?php echo esc_url( home_url( '/' ) ); ?>" <?php echo is_front_page() ? 'class="active"' : ''; ?>><?php esc_html_e( 'Jobs', 'jobswp' ); ?></a>
     51                <a href="<?php echo esc_url( home_url( '/faq/' ) ); ?>"><?php esc_html_e( 'FAQ', 'jobswp' ); ?></a>
     52                <a href="<?php echo esc_url( home_url( '/post-a-job/' ) ); ?>" class="btn btn-primary btn-sm"><?php esc_html_e( 'Post a Job', 'jobswp' ); ?></a>
     53            </nav>
     54            <button class="mobile-menu-toggle" aria-label="<?php esc_attr_e( 'Toggle menu', 'jobswp' ); ?>">
     55                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
     56                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
     57                </svg>
     58            </button>
    5659        </div>
    5760    </div>
    58 
    59     <div id="content" class="site-content container">
     61</header>

  • sites/trunk/jobs.wordpress.net/public_html/wp-content/themes/jobswp/index.php

    r8232 r14757  
    22/**
    33 * The main template file.
    4  *
    5  * This is the most generic template file in a WordPress theme
    6  * and one of the two required files for a theme (the other being style.css).
    7  * It is used to display a page when nothing more specific matches a query.
    8  * E.g., it puts together the home page when no home.php file exists.
    9  * Learn more: https://developer.wordpress.org/themes/basics/template-hierarchy/
    104 *
    115 * @package jobswp
    … …  
    148get_header(); ?>
    159
    16 <?php get_sidebar(); ?>
     10    <main>
    1711
    18     <div id="primary" class="content-area grid_9">
    19         <main id="main" class="site-main" role="main">
     12    <?php if ( is_front_page() ) : ?>
    2013
    21         <?php if ( is_front_page() ) : ?>
     14        <?php get_template_part( 'content', 'home' ); ?>
    2215
    23             <?php get_template_part( 'content', 'home' ); ?>
     16    <?php elseif ( is_tax( 'job_category' ) ) : ?>
    2417
    25         <?php elseif ( is_tax( 'job_category' ) ) : ?>
     18        <div class="site-content has-sidebar">
     19            <?php get_sidebar(); ?>
     20            <div class="content-area">
     21                <?php get_template_part( 'content', 'category' ); ?>
     22            </div>
     23        </div>
    2624
    27             <?php get_template_part( 'content', 'category' ); ?>
     25    <?php elseif ( is_search() ) : ?>
    2826
    29         <?php elseif ( is_search() ) : ?>
     27        <div class="site-content has-sidebar">
     28            <?php get_sidebar(); ?>
     29            <div class="content-area">
     30                <?php get_template_part( 'content', 'search' ); ?>
     31            </div>
     32        </div>
    3033
    31             <?php get_template_part( 'content', 'search' ); ?>
     34    <?php elseif ( have_posts() ) : ?>
    3235
    33         <?php elseif ( have_posts() ) : ?>
     36        <?php
     37        while ( have_posts() ) :
     38            the_post();
    3439
    35             <?php /* Start the Loop */ ?>
    36             <?php while ( have_posts() ) : the_post(); ?>
     40            if ( is_page() ) {
     41                $content_type = 'page';
     42            } elseif ( is_single() ) {
     43                $content_type = 'single';
     44            } else {
     45                $content_type = get_post_format();
     46            }
    3747
    38                 <?php
    39                     /* Include the Post-Format-specific template for the content.
    40                      * If you want to override this in a child theme, then include a file
    41                      * called content-___.php (where ___ is the Post Format name) and that will be used instead.
    42                      */
    43                     if ( is_page() )
    44                         $content_type = 'page';
    45                     elseif ( is_single() )
    46                         $content_type = 'single';
    47                     else
    48                         $content_type = get_post_format();
     48            get_template_part( 'content', $content_type );
     49        endwhile;
     50        ?>
    4951
    50                     get_template_part( 'content', $content_type );
    51                 ?>
     52    <?php else : ?>
    5253
    53             <?php endwhile; ?>
     54        <?php get_template_part( 'no-results', 'index' ); ?>
    5455
    55         <?php else : ?>
     56    <?php endif; ?>
    5657
    57             <?php get_template_part( 'no-results', 'index' ); ?>
    58 
    59         <?php endif; ?>
    60 
    61         </main><!-- #main -->
    62     </div><!-- #primary -->
     58    </main>
    6359
    6460<?php get_footer(); ?>

  • sites/trunk/jobs.wordpress.net/public_html/wp-content/themes/jobswp/page-remove-a-job.php

    r1908 r14757  
    88get_header(); ?>
    99
    10 <?php get_sidebar(); ?>
    11 
    12     <div id="primary" class="content-area grid_9">
    13         <main id="main" class="site-main" role="main">
     10    <main>
    1411
    1512    <?php if ( have_posts() ) : ?>
    … …  
    5855                        <?php do_action( 'jobswp_remove_job_form' ); ?>
    5956
    60                         <input class="submit-job" type="submit" name="submitjob" value="<?php _e( 'Remove job', 'jobswp' ); ?>" />
     57                        <input class="btn btn-primary submit-job" type="submit" name="submitjob" value="<?php esc_attr_e( 'Remove job', 'jobswp' ); ?>" />
    6158
    6259                    </form>
    6360                </div>
    6461
    65                 <?php edit_post_link( __( 'Edit', 'jobswp' ), '<footer class="entry-meta grid_9"><span class="edit-link">', '</span></footer>' ); ?>
     62                <?php edit_post_link( __( 'Edit', 'jobswp' ), '<footer class="entry-meta"><span class="edit-link">', '</span></footer>' ); ?>
    6663            </div><!-- .entry-content -->
    6764        </article><!-- #post-## -->
    … …  
    7774    <?php endif; ?>
    7875
    79         </main><!-- #main -->
    80     </div><!-- #primary -->
     76    </main>
    8177
    8278<?php get_footer(); ?>

  • sites/trunk/jobs.wordpress.net/public_html/wp-content/themes/jobswp/searchform.php

    r88 r14757  
    77?>
    88<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    9     <input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Find Jobs', 'submit button', 'jobswp' ); ?>">
    109    <label>
    1110        <span class="screen-reader-text"><?php _ex( 'Search for:', 'label', 'jobswp' ); ?></span>
    12         <div class="dashicons dashicons-search"></div>
    1311        <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'What kind of job are you looking for?', 'placeholder', 'jobswp' ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s" title="<?php echo esc_attr_x( 'Find Jobs:', 'label', 'jobswp' ); ?>">
    1412    </label>
     13    <input type="submit" class="btn btn-primary btn-sm search-submit" value="<?php echo esc_attr_x( 'Find Jobs', 'submit button', 'jobswp' ); ?>">
    1514</form>

  • sites/trunk/jobs.wordpress.net/public_html/wp-content/themes/jobswp/sidebar.php

    r123 r14757  
    66 */
    77?>
    8     <div id="secondary" class="widget-area grid_3" role="complementary">
     8    <div id="secondary" class="widget-area" role="complementary">
    99        <?php do_action( 'before_sidebar' ); ?>
    1010

  • sites/trunk/jobs.wordpress.net/public_html/wp-content/themes/jobswp/style.css

    r12833 r14757  
    44Author: melchoyce, coffee2code
    55Description: Theme for jobs.wordpress.net
    6 Version: 1.0.1
     6Version: 2.0.0
    77License: GNU General Public License
    88License URI: license.txt
    … …  
    1313
    1414 jobswp is based on Underscores https://underscores.me/, (C) 2012-2013 Automattic, Inc.
    15 
    16 Resetting and rebuilding styles have been helped along thanks to the fine work of
    17 Eric Meyer https://meyerweb.com/eric/tools/css/reset/index.html
    18 along with Nicolas Gallagher and Jonathan Neal https://necolas.github.com/normalize.css/
    19 and Blueprint http://www.blueprintcss.org/
    2015*/
    2116
    2217
    23 /* =Reset
    24 -------------------------------------------------------------- */
    25 
    26 html, body, div, span, applet, object, iframe,
    27 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    28 a, abbr, acronym, address, big, cite, code,
    29 del, dfn, em, font, ins, kbd, q, s, samp,
    30 small, strike, strong, sub, sup, tt, var,
    31 dl, dt, dd, ol, ul, li,
    32 fieldset, form, label, legend,
    33 table, caption, tbody, tfoot, thead, tr, th, td {
    34     border: 0;
    35     font-family: inherit;
    36     font-size: 100%;
    37     font-style: inherit;
    38     font-weight: inherit;
     18/* ============================================
     19   Design Tokens & Base Styles
     20   Based on wporg-main-2022 theme
     21   ============================================ */
     22
     23@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,700;1,400&family=Inter:wght@400;500;600;700&display=swap');
     24
     25:root {
     26    /* Colors — Charcoal (Neutrals) */
     27    --color-charcoal-0: #1a1919;
     28    --color-charcoal-1: #1e1e1e;
     29    --color-charcoal-2: #23282d;
     30    --color-charcoal-3: #40464d;
     31    --color-charcoal-4: #656a71;
     32    --color-charcoal-5: #979aa1;
     33    --color-light-grey-1: #d9d9d9;
     34    --color-light-grey-2: #f6f6f6;
     35    --color-white: #ffffff;
     36
     37    /* Colors — Blueberry (Primary) */
     38    --color-dark-blueberry: #1d35b4;
     39    --color-deep-blueberry: #213fd4;
     40    --color-blueberry-1: #3858e9;
     41    --color-blueberry-2: #9fb1ff;
     42    --color-blueberry-3: #c7d1ff;
     43    --color-blueberry-4: #eff2ff;
     44
     45    /* Colors — Acid Green (Jobs Accent) */
     46    --color-acid-green-1: #33f078;
     47    --color-acid-green-2: #c7ffdb;
     48    --color-acid-green-3: #e2ffed;
     49
     50    /* Typography */
     51    --font-heading: 'EB Garamond', serif;
     52    --font-body: 'Inter', sans-serif;
     53
     54    /* Font Sizes */
     55    --font-size-xs: 12px;
     56    --font-size-sm: 14px;
     57    --font-size-base: 16px;
     58    --font-size-lg: 20px;
     59    --font-size-xl: 24px;
     60    --font-size-h6: 22px;
     61    --font-size-h5: 26px;
     62    --font-size-h4: 30px;
     63    --font-size-h3: 36px;
     64    --font-size-h2: 50px;
     65    --font-size-h1: 70px;
     66
     67    /* Spacing */
     68    --space-10: 10px;
     69    --space-20: 20px;
     70    --space-30: 30px;
     71    --space-40: clamp(30px, 5vw, 50px);
     72    --space-50: clamp(40px, calc(5vw + 10px), 60px);
     73    --space-60: clamp(20px, calc(10vw - 40px), 80px);
     74    --space-70: 100px;
     75    --space-80: clamp(80px, calc(6.67vw + 40px), 120px);
     76    --space-edge: 80px;
     77
     78    /* Layout */
     79    --content-width: 680px;
     80    --wide-width: 1160px;
     81
     82    /* Misc */
     83    --radius: 2px;
     84    --radius-pill: 9999px;
     85    --transition: 0.2s ease-in-out;
     86}
     87
     88
     89/* ============================================
     90   Reset & Base
     91   ============================================ */
     92
     93*,
     94*::before,
     95*::after {
     96    box-sizing: border-box;
    3997    margin: 0;
    40     outline: 0;
    4198    padding: 0;
    42     vertical-align: baseline;
    43 }
     99}
     100
    44101html {
    45     font-size: 62.5%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
    46     overflow-y: scroll; /* Keeps page centred in all browsers regardless of content height */
    47     -webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
    48     -ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
    49 }
     102    font-size: 16px;
     103    -webkit-font-smoothing: antialiased;
     104    -moz-osx-font-smoothing: grayscale;
     105}
     106
    50107body {
    51     background: #fff;
    52 }
    53 article,
    54 aside,
    55 details,
    56 figcaption,
    57 figure,
    58 footer,
    59 header,
    60 main,
    61 nav,
    62 section {
     108    font-family: var(--font-body);
     109    font-size: var(--font-size-base);
     110    line-height: 1.875;
     111    color: var(--color-charcoal-1);
     112    background: var(--color-white);
     113    display: flex;
     114    flex-direction: column;
     115    min-height: 100vh;
     116}
     117
     118main {
     119    flex: 1;
     120}
     121
     122img {
     123    max-width: 100%;
     124    height: auto;
    63125    display: block;
    64126}
    65 ol, ul {
     127
     128a {
     129    color: var(--color-blueberry-1);
     130    text-decoration: underline;
     131    text-decoration-thickness: 1px;
     132    text-underline-offset: 0.15em;
     133    transition: color var(--transition);
     134}
     135
     136a:hover {
     137    text-decoration: none;
     138}
     139
     140
     141/* ============================================
     142   Typography
     143   ============================================ */
     144
     145h1,
     146h2,
     147h3,
     148h4,
     149h5,
     150h6 {
     151    font-family: var(--font-heading);
     152    font-weight: 400;
     153    line-height: 1.3;
     154    text-wrap: balance;
     155}
     156
     157h1 {
     158    font-size: var(--font-size-h1);
     159    line-height: 1.05;
     160}
     161
     162h2 {
     163    font-size: var(--font-size-h2);
     164    line-height: 1.2;
     165}
     166
     167h3 {
     168    font-size: var(--font-size-h3);
     169    line-height: 1.28;
     170}
     171
     172h4 {
     173    font-size: var(--font-size-h4);
     174}
     175
     176h5 {
     177    font-size: var(--font-size-h5);
     178}
     179
     180h6 {
     181    font-size: var(--font-size-h6);
     182}
     183
     184p {
     185    text-wrap: pretty;
     186}
     187
     188ol,
     189ul {
    66190    list-style: none;
    67191}
    68 table { /* tables still need 'cellspacing="0"' in the markup */
    69     border-collapse: separate;
    70     border-spacing: 0;
    71 }
    72 caption, th, td {
    73     font-weight: normal;
    74     text-align: left;
    75 }
    76 blockquote:before, blockquote:after,
    77 q:before, q:after {
    78     content: "";
    79 }
    80 blockquote, q {
    81     quotes: "" "";
    82 }
    83 a:focus {
    84     outline: thin dotted;
    85 }
    86 a:hover,
    87 a:active { /* Improves readability when focused and also mouse hovered in all browsers people.opera.com/patrickl/experiments/keyboard/test */
    88     outline: 0;
    89 }
    90 a img {
    91     border: 0;
    92 }
    93 
    94 
    95 /* =Global
    96 ----------------------------------------------- */
    97 
    98 body,
    99 button,
    100 input,
     192
     193
     194/* ============================================
     195   Layout Containers
     196   ============================================ */
     197
     198.content-width {
     199    max-width: var(--content-width);
     200    margin-inline: auto;
     201    padding-inline: var(--space-20);
     202}
     203
     204.wide-width {
     205    max-width: var(--wide-width);
     206    margin-inline: auto;
     207    padding-inline: var(--space-20);
     208}
     209
     210
     211/* ============================================
     212   Buttons
     213   ============================================ */
     214
     215.btn {
     216    display: inline-flex;
     217    align-items: center;
     218    justify-content: center;
     219    font-family: var(--font-body);
     220    font-size: var(--font-size-base);
     221    font-weight: 600;
     222    line-height: 1.3;
     223    padding: 14px 32px;
     224    border-radius: var(--radius);
     225    border: 1px solid transparent;
     226    cursor: pointer;
     227    text-decoration: none;
     228    transition:
     229        background var(--transition),
     230        color var(--transition),
     231        border-color var(--transition);
     232    gap: 8px;
     233}
     234
     235.btn-primary {
     236    background: var(--color-blueberry-1);
     237    color: var(--color-white);
     238    border-color: var(--color-blueberry-1);
     239}
     240
     241.btn-primary:hover {
     242    background: var(--color-deep-blueberry);
     243    border-color: var(--color-deep-blueberry);
     244    color: var(--color-white);
     245}
     246
     247.btn-outline {
     248    background: transparent;
     249    color: var(--color-blueberry-1);
     250    border: 2px solid currentColor;
     251}
     252
     253.btn-outline:hover {
     254    background: var(--color-deep-blueberry);
     255    color: var(--color-white);
     256    border-color: var(--color-deep-blueberry);
     257}
     258
     259.btn-sm {
     260    padding: 7px 12px;
     261    font-size: var(--font-size-sm);
     262}
     263
     264
     265/* ============================================
     266   Form Inputs
     267   ============================================ */
     268
     269input[type="text"],
     270input[type="email"],
     271input[type="url"],
     272input[type="tel"],
     273input[type="password"],
     274input[type="search"],
    101275select,
    102276textarea {
    103     color: #404040;
    104     font-family: sans-serif;
    105     font-size: 16px;
    106     font-size: 1.6rem;
    107     line-height: 1.5;
    108 }
    109 
    110 /* Headings */
    111 h1, h2, h3, h4, h5, h6 {
    112     clear: both;
    113 }
    114 hr {
    115     background-color: #ccc;
     277    font-family: var(--font-body);
     278    font-size: var(--font-size-sm);
     279    padding: 8px 15px;
     280    border: 1px solid var(--color-charcoal-5);
     281    border-radius: var(--radius);
     282    color: var(--color-charcoal-1);
     283    background: var(--color-white);
     284    width: 100%;
     285    transition: border-color var(--transition);
     286}
     287
     288input:focus,
     289select:focus,
     290textarea:focus {
     291    outline: none;
     292    border-color: var(--color-blueberry-1);
     293    box-shadow: 0 0 0 1px var(--color-blueberry-1);
     294}
     295
     296textarea {
     297    min-height: 150px;
     298    resize: vertical;
     299}
     300
     301label {
     302    display: block;
     303    font-weight: 600;
     304    font-size: var(--font-size-sm);
     305    margin-bottom: 6px;
     306    color: var(--color-charcoal-1);
     307}
     308
     309
     310/* ============================================
     311   Utility Classes
     312   ============================================ */
     313
     314.text-muted {
     315    color: var(--color-charcoal-4);
     316}
     317
     318.text-sm {
     319    font-size: var(--font-size-sm);
     320}
     321
     322.text-lg {
     323    font-size: var(--font-size-lg);
     324}
     325
     326.sr-only,
     327.screen-reader-text {
     328    position: absolute;
     329    width: 1px;
     330    height: 1px;
     331    padding: 0;
     332    margin: -1px;
     333    overflow: hidden;
     334    clip: rect(0, 0, 0, 0);
     335    clip-path: inset(50%);
     336    white-space: nowrap;
    116337    border: 0;
    117     height: 1px;
    118     margin-bottom: 1.5em;
    119 }
    120 
    121 /* Text elements */
    122 p {
    123     margin-bottom: 1.5em;
    124 }
    125 ul, ol {
    126     margin: 0 0 1.5em 3em;
    127 }
    128 ul {
    129     list-style: disc;
    130 }
    131 ol {
    132     list-style: decimal;
    133 }
    134 li > ul,
    135 li > ol {
    136     margin-bottom: 0;
    137     margin-left: 1.5em;
    138 }
    139 dt {
    140     font-weight: bold;
    141 }
    142 dd {
    143     margin: 0 1.5em 1.5em;
    144 }
    145 b, strong {
    146     font-weight: bold;
    147 }
    148 dfn, cite, em, i {
    149     font-style: italic;
    150 }
    151 blockquote {
    152     margin: 0 1.5em;
    153 }
    154 address {
    155     margin: 0 0 1.5em;
    156 }
    157 pre {
    158     background: #eee;
    159     font-family: "Courier 10 Pitch", Courier, monospace;
    160     font-size: 15px;
    161     font-size: 1.5rem;
    162     line-height: 1.6;
    163     margin-bottom: 1.6em;
    164     max-width: 100%;
    165     overflow: auto;
    166     padding: 1.6em;
    167 }
    168 code, kbd, tt, var {
    169     font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
    170 }
    171 abbr, acronym {
    172     border-bottom: 1px dotted #666;
    173     cursor: help;
    174 }
    175 mark, ins {
    176     background: #fff9c0;
    177     text-decoration: none;
    178 }
    179 sup,
    180 sub {
    181     font-size: 75%;
    182     height: 0;
    183     line-height: 0;
    184     position: relative;
    185     vertical-align: baseline;
    186 }
    187 sup {
    188     bottom: 1ex;
    189 }
    190 sub {
    191     top: .5ex;
    192 }
    193 small {
    194     font-size: 75%;
    195 }
    196 big {
    197     font-size: 125%;
    198 }
    199 figure {
    200     margin: 0;
    201 }
    202 table {
    203     margin: 0 0 1.5em;
    204     width: 100%;
    205 }
    206 th {
    207     font-weight: bold;
    208 }
    209 img {
    210     height: auto; /* Make sure images are scaled correctly. */
    211     max-width: 100%; /* Adhere to container width. */
    212 }
    213 button,
    214 input,
    215 select,
    216 textarea {
    217     font-size: 100%; /* Corrects font size not being inherited in all browsers */
    218     margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
    219     vertical-align: baseline; /* Improves appearance and consistency in all browsers */
    220     *vertical-align: middle; /* Improves appearance and consistency in all browsers */
    221 }
    222 button,
    223 input {
    224     line-height: normal; /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */
    225 }
    226 button,
    227 html input[type="button"],
    228 input[type="reset"],
    229 input[type="submit"] {
    230     border: 1px solid #ccc;
    231     border-color: #ccc #ccc #bbb #ccc;
    232     border-radius: 3px;
    233     background: #e6e6e6;
    234     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 15px 17px rgba(255, 255, 255, 0.5), inset 0 -5px 12px rgba(0, 0, 0, 0.05);
    235     color: rgba(0, 0, 0, .8);
    236     cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
    237     -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
    238     font-size: 12px;
    239     font-size: 1.2rem;
    240     line-height: 1;
    241     padding: .6em 1em .4em;
    242     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    243 }
    244 button:hover,
    245 html input[type="button"]:hover,
    246 input[type="reset"]:hover,
    247 input[type="submit"]:hover {
    248     border-color: #ccc #bbb #aaa #bbb;
    249     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 15px 17px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02);
    250 }
    251 button:focus,
    252 html input[type="button"]:focus,
    253 input[type="reset"]:focus,
    254 input[type="submit"]:focus,
    255 button:active,
    256 html input[type="button"]:active,
    257 input[type="reset"]:active,
    258 input[type="submit"]:active {
    259     border-color: #aaa #bbb #bbb #bbb;
    260     box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15);
    261 }
    262 input[type="checkbox"],
    263 input[type="radio"] {
    264     box-sizing: border-box; /* Addresses box sizing set to content-box in IE8/9 */
    265     padding: 0; /* Addresses excess padding in IE8/9 */
    266 }
    267 input[type="search"] {
    268     -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
    269     -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
    270     -moz-box-sizing:    content-box;
    271     box-sizing:         content-box;
    272 }
    273 input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
    274     -webkit-appearance: none;
    275 }
    276 button::-moz-focus-inner,
    277 input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
    278     border: 0;
    279     padding: 0;
    280 }
    281 input[type="text"],
    282 input[type="email"],
    283 input[type="tel"],
    284 input[type="url"],
    285 input[type="password"],
    286 input[type="search"],
    287 textarea {
    288     color: #666;
    289     border: 1px solid #ccc;
    290     border-radius: 3px;
    291 }
    292 input[type="text"]:focus,
    293 input[type="email"]:focus,
    294 input[type="tel"]:focus,
    295 input[type="url"]:focus,
    296 input[type="password"]:focus,
    297 input[type="search"]:focus,
    298 textarea:focus {
    299     color: #111;
    300 }
    301 input[type="text"],
    302 input[type="email"],
    303 input[type="tel"],
    304 input[type="url"],
    305 input[type="password"],
    306 input[type="search"] {
    307     padding: 3px;
    308 }
    309 textarea {
    310     overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
    311     padding-left: 3px;
    312     vertical-align: top; /* Improves readability and alignment in all browsers */
    313     width: 98%;
    314 }
    315 
    316 /* Links */
    317 a {
    318     color: royalblue;
    319 }
    320 a:visited {
    321     color: purple;
    322 }
    323 a:hover,
    324 a:focus,
    325 a:active {
    326     color: midnightblue;
    327 }
    328 
    329 /* Alignment */
    330 .alignleft {
    331     display: inline;
    332     float: left;
    333     margin-right: 1.5em;
    334 }
    335 .alignright {
    336     display: inline;
    337     float: right;
    338     margin-left: 1.5em;
    339 }
    340 .aligncenter {
    341     clear: both;
    342     display: block;
    343     margin: 0 auto;
    344 }
    345 
    346 /* Text meant only for screen readers */
    347 .screen-reader-text {
    348     clip: rect(1px, 1px, 1px, 1px);
    349     position: absolute !important;
    350338}
    351339
    … …  
    357345    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    358346    clip: auto !important;
     347    clip-path: none;
    359348    color: #21759b;
    360349    display: block;
    … …  
    368357    top: 5px;
    369358    width: auto;
    370     z-index: 100000; /* Above WP toolbar */
    371 }
    372 
    373 /* Clearing */
    374 .clear:before,
    375 .clear:after,
    376 .entry-content:before,
    377 .entry-content:after,
    378 .comment-content:before,
    379 .comment-content:after,
    380 .site-header:before,
    381 .site-header:after,
    382 .site-content:before,
    383 .site-content:after,
    384 .site-footer:before,
    385 .site-footer:after {
    386     content: '';
    387     display: table;
    388 }
    389 
    390 .clear:after,
    391 .entry-content:after,
    392 .comment-content:after,
    393 .site-header:after,
    394 .site-content:after,
    395 .site-footer:after {
    396     clear: both;
    397 }
    398 
    399 
    400 /* =Menu
    401 ----------------------------------------------- */
    402 
    403 .main-navigation {
    404     clear: both;
     359    z-index: 100000;
     360}
     361
     362
     363/* ============================================
     364   Global Header
     365   ============================================ */
     366
     367.site-header {
     368    border-bottom: 1px solid var(--color-light-grey-1);
     369    background: var(--color-white);
     370    position: sticky;
     371    top: 0;
     372    z-index: 100;
     373}
     374
     375.site-header__inner {
     376    max-width: var(--wide-width);
     377    margin-inline: auto;
     378    padding: 16px var(--space-20);
     379    display: flex;
     380    align-items: center;
     381    justify-content: space-between;
     382    gap: var(--space-30);
     383}
     384
     385.site-header__logo {
     386    display: flex;
     387    align-items: center;
     388    gap: 10px;
     389    text-decoration: none;
     390    color: var(--color-charcoal-1);
     391    font-family: var(--font-body);
     392    font-weight: 600;
     393    font-size: var(--font-size-base);
     394    white-space: nowrap;
     395}
     396
     397.site-header__logo:hover {
     398    color: var(--color-charcoal-1);
     399}
     400
     401.site-header__logo svg {
     402    width: 36px;
     403    height: 36px;
     404    flex-shrink: 0;
     405}
     406
     407.site-header__right {
     408    display: flex;
     409    align-items: center;
     410    gap: var(--space-30);
     411}
     412
     413.site-header__nav {
     414    display: flex;
     415    align-items: center;
     416    gap: var(--space-30);
     417}
     418
     419.site-header__nav a {
     420    color: var(--color-charcoal-1);
     421    text-decoration: none;
     422    font-size: var(--font-size-base);
     423    font-weight: 500;
     424    transition: color var(--transition);
     425}
     426
     427.site-header__nav a:hover {
     428    color: var(--color-blueberry-1);
     429}
     430
     431.site-header__nav a.btn-primary {
     432    color: var(--color-white);
     433}
     434
     435.site-header__nav a.btn-primary:hover {
     436    color: var(--color-white);
     437}
     438
     439.site-header__nav a.active {
     440    color: var(--color-blueberry-1);
     441    font-weight: 700;
     442}
     443
     444.mobile-menu-toggle {
     445    display: none;
     446    background: none;
     447    border: none;
     448    cursor: pointer;
     449    padding: 8px;
     450    color: var(--color-charcoal-1);
     451}
     452
     453.mobile-menu-toggle svg {
     454    width: 24px;
     455    height: 24px;
     456}
     457
     458@media (max-width: 600px) {
     459    .site-header__nav {
     460        display: none;
     461        position: absolute;
     462        top: 100%;
     463        left: 0;
     464        right: 0;
     465        background: var(--color-white);
     466        flex-direction: column;
     467        padding: var(--space-20);
     468        border-bottom: 1px solid var(--color-light-grey-1);
     469        gap: var(--space-10);
     470        align-items: flex-start;
     471    }
     472
     473    .site-header__nav.is-open {
     474        display: flex;
     475    }
     476
     477    .mobile-menu-toggle {
     478        display: block;
     479    }
     480}
     481
     482
     483/* ============================================
     484   Global Footer
     485   ============================================ */
     486
     487.site-footer {
     488    background: var(--color-charcoal-1);
     489    color: var(--color-white);
     490    margin-top: auto;
     491}
     492
     493.site-footer__inner {
     494    max-width: var(--wide-width);
     495    margin-inline: auto;
     496    padding: var(--space-60) var(--space-20);
     497}
     498
     499.site-footer__columns {
     500    display: grid;
     501    grid-template-columns: repeat(4, 1fr);
     502    gap: var(--space-40);
     503    margin-bottom: var(--space-40);
     504}
     505
     506.site-footer__column h4 {
     507    font-family: var(--font-body);
     508    font-size: var(--font-size-sm);
     509    font-weight: 700;
     510    text-transform: uppercase;
     511    letter-spacing: 0.05em;
     512    margin-bottom: var(--space-20);
     513    color: var(--color-charcoal-5);
     514}
     515
     516.site-footer__column ul {
     517    list-style: none;
     518    display: flex;
     519    flex-direction: column;
     520    gap: 8px;
     521}
     522
     523.site-footer__column a {
     524    color: var(--color-light-grey-1);
     525    text-decoration: none;
     526    font-size: var(--font-size-sm);
     527    transition: color var(--transition);
     528}
     529
     530.site-footer__column a:hover {
     531    color: var(--color-white);
     532}
     533
     534.site-footer__bottom {
     535    border-top: 1px solid var(--color-charcoal-3);
     536    padding-top: var(--space-30);
     537    display: flex;
     538    align-items: center;
     539    justify-content: space-between;
     540    flex-wrap: wrap;
     541    gap: var(--space-20);
     542}
     543
     544.site-footer__social {
     545    display: flex;
     546    gap: var(--space-20);
     547}
     548
     549.site-footer__social a {
     550    color: var(--color-charcoal-5);
     551    text-decoration: none;
     552    transition: color var(--transition);
     553}
     554
     555.site-footer__social a:hover {
     556    color: var(--color-white);
     557}
     558
     559.site-footer__tagline {
     560    font-family: var(--font-heading);
     561    font-style: italic;
     562    font-size: var(--font-size-lg);
     563    color: var(--color-charcoal-5);
     564}
     565
     566@media (max-width: 781px) {
     567    .site-footer__columns {
     568        grid-template-columns: repeat(2, 1fr);
     569    }
     570}
     571
     572@media (max-width: 600px) {
     573    .site-footer__columns {
     574        grid-template-columns: 1fr;
     575    }
     576}
     577
     578
     579/* ============================================
     580   Hero Section
     581   ============================================ */
     582
     583.hero {
     584    background: var(--color-light-grey-2);
     585    padding: var(--space-80) var(--space-20);
     586    text-align: center;
     587}
     588
     589.hero__inner {
     590    max-width: var(--wide-width);
     591    margin-inline: auto;
     592}
     593
     594.hero h1 {
     595    margin-bottom: var(--space-20);
     596}
     597
     598.hero__highlight {
     599    color: var(--color-charcoal-1);
     600    background: linear-gradient(to top, var(--color-acid-green-2) 40%, transparent 40%);
     601    padding-inline: 4px;
     602}
     603
     604.hero p {
     605    font-size: var(--font-size-xl);
     606    color: var(--color-charcoal-4);
     607    max-width: 600px;
     608    margin-inline: auto;
     609    margin-bottom: var(--space-40);
     610}
     611
     612.hero__actions {
     613    display: flex;
     614    gap: var(--space-20);
     615    justify-content: center;
     616    flex-wrap: wrap;
     617}
     618
     619.hero__stats {
     620    display: flex;
     621    gap: var(--space-50);
     622    justify-content: center;
     623    margin-top: var(--space-50);
     624    flex-wrap: wrap;
     625}
     626
     627.hero__stat {
     628    text-align: center;
     629}
     630
     631.hero__stat-number {
     632    font-family: var(--font-heading);
     633    font-size: var(--font-size-h3);
     634    color: var(--color-charcoal-1);
    405635    display: block;
    406     float: left;
     636}
     637
     638.hero__stat-label {
     639    font-size: var(--font-size-sm);
     640    color: var(--color-charcoal-4);
     641}
     642
     643
     644/* ============================================
     645   Filter Pills
     646   ============================================ */
     647
     648.filters {
     649    padding: var(--space-40) var(--space-20);
     650    max-width: var(--wide-width);
     651    margin-inline: auto;
     652}
     653
     654.filters__label {
     655    font-weight: 600;
     656    font-size: var(--font-size-sm);
     657    margin-bottom: var(--space-10);
     658    color: var(--color-charcoal-4);
     659}
     660
     661.filters__pills {
     662    display: flex;
     663    gap: var(--space-10);
     664    flex-wrap: wrap;
     665}
     666
     667.filter-pill {
     668    padding: 8px 20px;
     669    border-radius: var(--radius-pill);
     670    border: 1px solid var(--color-light-grey-1);
     671    background: var(--color-white);
     672    font-family: var(--font-body);
     673    font-size: var(--font-size-sm);
     674    font-weight: 500;
     675    color: var(--color-charcoal-3);
     676    cursor: pointer;
     677    transition: all var(--transition);
     678}
     679
     680.filter-pill:hover {
     681    border-color: var(--color-charcoal-5);
     682    color: var(--color-charcoal-1);
     683}
     684
     685.filter-pill.active {
     686    background: var(--color-acid-green-1);
     687    border-color: var(--color-acid-green-1);
     688    color: var(--color-charcoal-1);
     689    font-weight: 600;
     690}
     691
     692
     693/* ============================================
     694   Job Cards Grid
     695   ============================================ */
     696
     697.jobs-section {
     698    max-width: var(--wide-width);
     699    margin-inline: auto;
     700    padding: 0 var(--space-20) var(--space-60);
     701}
     702
     703.jobs-grid {
     704    display: grid;
     705    grid-template-columns: repeat(3, 1fr);
     706    gap: var(--space-20);
     707}
     708
     709.job-card {
     710    border: 1px solid var(--color-light-grey-1);
     711    border-radius: var(--radius);
     712    padding: var(--space-30);
     713    background: var(--color-white);
     714    transition:
     715        border-color var(--transition),
     716        box-shadow var(--transition);
     717    display: flex;
     718    flex-direction: column;
     719    gap: var(--space-10);
     720    text-decoration: none;
     721    color: inherit;
     722}
     723
     724.job-card:hover {
     725    border-color: var(--color-blueberry-1);
     726    box-shadow: 0 2px 8px rgba(56, 88, 233, 0.08);
     727    color: inherit;
     728}
     729
     730.job-card__badge {
     731    display: inline-flex;
     732    align-self: flex-start;
     733    padding: 3px 12px;
     734    border-radius: var(--radius-pill);
     735    background: var(--color-acid-green-3);
     736    color: var(--color-charcoal-2);
     737    font-size: var(--font-size-xs);
     738    font-weight: 600;
     739    text-transform: uppercase;
     740    letter-spacing: 0.05em;
     741}
     742
     743.job-card__title {
     744    font-family: var(--font-heading);
     745    font-size: var(--font-size-h6);
     746    font-weight: 400;
     747    line-height: 1.3;
     748    color: var(--color-charcoal-1);
     749}
     750
     751.job-card__company {
     752    font-weight: 600;
     753    font-size: var(--font-size-sm);
     754    color: var(--color-charcoal-1);
     755}
     756
     757.job-card__meta {
     758    display: flex;
     759    gap: var(--space-20);
     760    font-size: var(--font-size-sm);
     761    color: var(--color-charcoal-4);
     762    flex-wrap: wrap;
     763}
     764
     765.job-card__meta span {
     766    display: inline-flex;
     767    align-items: center;
     768    gap: 4px;
     769}
     770
     771.job-card__date {
     772    font-size: var(--font-size-xs);
     773    color: var(--color-charcoal-5);
     774    margin-top: auto;
     775    padding-top: var(--space-10);
     776    border-top: 1px solid var(--color-light-grey-2);
     777}
     778
     779.jobs-empty {
     780    grid-column: 1 / -1;
     781    text-align: center;
     782    padding: var(--space-60);
     783    color: var(--color-charcoal-4);
     784}
     785
     786@media (max-width: 900px) {
     787    .jobs-grid {
     788        grid-template-columns: repeat(2, 1fr);
     789    }
     790}
     791
     792@media (max-width: 600px) {
     793    .jobs-grid {
     794        grid-template-columns: 1fr;
     795    }
     796}
     797
     798
     799/* ============================================
     800   Job Detail Page (Single Job)
     801   ============================================ */
     802
     803.breadcrumb {
     804    max-width: var(--wide-width);
     805    margin-inline: auto;
     806    padding: var(--space-20);
     807    font-size: var(--font-size-sm);
     808    color: var(--color-charcoal-4);
     809}
     810
     811.breadcrumb a {
     812    color: var(--color-charcoal-4);
     813}
     814
     815.breadcrumb .separator {
     816    margin-inline: 6px;
     817    color: var(--color-light-grey-1);
     818}
     819
     820.job-detail {
     821    max-width: var(--wide-width);
     822    margin-inline: auto;
     823    padding: 0 var(--space-20) var(--space-60);
     824    display: grid;
     825    grid-template-columns: 1fr 340px;
     826    gap: var(--space-50);
     827    align-items: start;
     828}
     829
     830.job-detail__main {
     831    min-width: 0;
     832}
     833
     834.job-detail__header {
     835    margin-bottom: var(--space-40);
     836}
     837
     838.job-detail__header h1 {
     839    font-size: var(--font-size-h2);
     840    margin-bottom: var(--space-20);
     841}
     842
     843.job-detail__meta {
     844    display: flex;
     845    gap: var(--space-20);
     846    flex-wrap: wrap;
     847    font-size: var(--font-size-sm);
     848    color: var(--color-charcoal-4);
     849    margin-bottom: var(--space-20);
     850}
     851
     852.job-detail__meta span {
     853    display: inline-flex;
     854    align-items: center;
     855    gap: 6px;
     856}
     857
     858.job-detail__body h2 {
     859    font-size: var(--font-size-h5);
     860    margin-top: var(--space-40);
     861    margin-bottom: var(--space-10);
     862}
     863
     864.job-detail__body h3 {
     865    font-size: var(--font-size-h6);
     866    margin-top: var(--space-30);
     867    margin-bottom: var(--space-10);
     868}
     869
     870.job-detail__body p {
     871    margin-bottom: var(--space-20);
     872}
     873
     874.job-detail__body ul {
     875    margin-bottom: var(--space-20);
     876    padding-left: var(--space-20);
     877}
     878
     879.job-detail__body li {
     880    margin-bottom: 8px;
     881    list-style: disc;
     882}
     883
     884/* Sidebar */
     885.job-sidebar {
     886    position: sticky;
     887    top: 90px;
     888}
     889
     890.job-sidebar__card {
     891    border: 1px solid var(--color-light-grey-1);
     892    border-radius: var(--radius);
     893    padding: var(--space-30);
     894    background: var(--color-white);
     895}
     896
     897.job-sidebar__card h3 {
     898    font-family: var(--font-body);
     899    font-size: var(--font-size-base);
     900    font-weight: 700;
     901    margin-bottom: var(--space-20);
     902}
     903
     904.job-sidebar__detail {
     905    display: flex;
     906    justify-content: space-between;
     907    padding: var(--space-10) 0;
     908    border-bottom: 1px solid var(--color-light-grey-2);
     909    font-size: var(--font-size-sm);
     910}
     911
     912.job-sidebar__detail:last-of-type {
     913    border-bottom: none;
     914}
     915
     916.job-sidebar__detail-label {
     917    color: var(--color-charcoal-4);
     918}
     919
     920.job-sidebar__detail-value {
     921    font-weight: 600;
     922    text-align: right;
     923}
     924
     925.job-sidebar__card .btn {
    407926    width: 100%;
    408 }
    409 .main-navigation ul {
    410     list-style: none;
    411     margin: 0;
    412     padding-left: 0;
    413 }
    414 .main-navigation li {
    415     float: left;
     927    margin-top: var(--space-20);
     928}
     929
     930@media (max-width: 900px) {
     931    .job-detail {
     932        grid-template-columns: 1fr;
     933    }
     934
     935    .job-sidebar {
     936        position: static;
     937    }
     938}
     939
     940
     941/* ============================================
     942   Form Page (Post a Job)
     943   ============================================ */
     944
     945.form-page {
     946    max-width: var(--content-width);
     947    margin-inline: auto;
     948    padding: var(--space-50) var(--space-20) var(--space-80);
     949}
     950
     951.form-page h1 {
     952    margin-bottom: var(--space-10);
     953}
     954
     955.form-page > p {
     956    color: var(--color-charcoal-4);
     957    margin-bottom: var(--space-40);
     958}
     959
     960.form-group {
     961    margin-bottom: var(--space-30);
     962}
     963
     964.form-group--half {
     965    display: grid;
     966    grid-template-columns: 1fr 1fr;
     967    gap: var(--space-20);
     968}
     969
     970.form-hint {
     971    font-size: var(--font-size-xs);
     972    color: var(--color-charcoal-5);
     973    margin-top: 4px;
     974}
     975
     976.form-actions {
     977    margin-top: var(--space-40);
     978    display: flex;
     979    gap: var(--space-20);
     980    align-items: center;
     981}
     982
     983@media (max-width: 600px) {
     984    .form-group--half {
     985        grid-template-columns: 1fr;
     986    }
     987}
     988
     989
     990/* ============================================
     991   Legacy Form Styles (Post a Job / Contact)
     992   ============================================ */
     993
     994.entry-article {
     995    background-color: var(--color-white);
    416996    position: relative;
    417 }
    418 .main-navigation a {
    419     display: block;
    420     text-decoration: none;
    421 }
    422 .main-navigation ul ul {
    423     box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    424     display: none;
    425     float: left;
    426     left: 0;
    427     position: absolute;
    428     top: 1.5em;
    429     z-index: 99999;
    430 }
    431 .main-navigation ul ul ul {
    432     left: 100%;
    433     top: 0;
    434 }
    435 .main-navigation ul ul a {
    436     width: 200px;
    437 }
    438 .main-navigation ul ul li {
    439 }
    440 .main-navigation li:hover > a {
    441 }
    442 .main-navigation ul ul :hover > a {
    443 }
    444 .main-navigation ul ul a:hover {
    445 }
    446 .main-navigation ul li:hover > ul {
    447     display: block;
    448 }
    449 .main-navigation li.current_page_item a,
    450 .main-navigation li.current-menu-item a {
    451 }
    452 
    453 /* Small menu */
    454 .menu-toggle {
    455     cursor: pointer;
    456     display: none;
    457 }
    458 .menu {
    459     display: block;
    460 }
    461 
    462 @media screen and (max-width: 600px) {
    463     .menu-toggle,
    464     .main-navigation.toggled .nav-menu {
    465         display: block;
    466     }
    467 
    468     .container .main-navigation {
    469         width: 100%;
    470     }
    471 
    472     .main-navigation ul {
    473         display: none;
    474     }
    475 }
    476 
    477 
    478 /* =Content
    479 ----------------------------------------------- */
    480 
    481 .sticky {
    482 }
    483 .hentry {
    484     margin: 0 0 1.5em;
    485 }
    486 .byline,
    487 .updated {
    488     display: none;
    489 }
    490 .single .byline,
    491 .group-blog .byline {
    492     display: inline;
    493 }
    494 .page-content,
    495 .entry-content,
    496 .entry-summary {
    497     margin: 1.5em 0 0;
    498 }
    499 .page-links {
    500     clear: both;
    501     margin: 0 0 1.5em;
    502 }
    503 
    504 
    505 /* =Asides
    506 ----------------------------------------------- */
    507 
    508 .blog .format-aside .entry-title,
    509 .archive .format-aside .entry-title {
    510     display: none;
    511 }
    512 
    513 
    514 /* =Media
    515 ----------------------------------------------- */
    516 
    517 .page-content img.wp-smiley,
    518 .entry-content img.wp-smiley,
    519 .comment-content img.wp-smiley {
    520     border: none;
    521     margin-bottom: 0;
    522     margin-top: 0;
    523     padding: 0;
    524 }
    525 .wp-caption {
    526     border: 1px solid #ccc;
    527     margin-bottom: 1.5em;
    528     max-width: 100%;
    529 }
    530 .wp-caption img[class*="wp-image-"] {
    531     display: block;
    532     margin: 1.2% auto 0;
    533     max-width: 98%;
    534 }
    535 .wp-caption-text {
    536     text-align: center;
    537 }
    538 .wp-caption .wp-caption-text {
    539     margin: 0.8075em 0;
    540 }
    541 .site-main .gallery {
    542     margin-bottom: 1.5em;
    543 }
    544 .gallery-caption {
    545 }
    546 .site-main .gallery a img {
    547     border: none;
    548     height: auto;
    549     max-width: 90%;
    550 }
    551 .site-main .gallery dd {
    552     margin: 0;
    553 }
    554 .site-main .gallery-columns-4 .gallery-item {
    555 }
    556 .site-main .gallery-columns-4 .gallery-item img {
    557 }
    558 
    559 /* Make sure embeds and iframes fit their containers */
    560 embed,
    561 iframe,
    562 object {
    563     max-width: 100%;
    564 }
    565 
    566 
    567 /* =Navigation
    568 ----------------------------------------------- */
    569 
    570 .site-main [class*="navigation"] {
    571     margin: 0 0 1.5em;
    572     overflow: hidden;
    573 }
    574 [class*="navigation"] .nav-previous {
    575     float: left;
    576     width: 50%;
    577 }
    578 [class*="navigation"] .nav-next {
    579     float: right;
    580     text-align: right;
    581     width: 50%;
    582 }
    583 
    584 
    585 /* =Comments
    586 ----------------------------------------------- */
    587 
    588 .comment-content a {
    589     word-wrap: break-word;
    590 }
    591 .bypostauthor {
    592 }
    593 
    594 
    595 /* =Widgets
    596 ----------------------------------------------- */
    597 
    598 .widget {
    599     margin: 0 0 1.5em;
    600 }
    601 
    602 /* Make sure select elements fit in widgets */
    603 .widget select {
    604     max-width: 100%;
    605 }
    606 
    607 /* Search widget */
    608 .widget_search .search-submit {
    609     display: none;
    610 }
    611 
    612 
    613 /* =Infinite Scroll
    614 ----------------------------------------------- */
    615 
    616 /* Globally hidden elements when Infinite Scroll is supported and in use. */
    617 .infinite-scroll .paging-navigation, /* Older / Newer Posts Navigation (always hidden) */
    618 .infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
    619     display: none;
    620 }
    621 
    622 /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before */
    623 .infinity-end.neverending .site-footer {
    624     display: block;
    625 }
    626 
    627 
    628 *, *:before, *:after {
    629     -moz-box-sizing: border-box;
    630     -webkit-box-sizing: border-box;
    631     box-sizing: border-box;
    632 }
    633 body {
    634     background-color: #EEEEEE;
    635     font-family: "Open Sans", sans-serif;
    636 }
    637 a {
    638     -moz-transition: color .1s ease-in-out;
    639     -webkit-transition: color .1s ease-in-out;
    640     transition: color .1s ease-in-out;
    641 }
    642 li > ul {
    643     margin-top: 0;
    644 }
    645 #page {
    646     overflow: hidden;
    647     margin-bottom: 2em;
    648 }
    649 #masthead {
    650     background-color: #23282D;
    651     overflow: auto;
    652 }
    653 #logo {
    654     line-height: 60px;
    655     color: #CCC;
    656     font-size: 1.2em;
    657 }
    658 #logo strong {
    659     color: #FFF;
    660 }
    661 #logo a {
    662     color: inherit;
    663     text-decoration: none;
    664 }
    665 #subhead {
    666     background-color: #0073AA;
    667     overflow: auto;
    668     padding: 20px 0;
    669 }
    670 #subhead .wporg-link {
    671     margin-top: 0.45em;
    672 }
    673 #subhead .wporg-link a {
    674     color: #FFF;
    675     text-decoration: none;
    676     font-size: 0.8em;
    677     letter-spacing: 0.08em;
    678 }
    679 #subhead .wporg-link a:hover {
    680     color: #EEE;
    681 }
    682 .main-navigation {
    683     clear: none;
    684 }
    685 .main-navigation a {
    686     color: #EEE;
    687     padding: 15px 20px;
    688 }
    689 .search-form {
    690     width: 100%;
    691     position: relative;
    692 }
    693 .search-form .search-field {
    694     width: 100%;
    695     padding: 12px 5px 10px 32px;
    696     border: 0;
    697     box-sizing: border-box;
    698 }
    699 .search-form label {
    700     display: block;
    701     overflow: hidden;
    702 }
    703 .search-form .dashicons-search {
    704     position: absolute;
    705     top: 10px;
    706     left: 6px;
    707     font-size: 1.2em;
    708     color: #666;
    709 }
    710 .search-form input[type="submit"] {
    711     font-size: 0.8em;
    712     float: right;
    713     border: 0;
    714     margin-left: 10px;
    715     padding: 14px 22px 12px;
    716 
    717 }
    718 .main-navigation ul {
    719     float: right;
    720 }
    721 .main-navigation li {
    722     text-align: center;
    723     font-size: 0.8em;
    724     line-height:2.2em;
    725 }
    726 .main-navigation li.current_page_item {
    727     border-bottom: 4px solid #DFDFDF;
    728 }
    729 .main-navigation li:hover {
    730     color: #CCC;
    731 }
    732 .main-navigation li a:hover {
    733     color: inherit;
    734 }
    735 #content {
    736     padding-top: 40px;
    737 }
    738 #secondary aside {
    739     background: #FFF;
    740     padding: 20px;
    741     font-size: small;
    742 }
    743 .widget-title {
    744     text-transform: uppercase;
    745     padding: 0;
    746     margin: 0 0 22px 0;
    747     font-size: 12px;
    748     font-weight: bold;
    749 }
    750 #secondary ul, #secondary li {
    751     list-style: none;
    752     margin-left: 0;
    753     padding-left: 0;
    754 }
    755 #secondary #cats {
    756     padding-bottom: 6px;
    757 }
    758 #secondary #cats ul {
    759     margin-bottom: 0;
    760 }
    761 #secondary #cats li {
    762     margin-bottom: 14px;
    763 }
    764 #secondary #cats li a {
    765     text-decoration: none;
    766     color: #21759b;
    767 }
    768 
    769 /* Small menu */
    770 .menu-jobs-toggle {
    771     display: none;
    772 }
    773 .menu-jobs {
    774     display: block;
    775 }
    776 
    777 .all-job-categories a:hover, .jobs-group a:hover, #secondary #cats li a:hover {
    778     color: #2EA2CC;
    779 }
    780 .jobs-count {
    781     font-size: 1.2em;
    782     line-height: 1.8em;
    783     text-align: right;
    784     color: #AAA;
    785 }
    786 .jobs-count .dashicons-rss {
    787     font-size: 1.2em;
    788     line-height: 1.4em;
    789     margin-right: 0.5em;
    790     color: #F56E28;
    791 }
    792 .jobs-count .dashicons-rss:hover {
    793     color: #D54E21;
    794 }
    795 .job-cat-item:before, .search-header:before {
    796     display: inline-block;
    797     -webkit-font-smoothing: antialiased;
    798     font: normal 20px/1 'dashicons';
    799     vertical-align: top;
    800     margin-right: 8px;
    801 }
    802 .job-cat-item-performance:before { /* Performance */
    803     content: '\f311';
    804 }
    805 .job-cat-item-migration:before { /* Migration */
    806     content: '\f310';
    807 }
    808 .job-cat-item-development:before { /* Development */
    809     content: '\f308';
    810 }
    811 .job-cat-item-design:before { /* Design */
    812     content: '\f309';
    813 }
    814 .job-cat-item-writing:before { /* Writing */
    815     content: '\f109';
    816 }
    817 .job-cat-item-general:before { /* General */
    818     content: '\f338';
    819 }
    820 .job-cat-item-plugin-development:before { /* Plugin  */
    821     content: '\f106';
    822 }
    823 .job-cat-item-theme-customization:before { /* Themes */
    824     content: '\f100';
    825 }
    826 .job-cat-item-contributor:before { /* Contributor */
    827     content: '\f155';
    828 }
    829 .job-cat-item-support:before { /* Support */
    830     content: '\f125';
    831 }
    832 .job-cat-item-translation:before { /* Translation */
    833     content: '\f326';
    834 }
    835 
    836 .job-cat-item-all:before {
    837     content: '\f120';
    838 }
    839 .search-header {
    840     margin-left: 2.5em;
    841 }
    842 .search-header:before {
    843     content: '\f179';
    844     padding-right: 0.1em;
    845 }
    846 .row {
    847     overflow: hidden;
    848     padding: 15px 0;
    849     font-size: 0.9em;
    850 }
    851 .row-head {
    852     margin-bottom: 10px;
    853     padding: 0;
    854 }
    855 .job-list-head h2:before {
    856     font: normal 30px/1 'dashicons';
    857     margin-right:0;
    858     margin-top: 2px;
    859 }
    860 .job-list-head h2 {
    861     font-size: 1.5em;
    862     margin: 0;
    863 }
    864 .job-list-head h2 span.posts-count {
    865     display: none;
    866 }
    867 .search-results .job-list-head h2 span.posts-count {
    868     display: initial;
    869 }
    870 .job-list-head h2 a {
    871     text-decoration: none;
    872     color: #000;
    873 }
    874 .job-list-col-labels {
    875     background-color: #F9F9F9;
    876     font-size: 0.9em;
    877     border-bottom: 1px solid #E1E1E1;
    878 }
    879 .job-date {
    880     text-align: center;
    881 }
    882 .container .job-type.grid_1 {
    883     width: 83px;
    884 }
    885 .job-location {
    886     padding-right: 1em;
    887 }
    888 .job-categories {
    889     color: #595959;
    890     line-height: 1.3em;
    891     border-left: 1px solid #ccc;
    892     margin-left: 10px;
    893     padding-left: 10px
    894 }
    895 .all-job-categories, #all-job-categories {
    896     margin-bottom: 3em;
    897     margin-top: 0.8em;
    898 }
    899 .all-job-categories {
    900     text-align: right;
    901 }
    902 .all-job-categories a {
    903     color: #21759b;
    904     text-decoration: none;
    905     font-size: small;
    906 }
    907 .row-1 {
    908     background-color: #FFF;
    909 }
    910 .row-0 {
    911     background-color: #F9F9F9;
    912 }
    913 .jobs-group a {
    914     color: #21759b;
    915     text-decoration: none;
    916 }
    917 .site-footer {
    918     text-align: center;
    919     background-color: #F7F7F7;
    920 }
     997    max-width: var(--wide-width);
     998    margin-inline: auto;
     999    padding: var(--space-40) var(--space-20) var(--space-60);
     1000}
     1001
     1002.entry-article .entry-header h1,
    9211003.entry-header h1 {
    922     margin: 0 0 0.2em;
    923     padding-top: 20px;
    924     font-size: 1.5em;
    925 }
    926 .entry-header .entry-meta {
    927     font-size: 0.9em;
    928 }
    929 .posted-on {
    930     color: #CCC;
     1004    font-size: var(--font-size-h2);
     1005    margin: 0 0 var(--space-20);
     1006}
     1007
     1008.entry-content {
     1009    margin-top: var(--space-20);
     1010}
     1011
     1012.entry-content p {
     1013    margin-bottom: var(--space-20);
     1014}
     1015
     1016.items-required {
    9311017    font-style: italic;
    932 }
    933 .posted-on a {
    934     color: #AAA;
    935     text-decoration: none;
    936     border-bottom: 1px dashed #999;
    937 }
    938 .entry-article {
    939     background-color: #FFF;
    940     position: relative;
    941     padding-bottom: 0.6em;
    942 }
    943 .entry-article .entry-article .entry-header, .entry-article .entry-article .entry-content {
    944     margin: 0;
    945 }
    946 .entry-article .entry-article .grid_6 {
    947     width: 420px;
    948 }
    949 .entry-article article {
    950     padding-bottom: 0.6em;
    951 }
    952 .entry-header, .entry-content, footer.entry-meta {
    953     margin-left: 20px;
    954     margin-right: 30px;
    955 }
    956 .entry-main, .job-meta dl:first-child  {
    957     margin-top: 1.2em;
    958 }
    959 .entry-main .entry-content:first-child, .entry-content p:first-child {
    960     margin-top: 0;
    961 }
    962 .entry-main p, .job-meta dd {
    963     font-size: 0.9em;
    964     line-height: 1.5em;
    965 }
    966 .job-meta dt {
    967     font-size: 0.8em;
    968     text-transform: uppercase;
    969 }
    970 .job-meta dd {
    971     margin-left: 0;
    972     margin-top: 6px;
    973     margin-bottom: 1.3em;
    974 }
    975 
    976 .items-required {
    977     position: absolute;
    978     top: 1.5em;
    979     right: 2em;
    980     font-style: italic;
    981     color: #595959;
    982 }
     1018    color: var(--color-charcoal-4);
     1019    margin-bottom: var(--space-20);
     1020}
     1021
    9831022.post-field-section-header {
     1023    font-family: var(--font-body);
    9841024    text-transform: uppercase;
    9851025    margin: 0;
    986     font-weight: bold;
    987     font-size: 1em;
    988 }
     1026    font-weight: 700;
     1027    font-size: var(--font-size-base);
     1028    margin-bottom: var(--space-10);
     1029}
     1030
    9891031.post-field-section-subheader {
    9901032    font-style: italic;
    991     color: #595959;
    992 }
    993 .post-job, #si_contact_form1 {
    994     font-size: 0.8em;
    995     margin-top: 1.2em;
    996     margin-right: -1.9em;
    997 }
    998 .post-job label, #si_contact_form1 label {
     1033    color: var(--color-charcoal-4);
     1034    margin-bottom: var(--space-30);
     1035}
     1036
     1037.post-job {
     1038    margin-top: var(--space-30);
     1039}
     1040
     1041.post-job label {
    9991042    display: block;
    1000     font-weight: bold;
    1001     margin-bottom: 0.5em;
    1002 }
     1043    font-weight: 600;
     1044    font-size: var(--font-size-sm);
     1045    margin-bottom: 6px;
     1046}
     1047
    10031048.post-job label span {
    10041049    font-style: italic;
    10051050    font-weight: normal;
    1006     color: #595959;
    1007 }
     1051    color: var(--color-charcoal-4);
     1052}
     1053
     1054.post-job-input {
     1055    margin-bottom: var(--space-20);
     1056}
     1057
    10081058.post-job input[type="text"],
    10091059.post-job input[type="email"],
    … …  
    10111061.post-job input[type="url"],
    10121062.post-job input[type="password"] {
    1013     width: 98%;
    1014 }
    1015 .post-job input[type="text"], #si_contact_form1 input[type="text"],
    1016 .post-job input[type="email"],
    1017 .post-job input[type="tel"],
    1018 .post-job input[type="url"],
    1019 .post-job input[type="password"] {
    1020     margin-bottom: 1.6em !important; /* Only !important to override inline margin for contact form */
    1021 }
     1063    width: 100%;
     1064}
     1065
    10221066.post-job select {
    1023     margin-bottom: 1.8em !important;
     1067    margin-bottom: var(--space-10);
    10241068    margin-top: 2px;
    1025 }
     1069    padding: 8px 15px;
     1070}
     1071
     1072.post-job-contact-info,
     1073.post-job-company-info {
     1074    display: inline-block;
     1075    vertical-align: top;
     1076    width: 48%;
     1077    margin-bottom: var(--space-30);
     1078}
     1079
     1080.post-job-contact-info {
     1081    margin-right: 2%;
     1082    border-right: 1px solid var(--color-light-grey-1);
     1083    padding-right: 2%;
     1084}
     1085
    10261086.post-job-job-info {
    1027     margin-top: 2em;
    1028     padding-top: 2em;
    1029     border-top: 1px solid #EEE;
     1087    margin-top: var(--space-30);
     1088    padding-top: var(--space-30);
     1089    border-top: 1px solid var(--color-light-grey-1);
    10301090    width: 100%;
    10311091}
     1092
    10321093.post-job-job-info textarea {
    1033     margin-bottom: 1em;
    1034 }
    1035 .container .grid_5.post-job-contact-info {
    1036     border-right: 1px solid #EEE;
    1037     width: 369px;
    1038     margin-right: 1.5em;
    1039     padding-right: 0.8em;
    1040 }
    1041 .container .post-job-job-info .grid_9 {
    1042     padding-right: 25px;
    1043 }
    1044 #FSContact1 div:last-child {
    1045     overflow: auto;
    1046 }
    1047 #FSContact1, #si_contact_form1 input[type="text"] {
    1048     width: 98% !important;
    1049 }
    1050 #si_contact_form1 input[type="submit"] {
    1051     margin-right: 0.4em !important;
    1052 }
    1053 .post-field-section-subheader, .post-job-job-info .post-field-section-header {
    1054     margin-bottom: 2em;
    1055 }
    1056 /*
    1057 input[type="button"].submit-job, input[type="submit"].submit-job,
    1058 #si_contact_form1 input[type="submit"] {
     1094    margin-bottom: var(--space-20);
     1095}
     1096
     1097.post-job .howtoapply-inputs {
     1098    display: flex;
     1099    gap: var(--space-10);
     1100    align-items: center;
     1101}
     1102
     1103.post-job .howtoapply-inputs select {
     1104    width: auto;
     1105    min-width: 140px;
     1106}
     1107
     1108.post-job .howtoapply-inputs input {
     1109    width: 100%;
     1110}
     1111
     1112.job-help-text {
     1113    margin-top: 4px;
     1114    margin-bottom: var(--space-20);
     1115    color: var(--color-charcoal-5);
     1116    font-size: var(--font-size-xs);
     1117    font-style: italic;
     1118}
     1119
     1120input[type="button"].submit-job,
     1121input[type="submit"].submit-job {
    10591122    float: right;
    1060     margin-top: 1em;
    1061     margin-right: 0.4em;
    1062     background: #21759B;
    1063     font-size: 1em;
    1064     box-shadow: none;
    1065     color: #FFF;
    1066     border: 0;
    1067     text-shadow: none;
    1068     padding: 1em 1.8em;
    1069 }
    1070 input[type="button"].submit-job:hover, input[type="submit"].submit-job:hover {
    1071     box-shadow: none;
    1072     background-color: #2286A8;
    1073 }
    1074 */
    1075 input[type="button"].submit-job, input[type="submit"].submit-job,
    1076 #si_contact_form1 input[type="submit"] {
    1077     float: right;
    1078     font-size: 1em;
    1079     margin-top: 1em;
    1080     margin-right: 0.4em;
    1081 
    1082     background-color: #21759b;
    1083     background-image: -webkit-gradient(linear, left top, left bottom, from(#2a95c5), to(#21759b));
    1084     background-image: -webkit-linear-gradient(top, #2a95c5, #21759b);
    1085     background-image: -moz-linear-gradient(top, #2a95c5, #21759b);
    1086     background-image: -ms-linear-gradient(top, #2a95c5, #21759b);
    1087     background-image: -o-linear-gradient(top, #2a95c5, #21759b);
    1088     background-image: linear-gradient(to bottom, #2a95c5, #21759b);
    1089     border-color: #21759b;
    1090     border-bottom-color: #1e6a8d;
    1091     -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
    1092     box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
    1093     color: #fff;
    1094     text-decoration: none;
    1095     text-shadow: 0 1px 0 rgba(0,0,0,0.1);
    1096 }
    1097 input[type="button"].submit-job:hover, input[type="submit"].submit-job:hover,
    1098 #si_contact_form1 input[type="submit"]:hover {
    1099     background-color: #278ab7;
    1100     background-image: -webkit-gradient(linear, left top, left bottom, from(#2e9fd2), to(#21759b));
    1101     background-image: -webkit-linear-gradient(top, #2e9fd2, #21759b);
    1102     background-image: -moz-linear-gradient(top, #2e9fd2, #21759b);
    1103     background-image: -ms-linear-gradient(top, #2e9fd2, #21759b);
    1104     background-image: -o-linear-gradient(top, #2e9fd2, #21759b);
    1105     background-image: linear-gradient(to bottom, #2e9fd2, #21759b);
    1106     border-color: #1b607f;
    1107     -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
    1108     box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
    1109     color: #fff;
    1110     text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
    1111 }
     1123    margin-top: var(--space-20);
     1124    cursor: pointer;
     1125}
     1126
    11121127.required.lacks-input {
    1113     background-color: #FEE;
    1114     border-color: #C44;
    1115 }
    1116 .no-job {
    1117     font-style: italic;
    1118 }
    1119 .post-job .howtoapply-inputs input {
    1120     width: 50%;
    1121 }
    1122 .job-help-text {
    1123     margin-top: -1em;
    1124     margin-bottom: 1.6em;
    1125     color: #595959;
    1126     font-style: italic;
    1127 }
     1128    background-color: #fee;
     1129    border-color: #c44;
     1130}
     1131
     1132
     1133/* ============================================
     1134   Notices
     1135   ============================================ */
     1136
    11281137.notice {
    1129     font-size: 0.8em;
     1138    font-size: var(--font-size-sm);
    11301139    border-width: 1px;
    11311140    border-style: solid;
    1132     border-color: #FFF;
    1133     padding: 1em 1.5em;
    1134     position: relative;
    1135     margin-right: 1.5em;
    1136 }
     1141    border-radius: var(--radius);
     1142    padding: var(--space-20) var(--space-30);
     1143    margin-bottom: var(--space-30);
     1144}
     1145
    11371146.notice h2 {
    1138     margin: 0 0 1em;
    1139     font-weight: bold;
    1140 }
     1147    font-family: var(--font-body);
     1148    font-size: var(--font-size-lg);
     1149    font-weight: 700;
     1150    margin: 0 0 var(--space-10);
     1151}
     1152
    11411153.notice p:last-child {
    11421154    margin-bottom: 0;
    11431155}
     1156
    11441157.notice-success {
    1145     background-color: #DFF2BF;
    1146     color: #4F8A10;
    1147     border-color: #4F8A10;
    1148 }
     1158    background-color: var(--color-acid-green-3);
     1159    color: #2d6a30;
     1160    border-color: #4f8a10;
     1161}
     1162
    11491163.notice-success .job-token {
    1150     font-size: 20px;
     1164    font-size: var(--font-size-lg);
    11511165    font-weight: bold;
    11521166}
     1167
    11531168.notice-info {
    1154     background-color: #FEEFB3;
    1155     color: #9F6000;
    1156     border-color: #9F6000;
    1157 }
    1158 .notice-info:not(.accept)::before {
    1159     content: "\f348";
    1160     font-family: "dashicons";
    1161     font-size: 36px;
    1162     position: absolute;
    1163     top: 6px;
    1164 }
    1165 .notice-info div:first-child {
    1166     display: block;
    1167     margin-left: 48px;
    1168 }
     1169    background-color: #feefb3;
     1170    color: #9f6000;
     1171    border-color: #9f6000;
     1172}
     1173
    11691174.notice-error {
    1170     background-color: #FFBABA;
    1171     color: #D8000C;
    1172     border-color: #D8000C;
     1175    background-color: #ffbaba;
     1176    color: #d8000c;
     1177    border-color: #d8000c;
    11731178}
    11741179
    11751180.accept {
    1176     font-size: 1.1em;
    1177     margin-right: 0.4em;
    1178     margin-top: 1em;
    1179 }
     1181    margin-top: var(--space-20);
     1182}
     1183
    11801184.accept ul {
    1181     margin-left: 1.4em;
    1182 }
     1185    margin-left: var(--space-20);
     1186    margin-bottom: var(--space-20);
     1187}
     1188
     1189.accept ul li {
     1190    list-style: disc;
     1191    margin-bottom: 8px;
     1192}
     1193
    11831194.accept p:last-child {
    11841195    text-align: right;
    11851196}
     1197
    11861198.post-job .accept label {
    11871199    display: inline-block;
    1188     margin-left: 0.5em;
    1189 }
    1190 
    1191 /* FAQ page */
     1200    margin-left: 8px;
     1201}
     1202
     1203
     1204/* ============================================
     1205   FAQ Page
     1206   ============================================ */
     1207
    11921208.page-faq .entry-content {
    1193     margin-top: inherit;
    1194 }
     1209    margin-top: 0;
     1210}
     1211
    11951212.page-faq h2 {
    1196     border-bottom: 1px solid #ccc;
    1197     font-size: 20px;
    1198     margin-bottom: 2rem;
    1199 }
     1213    font-size: var(--font-size-h5);
     1214    border-bottom: 1px solid var(--color-light-grey-1);
     1215    padding-bottom: var(--space-10);
     1216    margin-bottom: var(--space-20);
     1217}
     1218
    12001219.page-faq .entry-content dl {
    1201     font-size: 0.9em;
    1202 }
     1220    font-size: var(--font-size-sm);
     1221}
     1222
     1223.page-faq .entry-content dt {
     1224    font-weight: 600;
     1225    margin-bottom: 4px;
     1226}
     1227
    12031228.page-faq .entry-content dd {
    1204     margin: 0 0 1.5em;
    1205 }
    1206 
    1207 /* Feedback page */
    1208 #fscf_submit_div1 {
    1209     margin-bottom: 4rem;
    1210     margin-top: 2rem;
    1211 }
    1212 
    1213 /* Global footer */
    1214 #wporg-footer {
    1215     clear: both;
    1216     overflow: auto;
    1217     margin: 0 auto;
    1218     padding: 22px 14px 65px 14px;
    1219     border-top: 1px solid #dfdfdf;
    1220     background-color: #f7f7f7;
    1221 }
    1222 
    1223 #wporg-footer .wrapper {
    1224     overflow: auto;
    1225     width: 932px;
    1226 }
    1227 
    1228 #wporg-footer ul {
     1229    margin: 0 0 var(--space-30);
     1230    color: var(--color-charcoal-4);
     1231}
     1232
     1233
     1234/* ============================================
     1235   Category & Search Archive Pages
     1236   ============================================ */
     1237
     1238.archive-page {
     1239    max-width: var(--wide-width);
     1240    margin-inline: auto;
     1241    padding: var(--space-40) var(--space-20) var(--space-60);
     1242}
     1243
     1244.jobs-group {
     1245    margin-bottom: var(--space-40);
     1246}
     1247
     1248.jobs-group h2 {
     1249    font-size: var(--font-size-h4);
     1250    margin-bottom: var(--space-20);
     1251}
     1252
     1253.row {
     1254    display: grid;
     1255    grid-template-columns: 80px 1fr 100px 150px;
     1256    gap: var(--space-10);
     1257    padding: var(--space-10) var(--space-20);
     1258    font-size: var(--font-size-sm);
     1259    align-items: center;
     1260    border-bottom: 1px solid var(--color-light-grey-2);
     1261}
     1262
     1263.row:hover {
     1264    background-color: var(--color-light-grey-2);
     1265}
     1266
     1267.row-head {
     1268    display: block;
     1269    margin-bottom: var(--space-10);
     1270    padding: 0;
     1271    border-bottom: none;
     1272}
     1273
     1274.row-head:hover {
     1275    background-color: transparent;
     1276}
     1277
     1278.job-list-head h2 {
     1279    font-size: var(--font-size-h4);
     1280    margin: 0;
     1281}
     1282
     1283.job-list-head h2 a {
     1284    text-decoration: none;
     1285    color: var(--color-charcoal-1);
     1286}
     1287
     1288.job-list-head h2 span.posts-count {
     1289    display: none;
     1290}
     1291
     1292.search-results .job-list-head h2 span.posts-count {
     1293    display: initial;
     1294}
     1295
     1296.job-list-col-labels {
     1297    background-color: var(--color-light-grey-2);
     1298    font-weight: 600;
     1299    border-bottom: 1px solid var(--color-light-grey-1);
     1300}
     1301
     1302.row-0 {
     1303    background-color: var(--color-white);
     1304}
     1305
     1306.row-1 {
     1307    background-color: var(--color-light-grey-2);
     1308}
     1309
     1310.job-date {
     1311    text-align: center;
     1312    color: var(--color-charcoal-4);
     1313}
     1314
     1315.job-title a {
     1316    color: var(--color-blueberry-1);
     1317    text-decoration: none;
     1318    font-weight: 500;
     1319}
     1320
     1321.job-title a:hover {
     1322    text-decoration: underline;
     1323}
     1324
     1325.jobs-count {
     1326    font-size: var(--font-size-sm);
     1327    color: var(--color-charcoal-5);
     1328    text-align: right;
     1329}
     1330
     1331.all-job-categories {
     1332    margin-top: var(--space-20);
     1333    margin-bottom: var(--space-40);
     1334    text-align: right;
     1335}
     1336
     1337.all-job-categories a {
     1338    color: var(--color-blueberry-1);
     1339    text-decoration: none;
     1340    font-size: var(--font-size-sm);
     1341}
     1342
     1343.all-job-categories a:hover {
     1344    text-decoration: underline;
     1345}
     1346
     1347.no-job {
     1348    grid-column: 1 / -1;
     1349    font-style: italic;
     1350    color: var(--color-charcoal-4);
     1351    padding: var(--space-20);
     1352}
     1353
     1354@media (max-width: 600px) {
     1355    .row {
     1356        grid-template-columns: 1fr;
     1357        gap: 4px;
     1358    }
     1359
     1360    .job-date {
     1361        text-align: left;
     1362    }
     1363
     1364    .job-list-col-labels {
     1365        display: none;
     1366    }
     1367}
     1368
     1369
     1370/* ============================================
     1371   Sidebar (Category/Search pages)
     1372   ============================================ */
     1373
     1374#secondary {
     1375    max-width: 280px;
     1376}
     1377
     1378#secondary aside {
     1379    background: var(--color-white);
     1380    border: 1px solid var(--color-light-grey-1);
     1381    border-radius: var(--radius);
     1382    padding: var(--space-20);
     1383    font-size: var(--font-size-sm);
     1384}
     1385
     1386.widget-title {
     1387    font-family: var(--font-body);
     1388    text-transform: uppercase;
     1389    padding: 0;
     1390    margin: 0 0 var(--space-20) 0;
     1391    font-size: var(--font-size-xs);
     1392    font-weight: 700;
     1393    letter-spacing: 0.05em;
     1394    color: var(--color-charcoal-4);
     1395}
     1396
     1397#secondary ul,
     1398#secondary li {
     1399    list-style: none;
     1400    margin-left: 0;
     1401    padding-left: 0;
     1402}
     1403
     1404#secondary #cats li {
     1405    margin-bottom: var(--space-10);
     1406}
     1407
     1408#secondary #cats li a {
     1409    text-decoration: none;
     1410    color: var(--color-blueberry-1);
     1411    transition: color var(--transition);
     1412}
     1413
     1414#secondary #cats li a:hover {
     1415    color: var(--color-deep-blueberry);
     1416}
     1417
     1418
     1419/* ============================================
     1420   Content Area Layout
     1421   ============================================ */
     1422
     1423.site-content {
     1424    max-width: var(--wide-width);
     1425    margin-inline: auto;
     1426    padding: var(--space-40) var(--space-20);
     1427}
     1428
     1429.site-content.has-sidebar {
     1430    display: grid;
     1431    grid-template-columns: 280px 1fr;
     1432    gap: var(--space-40);
     1433}
     1434
     1435.content-area {
     1436    min-width: 0;
     1437}
     1438
     1439
     1440/* ============================================
     1441   No Results
     1442   ============================================ */
     1443
     1444.no-results {
     1445    text-align: center;
     1446    padding: var(--space-80) var(--space-20);
     1447}
     1448
     1449.no-results .page-title {
     1450    margin-bottom: var(--space-20);
     1451}
     1452
     1453.no-results .search-form {
     1454    max-width: 400px;
     1455    margin-inline: auto;
     1456    display: flex;
     1457    gap: var(--space-10);
     1458}
     1459
     1460.no-results .search-field {
     1461    flex: 1;
     1462}
     1463
     1464.no-results .search-submit {
     1465    white-space: nowrap;
     1466}
     1467
     1468
     1469/* ============================================
     1470   Search Form
     1471   ============================================ */
     1472
     1473.search-form {
     1474    display: flex;
     1475    gap: var(--space-10);
     1476    align-items: center;
     1477}
     1478
     1479.search-form label {
     1480    flex: 1;
     1481    margin-bottom: 0;
     1482}
     1483
     1484.search-form .search-field {
     1485    width: 100%;
     1486    padding: 10px 15px;
     1487}
     1488
     1489.search-form .search-submit {
     1490    white-space: nowrap;
     1491}
     1492
     1493
     1494/* ============================================
     1495   Post Navigation
     1496   ============================================ */
     1497
     1498.post-navigation,
     1499.paging-navigation {
     1500    margin: var(--space-40) 0;
     1501    overflow: hidden;
     1502}
     1503
     1504.post-navigation .nav-previous,
     1505.paging-navigation .nav-previous {
    12291506    float: left;
    1230     overflow: auto;
    1231     width: 135px;
    1232     margin-left: 24px;
    1233 }
    1234 
    1235 @media screen and (min-width:960px) {
    1236     #wporg-footer ul:first-child {
    1237         margin-left: 0;
    1238     }
    1239 }
    1240 
    1241 @media screen and (min-width:561px) and (max-width:995px) {
    1242     #wporg-footer .wrapper {
    1243         max-width: 600px;
    1244     }
    1245 
    1246     #wporg-footer ul:nth-child(3n+1) {
    1247         margin-left: 0;
    1248     }
    1249 
    1250     #wporg-footer ul:nth-child(4n) {
    1251         clear: both;
    1252     }
    1253 
    1254     #wporg-footer ul {
    1255         margin-left: 2%;
    1256         width: 32%;
    1257     }
    1258 }
    1259 
    1260 @media screen and (max-width:560px) {
    1261     #wporg-footer .wrapper {
    1262         max-width: 360px;
    1263     }
    1264 
    1265     #wporg-footer ul:nth-child(2n+1) {
    1266         margin-left: 0;
    1267     }
    1268 
    1269     #wporg-footer ul:nth-child(odd) {
    1270         clear: both;
    1271     }
    1272 
    1273     #wporg-footer ul {
    1274         margin-left: 4%;
    1275         width: 48%;
    1276     }
    1277 }
    1278 
    1279 #wporg-footer ul li {
    1280     font-size: 14px;
    1281     margin-bottom: 1px;
    1282     color: #bbb;
    1283     list-style-type: none;
    1284 }
    1285 
    1286 #wporg-footer ul li a {
    1287     border: none;
    1288 }
    1289 
    1290 #wporg-footer h6 {
    1291     clear: both;
    1292     background: url('https://s.wordpress.org/style/images/codeispoetry.png?2') center center no-repeat;
    1293     background-size: 190px 15px;
    1294     width: 190px;
    1295     height: 15px;
    1296     text-indent: -9999px;
    1297     margin-top: 50px;
    1298 }
    1299 .no-static #wporg-footer h6 {
    1300     background-image: url('https://wordpress.org/style/images/codeispoetry.png?2');
    1301 }
    1302 
    1303 @media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
    1304     #wporg-footer h6 {
    1305         background-image: url('https://s.wordpress.org/style/images/codeispoetry-2x.png?2');
    1306     }
    1307     .no-static #wporg-footer h6 {
    1308         background-image: url('https://wordpress.org/style/images/codeispoetry-2x.png?2');
    1309     }
    1310 }
    1311 
    1312 /* Global footer override */
    1313 .site-footer {
    1314     border-top: 1px solid #DFDFDF;
    1315     padding-top: 0;
    1316 }
    1317 .jobswp #wporg-footer {
    1318     border: 0;
    1319     padding-right: 0;
    1320 }
    1321 .jobswp #wporg-footer .wrapper {
    1322     margin: 0 auto;
    1323     text-align: left;
    1324 }
    1325 .jobswp #wporg-footer p {
    1326     padding: 0;
    1327     margin: 0;
    1328 }
    1329 .jobswp #wporg-footer a {
     1507    width: 50%;
     1508}
     1509
     1510.post-navigation .nav-next,
     1511.paging-navigation .nav-next {
     1512    float: right;
     1513    text-align: right;
     1514    width: 50%;
     1515}
     1516
     1517
     1518/* ============================================
     1519   Edit Link
     1520   ============================================ */
     1521
     1522.edit-link {
     1523    font-size: var(--font-size-sm);
     1524}
     1525
     1526.edit-link a {
     1527    color: var(--color-charcoal-4);
     1528}
     1529
     1530
     1531/* ============================================
     1532   Posted On (Single Post Meta)
     1533   ============================================ */
     1534
     1535.posted-on {
     1536    color: var(--color-charcoal-5);
     1537    font-style: italic;
     1538}
     1539
     1540.posted-on a {
     1541    color: var(--color-charcoal-4);
    13301542    text-decoration: none;
    1331     color: #21759b;
    1332 }
    1333 .jobswp #wporg-footer ol, .jobswp #wporg-footer ul {
    1334     padding-left: 0;
    1335     margin-top: 0;
    1336 }
    1337 .jobswp #wporg-footer a:hover {
    1338     color: #d54e21;
    1339 }
    1340 .jobswp #wporg-footer a:visited {
    1341     color: #4ca6cf;
    1342 }
    1343 
    1344 @media only screen and (max-width: 767px) {
    1345     .jobswp #wporg-footer .wrapper {
    1346         width: 442px;
    1347     }
    1348 }
    1349 
    1350 @media only screen and (max-width: 560px) {
    1351     .jobswp #wporg-footer .wrapper {
    1352         width: 285px;
    1353     }
    1354 }
    1355 
    1356 /* Mobile */
    1357 
    1358 @media only screen and (max-width: 995px) {
    1359     .container .jobs-group .job-title.grid_4 {
    1360         width: 220px;
    1361     }
    1362     .container .main-navigation a {
    1363         padding-left: 15px;
    1364         padding-right: 15px;
    1365     }
    1366     #subhead .wporg-link a {
    1367         font-size: 0.78em;
    1368     }
    1369 }
    1370 @media only screen and (max-width: 767px) {
    1371     .container .hentry .grid_3,
    1372     .container .hentry .grid_4,
    1373     .container .hentry .grid_5,
    1374     .container .hentry .grid_6,
    1375     .container .jobs-group .grid_1,
    1376     .container .jobs-group .grid_2,
    1377     .container .jobs-group .grid_4,
    1378     .container .jobs-group .grid_7,
    1379     .container .post-job-job-info .grid_9,
    1380     .post-job-job-info,
    1381     .container .no-job.grid_9 {
     1543}
     1544
     1545.job-categories {
     1546    color: var(--color-charcoal-4);
     1547    margin-left: var(--space-10);
     1548    padding-left: var(--space-10);
     1549    border-left: 1px solid var(--color-light-grey-1);
     1550}
     1551
     1552
     1553/* ============================================
     1554   Responsive Typography
     1555   ============================================ */
     1556
     1557@media (max-width: 781px) {
     1558    :root {
     1559        --space-edge: 20px;
     1560    }
     1561
     1562    h1 {
     1563        font-size: 52px;
     1564    }
     1565
     1566    h2 {
     1567        font-size: 30px;
     1568    }
     1569
     1570    h3 {
     1571        font-size: 26px;
     1572    }
     1573}
     1574
     1575@media (max-width: 600px) {
     1576    h1 {
     1577        font-size: 36px;
     1578    }
     1579
     1580    h2 {
     1581        font-size: 26px;
     1582    }
     1583
     1584    .post-job-contact-info,
     1585    .post-job-company-info {
     1586        display: block;
    13821587        width: 100%;
    1383     }
    1384     .container .jobs-group .grid_1,
    1385     .container .jobs-group .grid_2,
    1386     .container .jobs-group .grid_4,
    1387     .container .hentry .grid_3,
    1388     .container .no-job.grid_9 {
    1389         padding-left: 20px;
    1390         padding-right: 20px;
    1391     }
    1392     .container .post-job-job-info .grid_3 {
    1393         padding-left: 0;
    1394     }
    1395     .post-job-input input[type="text"],
    1396     .post-job-input input[type="email"],
    1397     .post-job-input input[type="tel"],
    1398     .post-job-input input[type="url"],
    1399     .post-job-input input[type="password"]
    1400     .post-job-input textarea {
    1401         width: 95%;
    1402     }
    1403     .container .grid_5.post-job-contact-info {
    1404         border: none;
    1405     }
    1406     .container .post-job-job-info .grid_9 {
    1407         padding-right: 10px;
    1408     }
    1409     .container .hentry {
    1410         word-wrap: break-word;
    1411     }
    1412     .items-required  {
    1413         position: relative;
    1414         top: 0;
    1415         right: 0;
    1416     }
    1417     span.edit-link {
    1418         margin-left: 20px;
    1419     }
    1420     #content {
    1421         padding-top: 20px;
    1422     }
    1423     .container .site-branding {
    1424         width: 100%;
    1425     }
    1426     #logo {
    1427         text-align: center;
    1428     }
    1429     .container .main-navigation.grid_8 {
    1430         float: left;
    1431     }
    1432     .container .main-navigation a {
    1433         padding: 0 6px;
    1434     }
    1435     #subhead {
    1436         padding: 10px 0;
    1437     }
    1438     #subhead .wporg-link {
    1439         margin-top: 0;
    1440         margin-bottom: 0.5em;
    1441     }
    1442 
    1443     #cats {
    1444         position: relative;
    1445     }
    1446     #cats h3 {
    1447         color: #2ea2cc;
    1448         margin: 0;
    1449         padding-bottom: 10px;
    1450     }
    1451     #cats h3:after {
    1452         content: '\f228';
    1453         font: 16px 'dashicons';
    1454         float: right;
    1455         vertical-align: top;
    1456     }
    1457     .menu-jobs {
    1458         display: none;
    1459         margin-top: 10px;
    1460     }
    1461     .menu-jobs.mobile-pop {
    1462         display: block;
    1463     }
    1464     .menu-jobs-toggle {
    1465         background: transparent;
    1466         display: block;
    1467         position: absolute;
    1468         top: 0;
    1469         left: 0;
    1470         width: 100%;
    1471         height: 50px;
    1472     }
    1473     .search-form .search-field {
    1474         font-size: 0.8em;
    1475     }
    1476     .search-form input[type="submit"] {
    1477         padding-top: 11px;
    1478         padding-bottom: 11px;
    1479     }
    1480     #wporg-footer {
    1481         min-width: inherit;
    1482     }
    1483     .container .jobs-group .job-list-head.grid_7 {
    1484         width: 260px;
    1485     }
    1486     .container .jobs-group .job-list-head h2 {
    1487         display: inline;
    1488     }
    1489     .container .jobs-group .jobs-count.grid_2 {
    1490         display: inline-block;
     1588        margin-right: 0;
     1589        border-right: none;
    14911590        padding-right: 0;
    1492         width: 116px;
    1493     }
    1494     .container .job-list-col-labels {
    1495         display: none;
    1496     }
    1497     .container .jobs-group .job-date {
    1498         width: 75px;
    1499         text-align: center;
    1500         padding-right: 0;
    1501         float: left;
    1502         line-height: 1.1em;
    1503         padding-top: 3px;
    1504         padding-left: 20px;
    1505         margin-left: -75px;
    1506     }
    1507     .container .jobs-group .job-title.grid_4 {
    1508         width: 250px;
    1509         padding-right: 10px;
    1510         width: 311px;
    1511         padding-left: 10px;
    1512     }
    1513     .container .jobs-group .job-type {
    1514         display: inline-block;
    1515         text-align: inherit;
    1516         width: 120px;
    1517         padding-right: 10px;
    1518         padding-left: 10px;
    1519         font-size: 12px;
    1520         color: #595959;
    1521     }
    1522     .container .jobs-group .job-location {
    1523         display: inline-block;
    1524         width: 181px;
    1525         text-align: right;
    1526         padding-left: 0;
    1527         padding-right: 0;
    1528     }
    1529     .row.row-0, .row.row-1 {
    1530         padding-left: 65px;
    1531     }
    1532 }
    1533 
    1534 @media only screen and (max-width: 600px) {
    1535     .menu {
    1536         display: none;
    1537     }
    1538     .menu.mobile-pop {
    1539         display: block;
    1540     }
    1541     .menu-toggle {
    1542         color: #ddd;
    1543         display: block;
    1544         font-size: 18px;
    1545         padding-bottom: 20px;
    1546         text-align: center;
    1547     }
    1548     .menu-toggle:after {
    1549         content: '\f228';
    1550         font: 16px 'dashicons';
    1551         margin-left: 15px;
    1552         vertical-align: middle;
    1553     }
    1554 
    1555 }
    1556 
    1557 @media only screen and (max-width: 479px) {
    1558     #subhead .container, #content {
    1559         padding-left: 10px;
    1560         padding-right: 10px;
    1561         margin-left: 0;
    1562         margin-right: 0;
    1563         width: 100%;
    1564     }
    1565     #subhead .container .grid_9 {
    1566         width: 100%;
    1567     }
    1568     .container .main-navigation.grid_8,
    1569     .main-navigation ul,
    1570     .main-navigation li {
    1571         float: none;
    1572     }
    1573     .main-navigation li.current_page_item {
    1574         border: 2px solid #dfdfdf;
    1575     }
    1576     .menu.mobile-pop {
    1577         margin-bottom: 1.5rem;
    1578     }
    1579     .container .content-area.grid_9, .container .widget-area.grid_3 {
    1580         width: 100%;
    1581     }
    1582     .container .jobs-group a {
    1583         word-wrap: break-word;
    1584     }
    1585     .container .jobs-group .job-list-head.grid_7 {
    1586         width: 235px;
    1587     }
    1588     .container .jobs-group .job-title.grid_4 {
    1589         width: 100%;
    1590         padding-left: 0;
    1591     }
    1592     .container .jobs-group .job-date {
    1593         margin-left: -75px;
    1594         font-size: 0.9em;
    1595     }
    1596     .container .jobs-group .job-type {
    1597         display: inherit;
    1598         width: inherit;
    1599         padding-left: 0;
    1600     }
    1601     .container .jobs-group .job-location {
    1602         display: block;
    1603         width: inherit;
    1604         text-align: left;
    1605         padding-left: 0;
    1606     }
    1607     .row.row-0, .row.row-1 {
    1608         padding-left: 65px;
    1609     }
    1610     .container .jobs-group .row-head {
    1611         position: relative;
    1612     }
    1613     .job-list-head h2:before {
    1614         font-size: 28px;
    1615         margin-top: 2px;
    1616     }
    1617     .job-list-head h2 {
    1618         font-size: 1.35em;
    1619         margin: 0;
    1620     }
    1621     .container .jobs-group .jobs-count.grid_2 {
    1622         position: absolute;
    1623         right: 0;
    1624         top: 4px;
    1625         font-size: 1em;
    1626     }
    1627     .job-list-head h2 span.posts-count {
    1628         display: inline;
    1629         font-size: 0.7em;
    1630     }
    1631     .container .jobs-group .jobs-count.grid_2 span {
    1632         display: none;
    1633     }
    1634 }
    1635 
    1636 @media only screen and (max-width: 400px) {
    1637     #subhead .container, #content,
    1638     .container .content-area.grid_9, .container .widget-area.grid_3 {
    1639         padding-left: 0;
    1640         padding-right: 0;
    1641     }
    1642     input[type="button"].submit-job,
    1643     input[type="submit"].submit-job,
    1644     #si_contact_form1 input[type="submit"],
    1645     .post-job {
    1646         margin-right: 0;
    1647     }
    1648     .entry-header,
    1649     .entry-content,
    1650     span.edit-link {
    1651         margin-left: 5px;
    1652         margin-right: 5px;
    1653     }
    1654 }
     1591    }
     1592}
Note: See TracChangeset for help on using the changeset viewer.