media/css/foundation/annual-report-2019-2020.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 '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($font-path: '/media/protocol/fonts', $image-path: '/media/protocol/img');
@use '~@mozilla-protocol/core/protocol/css/components/feature-card';
@use '~@mozilla-protocol/core/protocol/css/components/modal';
@use '../protocol/components/video';

// * -------------------------------------------------------------------------- */
// Hero image & banner heading
.c-hero-banner {
    background: url('/media/img/foundation/annualreport/2019/pixel-mobile-bg.svg') right center no-repeat;
    background-size: contain;
    margin-bottom: $spacing-lg;
    padding-top: $spacing-lg;

    .l-highlight {
        background: $color-green-40;
        color: $color-black;
        display: inline-block;
        font-weight: bold;
        line-height: 0.7;
        padding: 0;
    }

    .right {
        align-self: flex-start;
        margin-left: $spacing-sm;
    }

    h1 {
        align-items: flex-start;
        color: $color-black;
        display: flex;
        font-weight: normal;
        justify-content: center;
        line-height: 0.9;
    }

    .left {
        position: relative;
        text-align: right;
    }

    img {
        display: block;
        margin-right: 1px;
        margin-top: $spacing-sm;
        max-width: $layout-2xl;
        position: absolute;
        right: 0;
    }

    @media #{$mq-md} {
        background-image: url('/media/img/foundation/annualreport/2019/pixel-bg.svg');
        background-position: right center;
        background-size: auto 100%;
        padding-top: $spacing-2xl;
        margin-bottom: $spacing-2xl;

        h1 {
            @include font-size(80px);
        }

        img {
            margin-top: 14px;
            max-width: $content-xs;
        }
    }

    @media #{$mq-lg} {
        h1 {
            font-size: 7rem;
        }

        img {
            max-width: $content-sm;
        }
    }
}

.c-page-intro {
    h2 {
        @include text-title-md;
    }

    .mzp-c-video {
        margin-top: $layout-md;
    }
}

.leadership {
    .leadership-intro {
        @include text-title-md;
        font-weight: 100;

        strong {
            font-weight: bold;
        }
    }

    .mzp-c-card-title {
        @include text-title-md;
        margin-bottom: $spacing-2xl;
        font-weight: normal;
    }

    .mzp-c-card-media-wrapper {
        background-color: transparent;
    }
}

// * -------------------------------------------------------------------------- */
// Content sections
.c-intro-section {
    p {
        @include text-title-sm;
        font-family: var(--title-font-family);
        margin-bottom: 0;
    }
}

.c-intro-section,
.c-content-section {
    padding: $spacing-lg 0;

    .c-copy-wrapper {
        h2 {
            @include text-title-sm;
        }

        h3 {
            @include text-title-xs;
        }

        img {
            margin: $spacing-xl auto;
        }

        .c-copy-intro {
            font-style: italic;
        }
    }

    @media #{$mq-lg} {
        .c-copy-wrapper {
            @include clearfix;
            margin: 0 auto;
            width: 90%;

            header {
                @include bidi(((float, left, right),));
                width: 30%;
            }

            .c-copy {
                @include bidi(((float, right, left),));
                width: 65%;
            }
        }

        &:nth-child(even) {
            padding: $spacing-2xl 0 $spacing-lg;
        }
    }

    @media #{$mq-xl} {
        padding: $spacing-2xl 0 $spacing-lg;

        .c-copy-wrapper {
            width: 70%;
        }
    }
}

.c-content-section:nth-child(odd) {
    background: $color-marketing-gray-20;
    padding: $spacing-2xl $spacing-lg $spacing-lg;
}

