media/css/foundation/annual-report.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 *;

// * -------------------------------------------------------------------------- */
// Hero image & banner heading
.c-banner {
    color: $color-white;

    .c-banner-content {
        background-position: top center;
        background-repeat: no-repeat;
        padding: $spacing-lg;
        position: relative;
    }

    h1 {
        color: $color-white;
        line-height: 1.3;
        max-width: 9em;

        span {
            @include box-decoration-break(clone);
            background-color: $color-black;
            padding: 0 $spacing-sm;
        }
    }

    @media #{$mq-sm} {
        .c-banner-content {
            min-height: 200px;
            padding: $spacing-xl;
        }
    }

    @media #{$mq-md} {
        .c-header-container {
            width: 70%;
            margin: 0 auto;
        }

        .c-banner-content {
            padding: $spacing-xl 0;
        }
    }

    @media #{$mq-lg} {
        .c-banner-content {
            min-height: 300px;
        }
    }
}

.c-banner + .mzp-l-content {
    padding-top: 0;
}

// 2018
#annual-2018 {
    .c-banner .c-banner-content {
        @include at2x('/media/img/foundation/annualreport/2018/som-2018-small.jpg', 760px, 394px);

        @media #{$mq-md} {
            @include at2x('/media/img/foundation/annualreport/2018/som-2018-large.jpg', 1250px, 394px);
        }
    }
}

// 2017
#annual-2017 {
    .c-banner .c-banner-content {
        @include at2x('/media/img/foundation/annualreport/2017/som-2017-small.jpg', 760px, 394px);

        @media #{$mq-md} {
            @include at2x('/media/img/foundation/annualreport/2017/som-2017-large.jpg', 1250px, 394px);
        }
    }
}

// 2016
#annual-2016 {
    .c-banner .c-banner-content {
        @include at2x('/media/img/foundation/annualreport/2016/som-2016-mobile.jpg', 760px, 394px);

        @media #{$mq-md} {
            @include at2x('/media/img/foundation/annualreport/2016/som-2016-desktop.jpg', 1250px, 394px);
        }
    }
}

// 2015
#annual-2015 {
    .c-banner .c-banner-content {
        @include at2x('/media/img/foundation/annualreport/2015/bg-banner-mobile.jpg');
        @include background-size(auto, 100%);

        @media #{$mq-sm} {
            @include background-size(100%, auto);
        }

        @media #{$mq-md} {
            @include at2x('/media/img/foundation/annualreport/2015/bg-banner-desktop.jpg', 100%, auto);
        }
    }
}

// 2014
#annual-2014 {
    .c-banner .c-banner-content {
        background-image: url('/media/img/foundation/annualreport/2014/bg-banner-mobile.jpg');
        @include background-size(auto, 100%);

        @media #{$mq-sm} {
            @include background-size(100%, auto);
        }

        @media #{$mq-md} {
            background-image: url('/media/img/foundation/annualreport/2014/bg-banner-tablet.jpg');
        }

        @media #{$mq-lg} {
            background-image: url('/media/img/foundation/annualreport/2014/bg-banner-desktop.jpg');
        }
    }
}

// 2013
#annual-2013 {
    .c-banner .c-banner-content {
        background-image: url('/media/img/foundation/annualreport/2013/bg-banner-mobile.jpg');
        @include background-size(auto, 100%);

        @media #{$mq-sm} {
            @include background-size(100%, auto);
        }

        @media #{$mq-md} {
            background-image: url('/media/img/foundation/annualreport/2013/bg-banner-tablet.jpg');
        }

        @media #{$mq-lg} {
            background-image: url('/media/img/foundation/annualreport/2013/bg-banner-desktop.jpg');
        }
    }
}

// 2012
#annual-2012 {
    .c-banner .c-banner-content {
        @include background-size(auto, 100%);
        background-image: url('/media/img/foundation/annualreport/2012/bg-banner-mobile.jpg');

        .c-header-container h1 {
            width: 50%;
        }

        @media #{$mq-sm} {
            @include background-size(auto, 300px);
            background-image: url('/media/img/foundation/annualreport/2012/bg-banner-tablet.jpg');
            background-position: top -30px right 0;
            height: 300px;
        }

        @media #{$mq-md} {
            @include background-size(auto, 400px);
            background-image: url('/media/img/foundation/annualreport/2012/bg-banner-desktop.jpg');
            background-position: top -90px right -160px;
            height: 400px;
        }

        @media #{$mq-lg} {
            @include background-size(auto, 400px);
            background-image: url('/media/img/foundation/annualreport/2012/bg-banner-desktop.jpg');
            background-position: top -90px right -30px;
            height: 400px;
        }
    }
}

// * -------------------------------------------------------------------------- */
// 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;
}

.c-media {
    margin: $spacing-lg 0;

    h3 {
        @include visually-hidden;
    }
}

// * -------------------------------------------------------------------------- */
// Financial table

.financial-table {
    max-width: 100%;
    overflow-x: scroll;
    margin: 40px auto;

    @media #{$mq-lg} {
        max-width: none;
        overflow-x: visible;
    }
}

// * -------------------------------------------------------------------------- */
// Page footer

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

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

        a {
            @include transition(background-color 0.1s 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),));
            }
        }
    }
}