media/css/mozorg/leadership.scss

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use 'sass:color';

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/modal';
@import '~@mozilla-protocol/core/protocol/css/components/sidebar-menu';
@import '~@mozilla-protocol/core/protocol/css/includes/mixins/details';
@import '~@mozilla-protocol/core/protocol/css/templates/main-with-sidebar';
@import '../cms/rich-text';

@font-face {
    font-family: FA-Icons-Contact;
    src:
        url('/media/fonts/icons-contact.woff2?20-12-2016') format('woff2'),
        url('/media/fonts/icons-contact.woff?20-12-2016') format('woff');
    font-weight: normal;
    font-style: normal;
}

.visually-hidden {
    @include visually-hidden;
}

// Navigation
#page-nav {
    margin: $spacing-md auto;

    ul {
        margin: 0;
    }

    @media #{$mq-md} {
        li {
            display: inline-block;
            border-bottom: 0;
            padding-right: $layout-sm;
        }
    }
}

// Headings
.section-title {
    @include text-title-md;
    margin: 0.5em 0;
}

.section-intro {
    @include clearfix;
    margin: 0 0 2em;
}

.group-title {
    @include text-title-sm;
    margin: 1em 0;
    padding-top: 0.75em;
    border-top: 2px solid $color-marketing-gray-30;

    a {
        text-decoration: none;
        color: $color-black;

        &:hover,
        &:focus {
            text-decoration: underline;
            color: $color-link;
        }
    }
}

.leadership-title {
    @include text-title-lg;
    border-bottom: 2px solid $color-marketing-gray-30;
    margin: 1em 0;
    padding-bottom: 0.75em;

    &.compact {
        border-bottom: 0;
        padding-bottom: 0;
        margin-bottom: 0;
    }
}

main .leadership-section:first-of-type .leadership-title:first-of-type {
    margin-top: 0;
}

// Headshot galleries
.gallery {
    @include clearfix;
    margin: 0 auto;
}

.vcard {
    width: 160px;
    padding: 0 $spacing-lg 0.25em;
    margin: 0 auto $spacing-lg;
    position: relative;

    .headshot {
        @include transition(transform 200ms ease, box-shadow 200ms ease);
        background: $color-white;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.1);
        border: 2px solid $color-marketing-gray-20;
        color: $color-black;
        display: block;
        margin: 0 -20px 10px;
        padding: $spacing-md $spacing-md $spacing-sm;
        text-align: center;
        text-decoration: none;
    }

    &:focus {
        outline: 0;
    }

    .fn {
        @include text-body-md;
        font-weight: bold;
    }

    .photo {
        margin: 0 0 5px;
        width: 160px;
        height: 160px;
        outline: 1px solid rgba(0, 0, 0, 0.05);
    }

    .title,
    .note,
    .elsewhere,
    .utility {
        @include text-body-sm;
    }

    .title {
        font-weight: bold;
        margin-bottom: 0;

        br {
            display: none;
        }
    }

    .note {
        color: $color-marketing-gray-90;
    }

    .elsewhere,
    .utility {
        margin-top: 1em;

        a {
            padding-left: 20px;
            position: relative;

            &::before {
                background-position: center top;
                background-repeat: no-repeat;
                background-size: contain;
                color: $color-link;
                content: '';
                height: 1em;
                left: 0;
                position: absolute;
                top: 0.125em;
                width: 1em;
            }
        }

        a.website::before { background-image: url('/media/protocol/img/icons/globe.svg'); }
        a.twitter::before { background-image: url('/media/protocol/img/icons/social/x/black.svg'); }
        a.mastodon::before { background-image: url('/media/protocol/img/icons/social/mastodon/black.svg'); }
        a.profile::before { background-image: url('/media/protocol/img/icons/accounts.svg'); }
        a.file::before { background-image: url('/media/protocol/img/icons/file-image.svg'); }
        a.link::before { background-image: url('/media/protocol/img/icons/link.svg'); }
    }

    .callout {
        padding: $spacing-md $spacing-md $spacing-xs;
        background: $color-light-gray-20;
        font-style: italic;
    }

    .elsewhere,
    .utility,
    .person-bio {
        @include hidden;
    }

    .elsewhere {
        .elsewhere-website {
            @include visually-hidden;
        }
    }

    a {
        color: $color-black;
        text-decoration: none;

        &:hover .fn,
        &:focus .fn,
        &:active .fn {
            color: $color-link;
            text-decoration: underline;
        }
    }

    &.has-bio:hover,
    &.has-bio:focus {
        cursor: pointer;

        .headshot {
            transform: translate(0, -3px);
            box-shadow: 2px 6px 5px rgba(0, 0, 0, 0.1);
        }

        .photo {
            outline: 2px solid color.adjust($color-link, $alpha: 0.5);
        }

        .fn {
            color: $color-link;
            text-decoration: underline;
        }
    }

    @media #{$mq-sm} {
        @include bidi(((float, left, right),));
        margin: 0 $spacing-sm $spacing-lg;

        &:nth-child(odd) {
            @include bidi(((clear, left, right),));
        }
    }
}

