media/css/mozorg/contribute.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/.

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

@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/includes/fonts/metropolis';
@import '~@mozilla-protocol/core/protocol/css/components/section-heading';

.contribute-intro {
    overflow: hidden;
    padding-bottom: 90%;
    position: relative;

    @media #{$mq-md} {
        padding-bottom: 80%;
    }

    @media #{$mq-lg} {
        padding-bottom: $layout-xl;
        padding-top: 0;
    }

    @media #{$mq-xl} {
        padding-bottom: $layout-xl + $layout-md;
    }

    .contribute-intro-content {
        @media #{$mq-lg} {
            margin-top: $layout-xl;
            max-width: 40%;
        }
    }

    .contribute-intro-heading {
        @include text-title-lg;
        padding-bottom: $spacing-md;
    }

    .contribute-intro-media-wrapper {
        @include bidi(((left, -10px, auto),(right, auto, -10px),));
        position: absolute;
        width: 100%;

        @media #{$mq-lg} {
            @include bidi(((right, -25px, auto),(left, auto, -25px),));
            left: auto;
            top: $spacing-md;
            width: 50%;
        }
    }
}

.contribute-section-subheading {
    @include text-title-xs;
}

.contribute-hero {
    background-color: $color-marketing-gray-20;
}

.contribute-card-container {
    .contribute-card-wrapper {
        @include transition(transform 150ms ease-in-out);
        background: $color-white;

        &:hover,
        &:focus {
            @include transform(translateZ(0) scale(1.02));
            backface-visibility: hidden;
        }
    }

    .contribute-card-content {
        padding: $spacing-md;
    }

    .contribute-card-content-tags {
        margin-bottom: $spacing-sm;
        min-height: $layout-md;
    }

    .contribute-card-tag-bold {
        font-weight: bold;
    }

    .mzp-c-card-media-wrapper {
        background-color: $color-moz-neon-green;
    }
}

@supports (display:flex) {
    .contribute-card-container {
        @media #{$mq-sm} {
            display: flex;
            flex-wrap: wrap;
        }

        // protocol override to avoid over-frequent word breaks
        &.mzp-l-card-quarter .mzp-c-card {
            @media #{$mq-lg} {
                @include bidi((
                    (float, left, right),
                    (margin-left, 0, $spacing-xl),
                    (margin-right, $spacing-xl, 0),
                ));
                width: calc(50% - (#{$spacing-xl} * 0.5));

                &.mzp-c-card-extra-small,
                &,
                &.mzp-c-card-medium,
                &.mzp-c-card-large {
                    max-width: 100%;
                }

                &:nth-child(even) {
                    margin-left: 0;
                    margin-right: 0;
                }
            }
            @media (min-width: 1100px) {
                @include bidi((
                    (margin-left, 0, $spacing-xl),
                    (margin-right, $spacing-xl, 0),
                ));
                width: calc(25% - (#{$spacing-xl} - (#{$spacing-xl} * 0.25)));

                &:nth-child(even) {
                    @include bidi((
                        (margin-left, 0, $spacing-xl),
                        (margin-right, $spacing-xl, 0),
                    ));
                }

                &:nth-child(4n) {
                    @include bidi(((margin-right, 0, margin-left, 0),));
                }

                &:nth-child(4n+1) {
                    @include bidi(((clear, left, right),));
                }
            }
        }

        // end override

        .contribute-card {
            display: flex;
            flex: 1 0 45%;

            @media #{$mq-md} {
                flex: auto;
            }
        }

        .contribute-card-wrapper {
            display: flex;
            flex-direction: column;
            max-width: 100%;
        }

        .contribute-card-content {
            flex: 1;

            // fallback when hyphens aren't supported
            overflow-wrap: break-word;
            word-wrap: break-word; // IE specific overflow-wrap fix
        }

        @supports (hyphens: auto) {
            .contribute-card-content {
                overflow-wrap: unset;
                word-wrap: unset;
            }

            .mzp-c-card-title {
                hyphens: auto;
            }
        }
    }
}

.contribute-banner-wrapper {
    @include border-box;
    margin: 0 auto;
    max-width: $content-max;
    min-width: $content-xs;

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

    @media #{$mq-lg} {
        margin-bottom: $layout-xl;
        padding: $layout-xs $layout-xl 0;
    }
}

.contribute-banner {
    padding: $layout-xl $layout-md $layout-md;

    @media #{$mq-lg} {
        .contribute-banner-content {
            @include bidi(((margin-left, 200px, auto),(margin-right, auto, 200px),));
            width: 60%;
            max-width: 495px;
        }

        .contribute-banner-cta {
            @include bidi(((margin-left, 200px, auto),(margin-right, auto, 200px),));
        }
    }
}

@supports (display:flex) {
    @media #{$mq-lg} {
        .contribute-banner {
            align-items: center;
            display: flex;
            justify-content: space-between;
            min-height: 260px;
            padding-bottom: 0;
            padding-top: 0;
            position: relative;
        }

        .contribute-banner-cta {
            @include bidi(((margin-left, $layout-xl, auto),(margin-right, auto, $layout-xl),));
            flex: 1 0 auto;
        }
    }
}