// * -------------------------------------------------------------------------- */
// Page footer
.c-site-footer {
    ul {
        margin: 0 auto $spacing-xl;
    }

    li {
        display: block;
        margin: $spacing-lg auto;

        a {
            @include transition(background-color 100ms ease-in-out);
            background-color: $color-link;
            color: $color-white;
            display: block;
            font-weight: bold;
            height: 100%;
            line-height: 1.5;
            min-height: 60px;
            padding: $spacing-lg;
            text-decoration: none;
            text-transform: uppercase;

            small {
                display: block;
                font-weight: 100;
                text-transform: none;
            }

            &:hover,
            &:active,
            &:focus {
                background-color: $color-link-hover;
                color: $color-white;
                text-decoration: none;
            }
        }
    }

    @media #{$mq-lg} {
        ul {
            @include flexbox;
            @include align-items(stretch);
            width: 70%;
        }

        li {
            flex: 1;

            &:first-child a {
                @include bidi(((margin-right, 10px, margin-left, 0),));
            }

            &:last-child a {
                @include bidi(((margin-left, 10px, margin-right, 0),));
            }
        }
    }
}

// Fade in lazy images
.lazy-image-container .mzp-c-card-image {
    opacity: 1;
    transition: opacity 300ms;
}

.lazy-image-container .mzp-c-card-image[data-src] {
    opacity: 0;
}

// Hide enhanced content if JS isn't available
.no-js-hidden {
    .no-js & {
        @include hidden;
    }
}

.js-modal-content {
    .js & {
        @include hidden;
    }

    section + section {
        margin-top: $spacing-2xl;
        padding-top: $spacing-2xl;
        border-top: 1px solid $color-black;
    }
}

.mzp-c-modal .mzp-c-modal-overlay-contents .mzp-c-modal-content {
    display: block;
}

.has-modal {
    cursor: pointer;
}

.highlight {
    @include box-decoration-break(clone);
    line-height: 1.3;
    padding: 0 $spacing-sm;

    &.dark {
        background-color: $color-black;
        color: $color-white;
    }

    &.green {
        background: $color-green-40;
        color: $color-black;
    }

    &.plum {
        background: #5a61ef;
        color: $color-white;
    }
}

.pixel-effect {
    position: relative;

    &::after {
        content: ' ';
        background: url('/media/img/foundation/annualreport/2019/pixel-small-bg.svg') center center no-repeat;
        background-size: contain;
        width: 66px;
        height: 66px;
        top: -33px;
        right: 0;
        position: absolute;
        display: block;
        z-index: 1;
        @media #{$mq-lg} {
            top: -66px;
        }
    }
}

.c-som-list {
    border-left: 1px solid $color-black;
    margin: 0;
    padding: $spacing-xl 0;

    @media #{$mq-md} {
        width: 50%;
        margin-left: auto;
    }

    li {
        @include text-title-sm;
        font-family: var(--title-font-family);
        margin-left: $spacing-md;
        margin-bottom: $spacing-lg;
        padding-left: $spacing-sm;
        font-weight: 100;

        .highlight {
            margin-left: -$spacing-sm;
        }
    }

    a:link {
        color: $color-black;
    }
}

.mzp-c-modal-inner {
    background-color: $color-white;
    padding-top: $layout-lg;
}

.mzp-c-modal-overlay-contents {
    padding-top: $spacing-2xl;
    color: $color-black;

    a:link,
    a:visited {
        color: $color-black;

        &:hover,
        &:focus,
        &:active {
            color: $link-color-hover;

            @supports (--css: variables) {
                color: var(--link-color-hover);
            }
        }
    }

    .video-play {
        position: static;
    }

    .mzp-c-card-feature-content-container {
        position: relative;

        img {
            margin-top: -$spacing-2xl;
            margin-bottom: $spacing-md;
            width: 100%;
            max-width: $content-sm;
            height: auto;
            display: none;

            @media #{$mq-md} {
                display: block;
            }

            @media #{$mq-lg} {
                margin-top: -$layout-lg;
            }
        }

        p {
            margin-bottom: $spacing-md;
        }
    }
}

.mzp-c-modal-close {
    background: $color-green-40;
    border-radius: 100%;

    .mzp-c-modal-button-close {
        background-image: url('/media/protocol/img/icons/close.svg');
    }
}