@supports (display: grid) {
    @media #{$mq-sm} {
        .gallery {
            display: grid;
            grid-gap: $spacing-md $spacing-lg;
            grid-template-columns: repeat(auto-fit, minmax(180px, 200px));
        }

        .vcard {
            float: none;
            clear: none;
        }
    }
}

// Show the bios when JS fails.
// Not every person has a bio, so these get some special treatment.
.no-js .vcard.has-bio {
    border-bottom: 1px solid $color-marketing-gray-60;
    cursor: auto;
    float: none;
    margin: 0 0 40px;
    padding: 0 10px 40px;
    width: auto;

    .elsewhere,
    .utility,
    .person-bio {
        display: block;
    }

    .headshot {
        background: transparent;
        border: 0;
        box-shadow: none;
        cursor: auto;
        margin: 0;
        padding: 0;
    }

    &:hover .headshot {
        box-shadow: none;
        transform: none;

        .photo {
            outline: 0;
        }

        .fn {
            color: inherit;
        }
    }

    .photo {
        background: #fff;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.1);
        float: right;
        margin: 0 0 30px 30px;
        padding: 10px;
        outline: 0;
    }

    .fn {
        @include text-title-md;
        text-align: left;
    }

    .person-bio {
        margin: 1em 0;

        p {
            margin: 0 0 1em;
        }
    }

    a {
        color: $color-link;
        text-decoration: underline;
    }
}

.mzp-c-modal .mzp-c-modal-overlay-contents {
    padding: 0;

    .vcard {
        background: $color-white;
        color: $color-black;
        cursor: auto;
        float: none;
        min-height: 250px;
        padding: 0;
        padding: $spacing-md;
        width: auto;

        &:hover,
        &:focus {
            cursor: auto;

            .headshot {
                transform: none;

                .photo {
                    outline: 1px solid rgba(0, 0, 0, 0.05);
                }
            }
        }

        a {
            color: $color-link;

            &:hover,
            &:focus,
            &:active {
                color: color.adjust($color-link, $lightness: 10%);
                text-decoration: underline;
            }
        }

        @media #{$mq-md} {
            padding: $spacing-xl;
        }
    }

    .headshot {
        background: transparent;
        border: 0;
        box-shadow: none;
        margin: 0;
        padding: 0;

        :hover &,
        :focus & {
            box-shadow: none;
        }

        .photo {
            box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.1);
            float: none;
            height: 160px;
            margin: 0 auto $spacing-lg;
            width: 160px;

            @media #{$mq-sm} {
                float: right;
                margin: 0 0 2em $layout-md;
            }

            @media #{$mq-md} {
                float: right;
                height: 250px;
                margin: 0 0 2em $layout-md;
                width: 250px;
            }
        }

        .fn {
            @include bidi(((text-align, left, right),));
            @include text-title-md;
            color: $color-black;
            text-decoration: none;
        }
    }

    .person-info {
        margin: 0 0 2em;
    }

    .title {
        @include text-body-lg;
        line-height: 1.3;

        br {
            display: block;
        }
    }

    .note {
        color: $color-marketing-gray-90;
    }

    .elsewhere,
    .utility,
    .person-bio {
        display: block;
    }
}