.contribute-banner-gethelp {
    background: $color-ink-80 url('/media/img/contribute/contribute-gethelp-banner-bg.jpg') center top no-repeat;
    background-size: cover;
    color: $body-text-color-inverse;

    @supports (--css: variables) {
        color: var(--body-text-color-inverse);
    }

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

    .contribute-banner-gethelp-title {
        @include font-size(24px);
        color: $title-text-color-inverse;
        position: relative;

        @supports (--css: variables) {
            color: var(--title-text-color-inverse);
        }

        @media #{$mq-lg} {
            @include font-size(40px);
        }

        &::before {
            @include bidi(((left, 0, auto),(right, auto, 0),));
            background-image: url('/media/img/contribute/contribute-banner-gethelp-icon.svg');
            content: '';
            display: block;
            height: 40px;
            position: absolute;
            top: -65px;
            width: 40px;

            @media #{$mq-lg} {
                @include bidi(((left, -80px, auto),(right, auto, -80px),));
                top: auto;
            }
        }
    }
}

.contribute-banner-problems {
    @include bidi(((background-position, 15% -10px, 94% -10px),));
    background-image: url('/media/img/contribute/contribute-problems-bulb.svg');
    background-repeat: no-repeat;
    background-size: 60px 150px;

    @media #{$mq-sm} {
        @include bidi(((background-position, 8% -10px, 94% -10px),));
        background-position: 8% -10px;
        background-size: 50px 150px;
    }

    @media #{$mq-lg} {
        @include bidi(((background-position, (10% -45px, 96% 88%), (90% -45px, 13% 88%)),));
        background-image:
            url('/media/img/contribute/contribute-problems-bulb.svg'),
            url('/media/img/contribute/contribute-problems-fly.svg');
        background-repeat: no-repeat;
        background-size: 86px 241px, 33%;
        border: 4px solid $color-moz-light-gray;
    }

    .contribute-banner-problems-title {
        @include font-size(24px);
        @include bidi(((margin-left, $layout-xl, auto),(margin-right, auto, $layout-xl),));

        span {
            display: inline;
            background-color: #ffc900;
            box-shadow: 10px 0 0 #ffc900, -10px 0 0 #ffc900;
            @include box-decoration-break(clone);
        }

        @media #{$mq-lg} {
            @include font-size(40px);
            margin-left: 0;
        }

        .contribute-banner-problems-wrapper {
            margin-bottom: $spacing-md;
        }
    }
}

.contribute-mission {
    margin-bottom: $layout-xl;

    .contribute-mission-intro {
        text-align: center;
        margin-bottom: $layout-md;

        @media #{$mq-lg} {
            padding-left: $layout-2xl;
            padding-right: $layout-2xl;
        }
    }

    .contribute-mission-title {
        background-color: $color-black;
        color: $color-white;
        display: inline-block;
        padding-left: $spacing-sm;
        padding-right: $spacing-sm;

        @media #{$mq-lg} {
            @include font-size(48px);
        }
    }

    .contribute-mission-cards {
        list-style: none;
        margin-bottom: $layout-xl;
    }

    .contribute-mission-card {
        @include bidi(((float, left, right),));
        width: 50%;

        a {
            @include bidi(((padding, $spacing-md $spacing-md $spacing-md $spacing-2xl, $spacing-md $spacing-2xl $spacing-md $spacing-md),));
            border: 4px solid transparent;
            color: $color-black;
            display: block;
            text-decoration: none;
            transition: border-color 100ms ease-in-out;

            &:hover,
            &:focus {
                border-color: $color-marketing-gray-20;

                & > h3 {
                    text-decoration: underline;
                }
            }
        }

        h3 {
            @include font-size(24px);
            line-height: 1;
            margin-bottom: $spacing-xs;
            position: relative;

            &::before {
                @include bidi(((left, -34px, auto),(right, auto, -34px),));
                background-repeat: no-repeat;
                background-size: 24px 24px;
                content: '';
                height: 24px;
                position: absolute;
                width: 24px;
            }

            &.contribute-mission-learn-icon::before {
                background-image: url('/media/img/logos/m24/symbol-black.svg');
            }

            &.contribute-mission-event-icon::before {
                background-image: url('/media/img/contribute/icon/cal.svg');
            }

            &.contribute-mission-donate-icon::before {
                background-image: url('/media/img/contribute/icon/heart.svg');
            }

            &.contribute-mission-follow-icon::before {
                background-image: url('/media/img/icons/social/bluesky/black.svg');
            }
        }

        p {
            margin-bottom: 0;
        }
    }
}

@supports (display:grid) {
    .contribute-mission {
        .contribute-mission-cards {
            display: grid;
            grid-row-gap: $spacing-xl;
            margin-bottom: 0;

            @media #{$mq-md} {
                grid-template-columns: 1fr 1fr;
                grid-column-gap: $spacing-lg;
            }

            @media #{$mq-lg} {
                padding-left: $layout-xl;
                padding-right: $layout-xl;
                grid-column-gap: $spacing-xl;
            }
        }

        .contribute-mission-card {
            float: none;
            width: auto;
        }
    }
}