.c-modal-next {
    @extend .mzp-c-modal-close; /* stylelint-disable-line scss/at-extend-no-missing-placeholder  */
    right: 3.75rem;

    .hide-next & {
        display: none;
    }

    .c-modal-button-next {
        background-image: url('/media/protocol/img/icons/arrow-right.svg');
    }
}

.c-modal-prev {
    @extend .mzp-c-modal-close; /* stylelint-disable-line scss/at-extend-no-missing-placeholder  */
    right: 7.1rem;

    .hide-next & {
        right: 3.75rem;
    }

    .hide-prev & {
        display: none;
    }

    .c-modal-button-prev {
        background-image: url('/media/protocol/img/icons/arrow-left.svg');
    }
}

.c-modal-button-next,
.c-modal-button-prev {
    @extend .mzp-c-modal-button-close; /* stylelint-disable-line scss/at-extend-no-missing-placeholder */
}

.c-section-intro-bg {
    @media #{$mq-lg} {
        background: url('/media/img/foundation/annualreport/2019/moz_site_som_fighting_for_people_left.svg') left center no-repeat, url('/media/img/foundation/annualreport/2019/moz_site_som_fighting_for_people_right.svg') right center no-repeat;
        background-size: auto 27vw;
    }
}

.mzp-l-content + .c-section-intro-bg {
    margin-top: $spacing-2xl;
}

.c-section-intro {
    margin: 0 auto;
    padding-top: $layout-lg;
    max-width: $content-md;
    text-align: left;

    h2 {
        @include text-title-lg;
        font-weight: 100;
        text-align: center;
    }
}

.c-article-list {
    .mzp-l-card-quarter,
    .mzp-l-card-half {
        .mzp-c-card-title {
            @include text-title-xs;
        }
    }

    .mzp-l-card-hero {
        .mzp-c-card + .mzp-c-card {
            .mzp-c-card-title {
                @include text-title-xs;
            }
        }
    }

    .mzp-c-card-feature-title,
    .mzp-c-card-title {
        font-weight: 100;
    }

    .mzp-c-card-feature .mzp-c-card-feature-title {
        @include text-title-md;

        @media #{$mq-lg} {
            @include text-title-lg;
        }
    }

    .mzp-c-card-feature {
        margin-bottom: $spacing-lg;
    }

    .mzp-c-card {
        background-color: transparent;

        &:hover {
            background-color: $color-white;
        }
    }
}

.c-report-pdfs {
    border-top: 1px solid $color-light-gray-90;
    padding-top: $spacing-xl;

    li {
        text-align: center;
        margin-bottom: $spacing-xl;

        @media #{$mq-md} {
            width: 50%;
            padding: $spacing-xl 0;

            &:first-child {
                border-right: 1px solid $color-light-gray-90;
            }
        }
    }

    span {
        @include text-title-xs;
        font-family: var(--title-font-family);
        font-weight: bold;
        display: block;
        margin-bottom: $spacing-md;
    }

    @media #{$mq-md} {
        padding-top: $spacing-2xl;
        width: 100%;
        display: flex;
        justify-content: space-around;
    }
}

.c-leadership-article {
    h3 {
        @include text-title-md;
        padding: $spacing-lg 0 $spacing-sm;

        span {
            display: inline-block;
            margin-right: $spacing-xs;
        }
        @media #{$mq-md} {
            @include text-title-sm;
            padding-top: $spacing-2xl;
        }
    }

    img {
        max-width: $screen-sm;
        display: block;
        margin: 0 auto $spacing-xl;
    }

    .mzp-c-card-image {
        @include bidi((
            (float, right, left),
            (margin, 0 0 $spacing-md $spacing-lg, 0 $spacing-lg $spacing-md 0),
        ));
        max-width: 100%;
    }
}

.c-leadership-article-title {
    margin-top: -$spacing-2xl;
    margin-bottom: $spacing-2xl;

    .highlight {
        @include text-title-xs;
        font-family: var(--title-font-family);
        font-weight: bold;
    }

    h2 {
        @include text-title-md;
        margin-bottom: 0;
        margin-top: $spacing-lg;
    }
}